/**
 * استایل پنل گزینه‌ها در صفحه محصول و صفحه سبد خرید.
 *
 * قواعد الزامی (نگاه کنید به CLAUDE.md):
 *   • فونت همیشه `var(--secnc-font)` — هیچ font-family مستقیمی.
 *   • رنگ‌ها از متغیرهای قالب Datis با fallback می‌آیند تا با تغییر رنگ
 *     قالب، افزونه خودکار هماهنگ بماند.
 *   • اندازه‌ها (radius، ارتفاع، فاصله) از باکس خرید قالب گرفته شده‌اند.
 *
 * @package SECNC_Product_Options
 */

/* ---------------------------------------------------------------------------
 * توکن‌های محلی — برگرفته از دیزاین قالب Datis
 * ------------------------------------------------------------------------- */

.secnc-options {
	/* رنگ‌های قالب با fallback به مقادیر پیش‌فرض تم. */
	--secnc-brand: var(--datis-secondary-color, #0b9444);
	--secnc-accent: var(--datis-primary-color, #a4834e);
	--secnc-text: var(--datis-body-text-color, #333);

	/* رنگ‌های ساختاری باکس خرید قالب. */
	--secnc-text-strong: #04142f;
	--secnc-text-muted: rgba(11, 61, 145, 0.6);
	--secnc-line: rgba(11, 61, 145, 0.2);
	--secnc-line-soft: rgba(11, 61, 145, 0.12);
	/*
	 * سطح ورودی‌ها عمداً از `--datis-body-bg-color` می‌آید، نه از
	 * `--datis-partially-color`. رنگ «partially» در تنظیمات قالب آزادانه
	 * تغییر می‌کند و اگر مدیر سایت آن را تیره بگذارد، متن تیره ورودی‌ها روی
	 * پس‌زمینه تیره نامرئی می‌شود. پس‌زمینه بدنه همیشه با رنگ متن بدنه
	 * کنتراست دارد، پس خوانایی در هر پیکربندی قالب حفظ می‌شود.
	 */
	--secnc-surface: var(--datis-body-bg-color, #fff);
	--secnc-surface-soft: rgba(11, 61, 145, 0.04);

	/* رنگِ روی سطوح رنگی (تیک، نقطه رادیو) — همیشه هم‌رنگ سطح بدنه. */
	--secnc-on-brand: var(--datis-body-bg-color, #fff);

	--secnc-danger: var(--datis-primary-color, #a4834e);
	--secnc-danger-soft: rgba(164, 131, 78, 0.1);

	/* اندازه‌ها، هم‌راستا با باکس خرید قالب. */
	--secnc-radius: 12px;
	--secnc-radius-lg: 16px;
	--secnc-gap: 14px;
}

/* ---------------------------------------------------------------------------
 * چیدمان: پنل باید یک ردیف کامل داخل فرم فلکسی قالب بگیرد
 * ------------------------------------------------------------------------- */

/*
 * فرم افزودن به سبد در قالب Datis یک ردیف فلکس بدون wrap است. با فعال کردن
 * wrap و دادن عرض کامل به پنل، پنل بالای کنترل تعداد قرار می‌گیرد بدون
 * اینکه چیدمان دکمه و تعداد به هم بریزد.
 */
.product-layout-purchase form.cart:has(.secnc-options),
form.cart.secnc-has-options {
	flex-wrap: wrap;
}

.secnc-options {
	flex: 0 0 100%;
	inline-size: 100%;
	box-sizing: border-box;
	margin-block-end: 18px;
	font-family: var(--secnc-font);
	color: var(--secnc-text);
	text-align: start;
}

/* در حالت پیش‌فرض، پنل باید *قبل* از کنترل تعداد دیده شود. */
.secnc-options[data-secnc-position="before_add_to_cart"] {
	order: -1;
}

/* وقتی پنل با JS به بیرون از باکس خرید منتقل شده باشد. */
.secnc-options.is-relocated {
	margin-block: 20px;
	padding: 20px;
	border-radius: 18px;
	background: rgba(11, 61, 145, 0.06);
}

.secnc-options__title {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.8;
	color: var(--secnc-text-strong);
}

.secnc-options__fields {
	display: flex;
	flex-direction: column;
	gap: var(--secnc-gap);
}

/* ---------------------------------------------------------------------------
 * فیلد و برچسب
 * ------------------------------------------------------------------------- */

.secnc-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/*
 * فیلد مشروط تا ارزیابی JS پنهان است تا پرش بصری رخ ندهد.
 *
 * `!important` عمدی است: قاعده‌های عمومی قالب (مثل `.product-purchase * {display:block}`)
 * می‌توانند فیلدِ شرط‌نابرقرار را دوباره نمایان کنند. کلاس `is-visible` را
 * `frontend.js` فقط وقتی می‌گذارد که شرط برقرار باشد.
 */
.secnc-field--conditional:not(.is-visible) {
	display: none !important;
}

.secnc-field.is-visible {
	display: flex;
	animation: secnc-reveal 0.22s ease;
}

@keyframes secnc-reveal {

	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* احترام به تنظیم کاهش حرکت کاربر. */
@media (prefers-reduced-motion: reduce) {

	.secnc-field.is-visible {
		animation: none;
	}
}

.secnc-field__label {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.8;
	color: var(--secnc-text-strong);
}

.secnc-field__required {
	color: var(--secnc-danger);
	font-weight: 700;
}

.secnc-field__description {
	margin: 0;
	font-size: 12px;
	line-height: 1.9;
	color: var(--secnc-text-muted);
}

.secnc-field__error {
	margin: 0;
	font-size: 12px;
	line-height: 1.8;
	color: var(--secnc-danger);
}

.secnc-field.has-error .secnc-input,
.secnc-field.has-error .secnc-choice {
	border-color: var(--secnc-danger);
}

.secnc-heading {
	margin: 6px 0 0;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--secnc-line-soft);
	font-size: 14px;
	font-weight: 600;
	color: var(--secnc-text-strong);
}

.secnc-heading__text {
	margin-block-start: 4px;
	font-size: 12px;
	line-height: 1.9;
	color: var(--secnc-text-muted);
}

/* ---------------------------------------------------------------------------
 * برچسب قیمت
 * ------------------------------------------------------------------------- */

.secnc-price-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--secnc-brand) 12%, transparent);
	color: var(--secnc-brand);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

/* مرورگرهای بدون color-mix — رنگ ملایم ثابت. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {

	.secnc-price-tag {
		background: rgba(11, 148, 68, 0.12);
	}
}

.secnc-price-tag .woocommerce-Price-currencySymbol {
	margin-inline-start: 2px;
	font-size: 11px;
	font-weight: 400;
}

/* ---------------------------------------------------------------------------
 * ورودی‌های متنی
 * ------------------------------------------------------------------------- */

.secnc-options .secnc-input {
	inline-size: 100%;
	box-sizing: border-box;
	min-block-size: 46px;
	padding: 10px 14px;
	border: 1px solid var(--secnc-line);
	border-radius: var(--secnc-radius);
	background: var(--secnc-surface);
	color: var(--secnc-text-strong);
	font-family: var(--secnc-font);
	font-size: 14px;
	line-height: 1.7;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.secnc-options .secnc-input:focus {
	border-color: var(--secnc-brand);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--secnc-brand) 15%, transparent);
	outline: 2px solid transparent;
}

.secnc-options .secnc-input::placeholder {
	color: var(--secnc-text-muted);
	opacity: 0.75;
}

.secnc-options .secnc-textarea {
	min-block-size: 88px;
	resize: vertical;
}

/*
 * دراپ‌داون فهرست گزینه‌ها را با ویجت بومی مرورگر رندر می‌کند و در کروم و
 * فایرفاکس رنگ متن و پس‌زمینه را از خودِ `select` به ارث می‌برد. تعیین صریح
 * این دو روی `option` تضمین می‌کند که در هر پیکربندی رنگ قالب، متن گزینه‌ها
 * خوانا بماند. `color-scheme` هم فلش بومی را با تم روشن هماهنگ می‌کند.
 */
.secnc-options .secnc-select {
	color-scheme: light;
	/* جای خالی برای فلش بومی تا متن گزینه زیر آن نرود. */
	padding-inline-end: 32px;
}

.secnc-options .secnc-select option {
	background: var(--secnc-surface);
	color: var(--secnc-text-strong);
}

.secnc-options select.secnc-select[multiple] {
	min-block-size: 120px;
	padding: 8px;
}

/* ---------------------------------------------------------------------------
 * چک‌باکس و رادیو
 * ------------------------------------------------------------------------- */

.secnc-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.secnc-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--secnc-line);
	border-radius: var(--secnc-radius);
	background: var(--secnc-surface);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.secnc-choice:hover {
	border-color: color-mix(in srgb, var(--secnc-brand) 45%, var(--secnc-line));
}

/* حالت انتخاب‌شده — با کلاس از سمت JS اعمال می‌شود. */
.secnc-choice.is-checked {
	border-color: var(--secnc-brand);
	background: color-mix(in srgb, var(--secnc-brand) 6%, var(--secnc-surface));
}

/* ورودی اصلی پنهان می‌شود ولی برای صفحه‌خوان و کیبورد فعال می‌ماند. */
.secnc-choice__input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.secnc-choice__mark {
	position: relative;
	flex: 0 0 auto;
	inline-size: 20px;
	block-size: 20px;
	border: 1.5px solid var(--secnc-line);
	border-radius: 6px;
	background: var(--secnc-surface);
	transition: all 0.2s ease;
}

.secnc-choice--radio .secnc-choice__mark {
	border-radius: 50%;
}

/* علامت تیک با شبه‌عنصر ساخته می‌شود تا نیازی به تصویر نباشد. */
.secnc-choice__mark::after {
	content: "";
	position: absolute;
	inset-block-start: 3px;
	inset-inline-start: 6px;
	inline-size: 5px;
	block-size: 9px;
	border: solid var(--secnc-on-brand);
	border-width: 0 2px 2px 0;
	opacity: 0;
	transform: rotate(45deg) scale(0.6);
	transition: all 0.15s ease;
}

.secnc-choice--radio .secnc-choice__mark::after {
	inset-block-start: 50%;
	inset-inline-start: 50%;
	inline-size: 8px;
	block-size: 8px;
	border: 0;
	border-radius: 50%;
	background: var(--secnc-on-brand);
	transform: translate(50%, -50%) scale(0.6);
}

.secnc-choice.is-checked .secnc-choice__mark {
	border-color: var(--secnc-brand);
	background: var(--secnc-brand);
}

.secnc-choice.is-checked .secnc-choice__mark::after {
	opacity: 1;
	transform: rotate(45deg) scale(1);
}

.secnc-choice--radio.is-checked .secnc-choice__mark::after {
	transform: translate(50%, -50%) scale(1);
}

/* حلقه فوکوس برای پیمایش با کیبورد. */
.secnc-choice__input:focus-visible + .secnc-choice__mark {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--secnc-brand) 25%, transparent);
}

