/* ============================================================
   nav.css — TovHost Navigation v3
   Clean, professional, fully responsive
   ============================================================ */

nav{
  background:rgba(23,27,41,.92);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:0 1px 0 rgba(0,0,0,.15);
}

.nav-inner{
  max-width:1320px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 1.5rem;
  height:60px;
  gap:1rem;
}

/* ── Logo ── */
.logo{
  font-family:var(--font-heading);
  font-size:1.25rem;
  font-weight:800;
  color:var(--text);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-shrink:0;
  letter-spacing:-.02em;
  transition:opacity var(--duration) var(--ease);
}
.logo:hover{opacity:.85}
.logo img{height:30px;width:auto;filter:none}
.logo .ls{color:var(--primary)}
.logo .ld{color:var(--accent);font-size:1.4rem;line-height:.5;margin-left:1px}
.logo-text{display:flex;align-items:center;gap:.05rem}

/* ── Nav Links ── */
.nav-links{
  display:flex;
  gap:2px;
  align-items:center;
}

.nav-link{
  padding:.5rem .875rem;
  border-radius:var(--radius-sm);
  font-size:.875rem;
  font-weight:500;
  color:var(--text2);
  text-decoration:none;
  transition:all var(--duration) var(--ease);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  white-space:nowrap;
  border:none;
  background:none;
  cursor:pointer;
  font-family:var(--font-main);
  letter-spacing:-.01em;
  line-height:1;
}
.nav-link:hover{
  color:var(--text);
  background:rgba(255,255,255,.05);
}
.nav-link.active{
  color:var(--primary-light);
  background:rgba(0,101,255,.10);
}
.nav-link.btn-nav{
  background:var(--primary);
  color:#fff;
  padding:.5rem 1.1rem;
  font-weight:600;
  border-radius:var(--radius);
}
.nav-link.btn-nav:hover{
  background:var(--primary-light);
  transform:translateY(-1px);
}

/* ── Nav Actions ── */
.nav-actions{
  display:flex;
  align-items:center;
  gap:.625rem;
  flex-shrink:0;
}

/* ── Nav Buttons ── */
.nav-btn{
  padding:.5rem 1.1rem;
  border-radius:var(--radius);
  font-size:.85rem;
  font-weight:600;
  cursor:pointer;
  transition:all var(--duration) var(--ease);
  border:none;
  font-family:var(--font-main);
  letter-spacing:-.01em;
  white-space:nowrap;
}
.nav-btn-outline{
  background:transparent;
  color:var(--text2);
  border:1px solid var(--border-md)!important;
}
.nav-btn-outline:hover{
  color:var(--primary-light);
  border-color:var(--primary)!important;
  background:rgba(0,101,255,.08);
}
.nav-btn-primary{
  background:var(--primary);
  color:#fff;
  font-weight:700;
  box-shadow:0 2px 8px rgba(0,101,255,.3);
}
.nav-btn-primary:hover{
  background:var(--primary-light);
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,101,255,.4);
}

/* ── Notification Bell ── */
.notif-btn{
  position:relative;
  width:36px;
  height:36px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:transparent;
  color:var(--text2);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all var(--duration) var(--ease);
}
.notif-btn:hover{background:rgba(255,255,255,.05);color:var(--text)}
.notif-badge{
  position:absolute;top:-4px;right:-4px;
  width:16px;height:16px;border-radius:50%;
  background:var(--danger);color:#fff;font-size:.6rem;font-weight:700;
  display:none;align-items:center;justify-content:center;
}
.notif-badge.show{display:flex}

/* ── Cart Pill ── */
.cart-pill{
  display:none;
  align-items:center;
  gap:.4rem;
  padding:.4rem .85rem;
  border-radius:20px;
  background:rgba(0,101,255,.12);
  border:1px solid rgba(0,101,255,.25);
  color:var(--primary-light);
  font-size:.82rem;
  font-weight:600;
  text-decoration:none;
  transition:all var(--duration) var(--ease);
  position:relative;
}
.cart-pill:hover{background:rgba(0,101,255,.20)}
.cart-count{
  background:var(--primary);color:#fff;
  width:16px;height:16px;border-radius:50%;
  font-size:.65rem;display:flex;align-items:center;justify-content:center;
  position:absolute;top:-5px;right:-5px;
  font-weight:700;
}

