/*==========================================================
    FLATDEAL HEADER CSS
==========================================================*/

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --success:#22c55e;

    --text:#1f2937;
    --text-light:#6b7280;

    --border:#ececec;

    --bg:#ffffff;

    --radius:14px;

    --transition:.30s ease;

    --shadow:
        0 15px 40px rgba(0,0,0,.12);

}

/*==========================================================
    RESET
==========================================================*/

.desktop-menu,
.drawer-menu{

    list-style:none;

    margin:0;

    padding:0;

}

.desktop-menu a,
.drawer-menu a{

    text-decoration:none;

}

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



.branding{
    display: flex;
    align-items: center;
}

.logo{
    margin-right: 50px;
}

.navmenu{
    margin-left: 0;
    margin-right: auto;
}

.desktop-menu{
    display: flex;
    align-items: center;
    gap: 30px;
}

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

.mobile-nav-toggle{

    width: 42px;
    height: 42px;
    border: none;
    border-radius: 12px;
    background: #ffffff;
    color: #2563eb;
    /* color: #ffffff; */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
    font-size: 27px;
}
.mobile-nav-toggle:hover{
    background:var(--primary-dark);
    color:var(--contrast-color);
}


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

.mobile-menu-overlay{

    position:fixed;

    inset:0;

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

    backdrop-filter:blur(5px);

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

    z-index:9998;

}

body.mobile-nav-active .mobile-menu-overlay{

    opacity:1;

    visibility:visible;

}

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

.mobile-drawer{

    position:fixed;

    top:0;

    left:-100%;

    width:290px;

    max-width:82%;

    height:100dvh;

    background:#fff;

    display:flex;

    flex-direction:column;

    box-shadow:var(--shadow);

    transition:.35s ease;

    z-index:9999;

    overflow-y:auto;
    overflow-x:hidden;

}

body.mobile-nav-active .mobile-drawer{

    left:0;

}

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

.drawer-header{

    height:68px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 18px;

    border-bottom:1px solid var(--border);

}

.drawer-logo img{

    height:34px;

}

.drawer-close{

    width:36px;

    height:36px;

    border:none;

    background:#f3f4f6;

    border-radius:50%;

    cursor:pointer;

    transition:var(--transition);

}

.drawer-close:hover{

    background:var(--primary);

    color:#fff;

}

/*==========================================================
    USER CARD
==========================================================*/

.drawer-user{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px;

    border-bottom:1px solid var(--border);

}

.drawer-user .avatar{

    width:44px;

    height:44px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    background:linear-gradient(
        135deg,
        #2563eb,
        #38bdf8
    );

}

.drawer-user h5{

    margin:0;

    font-size:16px;

    font-weight:700;

}

.drawer-user p{

    margin:2px 0 0;

    color:var(--text-light);

    font-size:12px;

}

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

.drawer-menu{

    flex:1;

    overflow:auto;

    padding:12px;

}

.drawer-menu li{

    margin-bottom:6px;

}

.drawer-menu a{

    display:flex;

    align-items:center;

    gap:14px;

    height:46px;

    padding:0 14px;

    color:var(--text);

    border-radius:12px;

    font-size:15px;

    font-weight:600;

    transition:var(--transition);

}

.drawer-menu a i{

    width:18px;

    color:var(--primary);

}

.drawer-menu a:hover,
.drawer-menu a.active{

    background:#eff6ff;

    color:var(--primary);

}

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

.drawer-footer{

    padding:16px;

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

    background:#fff;

    display:flex;

    gap:10px;

}

.drawer-footer a{

    flex:1;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    border-radius:12px;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:var(--transition);

}

.drawer-call{

    background:var(--primary);

    color:#fff;

}

.drawer-call:hover{

    background:var(--primary-dark);

    color:#fff;

    transform:translateY(-2px);

}

.drawer-whatsapp{

    background:#25D366;

    color:#fff;

}

.drawer-whatsapp:hover{

    background:#1ea952;

    color:#fff;

    transform:translateY(-2px);

}

.drawer-footer i{

    font-size:15px;

}

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

.drawer-menu::-webkit-scrollbar{

    width:5px;

}

