/* پرداخت قسطی — صفحه محصول، تسویه‌حساب و حساب کاربری
 * رنگ اصلی از قالب گرفته می‌شود؛ برای تغییر در CSS قالب بنویسید: :root { --ptp-accent: #0f766e; }
 * همه رنگ‌ها از «تنظیمات ← ظاهر» هم عوض می‌شوند: --ptp-brand، --ptp-badge، --ptp-badge-text، --ptp-today */

.ptp-plan,
.ptp-product-notice,
.ptp-order-box,
.ptp-pay {
	--ptp-accent-color: var(--ptp-accent, var(--wp--preset--color--primary, #2563eb));
	--ptp-line: rgba(0, 0, 0, .12);
	--ptp-soft: rgba(0, 0, 0, .035);
}

/* ---------- انتخاب نحوه پرداخت در تسویه‌حساب ---------- */

/* کادر خاکستری روشن با کارت‌های سفید؛ دکمه رادیو در انتهای خط (مثل درگاه‌ها) */
.ptp-plan {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 6px 0;
	padding: 8px;
	border-radius: 12px;
	background: var(--ptp-soft);
	text-align: start;
}
.ptp-plan-login { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fff; }
/* درگاهی که برای پرداخت دو مرحله‌ای خاموش است: پیام به‌جای پنهان کردن درگاه */
.ptp-gw-off { margin: 0; padding: 8px 12px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 13px; line-height: 1.7; }
.ptp-plan .ptp-gw-off { margin-bottom: 8px; }
/* یادآوری زیر گزینه‌های پرداخت: دو مرحله‌ای فقط با پرداخت مستقیم است */
.ptp-gw-hint { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; background: #eff6ff; color: #1e3a8a; font-size: 13px; line-height: 1.7; }

.ptp-option {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--ptp-line);
	border-radius: 10px;
	background: #fff;
	font-weight: normal;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ptp-option:hover { border-color: var(--ptp-accent-color); }
.ptp-option input[type="radio"] { flex: none; order: 2; margin: 0; accent-color: var(--ptp-accent-color); }
.ptp-option.is-selected,
.ptp-option:has(input:checked) {
	border-color: var(--ptp-accent-color);
	background: #eff6ff;
	background: color-mix(in srgb, var(--ptp-accent-color) 6%, #fff);
	box-shadow: 0 0 0 1px var(--ptp-accent-color);
}
.ptp-option-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; line-height: 1.7; text-align: start; }
.ptp-option-title { font-weight: 700; font-size: .95em; }
.ptp-option-today { font-size: .82em; color: var(--ptp-today, #d97706); }
.ptp-option-today b { font-weight: 700; }
.ptp-option-desc { font-size: .8em; opacity: .7; }
.ptp-option input:disabled ~ .ptp-option-body { opacity: .6; }

/* ---------- صفحه محصول: کادر «هر قسط با …» زیر دکمه افزودن به سبد خرید ----------
 * رنگ از --ptp-brand (تنظیمات ← ظاهر)؛ سبک‌ها: is-soft، is-outline، is-plain */

.ptp-product-notice {
	--ptp-box: var(--ptp-brand, #16a34a);
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 14px 0;
	padding: 11px 14px;
	border-radius: 12px;
	line-height: 1.7;
	text-align: start;
}
.ptp-product-notice.is-soft {
	background: rgba(22, 163, 74, .07);
	background: color-mix(in srgb, var(--ptp-box) 7%, transparent);
}
.ptp-product-notice.is-outline {
	border: 1px solid rgba(22, 163, 74, .35);
	border: 1px solid color-mix(in srgb, var(--ptp-box) 35%, transparent);
}
.ptp-product-notice.is-plain { padding: 0; gap: 10px; }

.ptp-pn-icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ptp-box);
	color: #fff;
}
.ptp-product-notice.is-plain .ptp-pn-icon { width: auto; height: auto; background: none; color: var(--ptp-box); }
/* لوگوی سایت به‌جای آیکون؛ قاب: is-none (همان‌طور که هست)، is-circle، is-square */
.ptp-pn-icon.has-logo { width: auto; min-width: 0; height: 34px; overflow: hidden; background: none; border-radius: 0; }
.ptp-pn-icon.has-logo img { display: block; width: auto; max-width: 64px; height: 100%; margin: 0; object-fit: contain; }
.ptp-pn-icon.has-logo.is-circle,
.ptp-pn-icon.has-logo.is-square { width: 34px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.ptp-pn-icon.has-logo.is-circle { border-radius: 50%; }
.ptp-pn-icon.has-logo.is-square { border-radius: 8px; }
.ptp-pn-icon.has-logo.is-circle img,
.ptp-pn-icon.has-logo.is-square img { width: 100%; max-width: none; object-fit: cover; }
.ptp-product-notice.is-plain .ptp-pn-icon.has-logo { height: 30px; }
.ptp-product-notice.is-plain .ptp-pn-icon.has-logo.is-circle,
.ptp-product-notice.is-plain .ptp-pn-icon.has-logo.is-square { width: 30px; }
.ptp-product-notice.is-plain .ptp-pn-icon .ptp-icon { width: 20px; height: 20px; }

.ptp-pn-body { display: flex; flex-direction: column; min-width: 0; }
.ptp-pn-line { font-size: .95em; }
.ptp-pn-brand { color: var(--ptp-box); font-weight: 700; }
.ptp-pn-amount { font-weight: 700; white-space: nowrap; unicode-bidi: isolate; }
/* جای «تومان» دقیقاً طبق «جایگاه واحد پول» ووکامرس (چپ یا راست، به همان معنای دیداری).
 * اصلش در price_html_ordered() با نویسه‌های LRI/FSI/PDI داخل متن است (wp_kses_post تگ bdi را حذف می‌کند)؛ این قاعده‌ها پشتیبان‌اند:
 * مبلغ چپ‌به‌راست چیده می‌شود و «تومان» جدا (isolate) می‌ماند؛ وگرنه الگوریتم دوجهته عدد را به
 * حروف فارسی می‌چسباند و در صفحه راست‌به‌چپ «تومان» جلوی عدد می‌افتد */
.ptp-pn-amount bdi { direction: ltr !important; unicode-bidi: isolate; }
.ptp-pn-amount .woocommerce-Price-currencySymbol { unicode-bidi: isolate; }
.ptp-pn-amount .woocommerce-Price-currencySymbol { font-size: .75em; font-weight: 600; }
.ptp-pn-sub { font-size: .8em; opacity: .6; }

/* ---------- برچسب روی کارت محصول در فروشگاه ----------
 * رنگ‌ها از --ptp-badge و --ptp-badge-text؛ سبک‌ها: is-solid، is-glass، is-outline؛ جا: is-right، is-left */

ul.products li.product { position: relative; }
.ptp-loop-badge {
	--ptp-b: var(--ptp-badge, #111827);
	--ptp-bt: var(--ptp-badge-text, #fff);
	position: absolute;
	top: 10px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	max-width: calc(100% - 20px);
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	pointer-events: none;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.ptp-loop-badge.is-right { right: 10px; }
.ptp-loop-badge.is-left { left: 10px; }
.ptp-loop-badge .ptp-icon { flex: none; width: 13px; height: 13px; }
.ptp-badge-logo { display: inline-flex; flex: none; height: 14px; overflow: hidden; }
.ptp-badge-logo img { display: block; width: auto; max-width: 40px; height: 100%; margin: 0; object-fit: contain; }
.ptp-badge-logo.is-circle,
.ptp-badge-logo.is-square { width: 16px; height: 16px; background: #fff; }
.ptp-badge-logo.is-circle { border-radius: 50%; }
.ptp-badge-logo.is-square { border-radius: 4px; }
.ptp-badge-logo.is-circle img,
.ptp-badge-logo.is-square img { width: 100%; max-width: none; object-fit: cover; }
.ptp-badge-text { overflow: hidden; text-overflow: ellipsis; }

.ptp-loop-badge.is-solid {
	background: var(--ptp-b);
	color: var(--ptp-bt);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.ptp-loop-badge.is-glass {
	background: rgba(255, 255, 255, .82);
	color: var(--ptp-b);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .1);
}
.ptp-loop-badge.is-outline {
	background: rgba(255, 255, 255, .6);
	color: var(--ptp-b);
	border: 1px solid var(--ptp-b);
}
@media (max-width: 549px) {
	.ptp-loop-badge { top: 6px; padding: 3px 8px; font-size: 10px; }
	.ptp-loop-badge.is-right { right: 6px; }
	.ptp-loop-badge.is-left { left: 6px; }
}

/* ---------- صفحه سفارش در حساب کاربری و صفحه تشکر ---------- */

.ptp-order-box {
	margin: 2em 0;
	padding: 20px;
	border: 1px solid var(--ptp-line);
	border-radius: 12px;
}
.ptp-order-box h2 { margin: 0 0 14px; font-size: 1.25em; }
.ptp-order-box p:last-child { margin-bottom: 0; }

.ptp-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 10px;
	margin: 0 0 14px;
}
.ptp-summary-item { padding: 10px 12px; border-radius: 8px; background: var(--ptp-soft); }
.ptp-summary-item span { display: block; font-size: .8em; opacity: .7; }
.ptp-summary-item strong { display: block; margin-top: 2px; font-size: 1.05em; }

.ptp-meter { height: 8px; border-radius: 999px; background: var(--ptp-soft); overflow: hidden; }
.ptp-meter span { display: block; height: 100%; border-radius: inherit; background: #16a34a; }
.ptp-meter-label { margin: 6px 0 16px; font-size: .86em; opacity: .75; }

.ptp-stages { width: 100%; margin: 0 0 16px; border-collapse: collapse; }
.ptp-stages th,
.ptp-stages td { padding: 10px 8px; border: 0; border-bottom: 1px solid var(--ptp-line); text-align: start; }
.ptp-stages thead th { font-size: .85em; opacity: .75; font-weight: 600; }
.ptp-stages tr:last-child td { border-bottom: 0; }
.ptp-stage-number { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
	.ptp-stages th,
	.ptp-stages td { padding: 8px 4px; font-size: .9em; }
}

.ptp-pill {
	display: inline-block;
	padding: 1px 10px;
	font-size: .8em;
	line-height: 1.8;
	border-radius: 999px;
	background: var(--ptp-soft);
	white-space: nowrap;
}
.ptp-pill.is-paid { background: #dcfce7; color: #166534; }
.ptp-pill.is-next { background: #fef3c7; color: #92400e; }

/* دکمه پرداخت قسط (ستون جدول سفارش‌ها و صفحه سفارش) */
.ptp-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.ptp-pay .button { margin: 0; }
.ptp-pay-meta { font-size: .85em; opacity: .75; line-height: 1.6; }
.ptp-pay-all { font-size: .85em; }
.ptp-pay-state { font-size: .9em; opacity: .8; }

/* ---------- درگاهی که برای پرداخت قسطی خاموش است (زیر توضیح درگاه در تسویه‌حساب و صفحه پرداخت) ---------- */

.ptp-gw-blocked {
	margin: 8px 0 0;
	padding: 8px 12px;
	border-inline-start: 3px solid #d03b3b;
	border-radius: 6px;
	background: rgba(208, 59, 59, .07);
	color: inherit;
	font-size: .9em;
	line-height: 1.7;
}