/* DM Checkout Fields — صفحهٔ تسویه (فرانت)
   همهٔ قاعده‌ها زیر کلاسِ ریشهٔ خودمان‌اند تا هیچ چیزی به بقیهٔ سایت نشت نکند. */

/* ── فیلدهای دلخواه ── */
.dm-cf-extra {
	margin-block: 24px 0;
}

.dm-cf-extra-group {
	background: #fff;
	border: 1px solid #e7e8f2;
	border-radius: 14px;
	padding: 20px 22px;
	margin-block-end: 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

/* سرتیترِ بخش، درونِ همان کادرِ واحد. بخشِ دوم به بعد فاصلهٔ بالا می‌گیرد. */
.dm-cf-extra-title {
	flex: 0 0 100%;
	margin: 0 0 4px;
	padding-block-end: 12px;
	border-block-end: 1px solid #eceef7;
	font-size: 15px;
	font-weight: 700;
	color: #06061c;
}

.dm-cf-extra-title ~ .dm-cf-extra-title {
	margin-block-start: 10px;
}

.dm-cf-extra-field {
	flex: 0 0 100%;
	min-width: 0;
}

.dm-cf-extra-w-half {
	flex: 1 1 240px;
}

.dm-cf-extra-label {
	display: block;
	margin-block-end: 8px;
	font-size: 13.5px;
	font-weight: 600;
	color: #131327;
}

.dm-cf-extra-label .required {
	color: #ef3e63;
	text-decoration: none;
	border: 0;
}

.dm-cf-extra-input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid #dcdeed;
	border-radius: 10px;
	background: #fdfdff;
	font-size: 13.5px;
	font-family: inherit;
	color: #131327;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/*
 * فلشِ رو به پایین روی کشویی‌ها، تا کاربر بفهمد این کادر باز می‌شود.
 * فلشِ پیش‌فرضِ مرورگر خاموش می‌شود و فلشِ خودمان به‌صورت تصویرِ درون‌خطیِ
 * کدگذاری‌شده می‌آید؛ هیچ درخواستِ بیرونی و هیچ فایلِ تصویری در کار نیست.
 */
select.dm-cf-extra-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%237a7d99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 12px 8px;
	padding-inline-end: 38px;
	cursor: pointer;
}

