/* Site-specific styles: header, hero, sections, slider, wizard, auth */

/* --- Header --- */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast), box-shadow var(--t-fast);
  /* Agent A 2026-10-30 [CLIENT C1] — «صفحه قبلی روش می‌مونه» on iPhone.
   * A sticky, translucent, blurred bar is re-rasterised by iOS Safari
   * against whatever was painted behind it. Without its own stable
   * compositing layer Safari recycles stale pixels from the previous
   * page, which is exactly the ghosting the client reported.
   * translateZ(0) pins it to its own layer; isolation keeps its blend
   * context separate from the content scrolling underneath. */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  isolation: isolate;
  will-change: background-color;
}
.site-head.scrolled { box-shadow: 0 8px 30px -10px rgba(15,23,42,.08); }
.head-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--brand-900); }
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px;
  background: conic-gradient(from 220deg, var(--brand-500), var(--brand-300), var(--accent), var(--brand-500));
  display: grid; place-items: center; color: #fff; font-weight: 900;
  box-shadow: 0 10px 25px -8px rgba(43,85,214,.6);
  font-family: 'Mikhak';
  font-size: 1.1rem;
  letter-spacing: .5px;
}
.brand-text strong { display: block; font-size: 1.05rem; }
.brand-text small  { display: block; color: var(--muted); font-weight: 600; font-size: .72rem; letter-spacing: .4px; }
.nav-desk { display: none; gap: 4px; align-items: center; }
.nav-desk a { padding: 10px 14px; border-radius: 999px; color: var(--ink-2); font-weight: 600; }
.nav-desk a:hover, .nav-desk a.active { color: var(--brand-700); background: var(--surface-2); }
.head-cta { display: flex; gap: 8px; }

.burger { display: inline-flex; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff; align-items: center; justify-content: center; }
.burger svg { width: 22px; height: 22px; stroke: var(--brand-900); }

