/* =========================================================
   INTERACTIVE SECTION-BASED MOBILE MENU
   NO OVERFLOW VERSION
========================================================= */

@media(max-width:991px){

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

    .header-navbar{

        position:relative;

        z-index:999999;

        overflow:visible;

        background:
            linear-gradient(
                135deg,
                #0f172a,
                #1e293b,
                #312e81
            );
    }

    /* =====================================================
       WRAPPER
    ===================================================== */

    .navbar-wrapper{

        min-height:74px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:12px;

        padding:10px 0;
    }

    /* =====================================================
       LOGO
    ===================================================== */

    .brand-logo{

        flex:1;

        min-width:0;

        max-width:calc(100% - 65px);

        display:flex;

        align-items:center;

        gap:10px;
    }

    .logo-icon{

        width:46px;
        height:46px;

        min-width:46px;

        border-radius:14px;
    }

    .logo-icon img{

        width:24px;
        height:24px;
    }

    .logo-text{

        min-width:0;
    }

    .logo-text h2{

        margin:0;

        font-size:15px;

        line-height:1.15;

        white-space:nowrap;

        overflow:hidden;

        text-overflow:ellipsis;
    }

    .logo-text span{

        font-size:8px;

        letter-spacing:1px;
    }

    /* =====================================================
       MOBILE TOGGLE
    ===================================================== */

    .mobile-toggle{

        width:46px;
        height:46px;

        min-width:46px;

        border:none;

        border-radius:14px;

        display:flex !important;

        align-items:center;

        justify-content:center;

        flex-direction:column;

        gap:5px;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            );

        position:relative;

        z-index:1000001;

        box-shadow:
            0 12px 24px rgba(37,99,235,.35);
    }

    .mobile-toggle span{

        width:20px;
        height:2.5px;

        background:#ffffff;

        border-radius:50px;

        transition:.35s ease;
    }

    /* ACTIVE */

    .mobile-toggle.active span:nth-child(1){

        transform:
            translateY(7px)
            rotate(45deg);
    }

    .mobile-toggle.active span:nth-child(2){

        opacity:0;
    }

    .mobile-toggle.active span:nth-child(3){

        transform:
            translateY(-7px)
            rotate(-45deg);
    }

    /* =====================================================
       MOBILE MENU PANEL
    ===================================================== */

    /* =====================================================
   MOBILE MENU PANEL
===================================================== */

    .nav-container{

        position:fixed;

        top:74px;

        left:0;

        width:100%;

        height:calc(100vh - 74px);

        background:
            linear-gradient(
                180deg,
                #020617,
                #0f172a,
                #111827
            );

        opacity:0;

        visibility:hidden;

        transform:translateY(-20px);

        transition:.35s ease;

        z-index:999999;

        overflow-y:auto;

        padding:20px;

        box-shadow:
            0 24px 60px rgba(0,0,0,.40);
    }

.nav-container.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);
}
    /* SHOW */

    .nav-container.show{

        opacity:1;

        visibility:visible;

        transform:
            translateY(0);

        max-height:calc(100vh - 90px);

        overflow-y:auto;

        padding:18px;
    }

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

    .mobile-menu-section{

        width:100%;

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

        border:
            1px solid rgba(255,255,255,.05);

        border-radius:20px;

        padding:14px;

        margin-bottom:18px;

        backdrop-filter:blur(10px);
    }

    /* =====================================================
       SECTION TITLE
    ===================================================== */

    .mobile-section-title{

        display:flex;

        align-items:center;

        gap:10px;

        margin-bottom:14px;

        color:#ffffff;

        font-size:13px;

        font-weight:800;

        letter-spacing:1px;

        text-transform:uppercase;
    }

    .mobile-section-title i{

        color:#60a5fa;
    }

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

    .main-nav{

        display:flex;

        flex-direction:column;

        gap:10px;

        width:100%;
    }

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

    .main-nav a{

        position:relative;

        width:100%;

        min-height:54px;

        display:flex;

        align-items:center;

        justify-content:flex-start;

        padding:15px 16px;

        border-radius:16px;

        overflow:hidden;

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

        border:
            1px solid rgba(255,255,255,.05);

        text-decoration:none;

        color:#ffffff;

        font-size:14px;

        font-weight:700;

        transition:.35s ease;
    }

    /* LIGHT EFFECT */

    .main-nav a::before{

        content:'';

        position:absolute;

        top:0;
        left:-100%;

        width:100%;
        height:100%;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,.08),
                transparent
            );

        transition:.55s ease;
    }

    .main-nav a:hover::before{

        left:100%;
    }

    /* HOVER */

    .main-nav a:hover,
    .main-nav a.active{

        transform:translateX(4px);

        background:
            linear-gradient(
                135deg,
                rgba(37,99,235,.28),
                rgba(59,130,246,.16)
            );

        border:
            1px solid rgba(96,165,250,.16);
    }

    .main-nav a::after{

        display:none;
    }

    /* =====================================================
       BUTTON SECTION
    ===================================================== */

    .nav-actions{

        display:flex;

        flex-direction:column;

        gap:12px;

        width:100%;
    }

    /* =====================================================
       ACTION BUTTONS
    ===================================================== */

    .action-btn{

        width:100%;

        min-height:54px;

        border-radius:16px;

        justify-content:center;

        font-size:14px;

        font-weight:700;
    }


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

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

.mobile-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.65);

    backdrop-filter:blur(4px);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:999998;
}

.mobile-overlay.show{

    opacity:1;

    visibility:visible;
}
    .mobile-overlay.show{

        opacity:1;

        visibility:visible;
    }

    /* =====================================================
       BODY LOCK
    ===================================================== */

    body.menu-open{

        overflow:hidden;

        height:100vh;
    }
}

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

@media(max-width:576px){

    .nav-container.show{

        padding:14px;
    }

    .mobile-menu-section{

        padding:12px;

        border-radius:18px;
    }

    .main-nav a{

        min-height:52px;

        font-size:13px;
    }

    .action-btn{

        min-height:52px;

        font-size:13px;
    }

    .mobile-section-title{

        font-size:12px;
    }
}

/* =====================================================
   MOBILE STAFF LOGIN DROPDOWN
===================================================== */

@media(max-width:991px){

    .login-dropdown{
        width:100%;
    }

    .login-dropdown-btn{
        width:100%;
    }

    .login-dropdown-menu{

        position:relative;

        top:10px;

        right:auto;

        width:100%;

        min-width:100%;

        display:none;

        opacity:1;

        visibility:visible;

        transform:none;

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

        border:
            1px solid rgba(255,255,255,.08);

        border-radius:16px;

        box-shadow:none;

        overflow:hidden;
    }

    .login-dropdown.active .login-dropdown-menu{
        display:block;
    }

    .dropdown-item{

        color:#ffffff;

        background:transparent;

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

        padding:14px 18px;
    }

    .dropdown-item:last-child{
        border-bottom:none;
    }

    .dropdown-item:hover{

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

        color:#60a5fa;
    }
}