/* =========================================================
   MOBILE DRAWER
========================================================= */

.mobile-nav-drawer {

    position: fixed;

    top: 0;

    right: 0;

    height: 100vh;

    width: 320px;

    max-width: 90vw;

    background: #1b1b1b;

    color: #fff;

    z-index: 99999;

}



/* =========================================================
   OFFCANVAS BACKDROP
========================================================= */

.offcanvas-backdrop {

    z-index: 99998;

}





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

.mobile-nav-drawer .offcanvas-header {

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

}


.mobile-nav-drawer .offcanvas-title {

    font-size: 1.1rem;

    font-weight: 600;

}


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

.mobile-nav-drawer .btn-close {

    filter: invert(1);

}


/* =========================================================
   MOBILE SEARCH
========================================================= */

.mobile-search input {

    height: 48px;

    border-radius: 12px;

    border: 0;

}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.mobile-nav-links {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}


.mobile-nav-links a {

    color: #fff;

    text-decoration: none;

    font-size: 1.05rem;

    padding: 0.95rem 0;

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

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

}


.mobile-nav-links a:hover {

    opacity: 0.82;

}


.mobile-nav-links a:active {

    transform: translateX(3px);

}


/* =========================================================
   ACCOUNT AREA
========================================================= */

.mobile-account-links .btn {

    border-radius: 12px;

    height: 48px;

    font-weight: 600;

}