/* =========================================================
   NW Product Specs — استایل فرانت‌اند
   اصول: BEM، RTL، Mobile-First، ارث‌بری فونت پوسته، CSS logical properties
   ========================================================= */

/* همه عناصر افزونه فونت پوسته را به ارث می‌برند */
.nw-filter,
.nw-filter *,
.nw-specs,
.nw-specs * {
	font: inherit;
	font-family: inherit;
	box-sizing: border-box;
}

:root {
	--nw-primary: #F5A623;
	--nw-primary-text: #ffffff;
	--nw-border: #e3e3e3;
	--nw-bg: #ffffff;
	--nw-bg-soft: #f7f7f7;
	--nw-text: #2b2b2b;
	--nw-muted: #888;
	--nw-radius: 10px;
}

/* ---------------------------------------------------------
   پالت تازه و کمی متفاوتِ ویجت فیلتر (محدود به خود فیلتر،
   تا جدول مشخصات صفحه محصول دست‌نخورده بماند)
   --------------------------------------------------------- */
.nw-filter,
.nw-shop-layout__sidebar {
	--nw-fl-accent: #e8740f;        /* نارنجی عمیق‌تر — کمی متفاوت با برند */
	--nw-fl-accent-2: #f5a623;      /* امبر برند */
	--nw-fl-grad: linear-gradient(135deg, #f7ad33 0%, #e8740f 100%);
	--nw-fl-soft: #fff8ef;          /* پس‌زمینهٔ گرم ملایم */
	--nw-fl-border: #ecdcc4;        /* مرز گرم */
	--nw-fl-chip-bg: #fbf4ea;
	--nw-fl-text: #2b2b2b;
	--nw-fl-muted: #9a8a76;
}

/* ---------------------------------------------------------
   ویجت فیلتر — پایه موبایل (Mobile-First)
   --------------------------------------------------------- */
.nw-filter {
	direction: rtl;
	margin-block-end: 20px;
	/* فونت کمی کوچک‌تر از پوسته تا فیلتر جمع‌وجورتر شود (همه فرزندها font:inherit دارند) */
	font-size: 0.88em;
}

/* دکمه باز کردن فیلتر در موبایل */
.nw-filter__mobile-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	inline-size: 100%;
	justify-content: center;
	padding-block: 12px;
	padding-inline: 16px;
	background: var(--nw-fl-grad, var(--nw-primary));
	color: var(--nw-primary-text);
	border: none;
	border-radius: var(--nw-radius);
	cursor: pointer;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(232, 116, 15, 0.25);
}

.nw-filter__mobile-toggle-icon {
	font-size: 1.1em;
}

/* پوشش پس‌زمینه off-canvas */
.nw-filter__overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease;
	z-index: 9998;
}

/* پنل کشویی (off-canvas) در موبایل */
.nw-filter__panel {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0; /* در RTL یعنی سمت چپ → از چپ وارد می‌شود */
	inline-size: 86%;
	max-inline-size: 360px;
	background: var(--nw-bg);
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
	z-index: 9999;
	overflow-y: auto;
	padding: 16px;
	/* اسکرول‌بار سمت راست در پنل موبایل */
	direction: ltr;
}

/* محتوای داخل پنل دوباره RTL */
.nw-filter__header,
.nw-filter__form {
	direction: rtl;
}

/* در RTL پنل از سمت راست می‌آید؛ با logical شروع از start بهتر است */
[dir="rtl"] .nw-filter__panel {
	inset-inline-start: auto;
	inset-inline-end: 0;
	transform: translateX(100%);
}

.nw-filter--open .nw-filter__overlay {
	opacity: 1;
	visibility: visible;
}

.nw-filter--open .nw-filter__panel {
	transform: translateX(0);
}

body.nw-filter-lock {
	overflow: hidden;
}

.nw-filter__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-block-end: 1px solid var(--nw-border);
	padding-block-end: 12px;
	margin-block-end: 12px;
}

.nw-filter__title {
	margin: 0;
	font-weight: 800;
	color: var(--nw-text);
}

.nw-filter__close {
	background: none;
	border: none;
	font-size: 1.6em;
	line-height: 1;
	cursor: pointer;
	color: var(--nw-muted);
}

/* گروه فیلتر */
.nw-filter__group {
	padding-block: 14px;
	border-block-end: 1px solid var(--nw-fl-border, var(--nw-border));
}

