/* پنل فرستنده — همه‌چیز زیر .vtcp، تا روی قالب میزبان نشت نکند. */

[hidden] { display: none !important; }

.vtcp,
.vtcp *,
.vtcp *::before,
.vtcp *::after { box-sizing: border-box; }

/* ============================================================================
   ONE palette declaration for every public root this plugin owns.
   ⚠ Until 2026-09-10 this file declared the same eight colours TWICE — once
   here for the panel and again further down for the rate/calculator widgets,
   because neither root contains the other. The reasoning was sound and the
   duplication was still a trap: the second copy would drift from the first
   with nothing erroring. Both roots now share ONE block; the per-root layout
   differences stay in their own rules below.

   ⚠ Each colour ALIASES the theme's token and keeps a literal fallback. The
   live value therefore comes from exactly one place — the palette block in
   the theme's `style.css` — while the fallback keeps this plugin correct on a
   theme that is not ours, which it must be (ARCH-MODE A / standalone: the
   PLATFORM may be a hard requirement, one of our own packages never may).
   The same aliasing pattern was already in use at the bottom of this file for
   the ticket-panel embed; it is now the rule rather than the exception.

   Every value below was measured 2026-09-10. Do not change one without
   re-measuring it against the surface it is used on.
   ============================================================================ */

