/*==========================================================
FILE : auth/css/header.css
Shared top header (logo, menu button, notifications, profile card)
Used by: home.html, wallet.html
==========================================================*/
.header-v3{
height:80px;
background:#FFFFFF;
border-bottom:1px solid var(--border);
display:flex;
align-items:center;
justify-content:space-between;
padding:0 35px;
position:sticky;
top:0;
z-index:100;
box-shadow:0 10px 25px rgba(15,23,42,.05);
}
.header-left{
display:flex;
align-items:center;
gap:20px;
}
.menu-btn{
width:48px;
height:48px;
border:none;
border-radius:14px;
background:var(--primary-light);
color:var(--primary);
font-size:20px;
cursor:pointer;
transition:.3s;
}
.menu-btn:hover{
background:var(--primary);
color:#FFFFFF;
}
.logo img{
height:46px;
display:block;
}
.header-right{
display:flex;
align-items:center;
gap:20px;
}
.notification-btn{
position:relative;
width:50px;
height:50px;
border:none;
border-radius:16px;
background:#FFFFFF;
border:1px solid var(--border);
font-size:20px;
cursor:pointer;
transition:.3s;
}
.notification-btn:hover{
border-color:var(--primary);
color:var(--primary);
}
.notification-btn span{
position:absolute;
top:6px;
right:6px;
width:18px;
height:18px;
border-radius:50%;
background:#EF4444;
color:#FFFFFF;
font-size:10px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
}
.profile-card{
display:flex;
align-items:center;
gap:14px;
padding:10px 16px;
background:#FFFFFF;
border:1px solid var(--border);
border-radius:18px;
box-shadow:0 10px 25px rgba(15,23,42,.05);
cursor:pointer;
transition:.3s;
}
.profile-card:hover{
border-color:var(--primary);
}
.profile-image img{
width:50px;
height:50px;
border-radius:50%;
object-fit:cover;
}
.profile-info h4{
font-size:15px;
font-weight:700;
margin-bottom:2px;
}
.profile-info p{
font-size:13px;
color:var(--text-light);
}
.profile-arrow{
border:none;
background:none;
font-size:14px;
color:#94A3B8;
cursor:pointer;
}
@media(max-width:768px){
.header-v3{
height:70px;
padding:0 15px;
}
.profile-info{
display:none;
}
.profile-arrow{
display:none;
}
.logo img{
height:38px;
}
}