header{
position:fixed;
top:0;
left:0;
right:0;
width:100%;
max-width:100vw;
overflow:visible;
background:rgba(255,255,255,.90);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(0,0,0,.06);
z-index:999;
transition:all .3s ease;
}

header.scrolled{
box-shadow:0 12px 35px rgba(0,0,0,.08);
}

header .container{
width:100%;
max-width:1300px;
height:82px;
margin:0 auto;
padding:0 16px;
display:flex;
align-items:center;
justify-content:space-between;
}

#menuButton{
flex:0 0 48px;
margin:0;
margin-left:auto;
}

.logo{
font-size:30px;
font-weight:800;
color:#2f6bff;
text-decoration:none;
white-space:nowrap;
}

nav{
display:flex;
align-items:center;
}

nav ul{
display:flex;
align-items:center;
gap:45px;
list-style:none;
margin:0;
padding:0;
}

nav a{
position:relative;
text-decoration:none;
font-size:16px;
font-weight:600;
color:#555;
transition:.3s;
}

nav a:hover,
nav a.active{
color:#2f6bff;
}

nav a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:3px;
background:#2f6bff;
border-radius:50px;
transition:.3s;
}

nav a:hover::after,
nav a.active::after{
width:100%;
}

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

.account-menu{
position:relative;
display:flex;
align-items:center;
}

.account-toggle{
display:flex;
align-items:center;
gap:8px;
padding:0;
margin:0;
background:none;
border:none;
font:inherit;
font-size:16px;
font-weight:600;
color:#555;
cursor:pointer;
transition:.3s;
}

.account-toggle:hover{
color:#2f6bff;
}

.account-dropdown{
position:absolute;
top:calc(100% + 18px);
right:0;
min-width:240px;
background:#fff;
border:1px solid #e5e7eb;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
padding:10px 0;
display:none;
z-index:9999;
}

.account-dropdown.show{
display:block;
}

.account-dropdown a{
display:block;
padding:14px 20px;
text-decoration:none;
font-size:15px;
font-weight:500;
color:#374151;
transition:.2s;
}

.account-dropdown a:hover{
background:#f8faff;
color:#2f6bff;
}

.account-dropdown hr{
border:none;
border-top:1px solid #edf2f7;
margin:8px 0;
}

.logout-link{
color:#dc2626!important;
}
/*=========================
HAMBURGER
=========================*/

#menuButton{
display:none;
width:48px;
height:48px;
padding:0;
border:none;
background:none;
cursor:pointer;
z-index:1001;
}

#menuButton span{
display:block;
width:30px;
height:3px;
margin:6px auto;
background:#2f6bff;
border-radius:30px;
transition:.35s ease;
}

#menuButton.open span:nth-child(1){
transform:translateY(9px) rotate(45deg);
}

#menuButton.open span:nth-child(2){
opacity:0;
}

#menuButton.open span:nth-child(3){
transform:translateY(-9px) rotate(-45deg);
}
/*=========================
TABLETS
=========================*/

@media(max-width:992px){

header .container{
height:74px;
padding:0 16px;
}

.logo{
font-size:26px;
}

#menuButton{
display:block;
width:46px;
height:46px;
margin-left:auto;
}

#navMenu{
display:none;
position:absolute;
top:74px; /* keep 70px in the 768px section */
left:0;
width:100%;
max-height:calc(100vh - 74px); /* use 70px in the 768px section */
overflow-y:auto;
background:#fff;
border-top:1px solid #eee;
box-shadow:0 15px 35px rgba(0,0,0,.08);
z-index:1000;
-webkit-overflow-scrolling:touch;
}

#navMenu.open{
display:block;
}

#navMenu ul{
display:flex;
flex-direction:column;
gap:0;
margin:0;
padding:0;
}

#navMenu li{
width:100%;
border-bottom:1px solid #eee;
}

#navMenu a{
display:block;
padding:18px;
text-align:center;
font-size:17px;
}

#navMenu a::after{
display:none;
}
.account-menu{
width:100%;
display:block;
}

.account-toggle{
display:flex;
align-items:center;
gap:8px;
padding:0;
margin:0;
background:none;
border:none;
font-family:'Poppins',sans-serif !important;
font-size:16px !important;
font-weight:600 !important;
font-style:normal !important;
line-height:1.2;
color:#555 !important;
cursor:pointer;
transition:.3s;
}
.account-toggle span{
font-family:'Poppins',sans-serif !important;
font-size:16px !important;
font-weight:600 !important;
font-style:normal !important;
color:inherit;
}

.account-dropdown{
position:static;
display:none;
width:100%;
margin:0;
border:none;
border-top:1px solid #eee;
border-radius:0;
box-shadow:none;
}

.account-dropdown.show{
display:block;
}

.account-dropdown a{
display:block;
padding:18px;
text-align:center;
}
.account-toggle{
width:100%;
justify-content:center;
padding:18px;
min-height:56px;
}

}
/*=========================
PHONES
=========================*/

@media(max-width:768px){

header .container{
height:70px;
padding:0 15px;
}

.logo{
font-size:22px;
}

#menuButton{
display:block;
width:46px;
height:46px;
margin-left:auto;
}

#navMenu{
display:none;
position:absolute;
top:74px; /* keep 70px in the 768px section */
left:0;
width:100%;
max-height:calc(100vh - 74px); /* use 70px in the 768px section */
overflow-y:auto;
background:#fff;
border-top:1px solid #eee;
box-shadow:0 15px 35px rgba(0,0,0,.08);
z-index:1000;
-webkit-overflow-scrolling:touch;
}
#navMenu.open{
display:block;
}

#navMenu ul{
display:flex;
flex-direction:column;
gap:0;
margin:0;
padding:0;
}

#navMenu li{
width:100%;
border-bottom:1px solid #eee;
}

#navMenu a{
display:block;
padding:18px;
text-align:center;
font-size:17px;
}

#navMenu a::after{
display:none;
}
.account-menu{
width:100%;
display:block;
}

.account-toggle{
width:100%;
padding:18px;
display:flex;
justify-content:center;
align-items:center;
gap:8px;
background:none;
border:none;
font-size:17px;
}

.account-dropdown{
position:static;
display:none;
width:100%;
margin:0;
border:none;
border-top:1px solid #eee;
border-radius:0;
box-shadow:none;
}

.account-dropdown.show{
display:block;
}

.account-dropdown a{
display:block;
padding:18px;
text-align:center;
}
.account-toggle{
width:100%;
justify-content:center;
padding:18px;
min-height:56px;
}

}

/*=========================
SMALL PHONES
=========================*/

@media(max-width:480px){

header .container{
padding:0 12px;
}

.logo{
font-size:20px;
}

#menuButton{
width:44px;
height:44px;
flex:0 0 44px;
}

#menuButton span{
width:24px;
}

.account-toggle{
width:100%;
justify-content:center;
padding:16px;
min-height:52px;
}

}


.menu-notification{
position:relative;
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
color:#444;
text-decoration:none;
font-size:20px;
transition:.2s;
}

.menu-notification:hover{
color:#2563eb;
}

.notification-count{
position:absolute;
top:-3px;
right:-3px;
min-width:18px;
height:18px;
padding:0 5px;
display:flex;
align-items:center;
justify-content:center;
background:#dc2626;
color:#fff;
border-radius:20px;
font-size:11px;
font-weight:700;
line-height:1;
}