/**
 * hp-reviews-aggregate.css -- #186 Path C band. Brand tokens matching the
 * /rental-analysis honesty-metrics grammar (navy instrument panel, tabular
 * numerals, uppercase microlabel-style attribution). No decoration beyond
 * that: the live number and the link ARE the legitimacy signal.
 *
 * TREATMENT (ruling c, 2026-08-27/28): one consistent CARD everywhere --
 * not a pill, not hp_stat_strip()'s 58px/72px-padding scale (that weight is
 * reserved for HomeProp's own operating stats; a third-party rating must
 * not read as their equal). Roughly 2x the prior numeral scale (~38px vs
 * ~20px), padding in the ~20-24px range, same navy/gold tokens as before.
 *
 * RESERVED SPACE / RESOLUTION STATE (component fix, 2026-08-28):
 * `.hp-rga--reserved` and `.hp-rga--ready` share IDENTICAL box dimensions
 * (padding, border-radius, min-width, gap, font sizes) -- the only
 * difference between them is opacity. This is deliberate: the JS adds
 * `--reserved` the instant it knows a fetch attempt will happen (i.e. not
 * throttled), well before the fetch resolves, so the final box size is
 * already occupied and invisible. `--ready` then only changes opacity
 * (fade in), never dimensions -- nothing shifts when content appears.
 * If the fetch fails, the JS removes `--reserved` and the element falls
 * back to the bare `.hp-rga` rule below (line-height:0, no border, no
 * background, no padding) -- the exact same ~0px collapsed state as
 * before this fix, so fail-closed still holds with no dead space left
 * behind. A throttled load never gets `--reserved` in the first place.
 *
 * Do NOT give the bare `.hp-rga` rule (no modifier class) a border,
 * background, min-height, or min-width -- that would defeat the
 * fail-closed collapse this component depends on.
 */

.hp-rga {
	display: inline-block;
	text-decoration: none;
	line-height: 0; /* collapsed default: throttled, or fetch failed and un-reserved */
}

.hp-rga__value,
.hp-rga__stars,
.hp-rga__count,
.hp-rga__attr {
	display: none; /* nothing renders/reserves until --reserved or --ready is added by JS */
}

.hp-rga.hp-rga--reserved,
.hp-rga.hp-rga--ready {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	line-height: normal;
	font-family: Poppins, sans-serif;
	background: #10233F;
	color: #FFFFFF;
	border-radius: 20px;
	padding: 22px 28px;
	box-shadow: 0 16px 40px rgba(16, 35, 63, 0.35);
	min-width: 530px; /* matches measured rendered width at "4.7"/"77 Google reviews" -- tightened from an earlier 360px guess so the reserved box doesn't visibly grow on resolve even though pure width growth in place didn't register as measured CLS */
	box-sizing: border-box;
	opacity: 0; /* reserved: box is real, content is invisible */
	transition: opacity 240ms ease-out;
	cursor: default;
}

.hp-rga.hp-rga--ready {
	opacity: 1; /* only opacity changes on resolve -- box already sized */
	cursor: pointer;
}

.hp-rga.hp-rga--ready:hover,
.hp-rga.hp-rga--ready:focus-visible {
	box-shadow: 0 18px 44px rgba(16, 35, 63, 0.45);
}

.hp-rga--reserved .hp-rga__value,
.hp-rga--ready .hp-rga__value {
	display: block;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	height: 38px; /* explicit, not content-derived -- an empty span with only
		line-height still collapses to 0px in some engines; height keeps the
		reserved box the same size whether or not text has been set yet */
	min-width: 3ch; /* rating is always formatted N.N -- 3 characters */
	font-variant-numeric: tabular-nums;
	color: #FFFFFF;
}

.hp-rga--reserved .hp-rga__stars,
.hp-rga--ready .hp-rga__stars {
	display: block;
	width: 106px;
	height: 20px;
	position: relative;
	--hp-rga-fill: 0%;
	/* Two stacked star rows below: a dim base row (::before) and a gold row
	   clipped to the live fill percentage (::after). This is a VISUAL
	   approximation of the exact float the API returned -- it does not round
	   or restate the rating number itself, which renders separately and
	   verbatim in .hp-rga__value. */
}

/* Star row rendered via a repeating clip-path star shape kept simple and
   dependency-free: five CSS "star" characters layered with a fill overlay. */
.hp-rga--reserved .hp-rga__stars::before,
.hp-rga--ready .hp-rga__stars::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	inset: 0;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 2.5px;
	color: rgba(255, 255, 255, 0.25);
	white-space: nowrap;
}

.hp-rga--reserved .hp-rga__stars::after,
.hp-rga--ready .hp-rga__stars::after {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	inset: 0;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 2.5px;
	color: #EEB211;
	white-space: nowrap;
	width: var(--hp-rga-fill);
	overflow: hidden;
}

.hp-rga--reserved .hp-rga__count,
.hp-rga--ready .hp-rga__count {
	display: block;
	font-size: 16px;
	font-weight: 500;
	height: 20px; /* explicit for the same reason as .hp-rga__value above */
	min-width: 10ch; /* fits "77 Google reviews" without growing on resolve */
	color: #C7D2E2;
	white-space: nowrap;
}

.hp-rga--reserved .hp-rga__attr,
.hp-rga--ready .hp-rga__attr {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #9FB0C6;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	padding-left: 14px;
	margin-left: 2px;
	white-space: nowrap;
}

@media (max-width: 480px) {
	.hp-rga.hp-rga--reserved,
	.hp-rga.hp-rga--ready {
		flex-wrap: wrap;
		gap: 8px 14px;
		padding: 18px 20px;
		min-width: 0;
		width: 100%;
	}
	.hp-rga--reserved .hp-rga__value,
	.hp-rga--ready .hp-rga__value {
		font-size: 30px;
		height: 30px;
	}
	.hp-rga--reserved .hp-rga__attr,
	.hp-rga--ready .hp-rga__attr {
		border-left: none;
		padding-left: 0;
		margin-left: 0;
	}
}