/*
 * ظاهر ستاره‌ها بر اساس نمونه‌ی ارسالی: طلایی/کهربایی با حاشیه‌ی
 * قهوه‌ای‌طلایی، و پرشدگی درصدی (نه فقط رند‌شده به نزدیک‌ترین
 * ستاره‌ی کامل) — دقیقاً مثل رفتار افزونه‌های امتیازدهی کلاسیک.
 *
 * قوانین !important و box-sizing/flex-shrink عمداً روی عناصر SVG و
 * ستاره‌ها گذاشته شده‌اند تا استایل‌های عمومی قالب/ووکامرس (مثل
 * `img, svg { height: auto; max-width: 100% }` یا فشرده‌سازی آیتم‌ها
 * در فلکس‌باکس‌های تنگ) اندازه یا چیدمان ستاره‌ها را به‌هم نریزد.
 */

.spr-rating-widget {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	direction: rtl;
	font-family: inherit;
	margin: 12px 0;
	box-sizing: border-box;
}

.spr-rating-widget *,
.spr-rating-widget *::before,
.spr-rating-widget *::after {
	box-sizing: border-box;
}

/* بلوک ستاره‌ها همیشه چپ‌به‌راست می‌ماند تا ترتیب پرشدگی مثل نمونه
   حفظ شود، صرف‌نظر از جهت کلی صفحه. */
.spr-stars-frame {
	position: relative;
	display: inline-block;
	direction: ltr !important;
	line-height: 0;
	flex-shrink: 0;
}

.spr-stars {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 1px;
	direction: ltr !important;
}

.spr-star,
.spr-star-hit {
	display: block;
	width: 15px !important;
	height: 15px !important;
	flex: 0 0 15px !important;
	max-width: none !important;
}

.spr-star svg {
	display: block !important;
	width: 15px !important;
	height: 15px !important;
	max-width: none !important;
	overflow: visible;
}

/* لایه‌ی پس‌زمینه: فقط حاشیه، بدون پرشدگی (نمایانگر بخش امتیازنخورده) */
.spr-stars-outline svg {
	fill: #ffffff;
	stroke: #b8862a;
	stroke-width: 1.4;
}

/* لایه‌ی جلو: پرشده با رنگ طلایی، عرض آن با درصد میانگین امتیاز
   کنترل می‌شود و overflow پنهان است تا فقط همان درصد از ستاره‌ها
   دیده شود. */
.spr-stars-fill {
	position: absolute;
	top: 0;
	left: 0 !important;
	right: auto !important;
	overflow: hidden;
	white-space: nowrap;
}

.spr-stars-fill svg {
	fill: #dba631;
	stroke: #b8862a;
	stroke-width: 1.4;
}

/*
 * لایه‌ی نامرئیِ کلیک/هاور برای رأی‌گیری. به‌جای تقسیم مساوی عرض
 * (که باعث می‌شد موقعیت آخرین ستاره کمی جابه‌جا دیده شود)، دقیقاً
 * همان مدل flex + gap لایه‌ی بصری تکرار شده تا مختصات هر ستاره
 * پیکسل‌به‌پیکسل با نسخه‌ی قابل‌مشاهده یکی باشد.
 */
.spr-stars-hit {
	position: absolute;
	inset: 0;
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	gap: 1px;
	direction: ltr !important;
}

.spr-star-hit {
	cursor: pointer;
	background: transparent;
}

.spr-count {
	font-size: 11px;
	color: #888;
	line-height: 1;
	white-space: nowrap;
	flex-shrink: 0;
}