/* ============================================================
   NEX GO — UNIFIED NAVIGATION & FOOTER STYLES (DRY)
   ============================================================ */

:root {
  --nav-h: 64px;
  --nav-black: #050507;
  --nav-surface: #0c0c13;
  --nav-card: #101018;
  --nav-border: rgba(255, 255, 255, 0.07);
  --nav-border-lit: rgba(125, 211, 252, 0.24);
  --nav-white: #f6f6f8;
  --nav-dim: rgba(246, 246, 248, 0.65);
  --nav-muted: rgba(246, 246, 248, 0.38);
  --nav-neon: #4fd8ff;
  --nav-neon2: #8b7bff;
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-ease-sm: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-r-sm: 10px;
  --nav-r-md: 14px;
  --nav-r-lg: 20px;
  /* Single rail width shared by every mobile-drawer row (links, CTA, auth),
     so all drawer items line up on the same left/right edges. */
  --drawer-item-w: min(260px, 76vw);
  /* One row height for every drawer item; also clears the 44px touch min. */
  --drawer-row-h: 48px;
  /* Minimum comfortable touch target. The visual icon stays small; only the
     hit area grows. */
  --tap-min: 44px;
}

@media (min-width: 768px) {
  :root {
    --nav-h: 68px;
  }
}

@media (min-width: 1024px) {
  :root {
    --nav-h: 76px;
  }
}

/* Helper to provide safe clearance below the fixed navbar */
.page-top-offset,
.site-main-pad {
  padding-top: calc(var(--nav-h) + 24px) !important;
}

/* ═══════════════════════════════════════════
   NAV BAR
═══════════════════════════════════════════ */
nav#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(5, 5, 7, 0.85);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid var(--nav-border);
}

.nav-logo {
  font-family: "Space Grotesk", "Vazirmatn", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.22em;
  color: var(--nav-white);
  direction: ltr;
}

.nav-logo a {
  color: inherit;
  text-decoration: none;
}

.nav-links {
  display: none;
  list-style: none;
  align-items: center;
  gap: 28px;
}

.nav-links a {
  font-size: 0.84rem;
  font-weight: 400;
  color: var(--nav-dim);
  text-decoration: none;
  transition: color 0.3s var(--nav-ease-sm);
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 0;
  left: 0;
  height: 1.5px;
  background: var(--nav-neon);
  transform: scaleX(0);
  /* Logical origin so the underline grows from the start edge — the right
     side in this RTL document. */
  transform-origin: inline-start;
  transition: transform 0.35s var(--nav-ease);
}

.nav-links a:hover {
  color: var(--nav-white);
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-right-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   AUTH BUTTONS & USER MENU
═══════════════════════════════════════════ */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-guest {
  display: none;
  align-items: center;
  gap: 14px;
}

.auth-link-login {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--nav-dim);
  text-decoration: none;
  transition: color 0.3s var(--nav-ease-sm);
}

.auth-link-login:hover {
  color: var(--nav-white);
}

.nav-cta {
  background: var(--nav-white);
  color: var(--nav-black);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: transform 0.25s var(--nav-ease), background 0.25s;
}

.nav-cta:hover {
  background: #ffffff;
  transform: scale(1.03);
}

.auth-user {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-user-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--nav-border);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--nav-white);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: border-color 0.3s var(--nav-ease-sm), background 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.auth-user-btn:hover {
  border-color: var(--nav-border-lit);
  background: rgba(255, 255, 255, 0.03);
}

.auth-user-name {
  display: none;
}

.auth-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(79, 216, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  line-height: 1;
  object-fit: cover;
}

.auth-user-menu {
  display: none !important;
}

.auth-user-menu a,
.auth-user-menu button.auth-logout {
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--nav-dim);
  text-decoration: none;
  padding: 9px 12px;
  border-radius: var(--nav-r-sm);
  transition: background 0.2s, color 0.2s;
  text-align: right;
  display: block;
}

.auth-user-menu a:hover,
.auth-user-menu button.auth-logout:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--nav-white);
}