.vtcp,
.vtcp-rates,
.vtcp-calc {
	--vtcp-brand: var(--vtc-brand, #241530);
	--vtcp-secondary: var(--vtc-secondary, #406f8f);
	--vtcp-brand-2: var(--vtc-brand-2, #140c1a);
	--vtcp-accent: var(--vtc-accent, #deb94a);
	--vtcp-accent-hover: var(--vtc-accent-hover, #bd9d3f);
	--vtcp-accent-ink: var(--vtc-accent-ink, #7a6629);
	--vtcp-accent-tint: var(--vtc-accent-tint, #f8f1db);
	--vtcp-canvas: var(--vtc-bg, #f8f7fb);
	--vtcp-soft: var(--vtc-soft, #f1eff5);
	--vtcp-line: var(--vtc-line, #d3d2d5);
	--vtcp-danger: var(--vtc-danger, #a24b45);

	/* ⚠ THE TEXT THAT SITS ON THOSE COLOURS, and it is not decoration. Twelve
	   rules used to write a literal `#fff` here. On the plum that is correct and
	   harmless; on the GOLD it measured **1.88:1** — an unreadable control, and
	   one of the two was the calculator's own call-to-action. A literal cannot
	   follow a brand the owner edits from the settings screen, which is exactly
	   when this would next go wrong. Both names are RECOMPUTED by the theme
	   against the chosen colours; the fallbacks are the shipped defaults.
	   Measured with the defaults: plum-on-gold 9.10, white-on-plum 17.14. */
	--vtcp-radius: var(--vtc-radius, 12px);
	--vtcp-radius-lg: var(--vtc-radius-lg, 16px);
	--vtcp-shadow-sm: var(--vtc-shadow-sm, 0 1px 2px rgba(36, 21, 48, .06));
	--vtcp-surface: var(--vtc-surface, #ffffff);
	--vtcp-on-brand: var(--vtc-on-brand, #ffffff);
	--vtcp-on-accent: var(--vtc-on-accent, #241530);

	/* ⚠ This is the panel's BODY TEXT colour, not a brand colour — 19 rules read
	   it. It measured 4.49:1 in its previous form, one hundredth under the floor,
	   which nobody reads as a bug and everybody reads as «سخت خوانده می‌شود».
	   13.82:1 on the page ground now. */
	--vtcp-ink: var(--vtc-ink, #2b2729);
	--vtcp-muted: var(--vtc-muted, #6d6a6c);      /* 5.01 on the page ground */

	/* status pills — a tint plus its own readable ink, each pair measured */
	--vtcp-ok-bg: #e6f0ea;
	--vtcp-ok-fg: #2f6b4d;                        /* 5.41 on its tint */
	--vtcp-wait-bg: var(--vtc-accent-tint, #f8f1db);
	--vtcp-wait-fg: var(--vtc-accent-ink, #7a6629);   /* 4.95 on its tint */
	--vtcp-off-bg: var(--vtc-soft, #f1eff5);
	--vtcp-off-fg: var(--vtc-ink-2, #4a4749);     /* 8.04 on its tint */
	--vtcp-self-bg: var(--vtc-blue-50, #edf2f6);
	--vtcp-self-fg: #3e6c8a;                      /* 5.01 on its tint */

	/* ⚠ جهت و چینش متن با هم اعلام می‌شوند — قالب میزبان مال ما نیست و اگر
	   text-align: left خودش را روی بدنه گذاشته باشد، متن فارسی از چپ می‌افتد. */
	direction: rtl;
	text-align: start;
	font-family: var(--vtc-font, Vazirmatn, Tahoma, sans-serif);
	color: var(--vtcp-ink);
}

.vtcp {
	max-width: 720px;
	margin-inline: auto;
	line-height: 2;
}

/* ⚠ THE panel card, and the widest shared surface in this plugin — every panel
   view, the wizard, the tracking page and the document forms wear it. It now
   matches the theme's `.vtc-card` exactly (16px, one soft shadow) so the panel
   and the public site read as one product rather than two. Re-walked after the
   change: dashboard, transfers, new transfer, people, account, tracking. */
.vtcp-card {
	padding: 20px;
	margin-block-end: 18px;
	background: var(--vtcp-surface);
	border: 1px solid var(--vtcp-line);
	border-radius: var(--vtcp-radius-lg);
	box-shadow: var(--vtcp-shadow-sm);
}

.vtcp-title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 700;
}

.vtcp-subtitle {
	margin: 18px 0 8px;
	font-size: 14px;
	font-weight: 700;
}

.vtcp-text,
.vtcp-hint {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--vtcp-muted);
}

.vtcp-hint { font-size: 13px; }

.vtcp-ok,
.vtcp-alert {
	padding: 12px 16px;
	margin-block-end: 16px;
	border-radius: 12px;
	font-size: 14px;
}

.vtcp-ok {
	background: rgba(36, 21, 48, 0.1);
	color: var(--vtcp-brand-2);
}

/* هشدار فقط با رنگ منتقل نمی‌شود. */
.vtcp-alert {
	background: var(--vtcp-accent-tint);
	color: var(--vtcp-accent-ink);
}

.vtcp-alert::before { content: '⚠ '; }

/*
 * کادری که دروازهٔ «مرحلهٔ بعد» ردش کرده.
 * ⚠ فقط رنگ نیست: حاشیهٔ ضخیم‌تر، تا حالت با یک نشانهٔ غیررنگی هم خوانده شود.
 */
.vtcp-input.is-invalid,
.vtcp-select.is-invalid,
select.is-invalid,
input.is-invalid,
textarea.is-invalid {
	border-width: 2px;
	border-color: var(--vtcp-danger);
}

/* رادیو و چک‌باکس قاب ندارند؛ خودِ کارتِ انتخاب علامت می‌خورد. */
.vtcp-choice:has(input.is-invalid) {
	border-color: var(--vtcp-danger);
}

.vtcp-form { display: block; }

.vtcp-label {
	display: block;
	margin-block: 12px 6px;
	font-size: 14px;
	font-weight: 600;
}

.vtcp-input {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--vtcp-line);
	border-radius: 10px;
	background: var(--vtcp-surface);
	font-family: inherit;
	font-size: 15px;
	color: inherit;
}

.vtcp-input:focus-visible {
	outline: 2px solid var(--vtcp-brand);
	outline-offset: 1px;
}

/* ⚠ ACCENT, not brand — and both values come from the owner's five settings
   colours, so this follows whatever they choose rather than pinning a hex.
   The primary action was plum inside the panel and gold on the public site:
   ONE role wearing TWO colours, which teaches the eye nothing and makes the
   panel look like a different product. Gold is the site's primary action, so
   the panel joins it. `--vtcp-on-accent` is recomputed against the chosen
   accent, so the pair stays legible if the owner picks a lighter gold
   (@since 0.60.0). */
.vtcp-btn {
	display: inline-block;
	min-height: 44px;
	margin-block-start: 16px;
	padding: 11px 22px;
	/* ⚠ 1px of the darker gold, not `border: 0`. MEASURED: the gold alone is
	   1.81:1 against a white card and 1.65:1 against the soft band — under the
	   3:1 a control's boundary wants, so the button had no edge on a light
	   surface. `--vtcp-accent-ink` is 4.80:1 on white and comes from the same
	   settings colour, so it follows the owner's accent (@since 0.63.0).
	   Nothing grows: both public roots set `box-sizing: border-box` at the top
	   of this file, so the 1px sits inside the 44px, not outside it — checked,
	   not assumed, because the theme's button reserves a transparent border and
	   this one did not, and the two would otherwise behave differently. */
	border: 1px solid var(--vtcp-accent-ink);
	border-radius: 10px;
	background: var(--vtcp-accent);
	color: var(--vtcp-on-accent);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

/* ⚠ the hover pair moves WITH the base or the button flips colour family on
   hover — the theme's own gold button darkens to `--vtc-accent-hover`. */
.vtcp-btn:hover,
.vtcp-btn:focus { background: var(--vtcp-accent-hover); color: var(--vtcp-on-accent); }

.vtcp-btn:focus-visible {
	outline: 2px solid var(--vtcp-ink);
	outline-offset: 2px;
}

.vtcp-btn-quiet {
	margin-inline-start: 8px;
	background: transparent;
	border: 1px solid var(--vtcp-line);
	color: var(--vtcp-brand);
}

.vtcp-btn-quiet:hover,
.vtcp-btn-quiet:focus { background: var(--vtcp-canvas); color: var(--vtcp-brand-2); }

.vtcp-quote {
	margin-block-start: 14px;
	padding: 12px 14px;
	border-radius: 10px;
	background: var(--vtcp-canvas);
	font-size: 15px;
	font-weight: 700;
}

.vtcp-countdown {
	margin-block: 14px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--vtcp-accent-tint);
	color: var(--vtcp-accent-ink);
	font-size: 14px;
	font-weight: 700;
}

.vtcp-figures {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtcp-figures > li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding-block: 8px;
	border-block-end: 1px solid var(--vtcp-line);
	font-size: 14px;
}

.vtcp-figure-strong { font-weight: 700; }

/* دکمهٔ واقعی است تا با صفحه‌کلید هم برسد، ولی مثل خودِ مقدار دیده می‌شود. */
.vtcp-copy {
	padding: 2px 4px;
	border: 0;
	border-radius: 6px;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.vtcp-copy:hover { background: var(--vtcp-canvas); }
.vtcp-copy:focus-visible { outline: 2px solid var(--vtcp-brand); outline-offset: 2px; }
.vtcp-copy.is-copied { color: var(--vtcp-brand); }

.vtcp-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtcp-list-link {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	padding: 12px 4px;
	border-block-end: 1px solid var(--vtcp-line);
	color: inherit;
	font-size: 14px;
	text-decoration: none;
}

.vtcp-list-link:hover { background: var(--vtcp-canvas); }

.vtcp-ref { font-weight: 700; }

.vtcp-status {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--vtcp-canvas);
	font-size: 13px;
}

.vtcp-status-block {
	display: inline-block;
	margin-block-end: 12px;
}

.vtcp-flag {
	display: inline-block;
	font-size: 13px;
	color: var(--vtcp-accent-ink);
}

.vtcp-timeline {
	margin: 0;
	padding-inline-start: 18px;
	list-style: none;
	border-inline-start: 2px solid var(--vtcp-line);
}

.vtcp-timeline > li {
	position: relative;
	padding-block-end: 14px;
	font-size: 14px;
}

.vtcp-timeline > li::before {
	content: '';
	position: absolute;
	inset-inline-start: -25px;
	inset-block-start: 10px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--vtcp-brand);
}

.vtcp-timeline-to { display: block; font-weight: 600; }

.vtcp-timeline-at {
	display: block;
	font-size: 13px;
	color: var(--vtcp-muted);
}

.vtcp-details > summary {
	cursor: pointer;
	list-style: revert;
}

.vtcp-back { margin-block-end: 12px; font-size: 14px; }

/* ⚠ همان دلیلِ `.vtcp-link`: این هم یک اقدام است و اندازه‌گیری‌شده ۲۲ پیکسل
   ارتفاع داشت، زیر کف ۲۴ پیکسلیِ هدف لمسی. */
.vtcp-back > a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vtcp-brand);
	text-decoration: none;
}

/* --- کلید جهت در فرم ثبت معامله ------------------------------------------ */

.vtcp-dirset {
	margin: 0 0 16px;
	padding: 4px;
	border: 1px solid var(--vtcp-line);
	border-radius: 11px;
	background: var(--vtcp-soft);
}

.vtcp-dirset > .vtcp-label {
	padding: 4px 8px 8px;
}

.vtcp-dir {
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--vtcp-muted);
	cursor: pointer;
}

.vtcp-dir.is-on {
	background: var(--vtcp-brand);
	color: var(--vtcp-on-brand);
}

/* رادیو فقط برای مسیر بدون جاوااسکریپت و برای صفحه‌خوان لازم است. جای منفی
   فیزیکی هرگز — در چیدمان راست‌چین صفحه را کشویی می‌کند. */
.vtcp-dir > input {
	position: absolute;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.vtcp-dir:focus-within {
	outline: 2px solid var(--vtcp-brand);
	outline-offset: 2px;
}

.vtcp-side {
	margin: 0 0 8px;
}

/* --- بلوک نرخ لحظه‌ای و ماشین‌حساب --------------------------------------- */
/* هر دو زیر ریشهٔ خودشان، با همان توکن‌های پنل؛ هیچ قاعده‌ای روی قالب میزبان
   نشت نمی‌کند و هیچ انتخابگرِ عنصرِ برهنه‌ای اینجا نیست.
   ⚠ پالت اینجا دوباره اعلام نمی‌شود — بالای همین فایل، یک بار، برای هر سه ریشه. */

.vtcp-rates,
.vtcp-calc {
	line-height: 1.9;
}

.vtcp-rates *,
.vtcp-calc *,
.vtcp-rates *::before,
.vtcp-calc *::before,
.vtcp-rates *::after,
.vtcp-calc *::after { box-sizing: border-box; }

/* --- کارت نرخ، از روی طرح همکار (۲۲ شهریور ۱۴۰۵) -------------------------
   ⚠ **اعدادِ این کارت واقعی‌اند؛ نمودارش نیست.** هر دو در یک کارت کنار هم
   می‌نشینند، پس نمودار برچسبِ خودش را دارد — بدون آن، اعتبارِ عددِ واقعی به
   شکلِ ساختگی هم سرایت می‌کند و این دقیقاً همان چیزی است که در یک سطح مالی
   نباید اتفاق بیفتد.
   ⚠ `auto-fit` و نه `repeat(4, …)`ِ طرح: امروز سه جفت‌ارز روشن است و مالک
   می‌تواند چهارمی را روشن کند. با عدد ثابت، سه کارت یک ستونِ خالی کنار خود
   می‌گذاشتند و چهار کارتِ آینده هم جا نداشتند. */

.vtcp-rates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 20px;
}

.vtcp-rates > * { min-width: 0; }

.vtcp-rate {
	position: relative;
	overflow: hidden;
	background: var(--vtcp-canvas);
	border: 1px solid var(--vtcp-line);
	border-radius: var(--vtcp-radius-lg);
	padding: 24px;
	transition: transform .2s ease, box-shadow .2s ease;
}

.vtcp-rate:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(36, 21, 48, .12);
}

/* نشانهٔ بزرگ و کم‌رنگِ گوشهٔ کارت. */
.vtcp-rate__watermark {
	position: absolute;
	inset-block-end: -32px;
	/* ⚠ منطقی، نه `left` طرح: در راست‌به‌چپ باید سمتِ شروعِ خطِ خواندن بماند. */
	inset-inline-start: 18px;
	width: 92px;
	height: 92px;
	opacity: .16;
	filter: grayscale(65%);
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}

.vtcp-rate__watermark svg { width: 100%; height: 100%; display: block; }

.vtcp-rate:hover .vtcp-rate__watermark { opacity: .9; transform: scale(1.12); filter: none; }

.vtcp-rate__top,
.vtcp-rate__spark,
.vtcp-rate__pair,
.vtcp-rate__foot { position: relative; }

.vtcp-rate__top {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-block-end: 16px;
}

.vtcp-rate__chip {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
}

.vtcp-rate__chip svg { width: 100%; height: 100%; display: block; }

.vtcp-rate__id { min-width: 0; }

.vtcp-rate__cur {
	display: block;
	font-weight: 700;
	font-size: 14.5px;
	color: var(--vtcp-ink);
}

.vtcp-rate__code {
	display: block;
	/* ⚠ ۱۲px و نه ۱۱٫۵ طرح — کف خوانایی همین پروژه. */
	font-size: 12px;
	color: var(--vtcp-muted);
	font-variant-numeric: tabular-nums;
}

.vtcp-rate__spark {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block: 6px 16px;
}

.vtcp-rate__sparkline {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	color: var(--vtcp-ok-fg);
}

.vtcp-rate__sparkline.is-down { color: var(--vtcp-danger); }

.vtcp-rate__sparktag {
	flex: 0 0 auto;
	font-size: 12px;
	color: var(--vtcp-muted);
}

.vtcp-rate__pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-block-end: 14px;
}

.vtcp-rate__pair--single { grid-template-columns: 1fr; }

.vtcp-rate__cell {
	min-width: 0;
	background: var(--vtcp-surface);
	border-radius: var(--vtcp-radius);
	padding: 9px 11px;
}

.vtcp-rate__cell > span {
	display: block;
	/* ⚠ 12px floor. This is the «ما می‌خریم / ما می‌فروشیم» label beside the
	   price — the word that says WHICH number you are looking at. Named in the
	   redesign plan as somewhere that must not shrink (@since 0.65.0). */
	font-size: 12px;
	color: var(--vtcp-muted);
}

.vtcp-rate__cell > b {
	font-size: 15px;
	font-weight: 800;
	color: var(--vtcp-brand);
	font-variant-numeric: tabular-nums;
}

.vtcp-rate__cell.is-sell > b { color: var(--vtcp-brand-2); }

.vtcp-rate__foot {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 12px;      /* was 11.5 — the «last updated» line, 12px floor */
	color: var(--vtcp-muted);
}

.vtcp-rate__link {
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.vtcp-rate,
	.vtcp-rate__watermark { transition: none; }

	.vtcp-rate:hover { transform: none; }
	.vtcp-rate:hover .vtcp-rate__watermark { transform: none; }
}

/* ماشین‌حساب — ظاهر «کارمزد پنهان» */
.vtcp-calc {
	/* ⚠ `min()` و نه `440px` خام، و این یک ظرافت نیست: وقتی این کارت آیتمِ یک
	   چیدمانِ انعطافی باشد — که در قهرمانِ صفحهٔ اول هست — سقفِ خام اجازهٔ
	   کوچک‌شدن نمی‌دهد و کارت پهن‌تر از خودِ صفحه می‌شود. اندازه‌گیری‌شده روی
	   عرض ۳۷۵: کارت از ۳۲− تا ۴۰۸ کشیده بود، یعنی از هر دو طرف بیرون زده.
	   ⚠ و بدترین بخشش این بود که `scrollWidth === clientWidth` **پاس می‌شد**:
	   یکی از والدها `overflow:hidden` دارد، پس سرریز بدون هیچ نوار پیمایشی
	   بریده می‌شد — هیچ‌چیز روی صفحه نمی‌گفت چیزی کم است. */
	/* 0.89.0: the handoff's calc-card — 380px, 20px radius, 24px padding, xl shadow. */
	max-width: min(400px, 100%);
	min-width: 0;
	margin-inline: auto;
	background: var(--vtcp-surface);
	border: 0;
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 20px 48px rgba(36, 21, 48, 0.16);
}

.vtcp-calc__title {
	margin: 0 0 16px;
	font-size: 15px;
	font-weight: 700;
	color: var(--vtcp-brand);
}

.vtcp-calc__dir {
	display: flex;
	gap: 4px;
	padding: 4px;
	margin-block-end: 16px;
	background: var(--vtcp-soft);
	border: 1px solid var(--vtcp-line);
	border-radius: 11px;
}

.vtcp-calc__diropt {
	flex: 1 1 0;
	min-width: 0;
	padding: 9px 6px;
	border-radius: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--vtcp-muted);
	text-align: center;
	cursor: pointer;
}

.vtcp-calc__diropt.is-on {
	background: var(--vtcp-brand);
	color: var(--vtcp-on-brand);
}

/* رادیوها فقط برای مسیر بدون جاوااسکریپت لازم‌اند و دیده نمی‌شوند —
   جای منفی فیزیکی هرگز، چون در چیدمان راست‌چین صفحه را کشویی می‌کند. */
.vtcp-calc__diropt > input {
	position: absolute;
	inset-inline-start: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.vtcp-calc__diropt:focus-within {
	outline: 2px solid var(--vtcp-brand);
	outline-offset: 2px;
}

/* The two field boxes (pay / receive) share one surface, as in the handoff. */
.vtcp-calc__field,
.vtcp-calc__out {
	min-width: 0;
	padding: 12px 16px;
	background: var(--vtcp-canvas);
	border: 1px solid var(--vtcp-line);
	border-radius: 16px;
}

.vtcp-calc__field:focus-within { border-color: var(--vtcp-secondary, #406f8f); }

.vtcp-calc__label,
.vtcp-calc__outlabel {
	display: block;
	margin-block-end: 6px;
	font-size: 12.5px;
	color: var(--vtcp-muted);
}

.vtcp-calc__row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.vtcp-calc__amount {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 18px;
	font-weight: 700;
	color: var(--vtcp-ink);
	text-align: start;
	font-variant-numeric: tabular-nums;
}

.vtcp-calc__amount:focus { outline: 0; }

/* The handoff's currency pill. A native select keeps keyboard + no-JS behaviour. */
.vtcp-calc__cur {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 4px 12px;
	border: 1px solid var(--vtcp-line);
	border-radius: 9999px;
	background: var(--vtcp-surface);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--vtcp-ink);
	cursor: pointer;
}

.vtcp-calc__cur:hover,
.vtcp-calc__cur:focus-visible { border-color: var(--vtcp-secondary, #406f8f); }

.vtcp-calc__limits {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 6px 0 0;
	font-size: 12px;      /* 12px floor */
	color: var(--vtcp-muted);
}

/* Round swap button overlapping the gap between the two boxes. */
.vtcp-calc__swapwrap {
	display: flex;
	justify-content: center;
	min-height: 8px;
	margin-block: -9px;
	position: relative;
	z-index: 1;
}

.vtcp-calc__swap {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--vtcp-line);
	border-radius: 50%;
	background: var(--vtcp-surface);
	color: var(--vtcp-secondary, #406f8f);
	box-shadow: 0 1px 2px rgba(36, 21, 48, .06);
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}

.vtcp-calc__swap:hover { background: var(--vtc-blue-50, #edf2f6); transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.vtcp-calc__swap { transition: none; }
	.vtcp-calc__swap:hover { transform: none; }
}

.vtcp-calc__out {
	color: var(--vtcp-ink);
	text-align: start;
}

.vtcp-calc__value {
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}

.vtcp-calc__rate {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 12px 0 0;
	font-size: 13px;
	color: var(--vtcp-muted);
	text-align: center;
}

.vtcp-calc__rate > b {
	color: var(--vtcp-brand);
	font-variant-numeric: tabular-nums;
}

.vtcp-calc__break {
	margin-block-start: 12px;
	padding-block-start: 10px;
	border-block-start: 1px dashed var(--vtcp-line);
}

.vtcp-calc__line {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 3px 0;
	font-size: 12.5px;
	color: var(--vtcp-muted);
}

.vtcp-calc__line > b {
	color: var(--vtcp-ink);
	font-variant-numeric: tabular-nums;
}

.vtcp-calc__go,
.vtcp-calc__cta {
	display: block;
	width: 100%;
	margin-block-start: 16px;
	padding: 13px;
	border: 0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.vtcp-calc__go {
	background: var(--vtcp-soft);
	color: var(--vtcp-ink);
	border: 1.5px solid var(--vtcp-line);
}

/* ⚠ MEASURED 1.88:1 before this line changed — white on the gold. This is the
   calculator's call-to-action, i.e. the control the whole widget exists to get
   pressed. It renders only when the shortcode is given a `cta` attribute, which
   is why it survived every pass that looked at the landing page. 9.10:1 now. */
.vtcp-calc__cta {
	background: var(--vtcp-accent);
	color: var(--vtcp-on-accent);
	/* the same 1px edge as every other primary button — see .vtcp-btn */
	border: 1px solid var(--vtcp-accent-ink);
}

.vtcp-calc__fine {
	margin: 10px 2px 0;
	font-size: 12px;      /* was 11 — the rate disclaimer, 12px floor */
	color: var(--vtcp-muted);
	text-align: center;
}

/* 0.89.0 — birth date reads day · month · year from the right (owner's request).
   ⚠ An interim, done from OUR sheet because the date module is vendored and must
   not be edited here: the module prints year · month · day, so on an RTL page the
   year landed on the right. `row-reverse` moves the boxes; the TAB order still runs
   year → month → day. The real fix is an `order` argument in shared/jalali — on the
   debt ledger (doc §10). */
.vtcp-wizform .dmjd--birth .dmjd-triple { flex-direction: row-reverse; }

/* 0.89.0 — one file slot per required document, all sent by one button. */
.vtcp-docslot {
	margin-block-end: 14px;
	padding: 12px 14px;
	background: var(--vtcp-canvas);
	border: 1px solid var(--vtcp-line);
	border-radius: var(--vtcp-radius);
}

.vtcp-docslot .vtcp-label { margin-block-start: 0; }

.vtcp-doc-needs {
	margin: 0 0 14px;
	padding-inline-start: 22px;
	font-size: 14px;
	line-height: 2;
	color: var(--vtcp-ink);
}

.vtcp-dates {
	display: grid;
	grid-template-columns: 1.2fr 1.4fr 1fr;
	gap: 8px;
	margin-block-end: 14px;
}

.vtcp-dates > * { min-width: 0; }

/* ======================================================== پوستهٔ پنل کاربری == */

/* پنل عرض بیشتری از فرم‌های تک‌ستونه می‌خواهد — یک ناوبری کنارش می‌نشیند. */
.vtcp-panel { max-width: 1080px; }

.vtcp-shell {
	display: grid;
	grid-template-columns: 208px minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}

/* ⚠ minmax(0,1fr) نه 1fr: ستون شبکه به‌طور پیش‌فرض از محتوایش کوچک‌تر نمی‌شود،
   پس یک جدول یا عدد بلند کل صفحه را روی موبایل پهن می‌کند. */
.vtcp-main { min-width: 0; }

/* The redesign's card, same as every other card on the site: white, 16px, one
   soft shadow. The shadow is aliased rather than copied so the panel and the
   theme cannot drift apart the first time one of the two is adjusted. */
.vtcp-side {
	position: sticky;
	inset-block-start: 16px;
	padding: 8px;
	background: var(--vtcp-surface);
	border: 1px solid var(--vtcp-line);
	border-radius: var(--vtcp-radius-lg);
	box-shadow: var(--vtcp-shadow-sm);
}

.vtcp-side__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtcp-side__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--vtcp-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.vtcp-side__link:hover { background: var(--vtcp-canvas); }

.vtcp-side__link.is-on {
	background: var(--vtcp-brand);
	color: var(--vtcp-on-brand);
}

/* ⚠ Same 1.88:1 defect as the calculator CTA: this badge carries the COUNT of
   things waiting for the customer in that panel section, so an unreadable one is
   a number they cannot act on. 9.10:1 now. */
.vtcp-side__badge {
	min-width: 22px;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--vtcp-accent);
	color: var(--vtcp-on-accent);
	font-size: 12px;
	text-align: center;
}

/* ⚠ The ACTIVE row is plum, so the badge drops its gold and becomes a translucent
   patch of the row — and its ink has to flip with it. Without this line the badge
   kept the plum ink it wears on gold, i.e. plum on a barely-lightened plum. */
.vtcp-side__link.is-on .vtcp-side__badge {
	background: rgba(255, 255, 255, 0.24);
	color: var(--vtcp-on-brand);
}

.vtcp-side__out {
	display: block;
	min-height: 44px;
	padding: 12px;
	border-block-start: 1px solid var(--vtcp-line);
	margin-block-start: 8px;
	color: var(--vtcp-muted);
	font-size: 13px;
	text-decoration: none;
}

.vtcp-side__out:hover { color: var(--vtcp-brand); }

/* ------------------------------------------------------------- سر هر بخش -- */

.vtcp-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 16px;
}

.vtcp-head__title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

.vtcp-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-block-end: 12px;
}

.vtcp-card__head .vtcp-title,
.vtcp-card__head .vtcp-subtitle { margin: 0; }

.vtcp-card--action { border-inline-start: 4px solid var(--vtcp-brand); }
.vtcp-card--flag { border-inline-start: 4px solid var(--vtcp-accent); }

/* ⚠ این کلاس همه‌جا یک «اقدام» است، نه یک کلمهٔ لینک‌دار وسط جمله: «تکمیل
   مدارک»، «صفحهٔ پیگیری»، «همهٔ حواله‌ها». اندازه‌گیری‌شده ۲۰ پیکسل ارتفاع
   داشت — زیر کف ۲۴ پیکسلِ هدف لمسی، یعنی روی موبایل باید دقیق نشانه گرفت.
   inline-flex ارتفاع را می‌سازد بی‌آنکه جای متن اطرافش را به هم بزند. */
.vtcp-link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	color: var(--vtcp-brand);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.vtcp-link:hover { text-decoration: underline; }

.vtcp-empty {
	margin: 0;
	padding: 22px 4px;
	color: var(--vtcp-muted);
	font-size: 13.5px;
	text-align: center;
}

/* ---------------------------------------------------------- کارت‌های عدد -- */

.vtcp-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-block-end: 18px;
}

/* The dashboard's number cards — the same card as everywhere else on the site
   after the redesign, so the panel's first screen does not read as a different
   product from the page the customer arrived on (@since 0.61.0). */
.vtcp-stat {
	min-width: 0;
	padding: 14px 16px;
	background: var(--vtcp-surface);
	border: 1px solid var(--vtcp-line);
	border-radius: var(--vtcp-radius-lg);
	box-shadow: var(--vtcp-shadow-sm);
}

.vtcp-stat__label {
	display: block;
	margin-block-end: 4px;
	color: var(--vtcp-muted);
	font-size: 12.5px;
}

.vtcp-stat__value {
	font-size: 22px;
	font-weight: 700;
}

.vtcp-stat__value--sm { font-size: 15px; }

/* --------------------------------------------------------- ردیف حواله‌ها -- */

.vtcp-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	padding: 12px 4px;
	border-block-end: 1px solid var(--vtcp-line);
	color: inherit;
	text-decoration: none;
}

.vtcp-list-item:last-child .vtcp-row { border-block-end: 0; }

a.vtcp-row:hover { background: var(--vtcp-canvas); }

.vtcp-row__main { min-width: 0; }

.vtcp-row__ref {
	display: block;
	font-weight: 700;
	font-size: 14.5px;
}

.vtcp-row__meta {
	display: block;
	margin-block-start: 2px;
	color: var(--vtcp-muted);
	font-size: 12.5px;
}

.vtcp-row__amount {
	text-align: end;
	font-size: 14px;
	white-space: nowrap;
}

.vtcp-row__payout {
	display: block;
	color: var(--vtcp-muted);
	font-size: 12.5px;
}

.vtcp-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

/* ⚠ رنگِ نشان، متن است نه تزیین — و وضعیتِ حواله مهم‌ترین کلمهٔ هر ردیف است.
   کهربایِ برند (`--vtcp-accent`) روی تهِ کهربایی، اندازه‌گیری‌شده ۲٫۲۳:۱ می‌داد:
   یعنی همان یک کلمه‌ای که مشتری برای فهمیدنِ وضعیتِ پولش می‌خواند، کم‌رنگ‌ترین
   چیزِ ردیف بود. رنگِ متن به تُنِ تیرهٔ همان کهربا رفت؛ زمینه و شکل دست‌نخورده. */
.vtcp-pill--ok { background: var(--vtcp-ok-bg); color: var(--vtcp-ok-fg); }
.vtcp-pill--wait { background: var(--vtcp-wait-bg); color: var(--vtcp-wait-fg); }
.vtcp-pill--off { background: var(--vtcp-off-bg); color: var(--vtcp-off-fg); }

/* --------------------------------------------------- فیلتر و صفحه‌بندی -- */

.vtcp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 14px;
}

.vtcp-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 12px;
	background: var(--vtcp-surface);
	border: 1px solid var(--vtcp-line);
	border-radius: 999px;
	color: var(--vtcp-ink);
	font-size: 13px;
	text-decoration: none;
}

.vtcp-chip.is-on {
	background: var(--vtcp-brand);
	border-color: var(--vtcp-brand);
	color: var(--vtcp-on-brand);
}

.vtcp-chip__n {
	color: var(--vtcp-muted);
	font-size: 12px;
}

/* ⚠ سفیدِ ۸۲٪ روی رنگ برند زیر کف افتاده بود؛ این عدد شمارِ حواله‌های همان دسته
   است و کم‌رنگ‌کردنش هیچ چیزی به طراحی اضافه نمی‌کند. رنگ برند از آن زمان از
   کهربا به ارغوانی عوض شده، پس عدد قدیمیِ ۴٫۲۴ از این یادداشت برداشته شد تا
   کسی آن را عددِ امروز نخواند. */
.vtcp-chip.is-on .vtcp-chip__n { color: var(--vtcp-on-brand); }

.vtcp-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-block-start: 14px;
}

.vtcp-pager__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	border: 1px solid var(--vtcp-line);
	border-radius: 10px;
	color: var(--vtcp-ink);
	font-size: 13.5px;
	text-decoration: none;
}

.vtcp-pager__page.is-on {
	background: var(--vtcp-brand);
	border-color: var(--vtcp-brand);
	color: var(--vtcp-on-brand);
}

.vtcp-btn--sm {
	min-height: 40px;
	padding: 8px 16px;
	font-size: 13.5px;
}

.vtcp-figure-alert { color: var(--vtcp-accent); font-weight: 700; }

.vtcp-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-start: 12px;
}

.vtcp-rowact {
	margin: 8px 0 0;
}

/* ⚠ هر فرزندِ استیل‌خورده کلاسِ خودش را دارد و با همان انتخاب می‌شود. انتخاب با
   نام عنصر (مثلاً «.vtcp-choice span») امتیاز ۰-۱-۱ می‌گیرد و بی‌صدا از کلاسِ
   خودِ آن فرزند (۰-۱-۰) جلو می‌زند — همان اشکالی که در این خانه یک بار شش
   کامپوننت را خراب کرد و هیچ خطایی هم نداد. */

/* --------------------------------------------------------------- مدال -- */

.vtcp-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 24px 16px;
	overflow-y: auto;
	direction: rtl;
	text-align: start;
	font-family: Vazirmatn, Tahoma, sans-serif;
}

.vtcp-modal__veil {
	position: fixed;
	inset: 0;
	background: rgba(36, 21, 48, 0.55);
}

.vtcp-modal__box {
	position: relative;
	width: 100%;
	max-width: 640px;
	margin-block: auto;
	background: var(--vtcp-surface);
	border-radius: 18px;
	box-shadow: 0 24px 60px rgba(36, 21, 48, 0.28);
	overflow: hidden;
}

.vtcp-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	border-block-end: 1px solid var(--vtcp-line);
}

.vtcp-modal__title {
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--vtcp-ink);
}

.vtcp-modal__x {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 10px;
	background: var(--vtcp-canvas);
	color: var(--vtcp-muted);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.vtcp-modal__x:hover { background: var(--vtcp-line); color: var(--vtcp-ink); }

.vtcp-modal__body {
	max-height: calc(100vh - 140px);
	padding: 18px 20px 20px;
	overflow-y: auto;
}

/* ⚠ وقتی مدال باز است، صفحهٔ پشتش نباید اسکرول شود؛ وگرنه کاربر روی گوشی فکر
   می‌کند مدال بسته شده و در واقع فقط پشتش را دیده است. */
.vtcp-modal-open { overflow: hidden; }

/* ---------------------------------------------------------- نوار مرحله -- */

.vtcp-rail {
	display: flex;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.vtcp-rail__node {
	position: relative;
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

/* خط رابط بین گره‌ها: با ویژگی منطقی، تا در چیدمان راست‌چین هم درست بیفتد. */
.vtcp-rail__node::before {
	content: "";
	position: absolute;
	inset-block-start: 15px;
	inset-inline-end: 50%;
	width: 100%;
	height: 2px;
	background: var(--vtcp-line);
	z-index: 1;
}

.vtcp-rail__node:first-child::before { display: none; }

.vtcp-rail__num {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--vtcp-line);
	border-radius: 50%;
	background: var(--vtcp-surface);
	color: var(--vtcp-muted);
	font-size: 13px;
	font-weight: 800;
}

/* ⚠ was 11.5px, i.e. under the 12px body-text floor — and it is not a decorative
   caption: these are the STEP NAMES of the wizard that sends money and the one
   that uploads identity documents, so it is the label telling someone where they
   are in a flow they cannot afford to lose their place in. It shrank to fit four
   steps on one row; the row is allowed to be a little wider instead. */
.vtcp-rail__label {
	font-size: 12px;
	line-height: 1.5;
	color: var(--vtcp-muted);
	text-align: center;
}

.vtcp-rail__node.is-done .vtcp-rail__num {
	background: var(--vtcp-brand);
	border-color: var(--vtcp-brand);
	color: var(--vtcp-on-brand);
}

.vtcp-rail__node.is-done::before { background: var(--vtcp-brand); }

.vtcp-rail__node.is-on .vtcp-rail__num {
	border-color: var(--vtcp-brand);
	color: var(--vtcp-brand);
}

.vtcp-rail__node.is-on .vtcp-rail__label {
	color: var(--vtcp-ink);
	font-weight: 700;
}

/* گره‌ای که با اسکریپت قابل کلیک شده، باید مثل یک کنترل رفتار کند. */
.vtcp-rail__node.is-clickable { cursor: pointer; }

/* --------------------------------------------------------- مرحله‌ها -- */

.vtcp-step {
	padding-block-end: 4px;
}

/* ⚠ بدون اسکریپت، همهٔ مرحله‌ها باز می‌مانند و یک خط جداکننده میانشان لازم است
   تا به‌هم نچسبند. با اسکریپت فقط یکی دیده می‌شود و این مرز اهمیتی ندارد. */
.vtcp-step + .vtcp-step {
	margin-block-start: 20px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--vtcp-line);
}

.vtcp-step__title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--vtcp-ink);
}

.vtcp-step__hint {
	margin: 0 0 14px;
	font-size: 12.5px;
	line-height: 1.9;
	color: var(--vtcp-muted);
}

.vtcp-wizfoot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-block-start: 20px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--vtcp-line);
}

.vtcp-wizfoot .vtcp-hint { flex: 1 1 100%; margin: 0; }

.vtcp-wizfoot .vtcp-btn { flex: 0 0 auto; }

/* ------------------------------------------------------ انتخاب کارتی -- */

.vtcp-choices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 10px;
	margin-block-end: 16px;
}

