/* ==========================================================
   BAECN RESPONSIVE.CSS V2
   Part 1
   Mobile Layout + Header
========================================================== */


/* ==========================================================
   LARGE TABLETS & MOBILE
========================================================== */

@media (max-width:991.98px){

    /* ==========================================
       Desktop Visibility
    ========================================== */

    .desktop-header{

        display:none !important;

    }

    .mobile-header-wrapper{

        display:block;

    }

    /* ==========================================
       Top Bar
    ========================================== */

    .top-bar{

        height:40px;

    }

    .topbar-left{

        display:none;

    }

    .topbar-right{

        width:100%;

        display:flex;

        justify-content:center;

        align-items:center;

        gap:18px;

    }

    /* ==========================================
       Mobile Header
    ========================================== */

    .mobile-header-wrapper{

        position:sticky;

        top:0;

        left:0;

        width:100%;

        background:#ffffff;

        z-index:999;

        box-shadow:0 8px 24px rgba(0,0,0,.06);

    }

    .mobile-header-wrapper .container-fluid{

        padding-left:16px;

        padding-right:16px;

    }

    .mobile-navbar{

        min-height:78px;

        display:flex;

        justify-content:space-between;

        align-items:center;

    }

    /* ==========================================
       Brand
    ========================================== */

    .mobile-brand{

        display:flex;

        align-items:center;

        gap:12px;

        text-decoration:none;

        flex:1;

    }

    .mobile-brand img{

        width:56px;

        height:56px;

        object-fit:contain;

        flex-shrink:0;

    }

    .mobile-brand-info{

        display:flex;

        flex-direction:column;

    }

    .mobile-brand-title{

        margin:0;

        font-size:32px;

        font-weight:800;

        line-height:1;

        letter-spacing:-1px;

        color:var(--primary);

    }

    .mobile-brand-tagline{

        margin-top:2px;

        font-size:11px;

        line-height:1.2;

        color:#64748B;

    }

    /* ==========================================
       Hamburger
    ========================================== */

    .mobile-menu-btn{

        width:48px;

        height:48px;

        border:none;

        background:transparent;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:6px;

        cursor:pointer;

        padding:0;

        flex-shrink:0;

    }

    .mobile-menu-btn span{

        width:24px;

        height:2.5px;

        border-radius:10px;

        background:var(--primary);

        transition:all .30s ease;

    }

}


/* ==========================================================
   SMALL DEVICES
========================================================== */

@media (max-width:576px){

    .top-bar{

        height:36px;

    }

    .mobile-navbar{

        min-height:72px;

    }

    .mobile-brand img{

        width:50px;

        height:50px;

    }

    .mobile-brand-title{

        font-size:28px;

    }

    .mobile-brand-tagline{

        font-size:10px;

    }

}


/* ==========================================================
   EXTRA SMALL DEVICES
========================================================== */

@media (max-width:380px){

    .mobile-brand img{

        width:46px;

        height:46px;

    }

    .mobile-brand-title{

        font-size:24px;

    }

    .mobile-brand-tagline{

        display:none;

    }

}


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

@media (min-width:992px){

    .mobile-header-wrapper{

        display:none !important;

    }

}


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

.mobile-menu{

    position:fixed;

    top:0;

    right:0;

    width:min(92vw,380px);

    height:100dvh;

    background:#fff;

    display:flex;

    flex-direction:column;

    z-index:9999;

    transform:translateX(100%);

    transition:transform .35s ease;

    box-shadow:-18px 0 45px rgba(0,0,0,.15);

    overflow:hidden;

}

.mobile-menu.active{

    transform:translateX(0);

}

.mobile-menu.active{

    right:0;

}


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

.mobile-menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(15,23,42,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:9998;

}

.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;

}


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

.mobile-menu-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:22px 20px;

    border-bottom:1px solid #EEF2F7;

    background:#FFFFFF;

}

.mobile-menu-brand{

    display:flex;

    align-items:center;

    gap:12px;

}

.mobile-menu-brand img{

    width:52px;

    height:52px;

    object-fit:contain;

}

.mobile-menu-brand h4{

    margin:0;

    font-size:28px;

    font-weight:800;

    color:var(--primary);

    line-height:1;

}

.mobile-menu-brand small{

    display:block;

    margin-top:3px;

    font-size:11px;

    color:#64748B;

}

.mobile-menu-close{

    width:42px;

    height:42px;

    border:none;

    background:#F8FAFC;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

}

.mobile-menu-close:hover{

    background:#EEF7FA;

    color:var(--primary);

}


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

.mobile-nav{

    flex:1;

    overflow-y:auto;

    padding:16px;

}

.mobile-nav a{

    display:flex;

    align-items:center;

    gap:14px;

    border-radius:14px;

       padding:12px 16px;

    min-height:48px;

    margin-bottom:2px;

    color:#1F2937;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.mobile-nav a:hover{

    background:#F0FBFE;

    color:var(--primary);

}

.mobile-nav a.active{

    background:#E7F9FD;

    color:var(--primary);

}

.mobile-nav i{

    width:22px;

    font-size:18px;

    text-align:center;

}


/* ==========================================================
   DIVIDER
========================================================== */

.mobile-divider{

    height:1px;

    margin:8px 16px;

    background:#EEF2F7;

}


/* ==========================================================
   LOGIN SECTION
========================================================== */

.mobile-login-section{

    padding:20px;

}

.mobile-login-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px;

    margin-bottom:12px;

    border-radius:16px;

    background:#F8FAFC;

    text-decoration:none;

    color:#1F2937;

    transition:.25s;

}

.mobile-login-card:hover{

    background:#F0FBFE;

    color:var(--primary);

}

.mobile-login-card i{

    font-size:22px;

    width:30px;

    text-align:center;

}

.mobile-login-card strong{

    display:block;

    font-size:15px;

}

.mobile-login-card small{

    display:block;

    font-size:12px;

    color:#64748B;

}


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

.mobile-menu-footer{

    padding:20px;

    border-top:1px solid #EEF2F7;

    background:#FFFFFF;

}

.mobile-menu-footer .btn{

    width:100%;

}


/* ==========================================================
   SCROLLBAR
========================================================== */

.mobile-nav::-webkit-scrollbar{

    width:5px;

}

.mobile-nav::-webkit-scrollbar-thumb{

    background:#D6EAF0;

    border-radius:10px;

}


/* ==========================================================
   SMALL DEVICES
========================================================== */

@media (max-width:576px){

    .mobile-menu{

        width:100%;

        max-width:100%;

    }

    .mobile-menu-header{

        padding:18px;

    }

    .mobile-nav{

        padding:16px;

    }

    .mobile-login-section{

        padding:16px;

    }

    .mobile-menu-footer{

        padding:16px;

    }

}

@media (min-width:430px) and (max-width:575px){

.mobile-menu{

    width:380px;

}

}

@media (min-width:390px) and (max-width:429px){

.mobile-menu{

    width:360px;

}

}

@media (min-width:375px) and (max-width:389px){

.mobile-menu{

    width:340px;

}

.mobile-brand-title{

    font-size:26px;

}

}


@media (max-width:374px){

.mobile-menu{

    width:100%;

}

.mobile-brand-tagline{

    display:none;

}

.mobile-brand-title{

    font-size:22px;

}

}