.auth-user-menu button.auth-logout {
  color: #ff8a8a;
  border-top: 1px solid var(--nav-border);
  margin-top: 4px;
  padding-top: 10px;
  background: none;
  border-inline: none;
  border-bottom: none;
  width: 100%;
  cursor: pointer;
}

.auth-user-menu button.auth-logout:hover {
  background: rgba(255, 108, 108, 0.08);
}

/* ═══════════════════════════════════════════
   CART BUTTON & MENU BUTTON
═══════════════════════════════════════════ */
.nav-cart-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  text-decoration: none;
  transition: border-color 0.3s, background 0.3s;
  -webkit-tap-highlight-color: transparent;
}

/* Grow the hit area past 44px without changing the 40px visual box, so the
   header keeps its exact current proportions on every breakpoint. 48px rather
   than exactly 44px leaves room for sub-pixel rounding; the 14px cluster gap
   means the two areas still never overlap. */
.nav-cart-btn::after,
.nav-menu-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
}

/* The wordmark was a 93x26 target. Height only — the type is untouched. */
.nav-logo a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.nav-cart-btn:hover {
  border-color: var(--nav-border-lit);
  background: rgba(255, 255, 255, 0.03);
}

.nav-cart-icon {
  width: 18px;
  height: 18px;
  stroke: var(--nav-dim);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.3s;
}

.nav-cart-btn:hover .nav-cart-icon {
  stroke: var(--nav-white);
}

.nav-cart-badge {
  position: absolute;
  top: -5px;
  left: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background: var(--nav-neon);
  color: var(--nav-black);
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  direction: ltr;
  box-shadow: 0 0 0 2px var(--nav-black);
}

.nav-cart-badge[hidden] {
  display: none !important;
}

.nav-menu-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--nav-border);
  border-radius: var(--nav-r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.3s;
  -webkit-tap-highlight-color: transparent;
}

.nav-menu-btn:hover {
  border-color: var(--nav-border-lit);
  background: rgba(255, 255, 255, 0.03);
}

.nav-menu-btn span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--nav-dim);
  transition: all 0.35s var(--nav-ease);
}

.nav-menu-btn.open span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 4px);
}
.nav-menu-btn.open span:nth-child(2) {
  opacity: 0;
}
.nav-menu-btn.open span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -4px);
}

/* ═══════════════════════════════════════════
   MOBILE DRAWER
═══════════════════════════════════════════ */
.mobile-drawer {
  position: fixed;
  inset: 0;
  /* dvh tracks the iOS Safari toolbar as it collapses/expands, so the drawer
     never ends up taller or shorter than the visible area. */
  height: 100vh;
  height: 100dvh;
  background: rgba(5, 5, 8, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transform: translateY(-100%);
  /* `visibility` keeps the off-screen drawer out of the tab order; without it
     the links stay focusable while invisible. */
  visibility: hidden;
  transition: transform 0.55s var(--nav-ease), visibility 0.55s;
  padding: calc(var(--nav-h) + 14px + env(safe-area-inset-top)) 24px
    calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mobile-drawer.open {
  transform: translateY(0);
  visibility: visible;
}

/* ── Drawer rows ──
   Every row — nav link, CTA, login, register, logout — is exactly
   --drawer-item-w wide and --drawer-row-h tall, so they share one left/right
   rail and one vertical rhythm. Height comes from min-height + flex centring
   rather than vertical padding: padding-driven heights drifted by 2-3px
   between rows whenever the font size or border differed. */
.mobile-drawer a,
.mobile-drawer-cta,
.drawer-auth-link,
.drawer-auth-register,
.drawer-auth-user button.auth-logout {
  width: var(--drawer-item-w);
  min-height: var(--drawer-row-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-family: inherit;
  text-align: center;
  flex-shrink: 0;
}

.mobile-drawer a {
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--nav-dim);
  text-decoration: none;
  border-radius: var(--nav-r-sm);
  border-bottom: 1px solid var(--nav-border);
  transition: color 0.3s var(--nav-ease-sm), background 0.3s var(--nav-ease-sm),
    border-color 0.3s var(--nav-ease-sm);
}

/* The login link is an <a> inside the drawer, so `.mobile-drawer a` above
   also matches it. Drop the divider there — it carries its own pill border. */
.mobile-drawer a:last-of-type,
.mobile-drawer .drawer-auth-link {
  border-bottom: none;
}

/* Hover only where a real pointer exists, so tapped links on a phone don't
   keep a stuck highlight. */
@media (hover: hover) and (pointer: fine) {
  .mobile-drawer a:hover {
    color: var(--nav-neon);
    border-color: var(--nav-border-lit);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(79, 216, 255, 0.12) 45%,
      transparent
    );
  }
}

.mobile-drawer a:active {
  color: var(--nav-neon);
  border-color: var(--nav-border-lit);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(79, 216, 255, 0.12) 45%,
    transparent
  );
}