.vtcp-choice {
	display: block;
	min-width: 0;
	padding: 14px 16px;
	border: 1.5px solid var(--vtcp-line);
	border-radius: 12px;
	background: var(--vtcp-surface);
	cursor: pointer;
}

.vtcp-choice.is-on {
	border-color: var(--vtcp-brand);
	background: var(--vtcp-soft);
}

.vtcp-choice__title {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--vtcp-ink);
}

.vtcp-choice__note {
	display: block;
	margin-block-start: 4px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--vtcp-muted);
}

.vtcp-choice input { margin-inline-end: 6px; }

.vtcp-check {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-block: 12px;
	font-size: 13.5px;
	line-height: 1.9;
	cursor: pointer;
}

.vtcp-check input { margin-block-start: 7px; }

/* ------------------------------------------------------------ قوانین -- */

.vtcp-prose {
	font-size: 13.5px;
	line-height: 2;
	color: var(--vtcp-ink);
}

/* ⚠ `:where()` for the bare-element half, for the same reason the theme's own
   prose rules carry it: `.vtcp-prose p` scores 0-1-1 and SILENTLY out-specifies
   any component class a paragraph might wear (0-1-0). The content here is the
   terms text, which the owner writes in the editor and which therefore arrives
   with no classes of its own — a real default, but a default must not outrank
   the components around it. `:where()` contributes zero, so the rule scores
   0-0-1 and anything beats it. The project has already been bitten by this
   exact shape once (@since 0.64.0). */
