/* ============================================================
   Plotrixx — navbar.css  (v2)
   Shared navbar for ALL pages (Home, Browse, Offers, FAQs…)
   Relies on CSS variables defined in style.css.
   Import AFTER style.css on every page.
   ============================================================ */

/* ── Base navbar shell ─────────────────────────────────────── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.3s ease;
}

/* ── Logo ──────────────────────────────────────────────────── */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
}

.nav-logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 8px rgba(42,157,120,0.55))
          drop-shadow(0 0 16px rgba(184,137,42,0.35))
          brightness(1.2);
  transition: transform 0.3s ease, filter 0.3s ease;
}
.nav-logo:hover img {
  transform: scale(1.08) rotate(-3deg);
  filter: drop-shadow(0 0 12px rgba(42,157,120,0.8))
          drop-shadow(0 0 22px rgba(184,137,42,0.5))
          brightness(1.3);
}
html.light-theme .nav-logo img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15)) brightness(0.97);
}
html.light-theme .nav-logo:hover img {
  filter: drop-shadow(0 2px 8px rgba(42,157,120,0.35)) brightness(1.02);
}

/* Logo text */
.nav-logo-text {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  display: flex;
  align-items: center;
}

.nav-logo-nova {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  background: linear-gradient(135deg, #2fc99a 0%, #1e9e70 60%, #167a55 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-logo-sounds {
  font-family: var(--serif);
  font-weight: 700;
  background: linear-gradient(135deg, #d4a030 0%, #b8892a 60%, #9a7020 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.light-theme .nav-logo-nova {
  background: linear-gradient(135deg, #1a8a60 0%, #0e6a48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html.light-theme .nav-logo-sounds {
  background: linear-gradient(135deg, #9a7010 0%, #7a5808 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Nav links ─────────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0; padding: 0;
}

.nav-links a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
}
.nav-links a:hover {
  color: var(--ink);
  background: rgba(128,128,128,0.07);
}
.nav-links a.active {
  color: var(--gold);
  background: var(--gold-subtle);
  font-weight: 600;
}
html.light-theme .nav-links a.active {
  color: var(--gold);
  background: var(--gold-subtle);
}

/* ══════════════════════════════════════════════════════════════
   RIGHT-SIDE CLUSTER  (redesigned v2)
   ──────────────────────────────────────────────────────────────
   Layout:  [Theme] | [Search] [Bell] | [Coins] | [User Pill]

   We visually group items into three clusters separated by
   a subtle divider so the navbar feels organised rather than
   a flat list of buttons.
   ══════════════════════════════════════════════════════════════ */

.nav-right {
  display: flex;
  align-items: center;
  gap: 6px;          /* tighter base gap; groups provide visual breathing room */
}

/* ── Cluster separator ─────────────────────────────────────── */
/* Usage: <div class="nav-sep"></div> between clusters         */
.nav-sep {
  width: 1px;
  height: 22px;
  background: var(--border2, rgba(255,255,255,0.1));
  border-radius: 1px;
  flex-shrink: 0;
  margin: 0 4px;
}
html.light-theme .nav-sep {
  background: rgba(0,0,0,0.1);
}

/* ── Theme toggle ──────────────────────────────────────────── */
.theme-toggle {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 20px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink3);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--border2);
  color: var(--ink2);
  background: var(--card);
}
.theme-toggle .toggle-track {
  width: 30px; height: 17px;
  background: var(--border2);
  border-radius: 9px;
  position: relative;
  transition: background 0.3s ease;
  flex-shrink: 0;
}
.theme-toggle .toggle-track::after {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink3);
  top: 3px; left: 3px;
  transition: transform 0.3s ease, background 0.3s ease;
}
html.light-theme .theme-toggle .toggle-track {
  background: var(--gold);
}
html.light-theme .theme-toggle .toggle-track::after {
  transform: translateX(13px);
  background: #fff;
}
.toggle-icon { font-size: 13px; line-height: 1; }

/* ── Icon-only cluster: Search + Bell ─────────────────────── */
/* These two live side-by-side in a pill group container       */
.nav-icon-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--card, rgba(255,255,255,0.04));
  border: 1px solid var(--border2, rgba(255,255,255,0.08));
  border-radius: 22px;
  /* Allow bell dropdown to overflow without clipping */
  overflow: visible;
  position: relative;
}
html.light-theme .nav-icon-group {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.08);
}

/* Search placeholder — collapses when empty, expands when navbar-search.js fills it */
#nsSearchWrap:empty { display: none; }
#nsSearchWrap { display: flex; align-items: center; }

/* Bell wrap lives inside .nav-icon-group on desktop */
.nav-bell-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── Coin badge ────────────────────────────────────────────── */
.nav-coins {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: var(--gold-subtle);
  border: 1px solid rgba(212,168,67,0.2);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-coins:hover {
  background: rgba(212,168,67,0.15);
  border-color: var(--gold);
}
html.light-theme .nav-coins {
  background: rgba(184,134,28,0.08);
  border-color: rgba(184,134,28,0.3);
  color: var(--gold);
}

/* ── User pill ─────────────────────────────────────────────── */
/* The user pill from Navbar-auth.js is inline-styled, but we  */
/* add shared structural styles here.                          */
#navUserPill {
  flex-shrink: 0;
}

/* ── Auth button group ─────────────────────────────────────── */
.nav-auth-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-mobile-cta { display: none !important; }


/* ══════════════════════════════════════════════════════════════
   MOBILE  ≤ 900px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .navbar    { padding: 0 16px; height: 58px; }
  .nav-links { display: none; }
  .nav-sep   { display: none; }

  /* Logo */
  .nav-logo-text { display: flex !important; font-size: 1.1rem; }
  .nav-logo img  { height: 36px; }

  /* Theme toggle — icon only */
  .theme-toggle .toggle-label,
  .theme-toggle .toggle-track { display: none !important; }
  .theme-toggle {
    padding: 6px 8px;
    min-width: unset;
    gap: 0;
    border: 1px solid var(--border2);
    background: var(--card);
    border-radius: 50%;
  }
  .theme-toggle .toggle-icon { font-size: 15px; }

  /* Icon group — unwrap on mobile, show items at natural size */
  .nav-icon-group {
    background: transparent;
    border: none;
    padding: 0;
    gap: 4px;
  }

  /* Auth buttons */
  .nav-auth-btns              { gap: 6px; }
  .nav-auth-btns .btn-ghost   { display: none !important; }
  .nav-auth-btns .btn-gold    { padding: 7px 14px; font-size: 12px; }

  /* Mobile CTA */
  .nav-mobile-cta {
    display: inline-flex !important;
    padding: 7px 14px;
    font-size: 12px;
  }

  /* Coins */
  .nav-coins { padding: 5px 8px; font-size: 11px; }

  /* Tighten gap */
  .nav-right { gap: 6px; }
}

@media (max-width: 480px) {
  .navbar { padding: 0 12px; }
  .nav-auth-btns .btn-gold { padding: 7px 10px; font-size: 11px; }
}