.mobile-nav {
  position: fixed; inset: 0; background: rgba(11,23,51,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity var(--t); z-index: 200;
}
.mobile-nav.open { opacity: 1; pointer-events: auto; }
.mobile-nav-panel {
  position: absolute; top: 0; right: 0; width: 86%; max-width: 340px; height: 100%;
  background: #fff; padding: 24px; display: flex; flex-direction: column; gap: 8px;
  transform: translateX(100%); transition: transform var(--t);
}
.mobile-nav.open .mobile-nav-panel { transform: none; }
.mobile-nav-panel a { padding: 14px 16px; border-radius: 12px; font-weight: 700; color: var(--ink); }
.mobile-nav-panel a:hover { background: var(--surface-2); }

@media (min-width: 920px) { .nav-desk { display: inline-flex; } .burger { display: none; } }

/* --- Hero --- */
.hero { position: relative; padding: 56px 0 24px; overflow: hidden; }
.hero-grid { display: grid; gap: 36px; align-items: center; }
.hero-copy h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.15; }
.hero-copy h1 .grad { background: linear-gradient(135deg, var(--brand-500), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy p.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 540px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.hero-trust { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 14px; font-weight: 700; font-size: .9rem; box-shadow: 0 14px 34px -28px rgba(11,23,51,.35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.trust-item .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
.hero-assurance { margin-top: 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; width:min(100%,560px); padding:14px 16px; border-radius:18px; border:1px solid rgba(43,85,214,.16); background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(241,245,251,.88)); box-shadow:0 24px 50px -34px rgba(11,23,51,.45); }
.hero-assurance b { display:block; color:var(--brand-900); font-weight:900; }
.hero-assurance small { display:block; color:var(--muted); font-size:.82rem; line-height:1.7; }
.hero-assurance a { flex:0 0 auto; color:var(--brand-700); background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-weight:800; font-size:.85rem; }
@media (max-width: 520px) { .hero-assurance { align-items:flex-start; flex-direction:column; } }

/* Hero visual: animated money card */
.hero-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
}
.hv-core {
  position: absolute; inset: 10%;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500) 60%, var(--accent));
  box-shadow: 0 40px 80px -20px rgba(43,85,214,.5);
  overflow: hidden;
  transform-origin: center;
  animation: hv-float 6s ease-in-out infinite;
}
.hv-core::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.4), transparent 40%);
  animation: hv-rotate 10s linear infinite;
}
.hv-chip {
  position: absolute; top: 24px; right: 24px; width: 54px; height: 42px;
  background: linear-gradient(135deg, #f7d26b, #e4a73e); border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 2px 6px rgba(0,0,0,.2);
}
.hv-chip::before, .hv-chip::after { content:""; position:absolute; background: rgba(0,0,0,.2); }
.hv-chip::before { inset: 10px 8px auto 8px; height: 2px; }
.hv-chip::after  { inset: auto 8px 10px 8px; height: 2px; }
.hv-num {
  position: absolute; bottom: 60px; right: 24px; left: 24px;
  color: rgba(255,255,255,.9); font-family: 'Mikhak'; font-size: 1.3rem;
  letter-spacing: 3px; text-align: left; direction: ltr; font-variant-numeric: tabular-nums;
}
.hv-brand {
  position: absolute; bottom: 24px; right: 24px; color: #fff; font-weight: 800; opacity: .9; font-size: .95rem;
}
.hv-logo {
  position: absolute; bottom: 24px; left: 24px; width: 32px; height: 32px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, #f3f4f6 70%);
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.hv-coin {
  position: absolute; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffd166, #f0a500 70%);
  box-shadow: 0 10px 20px rgba(240,165,0,.4), inset 0 2px 4px rgba(255,255,255,.4);
  display: grid; place-items: center;
  font-weight: 900; color: #6b3b00; font-size: 1.2rem;
}
.hv-coin.c1 { top: 5%; left: 5%; animation: hv-pop 5s ease-in-out infinite; }
.hv-coin.c2 { bottom: 10%; right: -4%; animation: hv-pop 7s ease-in-out infinite .5s; }
.hv-coin.c3 { top: 50%; left: -5%; width: 44px; height: 44px; font-size: .95rem; animation: hv-pop 6s ease-in-out infinite 1s; }
.hv-rings {
  position: absolute; inset: -10%; border-radius: 50%;
  background: radial-gradient(circle, transparent 46%, rgba(43,85,214,.12) 47%, transparent 48%),
              radial-gradient(circle, transparent 56%, rgba(255,181,71,.1) 57%, transparent 58%),
              radial-gradient(circle, transparent 66%, rgba(43,85,214,.08) 67%, transparent 68%);
  animation: hv-spin 30s linear infinite;
}

@keyframes hv-float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-2deg); } }
@keyframes hv-rotate{ to { transform: rotate(360deg); } }
@keyframes hv-pop   { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-14px) scale(1.05); } }
@keyframes hv-spin  { to { transform: rotate(360deg); } }

@media (min-width: 920px) { .hero-grid { grid-template-columns: 1.1fr 1fr; } }

/* --- Stats bar --- */
.stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 24px; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; text-align: center;
}
.stat b { display: block; font-size: 1.6rem; color: var(--brand-700); font-weight: 900; }
.stat small { color: var(--muted); font-weight: 600; }
@media (min-width: 760px) { .stats-bar { grid-template-columns: repeat(4, 1fr); } }