.vtcp-prose__p,
:where(.vtcp-prose) p { margin: 0 0 10px; }

.vtcp-prose--scroll {
	max-height: 260px;
	padding: 14px 16px;
	overflow-y: auto;
	border: 1px solid var(--vtcp-line);
	border-radius: 12px;
	background: var(--vtcp-canvas);
}

/* ------------------------------------------------------------ مدارک -- */

.vtcp-selfie {
	margin-block: 16px;
	padding: 16px;
	border: 1px dashed var(--vtcp-line);
	border-radius: 14px;
	background: var(--vtcp-canvas);
}

.vtcp-selfie__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
}

.vtcp-selfie__art {
	flex: 0 0 auto;
	width: 190px;
	height: auto;
	max-width: 100%;
	border-radius: 12px;
	background: var(--vtcp-surface);
	border: 1px solid var(--vtcp-line);
}

.vtcp-steps {
	flex: 1 1 240px;
	min-width: 0;
	margin: 0;
	padding-inline-start: 20px;
	font-size: 13px;
	line-height: 2;
	color: var(--vtcp-ink);
}

.vtcp-selfie__code {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0 8px;
}

.vtcp-selfie__label {
	font-size: 12.5px;
	color: var(--vtcp-muted);
}

.vtcp-code {
	padding: 8px 14px;
	border: 1px solid var(--vtcp-brand);
	border-radius: 10px;
	background: var(--vtcp-surface);
	color: var(--vtcp-brand);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.08em;
	cursor: pointer;
}