.nw-filter__group-title {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--nw-fl-text, var(--nw-text));
	font-size: 1em;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* نشانگر کوچک کنار عنوان گروه */
.nw-filter__group-title::before {
	content: "";
	inline-size: 4px;
	block-size: 16px;
	border-radius: 4px;
	background: var(--nw-fl-grad, var(--nw-primary));
	flex: 0 0 auto;
}

.nw-filter__unit {
	color: var(--nw-muted);
	font-weight: 400;
	font-size: 0.85em;
}

/* ---------------------------------------------------------
   آکاردئون گروه فیلتر (جمع/باز) — تزریق با JS
   --------------------------------------------------------- */
/* عنوان گروه وقتی به دکمهٔ جمع/باز تبدیل می‌شود */
.js-nw-group-toggle {
	cursor: pointer;
	user-select: none;
	margin-block-end: 0;
}

.nw-group-enhanced .nw-filter__group-title {
	margin-block-end: 0;
}

/* فلش جمع/باز در انتهای عنوان */
.nw-filter__group-chevron {
	inline-size: 8px;
	block-size: 8px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg); /* رو به پایین = باز */
	transition: transform 0.2s ease;
	margin-inline-start: auto;
	margin-block-start: -2px;
	opacity: 0.5;
	flex: 0 0 auto;
}

.nw-filter__group.is-collapsed .nw-filter__group-chevron {
	transform: rotate(-45deg); /* رو به کنار = جمع */
}

/* بدنهٔ گروه — جمع‌شونده (فقط ارتفاع انیمیت می‌شود؛ بدون محوشدگی) */
.nw-filter__group-body {
	overflow: hidden;
	max-block-size: 2000px;
	transition: max-block-size 0.3s ease;
	margin-block-start: 10px;
}

.nw-filter__group.is-collapsed .nw-filter__group-body {
	max-block-size: 0;
	margin-block-start: 0;
}

/* جعبهٔ جستجوی داخل هر فیلتر.
   نکتهٔ جهت: سایدبار در دسکتاپ کانتکست LTR دارد (برای اسکرول‌بار)؛ بنابراین
   مختصات منطقی (inline-start) ناپایدار است. اینجا عمداً از مختصات فیزیکی
   (right) استفاده می‌کنیم تا آیکون همیشه سمت راست و جدا از متن بماند. */
.nw-filter__search {
	position: relative;
	margin-block-end: 10px;
}

/* اسکوپ‌شده با .nw-filter تا استایل ورودی‌های پوسته (Blocksy) پدینگِ
   محل آیکون را کوچک نکند و متن روی ذره‌بین نیفتد. */
.nw-filter .nw-filter__search-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	/* بالا | راست (جای آیکون) | پایین | چپ */
	padding: 8px 40px 8px 12px;
	border: 1px solid var(--nw-fl-border, var(--nw-border));
	border-radius: 8px;
	background: var(--nw-bg);
	color: var(--nw-fl-text, var(--nw-text));
	font-size: 0.88em;
	direction: rtl;
	text-align: right;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nw-filter__search-input:focus {
	outline: none;
	border-color: var(--nw-fl-accent, var(--nw-primary));
	box-shadow: 0 0 0 3px rgba(232, 116, 15, 0.15);
}

/* آیکون ذره‌بین سمت راست — حلقه + دسته (شبه‌عنصر، بدون فونت آیکون) */
.nw-filter__search::before {
	content: "";
	position: absolute;
	right: 14px;
	left: auto;
	top: 50%;
	width: 11px;
	height: 11px;
	margin-top: -7px;
	border: 1.6px solid var(--nw-fl-muted, var(--nw-muted));
	border-radius: 50%;
	pointer-events: none;
}

.nw-filter__search::after {
	content: "";
	position: absolute;
	right: 13px;
	left: auto;
	top: 50%;
	width: 6px;
	height: 1.6px;
	margin-top: 4px;
	background: var(--nw-fl-muted, var(--nw-muted));
	transform: rotate(45deg);
	transform-origin: center;
	pointer-events: none;
}

/* پیام «نتیجه‌ای نیست» داخل جستجوی فیلتر */
.nw-filter__search-empty {
	color: var(--nw-fl-muted, var(--nw-muted));
	font-size: 0.85em;
	padding-block: 6px;
}

/* چیپ‌های چندانتخابی */
.nw-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.nw-filter__chip {
	cursor: pointer;
}

