/* payout.css — 💸 اپِ مشتری: «واریزِ پولِ خریدتان» و «پولِ فروشِ شما» (تهاتر، ۲۸ سپ ۲۰۲۶).
   ماکتِ تأییدشده: Desktop\claude\mc-payout-mockup (۳-phones). سبکِ iOS: نوارِ شیشه‌ای بالا، کارتِ گردِ کدر، بی‌خطِ دور.
   ⚠️ رنگ فقط توکن (شب = :root، روز = [data-theme="light"])؛ زمینه‌ها از پالتِ خودِ اپ (--bg / --surface-solid). */

:root {
  --po-red: #ff7a70; --po-red-bg: rgba(255,69,58,.13); --po-red-line: rgba(255,105,97,.5);
  --po-ok: #4cd964; --po-ok-bg: rgba(48,209,88,.15);
  --po-w: #ff9f0a; --po-w-ink: #ffb340; --po-w-bg: rgba(255,159,10,.15);
  --po-none: #3a3a3c; --po-fill: rgba(118,118,128,.24); --po-no: #3a3a3c;
  --po-card: var(--surface-solid, var(--surface));
  --po-sh: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.8);
  --po-glass: color-mix(in srgb, var(--bg) 72%, transparent);
}
[data-theme="light"] {
  --po-red: #c4001a; --po-red-bg: #fff0f0; --po-red-line: #ffb4ae;
  --po-ok: #1e7a37; --po-ok-bg: rgba(52,199,89,.14);
  --po-w: #e89400; --po-w-ink: #9a5800; --po-w-bg: rgba(255,149,0,.14);
  --po-none: #e3e3e8; --po-fill: rgba(118,118,128,.12); --po-no: #141C4D;
  --po-sh: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.14);
  --po-glass: color-mix(in srgb, var(--bg) 78%, transparent);
}

/* ── نوارِ بالای تابلو ── */
.po-topbar {
  display: block; width: calc(100% - 24px); margin: 0 12px 10px; padding: 11px 14px; border-radius: 14px; text-align: start;
  font: inherit; font-size: 13.5px; font-weight: 500; line-height: 1.8; cursor: pointer;
  background: var(--po-red-bg); color: var(--po-red); border: 0; box-shadow: inset 0 0 0 1.5px var(--po-red-line);
}
.po-topbar[hidden] { display: none; }
.po-topbar:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (pointer: coarse) { .po-topbar { min-height: 44px; } }
.wal-req.po-acc.hot i { color: var(--po-red); font-weight: 500; }

/* ── نمای تمام‌صفحه ── */
body.po-lock { overflow: hidden; }
.po-view {
  position: fixed; inset: 0; z-index: 62; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; animation: po-in .26s cubic-bezier(.2,.9,.3,1.05);
}
.po-view[hidden] { display: none; }
.po-view:focus { outline: 0; }
@keyframes po-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .po-view { animation: none; } }
.po-nav {
  flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: calc(env(safe-area-inset-top) + 6px) 12px 6px;
  background: var(--po-glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 .5px 0 var(--line); position: relative; z-index: 2;
}
.po-nav h2 { margin: 0; flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-back, .po-nav-sp { width: 88px; flex: none; }
.po-back { height: 44px; border: 0; background: none; color: var(--gold-ink, var(--gold)); font: inherit; font-size: 15px; text-align: start; padding: 0 4px; cursor: pointer; white-space: nowrap; }
.po-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 10px; }
.po-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px calc(24px + env(safe-area-inset-bottom)); }
.po-body > * { max-width: 560px; margin-inline: auto; }
.po-body > * + * { margin-top: 12px; }
.po-empty { text-align: center; color: var(--text-dim); padding: 48px 12px; font-size: 14px; }

