/* Storefront shared primitives. Palette ROLES are tokens; every theme css file
   (/themes/<id>.css) sets its own values for them. This file owns what must
   look coherent no matter the structure: buttons, fields, the range, the LTR
   meter, disclosures, the modal layer, the toast, and the internals of the
   widgets the core renders (auth form, top-up, chat, referral, config list). */
@font-face{font-family:'IRANYekanXVF';src:url('/IRANYekanXVF.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --font-scale:1;
  /* neutral fallback palette so the boot state looks fine before the theme css lands */
  --ground:#f3f4f7; --ground-2:#fff; --surface:#fff; --surface-2:#eef0f4;
  --hairline:rgba(20,22,30,.1); --hairline-2:rgba(20,22,30,.18);
  --text:#15161c; --text-dim:#5b5f6e; --text-mute:#8b8f9c;
  --accent:#4f6df5; --accent-2:#4f6df5; --accent-rgb:79,109,245;
  --accent-soft:rgba(79,109,245,.12); --accent-glow:rgba(79,109,245,.3); --accent-ink:#fff;
  --ok:#1f9d63; --warn:#c48a1c; --bad:#d64560;
  --ease:cubic-bezier(.2,.9,.3,1); --dur:.28s;
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-btn:12px;
  --shadow:0 18px 40px -24px rgba(10,10,20,.35);
}
:root[data-radius="sharp"]{--r-xs:2px;--r-sm:4px;--r:6px;--r-lg:8px;--r-xl:10px;--r-btn:6px}
:root[data-radius="round"]{--r-xs:10px;--r-sm:14px;--r:20px;--r-lg:26px;--r-xl:32px;--r-btn:999px}

*{box-sizing:border-box}
html{font-size:calc(100% * var(--font-scale));scroll-behavior:smooth;background:var(--ground)}
body{margin:0;font-family:'IRANYekanXVF','Vazirmatn','Tahoma',sans-serif;background:var(--ground);color:var(--text);direction:rtl;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:.9375rem}
a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
input,textarea,select{font-family:inherit} img{max-width:100%;display:block}
h1,h2,h3,h4{margin:0;line-height:1.3;font-weight:800;text-wrap:balance}
p{margin:0}
::selection{background:rgba(var(--accent-rgb),.26)}
:focus-visible{outline:2px solid rgba(var(--accent-rgb),.75);outline-offset:2px;border-radius:var(--r-xs)}
.hidden{display:none!important}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;font-feature-settings:"tnum"}
.ltr{direction:ltr;unicode-bidi:isolate}
.muted{color:var(--text-dim)}
.w-ok{color:var(--ok)} .w-warn{color:var(--warn)} .w-bad{color:var(--bad)} .w-acc{color:var(--accent)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* icons */
.ic{display:inline-grid;place-items:center;line-height:0;flex:none}
.ic svg,.sp-iconbtn>svg,.sp-chat .send>svg,.sp-modal .x>svg{width:var(--s,20px);height:var(--s,20px);stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* boot / fatal */
.sp-boot{min-height:100vh;display:grid;place-items:center;color:var(--text-mute);font-weight:700;font-size:.9rem}
.sp-boot i{display:block;width:26px;height:26px;border-radius:50%;border:3px solid var(--hairline-2);border-top-color:var(--accent);animation:sp-spin .9s linear infinite;margin:0 auto 12px}
@keyframes sp-spin{to{transform:rotate(360deg)}}
.sp-fatal{min-height:100vh;display:grid;place-items:center;padding:30px;text-align:center;color:var(--text-dim);font-weight:700}

/* buttons */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;padding:.7em 1.2em;border-radius:var(--r-btn);font-size:.95rem;line-height:1.3;transition:transform .12s var(--ease),filter .15s,border-color .15s,background .15s,color .15s;border:1px solid transparent;white-space:nowrap;--s:18px}
.sp-btn:active{transform:translateY(1px)} .sp-btn:disabled{opacity:.55;cursor:default;transform:none}
.sp-btn-primary{background:var(--accent);color:var(--accent-ink)} .sp-btn-primary:hover{filter:brightness(1.07)}
.sp-btn-ghost{background:transparent;color:var(--text);border-color:var(--hairline-2)} .sp-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.sp-btn-soft{background:var(--surface-2);color:var(--text)} .sp-btn-soft:hover{color:var(--accent)}
.sp-btn-quiet{background:transparent;color:var(--text-dim);padding-inline:.6em} .sp-btn-quiet:hover{color:var(--text)}
.sp-btn-danger{background:transparent;color:var(--bad);border-color:rgba(214,69,96,.35)} .sp-btn-danger:hover{background:rgba(214,69,96,.08)}
.sp-btn-block{width:100%} .sp-btn-sm{padding:.5em .9em;font-size:.85rem;--s:16px} .sp-btn-lg{padding:.85em 1.4em;font-size:1.02rem}
.sp-iconbtn{width:38px;height:38px;border-radius:var(--r-sm);display:inline-grid;place-items:center;background:var(--surface-2);color:var(--text-dim);transition:.15s;--s:18px;flex:none}
.sp-iconbtn:hover{color:var(--accent)} .sp-iconbtn.sm{width:30px;height:30px;--s:16px}

/* fields */
.sp-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.sp-field>span{font-size:.8rem;font-weight:700;color:var(--text-dim)}
.sp-field input,.sp-input{padding:.75em .9em;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--hairline);color:var(--text);font-size:.95rem;transition:border-color .15s,background .15s;width:100%}
.sp-field input::placeholder,.sp-input::placeholder{color:var(--text-mute)}
.sp-field input:focus,.sp-input:focus{border-color:var(--accent);outline:none;background:var(--ground-2)}
.sp-err{color:var(--bad);font-size:.8rem;min-height:1.2em;margin:4px 0 6px}
.sp-mini{font-size:.76rem;color:var(--text-mute);text-align:center;margin-top:12px}
.sp-seg{display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:var(--r-btn);margin:0 0 16px}
.sp-seg button{flex:1;padding:.55em;border-radius:calc(var(--r-btn) - 3px);font-weight:800;font-size:.88rem;color:var(--text-dim);transition:background .18s,color .18s}
.sp-seg button.on{background:var(--ground-2);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.12)}

