/**
 * sarmayam-compare — استایل ابزار مقایسهٔ دارایی‌ها (هاب + صفحات جفتی) — v2.6.0
 *
 * بازطراحی کامل، یکپارچه با دیزاین‌سیستم قالب (سرمه #1E2D4A + طلایی #E8A020).
 *
 * قاعدهٔ طلایی این نسخه: هیچ محتوایی در حالت پایه مخفی نیست.
 * در v2.4.0، [data-hero-step] و [data-reveal] با opacity:0 شروع می‌شدند و نمایششان
 * به انیمیشن/JS وابسته بود؛ نتیجه در عمل، هیروی خالی بود. اینجا همه‌چیز
 * به‌صورت پیش‌فرض دیده می‌شود و انیمیشن‌ها فقط افزودنی و بدون تغییر opacity پایه‌اند.
 *
 * کلاس‌های مورد اتکای compare.js (تغییر ندهید):
 * .is-up / .is-down / .is-flash-up / .is-flash-down / .sar-cmp-best /
 * .is-leaving / .is-loading / .is-entering (روی .sar-cmp و .sar-cmp-swap) / .is-visible ([data-reveal])
 */

/* ============ توکن‌ها — هم‌راستا با main.css قالب ============ */
.sar-cmp {
	--navy: #1e2d4a;
	--navy-deep: #0f1b33;
	--navy-soft: #253860;
	--gold: #e8a020;
	--bg-page: #f7f8fa;
	--bg-surface: #ffffff;
	--border: #e2e6ec;
	--text-primary: #1e2d4a;
	--text-secondary: #5b6b82;
	--text-on-dark: #ffffff;
	--text-secondary-on-dark: rgba(255, 255, 255, 0.72);
	--up: #15803d;
	--down: #b91c1c;
	--interactive: #1d4ed8;
	--r-card: 16px;
	--r-control: 12px;
	--r-pill: 999px;
	--e1: 0 1px 3px rgba(16, 30, 54, 0.08);
	--e2: 0 4px 14px rgba(16, 30, 54, 0.10);
	--e3: 0 8px 24px rgba(16, 30, 54, 0.14);
	--dur-hover: 180ms;
	--dur-micro: 120ms;

	background: var(--bg-page);
	color: var(--text-primary);
}

.sar-cmp-container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
}

.sar-cmp-section {
	padding-block: 44px;
}

.sar-cmp-h2 {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--text-primary);
	margin: 0 0 10px;
	line-height: 1.5;
}

.sar-cmp-h2:focus {
	outline: none;
}

.sar-cmp-sub {
	font-size: 0.9375rem;
	color: var(--text-secondary);
	line-height: 1.85;
	margin: 0 0 24px;
	max-width: 720px;
}

/* ============ دکمه‌های مشترک (compare + risk) ============ */
.sar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 26px;
	border-radius: var(--r-control, 12px);
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 2px solid transparent;
	transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.sar-btn:hover {
	text-decoration: none;
	transform: translateY(-1px);
}

.sar-btn--primary {
	background: #e8a020;
	color: #1e2d4a;
}

.sar-btn--primary:hover {
	background: #f0ad33;
	color: #1e2d4a;
	box-shadow: 0 6px 16px rgba(232, 160, 32, 0.35);
}

.sar-btn--secondary {
	background: transparent;
	color: #1e2d4a;
	border-color: rgba(30, 45, 74, 0.35);
}

.sar-btn--secondary:hover {
	border-color: #1e2d4a;
	color: #1e2d4a;
}

.sar-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.25);
}

.sar-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.sar-btn--tertiary {
	background: transparent;
	color: var(--interactive, #1d4ed8);
	padding-inline: 10px;
}

/* ============ ۱) هیرو — سرمه‌ای، هم‌خانوادهٔ هیروی خانه ============ */
.sar-cmp-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 80%);
	color: var(--text-on-dark);
	padding-block: 56px 76px;
}