/* ── هشدارِ قرمزِ بزرگ ── */
.po-warn { background: var(--po-red-bg); border-radius: 22px; padding: 14px 16px; color: var(--po-red); box-shadow: inset 0 0 0 1.5px var(--po-red-line); }
.po-warn .h { font-size: 18px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.po-warn p { margin: 6px 0 0; font-size: 14px; line-height: 1.8; font-weight: 500; }

/* ── کارتِ هر حساب (خریدار) ── */
.po-pay { background: var(--po-card); border-radius: 24px; box-shadow: var(--po-sh); padding: 6px 14px; }
.po-pay.open { padding-bottom: 14px; }
.po-pay-h {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 0; border: 0; background: none;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.po-pay-h[disabled] { cursor: default; opacity: 1; }
.po-pay-h:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 14px; }
.po-no { width: 26px; height: 26px; border-radius: 50%; background: var(--po-no); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 500; flex: none; }
.po-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.po-who b { font-size: 15.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-who small { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.po-pill { font-size: 12px; border-radius: 99px; padding: 3px 10px; font-weight: 500; white-space: nowrap; flex: none; }
.po-pill.w { background: var(--po-w-bg); color: var(--po-w-ink); }
.po-pill.ok { background: var(--po-ok-bg); color: var(--po-ok); }
.po-pill.r { background: var(--po-red-bg); color: var(--po-red); }
.po-pill.n { background: var(--po-fill); color: var(--text-dim); }
.po-exact { margin-top: 8px; border-radius: 16px; padding: 10px 14px; background: var(--po-red-bg); box-shadow: inset 0 0 0 1.5px var(--po-red-line); display: flex; align-items: center; gap: 10px; }
.po-ex-w { min-width: 0; flex: 1; }
.po-exact .l { font-size: 12px; color: var(--po-red); font-weight: 500; }
.po-exact .v { font-size: 23px; font-weight: 700; color: var(--po-red); line-height: 1.35; white-space: nowrap; }
.po-exact .v small { font-size: 15px; font-weight: 700; }
.po-exact .r { font-size: 12px; color: var(--po-red); }
.po-cp { margin-inline-start: auto; width: 44px; height: 44px; border-radius: 50%; background: var(--po-card); display: grid; place-items: center; color: var(--po-red);
  box-shadow: var(--po-sh); flex: none; border: 0; cursor: pointer; padding: 0; }
.po-cp:active { transform: scale(.94); }
.po-fld { margin-top: 8px; display: flex; align-items: center; gap: 10px; border-radius: 14px; background: var(--po-fill); padding: 0 4px 0 12px; min-height: 48px; }
.po-fld .l { font-size: 12px; color: var(--text-dim); flex: none; }
.po-fld .v { font-size: 14px; font-weight: 500; unicode-bidi: isolate; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: var(--text); }
.po-fld .c { margin-inline-start: auto; font: inherit; font-size: 13px; color: var(--gold-ink, var(--gold)); font-weight: 500; flex: none;
  border: 0; background: none; min-width: 48px; min-height: 44px; cursor: pointer; border-radius: 12px; }
.po-fld .c.dim { color: var(--text-dim); font-weight: 400; display: grid; place-items: center; }
.po-fld .c:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.po-ref input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--text); outline: 0; height: 44px; padding: 0 6px; }
.po-ref input::placeholder { color: var(--text-dim); opacity: .75; font-size: 14px; }
.po-ref:focus-within { box-shadow: inset 0 0 0 2px var(--gold); }
/* ⚠️ html + دو کلاس ⇒ بر دکمه‌ی تمِ iOS (گوشه‌ی ۱۲، رنگِ تخت) برنده است — ماکت: کپسولِ طلاییِ شیب‌دار */
html .po-view .po-send { width: 100%; margin-top: 12px; height: 48px; border-radius: 99px; font-size: 15px; font-weight: 600; }
html .po-view .po-send.btn-primary { background: linear-gradient(#e8c65a, #d3af37); color: var(--on-gold); box-shadow: 0 6px 18px -8px rgba(180,140,20,.75); border: 0; }
.po-note { font-size: 12.5px; line-height: 1.8; margin: 2px 0 6px; padding-inline-start: 36px; }
.po-pay.open .po-note { padding-inline-start: 0; margin-top: 10px; }
.po-note.ok { color: var(--po-ok); } .po-note.r { color: var(--po-red); } .po-note.n { color: var(--text-dim); }
.po-mini { font-size: 12.5px; color: var(--text-dim); text-align: center; line-height: 1.8; margin-top: 14px !important; }

/* ── فروشنده ── */
.po-wal { background: var(--po-card); border-radius: 24px; box-shadow: var(--po-sh); padding: 16px; }
.po-wal .l { font-size: 13px; color: var(--text-dim); }
.po-wal > .v { font-size: 28px; font-weight: 700; margin-top: 2px; white-space: nowrap; }
.po-wal > .v small { font-size: 15px; font-weight: 400; color: var(--text-dim); }
.po-bar { height: 8px; border-radius: 99px; background: var(--po-none); display: flex; overflow: hidden; margin-top: 12px; }
.po-bar i { display: block; height: 100%; flex: none; }
.po-bar .p { background: var(--po-ok); } .po-bar .w { background: var(--po-w); }
.po-bar .p + .w { margin-inline-start: 2px; }
.po-barl { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.po-barl b { font-weight: 500; }
.po-barl .g { color: var(--po-ok); } .po-barl .y { color: var(--po-w-ink); }
.po-wal .po-fld { margin-top: 12px; }
.po-inc { background: var(--po-card); border-radius: 24px; box-shadow: var(--po-sh); padding: 4px 10px; }
.po-ir { display: grid; grid-template-columns: 29px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 4px; position: relative; }
.po-ir + .po-ir::before { content: ""; position: absolute; top: 0; inset-inline: 45px 4px; height: 1px; background: var(--line); opacity: .7; }
.po-ir .a { font-size: 15.5px; font-weight: 500; white-space: nowrap; }
.po-ir .s2 { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.6; }
.po-ir .s2.r { color: var(--po-red); }
.po-ir.miss { background: var(--po-red-bg); border-radius: 16px; padding-inline: 8px; }
.po-sq { width: 29px; height: 29px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
.po-sq.ok { background: linear-gradient(#5fe07f, #34c759); }
.po-sq.w { background: linear-gradient(#ffb340, #ff9500); font-size: 13px; }
.po-sq.n { background: linear-gradient(#c4c4ca, #8e8e93); }
.po-sq.r { background: linear-gradient(#ff8a80, #ff3b30); }
.po-acts { display: flex; flex-direction: column; gap: 6px; }
.po-nr { min-height: 36px; padding: 0 12px; border-radius: 99px; background: var(--po-fill); font: inherit; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text); border: 0; white-space: nowrap; cursor: pointer; }
.po-nr.ok { background: var(--po-ok-bg); color: var(--po-ok); }
.po-nr[data-sure] { background: var(--po-red-bg); color: var(--po-red); }
@media (pointer: coarse) { .po-nr { min-height: 44px; } }
@media (min-width: 700px) { .po-acts { flex-direction: row; } }

/* ── برگه‌ی برداشت: سنجشِ زنده‌ی شبا ── */
.ww-chk.ok { color: var(--po-ok); }
.ww-chk.bad { color: var(--po-red); }
#wwPayto.bad { border-color: var(--po-red); }

/* ═══ 💸 جریانِ سه‌مرحله‌ایِ خرید — همان پرده‌ی انتظار، تمام‌صفحه (۲۸ سپ ۲۰۲۶، ماکتِ تأییدشده‌ی flow4) ═══
   مینیمال: یک عدد، یک نام، یک دکمه؛ هر توضیح پشتِ «؟». سه دایره‌ی بی‌متن = مرحله. رنگ فقط توکن. */
.wait-bg.flow { padding: 0; place-items: stretch; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none;
  touch-action: auto; animation: none; }
.wait-bg.flow > .wait-card { display: none; }
.wf { position: relative; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--text); outline: 0;
  --wf-gold: linear-gradient(#f3cf6a, #d9a32a); --wf-gold-sh: 0 4px 14px -6px rgba(180,120,10,.7); }
.wf[hidden] { display: none; }
.wf-top { flex: none; display: flex; align-items: center; min-height: 52px; padding: calc(var(--safe-t, 0px) + 6px) 12px 6px;
  background: var(--po-glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  box-shadow: 0 .5px 0 var(--line); position: relative; z-index: 2; }
.wf-top h2 { flex: 1; margin: 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--text); }
.wf-sp, .wf-x { width: 44px; height: 44px; flex: none; }
.wf-x { border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 50%; color: var(--text-dim); }
.wf-x svg { width: 30px; height: 30px; padding: 8px; border-radius: 50%; background: var(--po-fill); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.wf-x[hidden] { visibility: hidden; display: grid; }
.wf :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.wf-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); }
.wf-body > * { max-width: 420px; margin-inline: auto; }
.wf-main { display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }

/* سه دایره — بی متن؛ نام‌ها فقط در title/aria */
.wf-steps { display: flex; justify-content: center; align-items: center; }
.wf-steps i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 500; font-size: 13px;
  background: var(--po-fill); color: var(--text-dim); flex: none; transition: background .3s, box-shadow .3s; }
.wf-steps s { width: 56px; height: 3px; background: var(--po-none); border-radius: 8px; flex: none; transition: background .3s; }
.wf-steps i.d { background: #34c759; color: #fff; } .wf-steps s.d { background: #34c759; }
.wf-steps i.n { background: var(--wf-gold); color: #2a1c00; box-shadow: 0 0 0 5px rgba(217,163,42,.16); }
.wf-steps svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* مرحله‌ی ۱، «فیش‌ها رسید» و مرحله‌ی ۳ */
.wf-c { text-align: center; }
.wf-ring { width: 76px; height: 76px; border-radius: 50%; margin: 30px auto 14px; display: grid; place-items: center; font-size: 34px; position: relative; }
.wf-ring.w { background: var(--po-w-bg); color: var(--po-w-ink); }
.wf-ring.o { background: #34c759; color: #fff; }
.wf-ring svg.ic { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.wf-arc { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.wf-arc circle { fill: none; stroke-width: 3.5; }
.wf-arc .b { stroke: var(--po-w); stroke-linecap: round; stroke-dasharray: 270.2; transition: stroke-dashoffset 1s linear; }
.wf-ring b { font-size: 24px; font-weight: 700; line-height: 1; }
.wf-ring b.sm { font-size: 17px; }
.wf-ring.spin::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--po-w);
  animation: wf-spin 1s linear infinite; }
@keyframes wf-spin { to { transform: rotate(360deg); } }
.wf-t1 { font-size: 21px; font-weight: 700; color: var(--text); }
.wf-t2 { font-size: 15px; color: var(--text-dim); margin-top: 6px; }

/* نقطه‌های «۱ از N» */
.wf-dots { display: flex; justify-content: center; align-items: center; gap: 2px; margin: -19px 0 -11px; }
/* لمسِ ۴۴ بی بزرگ‌شدنِ نقطه: دکمه بلند است، حاشیه‌ی منفی فاصله‌ی دیدنی را همان نگه می‌دارد */
.wf-dots button { width: 22px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.wf-dots b { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--po-none); transition: width .25s, background .25s; }
.wf-dots .on b { background: #34c759; } .wf-dots .r b { background: var(--po-red); }
.wf-dots .cur { width: 30px; } .wf-dots .cur b { width: 22px; border-radius: 8px; background: #d9a32a; }

/* کارتِ یک حساب */
.wf-card { background: var(--po-card); border-radius: 28px; box-shadow: var(--po-sh); padding: 20px 18px 18px; position: relative; }
.wf-q { position: absolute; top: 12px; inset-inline-end: 12px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--po-fill);
  color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 500; display: grid; place-items: center; cursor: pointer; padding: 0; }
.wf-q::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.wf-to { font-size: 15px; color: var(--text-dim); text-align: center; }
.wf-to b { display: block; color: var(--text); font-weight: 500; font-size: 18px; margin-top: 2px; overflow-wrap: anywhere; }
.wf-amt { margin-top: 18px; text-align: center; border-radius: 22px; padding: 2px 0 4px; }
.wf-amt .v { font-size: 34px; font-weight: 700; color: var(--po-red); line-height: 1.2; white-space: nowrap; }
.wf-amt .u { font-size: 15px; color: var(--po-red); font-weight: 500; }
.wf-rial { display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 8px 16px; min-height: 44px; border-radius: 99px; border: 0;
  background: var(--po-fill); font: inherit; font-size: 16px; font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; }
.wf-rial svg, .wf-sheba svg { width: 17px; height: 17px; flex: none; color: var(--text-dim); }
.wf-rial:active, .wf-sheba:active { transform: scale(.97); }
.wf-chip { display: flex; width: max-content; max-width: 100%; margin: 8px auto 0; gap: 4px; align-items: center; font-size: 12.5px; color: var(--po-red);
  background: var(--po-red-bg); padding: 4px 12px; border-radius: 99px; font-weight: 500; }
.wf-chip.ok { color: var(--po-ok); background: var(--po-ok-bg); }
.wf-sheba { display: block; width: 100%; margin-top: 16px; text-align: center; border: 0; font: inherit; cursor: pointer; color: var(--text);
  background: var(--po-fill); border-radius: 18px; padding: 10px 8px; }
.wf-sheba .n { direction: ltr; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .32em;
  font-size: clamp(13.5px, 4vw, 15.5px); font-weight: 500; line-height: 1.6; }
.wf-sheba .n span { white-space: nowrap; }   /* شبا هرگز بریده نمی‌شود — اگر جا نبود فقط بینِ گروه‌های ۴تایی می‌شکند */
.wf-sheba .n svg { margin-inline-end: 3px; }
.wf-sheba small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.wf-pri { display: flex; width: 100%; height: 56px; margin-top: 20px; border-radius: 99px; border: 0; background: var(--wf-gold); color: #2a1c00;
  align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 500; font-size: 17px; box-shadow: var(--wf-gold-sh); cursor: pointer; }
.wf-pri:disabled { opacity: .6; cursor: default; }
.wf-pri svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wf-sec { display: flex; width: 100%; min-height: 48px; margin-top: 14px; border-radius: 99px; border: 0; background: var(--po-fill); color: var(--text);
  align-items: center; justify-content: center; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; }
.wf-note { font-size: 13.5px; line-height: 1.8; text-align: center; margin-top: 12px; }
.wf-note.r { color: var(--po-red); } .wf-note.n { color: var(--text-dim); } .wf-note.ok { color: var(--po-ok); }
.wf-card.off .wf-amt, .wf-card.off .wf-sheba { opacity: .45; }
.wf-link { display: block; margin: 0 auto; min-height: 44px; border: 0; background: none; font: inherit; font-size: 14px; color: var(--gold-ink, var(--gold)); cursor: pointer; padding: 0 12px; }

/* راهنمای بارِ اول: کلِ صفحه تیره، قابِ سفید دورِ هدف، حبابِ چتِ سفید با فلش */
.wf-dim { position: fixed; inset: 0; z-index: 4; background: transparent; }
/* ⚠️ نه `.sheet` — آن کلاسِ برگه‌های خودِ اپ است (زمینه‌ی کدر، ارتفاع، جا) و روی پرده‌ی تیره می‌نشست */
.wf-dim.for-sheet { background: rgba(0,0,0,.35); z-index: 6; }
.wf-spot { position: fixed; z-index: 5; border-radius: 22px; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 0 0 200vmax rgba(0,0,0,.58); transition: top .25s, left .25s, width .25s, height .25s; }
.wf-bub { position: fixed; z-index: 7; background: var(--po-card); color: var(--text); border-radius: 22px; padding: 14px 16px 12px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.5); font-size: 15px; line-height: 1.8; }
.wf-bub b { font-weight: 700; }
.wf-bub:focus { outline: 0; }
.wf-bub::after { content: ""; position: absolute; left: var(--ax, 50%); width: 16px; height: 16px; background: var(--po-card);
  transform: translateX(-50%) rotate(45deg); border-radius: 3px; }
.wf-bub.up::after { top: -7px; } .wf-bub.down::after { bottom: -7px; }
.wf-bub .ft { display: flex; align-items: center; margin-top: 10px; font-size: 13px; color: var(--text-dim); }
.wf-bub .nx { margin-inline-start: auto; background: var(--wf-gold); color: #2a1c00; border: 0; border-radius: 99px; min-height: 44px; padding: 0 22px;
  font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; }

/* برگه‌ی پایینِ «؟» */
.wf-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 7; background: var(--po-card); border-radius: 36px 36px 0 0;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.25); max-height: 86%; overflow-y: auto;
  max-width: 560px; margin-inline: auto; outline: 0; animation: wf-up .26s cubic-bezier(.2,.9,.3,1.05); }
@keyframes wf-up { from { transform: translateY(24px); opacity: 0; } }
.wf-sheet .grab { width: 38px; height: 5px; border-radius: 8px; background: var(--po-none); margin: 0 auto 14px; }
.wf-sheet h4 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
.wf-sheet p { margin: 0 0 10px; font-size: 15px; line-height: 1.9; }
.wf-sheet .red { color: var(--po-red); font-weight: 500; }
.wf-sheet .dim { color: var(--text-dim); font-size: 13.5px; }
.wf-sheet .sh { direction: ltr; unicode-bidi: isolate; }
.wf-sheet .po-fld { margin-top: 8px; }
.wf-sheet .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 8px; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .wf-spot, .wf-steps i, .wf-steps s, .wf-dots b { transition: none; } .wf-sheet { animation: none; } .wf-ring.spin::after { animation-duration: 3s; }
}

/* ═══ فروشنده: یک کارت، دو دکمه (ماکتِ flow4-3) ═══ */
.po-sc { background: var(--po-card); border-radius: 24px; box-shadow: var(--po-sh); padding: 16px; position: relative; text-align: center; }
#poAcct .po-sc, .po-sc + .po-sc { margin-top: 10px; }
/* داخلِ کارتِ «حسابِ من» جعبه‌درجعبه نشود: بی سایه، زمینه‌ی سبزِ کم‌رنگ (پول رسیده) */
#poAcct .po-sc { background: var(--po-ok-bg); box-shadow: none; border-radius: 20px; }
#poAcct .po-sc .b2 .no { background: var(--po-card); }
.po-sc .hq { position: absolute; top: 14px; inset-inline-end: 14px; margin: 0; inline-size: 24px; block-size: 24px; font-size: 12px; }
.po-sc .l { font-size: 14px; color: var(--text-dim); }
.po-sc .v { font-size: 28px; font-weight: 700; margin-top: 6px; line-height: 1.3; white-space: nowrap; color: var(--text); }
.po-sc .u { font-size: 14px; color: var(--text-dim); }
.po-sc .b2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.po-sc .b2 button { min-height: 50px; border-radius: 99px; border: 0; font: inherit; font-weight: 500; font-size: 16px; cursor: pointer; }
.po-sc .b2 .ok { background: #34c759; color: #fff; }
.po-sc .b2 .no { background: var(--po-fill); color: var(--text); }
.po-sc .b2 .no[data-sure] { background: var(--po-red-bg); color: var(--po-red); font-size: 13.5px; }
.po-more > summary { list-style: none; cursor: pointer; text-align: center; color: var(--gold-ink, var(--gold)); font-size: 14px; min-height: 44px;
  display: grid; place-items: center; border-radius: 14px; }
.po-more > summary::-webkit-details-marker { display: none; }
.po-more[open] > summary { color: var(--text-dim); }
.po-more > * + * { margin-top: 12px; }