/*
======================================================
 SEAN B SHOP
 PROFESSIONAL MARKETPLACE HEADER
 assets/css/layout/header.css
======================================================
*/


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


.desktop-header *,
.mobile-header *,
.mobile-sidebar *{

    box-sizing:border-box;

}


.desktop-header a,
.mobile-header a,
.mobile-sidebar a{

    text-decoration:none;

}


img{

    max-width:100%;

    display:block;

}




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


.desktop-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    background:#ffffff;

    z-index:9999;

    box-shadow:
    0 4px 20px rgba(0,0,0,.10);

}




.desktop-header .container{

    width:100%;

    max-width:1400px;

    margin:auto;

    padding:0 20px;

}




/* ======================================================
 TOP BAR
====================================================== */


.desktop-topbar{

    height:34px;

    background:#07192d;

    color:#ffffff;

}


.topbar-inner{

    height:34px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.topbar-contact,
.topbar-message,
.topbar-settings{

    display:flex;

    align-items:center;

    gap:15px;

}



.topbar-contact a{

    color:#fff;

    font-size:12px;

}



.topbar i{

    color:#ffb400;

}




/* ======================================================
 MAIN DESKTOP HEADER
====================================================== */


.desktop-main-header{

    height:62px;

}



.desktop-header-inner{

    height:62px;

    display:flex;

    align-items:center;

    gap:20px;

}





/* LOGO */


.desktop-brand{

    display:flex;

    align-items:center;

    gap:10px;

    flex:0 0 180px;

}



.desktop-brand img{

    width:42px;

    height:42px;

    object-fit:contain;

}



.brand-details strong{

    display:block;

    font-size:16px;

    color:#0b1f3a;

}



.brand-details span{

    font-size:10px;

    color:#e60000;

}





/* SEARCH */


.desktop-search{

    flex:1;

    min-width:220px;

    max-width:650px;

    height:40px;

    display:flex;

    overflow:hidden;

    border:1px solid #ddd;

    border-radius:25px;

}



.search-category{

    width:110px;

    flex-shrink:0;

}



.search-category select{

    width:100%;

    height:100%;

    border:0;

    background:#f5f7fa;

}



.desktop-search input{

    flex:1;

    min-width:0;

    border:0;

    outline:none;

    padding:0 15px;

}



.desktop-search button{

    width:45px;

    flex-shrink:0;

    border:0;

    background:#e60000;

    color:#fff;

}





/* ACTIONS */


.desktop-actions{

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:18px;

}



.header-action{

    display:flex;

    align-items:center;

    gap:7px;

    color:#0b1f3a;

    position:relative;

    white-space:nowrap;

}



.header-action i{

    font-size:20px;

}




.cart-action{

    position:relative;

}



.cart-counter{

    position:absolute;

    top:-10px;

    right:-12px;

    min-width:18px;

    height:18px;

    background:#e60000;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

}





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


.account-dropdown{

    position:absolute;

    top:45px;

    right:0;

    width:220px;

    padding:15px;

    background:#fff;

    border-radius:12px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.15);

    display:none;

}



.desktop-account:hover .account-dropdown{

    display:block;

}





/* ======================================================
   SEAN B SHOP
   PROFESSIONAL MOBILE HEADER
====================================================== */


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


.mobile-header{

    display:none;

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:#fff;

    z-index:10000;

    box-shadow:
    0 3px 15px rgba(0,0,0,.10);

}




.mobile-header-top{

    height:62px;

    width:100%;

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 12px;

}





/* MENU BUTTON */

.mobile-menu-btn{


    width:38px;

    height:38px;

    flex:0 0 38px;


    border:none;

    background:transparent;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:22px;

    color:#0b1f3a;


    cursor:pointer;


}






/* LOGO */


.mobile-logo{


    flex:1;

    min-width:0;


    text-align:center;


    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;


    font-size:19px;

    font-weight:800;


    color:#0b1f3a;


}



.mobile-logo span{

    color:#e60000;

}







/* ACTION ICONS */


.mobile-actions{


    display:flex;

    align-items:center;


    gap:12px;


    flex:0 0 auto;


}




.mobile-actions a{


    position:relative;


    width:32px;

    height:32px;


    display:flex;

    align-items:center;

    justify-content:center;


    color:#0b1f3a;


    font-size:19px;


}





.mobile-actions .badge{


    position:absolute;


    top:-6px;

    right:-7px;


    min-width:17px;

    height:17px;


    padding:0 3px;


    border-radius:50%;


    background:#e60000;

    color:#fff;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:9px;


}







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


