/* =========================================================
MODERN NAVBAR 2026
========================================================= */

.container-custom{
max-width:1320px;
margin:auto;
padding:0 20px;
}

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

.modern-header{
position:sticky;
top:0;
z-index:9999;
}

.header-navbar{


background:
linear-gradient(
    135deg,
    #0f172a,
    #1e293b,
    #312e81
);

border-bottom:
1px solid rgba(255,255,255,.08);

backdrop-filter:blur(20px);

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


}

/* =========================================================
NAVBAR WRAPPER
========================================================= */

.navbar-wrapper{


min-height:82px;

display:flex;

align-items:center;

justify-content:space-between;

gap:25px;


}

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

.brand-logo{


display:flex;

align-items:center;

gap:14px;

text-decoration:none;


}

.logo-icon{


width:54px;
height:54px;

border-radius:14px;

display:flex;

align-items:center;
justify-content:center;

background:
linear-gradient(
    135deg,
    #3b82f6,
    #2563eb
);

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


}

.logo-icon img{


width:32px;
height:32px;

object-fit:contain;


}

.logo-text h2{


margin:0;

color:#fff;

font-size:20px;

font-weight:800;


}

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

.nav-container{


flex:1;

display:flex;

align-items:center;

justify-content:space-between;

gap:20px;


}

.main-nav{


display:flex;

align-items:center;

gap:6px;


}

.main-nav a{


height:42px;

display:flex;

align-items:center;

padding:0 14px;

border-radius:10px;

text-decoration:none;

color:rgba(255,255,255,.85);

font-size:14px;

font-weight:600;

transition:.3s;


}

.main-nav a:hover,
.main-nav a.active{


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

color:#fff;


}

/* =========================================================
ACTIONS
========================================================= */

.nav-actions{


display:flex;

align-items:center;

gap:10px;


}

.action-btn{


height:44px;

padding:0 18px;

border:none;

border-radius:12px;

display:flex;

align-items:center;

gap:8px;

text-decoration:none;

color:#fff;

font-size:13px;

font-weight:700;

transition:.3s;

cursor:pointer;


}

.action-btn:hover{


transform:translateY(-2px);


}

.parent-btn{


background:
linear-gradient(
    135deg,
    #10b981,
    #059669
);


}

.retailer-register-btn{


background:
linear-gradient(
    135deg,
    #3b82f6,
    #2563eb
);


}

.dept-btn{

background:
linear-gradient(
    135deg,
    #f97316,
    #ea580c
);


}

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

.login-dropdown{
position:relative;
}

.login-dropdown-menu{


position:absolute;

top:55px;

right:0;

min-width:250px;

background:#fff;

border-radius:14px;

overflow:hidden;

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

opacity:0;

visibility:hidden;

transform:translateY(10px);

transition:.3s;

z-index:99999;


}

.login-dropdown:hover .login-dropdown-menu{


opacity:1;

visibility:visible;

transform:translateY(0);


}

.dropdown-item{


display:flex;

align-items:center;

gap:12px;

padding:15px 18px;

text-decoration:none;

color:#334155;

font-weight:600;

border-bottom:
1px solid #f1f5f9;


}

.dropdown-item:last-child{
border-bottom:none;
}

.dropdown-item:hover{

background:#f8fafc;

color:#2563eb;


}

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

.mobile-toggle{
display:none;
}

@media(max-width:991px){

.navbar-wrapper{
    flex-wrap:wrap;
}

.nav-container{

    width:100%;

    flex-direction:column;
}

.main-nav{

    flex-wrap:wrap;

    justify-content:center;
}

.nav-actions{

    width:100%;

    flex-direction:column;
}

.action-btn{
    width:100%;
}

.login-dropdown{
    width:100%;
}

.login-dropdown-menu{

    position:relative;

    top:10px;

    width:100%;

    opacity:1;

    visibility:visible;

    display:none;
}

.login-dropdown:hover .login-dropdown-menu{
    display:block;
}


}