/* ─────────────────────────────────────────────────────────────────────────
   Afghan Followers — "Neon Gold" theme
   Loaded by every page right before </head>, AFTER each page's own inline
   styles. It re-points the shared design tokens (both naming families used
   across the site) and layers the neon treatment on primary actions, active
   states, cards and the page atmosphere. Delete the <link> tags to revert.

   Palette
     Ground     #16143A deep indigo (lifted off black), surfaces
                #1F1C46 / #27235A / #2F2B66, border #3D3875
     Signal     Sun #FFD23F → Amber #FFB627 → Tangerine #FF7A45
                (bright gradient — always carries DARK ink text)
     Solid acc  Saffron #E8590C — for small solid fills that keep WHITE text
                (badges, balance pill, avatars); white on it ≈ 3.6:1
     Semantic   Mint #3DFFA8 ok · Coral #FF5C7A error · Sun #FFD23F warn
     Text       #F3F0FF, muted #AAA4D0

   Selectors are prefixed with `html body` so they out-rank the pages' bare
   class rules even when a page has a later <style> block, while compound
   state rules (.svc-card.sel, .pay-card:hover …) still win over these.
   ───────────────────────────────────────────────────────────────────────── */

html:root{
  /* short-name family — index, admin, auth, blog, guest */
  --bg:#16143a; --s1:#1f1c46; --s2:#27235a; --s3:#2f2b66; --bd:#3d3875;
  --acc:#e8590c; --acc2:#ffd23f;
  --gr:#3dffa8; --rd:#ff5c7a; --yw:#ffd23f; --or:#ff7a45; --ember:#ff7a45;
  --tx:#f3f0ff; --mt:#aaa4d0; --wh:#fff;

  /* long-name family — smm-panel */
  --surface:#1f1c46; --surface2:#27235a; --border:#3d3875;
  --accent:#e8590c; --accent2:#ffd23f; --accent-dark:#c2410c;
  --accent-glow:rgba(255,182,39,.32);
  --green:#3dffa8; --red:#ff5c7a; --yellow:#ffd23f; --orange:#ff7a45;
  --text:#f3f0ff; --muted:#aaa4d0; --white:#fff;

  /* typography — Persian always in Vazir (Vazirmatn). Inter comes first so
     Latin letters/digits stay in Inter, and every Persian glyph (which Inter
     doesn't have) falls through per-glyph to Vazirmatn instead of to the
     phone's system font. Covers both token families (--fn/--fn-fa on
     index/admin/auth/blog/guest, --font/--font-fa on smm-panel). */
  --fn:'Inter','Vazirmatn',sans-serif;
  --fn-fa:'Vazirmatn','Inter',sans-serif;
  --font:'Inter','Vazirmatn',sans-serif;
  --font-fa:'Vazirmatn','Inter',sans-serif;

  /* neon extras */
  --gold-sun:#ffd23f; --gold-amber:#ffb627; --gold-tang:#ff7a45;
  --neon-grad:linear-gradient(120deg,#ffd23f 0%,#ffb627 45%,#ff7a45 100%);
  --neon-ink:#120e24;            /* text ON the gold gradient (≥ 7:1 on every stop) */
  --glass-line:rgba(255,255,255,.09);
  --glass-hi:rgba(255,255,255,.06);

  color-scheme:dark;
  background:var(--bg);
  scrollbar-color:#4a4488 transparent;
}

/* ── Atmosphere: slow-drifting glow behind everything ───────────────────── */
/* The body is made transparent so the fixed layer (z-index:-1) sits between
   the html ground and the page content on every page, whether or not a page
   paints its own html background. */
html body{background:transparent !important; font-family:'Inter','Vazirmatn',sans-serif;}
/* form controls don't inherit the page font by default — make them */
html body :is(input,button,select,textarea){font-family:inherit;}
html body::before{
  content:"";
  position:fixed; inset:-18vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 12% 8%,  rgba(255,182,39,.20), transparent 62%),
    radial-gradient(34vmax 34vmax at 88% 22%, rgba(34,228,255,.11), transparent 62%),
    radial-gradient(44vmax 44vmax at 52% 108%, rgba(124,104,255,.24), transparent 62%);
  will-change:transform;
  animation:neonDrift 32s ease-in-out infinite alternate;
}
@keyframes neonDrift{
  from{transform:translate3d(0,0,0) rotate(0deg);}
  to  {transform:translate3d(3vmax,-2vmax,0) rotate(7deg);}
}
/* faint dot-matrix over the glow, fading out toward the edges */
html body::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.5px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 50% 25%, #000 25%, transparent 78%);
          mask-image:radial-gradient(ellipse 85% 65% at 50% 25%, #000 25%, transparent 78%);
}