.vtcp-code:hover { background: var(--vtcp-soft); }

.vtcp-doclist {
	margin: 14px 0;
	padding: 0;
	list-style: none;
}

.vtcp-doc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-block-end: 1px solid var(--vtcp-line);
}

.vtcp-doc:last-child { border-block-end: 0; }

.vtcp-doc-thumb {
	flex: 0 0 auto;
	display: block;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border: 1px solid var(--vtcp-line);
	border-radius: 10px;
	background: var(--vtcp-canvas);
}

.vtcp-doc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vtcp-doc-name {
	flex: 1 1 140px;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
}

.vtcp-doc-state {
	flex: 1 1 160px;
	min-width: 0;
	font-size: 12.5px;
	color: var(--vtcp-muted);
}

.vtcp-doc-approved .vtcp-doc-state { color: var(--vtcp-ok-fg); }
.vtcp-doc-rejected .vtcp-doc-state { color: var(--vtcp-danger); }

.vtcp-drop {
	margin-block: 12px;
	padding: 14px;
	border: 1.5px dashed var(--vtcp-line);
	border-radius: 12px;
	background: var(--vtcp-canvas);
}

/* دکمهٔ فرعی — هر دو املا کار می‌کند، چون هر دو در کد این پروژه هست. */
/* ⚠ The SECONDARY button has the same problem the primary one had, found by the
   same measurement: `--vtcp-line` is a hairline meant for dividers and scores
   1.51:1 on a white card, so this control had no visible boundary either. The
   muted ink is 5.01:1 and is already the button's own text colour, so the edge
   and the label now agree. Its text was never the issue (5.35).
   ⚠ This is «ادامهٔ تکمیل» on the people screen — the control that finishes an
   incomplete party file, i.e. the thing standing between a customer and being
   able to send at all (@since 0.63.0). */
