@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap');

/* ===================================== */
/* SIDEBAR */
/* ===================================== */

.user-sidebar{
    position:fixed;

    top:0;
    right:-350px;

    width:320px;
    height:100vh;

    background:#111;

    border-left:
    1px solid rgba(255,255,255,0.08);

    z-index:9999;

    padding:30px;

    transition:0.35s ease;

    display:flex;
    flex-direction:column;

    overflow-y:auto;

    box-shadow:
    -10px 0 40px rgba(0,0,0,0.45);
}

.user-sidebar.active{
    right:0;
}

/* ===================================== */
/* HEADER */
/* ===================================== */

.user-sidebar-header{
    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    padding-bottom:25px;

    border-bottom:
    1px solid rgba(255,255,255,0.08);
}

.user-sidebar-header h3{
    color:#fff;

    font-size:1.5rem;

    font-weight:700;
}

/* ===================================== */
/* CLOSE BUTTON */
/* ===================================== */

.close-sidebar-btn{
    font-size:2.3rem;

    color:#fff;

    cursor:pointer;

    transition:0.3s;
}

.close-sidebar-btn:hover{
    color:var(--primary);

    transform:rotate(90deg);
}

/* ===================================== */
/* LINE */
/* ===================================== */

.user-sidebar hr{
    border:none;

    height:1px;

    background:
    rgba(255,255,255,0.08);

    margin-bottom:35px;
}

/* ===================================== */
/* MENU */
/* ===================================== */

.user-sidebar-menu{
    list-style:none;

    display:flex;

    flex-direction:column;

    gap:10px;

    padding:0;

    margin:0;
}

.user-sidebar-menu li{
    width:100%;
}

.user-sidebar-menu li a{
    display:flex;

    align-items:center;

    width:100%;

    padding:16px 18px;

    border-radius:16px;

    color:#fff;

    text-decoration:none;

    font-size:1.05rem;

    font-weight:600;

    transition:0.3s;
}

.user-sidebar-menu li a:hover{
    background:
    rgba(182,137,91,0.12);

    color:var(--primary);

    transform:translateX(5px);
}

/* ===================================== */
/* LOGIN TOP BUTTON FIX */
/* ===================================== */

a.sidebar-top-login{

    display:inline-flex;

    justify-content:center;
    align-items:center;

    padding:14px 35px;

    border-radius:14px;

    background-color:#b6895b;

    color:#fff !important;

    text-decoration:none !important;

    font-size:1rem;

    font-weight:600;

    transition:0.3s;

    cursor:pointer;
}

a.sidebar-top-login:hover{

    transform:translateY(-2px);

    box-shadow:
    0 10px 25px rgba(182,137,91,0.25);
}

/* ===================================== */
/* LOGOUT BUTTON */
/* ===================================== */

.logout-btn-sidebar{
    width:100%;

    display:flex;

    justify-content:center;
    align-items:center;

    padding:16px;

    margin-top:auto;

    border-radius:18px;

    background:#ff4d4d;

    color:#fff;

    text-decoration:none;

    font-size:1rem;

    font-weight:700;

    transition:0.3s;
}

.logout-btn-sidebar:hover{
    transform:translateY(-3px);

    background:#ff2d2d;

    box-shadow:
    0 10px 25px rgba(255,77,77,0.25);
}

/* ===================================== */
/* RESPONSIVE */
/* ===================================== */

@media(max-width:500px){

    .user-sidebar{
        width:100%;
        right:-100%;
    }

    .user-sidebar.active{
        right:0;
    }
}