/**
 * فیلدهای سفارشیِ خرید — پیش‌فرضِ ظاهر.
 *
 * همه‌چیز از توکن‌ها می‌آید و همه‌ی مقدارها با fallback نوشته شده‌اند،
 * پس اگر tokens.css نیامد هم چیزی بی‌رنگ نمی‌شود.
 *
 * تک‌کلاسی و کم‌وزن نوشته شده تا کنترل‌های المنتور (که با
 * {{WRAPPER}} می‌آیند و وزن بیشتری دارند) بتوانند رویش بنشینند.
 */

.nb-cf {
	display: flex;
	flex-direction: column;
	gap: var(--nb-cf-gap, var(--nb-gap, 16px));
	margin: var(--nb-cf-margin, 18px 0);
}

.nb-cf__scope {
	display: flex;
	flex-direction: column;
	gap: var(--nb-cf-gap, var(--nb-gap, 16px));
}

.nb-cf__scope[hidden],
.nb-cf__row[hidden] {
	display: none;
}

/* ---------- ردیف ---------- */

.nb-cf__row {
	display: flex;
	flex-direction: column;
	gap: var(--nb-cf-label-gap, 7px);
}

.nb-cf__label {
	color: var(--nb-cf-label-color, var(--nb-fg, #e7e9ee));
	font-size: var(--nb-cf-label-size, 14px);
	font-weight: var(--nb-cf-label-weight, 600);
	line-height: 1.6;
}

.nb-cf__req {
	color: var(--nb-cf-req-color, #f87171);
	margin-inline-start: 2px;
}

.nb-cf__help {
	color: var(--nb-cf-help-color, var(--nb-muted, #98a2b3));
	font-size: var(--nb-cf-help-size, 12px);
	line-height: 1.7;
}

/* ---------- ورودی ---------- */

.nb-cf__input {
	background: var(--nb-cf-input-bg, var(--nb-surface-2, rgba(255, 255, 255, .05)));
	border: 1px solid var(--nb-cf-input-border, var(--nb-line, rgba(255, 255, 255, .08)));
	border-radius: var(--nb-cf-radius, var(--nb-radius-sm, 10px));
	color: var(--nb-cf-input-color, var(--nb-fg, #e7e9ee));
	font: inherit;
	min-height: var(--nb-cf-input-height, var(--nb-touch, 44px));
	padding: var(--nb-cf-input-padding, 10px 14px);
	transition: border-color .18s ease, box-shadow .18s ease;
	width: 100%;
}

textarea.nb-cf__input {
	min-height: 88px;
	resize: vertical;
}

.nb-cf__input::placeholder {
	color: var(--nb-cf-placeholder-color, var(--nb-muted, #98a2b3));
	opacity: .75;
}

/* ---- جهتِ متن ----
   خودِ ورودی dir="auto" دارد، پس با تایپ‌کردن جهت را از اولین حرفِ
   مقدار می‌گیرد: فارسی راست، انگلیسی چپ.

   تا وقتی خالی است اما، کروم dir="auto" را LTR می‌گیرد نه جهتِ صفحه؛
   اینجا از --nb-cf-dir استفاده می‌شود که PHP از روی متنِ راهنما حساب
   کرده. به محضِ اینکه چیزی تایپ شود این قاعده دیگر match نمی‌کند. */
.nb-cf__input {
	text-align: start;
}

.nb-cf__input:placeholder-shown {
	direction: var(--nb-cf-dir, rtl);
}

.nb-cf__input:focus {
	border-color: var(--nb-cf-focus-color, var(--nb-primary, #720eec));
	box-shadow: 0 0 0 3px var(--nb-cf-focus-ring, rgba(114, 14, 236, .18));
	outline: none;
}

/* مرورگر روی فیلدِ خالیِ اجباری بعد از تلاشِ ارسال این را می‌گذارد */
.nb-cf__input:user-invalid {
	border-color: var(--nb-cf-req-color, #f87171);
}

select.nb-cf__input {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: left 18px center, left 12px center;
	background-repeat: no-repeat;
	background-size: 6px 6px, 6px 6px;
	cursor: pointer;
	padding-inline-end: 14px;
	padding-inline-start: 34px;
}

/* ---------- پسورد ---------- */

.nb-cf__pass {
	position: relative;
}

.nb-cf__eye {
	background: none;
	border: 0;
	border-radius: var(--nb-radius-sm, 10px);
	color: var(--nb-cf-help-color, var(--nb-muted, #98a2b3));
	cursor: pointer;
	height: 32px;
	inset-inline-end: 8px;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
}

.nb-cf__eye::before {
	content: "";
	background: currentColor;
	display: block;
	height: 16px;
	margin: 0 auto;
	width: 16px;
	-webkit-mask: var(--nb-cf-eye) center / contain no-repeat;
	mask: var(--nb-cf-eye) center / contain no-repeat;
}

.nb-cf {
	--nb-cf-eye: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

.nb-cf__eye.is-on {
	color: var(--nb-cf-focus-color, var(--nb-primary, #720eec));
}

.nb-cf__pass .nb-cf__input {
	padding-inline-end: 44px;
}

/* ---------- گزینه‌های دکمه‌ای ---------- */

.nb-cf__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nb-cf-choice-gap, 8px);
}

.nb-cf__radio {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nb-cf__choice {
	background: var(--nb-cf-choice-bg, var(--nb-surface, rgba(255, 255, 255, .03)));
	border: 1px solid var(--nb-cf-choice-border, var(--nb-line, rgba(255, 255, 255, .08)));
	border-radius: var(--nb-cf-choice-radius, var(--nb-radius-sm, 10px));
	color: var(--nb-cf-choice-color, var(--nb-fg, #e7e9ee));
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--nb-cf-choice-size, 13px);
	min-height: 38px;
	padding: 6px 16px;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.nb-cf__choice:hover {
	border-color: var(--nb-cf-focus-color, var(--nb-primary, #720eec));
}

.nb-cf__radio:checked + .nb-cf__choice {
	background: var(--nb-cf-choice-active-bg, var(--nb-primary, #720eec));
	border-color: var(--nb-cf-choice-active-bg, var(--nb-primary, #720eec));
	color: var(--nb-cf-choice-active-color, var(--nb-on-primary, #fff));
}

.nb-cf__radio:focus-visible + .nb-cf__choice {
	box-shadow: 0 0 0 3px var(--nb-cf-focus-ring, rgba(114, 14, 236, .18));
}

/* ---------- تیک ---------- */

.nb-cf__check {
	align-items: flex-start;
	color: var(--nb-cf-label-color, var(--nb-fg, #e7e9ee));
	cursor: pointer;
	display: flex;
	font-size: var(--nb-cf-label-size, 14px);
	gap: 9px;
	line-height: 1.7;
}

.nb-cf__check input {
	accent-color: var(--nb-cf-focus-color, var(--nb-primary, #720eec));
	height: 18px;
	margin-top: 3px;
	width: 18px;
}

/* ---------- ست‌های تکرارشونده ---------- */

.nb-cf__units {
	display: flex;
	flex-direction: column;
	gap: var(--nb-cf-gap, var(--nb-gap, 16px));
}

.nb-cf__unit {
	display: flex;
	flex-direction: column;
	gap: var(--nb-cf-gap, var(--nb-gap, 16px));
}

/* جعبه فقط وقتی بیش از یک ست هست — با یک ست، قابِ اضافه فقط شلوغی است */
.nb-cf__units--multi .nb-cf__unit {
	background: var(--nb-cf-unit-bg, var(--nb-surface, rgba(255, 255, 255, .03)));
	border: 1px solid var(--nb-cf-unit-border, var(--nb-line-soft, rgba(255, 255, 255, .06)));
	border-radius: var(--nb-cf-radius, var(--nb-radius, 16px));
	padding: var(--nb-cf-unit-pad, var(--nb-pad, 16px));
}

.nb-cf__unit-title {
	color: var(--nb-cf-unit-title-color, var(--nb-muted, #98a2b3));
	font-size: var(--nb-cf-unit-title-size, 13px);
	font-weight: 700;
}

.nb-cf__units--multi .nb-cf__unit-title::before {
	background: var(--nb-cf-focus-color, var(--nb-primary, #720eec));
	border-radius: 999px;
	content: "";
	display: inline-block;
	height: 6px;
	margin-inline-end: 7px;
	vertical-align: middle;
	width: 6px;
}

.nb-cf__unit-title:empty {
	display: none;
}

/* ---------- نصف عرض ---------- */

@media (min-width: 480px) {

	.nb-cf__row--half {
		width: calc(50% - (var(--nb-cf-gap, 16px) / 2));
	}

	.nb-cf__scope,
	.nb-cf__unit {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.nb-cf__scope > .nb-cf__row:not(.nb-cf__row--half),
	.nb-cf__unit > .nb-cf__row:not(.nb-cf__row--half),
	.nb-cf__scope > .nb-cf__units,
	.nb-cf__unit > .nb-cf__unit-title {
		flex: 0 0 100%;
	}
}

/* ---------- «فروش تکی» ----------
   با تیکِ فروش تکی، ووکامرس ورودیِ تعداد را type="hidden" می‌کند ولی
   کادرِ دورش را نگه می‌دارد. نتیجه‌اش یک قرصِ خالی است که انگار تیک
   کار نکرده. اینجا کادرِ بی‌ورودیِ عددی برداشته می‌شود. */

/* important لازم است: اسنیپتِ «سبد خرید» روی .quantity قاعده‌ی
   display: inline-flex !important دارد و بدون important این یکی
   هیچ اثری ندارد — اندازه‌گیری‌شده، نه احتیاطِ الکی. */
form.cart .quantity:not(:has(input[type="number"])) {
	display: none !important;
}

/* ---------- تعدادِ قفل‌شده در سبد ---------- */

.nb-cf-qty {
	display: inline-block;
	font-weight: 600;
	min-width: 2em;
	text-align: center;
}


/* ==========================================================================
   وصل‌شدن به توکن‌های قالب
   ==========================================================================
   قاعده‌های بالا متغیرهایی می‌خوانند که این قالب ندارد
   (--nb-surface-2، --nb-line، --nb-fg، --nb-muted) و همیشه به مقدارِ
   پشتیبان می‌افتادند. اینجا به توکن‌های واقعیِ پنل وصل می‌شوند، پس رنگ
   برند و سطح که عوض شد، این فیلدها هم دنبالش می‌آیند.
   ========================================================================== */

.nb-cf {
	--nb-surface-2: var( --nb-surface, #131829 );
	--nb-line: var( --nb-border, #242c42 );
	--nb-fg: var( --nb-text, #ededed );
	--nb-muted: var( --nb-text-muted, #98a2b3 );
}

.nb-cf__input:focus {
	outline: none;
	border-color: var( --nb-accent, #720eec );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --nb-accent, #720eec ) 22%, transparent );
}

/*
 * زمینه‌ی autofill کروم.
 *
 * کروم روی فیلدِ پرشده یک زمینه‌ی روشنِ خودش می‌کشد که با
 * background قابل تغییر نیست — تنها راهِ عملی، سایه‌ی داخلیِ بزرگ است.
 * حتی با غیرفعال‌کردن autofill این را نگه می‌داریم: اگر کاربر خودش از
 * پسوردمنیجر چیزی بریزد، فیلد سفید نشود.
 */
.nb-cf__input:-webkit-autofill,
.nb-cf__input:-webkit-autofill:hover,
.nb-cf__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var( --nb-text, #ededed );
	-webkit-box-shadow: 0 0 0 1000px var( --nb-surface, #131829 ) inset;
	box-shadow: 0 0 0 1000px var( --nb-surface, #131829 ) inset;
	caret-color: var( --nb-text, #ededed );
}


/* ==========================================================================
   اندازه‌ها — جمع‌تر
   ==========================================================================
   فرمِ محصول با این اندازه‌ها روی موبایل بلندتر از یک نمایشگر می‌شد.
   اندازه‌گیری‌شده: هر ردیف ۸۰ پیکسل، هر ورودی ۵۱. کوچک‌تر شدند ولی زیر
   حدِ لمسِ ۴۰ پیکسل نرفتند تا روی گوشی هنوز راحت زده شوند.
   ========================================================================== */

.nb-cf {
	--nb-cf-input-height: 40px;
	--nb-cf-input-padding: 8px 12px;
	--nb-cf-label-gap: 5px;
	--nb-cf-gap: 12px;
}

.nb-cf__label {
	font-size: 12.5px;
}

.nb-cf__input {
	font-size: 13px;
}

textarea.nb-cf__input {
	min-height: 68px;
}

/*
 * ارتفاع ورودی را line-height می‌سازد، نه min-height.
 *
 * اندازه‌گیری‌شده: min-height روی ۴۰ بود ولی جعبه ۴۵ پیکسل درمی‌آمد —
 * ۲۳٫۴ ارتفاعِ خط (line-height سراسریِ قالب ضربدر ۱۳ پیکسل) + ۲۰ پدینگ
 * + ۲ کادر. تا وقتی خودِ خط کوتاه نشود، کم‌کردنِ min-height هیچ اثری
 * ندارد.
 *
 * مقدارها اینجا صریح‌اند نه از راهِ متغیر: متغیرها روی .nb-cf تعریف
 * شده بودند و به هر ورودی‌ای ارث نمی‌رسیدند — پدینگِ عمودی همچنان ۱۰
 * می‌ماند.
 */
/*
 * انتخابگر عمداً بلند است.
 *
 * theme.css یک قاعده‌ی عمومی دارد:
 *   .woocommerce form input[type="text"] { padding: 10px 12px }
 * وزنش (0,2,2) است و از `.nb-cf__input` تنها — که (0,1,0) است — بالاتر.
 * پس پدینگِ کوتاه‌شده اثر نمی‌کرد و ورودی ۴۲ پیکسل می‌ماند.
 *
 * `input[type]` یک لایه وزن اضافه می‌کند و نتیجه (0,3,2) می‌شود، یعنی
 * مستقل از ترتیبِ بارگذاریِ فایل‌ها برنده است. راهِ !important هم بود
 * ولی آن هر قاعده‌ی بعدی را هم می‌شکند، از جمله چیزی که خودِ مالک
 * روزی از پنل بگذارد.
 */
.woocommerce form input[type].nb-cf__input,
.woocommerce form textarea.nb-cf__input,
.woocommerce form select.nb-cf__input,
input[type].nb-cf__input,
textarea.nb-cf__input,
select.nb-cf__input {
	min-height: 36px;
	padding: 6px 12px;
	line-height: 1.5;
	font-size: 13px;
}

textarea.nb-cf__input {
	min-height: 60px;
	padding-block: 8px;
}

.nb-cf__row {
	gap: 4px;
}

.nb-cf__label {
	font-size: 12px;
	line-height: 1.6;
}

/*
 * متن‌ها یک پله کوچک‌تر — هم‌اندازه‌ی خودِ ورودی‌ها.
 *
 * برچسب‌ها و راهنماها با ۱۲.۵–۱۴ پیکسل از ورودیِ ۱۳ پیکسلی بزرگ‌تر
 * دیده می‌شدند و فرم شلوغ به‌نظر می‌رسید. حالا همه در یک مقیاس‌اند.
 */
.nb-cf__label {
	font-size: 11.5px;
}

.nb-cf__hint,
.nb-cf__note,
.nb-cf__desc,
.nb-cf__unit-title {
	font-size: 11.5px;
	line-height: 1.75;
}

.nb-cf__input::placeholder {
	font-size: 12px;
}