.mobile-drawer a:focus-visible {
  color: var(--nav-neon);
  border-color: var(--nav-border-lit);
  outline: 1.5px solid var(--nav-neon);
  outline-offset: 2px;
}

/* The primary drawer CTA. Previously unstyled outside the homepage, which
   rendered it as a ~19px-tall default button. */
.mobile-drawer-cta {
  margin-top: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--nav-white);
  color: var(--nav-black);
  border: none;
  cursor: pointer;
  border-radius: 100px;
  transition: background 0.25s var(--nav-ease-sm);
  -webkit-tap-highlight-color: transparent;
}

.mobile-drawer-cta:active {
  background: var(--nav-neon);
}

.drawer-auth,
.drawer-auth-user {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  width: var(--drawer-item-w);
}

.drawer-auth-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--nav-dim);
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  transition: border-color 0.25s, color 0.25s;
}

.drawer-auth-link:active {
  border-color: var(--nav-neon);
  color: var(--nav-neon);
}

.drawer-auth-register {
  font-size: 0.88rem;
  font-weight: 600;
  background: var(--nav-white);
  color: var(--nav-black);
  border: none;
  cursor: pointer;
  border-radius: 100px;
  -webkit-tap-highlight-color: transparent;
}

.drawer-user-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--nav-white);
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 4px;
  width: var(--drawer-item-w);
}

.drawer-auth-user button.auth-logout {
  font-size: 0.88rem;
  font-weight: 600;
  color: #ff8a8a;
  background: none;
  border: 1px solid rgba(255, 138, 138, 0.25);
  border-radius: 100px;
  cursor: pointer;
  margin-top: 4px;
  -webkit-tap-highlight-color: transparent;
}

/* The logout form wraps a drawer row, so it has to carry the rail width too —
   otherwise the button inside it centres against the drawer instead. */
.drawer-logout-form {
  width: var(--drawer-item-w);
  display: flex;
}

.drawer-logout-form button.auth-logout {
  width: 100%;
}

.drawer-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  nav#nav { padding: 0 36px; }
  .nav-auth { display: flex; gap: 14px; }
  .auth-guest { display: flex; }
  .nav-links { display: flex; }
  .nav-menu-btn { display: none; }
  /* The trigger is gone at this width, so the drawer must never be able to
     linger open after a resize or orientation change. */
  .mobile-drawer { display: none; }

  .auth-user-btn {
    width: auto;
    height: auto;
    padding: 5px 14px 5px 6px;
    border-radius: 100px;
    gap: 8px;
  }

  .auth-user-name {
    display: inline;
  }

  .auth-user-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 190px;
    background: var(--nav-card);
    border: 1px solid var(--nav-border);
    border-radius: var(--nav-r-md);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.85);
    padding: 8px;
    display: flex !important;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--nav-ease-sm), transform 0.25s var(--nav-ease-sm), visibility 0.25s;
    z-index: 1001;
  }

  .auth-user:hover .auth-user-menu,
  .auth-user:focus-within .auth-user-menu,
  .auth-user-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (min-width: 1024px) {
  nav#nav { padding: 0 64px; }
}