.secnc-choice__label {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.8;
	color: var(--secnc-text-strong);
}

/* ---------------------------------------------------------------------------
 * ناحیه آپلود
 * ------------------------------------------------------------------------- */

.secnc-upload__dropzone {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-block-size: 118px;
	padding: 18px 14px;
	border: 2px dashed var(--secnc-line);
	border-radius: var(--secnc-radius-lg);
	background: var(--secnc-surface-soft);
	color: var(--secnc-text-muted);
	text-align: center;
	cursor: pointer;
	transition: all 0.2s ease;
}

.secnc-upload__dropzone:hover,
.secnc-upload__dropzone:focus-visible {
	border-color: var(--secnc-brand);
	background: color-mix(in srgb, var(--secnc-brand) 5%, transparent);
	outline: 2px solid transparent;
}

/* هنگام کشیدن فایل روی ناحیه. */
.secnc-upload__dropzone.is-dragover {
	border-color: var(--secnc-brand);
	border-style: solid;
	background: color-mix(in srgb, var(--secnc-brand) 9%, transparent);
	transform: scale(1.01);
}

.secnc-upload__icon {
	color: var(--secnc-brand);
	opacity: 0.85;
}

.secnc-upload__title {
	font-size: 14px;
	font-weight: 500;
	color: var(--secnc-text-strong);
}