.drawer-menu::-webkit-scrollbar-track{

    background:#f3f4f6;

}

.drawer-menu::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:20px;

}

.drawer-menu::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

/*==========================================================
    ANIMATION
==========================================================*/

.mobile-drawer{

    transition:left .35s cubic-bezier(.22,.61,.36,1);

}

.mobile-menu-overlay{

    transition:opacity .3s ease;

}

.drawer-menu li{

    opacity:0;

    transform:translateX(-15px);

    animation:drawerItem .35s forwards;

}

.drawer-menu li:nth-child(1){animation-delay:.05s;}
.drawer-menu li:nth-child(2){animation-delay:.10s;}
.drawer-menu li:nth-child(3){animation-delay:.15s;}
.drawer-menu li:nth-child(4){animation-delay:.20s;}
.drawer-menu li:nth-child(5){animation-delay:.25s;}
.drawer-menu li:nth-child(6){animation-delay:.30s;}

@keyframes drawerItem{

    to{

        opacity:1;

        transform:none;

    }

}

/*==========================================================
    ACTIVE STATE
==========================================================*/

.drawer-menu a.active{

    background:#eff6ff;

    color:var(--primary);

    font-weight:700;

}

.drawer-menu a.active i{

    color:var(--primary);

}

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

body.mobile-nav-active{

    overflow:hidden;

    touch-action:none;

}

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

@media(max-width:1199px){

    .desktop-menu{

        display:none;

    }

    .mobile-nav-toggle{

        display:flex;

    }

    .call-btn,
    .cta-btn{

        display:none!important;

    }

}

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

@media(min-width:1200px){

    .mobile-nav-toggle,
    .mobile-drawer,
    .mobile-menu-overlay{

        display:none!important;

    }

}

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

@media(max-width:480px){

    .mobile-drawer{

        width:270px;

        max-width:85%;

    }

    .drawer-header{

        height:60px;

        padding:0 15px;

    }

    .drawer-logo img{

        height:30px;

    }

    .drawer-user{

        padding:14px;

    }

    .drawer-user .avatar{

        width:40px;

        height:40px;

        font-size:16px;

    }

    .drawer-menu{

        padding:10px;

    }

    .drawer-menu a{

        height:42px;

        font-size:14px;

        border-radius:10px;

    }

    .drawer-footer{

        padding:12px;

    }

    .drawer-footer a{

        height:42px;

        font-size:13px;

    }

}

/*==========================================================
    SAFE AREA (iPhone)
==========================================================*/

.drawer-footer{

    padding-bottom:calc(16px + env(safe-area-inset-bottom));

}

/*==========================================================
    PREMIUM EFFECTS
==========================================================*/

.mobile-drawer{
    background:#ffffff;
    border-right:1px solid rgba(0,0,0,.06);
    box-shadow:
        0 20px 60px rgba(0,0,0,.18);
}

.drawer-header{
    background:#fff;
}

.drawer-user{
    margin:12px;
    border:1px solid #edf2f7;
    border-radius:16px;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
}

.drawer-user .avatar{
    box-shadow:0 8px 20px rgba(37,99,235,.25);
}

.drawer-menu{
    padding-top:6px;
}

.drawer-menu li:last-child{
    margin-bottom:0;
}

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

.drawer-menu a{
    position:relative;
    overflow:hidden;
}

.drawer-menu a::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:4px;
    height:100%;
    background:#2563eb;
    transform:scaleY(0);
    transition:.25s;
}

.drawer-menu a:hover::before,
.drawer-menu a.active::before{
    transform:scaleY(1);
}

.drawer-menu a:hover{
    padding-left:18px;
}

.drawer-menu a i{
    transition:.25s;
}

.drawer-menu a:hover i{
    transform:scale(1.1);
}

/*==========================================================
    DRAWER BUTTONS
==========================================================*/

.drawer-call,
.drawer-whatsapp{
    box-shadow:0 8px 18px rgba(0,0,0,.10);
}

.drawer-call:active,
.drawer-whatsapp:active{
    transform:scale(.97);
}

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

.drawer-logo img{
    width:auto;
    max-height:34px;
}

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

.drawer-close{
    display:flex;
    align-items:center;
    justify-content:center;
}