.nw-filter__chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.nw-filter__chip span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding-block: 8px;
	padding-inline: 14px;
	border: 1px solid var(--nw-fl-border, var(--nw-border));
	border-radius: 999px;
	background: var(--nw-fl-chip-bg, var(--nw-bg-soft));
	color: var(--nw-fl-text, var(--nw-text));
	font-size: 0.9em;
	transition: all 0.15s ease;
	/* هدف لمسی بزرگ‌تر */
	min-block-size: 40px;
}

.nw-filter__chip:hover span {
	border-color: var(--nw-fl-accent, var(--nw-primary));
	color: var(--nw-fl-accent, var(--nw-primary));
}

.nw-filter__chip input:checked + span {
	background: var(--nw-fl-grad, var(--nw-primary));
	color: var(--nw-primary-text);
	border-color: transparent;
	box-shadow: 0 3px 8px rgba(232, 116, 15, 0.28);
}

.nw-filter__chip input:focus-visible + span {
	outline: 2px solid var(--nw-fl-accent, var(--nw-primary));
	outline-offset: 2px;
}

.nw-filter__count {
	opacity: 0.7;
	font-size: 0.8em;
}

/* چک‌باکس ساده */
.nw-filter__check {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	min-block-size: 40px;
}

/* قیمت — بازه از/تا */
.nw-filter__price-inputs {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	margin-block-end: 8px;
}

.nw-filter__price-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1;
	min-inline-size: 0;
}

.nw-filter__price-label {
	font-size: 0.8em;
	color: var(--nw-fl-muted, var(--nw-muted));
}

.nw-filter__price-sep {
	color: var(--nw-fl-muted, var(--nw-muted));
	padding-block-end: 8px;
}