.vtcp-btn--quiet,
.vtcp-btn-quiet {
	background: var(--vtcp-surface);
	border-color: var(--vtcp-muted);
	color: var(--vtcp-muted);
}

.vtcp-btn--quiet:hover,
.vtcp-btn--quiet:focus,
.vtcp-btn-quiet:hover,
.vtcp-btn-quiet:focus {
	background: var(--vtcp-canvas);
	color: var(--vtcp-brand-2);
}

.vtcp-pill--self { background: var(--vtcp-self-bg); color: var(--vtcp-self-fg); }

/* ------------------------------------------------------------- موبایل -- */

/* دکمهٔ همبرگری فقط روی موبایل دیده می‌شود. */
.vtcp-navtoggle { display: none; }

@media (max-width: 820px) {
	/* ⚠ نوار افقیِ اسکرول‌شونده کنار گذاشته شد: با هفت بخش، آیتم آخر بیرون از
	   دید می‌افتاد و هیچ نشانه‌ای هم نبود که چیزی آن‌طرف هست. حالا یک منوی
	   جمع‌شونده با نام بخش جاری روی خودِ دکمه. */
	.vtcp-shell {
		grid-template-columns: minmax(0, 1fr);
	}

	.vtcp-navtoggle {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 46px;
		padding: 10px 14px;
		margin-block-end: 10px;
		background: var(--vtcp-surface);
		border: 1px solid var(--vtcp-line);
		border-radius: 12px;
		font: inherit;
		font-weight: 700;
		color: var(--vtcp-ink);
		cursor: pointer;
	}

	.vtcp-navtoggle__bars,
	.vtcp-navtoggle__bars::before,
	.vtcp-navtoggle__bars::after {
		display: block;
		width: 18px;
		height: 2px;
		background: currentColor;
		border-radius: 2px;
	}

	.vtcp-navtoggle__bars {
		position: relative;
		flex: 0 0 auto;
	}

	.vtcp-navtoggle__bars::before,
	.vtcp-navtoggle__bars::after {
		content: "";
		position: absolute;
		inset-inline-start: 0;
	}

	.vtcp-navtoggle__bars::before { inset-block-start: -6px; }
	.vtcp-navtoggle__bars::after { inset-block-start: 6px; }

	.vtcp-side {
		position: static;
		padding: 8px;
	}

	/* بسته‌بودن با صفتِ aria انجام می‌شود، نه با یک کلاس دوم: همان چیزی که به
	   صفحه‌خوان گفته می‌شود، همان چیزی است که دیده می‌شود. */
	.vtcp-navtoggle[aria-expanded="false"] + .vtcp-side { display: none; }

	.vtcp-side__list {
		display: grid;
		gap: 4px;
	}

	.vtcp-side__link { width: 100%; }

	.vtcp-side__out {
		border-block-start: 1px solid var(--vtcp-line);
		margin-block-start: 8px;
		padding: 10px 12px;
		text-align: center;
	}
}

