/**
 * افزودن به سبد — دکمه‌های انتخاب متغیر
 *
 * انتخاب‌کننده‌ها تک‌کلاسی نگه داشته شده‌اند تا CSSای که المنتور برای
 * هر ویجت می‌سازد (`.elementor-element-XXXX …`) همیشه بر اینها غالب
 * شود. اینجا فقط چیدمان و یک ظاهر پیش‌فرض معقول است.
 */

/* ---------- جدول ویژگی‌ها ----------
   ووکامرس این را به‌صورت <table> می‌دهد. به بلوک تبدیلش می‌کنیم تا
   بشود آزادانه چید؛ حالت «کنار هم» را فلکس می‌سازد نه سلولِ جدول. */

.nb-atc table.variations,
.nb-atc table.variations tbody,
.nb-atc table.variations tr,
.nb-atc table.variations th,
.nb-atc table.variations td {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.nb-atc table.variations {
	margin-bottom: 16px;
}

.nb-atc table.variations tr + tr {
	margin-top: 14px;
}

.nb-atc table.variations th.label {
	margin-bottom: 8px;
}

.nb-atc table.variations th.label label {
	margin: 0;
	font-weight: 500;
}

.nb-atc--inline table.variations tr {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.nb-atc--inline table.variations th.label {
	flex: none;
	margin: 0;
	padding-top: 7px;
}

.nb-atc--inline table.variations td.value {
	flex: 1;
	min-width: 0;
}


/* ---------- دکمه‌های انتخاب ---------- */

/* شبکه‌ای: عرض همه یکی می‌شود و در ستون باریک هم مرتب می‌ماند */
.nb-atc--grid .nb-swatches {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

/* پیچشی: دکمه‌ها به عرضِ ردیف کشیده می‌شوند.
 *
 * قبلاً هرکدام دقیقاً به اندازه‌ی متنِ خودش بود. با گزینه‌های هم‌طول
 * خوب بود، ولی روی محصولی مثل «استارز» که ۱۳ گزینه با طول‌های
 * ۵۰ تا ۱۰٬۰۰۰ دارد، هر ردیف یک جای دیگر تمام می‌شد و ستون‌ها
 * ناهم‌تراز می‌افتادند — دیده‌شده روی nebolar.com.
 *
 * با flex: 1 1 auto عرضِ اضافه‌ی هر ردیف بین همان ردیف پخش می‌شود، پس
 * لبه‌ها صاف می‌مانند و اندازه‌ی هر دکمه هنوز به متنش وابسته است.
 * flex-basis روی auto است نه صفر، وگرنه همه‌ی دکمه‌ها هم‌عرض می‌شدند و
 * «۱۰٬۰۰۰» با «۵۰» یک اندازه می‌شد. */
.nb-atc--wrap .nb-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nb-atc--wrap .nb-swatch {
	flex: 1 1 auto;
}

/*
 * فقط ساختار و رفتار.
 *
 * ظاهر — زمینه، کناره، رنگ، و حالت‌های hover/active/disabled — پایین‌تر
 * در بخشِ «سواچ‌ها» تعریف شده. اینجا تکرارش نکن: آن بخش دیرتر می‌آید و
 * با ویژگیِ برابر برنده است، پس هر رنگی که اینجا نوشته شود مرده است و
 * فقط خواننده‌ی بعدی را گمراه می‌کند.
 */
.nb-atc .nb-swatch {
	text-align: center;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font: inherit;
	line-height: 1.7;
	/* در حالت شبکه‌ای، مقدارِ بلند از خانه‌اش بیرون می‌زد. با اینها
	   داخل همان خانه می‌شکند و هیچ‌وقت روی بغلی نمی‌افتد. */
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	transition: background .15s ease, color .15s ease, border-color .15s ease,
		box-shadow .15s ease, transform .12s ease;
}

/* این کلاس را PHP هنگام ساختِ دکمه‌ها می‌گذارد، پس select از همان
   اولین نقاشی پنهان است و کاربر هرگز منوی کشویی را نمی‌بیند.

   خودِ select حذف نمی‌شود — فرمِ ووکامرس مقدارش را می‌خواند. فقط از
   چشم پنهان است، نه از صفحه‌کلید و نه از فرم.

   اگر روزی فرم را چیزی جز ویجت چاپ کند، اسکریپت همین کلاس را خودش
   می‌گذارد و رفتار عوض نمی‌شود. */
.nb-atc select.nb-hidden-select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}


/* ---------- دکمه‌ی خرید ---------- */

.nb-atc .single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* گشاده‌تر از قبل. با حبابِ قیمت روی دکمه، فاصله‌ی ۹ پیکسلی همه‌چیز
	   را به هم می‌چسباند و دکمه شلوغ دیده می‌شود.
	   flex-wrap برای دکمه‌های باریک است: به‌جای فشرده‌شدنِ متن، قیمت
	   می‌رود خط دوم. */
	flex-wrap: wrap;
	gap: 6px 14px;
	min-height: 54px;
	padding: 13px 20px;
	border-radius: 12px;
	background: #4f46e5;
	color: #fff;
	border: 0;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
	position: relative;
	transition: background .18s ease, transform .12s ease, box-shadow .18s ease, opacity .18s ease;
}

.nb-atc .single_add_to_cart_button:hover {
	background: #4338ca;
	box-shadow: 0 6px 18px rgba(79, 70, 229, .28);
	transform: translateY(-1px);
}

/* فشرده‌شدنِ دکمه زیر انگشت — بازخوردِ لمسی که نبودش باعث می‌شود
   کاربر دو بار بزند. */
.nb-atc .single_add_to_cart_button:active {
	transform: translateY(0);
	box-shadow: none;
}

.nb-atc .single_add_to_cart_button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .25), 0 0 0 6px rgba(79, 70, 229, .45);
}

