/* ── RAFZ VISUALS — Navbar Styles ── */

/* ── TOPBAR ── */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:500;height:64px;}
.logo{text-decoration:none;display:flex;flex-direction:column;line-height:1;cursor:pointer;}
.logo-main{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--dark);letter-spacing:2px;}
.logo-sub{font-size:9px;letter-spacing:4px;color:var(--pink);text-transform:uppercase;font-weight:500;}

/* ── NAVBAR ── */
.navbar{display:flex;align-items:center;gap:2px;height:100%;}
.nav-item{position:relative;height:100%;display:flex;align-items:center;}
.nav-link{padding:8px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--dark);text-decoration:none;cursor:pointer;transition:background .2s;display:flex;align-items:center;gap:5px;white-space:nowrap;border:none;background:transparent;font-family:'DM Sans',sans-serif;}
.nav-link:hover{background:var(--light);}
.nav-link.active{background:var(--dark);color:var(--white);}
.nav-arrow{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--muted);transition:transform .2s;}
.nav-item:hover>.nav-link .nav-arrow{transform:rotate(180deg);}

/* ── MEGA / SMALL MENU ── */
.mega-menu,.small-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--white);border-radius:16px;box-shadow:0 20px 60px rgba(44,44,44,.12);border:1px solid var(--border);padding:20px;display:none;z-index:600;animation:dropIn .2s ease;}
.nav-item:hover .mega-menu,.nav-item:hover .small-menu{display:block;}
.mega-menu{min-width:520px;}
.small-menu{min-width:220px;padding:12px;}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.mega-item,.small-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .2s;text-decoration:none;color:var(--dark);}
.mega-item:hover,.small-item:hover{background:var(--light);}
.mega-icon{width:36px;height:36px;border-radius:10px;background:var(--pl);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.mega-label,.small-label{font-size:13px;font-weight:600;}
.mega-sub,.small-sub{font-size:11px;color:var(--muted);margin-top:1px;}
.small-icon{font-size:18px;}

/* ── HAMBURGER ── */
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:transparent;}
.hamburger span{display:block;width:24px;height:2px;background:var(--dark);border-radius:2px;transition:all .3s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* ── MOBILE NAV ── */
.mobile-nav{display:none;position:fixed;inset:0;top:64px;background:var(--white);z-index:400;overflow-y:auto;padding:16px 0;}
.mobile-nav.open{display:block;}
.mob-nav-link{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;font-size:15px;font-weight:500;color:var(--dark);text-decoration:none;border-bottom:1px solid var(--border);}
.mob-nav-link:hover,.mob-nav-link.active{color:var(--pink);}
.mob-nav-section{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:14px 20px 6px;border-bottom:1px solid var(--border);}
.mob-nav-sub{padding:11px 20px 11px 36px;font-size:13px;color:var(--muted);text-decoration:none;display:block;border-bottom:1px solid var(--border);}
.mob-nav-sub:hover{color:var(--pink);}

/* ── RIGHT AREA ── */
.right-area{display:flex;align-items:center;gap:10px;position:relative;}
.lang-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;background:var(--light);border:none;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;color:var(--dark);}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--white);border-radius:14px;box-shadow:0 16px 48px rgba(44,44,44,.12);border:1px solid var(--border);padding:8px;min-width:170px;z-index:700;display:none;}
.lang-menu.open{display:block;animation:modalUp .2s ease;}
.lang-item{padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;color:var(--dark);transition:background .2s;}
.lang-item:hover{background:var(--light);}
.lang-item.active{background:var(--pl);color:var(--pink);}
.login-btn{background:var(--pink);color:var(--white);border:none;border-radius:50px;padding:9px 22px;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;}
.auth-trigger{display:flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--border);border-radius:50px;padding:7px 14px 7px 10px;cursor:pointer;font-size:12px;}
.auth-trigger:hover{border-color:var(--pink);}
.avatar-icon{width:28px;height:28px;background:var(--dark);border-radius:50%;display:flex;align-items:center;justify-content:center;}
.no-acc{color:var(--muted);}
.sign-up{color:var(--pink);font-weight:600;}
.auth-in{display:none;align-items:center;gap:10px;position:relative;}
.user-trigger{display:flex;align-items:center;gap:9px;background:var(--light);border:1.5px solid var(--border);border-radius:50px;padding:6px 14px 6px 8px;cursor:pointer;}
.user-trigger:hover{border-color:var(--pink);}
.user-av{width:28px;height:28px;background:var(--pink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:13px;color:var(--white);}
.user-name-txt{font-size:13px;font-weight:600;}
.user-menu{position:absolute;top:calc(100% + 10px);right:0;background:var(--white);border-radius:16px;box-shadow:0 20px 60px rgba(44,44,44,.15);border:1px solid var(--border);padding:8px;min-width:240px;z-index:999;display:none;}
.user-menu.open{display:block;animation:modalUp .2s ease;}
.user-menu-header{padding:12px 12px 10px;border-bottom:1px solid var(--border);margin-bottom:6px;display:flex;align-items:center;gap:10px;}
.user-menu-av{width:38px;height:38px;background:var(--pink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Bebas Neue',sans-serif;font-size:17px;color:var(--white);}
.user-menu-name{font-size:13px;font-weight:700;}
.user-menu-email{font-size:11px;color:var(--muted);}
.user-menu-plan{display:inline-block;background:var(--pl);color:var(--pink);font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 7px;border-radius:20px;margin-top:3px;}
.um-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;color:var(--dark);transition:background .2s;text-decoration:none;}
.um-item:hover{background:var(--light);}
.um-item.danger{color:#e95e5e;}
.um-divider{height:1px;background:var(--border);margin:6px 0;}
.um-badge{margin-left:auto;background:var(--pink);color:var(--white);font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .topbar{padding:0 24px;}
  .navbar{display:none;}
  .hamburger{display:flex;}
  .auth-trigger .no-acc{display:none;}
}
@media(max-width:768px){
  .topbar{padding:0 16px;height:56px;}
  .mobile-nav{top:56px;}
  .logo-main{font-size:22px;}
  .login-btn{padding:8px 16px;font-size:12px;}
  .auth-trigger{display:none;}
  .lang-btn span:first-of-type{display:none;}
}