@media (max-width: 560px) {
	/* روی گوشی، ستون محتوا نباید به‌خاطر حاشیهٔ کارت‌ها باریک شود. */
	.vtcp-card { padding: 16px 14px; }

	.vtcp-row {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 6px;
	}

	.vtcp-row__status { grid-column: 1 / -1; }

	.vtcp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.vtcp-stat__value { font-size: 19px; }

	/* روی گوشی، مدال تمام‌عرض و از پایین می‌آید؛ کادر شناور با حاشیه، فضای
	   واقعی فرم را می‌خورد. */
	.vtcp-modal { padding: 0; }

	.vtcp-modal__box {
		max-width: none;
		min-height: 100%;
		border-radius: 0;
	}

	.vtcp-modal__body { max-height: none; }

	/* برچسب مرحله‌ها روی گوشی جا نمی‌شود؛ فقط شمارهٔ گره می‌ماند و نام مرحله را
	   خودِ عنوان مرحله می‌گوید. */
	.vtcp-rail__label { display: none; }

	.vtcp-selfie__art { width: 100%; }
}


/* ---------------------------------------------------------------------------
 * تب‌های صفحهٔ ورود.
 *
 * ⚠ هر فرزندِ استایل‌دار کلاس خودش را دارد و با همان انتخاب می‌شود؛ انتخابگرِ
 * «عنصرِ برهنه در دلِ والد» (مثل .vtcp-tabs button) امتیاز بیشتری می‌گیرد و
 * بی‌صدا کلاس خودِ همان عنصر را شکست می‌دهد.
 * ⚠ پنهان‌کردن پنل‌ها با صفت hidden انجام می‌شود که قاعدهٔ سراسری بالای همین
 * فایل آن را با important می‌پوشاند — پس هیچ کلاسی نمی‌تواند پنلِ بسته را
 * دوباره نشان بدهد.
 * ------------------------------------------------------------------------ */