/* ---- حالتِ «هنوز گزینه‌ای انتخاب نشده» ----
   ووکامرس این کلاس‌ها را خودش می‌گذارد. بدون استایلِ روشن، دکمه فقط
   «کارنکن» به نظر می‌رسد و کاربر نمی‌فهمد باید اول گزینه را بزند. */
.nb-atc .single_add_to_cart_button.disabled,
.nb-atc .single_add_to_cart_button.wc-variation-selection-needed,
.nb-atc .single_add_to_cart_button[disabled] {
	background: rgba(255, 255, 255, .06);
	color: rgba(255, 255, 255, .55);
	box-shadow: none;
	transform: none;
	cursor: not-allowed;
}

.nb-atc .single_add_to_cart_button.disabled:hover,
.nb-atc .single_add_to_cart_button.wc-variation-selection-needed:hover,
.nb-atc .single_add_to_cart_button[disabled]:hover {
	background: rgba(255, 255, 255, .08);
	box-shadow: none;
	transform: none;
}

/* ---- قیمت روی دکمه ---- */

.nb-atc__inner {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.nb-atc__price {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-weight: 700;
	font-size: .92em;
	border-radius: 999px;
	padding: 5px 12px;
	background: rgba(255, 255, 255, .14);
	color: inherit;
}

.nb-atc__price.is-empty {
	display: none;
}

/* «انتهای دکمه، جدا از متن»: متن یک سر، قیمت سرِ دیگر. */
.nb-atc--price-edge .single_add_to_cart_button {
	justify-content: space-between;
	gap: 14px;
}

/* روی دکمه‌ی غیرتمام‌عرض، فاصله‌ی دو سر بی‌معنا می‌شود چون دکمه
   اندازه‌ی محتواست؛ آنجا کنار هم می‌نشینند. */
.nb-atc--price-edge:not(.nb-atc--btn-full) .single_add_to_cart_button {
	justify-content: center;
}

.nb-atc--price-inline .single_add_to_cart_button {
	justify-content: center;
}

.nb-atc--price-inline .nb-atc__price {
	background: none;
	padding: 0;
	margin-inline-start: 2px;
}

.nb-atc--price-inline .nb-atc__price::before {
	content: "—";
	opacity: .5;
	margin-inline-end: 6px;
}

.nb-atc--btn-full .single_add_to_cart_button {
	width: 100%;
}

/* تعداد و دکمه در یک ردیف.
   form.cart برای محصول متغیر خودِ فرمِ بزرگ است و شامل جدول ویژگی‌ها
   هم می‌شود؛ اگر آن را فلکس کنیم کل چیدمان به‌هم می‌ریزد. پس فقط
   بخش خرید هدف گرفته می‌شود. */
.nb-atc--qty-inline .woocommerce-variation-add-to-cart,
.nb-atc--qty-inline form.cart:not(.variations_form) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.nb-atc--qty-inline.nb-atc--btn-full .single_add_to_cart_button {
	flex: 1;
	width: auto;
}

.nb-atc--qty-inline .quantity {
	flex: none;
	margin: 0;
}

.nb-atc__icon {
	display: inline-flex;
	line-height: 1;
}

.nb-atc__icon svg {
	display: block;
	width: 1em;
	height: 1em;
}


/* ---------- سوییچ‌های نمایش ---------- */

/* ---------- قیمت متغیر ----------
   ووکامرس قیمت قدیم را در <del> و جدید را در <ins> می‌گذارد. بدون
   تفکیک، هر دو هم‌رنگ و هم‌اندازه‌اند و چشم نمی‌تواند از هم جدایشان
   کند. اینها فقط پیش‌فرض‌اند؛ همه‌شان از پنل قابل تغییرند. */

.nb-atc .woocommerce-variation-price .price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 9px;
}

