/* =============================================================
 * Luxury Star Ratings — quiet-luxury jewelry-grade rating system
 * ============================================================= */

.luxr-rating {
	--luxr-size: 20px;
	--luxr-gap: 4px;
	--luxr-pad-y: 7px;
	--luxr-pad-x: 16px;

	--luxr-gold:        #D4AF37;
	--luxr-gold-dark:   #7A5A1A;
	--luxr-gold-darker: #5C4408;
	--luxr-pearl-1:     #fdfaf3;
	--luxr-pearl-2:     #f4ecd9;
	--luxr-pearl-3:     #ede1c2;

	display: inline-flex;
	align-items: center;
	gap: var(--luxr-gap);

	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;

	vertical-align: middle;
	line-height: 1;
	font-size: 0;
	box-sizing: border-box;
	user-select: none;
	-webkit-user-select: none;
}

.luxr-star-wrap {
	position: relative;
	display: inline-block;
	width: var(--luxr-size);
	height: var(--luxr-size);
	flex: 0 0 auto;
	line-height: 0;
	transition: transform 220ms cubic-bezier(.2,.7,.3,1);
}

.luxr-rating:hover .luxr-star-wrap {
	transform: translateY(-1px) scale(1.04);
}

.luxr-star {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.luxr-star--empty {
	/* faint glint along the bottom of the engraved outline */
	filter: drop-shadow(0 0.5px 0 rgba(255, 250, 230, 0.55));
}

.luxr-star--filled {
	/* mathematically precise per-star fractional reveal */
	clip-path: inset(0 calc(100% - var(--luxr-star-fill, 0%)) 0 0);
	/* subtle drop shadow gives the gem a "lifted" appearance over the marble */
	filter: drop-shadow(0 0.5px 0.5px rgba(91, 68, 8, 0.45));
}

/* WooCommerce wrappers — force transparent so the theme can't paint behind us */
.luxr-woo-rating-wrap,
.luxr-star-wrap {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.luxr-woo-rating-wrap {
	display: inline-block;
	line-height: 1;
}

/* Compact stars on small screens */
@media (max-width: 480px) {
	.luxr-rating {
		--luxr-size: 16px;
		--luxr-gap: 3px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.luxr-star-wrap { transition: none !important; }
	.luxr-rating:hover .luxr-star-wrap { transform: none; }
}