/**
 * Philly Golf Guys Pro — Star Rating Component
 *
 * Pure CSS star ratings using SVG data URI.
 * Uses a two-layer approach: empty stars (grey) + filled overlay (gold).
 *
 * Usage:
 *   echo pgg_render_stars( 4.5 );
 *   echo pgg_render_stars( 3.0, 'lg' );
 *   echo pgg_render_stars( 2.5, 'sm' );
 *
 * @package Philly Golf Guys Pro
 */

.pgg-stars {
	display: inline-flex;
	align-items: center;
	height: 20px;
	position: relative;
	width: 100px; /* 5 × 20px */
}

/* Gold filled stars — clipped to percentage width */
.pgg-stars::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpolygon fill='%23FFB300' points='10,1 12.9,7 20,7.8 14.5,12.8 16.2,20 10,16.4 3.8,20 5.5,12.8 0,7.8 7.1,7'/%3E%3Cpolygon fill='%23FFB300' points='30,1 32.9,7 40,7.8 34.5,12.8 36.2,20 30,16.4 23.8,20 25.5,12.8 20,7.8 27.1,7'/%3E%3Cpolygon fill='%23FFB300' points='50,1 52.9,7 60,7.8 54.5,12.8 56.2,20 50,16.4 43.8,20 45.5,12.8 40,7.8 47.1,7'/%3E%3Cpolygon fill='%23FFB300' points='70,1 72.9,7 80,7.8 74.5,12.8 76.2,20 70,16.4 63.8,20 65.5,12.8 60,7.8 67.1,7'/%3E%3Cpolygon fill='%23FFB300' points='90,1 92.9,7 100,7.8 94.5,12.8 96.2,20 90,16.4 83.8,20 85.5,12.8 80,7.8 87.1,7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100px 20px;
	content: "";
	height: 20px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100px;
	z-index: 2;
}

/* Empty (grey) star outline background */
.pgg-stars::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpolygon fill='%23E0E0E0' points='10,1 12.9,7 20,7.8 14.5,12.8 16.2,20 10,16.4 3.8,20 5.5,12.8 0,7.8 7.1,7'/%3E%3Cpolygon fill='%23E0E0E0' points='30,1 32.9,7 40,7.8 34.5,12.8 36.2,20 30,16.4 23.8,20 25.5,12.8 20,7.8 27.1,7'/%3E%3Cpolygon fill='%23E0E0E0' points='50,1 52.9,7 60,7.8 54.5,12.8 56.2,20 50,16.4 43.8,20 45.5,12.8 40,7.8 47.1,7'/%3E%3Cpolygon fill='%23E0E0E0' points='70,1 72.9,7 80,7.8 74.5,12.8 76.2,20 70,16.4 63.8,20 65.5,12.8 60,7.8 67.1,7'/%3E%3Cpolygon fill='%23E0E0E0' points='90,1 92.9,7 100,7.8 94.5,12.8 96.2,20 90,16.4 83.8,20 85.5,12.8 80,7.8 87.1,7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: 100px 20px;
	content: "";
	height: 20px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100px;
	z-index: 1;
}

/* The fill span clips the gold stars to the correct percentage */
.pgg-stars__fill {
	display: block;
	height: 100%;
	overflow: hidden;
	position: relative;
	z-index: 3;
}

/* Size modifiers */
.pgg-stars--sm {
	height: 14px;
	width: 70px;
}

.pgg-stars--sm::before,
.pgg-stars--sm::after {
	background-size: 70px 14px;
	height: 14px;
	width: 70px;
}

.pgg-stars--lg {
	height: 28px;
	width: 140px;
}

.pgg-stars--lg::before,
.pgg-stars--lg::after {
	background-size: 140px 28px;
	height: 28px;
	width: 140px;
}

/* Rating display (number alongside stars) */
.pgg-rating {
	align-items: center;
	display: inline-flex;
	gap: 8px;
}

.pgg-rating__number {
	color: var(--pgg-dark);
	font-size: 15px;
	font-weight: 600;
}

.pgg-rating--lg .pgg-rating__number {
	font-size: 22px;
	font-weight: 700;
}