/* --- Sections --- */
.section { padding: 72px 0; }
.section.alt { background: linear-gradient(180deg, #fff 0%, var(--surface-2) 100%); }
.sec-head { text-align: center; margin-bottom: 40px; max-width: 720px; margin-right: auto; margin-left: auto; }

/* --- Feature cards --- */
.features { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature { padding: 28px; border-radius: var(--radius-lg); background: linear-gradient(180deg,var(--surface),rgba(255,255,255,.92)); border: 1px solid var(--line); transition: transform var(--t), box-shadow var(--t); position: relative; overflow: hidden; box-shadow: 0 18px 42px -36px rgba(11,23,51,.35); }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature::before { content: ""; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: radial-gradient(circle, var(--brand-300), transparent 70%); opacity: 0; transition: opacity var(--t); }
.feature:hover::before { opacity: .3; }
.feat-ico {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  display: grid; place-items: center; color: #fff; font-size: 1.6rem; margin-bottom: 16px;
  box-shadow: 0 10px 24px -8px rgba(43,85,214,.5);
}
.feature.gold .feat-ico { background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 24px -8px rgba(255,122,89,.5); }
.feature.premium-feature { border-color: rgba(43,85,214,.20); background: radial-gradient(circle at 0 0, rgba(74,123,255,.12), transparent 42%), linear-gradient(180deg,#fff,rgba(255,255,255,.94)); }
.feature h3 { color: var(--brand-900); margin-bottom: 8px; }
.feature p  { color: var(--ink-2); margin: 0; font-size: .95rem; }

/* --- Steps timeline --- */
.steps { display: grid; gap: 16px; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  align-items: center;
}
.step-num {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; display: grid; place-items: center; font-weight: 900; font-size: 1.3rem;
  box-shadow: 0 10px 20px -8px rgba(43,85,214,.5);
}
.step h4 { margin: 0 0 4px; color: var(--brand-900); }
.step p  { margin: 0; color: var(--ink-2); font-size: .95rem; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(2, 1fr); } }

/* --- Calculator / Slider --- */
.calc-card { padding: 32px; border-radius: var(--radius-xl); background: linear-gradient(180deg, #fff, var(--surface-2)); border: 1px solid var(--line); box-shadow: var(--shadow); }
.slider-row { margin-bottom: 20px; }
.slider-row .labels { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.slider-row .labels b { color: var(--brand-900); font-size: 1.1rem; font-weight: 900; }

.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-500) var(--p,50%), var(--surface-2) var(--p,50%));
  outline: none; direction: ltr;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 3px solid var(--brand-500);
  box-shadow: 0 4px 12px rgba(43,85,214,.35);
  cursor: pointer;
  transition: transform var(--t-fast);
}
.range::-webkit-slider-thumb:hover { transform: scale(1.1); }
.range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--brand-500);
  box-shadow: 0 4px 12px rgba(43,85,214,.35);
}

.calc-out { margin-top: 24px; display: grid; gap: 10px; }
.calc-out .row-line { display: flex; justify-content: space-between; padding: 12px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.calc-out .row-line.main { background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); color: #fff; border-color: transparent; font-size: 1.1rem; }
.calc-out .row-line.main b { color: var(--accent); font-size: 1.4rem; }

/* --- FAQ --- */
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.faq-item summary { padding: 18px 20px; cursor: pointer; font-weight: 700; color: var(--brand-900); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--brand-500); transition: transform var(--t-fast); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 20px 18px; color: var(--ink-2); }

/* --- Footer --- */
.site-foot { background: var(--brand-900); color: #cbd5e1; padding: 48px 0 24px; margin-top: 60px; }
.site-foot h4 { color: #fff; margin-bottom: 12px; font-size: 1rem; }
.site-foot a { color: #cbd5e1; display: block; padding: 4px 0; font-size: .92rem; }
.site-foot a:hover { color: var(--accent); }
.foot-grid { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot-bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-size: .85rem; color: #94a3b8; }

/* --- Auth pages --- */
.auth-wrap { min-height: calc(100vh - 80px); display: grid; place-items: center; padding: 40px 20px; }
.auth-card { width: 100%; max-width: 460px; padding: 36px 32px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.auth-card h2 { text-align: center; margin-bottom: 6px; }
.auth-card .sub { text-align: center; color: var(--muted); margin-bottom: 24px; font-size: .95rem; }
.auth-switch { text-align: center; margin-top: 20px; color: var(--muted); font-size: .9rem; }
.auth-switch a { color: var(--brand-500); font-weight: 700; }

/* --- Wizard --- */
.wiz-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 32px; }
.wiz-steps { display: flex; align-items: center; gap: 10px; width: 100%; }
.wiz-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.wiz-dot {
  width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2);
  border: 2px solid var(--line); display: grid; place-items: center;
  font-weight: 800; color: var(--muted); transition: all var(--t);
}
.wiz-step.active .wiz-dot, .wiz-step.done .wiz-dot {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  border-color: var(--brand-500); color: #fff; box-shadow: 0 8px 20px -8px rgba(43,85,214,.5);
}
.wiz-step small { font-size: .75rem; color: var(--muted); font-weight: 600; text-align: center; }
.wiz-step.active small { color: var(--brand-700); }
/* Agent A 2026-10-31 [ROUND2]: the connector used `right:50%`, which in RTL
   points at the NEXT step (to the left) — so the last step's line stuck 5px
   out of the card (horizontal scroll on 390px phones, verified) and the
   "done" colour lit the wrong segment. It now runs from this step's centre
   to the PREVIOUS step's centre (to the right in RTL); +10px = flex gap. */
.wiz-line { position: absolute; top: 18px; left: 50%; width: calc(100% + 10px); height: 2px; background: var(--line); z-index: -1; }
.wiz-step.active .wiz-line { background: var(--brand-500); }
.wiz-step.done .wiz-line { background: var(--brand-500); }
.wiz-step:first-child .wiz-line { display: none; }

.wiz-panel { animation: wiz-in .4s cubic-bezier(.22,1,.36,1); }
@keyframes wiz-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.file-drop {
  border: 2px dashed var(--line); border-radius: var(--radius); padding: 24px; text-align: center;
  background: var(--surface-2); transition: all var(--t-fast); cursor: pointer;
}
.file-drop:hover, .file-drop.drag { border-color: var(--brand-500); background: #fff; }
.file-drop input { display: none; }
.file-drop .ico { width: 48px; height: 48px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 12px; background: #fff; border: 1px solid var(--line); color: var(--brand-500); font-size: 1.4rem; }
.file-drop.has-file .ico { background: var(--brand-500); color: #fff; }

/* --- User dashboard --- */
.udash { display: grid; gap: 20px; grid-template-columns: 1fr; padding: 24px 0; }
@media (min-width: 920px) { .udash { grid-template-columns: 260px 1fr; } }
.uside { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; align-self: start; position: sticky; top: 88px; }
.uside a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; margin-bottom: 2px; }
.uside a:hover { background: var(--surface-2); color: var(--brand-700); }
.uside a.active { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; }

.umain h2 { margin-top: 0; }
/* Agent A 2026-11-01 [ROUND10 T1] «صفحه‌ها میره رو هم». `.uside` was sticky at EVERY width;
 * below 920px the grid is one column, so the menu stayed pinned and the cards scrolled UNDER it.
 * Phones/tablets: no sticky, the menu becomes one compact horizontally-scrollable row. */
@media (max-width: 919.98px) {
  .uside { position: static; top: auto; display: flex; align-items: center; gap: 6px; padding: 8px;
           overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .uside::-webkit-scrollbar { display: none; }
  .uside > .uside-who { display: none; }
  .uside a { flex: none; margin: 0; white-space: nowrap; padding: 8px 12px; font-size: .88rem; }
  .uside a#logoutBtn { margin-top: 0 !important; }
}

/* --- Wallet card --- */
.wallet-card { background: linear-gradient(135deg, var(--brand-700), var(--brand-500) 70%, var(--accent)); color: #fff; padding: 28px; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.wallet-card::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle, rgba(255,255,255,.15), transparent 60%); animation: hv-rotate 20s linear infinite; }
.wallet-card .label { color: rgba(255,255,255,.75); font-size: .92rem; }
.wallet-card .amount { font-size: 2.2rem; font-weight: 900; letter-spacing: -1px; }
.wallet-card .amount small { font-size: 1rem; font-weight: 600; margin-right: 6px; opacity: .8; }
.wallet-card .actions { display: flex; gap: 10px; margin-top: 20px; }
.wallet-card .actions .btn { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; }
.wallet-card .actions .btn:hover { background: rgba(255,255,255,.25); }
.wallet-card .actions .btn.gold { background: #fff; color: var(--brand-700); border-color: #fff; }

/* --- Table --- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tbl th, .tbl td { padding: 12px 14px; text-align: right; border-bottom: 1px solid var(--line); font-size: .92rem; }
.tbl th { background: var(--surface-2); font-weight: 700; color: var(--brand-900); font-size: .85rem; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--surface-2); }

/* Modal */
.modal-bg { position: fixed; inset: 0; background: rgba(11,23,51,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 400; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity var(--t); }
.modal-bg.open { opacity: 1; pointer-events: auto; }
.modal { background: #fff; border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 500px; transform: scale(.95); transition: transform var(--t); max-height: 85vh; overflow: auto; }
.modal-bg.open .modal { transform: none; }
.modal h3 { margin-top: 0; }
.modal-close { position: absolute; top: 16px; left: 16px; background: var(--surface-2); border: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }

/* loading */
.spinner { width: 20px; height: 20px; border: 2.5px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.loader { display: grid; place-items: center; padding: 60px 20px; color: var(--muted); }

/* ------------------------------------------------------------------
   Round 4 / F8 — heading structure.
   /login, /register and /calculator had NO <h1>: the card/section title
   was an <h2>, so those pages had no top-level heading for screen
   readers and for search engines. They are now <h1>, which is the
   correct semantic, but the base stylesheet makes <h1> much larger
   (clamp(2rem,4.6vw,3.4rem) vs clamp(1.6rem,3vw,2.2rem)).
   Pin them back to the old h2 scale so the fix is semantic-only and
   the visual design is byte-for-byte what the designer approved.
   ------------------------------------------------------------------ */
.auth-card h1,
.sec-head  h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
}

/* ------------------------------------------------------------------
   Round 4 / F7b — auth-card switch link touch target.
   "ثبت‌نام رایگان" / "ورود" at the bottom of the login & register cards
   is a bare inline <a>: its hit area was the text box only (~20px tall),
   under the 32px minimum and well under the 44px mobile guideline.
   Give it real padding + inline-block so the tap area matches what the
   user perceives. Kept inline-block (not block) so it stays on the same
   line as the "حساب ندارید؟" prompt.
   ------------------------------------------------------------------ */
.auth-switch a {
  display: inline-block;
  padding: 8px 12px;
  margin: -4px 0;
  min-height: 32px;
  line-height: 1.5;
  border-radius: 10px;
}
.auth-switch a:hover { background: var(--surface, rgba(43,85,214,.06)); }

/* ------------------------------------------------------------------
   Agent A 2026-10-30 [CLIENT C2/C10] — payment destination blocks
   (sheba / card / crypto address) inside the deposit modal.
   A wallet address is long, LTR and unforgiving: it must never wrap
   mid-string in a way that invites a mis-copy, must stay readable in
   an RTL page, and must be selectable by hand when the clipboard API
   is unavailable (plain HTTP / older iOS Safari).
   ------------------------------------------------------------------ */
.pay-dest {
  background: var(--surface, #f6f8fd);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pay-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-label {
  font-size: .78rem; font-weight: 800; color: var(--muted);
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; flex: none;
}
.pay-row code {
  flex: 1 1 200px; min-width: 0;
  direction: ltr; unicode-bidi: isolate; text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem; line-height: 1.6;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px;
  /* break anywhere: a 42-char address must not overflow a 390px screen */
  overflow-wrap: anywhere; word-break: break-all;
  -webkit-user-select: all; user-select: all;   /* one tap selects it all */
}
.pay-row .btn.sm { flex: none; }
.pay-dest small { font-size: .78rem; line-height: 1.7; }

/* Agent A 2026-10-30 [CLIENT C8]: bulleted list inside a FAQ answer
   (crypto networks under «برداشت از کیف پول»). RTL-aware. */
.faq-item .faq-body .faq-list { margin: 8px 0 0; padding-inline-start: 1.2em; }
.faq-item .faq-body .faq-list li { margin: 4px 0; line-height: 1.9; }

/* ------------------------------------------------------------------
   Agent A 2026-10-31 [CLIENT C5] — referral code card on the user
   dashboard. The code gets read aloud and retyped, so it is large, LTR,
   letter-spaced and select-all on one tap. Must stay legible on a 390px
   phone without stretching the card.
   ------------------------------------------------------------------ */
.referral-card .ref-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; flex-wrap: wrap;
}
.referral-card .ref-code {
  flex: 1 1 160px; min-width: 0;
  direction: ltr; unicode-bidi: isolate; text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem; font-weight: 800; letter-spacing: .18em;
  color: var(--brand-900);
  background: var(--surface, #f6f8fd);
  border: 1.5px dashed var(--brand-300, #86a9ff);
  border-radius: 12px; padding: 10px 12px;
  -webkit-user-select: all; user-select: all;
  overflow-wrap: anywhere;
}
.referral-card .ref-row .btn { flex: none; }

/* ------------------------------------------------------------------
   Agent A 2026-10-31 [ROUND2] — client brief round 2
   ------------------------------------------------------------------ */
/* N4 announcement bar 📣 — sits above the sticky header, at the very top. */
.ann-bar {
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  color: #fff; font-size: .9rem; font-weight: 700; line-height: 1.7;
  position: relative; z-index: 101;
}
.ann-bar[hidden] { display: none; }
.ann-inner { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-width: 0; }
.ann-ico { flex: none; font-size: 1.05rem; }
.ann-text { flex: 1; min-width: 0; text-align: center; overflow-wrap: anywhere; white-space: pre-line; }
.ann-close {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.18); color: #fff;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.ann-close:hover, .ann-close:focus-visible { background: rgba(255,255,255,.32); outline: 2px solid #fff; outline-offset: 1px; }

/* N1 telegram link inside text */
.tg-inline { font-weight: 700; white-space: nowrap; }
#tgLink bdi { opacity: .85; font-size: .85em; }

/* N5 unread admin messages */
.unread-pill {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--danger, #dc2626); color: #fff;
  font-size: .72rem; font-weight: 800; margin-inline-start: auto;
}
.unread-pill[hidden] { display: none; }
.unread-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger, #dc2626); margin-inline-end: 6px; vertical-align: middle;
}
.msg-banner {
  display: flex; align-items: center; gap: 12px; margin: -12px 0 22px;
  padding: 12px 16px; border-radius: 14px; text-decoration: none;
  background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}
.msg-banner > span:first-child { font-size: 1.4rem; }
.msg-banner b { display: block; }
.msg-banner small { color: #b45309; }
.msg-banner:hover { background: #ffedd5; color: #7c2d12; }

/* N6 extra text rows (holder, bank) in the payment-destination block */
.pay-text { font-size: .9rem; color: var(--ink, #0f172a); overflow-wrap: anywhere; }

/* N7 documents grid: ID cards + cheque/safteh tile. 3 columns on wide
   screens, 1 column on phones so nothing is squeezed. */
.docs-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .docs-grid { grid-template-columns: repeat(3, 1fr); } }
.file-drop.doc-info { cursor: default; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; }
a.file-drop.doc-info { cursor: pointer; }
.file-drop.doc-info.is-later { opacity: .8; border-style: dotted; background: var(--surface-2); }
.doc-check { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.doc-check li { padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.doc-check li.ok   { background: #e8f6ee; color: #166534; }
.doc-check li.miss { background: #fde2e2; color: #991b1b; }

/* [ROUND10 T2] voice guide under the hero sentence */
.voice-guide { margin: 4px 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(135deg, #eef4ff, #fff); max-width: 540px; box-shadow: 0 10px 30px -18px rgba(43,85,214,.45); }
.vg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vg-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); color: #fff; font-size: 1.1rem; }
.vg-head b { display: block; color: var(--brand-900); }
.vg-head small { display: block; color: var(--muted); font-size: .8rem; }
.voice-guide audio { width: 100%; height: 40px; display: block; }
.vg-text { margin-top: 8px; font-size: .88rem; color: var(--ink-2); }
.vg-text summary { cursor: pointer; font-weight: 700; color: var(--brand-700); }
.vg-text p { margin: 8px 0 0; line-height: 2; }

/* [ROUND10 T3] client banner next to the brand (desktop/tablet) + strip under the header (phones) */
.site-banner { display: none; align-items: center; height: 46px; aspect-ratio: 4 / 1; min-width: 0; padding: 0 12px;
  border-radius: 10px; overflow: hidden; text-decoration: none; color: #0b2a6b;
  background: radial-gradient(circle at 12% 30%, rgba(255,255,255,.55) 0 2px, transparent 3px) 0 0 / 10px 10px,
              linear-gradient(135deg, #7cc4ff, #3b8ef0); box-shadow: 0 6px 18px -10px rgba(43,85,214,.6); }
.site-banner.has-img { padding: 0; background: none; box-shadow: none; }
.site-banner img, .banner-strip img { height: 100%; width: auto; display: block; }
.sbn-txt { display: flex; flex-direction: column; line-height: 1.25; text-align: right; }
.sbn-txt b { font-size: .86rem; font-weight: 900; }
.sbn-txt small { font-size: .66rem; font-weight: 700; opacity: .9; }
.banner-strip { display: block; color: #0b2a6b; padding: 6px 0;
  background: radial-gradient(circle at 12% 30%, rgba(255,255,255,.5) 0 2px, transparent 3px) 0 0 / 10px 10px,
              linear-gradient(135deg, #7cc4ff, #3b8ef0); }
.banner-strip .sbn-txt { flex-direction: row; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.banner-strip.has-img { padding: 0; background: #fff; border-bottom: 1px solid var(--line); }
.banner-strip.has-img .wrap { height: 54px; display: flex; justify-content: center; }
@media (min-width: 640px) { .site-banner { display: flex; } .banner-strip { display: none; } }
@media (min-width: 920px) and (max-width: 1199.98px) { .nav-desk a { padding: 8px 9px; font-size: .9rem; } }