.mobile-search-wrapper{


    width:100%;


    padding:0 12px 12px;


}





.mobile-search-wrapper form{


    width:100%;


    height:44px;


    display:flex;


    align-items:center;


    gap:10px;


    padding:0 10px 0 15px;


    background:#f1f5f9;


    border-radius:25px;


    overflow:hidden;


}





.mobile-search-wrapper input{


    flex:1;

    min-width:0;


    border:none;

    outline:none;


    background:transparent;


    font-size:14px;


}





.mobile-search-wrapper button{


    width:32px;

    height:32px;


    flex:0 0 32px;


    border:none;


    border-radius:50%;


    background:#e60000;


    color:white;


}









/* ======================================================
   MOBILE MENU OVER HEADER FIX
====================================================== */


/* DARK OVERLAY */

.mobile-menu-overlay{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

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

    z-index:30000;

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

}



.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;

}





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


.mobile-sidebar{


    position:fixed;


    top:0;


    left:0;


    width:300px;


    max-width:85%;


    height:100vh;


    background:#fff;


    z-index:30001;


    transform:translateX(-100%);


    transition:
    transform .35s ease;


    display:flex;


    flex-direction:column;


    overflow-y:auto;


    overflow-x:hidden;


    box-shadow:
    10px 0 30px rgba(0,0,0,.25);


}





.mobile-sidebar.active{

    transform:translateX(0);

}





/* ======================================================
   IMPORTANT:
   REMOVE HEADER COVERING SIDEBAR
====================================================== */


.mobile-header{
    z-index:1000;
}





body.menu-open{

    overflow:hidden;

}







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


.mobile-sidebar-header{


    height:65px;


    flex-shrink:0;


    display:flex;


    align-items:center;


    justify-content:space-between;


    padding:0 18px;


    background:#0b1f3a;


    color:#fff;


}





.mobile-sidebar-header h3{


    margin:0;


    font-size:18px;


    font-weight:700;


}





.mobile-sidebar-close{


    width:35px;


    height:35px;


    border:none;


    border-radius:50%;


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


    color:#fff;


    display:flex;


    align-items:center;


    justify-content:center;


    cursor:pointer;


}





/* ======================================================
   SIDEBAR CONTENT
====================================================== */


.mobile-sidebar-links{


    list-style:none;


    padding:15px 0;


    margin:0;


    flex:1;


}





.mobile-sidebar-links li{


    width:100%;


}





.mobile-sidebar-links a,
.dropdown-toggle{


    width:100%;


    display:flex;


    align-items:center;


    gap:14px;


    padding:14px 20px;


    color:#0b1f3a;


    font-size:15px;


    text-decoration:none;


    border:none;


    background:none;


}





.mobile-sidebar-links a:hover,
.dropdown-toggle:hover{


    background:#f5f7fa;


    color:#e60000;


}







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


.mobile-dropdown{


    overflow:hidden;


}





.dropdown-toggle{


    cursor:pointer;


}





.dropdown-toggle span{


    flex:1;


}





.dropdown-arrow{


    transition:.3s ease;


}





.category-dropdown{


    max-height:0;


    overflow:hidden;


    margin:0;


    padding:0 0 0 25px;


    list-style:none;


    background:#f8fafc;


    transition:max-height .35s ease;


}





.mobile-dropdown.active .category-dropdown{


    max-height:900px;


}





.mobile-dropdown.active .dropdown-arrow{


    transform:rotate(180deg);


}





.category-dropdown li a{


    display:flex;


    align-items:center;


    gap:12px;


    padding:12px;


    font-size:14px;


    color:#475569;


    border-bottom:1px solid #e5e7eb;


}







/* ======================================================
   MOBILE MENU FOOTER
====================================================== */


.mobile-menu-footer{


    margin-top:auto;


    padding:15px;


    border-top:1px solid #eee;


}





.mobile-menu-footer a{


    display:flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    padding:12px;


    border-radius:8px;


    background:#e600red;


    color:#fff;


}

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


@media(max-width:992px){


    .desktop-header{

        display:none;

    }


    .mobile-header{

        display:block;

    }


    body{

        padding-top:108px;

    }


}






@media(min-width:993px){


    .mobile-header,

    .mobile-sidebar,

    .mobile-menu-overlay{


        display:none;

    }


    body{

        padding-top:96px;

    }


}








@media(max-width:380px){


.mobile-logo{


    font-size:17px;


}



.mobile-actions{


    gap:8px;


}



.mobile-actions a{


    font-size:17px;


}



.mobile-search-wrapper{


    padding-left:10px;

    padding-right:10px;


}


}