/* ==========================================================================
   MitzuServer — theme + i18n layer
   Loaded AFTER styles.css so it wins on the tokens it changes.
   Two themes: dark (default, blue/black) and light (white/blue).
   Two languages: fa (rtl, default) and en (ltr).
   ========================================================================== */

/* ---------- LIGHT THEME ("سفید آبی") ---------- */
html[data-theme="light"]{
  --ink:#F4F8FD;          /* page background */
  --ice-0:#FFFFFF;        /* surface 1 */
  --ice-1:#EAF2FB;        /* surface 2 */
  --ice-2:#DEE9F7;
  --line:#D3E1F0;
  --line-2:#B9CDE4;
  --text:#0C1B2E;         /* near-navy text */
  --muted:#4A6076;
  --faint:#7D8FA3;
  --neon:#0A84FF;         /* blue accent */
  --neon-2:#3FA9FF;
  --neon-deep:#0066CC;
  --ok:#12A45B;
  --shadow:0 20px 45px -28px rgba(12,40,80,.35);
  --glow:0 0 0 1px rgba(10,132,255,.20),0 18px 50px -24px rgba(10,132,255,.35);
}
html[data-theme="light"] body{
  background:
    radial-gradient(1100px 600px at 85% -10%,rgba(10,132,255,.10),transparent 70%),
    radial-gradient(900px 520px at 10% 10%,rgba(63,169,255,.08),transparent 70%),
    #F4F8FD;
  color:var(--text);
}
/* kill the dark aurora blobs in light mode */
html[data-theme="light"] .bg{background:none}
html[data-theme="light"] .bg::before{opacity:.18}
html[data-theme="light"] .bg .aur{opacity:.20;mix-blend-mode:normal}

/* header / cards / panels that were hard-coded dark */
html[data-theme="light"] header{
  background:rgba(255,255,255,.82);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px)
}
html[data-theme="light"] .brand .word{color:var(--text)}
html[data-theme="light"] .links a{color:var(--muted)}
html[data-theme="light"] .links a:hover{color:var(--neon)}
html[data-theme="light"] .login{color:var(--text);border-color:var(--line-2)}
html[data-theme="light"] .btn-ghost{color:var(--text);border-color:var(--line-2);background:#fff}
html[data-theme="light"] .btn-primary{background:var(--neon);color:#fff;box-shadow:0 10px 30px -12px rgba(10,132,255,.7)}
html[data-theme="light"] .btn-primary:hover{background:var(--neon-deep)}

html[data-theme="light"] .plan,
html[data-theme="light"] .card,
html[data-theme="light"] .loc,
html[data-theme="light"] .term,
html[data-theme="light"] .faq details,
html[data-theme="light"] .traffic,
html[data-theme="light"] .cta-box{
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--shadow)
}
html[data-theme="light"] .plan.popular,
html[data-theme="light"] .plan.best{
  border-color:var(--neon);
  box-shadow:0 0 0 1px var(--neon),0 22px 60px -30px rgba(10,132,255,.55)
}
html[data-theme="light"] .tag{background:rgba(10,132,255,.10);color:var(--neon-deep);border-color:rgba(10,132,255,.25)}
html[data-theme="light"] .spec b,
html[data-theme="light"] .kv b{color:var(--text)}
html[data-theme="light"] .amt{color:var(--neon-deep)}
html[data-theme="light"] footer{background:#fff;border-top:1px solid var(--line)}
html[data-theme="light"] .term pre,
html[data-theme="light"] .term code{background:#F2F7FD;color:#0C1B2E}

/* ---------- THEME / LANG BUTTONS ---------- */
.ui-switches{display:flex;gap:8px;align-items:center;margin-inline-end:6px}
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;min-width:36px;padding:0 10px;border-radius:10px;
  border:1px solid var(--line-2);background:transparent;color:var(--text);
  font:inherit;font-size:13px;font-weight:700;cursor:pointer;
  transition:.18s ease
}
.ui-btn:hover{border-color:var(--neon);color:var(--neon)}
.ui-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="light"] .ui-btn{background:#fff;border-color:var(--line)}

/* ---------- ENGLISH (LTR) ---------- */
html[lang="en"]{direction:ltr}
html[lang="en"] body{text-align:left}
html[lang="en"] .faq summary,
html[data-lang="en"] .faq summary{text-align:left}

/* hide whichever language is not active */
html[data-lang="fa"] [data-en]{display:none !important}
html[data-lang="en"] [data-fa]{display:none !important}

@media(max-width:860px){
  .ui-switches{order:-1}
  .ui-btn span{display:none}
  .ui-btn{padding:0 8px}
}