.nb-atc .woocommerce-variation-price del {
	font-size: .8em;
	opacity: .5;
	text-decoration-thickness: 1px;
}

.nb-atc .woocommerce-variation-price ins {
	text-decoration: none;
	font-weight: 700;
}

.nb-atc .woocommerce-Price-currencySymbol {
	font-size: .72em;
	opacity: .75;
	margin-inline-start: 3px;
}

.nb-atc--vprice-stack .woocommerce-variation-price .price {
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.nb-atc--no-old-price .woocommerce-variation-price del { display: none }

.nb-atc--no-labels table.variations th.label { display: none }
.nb-atc--no-reset .reset_variations { display: none }
/* ---- خاموش‌کردنِ «فیلد تعداد» ----
   دو کلاس روی یک عنصر (.nb-atc.nb-atc--no-qty) عمدی است، نه تزئین.

   رقیبش در cart.css این است: `.quantity:not(.hidden){display:inline-flex
   !important}`. هر دو important اند و وزنشان با `.nb-atc--no-qty
   .quantity` دقیقاً برابر می‌شد (۰,۲,۰)، پس تصمیم می‌افتاد گردنِ ترتیبِ
   بارگذاری — و اندازه‌گیری روی nebolar.com نشان داد atc.css *زودتر* از
   cart.css می‌آید، یعنی رقیب برنده می‌شد و تیکِ پنل بی‌اثر بود.
   با کلاسِ دوم وزن می‌شود ۰,۳,۰ و دیگر به ترتیب کاری ندارد. */
.nb-atc.nb-atc--no-qty .quantity { display: none !important }

/* ---- «فروش تکی» ----
   وقتی محصول تکی‌فروش است (یا کمینه و بیشینه برابرند)، ووکامرس ورودی
   تعداد را type="hidden" می‌کند ولی خودِ کادر و هوک‌های دو طرفش سرِ
   جایشان می‌مانند. نتیجه: قرصِ خالیِ تعداد با دکمه‌های − و + که هیچ
   عددی بینشان نیست. اینجا کل کادر برداشته می‌شود. */
.nb-atc .quantity:not(:has(input[type="number"])) {
	display: none !important;
}
/* دو کلاس، به همان دلیلِ بالا: هم important و هم وزنِ بیشتر، تا
   قاعده‌ی قالب یا ووکامرس در هیچ ترتیبی برنده نشود. */
.nb-atc.nb-atc--no-vprice .woocommerce-variation-price { display: none !important }


/* ==========================================================================
   سواچ‌ها — حالت انتخاب، اندازه، و متغیرهای ناموجود
   ==========================================================================
   سه ایراد که مالک دید:

   ۱. هر سواچ زمینه‌ی بنفشِ پرشده داشت و حالت فعال فقط بنفشِ تیره‌تر
      بود. یعنی همه‌ی گزینه‌ها «انتخاب‌شده» به‌نظر می‌رسیدند و معلوم
      نبود کدام واقعاً فعال است. حالا گزینه‌ی خاموش سطحِ ساده است و فقط
      انتخاب‌شده رنگِ برند می‌گیرد.
   ۲. رنگ‌ها هاردکد بودند (#7c3aed و مانندش)، پس با عوض‌کردنِ رنگ برند
      در پنل همراه نمی‌شدند.
   ۳. گزینه‌ی ناموجود خاکستری ولی همچنان دیده می‌شد. حالا اصلاً چاپ
      نمی‌شود — متغیرِ ناموجود را ماژول NB_T_Variations از داده‌ی فرم
      بیرون می‌گذارد و این هم باقی‌مانده‌های سمتِ کاربر را برمی‌دارد.
   ========================================================================== */

.nb-atc .nb-swatch {
	padding: 7px 14px;
	border: 1px solid var( --nb-border, #242c42 );
	border-radius: var( --nb-radius-sm, 8px );
	background: var( --nb-surface, #131829 );
	color: var( --nb-text, #ededed );
	font-size: 13px;
	font-weight: 600;
}

.nb-atc .nb-swatch:hover:not( .is-disabled ):not( .is-active ) {
	background: var( --nb-surface-alt, #1a2033 );
	border-color: var( --nb-accent, #720eec );
	color: var( --nb-text, #ededed );
}

/*
 * حالتِ انتخاب‌شده با حلقه مشخص می‌شود، نه با زمینه.
 *
 * دلیلش این است که زمینه‌ی سواچ‌ها را ممکن است خودِ مالک از پنلِ
 * المنتور تعیین کرده باشد؛ روی این سایت همین‌طور است و آن قاعده
 * (.elementor-279 .elementor-element-…) وزنِ بسیار بالاتری دارد. شکستنش
 * فقط با !important ممکن بود، یعنی از کار انداختنِ تنظیمی که خودش
 * گذاشته.
 *
 * box-shadow و font-weight را آن قاعده تعیین نمی‌کند، پس حلقه در هر
 * رنگی که او انتخاب کند دیده می‌شود — چه زمینه بنفش باشد چه هر چیز
 * دیگر.
 */
.nb-atc .nb-swatch.is-active {
	background: var( --nb-accent, #720eec );
	border-color: var( --nb-accent, #720eec );
	color: var( --nb-acc-fg, #fff );
	font-weight: 800;
	box-shadow:
		0 0 0 2px var( --nb-bg, #070f1c ),
		0 0 0 4px var( --nb-accent, #720eec );
}

/* گزینه‌ی انتخاب‌نشده کم‌رنگ‌تر است تا انتخاب‌شده جلو بزند — این هم
   opacity است، نه زمینه، پس با تنظیمات المنتور نمی‌جنگد. */
.nb-atc .nb-swatches .nb-swatch:not( .is-active ) {
	opacity: 0.62;
}

.nb-atc .nb-swatches .nb-swatch:not( .is-active ):hover {
	opacity: 1;
}

.nb-atc .nb-swatch:focus-visible {
	outline: 2px solid var( --nb-accent, #720eec );
	outline-offset: 2px;
}

/*
 * ناموجود = نمایش داده نشود.
 *
 * لایه‌ی دوم است، نه لایه‌ی اول: کارِ اصلی را فیلترِ
 * woocommerce_variation_is_active انجام می‌دهد تا گزینه اصلاً در داده‌ی
 * فرم نباشد. این برای حالت‌هایی است که ووکامرس گزینه را نگه می‌دارد
 * ولی غیرقابل انتخاب می‌کند.
 */
.nb-atc .nb-swatch.is-disabled {
	display: none;
}

/* اگر از یک ویژگی هیچ گزینه‌ای نماند، برچسبش هم بی‌معنی است. */
.nb-atc .nb-swatches:not( :has( .nb-swatch:not( .is-disabled ) ) ) {
	display: none;
}


/* متنِ داخل فرم یک پله کوچک‌تر تا با ورودی‌ها هم‌مقیاس شود. */
.nb-atc .nb-swatch {
	font-size: 12.5px;
}

.nb-atc label,
.nb-atc .nb-atc__label,
.nb-atc .variations label {
	font-size: 12px;
}

.nb-atc .woocommerce-variation-description,
.nb-atc .woocommerce-variation-description p,
.woocommerce-variation-description,
.woocommerce-variation-description p {
	font-size: 12px;
	line-height: 1.85;
	margin-block: 0;
}

.nb-atc .reset_variations {
	font-size: 11.5px;
}

/*
 * همان اندازه‌ها، این‌بار مقید به form.cart نه .nb-atc.
 *
 * قاعده‌های بالا فرض می‌کردند فرم داخل ویجت است. روی صفحه‌ی محصولِ
 * معمولی این‌طور نیست و اندازه‌ها دست‌نخورده می‌ماندند: برچسبِ ویژگی
 * ۱۴ پیکسل و «پاک کردن» ۱۳٫۳ در کنارِ ورودی‌های ۱۳ پیکسلی.
 */
.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart .variations th label,
form.cart .variations label {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
	margin-block-end: 4px;
}

.woocommerce div.product form.cart a.reset_variations,
form.cart a.reset_variations {
	font-size: 11.5px;
}

.woocommerce div.product form.cart .nb-swatch,
form.cart .nb-swatch {
	font-size: 12.5px;
}

/* ردیف‌های جدولِ ویژگی‌ها هم فشرده‌تر. */
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	padding-block: 3px;
}

/* پیشوندِ نشانه‌ای به متنِ دکمه می‌چسبد — «ثبت سفارش: ۲۱۸ تومان». */
.nb-atc .nb-atc__price--tight[data-layout="inline"] {
	margin-inline-start: 0;
}


/*
 * عوض‌شدنِ متنِ متغیر (atc.js). ۰.۷۵.۹: فقط *متنِ داخلِ* کادرِ توضیح محو و پیدا
 * می‌شود، نه خودِ کادر؛ کادر سرِ جایش می‌ماند و فقط قد می‌کشد.
 *   nb-var-out — گزینه عوض شده و ووکامرس هنوز متنِ تازه را نگذاشته: متنِ قبلی می‌رود.
 *   nb-var-in  — متنِ تازه نشسته: کمی بعد از شروعِ قدکشیدن پیدا می‌شود.
 */
.nb-atc .woocommerce-variation.nb-var-out .woocommerce-variation-description > * {
	opacity: 0;
	transition: opacity .18s ease;
}

.nb-atc .woocommerce-variation.nb-var-in .woocommerce-variation-description > * {
	animation: nb-var-in .26s ease .08s both;
}

@keyframes nb-var-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.nb-atc .woocommerce-variation.nb-var-out .woocommerce-variation-description > *,
	.nb-atc .woocommerce-variation.nb-var-in .woocommerce-variation-description > * {
		animation: none;
		transition: none;
	}
}