.sar-cmp-hero__aurora {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sar-cmp-hero__aurora span {
	position: absolute;
	width: 46%;
	height: 70%;
	border-radius: 50%;
	filter: blur(90px);
	opacity: 0.16;
}

.sar-cmp-hero__aurora span:first-child {
	background: var(--aurora-a, #e8a020);
	top: -20%;
	inset-inline-start: -8%;
}

.sar-cmp-hero__aurora span:last-child {
	background: var(--aurora-b, #3d7fef);
	bottom: -25%;
	inset-inline-end: -8%;
}

.sar-cmp-hero .sar-cmp-container {
	position: relative;
	z-index: 1;
}

.sar-cmp-crumb {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 18px;
}

.sar-cmp-crumb a {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
}

.sar-cmp-crumb a:hover {
	color: #fff;
}

.sar-cmp-crumb [aria-current='page'] {
	color: rgba(255, 255, 255, 0.85);
}

.sar-cmp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--gold);
	background: rgba(232, 160, 32, 0.14);
	border-radius: var(--r-pill);
	padding: 6px 14px;
	margin: 0 0 16px;
}

.sar-cmp-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
	animation: sar-cmp-pulse 2.4s ease-out infinite;
}

@keyframes sar-cmp-pulse {
	0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
	70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
	100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.sar-cmp-hero__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	line-height: 1.35;
	margin: 0 0 14px;
	color: var(--text-on-dark);
	max-width: 760px;
}

.sar-cmp-hero__lead {
	font-size: 1.0625rem;
	line-height: 1.9;
	color: var(--text-secondary-on-dark);
	max-width: 720px;
	margin: 0;
}

.sar-cmp-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 22px 0 0;
	padding: 0;
}

.sar-cmp-hero__stats li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.75);
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.05);
	border-radius: var(--r-pill);
	padding: 7px 14px;
}

.sar-cmp-hero__stats b {
	color: var(--gold);
	font-weight: 800;
}

/*
 * ورود هیرو — فقط حرکت تزئینی؛ محتوا در حالت پایه کاملاً دیده می‌شود.
 * هیچ opacity:0 پایه‌ای وجود ندارد؛ اگر انیمیشن اجرا نشود، هیچ چیزی پنهان نمی‌ماند.
 */
[data-hero-step] {
	animation: sar-cmp-rise 480ms ease-out;
	animation-delay: calc(var(--step, 0) * 70ms);
	animation-fill-mode: backwards;
}

@keyframes sar-cmp-rise {
	from {
		opacity: 0.01;
		transform: translateY(16px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ============ ۲) سلکتور — کارت برجستهٔ روی هیرو ============ */
.sar-cmp-picker {
	padding-block: 0 36px;
}

.sar-cmp-selector {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	box-shadow: var(--e3);
	padding: 26px 26px 24px;
	margin-top: -44px;
	position: relative;
	z-index: 2;
}

.sar-cmp-selector__title {
	font-size: 1rem;
	font-weight: 800;
	color: var(--text-primary);
	margin: 0 0 18px;
}

.sar-cmp-selector__sides {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 18px;
	align-items: start;
}

.sar-cmp-selector__vs {
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sar-cmp-selector__vs span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 64px;
	min-height: 34px;
	padding: 6px 12px;
	border-radius: var(--r-pill);
	background: var(--navy);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.sar-cmp-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	min-inline-size: 0;
}

.sar-cmp-fieldset__legend {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--text-secondary);
	margin-bottom: 10px;
}

.sar-cmp-chips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.sar-cmp-chip {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 8px 10px;
	border: 2px solid var(--border);
	border-radius: var(--r-control);
	background: var(--bg-surface);
	cursor: pointer;
	transition: border-color var(--dur-hover), box-shadow var(--dur-hover), background var(--dur-hover);
}

.sar-cmp-chip:hover {
	border-color: rgba(30, 45, 74, 0.35);
}

.sar-cmp-chip input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.sar-cmp-chip__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--asset-color, var(--gold));
	flex-shrink: 0;
}