/* range (LTR by definition) */
.sp-range{direction:ltr}
input[type=range].sp-range,.sp-range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--fill,20%),var(--hairline-2) var(--fill,20%));outline:none;margin:6px 0;direction:ltr}
.sp-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--ground-2);border:5px solid var(--accent);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sp-range input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ground-2);border:5px solid var(--accent);cursor:pointer}
.sp-range-ends{display:flex;justify-content:space-between;font-size:.72rem;color:var(--text-mute);direction:ltr}

/* meter: LTR even in RTL */
.sp-meter{height:7px;border-radius:99px;background:var(--hairline);overflow:hidden;direction:ltr}
.sp-meter i{display:block;height:100%;border-radius:99px;background:var(--accent);transition:width .5s var(--ease)}
.sp-meter.warn i{background:var(--warn)} .sp-meter.bad i{background:var(--bad)}

/* disclosure: every show/hide slides */
.sp-disc{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur) var(--ease),opacity var(--dur)}
.sp-disc>*{overflow:hidden;min-height:0}
/* A 0fr row can squeeze a child's CONTENT to nothing but not its own padding:
   the nav drawer sat closed at 20px and pushed every page down by that much.
   Vertical padding is dropped while closed and returns with the open state,
   where the clip hides the swap. */
.sp-disc:not(.open)>*{padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0}
.sp-disc.open{grid-template-rows:1fr}
.sp-disc:not(.open){opacity:.0} .sp-disc.open{opacity:1}
.sp-chev{transition:transform var(--dur) var(--ease)} .open>.sp-chev,.on>.sp-chev{transform:rotate(180deg)}

/* protocol word, not a chip */
.sp-proto{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;color:var(--text-dim);white-space:nowrap}
.sp-proto::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.8}
.sp-proto.soon{color:var(--warn)} .sp-proto.soon::before{background:var(--warn)}
.sp-proto.wg::before{background:var(--ok)}

.sp-empty{text-align:center;padding:34px 18px;color:var(--text-mute);font-size:.9rem;line-height:1.8}

/* modal layer (owned by the core) */
.sp-modal-layer{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,8,14,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .22s}
.sp-modal-layer.open{opacity:1;pointer-events:auto}
.sp-modal{width:100%;max-width:440px;border-radius:var(--r-lg);padding:22px;position:relative;background:var(--ground-2);border:1px solid var(--hairline);box-shadow:0 40px 90px -40px #000;transform:translateY(14px) scale(.985);transition:transform .26s var(--ease);max-height:calc(100vh - 36px);overflow:auto}
.sp-modal-layer.open .sp-modal{transform:none}
.sp-modal h3{font-size:1.15rem;margin-bottom:4px;padding-inline-end:36px}
.sp-modal .sub{font-size:.85rem;color:var(--text-dim)}
.sp-modal .x{position:absolute;top:14px;left:14px;width:32px;height:32px;border-radius:var(--r-xs);background:var(--surface-2);display:grid;place-items:center;color:var(--text-dim);--s:17px}
.sp-modal .acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
@media(max-width:560px){.sp-modal-layer{align-items:flex-end;padding:0} .sp-modal{max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom));max-height:92vh;transform:translateY(40px)}}

