/* ==========================================================================
   BluVibe Delivery — استایل پنل مشتری (فرانت)
   پالت برند: #56c4ef
   ========================================================================== */

/* --------------------------------------------------------------------------
   ۱. پنل تحویل مشتری
   همه چیز زیر .bvd-wrap محدود شده تا با استایل قالب قاطی نشود.
   -------------------------------------------------------------------------- */
.bvd-wrap {
	--bvd-brand: #56c4ef;
	--bvd-brand-hover: #35b5e6;
	--bvd-brand-ink: #0b6f95;
	--bvd-brand-soft: #eaf7fd;
	--bvd-brand-line: #bde5f7;
	--bvd-btn-ink: #05374a;
	--bvd-ink: #101828;
	--bvd-muted: #667085;
	--bvd-line: #e7ecf1;
	--bvd-surface: #fff;
	--bvd-surface-2: #f7f9fb;
	--bvd-radius: 14px;

	margin: 28px 0;
	color: var(--bvd-ink);
	font-family: inherit;
	line-height: 1.75;
}

/* عنوان */
.bvd-wrap .bvd-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--bvd-ink);
}

.bvd-wrap .bvd-title::before {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 18px;
	border-radius: 99px;
	background: var(--bvd-brand);
}

/* کارت هر محصول */
.bvd-wrap .bvd-card {
	position: relative;
	overflow: hidden;
	margin: 0 0 14px;
	padding: 18px;
	background: var(--bvd-surface);
	border: 1px solid var(--bvd-line);
	border-radius: var(--bvd-radius);
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.bvd-wrap .bvd-card:last-of-type {
	margin-bottom: 0;
}

/* نوار باریک کنار کارت — رنگش با وضعیت عوض می‌شود */
.bvd-wrap .bvd-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	inset-inline-start: 0;
	width: 3px;
	background: var(--bvd-line);
}