.sar-cmp-chip__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
	text-align: center;
	white-space: nowrap;
}

.sar-cmp-chip:has(input:checked) {
	border-color: var(--asset-color, var(--gold));
	background: color-mix(in srgb, var(--asset-color, #e8a020) 7%, #fff);
	box-shadow: var(--e1);
}

.sar-cmp-chip:has(input:checked) .sar-cmp-chip__name {
	font-weight: 800;
}

.sar-cmp-chip:has(input:disabled) {
	opacity: 0.38;
	cursor: not-allowed;
}

.sar-cmp-chip:has(input:focus-visible) {
	outline: 2px solid var(--interactive);
	outline-offset: 2px;
}

.sar-cmp-selector__submit {
	margin-top: 20px;
	min-width: 180px;
}

/* مقایسه‌های پرطرفدار زیر سلکتور */
.sar-cmp-popular {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.sar-cmp-popular__label {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	font-weight: 700;
}

.sar-cmp-popular__chip {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-primary);
	border: 1px solid var(--border);
	background: var(--bg-surface);
	border-radius: var(--r-pill);
	padding: 7px 14px;
	text-decoration: none;
	transition: border-color var(--dur-hover), color var(--dur-hover);
}

.sar-cmp-popular__chip:hover {
	border-color: var(--interactive);
	color: var(--interactive);
	text-decoration: none;
}

/* ============ ۳) کارت‌های دوقلوی قیمت (صفحهٔ جفتی) ============ */
.sar-cmp-duo {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-block: 18px 22px;
}

.sar-cmp-duo__card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-top: 4px solid var(--asset-color, var(--gold));
	border-radius: var(--r-card);
	box-shadow: var(--e1);
	padding: 22px 24px;
}

.sar-cmp-duo__name {
	font-size: 1.0625rem;
	font-weight: 800;
	margin: 0 0 2px;
}

.sar-cmp-duo__name a {
	color: var(--text-primary);
	text-decoration: none;
}

.sar-cmp-duo__name a:hover {
	color: var(--interactive);
}

.sar-cmp-duo__unit {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	margin: 0 0 12px;
}

.sar-cmp-duo__price {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	color: var(--text-primary);
	margin: 0 0 6px;
	font-variant-numeric: tabular-nums;
}

.sar-cmp-duo__chg {
	margin: 0 0 10px;
	font-size: 0.9375rem;
}

.sar-cmp-duo__time {
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin: 0;
}

.sar-cmp-duo__vs {
	position: absolute;
	inset-inline-start: 50%;
	top: 50%;
	transform: translate(50%, -50%);
	z-index: 1;
}

.sar-cmp-duo__vs span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 800;
	box-shadow: var(--e2);
	border: 3px solid var(--bg-page);
}

/* ============ جدول‌ها ============ */
.sar-cmp-tablewrap {
	overflow-x: auto;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	box-shadow: var(--e1);
}

.sar-cmp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.sar-cmp-table caption.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.sar-cmp-table thead th {
	background: var(--navy);
	color: #fff;
	font-weight: 700;
	text-align: start;
	padding: 14px 18px;
	white-space: nowrap;
}

.sar-cmp-table thead th a {
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid var(--asset-color, transparent);
	padding-bottom: 2px;
}

.sar-cmp-table thead th a:hover {
	color: var(--gold);
}

.sar-cmp-table tbody th,
.sar-cmp-table tbody td {
	padding: 13px 18px;
	border-top: 1px solid var(--border);
	text-align: start;
	vertical-align: top;
	line-height: 1.7;
}

.sar-cmp-table tbody th {
	font-weight: 700;
	color: var(--text-secondary);
	white-space: nowrap;
	width: 1%;
}

.sar-cmp-table tbody tr:nth-child(even) {
	background: rgba(30, 45, 74, 0.025);
}