/* ═══════════════════════════════════════════
   FOOTER
   Single source of truth. cart.html, category_products.html, articles.html,
   article_detail.html and about_us.html each carried a near-identical copy of
   this block in their own <style>, which won on cascade order and drifted:
   different grid breakpoints (820/480/360 vs 640), different link sizes, and
   32px tap targets. The richer fluid version from those copies is kept here;
   the copies are gone.
═══════════════════════════════════════════ */
footer[role="contentinfo"] {
  position: relative;
  z-index: 10;
  background: rgba(255, 255, 255, 0.012);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  /* Bottom inset keeps the legal row clear of the iPhone home indicator. */
  padding: clamp(40px, 6vw, 72px) clamp(22px, 5vw, 84px)
    env(safe-area-inset-bottom);
}

footer[role="contentinfo"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #00f0ff, #a855f7, transparent);
  opacity: 0.35;
  pointer-events: none;
}

.ft-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 48px);
  max-width: 1400px;
  margin: 0 auto;
  padding-bottom: clamp(32px, 5vw, 60px);
}

.ft-brand { max-width: 320px; }

.ft-logo {
  font-family: "JetBrains Mono", "Vazirmatn", monospace;
  font-weight: 700;
  font-size: clamp(1rem, 1.8vw, 1.28rem);
  background: linear-gradient(135deg, #00f0ff, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.14em;
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.ft-tag {
  font-size: clamp(0.78rem, 1vw, 0.85rem);
  color: rgba(255, 255, 255, 0.32);
  line-height: 1.85;
  max-width: 280px;
  margin-bottom: 22px;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.soc {
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s, border-color 0.35s, color 0.35s, transform 0.35s;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  flex-shrink: 0;
}

@media (hover: hover) {
  .soc:hover {
    background: rgba(0, 240, 255, 0.08);
    border-color: rgba(0, 240, 255, 0.28);
    color: #00f0ff;
    transform: translateY(-2px);
  }
}

.soc svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.ft-col h3 {
  font-family: "Vazirmatn", "Inter", sans-serif;
  font-size: clamp(0.72rem, 0.85vw, 0.78rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
  margin-bottom: clamp(8px, 1.2vw, 14px);
}

.ft-col ul {
  list-style: none;
}

/* The link supplies the row height, so no extra spacer is needed — this keeps
   the 44px targets from making the footer taller than it needs to be. */
.ft-col li {
  margin-bottom: 0;
}

.ft-col a {
  font-size: clamp(0.8rem, 0.95vw, 0.86rem);
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  transition: color 0.3s;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

@media (hover: hover) {
  .ft-col a:hover {
    color: #fff;
  }
}

.ft-bot {
  max-width: 1400px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: clamp(14px, 2vw, 22px) 0 clamp(20px, 3vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.ft-copy {
  font-family: "JetBrains Mono", "Vazirmatn", monospace;
  /* Was clamp(0.5rem, …) — an 8px floor on every phone, since the 0.65vw
     middle term never exceeds it below ~1230px. */
  font-size: clamp(0.68rem, 0.65vw, 0.72rem);
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.06em;
}

.ft-legal {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.5vw, 20px);
}

.ft-legal a {
  font-size: clamp(0.7rem, 0.75vw, 0.74rem);
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none;
  transition: color 0.3s;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

@media (hover: hover) {
  .ft-legal a:hover {
    color: rgba(255, 255, 255, 0.6);
  }
}

/* Two columns from 480px so link labels keep a usable measure, the full
   four-column layout from 1024px. */
@media (min-width: 480px) {
  .ft-top {
    grid-template-columns: 1fr 1fr;
  }
  .ft-brand {
    grid-column: 1 / -1;
    max-width: 100%;
  }
  .ft-tag {
    max-width: 100%;
  }
}

@media (min-width: 1024px) {
  .ft-top {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
  .ft-brand {
    grid-column: auto;
    max-width: 320px;
  }
  .ft-tag {
    max-width: 280px;
  }
}