/* ---- آیکن هدر (هر صفحه) ---- */
.nav-icon-compare { position: relative; }
.nav-icon-compare .cart-badge { background: var(--accent-700); }

/* ---- آیتمِ «مقایسهٔ محصولات» داخلِ دراورِ منوی موبایل ---- */
.nav-drawer-compare {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--divider);
	color: var(--accent-700);
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
}
.nav-drawer-compare-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-md);
	background: var(--accent-100);
	color: var(--accent-700);
	flex: none;
}
.nav-drawer-compare .cart-badge { margin-inline-start: auto; background: var(--accent-700); position: static; }

/* =========================================================
   جایگاهِ آیکنِ مقایسه — دو تصمیمِ کاملاً مستقل، هرکدام در مدیاکوئریِ خودش.
   هیچ قانونی بیرون از این دو بلوک روی نمایش/عدم‌نمایشِ این عناصر اثر ندارد،
   تا انتخابِ یکی هرگز روی دیگری سرریز نکند.
   ========================================================= */

/* ---- دسکتاپ ---- */
@media (min-width: 901px) {
	/* آیتمِ دراورِ موبایل داخلِ همان nav-links است که روی دسکتاپ منوی افقی می‌شود؛
	   بدونِ این خط، روی دسکتاپ به‌عنوان یک لینکِ اضافه در منوی اصلی دیده می‌شود. */
	.nav-drawer-compare { display: none; }

	body.dmg-compare-desktop-off .nav-icon-compare { display: none; }
}

/* ---- موبایل ---- */
@media (max-width: 900px) {
	/* .nav-icons روی موبایل display:contents است، پس order مستقیماً در .nav-row
	   اثر می‌گذارد و آیکن کنارِ بقیه (بعد از سبد خرید) می‌نشیند. */
	body.dmg-compare-mobile-header .nav-icon-compare { display: inline-flex; order: 6; }

	body.dmg-compare-mobile-menu .nav-icon-compare,
	body.dmg-compare-mobile-hidden .nav-icon-compare { display: none; }
}

/* ---- دکمهٔ «مقایسه» در صفحهٔ تک‌محصول ---- */
.js-dmg-compare-toggle.is-active { color: var(--accent-700); font-weight: 700; }

/* ================= نوتیفِ گوشهٔ صفحه ================= */
.dmg-toast-holder {
	position: fixed;
	z-index: 9999;
	bottom: 20px;
	inset-inline-end: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min(90vw, 340px);
}

.dmg-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--text, #1a1a22);
	color: #fff;
	padding: 13px 18px;
	border-radius: var(--radius-md);
	font-size: 13.5px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease;
}
.dmg-toast.is-visible { opacity: 1; transform: translateY(0); }
.dmg-toast a { color: var(--accent-300); text-decoration: underline; white-space: nowrap; font-weight: 600; }

/* ================= صفحهٔ مقایسه ================= */
.compare-page { padding: 30px 20px 10px 20px; }

/* راهنمای اسکرولِ افقی — فقط موبایل/تبلت (دسکتاپ معمولاً جدول را کامل نشان می‌دهد) */
.compare-scroll-hint {
	display: none;
	align-items: center;
	gap: 6px;
	margin: 0 0 10px;
	font-size: 12px;
	color: var(--neutral-500);
}
.compare-scroll-hint svg { width: 14px; height: 14px; animation: dmg-scroll-hint-nudge 1.4s ease-in-out infinite; }

@keyframes dmg-scroll-hint-nudge {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(-4px); }
}

.compare-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--divider);
	border-radius: var(--radius-lg);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--accent-400) var(--bg);
}
.compare-table-wrap::-webkit-scrollbar { height: 8px; }
.compare-table-wrap::-webkit-scrollbar-track { background: var(--bg); }
.compare-table-wrap::-webkit-scrollbar-thumb { background: var(--accent-400); border-radius: 999px; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th,
.compare-table td {
	padding: 16px 18px;
	border-bottom: 1px solid var(--divider);
	text-align: center;
	font-size: 13.5px;
	vertical-align: middle;
}
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: none; }
.compare-table th { text-align: start; color: var(--neutral-700); font-weight: 600; background: var(--bg); white-space: nowrap; position: sticky; inset-inline-start: 0; }
.compare-row-label { background: var(--bg); }

.compare-row-head td { background: var(--surface); padding-top: 20px; }
.compare-col { position: relative; min-width: 180px; }
.compare-col img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--radius-md); margin: 0 auto 10px; display: block; background: var(--bg); }
.compare-name { display: block; font-weight: 700; color: var(--text); text-decoration: none; font-size: 13px; line-height: 1.6; }
.compare-name:hover { color: var(--accent-700); }