.sar-cmp-cellnote {
	display: block;
	font-size: 0.75rem;
	color: var(--text-secondary);
	margin-top: 4px;
}

/* مقادیر عددی */
.sar-cmp-chg {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sar-cmp-chg.is-up {
	color: var(--up);
}

.sar-cmp-chg.is-down {
	color: var(--down);
}

.sar-cmp-na {
	color: var(--text-secondary);
}

.sar-cmp-vol {
	font-weight: 700;
	border-bottom: 1px dotted var(--text-secondary);
	cursor: help;
}

.sar-cmp-spark {
	width: 120px;
	height: 34px;
	display: block;
}

.sar-cmp-best {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--up);
	background: rgba(21, 128, 61, 0.1);
	border-radius: var(--r-pill);
	padding: 3px 9px;
	margin-inline-start: 6px;
	white-space: nowrap;
	vertical-align: middle;
}

/* فلش به‌روزرسانی زنده — فقط پس‌زمینه، بدون تغییر opacity */
.is-flash-up {
	animation: sar-cmp-flash-up 500ms ease-out;
}

.is-flash-down {
	animation: sar-cmp-flash-down 500ms ease-out;
}

@keyframes sar-cmp-flash-up {
	from { background-color: rgba(21, 128, 61, 0.16); }
	to { background-color: transparent; }
}

@keyframes sar-cmp-flash-down {
	from { background-color: rgba(185, 28, 28, 0.14); }
	to { background-color: transparent; }
}

/* نسبت، جمع‌بندی، سلب مسئولیت */
.sar-cmp-ratio {
	margin: 18px 0 0;
	font-size: 0.9375rem;
	color: var(--text-primary);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-inline-start: 3px solid var(--gold);
	border-radius: var(--r-control);
	padding: 12px 16px;
}

.sar-cmp-ratio [data-ratio-value] {
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.sar-cmp-summary {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.sar-cmp-summary__chip {
	font-size: 0.8125rem;
	color: var(--text-primary);
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	padding: 8px 14px;
}

.sar-cmp-summary__chip b {
	font-weight: 800;
}

.sar-cmp-summary__note {
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.sar-cmp-offline {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #92400e;
	background: #fef3c7;
	border-radius: var(--r-pill);
	padding: 6px 14px;
	margin: 0 0 14px;
}

.sar-cmp-disclaimer {
	margin: 22px 0 0;
	font-size: 0.8125rem;
	color: var(--text-secondary);
	border-inline-start: 3px solid var(--gold);
	padding-inline-start: 12px;
	line-height: 1.8;
}

.sar-cmp-sr-live {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	margin: 0;
}

/* پل به تست ریسک */
.sar-cmp-bridge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 24px 28px;
	background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%);
	border-radius: var(--r-card);
}

.sar-cmp-bridge p {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9375rem;
	line-height: 1.8;
	max-width: 640px;
}

/* ============ کارت‌های دوتایی متنی (معرفی / مناسب برای چه کسی) ============ */
.sar-cmp-cards2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.sar-cmp-card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-top: 4px solid var(--asset-color, var(--gold));
	border-radius: var(--r-card);
	box-shadow: var(--e1);
	padding: 22px 24px;
}

.sar-cmp-card h3 {
	font-size: 1rem;
	font-weight: 800;
	color: var(--text-primary);
	margin: 0 0 10px;
	line-height: 1.6;
}

.sar-cmp-card p {
	font-size: 0.9375rem;
	color: var(--text-secondary);
	line-height: 1.9;
	margin: 0;
}

.sar-cmp-card ul {
	margin: 0;
	padding-inline-start: 20px;
	display: grid;
	gap: 8px;
}

.sar-cmp-card li {
	font-size: 0.9375rem;
	color: var(--text-primary);
	line-height: 1.8;
}

.sar-cmp-card li::marker {
	color: var(--asset-color, var(--gold));
}

/* اشتباه رایج */
.sar-cmp-mistake p {
	font-size: 0.9375rem;
	color: var(--text-secondary);
	line-height: 1.95;
	margin: 0 0 18px;
	max-width: 800px;
}