/* buy summary */
.sp-summary{background:var(--surface-2);border-radius:var(--r);padding:14px;margin:14px 0 0;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.sp-summary .row{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.sp-summary .was{color:var(--text-mute);text-decoration:line-through;font-size:.82rem;margin-inline-end:6px}
.sp-summary .row.total{border-top:1px solid var(--hairline);padding-top:9px;font-weight:900;font-size:1.02rem}
.sp-summary .row.total b{color:var(--accent)}
.sp-promo{margin-top:10px}
.sp-promo .t{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:700;color:var(--text-dim);padding:4px 0;--s:15px;cursor:pointer}
.sp-promo .t:hover{color:var(--accent)}
.sp-promo .row{display:flex;gap:8px;padding-top:8px}
.sp-promo .row input{flex:1;direction:ltr;text-align:left;text-transform:uppercase;letter-spacing:.06em}
.sp-promo .msg{font-size:.78rem;margin-top:6px;min-height:1.1em}

/* config list (success + config modal) */
.sp-cfg-list{display:flex;flex-direction:column;gap:8px;max-height:min(44vh,320px);overflow:auto;margin:10px 0 6px;padding:2px}
.sp-cfg-item{display:flex;align-items:center;gap:9px;background:var(--surface-2);border-radius:var(--r-sm);padding:8px 8px 8px 12px}
.sp-cfg-item .rm{flex:1;min-width:0;font-size:.85rem;font-weight:700;overflow:hidden}
.sp-cfg-item .rm small{display:block;font-weight:500;color:var(--text-mute);font-size:.68rem;direction:ltr;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sp-sublink{margin:12px 0 2px}
.sp-sublink .lbl{font-size:.76rem;font-weight:800;color:var(--text-dim);margin-bottom:6px;display:block}
.sp-sub-box{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:var(--r-sm);padding:7px 7px 7px 12px;font-size:.78rem;direction:ltr}
.sp-sub-box code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sp-kv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 12px;align-items:center;font-size:.88rem;margin:12px 0}
.sp-kv .k{color:var(--text-mute);font-size:.78rem} .sp-kv code{direction:ltr;text-align:left;font-family:ui-monospace,Menlo,monospace;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* toast */
.sp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);z-index:95;background:var(--text);color:var(--ground);padding:10px 18px;border-radius:var(--r-btn);font-weight:700;font-size:.88rem;box-shadow:0 20px 50px -20px #000;transition:transform .35s var(--ease);display:flex;align-items:center;gap:8px;--s:17px;max-width:calc(100vw - 32px)}
.sp-toast.show{transform:translateX(-50%) translateY(0)}

/* ---- widget: auth form ---- */
.sp-auth .sp-btn-block{margin-top:4px}

/* ---- widget: top-up ---- */
.sp-topup .lead{font-size:.85rem;color:var(--text-dim);margin-bottom:8px}
.sp-amts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 12px}
.sp-amts button{padding:.7em .2em;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid transparent;font-weight:800;font-size:.9rem;transition:.15s}
.sp-amts button.on{border-color:var(--accent);color:var(--accent)} .sp-amts button:hover{color:var(--accent)}
.sp-topup .need{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r);background:var(--accent-soft);margin-bottom:14px;font-size:.85rem;--s:18px;color:var(--text)}
.sp-topup .need .ic{color:var(--accent);margin-top:2px}
.sp-pay{background:var(--surface-2);border-radius:var(--r);padding:14px;margin-top:14px;font-size:.88rem}
.sp-pay .lock{display:flex;align-items:center;gap:7px;color:var(--text-mute);font-size:.76rem;margin-bottom:8px;--s:14px}
.sp-pay .intro{font-size:.84rem;color:var(--text-dim)}
.sp-cardline{display:flex;align-items:center;justify-content:center;gap:10px;direction:ltr;font-weight:800;letter-spacing:.08em;font-size:1.1rem;margin:10px 0;font-variant-numeric:tabular-nums}
.sp-exact{display:flex;align-items:center;justify-content:space-between;background:var(--ground-2);border-radius:var(--r-sm);padding:10px 14px;margin:10px 0}
.sp-exact .v{font-size:1.15rem;font-weight:900;color:var(--accent)}
.sp-pay .note{font-size:.78rem;color:var(--text-mute);margin-top:6px}
.sp-pay .wait{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:.78rem;color:var(--text-mute)}
.sp-timer{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:.85rem;color:var(--warn);font-variant-numeric:tabular-nums;--s:15px;direction:ltr}
.sp-timer.expired{color:var(--bad)}
.sp-rcpt{margin-top:12px;padding:12px;border-radius:var(--r);background:var(--ground-2);display:flex;flex-direction:column;gap:8px}
.sp-rcpt .h{font-size:.85rem;font-weight:800}
.sp-rcpt .file{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px dashed var(--hairline-2);border-radius:var(--r-sm);cursor:pointer;font-size:.8rem;color:var(--text-mute);transition:border-color .15s,color .15s;--s:16px}
.sp-rcpt .file:hover{border-color:var(--accent);color:var(--text)}
.sp-rcpt .prev{width:100%;max-height:190px;object-fit:contain;border-radius:var(--r-sm)}
.sp-rcpt .hint{font-size:.74rem;color:var(--text-mute);line-height:1.7}
.sp-rcpt .done{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--ok);padding:8px 0;--s:18px}