.compare-remove {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: none;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
	color: var(--neutral-700);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}
.compare-remove:hover { background: var(--accent-100); color: var(--accent-700); }

.compare-stock.in { color: #2ea043; font-weight: 600; }
.compare-stock.out { color: var(--danger, #ef3e63); font-weight: 600; }

/* ---- حالتِ خالیِ جدول ---- */
.compare-empty-wrap { padding: 40px 18px; text-align: center; }
.compare-empty { font-size: 14px; color: var(--neutral-500); margin: 0; }

/* =========================================================
   نوارِ جست‌وجو — عنصرِ ثابتِ بالای جدول (بیرون از ظرفِ اسکرولِ افقی).
   --dmg-compare-results-h ارتفاعِ بیشینهٔ فهرستِ نتایج است؛ برای تغییرش
   فقط همین متغیر عوض می‌شود، نه چند قانونِ پراکنده.
   ========================================================= */
.compare-searchbar {
	--dmg-compare-results-h: 320px;

	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	padding: 4px 14px;
	border: 1px solid var(--divider);
	border-radius: var(--radius-md);
	background: var(--bg);
	transition: border-color .15s;
}
.compare-searchbar:focus-within { border-color: var(--accent); }
.compare-searchbar.is-full { opacity: .7; }

.compare-searchbar-icon { display: flex; color: var(--neutral-500); flex: none; }
.compare-searchbar-icon svg { width: 17px; height: 17px; }

.compare-searchbar .js-dmg-compare-search {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 13.5px;
	color: var(--text);
}
.compare-searchbar .js-dmg-compare-search:focus { outline: none; }
.compare-searchbar .js-dmg-compare-search:disabled { cursor: not-allowed; }

.compare-searchbar-count { flex: none; font-size: 11.5px; font-weight: 600; color: var(--neutral-500); white-space: nowrap; }
.compare-searchbar-count.is-full { color: var(--accent-700); }

/* فهرستِ نتایج: روی نوار شناور می‌شود تا چیدمانِ صفحه با هر جست‌وجو نپرد */
.compare-search-results {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	inset-inline: 0;
	max-height: var(--dmg-compare-results-h);
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--divider);
	border-radius: var(--radius-md);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
	padding: 6px;
	scrollbar-width: thin;
}
.compare-search-results:empty { display: none; }

.compare-search-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px;
	background: transparent;
	border: none;
	border-radius: var(--radius-sm);
	cursor: pointer;
	text-align: start;
	font-family: inherit;
}
.compare-search-item:hover:not([disabled]) { background: var(--accent-100); }
.compare-search-item[disabled] { opacity: .55; cursor: default; }
.compare-search-item img { width: 34px; height: 34px; object-fit: cover; border-radius: var(--radius-sm); flex: none; background: #fff; }
.compare-search-item span:nth-child(2) { flex: 1; font-size: 12.5px; line-height: 1.6; }
.compare-search-price { font-size: 11.5px; color: var(--accent-700); font-weight: 600; white-space: nowrap; }
.compare-search-empty { padding: 12px; font-size: 12.5px; color: var(--neutral-500); margin: 0; text-align: center; }

/* ================= اسکلتِ بارگذاری ================= */
.compare-table.is-loading .compare-row-head td { padding-top: 20px; }

.dmg-skel {
	background: linear-gradient(90deg, var(--divider) 25%, var(--bg) 50%, var(--divider) 75%);
	background-size: 200% 100%;
	animation: dmg-skel-shine 1.4s ease-in-out infinite;
	border-radius: var(--radius-sm);
}
.dmg-skel-img { width: 60px; height: 60px; border-radius: var(--radius-md); margin: 0 auto 10px; }
.dmg-skel-line { height: 12px; width: 70%; margin: 0 auto; }
.dmg-skel-label { height: 12px; width: 60px; }

@keyframes dmg-skel-shine {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* موبایل و تبلت هر دو: راهنمای اسکرول دیده شود، پدینگِ صفحه جمع‌وجورتر */
@media (max-width: 900px) {
	.compare-page { padding: 20px 10px; }
	.compare-scroll-hint { display: flex; }
}

@media (max-width: 700px) {
	.compare-col { min-width: 150px; }
	.compare-table th, .compare-table td { padding: 12px; font-size: 12.5px; }

	/* روی صفحهٔ کوچک، فهرستِ نتایج نباید تا پایینِ صفحه کشیده شود */
	.compare-searchbar { --dmg-compare-results-h: 240px; }
	.compare-searchbar-count { display: none; }
}