/* ============ FAQ ============ */
.sar-cmp-faq__list {
	display: grid;
	gap: 10px;
	max-width: 820px;
}

.sar-cmp-faq__item {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-control);
	overflow: hidden;
}

.sar-cmp-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--text-primary);
	padding: 15px 20px;
	line-height: 1.7;
}

.sar-cmp-faq__item summary::-webkit-details-marker {
	display: none;
}

.sar-cmp-faq__item summary::after {
	content: '';
	width: 9px;
	height: 9px;
	border-inline-end: 2px solid var(--text-secondary);
	border-block-end: 2px solid var(--text-secondary);
	transform: rotate(45deg);
	transition: transform var(--dur-hover);
	flex-shrink: 0;
	margin-block-start: -4px;
}

.sar-cmp-faq__item[open] summary::after {
	transform: rotate(-135deg);
	margin-block-start: 4px;
}

.sar-cmp-faq__body {
	overflow: hidden;
}

.sar-cmp-faq__body p {
	margin: 0;
	padding: 0 20px 18px;
	font-size: 0.875rem;
	color: var(--text-secondary);
	line-height: 1.9;
}

/* ============ مقایسه‌های مرتبط ============ */
.sar-cmp-related__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

.sar-cmp-related__card {
	display: block;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-control);
	padding: 16px 18px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--text-primary);
	text-decoration: none;
	background-image: linear-gradient(90deg, var(--asset-color, #e8a020), var(--asset-color-b, #3d7fef));
	background-repeat: no-repeat;
	background-size: 100% 3px;
	background-position: bottom;
	transition: box-shadow var(--dur-hover), transform var(--dur-hover), color var(--dur-hover);
}

.sar-cmp-related__card:hover {
	box-shadow: var(--e2);
	transform: translateY(-2px);
	color: var(--interactive);
	text-decoration: none;
}

/* ============ هاب: کارت زندهٔ شش دارایی ============ */
.sar-cmp-assets {
	padding-top: 8px;
}

.sar-cmp-assets__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.sar-cmp-assetcard {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-top: 4px solid var(--asset-color, var(--gold));
	border-radius: var(--r-card);
	box-shadow: var(--e1);
	padding: 20px 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow var(--dur-hover), transform var(--dur-hover);
}

.sar-cmp-assetcard:hover {
	box-shadow: var(--e2);
	transform: translateY(-2px);
}

.sar-cmp-assetcard__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.sar-cmp-assetcard__name {
	font-size: 1rem;
	font-weight: 800;
	margin: 0;
}

.sar-cmp-assetcard__name a {
	color: var(--text-primary);
	text-decoration: none;
}

.sar-cmp-assetcard__name a:hover {
	color: var(--interactive);
}

.sar-cmp-assetcard__unit {
	font-size: 0.75rem;
	color: var(--text-secondary);
	white-space: nowrap;
}

.sar-cmp-assetcard__data {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

.sar-cmp-assetcard__price {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

.sar-cmp-assetcard__chg {
	font-size: 0.875rem;
}

.sar-cmp-assetcard__note {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	line-height: 1.8;
	margin: 0;
	flex: 1;
}

.sar-cmp-assetcard__time {
	font-size: 0.6875rem;
	color: var(--text-secondary);
	margin: 0;
	border-top: 1px solid var(--border);
	padding-top: 10px;
}

/* ============ هاب: گرید ۱۵ مقایسه ============ */
.sar-cmp-grid__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.sar-cmp-grid__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: 20px 22px;
	text-decoration: none;
	overflow: hidden;
	transition: box-shadow var(--dur-hover), transform var(--dur-hover), border-color var(--dur-hover);
}

.sar-cmp-grid__card::before {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--asset-color, #e8a020), var(--asset-color-b, #3d7fef));
	opacity: 0.85;
}

.sar-cmp-grid__card:hover {
	box-shadow: var(--e3);
	transform: translateY(-3px);
	border-color: transparent;
	text-decoration: none;
}

.sar-cmp-grid__dots {
	display: inline-flex;
	gap: 5px;
}

.sar-cmp-grid__dots i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.sar-cmp-grid__dots i:first-child {
	background: var(--asset-color, #e8a020);
}

.sar-cmp-grid__dots i:last-child {
	background: var(--asset-color-b, #3d7fef);
	margin-inline-start: -9px;
	border: 2px solid var(--bg-surface);
	box-sizing: content-box;
}

.sar-cmp-grid__title {
	font-size: 1rem;
	font-weight: 800;
	color: var(--text-primary);
}

.sar-cmp-grid__note {
	font-size: 0.8125rem;
	color: var(--text-secondary);
	line-height: 1.7;
	flex: 1;
}

.sar-cmp-grid__cta {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--interactive);
}

/* ============ هاب: راهنمای انتخاب ============ */
.sar-cmp-guide__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.sar-cmp-guide__card {
	background: var(--bg-surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: 22px 24px;
}

.sar-cmp-guide__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(232, 160, 32, 0.14);
	color: var(--gold);
	font-size: 1rem;
	font-weight: 800;
	margin-bottom: 12px;
}

.sar-cmp-guide__card h3 {
	font-size: 1rem;
	font-weight: 800;
	color: var(--text-primary);
	margin: 0 0 8px;
}

.sar-cmp-guide__card p {
	font-size: 0.875rem;
	color: var(--text-secondary);
	line-height: 1.9;
	margin: 0;
}

/* ============ ریویل اسکرولی — فقط افزودنی؛ حالت پایه کاملاً مرئی ============ */
[data-reveal] {
	opacity: 1;
	transform: none;
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* ============ تعویض جفت بدون ریلود (SPA سبک) ============ */
.sar-cmp-swap {
	transition: opacity 160ms ease;
}

.sar-cmp.is-leaving .sar-cmp-swap {
	opacity: 0.35;
}

.sar-cmp.is-entering .sar-cmp-swap {
	animation: sar-cmp-swap-in 240ms ease;
}

@keyframes sar-cmp-swap-in {
	from {
		opacity: 0.35;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.sar-cmp.is-loading .sar-cmp-swap {
	opacity: 0.5;
	filter: saturate(0.5);
	pointer-events: none;
}

/* ============ ریسپانسیو ============ */
@media (max-width: 900px) {
	.sar-cmp-assets__grid,
	.sar-cmp-grid__cards,
	.sar-cmp-guide__grid,
	.sar-cmp-related__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.sar-cmp-selector__sides {
		grid-template-columns: 1fr;
	}

	.sar-cmp-selector__vs {
		justify-content: flex-start;
	}

	.sar-cmp-duo {
		grid-template-columns: 1fr;
	}

	.sar-cmp-duo__vs {
		display: none;
	}

	.sar-cmp-cards2 {
		grid-template-columns: 1fr;
	}

	.sar-cmp-section {
		padding-block: 34px;
	}

	.sar-cmp-hero {
		padding-block: 44px 66px;
	}
}

@media (max-width: 599px) {
	.sar-cmp-chips {
		grid-template-columns: repeat(2, 1fr);
	}

	.sar-cmp-table {
		min-width: 520px;
	}

	.sar-cmp-assets__grid,
	.sar-cmp-grid__cards,
	.sar-cmp-guide__grid,
	.sar-cmp-related__grid {
		grid-template-columns: 1fr;
	}

	.sar-cmp-selector {
		padding: 20px 18px;
	}

	.sar-cmp-selector__submit {
		width: 100%;
	}
}

/* کاهش حرکت — سراسری */
@media (prefers-reduced-motion: reduce) {
	.sar-cmp *,
	.sar-cmp *::before,
	.sar-cmp *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* sarmayam-compare v2.6.0 — BUILD 2026-07-11-1030 */