/* ── Account Dropdown ── */
.acc-dropdown{position:relative;z-index:300}
.acc-btn,
.acc-trigger{
  display:flex;align-items:center;gap:.5rem;
  padding:.375rem .75rem .375rem .375rem;
  border-radius:var(--radius);
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);font-size:.85rem;font-weight:600;
  transition:all var(--duration) var(--ease);
  font-family:var(--font-main);
  cursor:pointer;
}
.acc-btn:hover,
.acc-trigger:hover{background:rgba(255,255,255,.05);border-color:var(--border-md)}
.acc-avatar{width:26px;height:26px;border-radius:var(--radius-sm);object-fit:cover;flex-shrink:0}
.acc-name{font-size:.82rem;font-weight:600;color:var(--text);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acc-caret{color:var(--text2);transition:transform var(--duration) var(--ease);flex-shrink:0}
.acc-dropdown.open .acc-caret{transform:rotate(180deg)}
.acc-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  background:var(--dn-5);border:1px solid var(--border-md);
  border-radius:var(--radius-lg);padding:.35rem;min-width:180px;
  box-shadow:var(--shadow-xl);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:all .18s var(--ease);backdrop-filter:blur(20px);
}
.acc-dropdown.open .acc-menu{opacity:1;visibility:visible;transform:none}
.acc-item{
  display:flex;align-items:center;gap:.55rem;
  padding:.55rem .75rem;border-radius:var(--radius-sm);
  font-size:.84rem;font-weight:500;color:var(--text2);
  text-decoration:none;cursor:pointer;transition:all .15s var(--ease);
  background:none;border:none;width:100%;font-family:var(--font-main);white-space:nowrap;
}
.acc-item:hover{background:rgba(0,101,255,.10);color:var(--primary-light)}
.acc-item svg{opacity:.7;flex-shrink:0}
.acc-item:hover svg{opacity:1}
.acc-divider{height:1px;background:var(--border);margin:.25rem .4rem}
.acc-item-danger{color:var(--danger)!important}
.acc-item-danger:hover{background:rgba(239,68,68,.10)!important;color:var(--danger)!important}

/* ── Admin Badge/Link ── */
.admin-badge{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff;font-size:.65rem;font-weight:700;
  padding:.15rem .5rem;border-radius:4px;
  text-transform:uppercase;letter-spacing:.05em;
}
.nav-admin-link{
  background:rgba(245,158,11,.08)!important;
  border:1px solid rgba(245,158,11,.22)!important;
  color:var(--accent)!important;
}
.nav-admin-link:hover{background:rgba(245,158,11,.16)!important}

/* ── Mobile Menu ── */
.mobile-menu-btn{
  display:none;
  width:36px;height:36px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:transparent;
  color:var(--text2);
  align-items:center;justify-content:center;
  cursor:pointer;
  transition:all var(--duration) var(--ease);
}
.mobile-menu-btn:hover{background:rgba(255,255,255,.05);color:var(--text)}

/* ── Orb backgrounds (subtle) ── */
.orb{
  position:fixed;border-radius:50%;
  filter:blur(120px);pointer-events:none;
  z-index:0;opacity:.4;
}
.orb1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,101,255,.07),transparent 70%);top:-200px;left:-150px}
.orb2{width:500px;height:500px;background:radial-gradient(circle,rgba(0,101,255,.05),transparent 70%);bottom:-100px;right:-100px}
.orb3{width:400px;height:400px;background:radial-gradient(circle,rgba(0,101,255,.04),transparent 70%);top:45%;left:38%}

/* ── Responsive: Tablet ── */
@media(max-width:1024px){
  .nav-inner{padding:0 1.25rem}
  .nav-links{gap:1px}
  .nav-link{padding:.45rem .7rem;font-size:.82rem}
}

/* ── Responsive: Mobile ── */
@media(max-width:768px){
  .nav-inner{padding:0 1rem;height:56px}
  .nav-links{display:none}
  .mobile-menu-btn{display:flex}
  .logo{font-size:1.1rem}
  .logo img{height:26px}
}

@media(max-width:min(480px,calc(100vw - 2.5rem))){
  .nav-actions{gap:.35rem}
  .acc-btn span,.acc-trigger span,.acc-name{display:none}
  .nav-btn{padding:.4rem .85rem;font-size:.8rem}
}

/* ── Enhanced Account Dropdown (Shockbyte-style) ── */
.acc-menu{
  position:absolute;top:calc(100% + 8px);right:0;
  background:var(--dn-5);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);
  padding:.35rem;min-width:210px;
  box-shadow:0 20px 50px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0;visibility:hidden;transform:translateY(-4px) scale(.98);
  transition:all .18s cubic-bezier(.16,1,.3,1);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  z-index:500;
}
.acc-dropdown.open .acc-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}

/* Arrow */
.acc-menu::before{
  content:'';position:absolute;bottom:100%;right:14px;
  border:6px solid transparent;border-bottom-color:rgba(255,255,255,.08);
}
.acc-menu::after{
  content:'';position:absolute;bottom:100%;right:15px;
  border:5px solid transparent;border-bottom-color:var(--dn-5);
  margin-bottom:-1px;
}

/* Menu items with icon boxes */
.acc-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.5rem .65rem;border-radius:8px;
  font-size:.84rem;font-weight:500;color:var(--dn-500);
  text-decoration:none;cursor:pointer;
  transition:all .12s var(--ease);
  background:none;border:none;width:100%;
  font-family:var(--font-main);white-space:nowrap;
}
.acc-item:hover{background:rgba(255,255,255,.05);color:var(--dn-700)}

/* Icon box inside item */
.acc-ico{
  width:30px;height:30px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform .15s var(--ease);
}
.acc-item:hover .acc-ico{transform:scale(1.05)}

/* Label and description */
.acc-label{font-size:.8rem;font-weight:600;color:var(--dn-600);line-height:1.2}
.acc-desc{font-size:.68rem;color:var(--dn-200);margin-top:1px}
.acc-item:hover .acc-label{color:var(--dn-900)}

/* Divider */
.acc-divider{height:1px;background:rgba(255,255,255,.06);margin:.3rem .5rem}

/* Danger item (logout) */
.acc-item-danger .acc-label{color:#ef4444}
.acc-item-danger:hover{background:rgba(239,68,68,.08)}
.acc-item-danger:hover .acc-label{color:#f87171}