.vtcp-tabs {
	display: flex;
	gap: 8px;
	margin-block: 16px 20px;
	border-bottom: 1px solid var( --vtc-line, #d3d2d5 );
}

.vtcp-tab {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 10px;
	font: inherit;
	font-weight: 600;
	color: var( --vtc-muted, #6d6a6c );
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	border-radius: 8px 8px 0 0;
}

.vtcp-tab:hover {
	color: var( --vtc-ink, #2b2729 );
	background: rgba( 36, 21, 48, 0.06 );
}

.vtcp-tab.is-active {
	color: var( --vtc-brand, #241530 );
	border-bottom-color: var( --vtc-brand, #241530 );
}

.vtcp-tab:focus-visible {
	outline: 2px solid var( --vtc-brand, #241530 );
	outline-offset: 2px;
}

.vtcp-tabpanel {
	margin-block-start: 4px;
}

/* ---------------------------------------------------------------------------
 * کارت ورود — بازآفرینی ۰٫۸۹٫۰ (الگوی امروزیِ ورود با کد یک‌بارمصرف).
 * یک کارتِ متمرکز و کم‌عرض، نشانهٔ گرد بالای آن، کادرِ بزرگِ شناسه، دکمهٔ تمام‌عرض،
 * و در قدم دوم خانه‌های تک‌رقمی با شمارش معکوسِ ارسال دوباره.
 * ------------------------------------------------------------------------ */
.vtcp-authcard {
	max-width: min(420px, 100%);
	margin-inline: auto;
	padding: 28px 24px;
	text-align: center;
	border-radius: 20px;
	box-shadow: 0 12px 32px rgba(36, 21, 48, .12);
}

.vtcp-authcard .vtcp-form,
.vtcp-authcard .vtcp-tabs { text-align: start; }

.vtcp-authcard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-block-end: 12px;
	border-radius: 50%;
	background: var(--vtc-accent-tint, #f8f1db);
	color: var(--vtcp-brand);
}

.vtcp-authcard__title {
	margin-block-end: 6px;
	font-size: 19px;
	color: var(--vtcp-brand);
}

.vtcp-authcard__lead {
	margin-block-end: 18px;
	line-height: 1.9;
}

.vtcp-authcard__who {
	font-weight: 700;
	color: var(--vtcp-ink);
	unicode-bidi: isolate;
}

.vtcp-authcard__edit {
	margin-inline-start: 6px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.vtcp-authcard__id {
	min-height: 52px;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: .5px;
	text-align: center;
}

.vtcp-authcard__hint { margin: 8px 0 0; text-align: center; }

.vtcp-authcard__submit {
	display: block;
	width: 100%;
	min-height: 50px;
	font-size: 16px;
	font-weight: 700;
}

.vtcp-authcard__resend {
	margin-block-start: 14px;
	text-align: center;
}

.vtcp-authcard__timer { margin: 0; font-variant-numeric: tabular-nums; }

/* A text-link button: real <button> for the POST, link-like look. */
.vtcp-authcard__link {
	min-height: 32px;
	padding: 4px 8px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--vtcp-secondary);
	cursor: pointer;
}

.vtcp-authcard__link:hover,
.vtcp-authcard__link:focus-visible { text-decoration: underline; }

.vtcp-authcard__code {
	min-height: 56px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 10px;
	text-align: center;
}

/* ⚠ `dir="ltr"` on the row: a code is read left to right even on an RTL page,
   so the first digit typed lands in the left-most box. */
.vtcp-otp {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	max-width: 320px;
	margin-inline: auto;
}

.vtcp-otp__box {
	width: 100%;
	min-width: 0;
	height: 58px;
	padding: 0;
	border: 1.5px solid var(--vtcp-line);
	border-radius: 12px;
	background: var(--vtcp-canvas);
	font-family: inherit;
	font-size: 24px;
	font-weight: 700;
	color: var(--vtcp-ink);
	text-align: center;
	caret-color: var(--vtcp-brand);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vtcp-otp__box.is-filled {
	border-color: var(--vtcp-brand);
	background: var(--vtcp-surface);
}

.vtcp-otp__box:focus {
	outline: 0;
	border-color: var(--vtcp-secondary);
	box-shadow: 0 0 0 3px rgba(64, 111, 143, .18);
}

.vtcp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 380px) {
	.vtcp-otp { gap: 6px; }
	.vtcp-otp__box { height: 50px; font-size: 20px; }
}

/* --- «ثبت دوباره» روی یک حوالهٔ منقضی یا ردشده -----------------------------
   ⚠ این جعبه از یک بن‌بستِ واقعی آمد: پیامکِ انقضا به مشتری می‌گفت «برای ثبت
   دوباره وارد پنل شوید» و صفحهٔ مقصد هیچ دکمه‌ای جز «بازگشت به فهرست» نداشت. */
/* ⚠ This is the panel's most valuable block and it should look like it. It is
   the way OUT of a dead end — the customer whose rate window closed, or whose
   transfer was refused, and who would otherwise leave. It now wears the same
   accent stripe as the identity banner, which is the site's one visual language
   for «something here is waiting for you», rather than reading as a quiet grey
   footnote under the record it belongs to (@since 0.62.0).
   ⚠ Do NOT let a future tidy-up turn this into a plain paragraph: the block's
   two variants — expired and rejected — carry different copy on purpose, and
   the button is the only route back into the funnel from either. */
.vtcp-rebook {
	margin-block-start: 18px;
	padding: 16px 18px;
	background: var(--vtcp-soft);
	border: 1px solid var(--vtcp-line);
	border-inline-start: 4px solid var(--vtcp-accent);
	border-radius: var(--vtcp-radius-lg);
}

/* ⚠ The BACKGROUND stays the neutral tint, and the gold appears only as the
   stripe — a gold panel was tried and measured 1.67:1 between the gold button
   and the gold ground, i.e. the button stopped reading as an object.
   ⚠ MEASURED WHILE FIXING THAT, and it is the bigger finding: the same button
   on a WHITE card is 1.81:1 against its surface, so the weak edge is a property
   of the gold button EVERYWHERE, not of this block. Under the 3:1 that a control
   boundary wants. Recorded in the doc's ledger with a proposed fix rather than
   restyled here, because it would change every primary button on the site. */

/* ⚠ The first paragraph here is the SENTENCE THAT EXPLAINS why the customer's
   transfer is dead and what to do about it — the most consequential text in the
   panel. It was inheriting the muted grey used for incidental detail (4.73:1);
   the ink is 12.63:1. The amount/direction line below it keeps the muted tone,
   because that one genuinely is the detail. */
.vtcp-rebook .vtcp-text {
	margin-block-start: 0;
	color: var(--vtcp-ink);
}

.vtcp-rebook .vtcp-text--muted { color: var(--vtcp-muted); }

.vtcp-text--muted { color: var(--vtcp-muted); }