.dm-cf-extra-input:focus {
	border-color: var(--dmcf-gw-accent, #3e68ff);
	box-shadow: 0 0 0 3px rgba(62, 104, 255, .12);
	outline: none;
}

.dm-cf-extra-desc {
	display: block;
	margin-block-start: 6px;
	font-size: 11.5px;
	color: #7a7d99;
}

/* کارت‌های انتخابی */
.dm-cf-extra-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dm-cf-extra-card {
	position: relative;
	flex: 1 1 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 16px;
	border: 1px solid #dcdeed;
	border-radius: 10px;
	background: #f6f7fb;
	font-size: 13px;
	color: #131327;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.dm-cf-extra-card:hover {
	border-color: var(--dmcf-gw-accent, #3e68ff);
}

.dm-cf-extra-card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
}

.dm-cf-extra-card.dm-cf-card-on,
.dm-cf-extra-card:has(input:checked) {
	border-color: var(--dmcf-gw-accent, #3e68ff);
	background: rgba(62, 104, 255, .08);
	box-shadow: inset 0 0 0 1px var(--dmcf-gw-accent, #3e68ff);
	font-weight: 600;
}

.dm-cf-extra-card:focus-within {
	box-shadow: 0 0 0 3px rgba(62, 104, 255, .22);
}

/* فیلدی که شرطش برقرار نیست. مقدارِ اولیه را سرور تعیین می‌کند، نه اسکریپت. */
.dm-cf-extra-hidden {
	display: none;
}

.dm-cf-extra-check {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	color: #131327;
	cursor: pointer;
}

/*
 * ── بخشِ «ارسال به آدرس دیگری؟» ──
 *
 * نشانه‌گذاریِ خودِ ووکامرس است (پروندهٔ checkout/form-shipping.php)، نه چیزی
 * که این افزونه بسازد؛ از رویِ خروجیِ واقعیِ همین نصب خوانده شد، نه از حافظه.
 * سه بخشِ همسایه در فرمِ تسویه پشتِ سرِ هم می‌نشینند — فیلدهایِ صورتحساب،
 * همین بخشِ ارسال، و فیلدهایِ اضافی — و بدونِ هیچ مرزی یک ستونِ یکدست به نظر
 * می‌رسند؛ کاربر نمی‌فهمد کجا صورتحساب تمام و «ارسال به آدرس دیگری» شروع شده.
 *
 * کادر همیشه هست، چه تیک خورده چه نخورده، تا سطرِ چک‌باکس هم داخلِ همان
 * مرزِ بصری بنشیند نه بیرونش. باز/بستهٔ فیلدها با jQuery slideDown/slideUp
 * انجام می‌شود که فقط display را دست می‌زند؛ رنگ و حاشیهٔ اینجا با آن تداخل
 * ندارد (CLAUDE.md +INLINE-STYLE).
 */
.dm-cf-checkout .woocommerce-shipping-fields {
	margin-block: 22px;
	padding: 18px 20px;
	border: 1px solid #e7e8f2;
	border-radius: 14px;
	background: #f8f9fc;
}

.dm-cf-checkout .woocommerce-shipping-fields #ship-to-different-address {
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	font-weight: inherit;
}

.dm-cf-checkout .woocommerce-shipping-fields #ship-to-different-address label {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	cursor: pointer;
}

/* خودِ فیلدها از سطرِ چک‌باکس با یک خطِ نازک جدا می‌شوند؛ این همان مرزی است
   که «قسمتِ ارسال» را از خودِ تصمیمِ «ارسال به آدرس دیگری؟» هم جدا می‌کند. */
.dm-cf-checkout .woocommerce-shipping-fields .shipping_address {
	margin-block-start: 16px;
	padding-block-start: 16px;
	border-block-start: 1px dashed #dcdeed;
}

/* ── دکمهٔ ثبت سفارش ──
 * ⚠ انتخابگرها عمداً چندلایه‌اند. سازندهٔ صفحه، شیوه‌نامهٔ خودش را با
 * انتخابگرهای مشخص‌ترِ شامل شناسه و کلاسِ ابزارک می‌نویسد؛ یک انتخابگرِ ساده
 * بی‌سروصدا بازنده می‌شود و رنگ اصلاً اعمال نمی‌شود. هر سطر یک محیطِ رایج را
 * پوشش می‌دهد: تسویهٔ کلاسیک، ابزارکِ سازندهٔ صفحه، و چیدمانِ بلاکی.
 */
body.dm-cf-skin-button #place_order,
body.dm-cf-skin-button .woocommerce #place_order,
body.dm-cf-skin-button .woocommerce-checkout #place_order,
body.dm-cf-skin-button .elementor-widget-container #place_order,
body.dm-cf-skin-button .elementor-widget-woocommerce-checkout-page #place_order,
body.dm-cf-skin-button .e-checkout__container #place_order,
body.dm-cf-skin-button .wc-block-components-checkout-place-order-button {
	background: var(--dmcf-btn-bg, #3e68ff);
	background-color: var(--dmcf-btn-bg, #3e68ff);
	background-image: none;
	border-color: var(--dmcf-btn-bg, #3e68ff);
	color: var(--dmcf-btn-text, #fff);
	border-radius: var(--dmcf-btn-radius, 10px);
	font-weight: 700;
	transition: background-color .15s ease, box-shadow .15s ease;
}

body.dm-cf-skin-button #place_order:hover,
body.dm-cf-skin-button .woocommerce #place_order:hover,
body.dm-cf-skin-button .woocommerce-checkout #place_order:hover,
body.dm-cf-skin-button .elementor-widget-container #place_order:hover,
body.dm-cf-skin-button .elementor-widget-woocommerce-checkout-page #place_order:hover,
body.dm-cf-skin-button .e-checkout__container #place_order:hover,
body.dm-cf-skin-button .wc-block-components-checkout-place-order-button:hover {
	background: var(--dmcf-btn-bg-hover, #2f52d6);
	background-color: var(--dmcf-btn-bg-hover, #2f52d6);
	border-color: var(--dmcf-btn-bg-hover, #2f52d6);
	color: var(--dmcf-btn-text, #fff);
}

body.dm-cf-skin-button #place_order:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(62, 104, 255, .3);
}

body.dm-cf-btn-full #place_order,
body.dm-cf-btn-full .elementor-widget-container #place_order {
	display: block;
	width: 100%;
	text-align: center;
}

/* ── فهرست درگاه‌ها به شکل کارت ── */
.dm-cf-skin-gateways ul.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method {
	position: relative;
	margin: 0;
	padding: 0;
	border: 1px solid #e7e8f2;
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method:hover {
	border-color: #c3cdf5;
}

/*
 * حالتِ انتخاب‌شده از دو راه می‌آید: کلاسی که اسکریپت می‌گذارد (همه‌جا کار
 * می‌کند) و انتخابگرِ نوینِ مرورگر (وقتی اسکریپت اجرا نشود). هر دو یک ظاهر.
 * ⚠ هر دو انتخابگر عمداً هم‌وزنِ قاعدهٔ اشارهٔ موس نوشته شده‌اند: قاعدهٔ اشاره
 * یک کلاسِ مجازی بیشتر داشت و بی‌سروصدا بر حالتِ انتخاب‌شده غلبه می‌کرد،
 * یعنی با بردن موس روی کارتِ انتخاب‌شده حاشیه‌اش خاکستری می‌شد.
 */
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method.dm-cf-gw-on,
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method:has(input:checked) {
	border-color: var(--dmcf-gw-accent, #3e68ff);
}

/*
 * حلقهٔ دومِ حاشیه به‌جای سایهٔ درونی کشیده می‌شود.
 * سایهٔ درونی زیرِ فرزندان نقاشی می‌شود، پس جعبهٔ توضیحِ درگاه روی آن می‌افتاد
 * و خطِ رنگی زیرِ خاکستری گم می‌شد. عنصرِ جای‌گرفته همیشه بالاتر از محتوای
 * جاری نقاشی می‌شود و ضخامتی هم به چیدمان اضافه نمی‌کند.
 */
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method.dm-cf-gw-on::after,
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method:has(input:checked)::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--dmcf-gw-accent, #3e68ff);
	border-radius: inherit;
	pointer-events: none;
}

/*
 * دکمهٔ رادیوییِ خودِ مرورگر عمداً از دید برداشته می‌شود، نه با پنهان‌کردنِ
 * کامل: باید همچنان با صفحه‌کلید قابل انتخاب بماند و در ارسالِ فرم بیاید.
 * ووکامرس آن را خواهرِ برچسب می‌گذارد، پس اگر نمایش بدهیم روی خطِ خودش
 * می‌افتد و همان دایرهٔ کجِ گوشهٔ بالا ساخته می‌شود.
 */
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method > label {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 17px 20px;
	padding-inline-start: 52px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.7;
	color: #06061c;
	cursor: pointer;
}

/* نشانگرِ دستیِ ما: سمتِ آغازِ خط (در چیدمان فارسی یعنی راست)، هم‌تراز با متن */
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method > label::before {
	content: "";
	position: absolute;
	inset-inline-start: 20px;
	inset-block-start: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	border: 2px solid #d3d7ea;
	border-radius: 50%;
	background: #fff;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

/* حالتِ انتخاب‌شده: حلقهٔ رنگی، فاصلهٔ سفید، نقطهٔ رنگیِ وسط */
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method.dm-cf-gw-on > label::before,
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method:has(input:checked) > label::before {
	border-color: var(--dmcf-gw-accent, #3e68ff);
	background:
		radial-gradient(
			circle at center,
			var(--dmcf-gw-accent, #3e68ff) 0 4px,
			#fff 4.5px
		);
}

/* حلقهٔ تمرکزِ صفحه‌کلید روی کارت می‌نشیند، چون خودِ ورودی دیده نمی‌شود */
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method:focus-within {
	border-color: var(--dmcf-gw-accent, #3e68ff);
}

.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method:focus-within > label::before {
	box-shadow: 0 0 0 3px rgba(62, 104, 255, .25);
}

.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method > label img {
	max-height: 24px;
	width: auto;
	margin: 0;
	margin-inline-start: auto;
	float: none;
	display: inline-block;
	vertical-align: middle;
}

/*
 * ⚠ شناسهٔ #payment عمداً در انتخابگر هست.
 * قاعدهٔ خودِ ووکامرس برای این جعبه شناسه دارد و شناسه از هر تعداد کلاس
 * مشخص‌تر است؛ بدون آن، فاصله‌های ما بی‌سروصدا نادیده گرفته می‌شوند و جعبهٔ
 * خاکستری تا لبهٔ کارت کشیده می‌شود و روی حاشیهٔ رنگی می‌افتد.
 */
.dm-cf-skin-gateways #payment ul.wc_payment_methods li.wc_payment_method div.payment_box,
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method div.payment_box {
	margin: 0 20px 18px;
	padding: 13px 16px;
	border-radius: 10px;
	background: #f4f5fa;
	border: 0;
	box-shadow: none;
	font-size: 12.5px;
	line-height: 2;
	color: #4a4d68;
	width: auto;
	float: none;
}

.dm-cf-skin-gateways #payment ul.wc_payment_methods li.wc_payment_method div.payment_box p,
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method div.payment_box p {
	margin: 0;
}

.dm-cf-skin-gateways #payment ul.wc_payment_methods li.wc_payment_method div.payment_box::before,
.dm-cf-skin-gateways ul.wc_payment_methods li.wc_payment_method div.payment_box::before {
	display: none;
}

/* ارقام و متن‌های لاتین داخل جملهٔ فارسی نباید به‌هم بریزند */
.dm-cf-extra bdi,
.dm-cf-skin-gateways bdi {
	unicode-bidi: isolate;
}

[hidden] { display: none !important; }

/* برچسبِ مبلغِ کنارِ گزینه. عنصر همیشه هست حتی وقتی خالی است، چون
   جایگزینیِ آژاکس به همین عنصر گره خورده و نبودنش یعنی مبلغ دیگر تازه نمی‌شود. */
.dm-cf-cost {
	display: inline-flex;
	align-items: center;
	margin-inline-start: 8px;
}

.dm-cf-cost-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(62, 104, 255, .1);
	color: var(--dmcf-gw-accent, #3e68ff);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.9;
	white-space: nowrap;
}

.dm-cf-extra-card .dm-cf-cost {
	margin-inline-start: auto;
}

.dm-cf-extra-card-text {
	min-width: 0;
}

/* روی صفحهٔ سبد، کادر فاصلهٔ خودش را می‌گیرد و به چیدمانِ پوسته دست نمی‌زند */
.dm-cf-extra-cart {
	margin-block: 20px;
}

.dm-cf-cart-row > td {
	padding: 0;
}

@media (max-width: 600px) {
	.dm-cf-extra-group { padding: 16px; }
	.dm-cf-extra-card { flex: 1 1 100%; }
}