/*==================================================
                MOBILE OVERLAY
==================================================*/

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,27,51,.55);

    backdrop-filter:blur(6px);

    opacity:0;

    visibility:hidden;

    transition:.35s var(--ease);

    z-index:1998;

}

.mobile-overlay.active{

    opacity:1;

    visibility:visible;

}

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

.mobile-sidebar{

    position:fixed;

    top:0;

    right:0;

    width:360px;

    max-width:90vw;

    height:100vh;

    background:var(--white);

    display:flex;

    flex-direction:column;

    transform:translateX(100%);

    transition:transform .45s var(--ease);

    box-shadow:-20px 0 60px rgba(0,0,0,.25);

    z-index:2000;

    overflow:hidden;

}

.mobile-sidebar.active{

    transform:translateX(0);

}

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

.mobile-header{

    background:linear-gradient(
        135deg,
        var(--royal-deep),
        var(--royal),
        var(--bright)
    );

    padding:24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.mobile-logo{

    display:flex;

    align-items:center;

    gap:15px;

}

.mobile-logo img{

    width:54px;

    height:54px;

    border-radius:50%;

    background:var(--white);

    padding:5px;

}

.mobile-logo h3{

    color:var(--white);

    font-size:22px;

    font-weight:700;

}

.mobile-logo span{

    color:rgba(255,255,255,.75);

    font-size:12px;

}

.close-menu{

    width:42px;

    height:42px;

    border:none;

    background:rgba(255,255,255,.15);

    color:var(--white);

    border-radius:50%;

    cursor:pointer;

    transition:.35s;

}

.close-menu:hover{

    background:var(--gold);

    color:var(--royal-deep);

}

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

.mobile-menu{

    flex:1;

    overflow-y:auto;

    padding:24px;

}

.mobile-menu li{

    list-style:none;

    margin-bottom:12px;

}

.mobile-menu a{

    display:flex;

    align-items:center;

    gap:15px;

    height:56px;

    padding:0 18px;

    border-radius:14px;

    color:var(--ink);

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.mobile-menu a i{

    width:24px;

    color:var(--royal);

}

.mobile-menu a:hover{

    background:rgba(47,111,237,.08);

    color:var(--royal);

    transform:translateX(5px);

}

.mobile-menu a.active{

    background:rgba(47,111,237,.10);

    border-left:4px solid var(--gold);

    color:var(--bright);

}

.mobile-menu a.active i{

    color:var(--gold);

}

/*==================================================
                DROPDOWN
==================================================*/

.dropdown-btn{

    width:100%;

    height:56px;

    padding:0 18px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border:none;

    background:none;

    cursor:pointer;

    border-radius:14px;

    transition:.35s;

}

.dropdown-btn:hover{

    background:rgba(47,111,237,.08);

}

.dropdown-btn span{

    display:flex;

    align-items:center;

    gap:15px;

    color:var(--ink);

    font-size:16px;

    font-weight:600;

}

.dropdown-btn span i{

    width:24px;

    color:var(--royal);

}

.dropdown-btn .fa-chevron-down{

    transition:.35s;

}

.dropdown-btn.open .fa-chevron-down{

    transform:rotate(180deg);

}

.dropdown-menu{

    max-height:0;

    overflow:hidden;

    transition:max-height .35s ease;

    padding-left:20px;

}

.dropdown-menu li{

    margin:6px 0;

}

.dropdown-menu a{

    height:44px;

    font-size:15px;

    color:var(--ink-soft);

}

/*==================================================
                FOOTER
==================================================*/

.mobile-footer{

    padding:22px;

    border-top:1px solid var(--smoke-2);

    text-align:left;

}

.mobile-btn{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    height:54px;

    margin-bottom:14px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        var(--royal),
        var(--bright)
    );

    color:var(--white);

    font-size:16px;

    font-weight:600;

    transition:.35s;

}

.mobile-btn:hover{

    transform:translateY(-3px);

}

.mobile-btn.secondary{

    background:linear-gradient(
        135deg,
        var(--gold),
        var(--gold-light)
    );

    color:var(--royal-deep);

}


/*==================================================
                MOBILE MENU ALIGNMENT
==================================================*/

@media (max-width:992px){

    .mobile-sidebar{

        text-align:left;

    }

    .mobile-sidebar .mobile-menu{

        text-align:left;

        align-items:stretch;

    }

    .mobile-sidebar .mobile-menu li{

        text-align:left;

    }

    .mobile-sidebar .mobile-menu li a{

        justify-content:flex-start;

        text-align:left;

    }

    .mobile-sidebar .mobile-menu li a i{

        flex-shrink:0;

    }

}


/*==================================================
                DESKTOP
==================================================*/

@media (min-width:993px){

    .mobile-sidebar,
    .mobile-overlay{

        display:none;

    }

}


/*==================================================
                TABLET / MOBILE
==================================================*/

@media (max-width:992px){

    .menu{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .search-box{

        width:46px;

        justify-content:center;

        padding:0;

    }

    .search-box input{

        display:none;

    }

}


/*==================================================
                SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .mobile-footer{

        padding:18px;

        text-align:left;

    }

    .mobile-btn{

        width:100%;

        justify-content:center;

    }

}