.nw-filter__price-input {
	inline-size: 100%;
	padding-block: 7px;
	padding-inline: 10px;
	border: 1px solid var(--nw-fl-border, var(--nw-border));
	border-radius: 8px;
	text-align: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nw-filter__price-input:focus {
	outline: none;
	border-color: var(--nw-fl-accent, var(--nw-primary));
	box-shadow: 0 0 0 3px rgba(232, 116, 15, 0.15);
}

/* اسلایدر دو-سر بازه قیمت */
.nw-filter__slider-wrap {
	position: relative;
	block-size: 24px;
	margin-block: 10px 4px;
	display: flex;
	align-items: center;
}

.nw-filter__slider-rail {
	position: absolute;
	inset-inline: 0;
	block-size: 4px;
	border-radius: 4px;
	background: var(--nw-fl-border, var(--nw-border));
}

.nw-filter__slider-fill {
	position: absolute;
	block-size: 4px;
	border-radius: 4px;
	background: var(--nw-fl-accent, var(--nw-primary));
}

/* هر دو ورودی روی هم؛ فقط دایره‌ها تعاملی‌اند */
.nw-filter__slider-wrap .nw-filter__slider {
	position: absolute;
	inset-inline: 0;
	inline-size: 100%;
	block-size: 24px;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.nw-filter__slider-wrap .nw-filter__slider::-webkit-slider-runnable-track,
.nw-filter__slider-wrap .nw-filter__slider::-moz-range-track {
	background: none;
	border: none;
}

.nw-filter__slider-wrap .nw-filter__slider::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	inline-size: 16px;
	block-size: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--nw-fl-accent, var(--nw-primary));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.nw-filter__slider-wrap .nw-filter__slider::-moz-range-thumb {
	pointer-events: auto;
	inline-size: 16px;
	block-size: 16px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--nw-fl-accent, var(--nw-primary));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.nw-filter__price-hint {
	margin-block-start: 4px;
	color: var(--nw-muted);
	font-size: 0.82em;
}

/* اکشن‌ها */
.nw-filter__actions {
	display: flex;
	gap: 10px;
	padding-block-start: 16px;
	position: sticky;
	inset-block-end: 0;
	background: var(--nw-bg);
}

.nw-filter__apply {
	flex: 1;
	padding-block: 12px;
	background: var(--nw-fl-grad, var(--nw-primary));
	color: var(--nw-primary-text);
	border: none;
	border-radius: var(--nw-radius);
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(232, 116, 15, 0.25);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.nw-filter__apply:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(232, 116, 15, 0.32);
}

.nw-filter__clear {
	flex: 1;
	padding-block: 12px;
	background: transparent;
	color: var(--nw-fl-text, var(--nw-text));
	border: 1px solid var(--nw-fl-border, var(--nw-border));
	border-radius: var(--nw-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.nw-filter__clear:hover {
	border-color: var(--nw-fl-accent, var(--nw-primary));
	color: var(--nw-fl-accent, var(--nw-primary));
}

/* حالت بارگذاری گرید محصولات */
.nw-is-loading {
	opacity: 0.45;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

/* ---------------------------------------------------------
   ویژگی‌های شاخص محصول (highlights) — داخل خلاصه محصول
   --------------------------------------------------------- */
.nw-highlights {
	direction: rtl;
	margin-block: 16px;
	padding: 14px 16px;
	border: 1px solid var(--nw-border);
	border-radius: var(--nw-radius);
	background: rgba(245, 166, 35, 0.05);
}

.nw-highlights__title {
	margin: 0 0 10px;
	font-weight: 800;
	font-size: 0.95em;
	color: var(--nw-text);
}

.nw-highlights__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

@media (min-width: 600px) {
	.nw-highlights__list {
		grid-template-columns: 1fr 1fr;
	}
}

.nw-highlights__item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	padding-block-end: 6px;
	border-block-end: 1px dashed var(--nw-border);
	font-size: 0.9em;
}

.nw-highlights__label {
	color: var(--nw-muted);
	white-space: nowrap;
}

.nw-highlights__value {
	font-weight: 700;
	color: var(--nw-text);
	text-align: start;
}

.nw-highlights__unit {
	color: var(--nw-muted);
	font-weight: 400;
	font-size: 0.85em;
}

/* ---------------------------------------------------------
   جدول مشخصات صفحه محصول — داخل تب بومی ووکامرس
   Mobile-First: آکاردئون جمع‌شونده | دسکتاپ: همه باز
   --------------------------------------------------------- */
.nw-specs {
	direction: rtl;
	margin-block: 8px;
}

/* گروه مشخصات */
.nw-specs__group {
	margin-block-end: 14px;
	border: 1px solid var(--nw-border);
	border-radius: var(--nw-radius);
	overflow: hidden;
}

/* عنوان گروه — روی موبایل دکمه‌ی آکاردئون است */
.nw-specs__group-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	inline-size: 100%;
	margin: 0;
	font-weight: 700;
	font-size: 0.95em;
	color: var(--nw-primary-text);
	background: var(--nw-primary);
	padding-block: 12px;
	padding-inline: 14px;
	border: none;
	cursor: pointer;
	text-align: start;
	font-family: inherit;
}

/* آیکون جمع/باز (chevron با شبه‌عنصر، بدون وابستگی به فونت آیکون) */
.nw-specs__group-icon {
	inline-size: 10px;
	block-size: 10px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.22s ease;
	flex: 0 0 auto;
	margin-inline-start: 8px;
}

.nw-specs__group.is-open .nw-specs__group-icon {
	transform: rotate(-135deg);
}

/* بدنه‌ی آکاردئون — روی موبایل جمع‌شونده */
.nw-specs__group-body {
	overflow: hidden;
	max-block-size: 0;
	transition: max-block-size 0.3s ease;
}

.nw-specs__group.is-open .nw-specs__group-body {
	max-block-size: 4000px;
}

.nw-specs__table {
	inline-size: 100%;
	border-collapse: collapse;
}

.nw-specs__row:nth-child(even) {
	background: var(--nw-bg-soft);
}

.nw-specs__key,
.nw-specs__value {
	padding-block: 12px;
	padding-inline: 16px;
	text-align: start;
	border-block-end: 1px solid var(--nw-border);
	vertical-align: top;
}

.nw-specs__row:last-child .nw-specs__key,
.nw-specs__row:last-child .nw-specs__value {
	border-block-end: none;
}

.nw-specs__key {
	inline-size: 40%;
	font-weight: 700;
	color: var(--nw-text);
	background: rgba(245, 166, 35, 0.06);
}

.nw-specs__value {
	color: var(--nw-text);
}

.nw-specs__unit {
	color: var(--nw-muted);
	font-size: 0.85em;
}

/* دسکتاپ/تبلت — همه گروه‌ها باز، آیکون و حالت کلیک غیرفعال */
@media (min-width: 783px) {
	.nw-specs__group-title {
		cursor: default;
	}

	.nw-specs__group-icon {
		display: none;
	}

	.nw-specs__group-body {
		max-block-size: none !important;
	}
}

/* ---------------------------------------------------------
   layout دو ستونه: سایدبار فیلتر (راست) + گرید محصولات (چپ)
   --------------------------------------------------------- */
.nw-shop-layout {
	display: block;
}

.nw-shop-layout__sidebar {
	display: block;
}

.nw-shop-layout__main {
	display: block;
	min-width: 0;
}

/* چیپ‌های لیستی (دسته‌بندی) */
.nw-filter__chips--list {
	flex-direction: column;
	gap: 6px;
}

.nw-filter__chip--list span {
	border-radius: 8px;
	inline-size: 100%;
	justify-content: space-between;
}

/* گروه دسته‌بندی — همیشه اول و کمی برجسته‌تر */
.nw-filter__group--cats {
	margin-block-end: 4px;
	padding: 14px;
	background: var(--nw-fl-soft, var(--nw-bg-soft));
	border: 1px solid var(--nw-fl-border, var(--nw-border));
	border-radius: var(--nw-radius);
}

.nw-filter__group--cats .nw-filter__group-title {
	margin-block-end: 12px;
	color: var(--nw-fl-accent, var(--nw-primary));
}

/* ---------------------------------------------------------
   دسکتاپ و تبلت — فیلتر به‌صورت سایدبار ثابت
   --------------------------------------------------------- */
@media (min-width: 783px) {
	/* layout دو ستونه — سایدبار سمت راست (RTL: ستون اول = راست‌ترین)
	   عرض ۲۰٪ بیشتر نسبت به قبل (۲۶۰px → ۳۱۲px) */
	.nw-shop-layout {
		display: grid;
		grid-template-columns: 360px 1fr;
		grid-template-areas: "sidebar main";
		gap: 24px;
		align-items: start;
	}

	.nw-shop-layout__sidebar {
		grid-area: sidebar;
		position: sticky;
		top: 90px; /* فاصله از هدر sticky */
		max-height: calc(100vh - 110px);
		overflow-y: auto;
		/* اسکرول‌بار سمت راست: ظرف LTR، محتوای داخلی RTL می‌ماند */
		direction: ltr;
	}

	.nw-shop-layout__sidebar > .nw-filter {
		direction: rtl;
	}

	.nw-shop-layout__main {
		grid-area: main;
	}

	/* فیلتر */
	.nw-filter {
		margin-block-end: 0;
	}

	.nw-filter__mobile-toggle {
		display: none;
	}

	.nw-filter__overlay {
		display: none;
	}

	.nw-filter__panel {
		position: static;
		inline-size: auto;
		max-inline-size: none;
		transform: none !important;
		box-shadow: none;
		overflow: visible;
		border: 1px solid var(--nw-fl-border, var(--nw-border));
		border-radius: var(--nw-radius);
		padding: 18px;
		background: var(--nw-bg);
	}

	.nw-filter__header {
		border-block-end-color: var(--nw-fl-border, var(--nw-border));
	}

	.nw-filter__close {
		display: none;
	}

	.nw-filter__actions {
		position: static;
	}
}

/* صفحه‌های میانی (تبلت) — سایدبار کمی باریک‌تر تا گرید جا شود */
@media (min-width: 783px) and (max-width: 1024px) {
	.nw-shop-layout {
		grid-template-columns: 320px 1fr;
		gap: 18px;
	}
}

/* ═══════════════════════════════════════════════════════════════
   صفحه‌بندی AJAX فروشگاه (.nw-ps-pagination)
   جایگزین صفحه‌بندی بومی ووکامرس هنگام فیلتر فعال؛ کلیک بدون ریلود.
   ═══════════════════════════════════════════════════════════════ */
.nw-ps-pagination {
	margin-block: 28px 8px;
	display: flex;
	justify-content: center;
}

.nw-ps-pagination__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.nw-ps-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 40px;
	block-size: 40px;
	padding-inline: 12px;
	border: 1px solid var(--nw-fl-border, #ecdcc4);
	border-radius: 10px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

a.nw-ps-page:hover {
	border-color: var(--nw-fl-accent, #e8740f);
	color: var(--nw-fl-accent, #e8740f);
}

.nw-ps-page.is-current {
	background: var(--nw-fl-accent, #e8740f);
	border-color: var(--nw-fl-accent, #e8740f);
	color: #fff;
	cursor: default;
}

.nw-ps-page--dots {
	border: none;
	background: transparent;
	min-inline-size: auto;
	padding-inline: 4px;
}

.nw-ps-page__arrow {
	white-space: nowrap;
}