.bvd-wrap .bvd-card-delivered::before { background: var(--bvd-brand); }
.bvd-wrap .bvd-card-queued::before { background: #f0b429; }
.bvd-wrap .bvd-card-need_info::before { background: #e05252; }
.bvd-wrap .bvd-card-in_progress::before { background: #6a8fe0; }

.bvd-wrap .bvd-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 14px;
}

.bvd-wrap .bvd-card-head strong {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

/* نشان وضعیت */
.bvd-wrap .bvd-state {
	padding: 6px 12px;
	border: 1px solid var(--bvd-line);
	border-radius: 999px;
	background: var(--bvd-surface-2);
	color: var(--bvd-muted);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

.bvd-wrap .bvd-state-delivered {
	background: var(--bvd-brand-soft);
	border-color: var(--bvd-brand-line);
	color: var(--bvd-brand-ink);
}

.bvd-wrap .bvd-state-queued {
	background: #fff7e8;
	border-color: #ffe1ad;
	color: #8a5a00;
}

.bvd-wrap .bvd-state-need_info {
	background: #fff1f1;
	border-color: #ffd2d2;
	color: #a12727;
}

.bvd-wrap .bvd-state-in_progress {
	background: #eef4ff;
	border-color: #d5e2ff;
	color: #2b4c9b;
}

/* بلوک اکانت تحویل‌شده */
.bvd-wrap .bvd-payload {
	margin: 0 0 10px;
	padding: 14px;
	background: var(--bvd-surface-2);
	border: 1px solid var(--bvd-line);
	border-radius: 12px;
}

.bvd-wrap .bvd-payload:last-of-type {
	margin-bottom: 0;
}

.bvd-wrap .bvd-payload-index {
	margin: 0 0 10px;
	color: var(--bvd-muted);
	font-size: 11px;
	font-weight: 700;
}

.bvd-wrap .bvd-field {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 8px;
}

.bvd-wrap .bvd-field:last-child {
	margin-bottom: 0;
}

.bvd-wrap .bvd-flabel {
	flex: 0 0 auto;
	min-width: 74px;
	color: var(--bvd-muted);
	font-size: 12px;
	font-weight: 600;
}

.bvd-wrap .bvd-fvalue {
	flex: 1 1 200px;
	min-width: 0;
	padding: 10px 12px;
	background: var(--bvd-surface);
	border: 1px solid var(--bvd-line);
	border-radius: 10px;
	color: var(--bvd-ink);
	direction: ltr;
	text-align: left;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	word-break: break-all;
}

/* دکمه‌ها */
.bvd-wrap .bvd-copy,
.bvd-wrap .bvd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 11px 20px;
	border: 1px solid var(--bvd-brand);
	border-radius: 10px;
	background: var(--bvd-brand);
	color: var(--bvd-btn-ink);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

.bvd-wrap .bvd-copy:hover,
.bvd-wrap .bvd-btn:hover {
	background: var(--bvd-brand-hover);
	border-color: var(--bvd-brand-hover);
	color: var(--bvd-btn-ink);
	box-shadow: 0 2px 10px rgba(86, 196, 239, .35);
}

.bvd-wrap .bvd-copy:active,
.bvd-wrap .bvd-btn:active {
	transform: translateY(1px);
	box-shadow: none;
}

.bvd-wrap .bvd-copy:focus-visible,
.bvd-wrap .bvd-btn:focus-visible {
	outline: 2px solid var(--bvd-brand-ink);
	outline-offset: 2px;
}

/* دکمه کپی کنار هر فیلد — تا وقتی موس رویش نرفته آرام است */
.bvd-wrap .bvd-copy.small {
	flex: 0 0 auto;
	padding: 9px 14px;
	background: var(--bvd-brand-soft);
	border-color: var(--bvd-brand-line);
	color: var(--bvd-brand-ink);
	font-size: 12px;
	font-weight: 600;
}

.bvd-wrap .bvd-copy.small:hover,
.bvd-wrap .bvd-copy.bvd-copied {
	background: var(--bvd-brand);
	border-color: var(--bvd-brand);
	color: var(--bvd-btn-ink);
}

.bvd-wrap .bvd-tg {
	background: #229ed9;
	border-color: #229ed9;
	color: #fff;
}

.bvd-wrap .bvd-tg:hover {
	background: #1b8dc2;
	border-color: #1b8dc2;
	color: #fff;
}

/* راهنما و قوانین استفاده */
.bvd-wrap .bvd-instructions {
	margin: 14px 0 0;
	padding: 14px 16px;
	background: var(--bvd-brand-soft);
	border: 1px solid var(--bvd-brand-line);
	border-radius: 12px;
	font-size: 14px;
}

.bvd-wrap .bvd-instructions h4 {
	margin: 0 0 8px;
	padding: 0;
	border: 0;
	color: var(--bvd-brand-ink);
	font-size: 13px;
	font-weight: 700;
}

/* راهنمای بالای فرم */
.bvd-wrap .bvd-note {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: var(--bvd-surface-2);
	border: 1px solid var(--bvd-line);
	border-radius: 12px;
	font-size: 14px;
}

/* دکمه‌ای که کلیکش گرفته شده — تا وقتی صفحه عوض شود */
.bvd-wrap .bvd-form .bvd-btn.is-sending {
	opacity: .65;
	pointer-events: none;
}

/* اشاره‌گر کوتاه بالای فرم: راهنما زیر فرم است، نه بالایش.
   عمداً کم‌رنگ و یک‌خطی است — نباید با خود فرم رقابت کند. */
.bvd-wrap .bvd-seebelow {
	margin: 0 0 12px;
	padding: 8px 12px;
	background: var(--bvd-brand-soft);
	border: 1px dashed var(--bvd-brand-line);
	border-radius: 9px;
	font-size: 12.5px;
	color: var(--bvd-brand-ink);
}

.bvd-wrap .bvd-seebelow::before {
	content: '↓ ';
	font-weight: 700;
}

/* کادر توضیحاتِ اختیاری: کوتاه شروع می‌شود و با تایپ بلند می‌شود.
   کسی معمولاً چیزی نمی‌نویسد، پس نباید نصف صفحه را بگیرد. */
.bvd-wrap .bvd-form textarea.bvd-grow {
	min-height: 44px;
	overflow-y: hidden;
	resize: none;
}

/* هشدار پرکردن آیدی — عمداً از .bvd-note پررنگ‌تر است.
   اشتباه‌نوشتن آیدی برگشت‌ناپذیر است، پس باید دیده شود. */
.bvd-wrap .bvd-warn {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: #fff6ec;
	border: 1px solid #f0d3bc;
	border-right: 4px solid #d1782f;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.8;
	color: #6b3a12;
}

.bvd-wrap .bvd-msg {
	margin: 0 0 4px;
	color: var(--bvd-muted);
	font-size: 14px;
}

.bvd-wrap .bvd-msg:last-child {
	margin-bottom: 0;
}

/* فرم دریافت اطلاعات */
.bvd-wrap .bvd-form p {
	margin: 0 0 14px;
}

.bvd-wrap .bvd-form p:last-child {
	margin-bottom: 0;
}

.bvd-wrap .bvd-form label {
	display: block;
	margin: 0 0 6px;
	color: var(--bvd-ink);
	font-size: 13px;
	font-weight: 600;
}

.bvd-wrap .bvd-form input[type=text],
.bvd-wrap .bvd-form input[type=email],
.bvd-wrap .bvd-form input[type=file],
.bvd-wrap .bvd-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 12px;
	background: var(--bvd-surface);
	border: 1px solid var(--bvd-line);
	border-radius: 10px;
	color: var(--bvd-ink);
	font-family: inherit;
	font-size: 14px;
	direction: ltr;
	text-align: left;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* **رقم لاتین در کادرهای فنی — نه رقم فارسی.**

   فونت فارسی قالب رقم‌های ۰-۹ لاتین را با گلیف فارسی نشان می‌دهد،
   پس نمونه‌ی UID که در کد `2dd8e96b…` نوشته شده روی صفحه
   `۲dd۸e۹۶b…` دیده می‌شود. مشتری همان را تایپ می‌کند و UID غلط
   می‌شود — اشتباهی که برگشت ندارد (تصمیم ۱۰۰).

   راه‌حل: این کادرها فونت لاتین خودشان را دارند، پس هیچ جایگزینی‌ای
   روی رقم‌ها انجام نمی‌شود. کادرهای فارسی (.bvd-rtl) دست‌نخورده
   می‌مانند. */
.bvd-wrap .bvd-form input[type=text],
.bvd-wrap .bvd-form input[type=email],
.bvd-wrap .bvd-form textarea:not(.bvd-rtl),
.bvd-couponbox .bvd-cp-input,
.bvd-wrap .bvd-ltr {
	/* `!important` لازم شد: روی قالب سایت، همین کادرها نمونه را با
	   رقم فارسی نشان می‌دادند — یعنی قاعده‌ی قالب از این قوی‌تر بود
	   و `font-feature-settings` تنها کافی نبود. */
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace !important;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
}

/* متنِ راهنمای داخل کادر، فونت را از خودِ کادر ارث نمی‌برد مگر صریح
   گفته شود — و دقیقاً همان جایی است که نمونه‌ی Organization ID دیده
   می‌شود. */
.bvd-wrap .bvd-form input[type=text]::placeholder,
.bvd-wrap .bvd-form input[type=email]::placeholder,
.bvd-wrap .bvd-form textarea:not(.bvd-rtl)::placeholder,
.bvd-couponbox .bvd-cp-input::placeholder {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace !important;
	font-variant-numeric: lining-nums tabular-nums;
	font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
	opacity: .55;
}

/* تکه‌ی لاتینِ وسطِ یک جمله‌ی فارسی (نمونه‌ی قالب، نام کلید). اندازه‌اش
   کمی کوچک‌تر است تا کنار متن فارسی درشت به نظر نرسد. */
.bvd-wrap .bvd-ltr {
	font-size: .95em;
	letter-spacing: .2px;
}

/* پیام‌ها و راهنماها متن فارسی‌اند، پس فونتشان عوض نمی‌شود — ولی
   جایگزینی رقم خاموش می‌شود، چون نمونه‌ی UID و کلید داخل همین
   جمله‌ها هم می‌آید. */
.bvd-wrap .bvd-hint,
.bvd-wrap .bvd-flash,
.bvd-wrap .bvd-warn,
.bvd-wrap .bvd-rules,
.bvd-wrap .bvd-howto,
.bvd-wrap .bvd-form label.bvd-confirm {
	font-variant-numeric: lining-nums;
	font-feature-settings: "ss01" 0, "ss02" 0, "ss03" 0;
}

/* فیلدهایی که متن فارسی می‌گیرند */
.bvd-wrap .bvd-form .bvd-rtl {
	direction: rtl;
	text-align: right;
}

/* کلید SessionKey: بیش از ۱۳۰ نویسه لاتین. تک‌فاصله است تا
   نویسه‌های شبیه هم (l و 1، O و 0) از هم جدا دیده شوند. */
.bvd-wrap .bvd-form textarea.bvd-sessionkey {
	direction: ltr;
	text-align: left;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.6;
	word-break: break-all;
	resize: vertical;
}

/* کادر متن بلند: مشتری یک متن چندصد خطی را اینجا پیست می‌کند.
   جهت خودکار است چون متن می‌تواند فارسی یا انگلیسی باشد، و
   عمداً resize عمودی دارد تا خودش بزرگش کند. */
.bvd-wrap .bvd-form textarea.bvd-bigtext {
	direction: auto;
	text-align: start;
	unicode-bidi: plaintext;
	min-height: 220px;
	line-height: 1.7;
	resize: vertical;
	font-size: 13px;
}

.bvd-wrap .bvd-form input:focus,
.bvd-wrap .bvd-form textarea:focus {
	outline: none;
	border-color: var(--bvd-brand);
	box-shadow: 0 0 0 3px rgba(86, 196, 239, .25);
}

/* تیک تایید قبل از ارسال — آخرین چیزی که مشتری می‌بیند.

   `align-items: flex-start` عمدی است: متن بلند (نوع‌های ارتقای
   اکانت) دو-سه خط می‌شکند و با `center` مربع تیک وسط پاراگراف
   می‌نشیند و شبیه تیک به نظر نمی‌رسد. */
.bvd-wrap .bvd-form label.bvd-confirm {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	background: var(--bvd-brand-soft);
	border: 1px solid var(--bvd-brand-line);
	border-radius: 11px;
	color: var(--bvd-brand-ink);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.9;
	cursor: pointer;
}

.bvd-wrap .bvd-form label.bvd-confirm input[type=checkbox] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 5px 0 0;
	accent-color: var(--bvd-brand);
	cursor: pointer;
}

/* ─────────── پنجره ارسال اطلاعات ───────────

   با `:target` باز می‌شود، بدون یک خط جاوااسکریپت: روی این هاست
   اسکریپت درون‌خطی بهینه‌ساز می‌خورد و ممکن است اجرا نشود
   (تصمیم ۱۱۸).

   **اگر همین فایل هم نرسد، خرابی بی‌خطر است:** بدون `display:none`
   همه‌چیز سرجای خودش در صفحه چاپ می‌شود و فرم مثل قبل کار می‌کند. */
.bvd-wrap .bvd-open {
	margin: 12px 0 0;
}

.bvd-wrap .bvd-open .bvd-btn {
	display: inline-block;
	text-decoration: none;
}

.bvd-wrap .bvd-modal {
	display: none;
}

.bvd-wrap .bvd-modal:target {
	display: block;
	position: fixed;
	inset: 0;
	/* هدرِ چسبانِ قالب z-index بالایی دارد و روی پنجره می‌افتاد —
	   روی سایت زنده دیده شد. عدد عمداً تا سقف برده شده تا این
	   مسابقه دوباره تکرار نشود. */
	z-index: 2147483000;
	padding: 20px 14px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* پرده هم لینکِ بستن است — کلیک بیرون پنجره می‌بنددش */
.bvd-wrap .bvd-modal-veil {
	position: fixed;
	inset: 0;
	background: rgba(10, 32, 43, .62);
	cursor: pointer;
}

.bvd-wrap .bvd-modal-box {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(5, 55, 74, .32);
	overflow: hidden;
}

.bvd-wrap .bvd-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	background: var(--bvd-brand-soft);
	border-bottom: 1px solid var(--bvd-brand-line);
	color: var(--bvd-brand-ink);
	font-size: 15px;
}

.bvd-wrap .bvd-modal-x {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--bvd-brand-line);
	color: var(--bvd-brand-ink);
	font-size: 13px;
	text-align: center;
	text-decoration: none;
}

.bvd-wrap .bvd-modal-x:hover {
	background: var(--bvd-brand);
	color: var(--bvd-btn-ink);
}

.bvd-wrap .bvd-modal-body {
	padding: 16px 18px 18px;
}

/* موبایل: پنجره تقریباً تمام‌عرض، و دکمه ارسال تمام‌عرض */
@media (max-width: 480px) {
	.bvd-wrap .bvd-modal:target {
		padding: 12px 8px;
	}

	.bvd-wrap .bvd-modal-body {
		padding: 13px 13px 15px;
	}

	.bvd-wrap .bvd-open .bvd-btn,
	.bvd-wrap .bvd-modal-body .bvd-form .bvd-btn {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* کادر سبزِ «شناسه را از کجا بیاور» — بالای کادرهای پنجره.

   عمداً سبز است و نه قرمز: کنارِ کادر بندها می‌نشیند و باید در یک
   نگاه معلوم باشد آن یکی هشدار است و این یکی مسیر. */
.bvd-wrap .bvd-howto {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: #f1faf4;
	border: 1px solid #c3e6d0;
	border-right: 4px solid #2f9e5e;
	border-radius: 12px;
	color: #1d4f33;
	font-size: 13.5px;
	line-height: 1.95;
}

.bvd-wrap .bvd-howto a {
	color: #1b6b3f;
	font-weight: 700;
	word-break: break-all;
	text-decoration: underline;
}

.bvd-wrap .bvd-howto img {
	max-width: 100%;
	height: auto;
	margin: 10px 0 0;
	border-radius: 10px;
}

/* کادر بندهای شماره‌دار — عمداً از .bvd-warn هم پررنگ‌تر است.

   آنجا یک مقدار اشتباه برگشت‌ناپذیر بود؛ اینجا چند شرط جدا هست که
   نبودن هر کدام مبلغ پرداخت‌شده را می‌سوزاند. قرمز است نه نارنجی،
   تا از هشدار آیدی هم قابل تشخیص باشد. */
.bvd-wrap .bvd-rules {
	margin: 0 0 12px;
	padding: 14px 16px 4px;
	background: #fff5f5;
	border: 1px solid #f0c9c9;
	border-right: 4px solid #c0392b;
	border-radius: 12px;
	color: #6d2018;
	font-size: 13.5px;
	line-height: 1.95;
}

.bvd-wrap .bvd-rules-head {
	margin: 0 0 8px;
	color: #a52d20;
	font-size: 14px;
	font-weight: 700;
}

/* شماره بندها با رقم فارسی، هم‌شکل بقیه اعداد پنل.

   شمارنده را خودمان تعریف می‌کنیم و به `list-style-type: persian`
   تکیه نمی‌کنیم — در مرورگر تست، آن کلیدواژه بی‌صدا رد شد و به
   رقم لاتین پس افتاد. مرورگری که @counter-style نشناسد هم decimal
   می‌گیرد، که فقط شکل رقم را عوض می‌کند نه شماره را. */
@counter-style bvd-fa {
	system: numeric;
	symbols: "۰" "۱" "۲" "۳" "۴" "۵" "۶" "۷" "۸" "۹";
	suffix: ". ";
}

.bvd-wrap .bvd-rules ol {
	margin: 0;
	padding: 0 24px 0 0;
	list-style-type: bvd-fa;
}

.bvd-wrap .bvd-rules ol li {
	margin: 0 0 9px;
	padding: 0;
}

.bvd-wrap .bvd-rules ol li::marker {
	color: #c0392b;
	font-weight: 700;
}

.bvd-wrap .bvd-rules-stop {
	margin: 10px 0 12px;
	padding: 9px 12px;
	background: #fdeaea;
	border-radius: 9px;
	font-weight: 700;
}

.bvd-wrap .bvd-rules a {
	color: #a52d20;
	font-weight: 700;
	text-decoration: underline;
}

/* تیک گروه بندها هم قرمز است، نه آبی — وگرنه از تیک تشریفاتی
   بقیه فرم‌ها قابل تشخیص نبود. */
.bvd-wrap .bvd-form label.bvd-confirm-strong {
	background: #fff5f5;
	border-color: #f0c9c9;
	color: #6d2018;
	font-weight: 600;
}

.bvd-wrap .bvd-form label.bvd-confirm-strong input[type=checkbox] {
	accent-color: #c0392b;
}

/* خط پشتیبانی */
.bvd-wrap .bvd-support {
	margin: 16px 0 0;
	color: var(--bvd-muted);
	font-size: 13px;
}

.bvd-wrap .bvd-support a {
	border-bottom: 1px solid var(--bvd-brand-line);
	color: var(--bvd-brand-ink);
	font-weight: 600;
	text-decoration: none;
}

.bvd-wrap .bvd-support a:hover {
	border-bottom-color: var(--bvd-brand-ink);
}

/* موبایل: خط اول برچسب و دکمه کپی، خط دوم خود مقدار در تمام عرض */
@media (max-width: 480px) {
	.bvd-wrap .bvd-card,
	.bvd-wrap .bvd-payload {
		padding: 14px;
	}

	.bvd-wrap .bvd-field {
		gap: 8px;
	}

	.bvd-wrap .bvd-flabel {
		order: 1;
		flex: 1 1 auto;
		min-width: 0;
	}

	.bvd-wrap .bvd-copy.small {
		order: 2;
	}

	/* پایه ۱۰۰٪ یعنی خودش می‌رود خط بعد؛ ارتفاع را دست نمی‌زند */
	.bvd-wrap .bvd-fvalue {
		order: 3;
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   ۲. نشان تحویل آنی در صفحه محصول
   رنگ‌ها را PHP از تنظیمات به شکل inline می‌گذارد؛ اینجا فقط فرم دکمه است.
   -------------------------------------------------------------------------- */
.bvd-delivery-notice {
	margin: 12px 0;
}

.bvd-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   ۴. اعلان صفحه تسویه‌حساب
   باید در نگاه اول دیده شود، ولی داد نزند: کارت سفید، هاله ملایم برند،
   آیکن دایره‌ای، تیتر پررنگ. یک بار موقع ظاهرشدن حرکت می‌کند و تمام.
   -------------------------------------------------------------------------- */
.bvd-wrap.bvd-checkout {
	margin: 0 0 24px;
}

.bvd-wrap .bvd-co {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px;
	background: var(--bvd-surface);
	border: 1px solid var(--bvd-brand-line);
	border-radius: 16px;
	box-shadow: 0 0 0 4px rgba(86, 196, 239, .10), 0 6px 20px rgba(86, 196, 239, .16);
	animation: bvd-co-in .45s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes bvd-co-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.bvd-wrap .bvd-co-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
}

.bvd-wrap .bvd-co-item + .bvd-co-item {
	padding-top: 14px;
	border-top: 1px solid var(--bvd-line);
}

.bvd-wrap .bvd-co-icon {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--bvd-brand-soft);
	border: 1px solid var(--bvd-brand-line);
	font-size: 19px;
	line-height: 1;
}

/* حلقه‌ای که یک بار باز می‌شود و چشم را می‌برد سمت کادر */
.bvd-wrap .bvd-co-item:first-child .bvd-co-icon::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--bvd-brand);
	opacity: 0;
	animation: bvd-co-ring 2.2s ease-out .35s 2;
}

@keyframes bvd-co-ring {
	0%   { opacity: .55; transform: scale(.85); }
	70%  { opacity: 0; transform: scale(1.35); }
	100% { opacity: 0; transform: scale(1.35); }
}

.bvd-wrap .bvd-co-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.bvd-wrap .bvd-co-head {
	color: var(--bvd-brand-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
}

.bvd-wrap .bvd-co-body {
	color: var(--bvd-ink);
	font-size: 14px;
	line-height: 1.85;
}

.bvd-wrap .bvd-co-telegram .bvd-co-icon {
	background: #fff7e8;
	border-color: #ffe1ad;
}

.bvd-wrap .bvd-co-telegram .bvd-co-head {
	color: #8a5a00;
}

.bvd-wrap .bvd-co-body a {
	color: var(--bvd-brand-ink);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid var(--bvd-brand-line);
}

.bvd-wrap .bvd-co-body a:hover {
	border-bottom-color: var(--bvd-brand-ink);
}

@media (max-width: 480px) {
	.bvd-wrap .bvd-co {
		padding: 16px;
	}

	.bvd-wrap .bvd-co-icon {
		width: 34px;
		height: 34px;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bvd-wrap .bvd-co,
	.bvd-wrap .bvd-co-icon::after {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   ۵. کادر تماس با پشتیبانی (نوع تحویل تلگرامی)
   مشتری باید به ما پیام بدهد، پس شماره سفارش و راه‌های تماس باید
   در نگاه اول خوانده شوند.
   -------------------------------------------------------------------------- */
.bvd-wrap .bvd-contact {
	margin: 0 0 16px;
	padding: 20px;
	background: var(--bvd-brand-soft);
	border: 1px solid var(--bvd-brand-line);
	border-radius: 14px;
	text-align: center;
}

.bvd-wrap .bvd-contact-lead {
	margin: 0 0 16px;
	color: var(--bvd-ink);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.8;
}

/* شماره سفارش — همان چیزی که باید بفرستد */
.bvd-wrap .bvd-contact-order {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 16px;
	padding: 14px;
	background: var(--bvd-surface);
	border: 1px dashed var(--bvd-brand);
	border-radius: 12px;
}

.bvd-wrap .bvd-contact-num {
	color: var(--bvd-brand-ink);
	font-size: 28px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: .02em;
}

.bvd-wrap .bvd-contact-cap {
	color: var(--bvd-muted);
	font-size: 12px;
	font-weight: 600;
}

.bvd-wrap .bvd-contact-ways {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

.bvd-wrap .bvd-contact-way {
	flex: 1 1 160px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px;
	background: var(--bvd-surface);
	border: 1px solid var(--bvd-brand-line);
	border-radius: 10px;
}

.bvd-wrap .bvd-contact-val {
	color: var(--bvd-brand-ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 17px;
	font-weight: 700;
	word-break: break-all;
}

/* دکمه کپی داخل کادر تماس — کنار مقدار می‌نشیند، نه کشیده روی کل عرض */
.bvd-wrap .bvd-contact-order .bvd-copy,
.bvd-wrap .bvd-contact-way .bvd-copy {
	align-self: flex-start;
	margin-top: 6px;
}

.bvd-wrap .bvd-contact-btn {
	background: #229ed9;
	border-color: #229ed9;
	color: #fff;
	padding: 13px 30px;
	font-size: 14px;
}

.bvd-wrap .bvd-contact-btn:hover {
	background: #1b8dc2;
	border-color: #1b8dc2;
	color: #fff;
}

@media (max-width: 480px) {
	.bvd-wrap .bvd-contact-way {
		flex: 1 1 100%;
	}

	.bvd-wrap .bvd-contact-num {
		font-size: 24px;
	}

	.bvd-wrap .bvd-contact-btn {
		display: flex;
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   ۱۰. پیام‌های پنل تحویل
   به نوتیس ووکامرس تکیه نمی‌کنیم؛ قالب یا پنل کاربری سفارشی ممکن است
   اصلاً چاپشان نکند و خطا بی‌صدا گم شود.
   -------------------------------------------------------------------------- */
.bvd-wrap .bvd-flash {
	margin: 0 0 16px;
	padding: 13px 16px;
	border-radius: 12px;
	border: 1px solid;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.8;
}

.bvd-wrap .bvd-flash-ok {
	background: #eefaf3;
	border-color: #c3e9d5;
	color: #187f4b;
}

.bvd-wrap .bvd-flash-error {
	background: #fff1f1;
	border-color: #ffd2d2;
	color: #b8332a;
}

.bvd-wrap .bvd-hint {
	display: block;
	margin: 6px 0 0;
	color: var(--bvd-muted);
	font-size: 12px;
	line-height: 1.7;
}


/* ---------- کادر کد تخفیف در تسویه‌حساب ---------- */

/* داخل فرم تسویه‌حساب می‌نشیند، پس فاصله‌اش را خودش می‌سازد */
.bvd-couponbox {
	margin: 0 0 18px;
}

.bvd-couponbox .bvd-cp {
	background: var(--bvd-brand-soft);
	border: 1px solid var(--bvd-brand-line);
	border-radius: 12px;
	padding: 14px 16px;
}

.bvd-couponbox .bvd-cp-head {
	font-weight: 700;
	font-size: 14px;
	color: var(--bvd-brand-ink);
	margin-bottom: 4px;
}

.bvd-couponbox .bvd-cp-hint {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--bvd-muted);
}

.bvd-couponbox .bvd-cp-row {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.bvd-couponbox .bvd-cp-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--bvd-brand-line);
	border-radius: 9px;
	color: var(--bvd-ink);
	font-family: inherit;
	font-size: 14px;
	direction: ltr;
	text-align: left;
	text-transform: uppercase;
}

.bvd-couponbox .bvd-cp-input:focus {
	outline: none;
	border-color: var(--bvd-brand);
	box-shadow: 0 0 0 3px rgba(86, 196, 239, .25);
}

.bvd-couponbox .bvd-cp-go {
	flex: 0 0 auto;
	padding: 10px 18px;
	background: var(--bvd-brand);
	color: var(--bvd-btn-ink);
	border: 0;
	border-radius: 9px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

/* فرمِ کد تخفیف فقط نانس دارد و چیزی برای دیدن نیست. فیلدهایش جای
   دیگر صفحه‌اند و با `form=` به آن وصل می‌شوند، پس پنهان‌بودنِ خودِ
   فرم جلوی ارسالشان را نمی‌گیرد. */
.bvd-cpform {
	display: none;
}

.bvd-couponbox .bvd-cp-ok {
	color: #1a7f4b;
	font-weight: 700;
}

.bvd-couponbox .bvd-cp-go:disabled {
	opacity: .6;
	cursor: default;
}

.bvd-couponbox .bvd-cp-msg:not(:empty) {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.7;
}

/* پیام‌های ووکامرس داخل کادر: قاب اضافه‌شان برداشته می‌شود تا
   کادر شلوغ نشود، ولی رنگشان بماند */
.bvd-couponbox .bvd-cp-msg .woocommerce-error,
.bvd-couponbox .bvd-cp-msg .woocommerce-message,
.bvd-couponbox .bvd-cp-msg ul {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

.bvd-couponbox .bvd-cp-msg .woocommerce-error,
.bvd-couponbox .bvd-cp-err {
	color: #a12727;
}

.bvd-couponbox .bvd-cp-msg .woocommerce-message {
	color: #187f4b;
	font-weight: 600;
}

@media (max-width: 480px) {
	.bvd-couponbox .bvd-cp-row {
		flex-direction: column;
	}
}

/* ---------- نوار عکس آموزش ---------- */

/* زیر متن راهنما و داخل بلوک قوانین. عکس‌ها معمولاً اسکرین‌شات‌اند
   و متن داخلشان در عرض ستون پنل خوانده نمی‌شود، پس هرکدام لینک
   نسخه کامل را دارند. */
.bvd-wrap .bvd-shots {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 12px 0 0;
}

.bvd-wrap .bvd-shots:first-child {
	margin-top: 0;
}

.bvd-wrap .bvd-shots a {
	display: block;
	max-width: 240px;
	border: 1px solid var(--bvd-brand-line);
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
	transition: border-color .15s ease, transform .15s ease;
}

.bvd-wrap .bvd-shots a:hover {
	border-color: var(--bvd-brand);
	transform: translateY(-1px);
}

.bvd-wrap .bvd-shots img {
	display: block;
	width: 100%;
	height: auto;
}

/* روی موبایل یک عکس در هر سطر — دو تا کنار هم آن‌قدر کوچک می‌شوند
   که دیگر چیزی از اسکرین‌شات خوانده نمی‌شود. */
@media (max-width: 520px) {
	.bvd-wrap .bvd-shots a {
		max-width: 100%;
	}
}

/* ---------- سفارش چندواحدی ---------- */

/* مشتری دو عدد از یک محصول خریده: به‌ازای هر واحد یک دسته کادر.
   بدون قاب، سه ایمیل و سه پسورد پشت سر هم یک فهرست بلندِ
   تشخیص‌ناپذیر می‌شد و مشتری نمی‌فهمید کدام مالِ کدام است. */
.bvd-wrap .bvd-multi {
	margin: 0 0 14px;
	padding: 10px 14px;
	background: var(--bvd-brand-soft);
	border: 1px solid var(--bvd-brand-line);
	border-radius: 10px;
	color: var(--bvd-brand-ink);
	font-size: 13px;
	line-height: 1.8;
}

.bvd-wrap .bvd-form fieldset.bvd-unit {
	margin: 0 0 16px;
	padding: 14px 16px 4px;
	border: 1px solid var(--bvd-line);
	border-radius: 12px;
	background: var(--bvd-surface-2);
}

.bvd-wrap .bvd-form fieldset.bvd-unit legend {
	padding: 2px 10px;
	background: var(--bvd-brand);
	border-radius: 20px;
	color: var(--bvd-btn-ink);
	font-size: 12px;
	font-weight: 700;
}

/* کادرهای داخل قاب زمینه سفید بگیرند تا از زمینه قاب جدا شوند */
.bvd-wrap .bvd-form fieldset.bvd-unit input,
.bvd-wrap .bvd-form fieldset.bvd-unit textarea {
	background: var(--bvd-surface);
}

/* --------------------------------------------------------------------------
   نظر خریدار — کارت یک‌لمسی در پنل و صفحه مستقل لینک امضاشده
   رنگ‌ها پالت سایت‌اند (#2DB9F0 پرکردن، #208CCF متن آبی و hover)، نه
   پالت قدیمی افزونه. ستاره‌ها بدون جاوااسکریپت: رادیوها در DOM از ۵ به
   ۱ چیده شده‌اند، پس «~ label» همان ستاره‌های سمت راستِ انتخاب‌شده است.
   -------------------------------------------------------------------------- */
.bvd-rv {
	margin: 18px 0 6px;
	color: #0F1B2D;
	text-align: right;
}

.bvd-rv .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.bvd-rv .bvd-rv-head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 14px;
}

.bvd-rv .bvd-rv-ico {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 13px;
	background: rgba(45, 185, 240, .12);
	color: #2DB9F0;
}

.bvd-rv .bvd-rv-ico svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* طرح پنل و صفحه تشکر قبل از هر h3 یک نقطه آبی می‌گذارند؛ اینجا آیکن
   کنار تیتر همان کار را می‌کند. */
.bvd-rv .bvd-rv-head .bvd-rv-h.bvd-rv-h::before {
	content: none !important;
	display: none !important;
}

.bvd-rv .bvd-rv-h {
	margin: 2px 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: #0F1B2D !important;
	font-size: 16.5px !important;
	font-weight: 800 !important;
	line-height: 1.7 !important;
}

.bvd-rv .bvd-rv-lead {
	margin: 0 !important;
	color: #4A5A72 !important;
	font-size: 13.5px !important;
	line-height: 1.9 !important;
}

.bvd-rv .bvd-rv-num {
	color: #208CCF;
	font-family: "bv-latin", ui-monospace, Menlo, monospace !important;
	font-weight: 700;
	letter-spacing: .3px;
}

/* کارت هر محصول — شیشه‌ای، مثل بقیه سایت */
.bvd-rv .bvd-rv-card {
	position: relative;
	margin: 0 0 12px;
	padding: 18px 18px 16px;
	border: 1px solid rgba(255, 255, 255, .85);
	border-radius: 22px;
	background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 14px 34px rgba(14, 80, 130, .07);
}

.bvd-rv .bvd-rv-prod {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
}

.bvd-rv .bvd-rv-thumb {
	flex: none;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(14, 80, 130, .1);
}

.bvd-rv .bvd-rv-thumb img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
}

.bvd-rv .bvd-rv-name {
	color: #0F1B2D;
	font-size: 14.5px !important;
	font-weight: 800 !important;
	line-height: 1.7;
}

/* ستاره‌ها */
/* طرح پنل کاربری (body.bvm) به هر fieldset و legend قاب و نقطه می‌دهد؛
   کلاسِ تکراری specificity را از آن بالاتر می‌برد. */
.bvd-rv .bvd-rv-stars.bvd-rv-stars.bvd-rv-stars {
	min-width: 0;
	margin: 0 0 12px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

.bvd-rv .bvd-rv-stars.bvd-rv-stars legend {
	display: block !important;
	width: 100%;
	margin: 0 0 4px !important;
	padding: 0 !important;
	border: 0 !important;
	color: #33445C !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.8;
}

.bvd-rv .bvd-rv-row {
	display: inline-flex;
	flex-direction: row;
	gap: 2px;
	direction: ltr;
}

.bvd-rv .bvd-rv-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.bvd-rv .bvd-rv-row label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 12px;
	color: #D3DCE6;
	cursor: pointer;
	transition: color .15s ease, transform .15s ease;
	-webkit-tap-highlight-color: transparent;
}

:where(html[data-dracula-scheme="dark"]) .bvd-rv .bvd-rv-row label {
	color: rgba(255, 255, 255, .2);
}

.bvd-rv .bvd-rv-row label svg {
	width: 36px;
	height: 36px;
	fill: currentColor;
}

/* انتخاب‌شده و هرچه سمت راستش است */
.bvd-rv .bvd-rv-radio:checked ~ label {
	color: #2DB9F0;
}

.bvd-rv .bvd-rv-radio:checked + label svg {
	animation: bvd-rv-pop .35s ease;
}

.bvd-rv .bvd-rv-radio:focus-visible + label {
	outline: 2px solid #2DB9F0;
	outline-offset: 2px;
}

.bvd-rv .bvd-rv-row label:active svg {
	transform: scale(.88);
}

/* پیش‌نمایش با موس: موقع hover رنگ انتخاب قبلی کنار می‌رود */
@media (hover: hover) {
	.bvd-rv .bvd-rv-row:has(> label:hover) > label {
		color: #D3DCE6;
	}

	:where(html[data-dracula-scheme="dark"]) .bvd-rv .bvd-rv-row:has(> label:hover) > label {
		color: rgba(255, 255, 255, .2);
	}

	.bvd-rv .bvd-rv-row.bvd-rv-row > label:hover,
	.bvd-rv .bvd-rv-row.bvd-rv-row > label:hover ~ label {
		color: #7CCFF3;
	}
}

@keyframes bvd-rv-pop {
	0% { transform: scale(.7); }
	60% { transform: scale(1.18); }
	100% { transform: scale(1); }
}

/* متن اختیاری */
.bvd-rv .bvd-rv-tlabel {
	display: block;
	margin: 0 0 6px !important;
	color: #33445C !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.8;
}

.bvd-rv .bvd-rv-tlabel span {
	color: #4A5A72;
	font-weight: 400;
}

/* پنل کاربری به هر textarea حداقل ۱۳۰px می‌دهد؛ اینجا کوتاه‌تر کافی است */
.bvd-rv .bvd-rv-card .bvd-rv-text.bvd-rv-text {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 84px !important;
	margin: 0 0 14px !important;
	padding: 12px 14px !important;
	border: 1px solid rgba(15, 27, 45, .12) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, .75) !important;
	box-shadow: none !important;
	color: #0F1B2D !important;
	font-family: inherit;
	font-size: 14px !important;
	line-height: 1.9 !important;
	resize: vertical;
}

.bvd-rv .bvd-rv-card .bvd-rv-text.bvd-rv-text:focus {
	border-color: #2DB9F0 !important;
	outline: 0;
	background: #fff !important;
	box-shadow: 0 0 0 4px rgba(45, 185, 240, .16) !important;
}

/* دکمه — قاعده‌ی «button:hover» قالب را باید صریح شکست داد.
   **اندازه از padding و min-height می‌آید، نه height ثابت.** روی Safariِ
   آیفون height:48px با line-height:1 نادیده گرفته شد و دکمه یک نوارِ نازک
   شد که متن از آن بیرون می‌زد (عکسِ حسین، ۱۳ مهر ۱۴۰۵). با padding دکمه در
   هر مرورگری به‌اندازه‌ی متنش بزرگ می‌شود. */
.bvd-rv .bvd-rv-card .bvd-rv-btn.bvd-rv-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box !important;
	width: auto;
	min-width: 170px;
	height: auto !important;
	min-height: 48px !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 13px 26px !important;
	border: 0 !important;
	border-radius: 14px !important;
	background: #2DB9F0 !important;
	box-shadow: 0 10px 24px rgba(45, 185, 240, .28) !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	text-align: center;
	white-space: normal;
	-webkit-appearance: none !important;
	appearance: none !important;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.bvd-rv .bvd-rv-card .bvd-rv-btn.bvd-rv-btn:is(:hover, :focus-visible) {
	background: #208CCF !important;
	color: #fff !important;
	transform: translateY(-1px);
}

.bvd-rv .bvd-rv-card .bvd-rv-btn.bvd-rv-btn:active {
	transform: none;
}

/* جایزه، حریم خصوصی، نتیجه */
.bvd-rv .bvd-rv-reward {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 12px !important;
	padding: 11px 14px !important;
	border: 1px solid rgba(45, 185, 240, .22);
	border-radius: 16px;
	background: rgba(45, 185, 240, .1);
	color: #33445C !important;
	font-size: 13px !important;
	line-height: 1.9 !important;
}

.bvd-rv .bvd-rv-reward svg {
	flex: none;
	margin-top: 3px;
	color: #208CCF;
}

.bvd-rv .bvd-rv-privacy {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0 0 !important;
	color: #4A5A72 !important;
	font-size: 12.5px !important;
	line-height: 1.8 !important;
}

.bvd-rv .bvd-rv-privacy svg {
	flex: none;
}

.bvd-rv .bvd-rv-done {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 10px 12px !important;
	border-radius: 14px;
	background: rgba(18, 183, 106, .1);
	color: #067647 !important;
	font-size: 13.5px !important;
	font-weight: 700;
	line-height: 1.8 !important;
}

.bvd-rv .bvd-rv-done svg {
	flex: none;
}

.bvd-rv .bvd-rv-flash {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 12px 14px;
	border-radius: 16px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.8;
}

.bvd-rv .bvd-rv-flash.is-ok {
	background: rgba(18, 183, 106, .12);
	color: #067647;
}

.bvd-rv .bvd-rv-flash.is-error {
	background: rgba(240, 68, 56, .1);
	color: #B42318;
}

/* صفحه مستقل لینک امضاشده */
.bvd-rvp {
	position: relative;
	padding: 34px 16px 64px;
	background: radial-gradient(900px 340px at 50% -80px, rgba(45, 185, 240, .18), transparent 70%);
}

.bvd-rvp .bvd-rvp-in {
	max-width: 620px;
	margin: 0 auto;
}

.bvd-rvp .bvd-rv {
	margin: 0;
}

.bvd-rvp .bvd-rv-page {
	padding: 22px 22px 18px;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 30px;
	background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .45));
	-webkit-backdrop-filter: blur(30px) saturate(180%);
	backdrop-filter: blur(30px) saturate(180%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 24px 60px rgba(14, 80, 130, .08);
}

.bvd-rvp .bvd-rvp-h1 {
	font-size: 20px !important;
}

@media (max-width: 480px) {
	/* هاله در عرض گوشی لبه‌ی تیز پیدا می‌کرد */
	.bvd-rvp,
	html[data-dracula-scheme="dark"] .bvd-rvp {
		padding: 18px 0 40px;
		background: none;
	}

	.bvd-rvp .bvd-rv-page {
		padding: 16px 14px;
		border-radius: 24px;
	}

	.bvd-rv .bvd-rv-card {
		padding: 16px 14px 14px;
	}

	.bvd-rv .bvd-rv-row label {
		width: 44px;
		height: 44px;
	}

	.bvd-rv .bvd-rv-row label svg {
		width: 34px;
		height: 34px;
	}

	.bvd-rv .bvd-rv-card .bvd-rv-btn.bvd-rv-btn {
		display: flex !important;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bvd-rv .bvd-rv-radio:checked + label svg {
		animation: none;
	}

	.bvd-rv .bvd-rv-card .bvd-rv-btn.bvd-rv-btn,
	.bvd-rv .bvd-rv-row label {
		transition: none;
	}
}

/* حالت شب (Dracula) */
html[data-dracula-scheme="dark"] .bvd-rv {
	color: #E8EDF3;
}

html[data-dracula-scheme="dark"] .bvd-rv .bvd-rv-card,
html[data-dracula-scheme="dark"] .bvd-rvp .bvd-rv-page {
	border-color: rgba(255, 255, 255, .08) !important;
	background: rgba(20, 30, 45, .6) !important;
	box-shadow: none !important;
}

html[data-dracula-scheme="dark"] .bvd-rv :is(.bvd-rv-h, .bvd-rv-name) {
	color: #E8EDF3 !important;
}

html[data-dracula-scheme="dark"] .bvd-rv :is(.bvd-rv-lead, .bvd-rv-privacy, .bvd-rv-tlabel, .bvd-rv-reward, .bvd-rv-stars legend) {
	color: #B9C4D3 !important;
}

html[data-dracula-scheme="dark"] .bvd-rv .bvd-rv-card .bvd-rv-text.bvd-rv-text {
	border-color: rgba(255, 255, 255, .12) !important;
	background: rgba(255, 255, 255, .06) !important;
	color: #E8EDF3 !important;
}

html[data-dracula-scheme="dark"] .bvd-rv .bvd-rv-card .bvd-rv-text.bvd-rv-text:focus {
	background: rgba(255, 255, 255, .09) !important;
}

html[data-dracula-scheme="dark"] .bvd-rv .bvd-rv-flash.is-ok {
	background: rgba(18, 183, 106, .14);
	color: #4cc38a;
}

html[data-dracula-scheme="dark"] .bvd-rv .bvd-rv-flash.is-error {
	background: rgba(240, 68, 56, .14);
	color: #f97066;
}

html[data-dracula-scheme="dark"] .bvd-rv .bvd-rv-done {
	background: rgba(18, 183, 106, .14);
	color: #4cc38a !important;
}

html[data-dracula-scheme="dark"] .bvd-rv .bvd-rv-num {
	color: #5cc6f5;
}

html[data-dracula-scheme="dark"] .bvd-rvp {
	background: radial-gradient(900px 340px at 50% -80px, rgba(45, 185, 240, .14), transparent 70%);
}

@media (max-width: 480px) {
	html[data-dracula-scheme="dark"] .bvd-rvp {
		background: none;
	}
}

/* کارت نظر بالای «مشاهده سفارش»، زیر جمله‌ی وضعیت سفارش.
   طرحِ صفحه‌ی تشکر/پنل به هر div.bvd-wrap فاصله‌ی خودش را می‌دهد؛
   کلاسِ تکراری از آن بالاتر می‌رود. */
html body div.bvd-wrap.bvd-rv-top.bvd-rv-top {
	margin: 18px 0 26px !important;
}

html body div.bvd-wrap.bvd-rv-top.bvd-rv-top .bvd-rv {
	margin: 0;
}

/* دکمه «ثبت نظر» در فهرست سفارش‌ها: تمام‌عرض، بالای دو دکمه‌ی دیگر.
   هم ردیفِ flex (دسکتاپ) و هم grid دوستونه‌ی گوشیِ طرحِ پنل را پوشش
   می‌دهد. رنگ کم‌رنگ است تا «مشاهده سفارش» دکمه‌ی اصلی بماند. */
.bva-actions .bvd-rv-cta {
	order: -1;
	flex: 1 1 100%;
	grid-column: 1 / -1;
}

/* وقتی دکمه نظر هست، سه دکمه یک بلوکِ مرتب می‌شوند: یکی بالا، دو تا
   نصف‌نصف پایین — در دسکتاپ هم، نه فقط گوشی. بدونِ :has() همان ردیفِ
   flex می‌ماند که باز درست است. */
html body .bva-wrap .bva-actions.bva-actions:has(.bvd-rv-cta) {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	max-width: 460px;
}

html body .bva-wrap .bva-actions.bva-actions:has(.bvd-rv-cta) > .bva-btn {
	width: 100%;
	box-sizing: border-box;
}

html body .bva-wrap .bva-actions a.bva-btn.bvd-rv-cta.bvd-rv-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid rgba(45, 185, 240, .38) !important;
	background: linear-gradient(135deg, rgba(45, 185, 240, .16), rgba(255, 255, 255, .78)) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important;
	color: #208CCF !important;
	-webkit-text-fill-color: #208CCF;
	font-weight: 800 !important;
	text-decoration: none !important;
	white-space: nowrap;
}

html body .bva-wrap .bva-actions a.bva-btn.bvd-rv-cta.bvd-rv-cta::before {
	display: none !important;
}

html body .bva-wrap .bva-actions a.bva-btn.bvd-rv-cta.bvd-rv-cta svg {
	flex: none;
	width: 17px;
	height: 17px;
	fill: currentColor;
}

html body .bva-wrap .bva-actions a.bva-btn.bvd-rv-cta.bvd-rv-cta:is(:hover, :focus-visible) {
	border-color: #2DB9F0 !important;
	background: #2DB9F0 !important;
	color: #fff !important;
	-webkit-text-fill-color: #fff;
}

html[data-dracula-scheme="dark"] body .bva-wrap .bva-actions a.bva-btn.bvd-rv-cta.bvd-rv-cta {
	border-color: rgba(92, 198, 245, .3) !important;
	background: rgba(45, 185, 240, .14) !important;
	box-shadow: none !important;
	color: #5cc6f5 !important;
	-webkit-text-fill-color: #5cc6f5;
}