.secnc-upload__hint {
	font-size: 11px;
	line-height: 1.9;
	color: var(--secnc-text-muted);
}

/* ظرف پنهان توکن‌ها — ورودی‌های مخفی داخلش قرار می‌گیرند. */
.secnc-upload__tokens {
	display: none;
}

.secnc-upload__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-block-start: 10px;
}

.secnc-upload__list:empty {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------------------
 * ردیف فایل آپلودشده
 * ------------------------------------------------------------------------- */

.secnc-file {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--secnc-line);
	border-radius: var(--secnc-radius);
	background: var(--secnc-surface);
}

.secnc-file.is-uploading {
	border-style: dashed;
}

.secnc-file.has-error {
	border-color: var(--secnc-danger);
	background: var(--secnc-danger-soft);
}

.secnc-file__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 34px;
	block-size: 34px;
	border-radius: 9px;
	background: color-mix(in srgb, var(--secnc-brand) 10%, transparent);
	color: var(--secnc-brand);
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
}

.secnc-file__info {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.secnc-file__name {
	display: block;
	overflow: hidden;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--secnc-text-strong);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.secnc-file__meta {
	display: block;
	font-size: 11px;
	color: var(--secnc-text-muted);
}

.secnc-file__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 28px;
	block-size: 28px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--secnc-text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: all 0.2s ease;
}

