/**
 * Flavors Star Rating - fractional stars via a clipped overlay row.
 *
 * Two identical icon rows are stacked: .fsr-stars-empty defines the box; the
 * absolutely-positioned .fsr-stars-filled is clipped to a width percentage
 * (--fsr-fill) so any fraction shows crisply. Hover-to-fill is pure CSS; the
 * scroll fill animation only starts from 0 when JS adds .fsr-js (so no-JS still
 * shows the real rating).
 */

.flavor-star-rating {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.fsr-row {
	--fsr-label-gap: 8px;
	display: flex;
	align-items: center;
	gap: var(--fsr-label-gap);
}

.fsr-stars {
	--fsr-fill: 0%;
	--fsr-gap: 4px;
	position: relative;
	display: inline-flex;
	font-size: 26px;
	line-height: 1;
}

.fsr-stars-empty,
.fsr-stars-filled {
	display: inline-flex;
	gap: var(--fsr-gap);
	line-height: 1;
	white-space: nowrap;
}

.fsr-stars-empty {
	color: #d1d5db;
}

/* Clipped filled overlay sitting exactly over the empty row. */
.fsr-stars-filled {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--fsr-fill);
	overflow: hidden;
	color: #f59e0b;
	pointer-events: none;
}

.fsr-star {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
}

.fsr-star svg {
	width: 1em;
	height: 1em;
	display: block;
}

.fsr-star i {
	font-size: inherit;
	line-height: 1;
}

.fsr-label {
	color: #1d2327;
	line-height: 1;
	font-weight: 600;
}

.fsr-title {
	color: #1d2327;
	line-height: 1.3;
}

.fsr-caption {
	color: #6b7280;
	line-height: 1.4;
}

/* Hover: reveal every star. */
.fsr-stars.fsr--hover .fsr-stars-filled {
	transition: width 0.3s cubic-bezier( 0.16, 1, 0.3, 1 );
}

.fsr-stars.fsr--hover:hover .fsr-stars-filled {
	width: 100% !important;
}

/* Scroll fill: only starts from 0 once JS has flagged the element. */
.fsr-stars.fsr--animate.fsr-js .fsr-stars-filled {
	width: 0;
	transition: width var( --fsr-dur, 1.2s ) cubic-bezier( 0.16, 1, 0.3, 1 );
}

.fsr-stars.fsr--animate.fsr-js.fsr-in .fsr-stars-filled {
	width: var(--fsr-fill);
}

@media (prefers-reduced-motion: reduce) {
	.fsr-stars .fsr-stars-filled {
		transition: none !important;
	}
}