::selection{background:rgba(255,182,39,.40); color:#fff;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ffd23f,#ff7a45); border-radius:10px; border:3px solid var(--bg);}

html body :focus-visible{
  outline:2px solid var(--gold-sun); outline-offset:2px;
  box-shadow:0 0 0 5px rgba(255,210,63,.18);
}

/* ── Brand wordmark ─────────────────────────────────────────────────────── */
html body .logo{
  font-family:'Unbounded','Vazirmatn','Inter',sans-serif;
  letter-spacing:-.2px;
}

/* ── Signature: glowing gold gradient headline ──────────────────────────── */
html body .hero h1 span,
html body .hero-title span{
  background:var(--neon-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 16px rgba(255,182,39,.38));
}
html body .hero h1{letter-spacing:-.5px;}

/* ── Primary actions: gold gradient, ink text, warm glow ────────────────── */
html body :is(.btn-p,.btn-primary,.btn-acc,.qo-go){
  background:var(--neon-grad);
  background-size:220% 100%;
  background-position:0% 0;
  color:var(--neon-ink);
  font-weight:800;
  border:0;
  box-shadow:0 8px 26px -8px rgba(255,150,40,.6), inset 0 1px 0 rgba(255,255,255,.45);
  transition:background-position .6s ease, transform .15s ease, box-shadow .3s ease, filter .2s ease;
}
html body :is(.btn-p,.btn-primary,.btn-acc,.qo-go):hover{
  background-position:100% 0;
  transform:translateY(-1px);
  box-shadow:0 12px 34px -8px rgba(255,122,69,.6), 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.45);
}
html body :is(.btn-p,.btn-primary,.btn-acc,.qo-go):active{transform:translateY(0); filter:brightness(.95);}
html body :is(.btn-p,.btn-primary,.btn-acc,.qo-go):disabled,
html body :is(.btn-p,.btn-primary,.btn-acc,.qo-go)[disabled]{
  opacity:.5; transform:none; box-shadow:none; cursor:not-allowed;
}

/* ── Active tabs / segmented controls ───────────────────────────────────── */
html body :is(.tab.on,.plat-tab.on,.pi-cat.on,.sd.on){
  background:var(--neon-grad);
  color:var(--neon-ink);
  border-color:transparent;
  box-shadow:0 6px 20px -8px rgba(255,150,40,.55);
}
/* active-item indicator bars in the side/bottom navs
   (pseudo-elements aren't allowed inside :is(), so a plain selector list) */
html body .dnav-item.active::before,
html body .ni.on::before,
html body .mbs-tab.on::after{
  background:var(--neon-grad);
  box-shadow:0 0 12px rgba(255,182,39,.6);
}

/* ── Cards: indigo glass with a lit top edge ────────────────────────────── */
html body :is(.card,.chart-card,.trust-card,.svc-card,.pay-card,.gw-method-card,.af-pm-card,.pi-card,.mbs-prov-card,.post-card){
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)), var(--s1);
  border-color:var(--glass-line);
  box-shadow:inset 0 1px 0 var(--glass-hi), 0 16px 36px -24px rgba(5,3,20,.9);
}
html body :is(.trust-card,.svc-card,.pay-card,.gw-method-card,.post-card,.pi-card){
  transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
html body :is(.trust-card,.svc-card,.pay-card,.gw-method-card,.post-card,.pi-card):hover{
  border-color:rgba(255,182,39,.5);
  box-shadow:0 0 0 1px rgba(255,182,39,.22), 0 16px 42px -16px rgba(255,150,40,.4), inset 0 1px 0 var(--glass-hi);
}

/* ── The bold move: a live, rotating gold ring around Quick Order ─────────
   (the landing page's main conversion widget). A conic gradient painted on
   the border-box under an opaque padding-box, with one cool cyan beat for
   contrast. @property lets the angle animate; browsers without it just show
   a static ring. */
@property --neon-angle{syntax:'<angle>'; initial-value:0deg; inherits:false;}
@keyframes neonSpin{to{--neon-angle:360deg;}}
@keyframes neonPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,182,39,.30), 0 20px 60px -30px rgba(255,122,69,.7);}
  60%    {box-shadow:0 0 0 12px rgba(255,182,39,0), 0 20px 60px -30px rgba(255,122,69,.7);}
}
html body .qo-wrap{
  border:1.5px solid transparent;
  background:
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01)) padding-box,
    linear-gradient(var(--s1),var(--s1)) padding-box,
    conic-gradient(from var(--neon-angle),#ffd23f,#ffb627,#ff7a45,#22e4ff,#ffb627,#ffd23f) border-box;
  box-shadow:0 20px 60px -30px rgba(255,122,69,.7);
  animation:neonSpin 6s linear infinite;
}
html body .qo-wrap.qo-wrap-pulse{
  animation:neonSpin 6s linear infinite, neonPulse 1.6s ease-in-out infinite;
}

/* "⚡ سفارش فوری" badge: from flashing red to a shimmering gold pill */
@keyframes neonShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
html body .qo-red-title{
  background:var(--neon-grad);
  background-size:220% 100%;
  color:var(--neon-ink);
  box-shadow:0 8px 28px -8px rgba(255,150,40,.65), inset 0 1px 0 rgba(255,255,255,.45);
  animation:neonShift 4s ease-in-out infinite;
}

/* ── Big numbers: display face + gold gradient fill ─────────────────────── */
html body :is(.stat b,.trust-num,.chart-metric){
  font-family:'Unbounded','Vazirmatn','Inter',sans-serif;
  background:var(--neon-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
/* child <small> labels keep their own colour instead of inheriting the
   transparent fill (which would make them invisible) */
html body :is(.trust-num,.chart-metric) small{-webkit-text-fill-color:currentColor;}

/* ── Form fields: gold focus glow ───────────────────────────────────────── */
html body :is(input,select,textarea):focus{
  border-color:var(--gold-amber);
  box-shadow:0 0 0 3px rgba(255,182,39,.16);
}

/* ── Respect reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html body::before,
  html body .qo-wrap, html body .qo-wrap.qo-wrap-pulse,
  html body .qo-red-title{animation:none;}
  html body :is(.btn-p,.btn-primary,.btn-acc,.qo-go,.trust-card,.svc-card,.pay-card,.gw-method-card,.post-card,.pi-card){
    transition:none;
  }
  html body :is(.btn-p,.btn-primary,.btn-acc,.qo-go):hover{transform:none;}
}