.drawer-close:hover{
    transform:rotate(90deg);
}

/*==========================================================
    TOGGLE BUTTON
==========================================================*/



.mobile-nav-toggle:hover{
    transform:translateY(-2px);
}

/*==========================================================
    SCROLL
==========================================================*/

.drawer-menu{
    scroll-behavior:smooth;
}

/*==========================================================
    REMOVE TAP HIGHLIGHT
==========================================================*/

.drawer-menu a,
.drawer-footer a,
.mobile-nav-toggle,
.drawer-close{

    -webkit-tap-highlight-color:transparent;

}

/*==========================================================
    FOCUS
==========================================================*/

.drawer-menu a:focus,
.drawer-footer a:focus,
.mobile-nav-toggle:focus{

    outline:none;

}

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

.drawer-menu .active{

    background:#eff6ff;

    color:#2563eb;

    border-left:4px solid #2563eb;

}

.drawer-menu .active i{

    color:#2563eb;

}

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

.drawer-footer{

    position:sticky;

    bottom:0;

    background:#fff;

    z-index:5;

}

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

.drawer-header,
.drawer-footer{

    border-color:#edf2f7;

}

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

.mobile-menu-overlay{

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

}

/*==========================================================
    PERFORMANCE
==========================================================*/

.mobile-drawer,
.drawer-menu a,
.mobile-nav-toggle{

    will-change:transform;

}

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

@media(max-width:360px){

.mobile-drawer{

width:250px;

}

.drawer-user{

padding:12px;

}

.drawer-menu a{

font-size:13px;

height:40px;

}

.drawer-footer a{

font-size:12px;

height:40px;

}

}


body.mobile-nav-active .bottom-sticky-nav,
body.mobile-nav-active .bottom-nav,
body.mobile-nav-active .sticky-bottom{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.mobile-drawer{
    height:100vh;
}

.drawer-footer{
    padding:14px;
    border-top:1px solid #eef2f7;
    background:#fff;
    display:flex;
    gap:10px;
}

.drawer-footer a{
    flex:1;
    height:44px;
    border-radius:10px;
    font-size:13px;
    font-weight:600;
}

.drawer-call{
    background:#2563eb;
}

.drawer-whatsapp{
    background:#22c55e;
}

.drawer-menu a.active{
    background:#eef4ff;
    color:#2563eb;
    border-left:3px solid #2563eb;
}

.drawer-menu a.active i{
    color:#2563eb;
}
.drawer-menu a{
    transition:.25s;
}

.drawer-menu a:hover{
    background:#f8fbff;
    transform:translateX(4px);
}

.drawer-user{
    background:linear-gradient(135deg,#f8fbff,#ffffff);
    border:1px solid #e7eefc;
    border-radius:14px;
    margin:12px;
}

.drawer-user .avatar{
    box-shadow:0 8px 18px rgba(37,99,235,.25);
}



/* Drawer full height */
.mobile-drawer{
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    max-width: 82%;
    height: 100vh;
    height: 100dvh; /* Android fix */
    display: flex;
    flex-direction: column;
    z-index: 99999;
}

/* Scrollable menu */
.drawer-menu{
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Footer always visible */
.drawer-footer{
    flex-shrink: 0;
    padding: 12px;
    background: #fff;
    border-top: 1px solid #eee;
}

/* Hide bottom sticky nav when drawer opens */
body.mobile-nav-active .bottom-sticky-nav,
body.mobile-nav-active .bottom-nav,
body.mobile-nav-active .sticky-bottom,
body.mobile-nav-active .mobile-bottom-nav{
    display: none !important;
}


@media (max-width: 1199px){

    .branding{
        display:flex;
        align-items:center;
        /*justify-content:space-between !important;*/
        position:relative;
    }

    .logo{
        margin:0;
        flex:0 0 auto;
    }

    .navmenu{
        margin:0;
        flex:0 0 auto;
    }


    /* Desktop items hide */
    .desktop-menu{
        display:none !important;
    }

    .call-btn,
    .cta-btn{
        display:none !important;
    }

    .login-register-container{
        display:flex !important;
        margin-left:12px;
    }
}