/* ---- widget: support chat ---- */
.sp-chat{border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--hairline);display:flex;flex-direction:column;overflow:hidden}
.sp-chat .body{display:flex;flex-direction:column;gap:9px;padding:14px;min-height:220px;max-height:52vh;overflow:auto}
.sp-chat .empty{margin:auto;text-align:center;color:var(--text-mute);font-size:.85rem;padding:24px 16px;line-height:1.8}
.sp-msg{max-width:82%;padding:9px 13px;border-radius:var(--r);font-size:.9rem;line-height:1.62;white-space:pre-wrap;word-break:break-word}
.sp-msg.them{background:var(--surface-2);border-top-right-radius:4px;align-self:flex-start}
.sp-msg.me{background:var(--accent);color:var(--accent-ink);border-top-left-radius:4px;align-self:flex-end;font-weight:600}
.sp-msg .who{font-size:.68rem;font-weight:800;color:var(--accent);margin-bottom:3px}
.sp-msg .time{font-size:.66rem;color:var(--text-mute);margin-top:3px;text-align:end;direction:ltr}
.sp-msg.me .time{color:var(--accent-ink);opacity:.7}
.sp-chat .composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--hairline);background:var(--ground-2)}
.sp-chat textarea{flex:1;resize:none;max-height:120px;padding:10px 13px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid transparent;color:var(--text);font-size:.92rem;line-height:1.5}
.sp-chat textarea:focus{border-color:var(--accent);outline:none}
.sp-chat .send{width:44px;flex:none;border-radius:var(--r-sm);background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;--s:19px}
.sp-chat .send:disabled{opacity:.5}
.sp-tg{display:flex;flex-direction:column;gap:10px}
.sp-tg p{font-size:.88rem;color:var(--text-dim)}

/* ---- widget: referral ---- */
.sp-ref{display:flex;flex-direction:column;gap:10px}
.sp-ref p{font-size:.88rem;color:var(--text-dim)}
.sp-ref .link{display:flex;gap:8px;align-items:center;background:var(--surface-2);border-radius:var(--r-sm);padding:6px 6px 6px 12px;direction:ltr}
.sp-ref .link code{flex:1;min-width:0;font-size:.8rem;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:ui-monospace,Menlo,monospace}
.sp-ref .stat{font-size:.85rem;color:var(--text-dim)} .sp-ref .stat b{color:var(--text);font-size:1.05rem}

/* ---- widget: guide steps (data from core, markup shared) ---- */
.sp-guide-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.sp-guide-tabs button{padding:.5em 1em;border-radius:var(--r-btn);background:var(--surface-2);font-weight:800;font-size:.86rem;transition:.15s;display:inline-flex;align-items:center;gap:7px;--s:16px;color:var(--text-dim)}
.sp-guide-tabs button.on{background:var(--accent);color:var(--accent-ink)}
.sp-steps{display:flex;flex-direction:column;gap:0}
.sp-step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--hairline)}
.sp-step:last-child{border-bottom:0}
.sp-step .n{width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:900;display:grid;place-items:center;font-size:.85rem;font-variant-numeric:tabular-nums}
.sp-step .n.note{background:transparent;color:var(--text-mute);--s:18px}
.sp-step b{font-weight:800;font-size:.92rem;display:block} .sp-step p{margin:3px 0 0;font-size:.84rem;color:var(--text-dim);line-height:1.75}
.sp-step a{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.sp-step code{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,Menlo,monospace;font-size:.8em;background:var(--surface-2);padding:1px 5px;border-radius:4px}

/* ---- FAQ (shared markup, themed spacing) ---- */
.sp-faq{display:flex;flex-direction:column}
.sp-faq details{border-bottom:1px solid var(--hairline)}
.sp-faq .q{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:14px 0;font-weight:800;font-size:.95rem;--s:18px}
.sp-faq .q .sp-chev{margin-inline-start:auto;color:var(--text-mute)}
.sp-faq .a p{padding:0 0 14px;font-size:.88rem;color:var(--text-dim);line-height:1.8}