.secnc-file__remove:hover {
	background: var(--secnc-danger-soft);
	color: var(--secnc-danger);
}

/* نوار پیشرفت آپلود. */
.secnc-file__progress {
	block-size: 4px;
	margin-block-start: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--secnc-line-soft);
}

.secnc-file__progress-bar {
	block-size: 100%;
	inline-size: 0;
	border-radius: inherit;
	background: var(--secnc-brand);
	transition: width 0.2s ease;
}

/* ---------------------------------------------------------------------------
 * خلاصه قیمت زنده
 * ------------------------------------------------------------------------- */

.secnc-summary {
	--secnc-brand: var(--datis-secondary-color, #0b9444);
	--secnc-text-strong: #04142f;
	--secnc-text-muted: rgba(11, 61, 145, 0.6);
	--secnc-line: rgba(11, 61, 145, 0.2);
	--secnc-line-soft: rgba(11, 61, 145, 0.12);

	flex: 0 0 100%;
	inline-size: 100%;
	box-sizing: border-box;
	margin-block-start: 14px;
	padding-block-start: 12px;
	border-block-start: 1px solid var(--secnc-line);
	font-family: var(--secnc-font);
}

.secnc-summary__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: 13px;
	line-height: 2;
	color: var(--secnc-text-muted);
}

.secnc-summary__row--total {
	margin-block-start: 4px;
	padding-block-start: 8px;
	border-block-start: 1px dashed var(--secnc-line-soft);
	font-size: 15px;
	font-weight: 600;
	color: var(--secnc-text-strong);
}

.secnc-summary__value {
	font-weight: 600;
	color: var(--secnc-brand);
	white-space: nowrap;
}

.secnc-summary__row--total .secnc-summary__value {
	color: var(--secnc-text-strong);
}

/* ---------------------------------------------------------------------------
 * تزریق گزینه‌ها در صفحه سبد خرید
 *
 * قالب Datis صفحه سبد را بازنویسی کرده و هوک per-item ندارد، بنابراین این
 * بلوک با JS **به‌عنوان فرزند مستقیم ردیف قلم** درج می‌شود.
 *
 * ردیف قلم در قالب `d-flex align-items-center` است. کلاس زیر آن را
 * `flex-wrap: wrap` می‌کند تا بلوک تمام‌عرض ما به خط بعد برود؛ بدون این کار
 * بلوک کنار قیمت می‌نشیند و کل ردیف را می‌شکند. کلاس را خود JS می‌گذارد تا
 * به پشتیبانی مرورگر از `:has()` وابسته نباشیم.
 * ------------------------------------------------------------------------- */

.cart-item.secnc-cart-item--has-options {
	flex-wrap: wrap;
}

.secnc-cart-options {
	flex: 1 0 100%;
	inline-size: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 18px;
	margin-block-start: 10px;
	padding-block: 8px;
	padding-inline-start: 10px;
	border-inline-start: 2px solid var(--secnc-line, rgba(11, 61, 145, 0.15));
	font-family: var(--secnc-font);

	/* متن‌های بلندِ برچسب نباید ردیف را از عرض بیرون بزنند. */
	overflow-wrap: anywhere;
	text-align: start;
}

.secnc-cart-options__item {
	font-size: 12px;
	line-height: 1.9;
	color: var(--datis-body-text-color, #333333);
	opacity: 0.85;

	/* هر گزینه حداقل یک ستون خوانا بگیرد و در موبایل تمام‌عرض شود. */
	flex: 1 1 220px;
	max-inline-size: 100%;
}

.secnc-cart-options__label {
	font-weight: 500;
	opacity: 0.75;
}

.secnc-cart-options__value {
	font-weight: 600;
}

@media screen and (max-width: 575px) {

	.secnc-cart-options__item {
		flex-basis: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * واکنش‌گرایی
 * ------------------------------------------------------------------------- */

@media screen and (max-width: 991px) {

	.secnc-options {
		margin-block-end: 14px;
	}

	.secnc-upload__dropzone {
		min-block-size: 100px;
	}
}