/**
 * Reviews — summary, list, stars badge, photo lightbox.
 *
 * The sibling modules' rules (read product-forms/assets/css/forms.css's header):
 *
 * ⚠️ SIZING: never a bare `rem`. ACSS runs a 62.5% root on shoplw.ca (1rem =
 *    10px) and 100% on shoplw.com. Font sizes come from ACSS type tokens through
 *    the scoped --lw-rv-* tokens; everything else is `em`; hairlines are px. The
 *    rem values in the var() fallbacks are for a site with NO ACSS — don't
 *    "correct" them.
 * ⚠️ COLOUR: no bare hex outside the token block; the accent chains
 *    --action (.ca) -> --primary (.com) -> a literal, because .com has no --action.
 * ⚠️ LAYOUT: flex/grid defaults are stated, never inherited — ACSS targets bare
 *    elements inside sections.
 * ⚠️ THEMING: override the --lw-rv-* tokens in the theme / ACSS custom CSS / the
 *    builder's global CSS. Nothing here is injected inline — Etch drops
 *    wp_add_inline_style() output (lw-google-reviews).
 */

/* ------------------------------------------------------------------ tokens */

.lw-rv,
.lw-rv-badge,
.lw-rv-lightbox,
.lw-rv-placeholder {
	--lw-rv-text-xs: var(--text-xs, 0.79rem);
	--lw-rv-text-s: var(--text-s, 0.89rem);
	--lw-rv-text: var(--text-m, 1rem);
	--lw-rv-title: var(--text-l, 1.13rem);
	--lw-rv-heading: var(--h3, 1.27rem);
	--lw-rv-big: var(--h2, 1.6rem);

	--lw-rv-radius: var(--radius-m, 6px);
	--lw-rv-radius-l: var(--radius-l, var(--radius, 10px));

	--lw-rv-star: #f5a623;
	--lw-rv-star-empty: var(--neutral-light, #d6d6d6);
	--lw-rv-accent: var(--action, var(--primary, #1e3a5f));
	--lw-rv-ink: var(--text-color, #222);
	--lw-rv-ink-soft: var(--neutral-dark, #555);
	--lw-rv-border: var(--neutral-light, #dcdcdc);
	--lw-rv-surface: var(--white, #fff);
	--lw-rv-surface-alt: var(--neutral-ultra-light, #f5f5f5);
	--lw-rv-verified: var(--success, #15803d);
	--lw-rv-verified-bg: var(--success-ultra-light, #f0fdf4);
	--lw-rv-gap: 1em;
}

.lw-rv {
	font-size: var(--lw-rv-text);
	line-height: 1.55;
	color: var(--lw-rv-ink);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1.5em;
}

.lw-rv *,
.lw-rv *::before,
.lw-rv *::after {
	box-sizing: border-box;
}

.lw-rv [hidden],
.lw-rv-lightbox [hidden] {
	display: none !important;
}

.lw-rv__heading {
	margin: 0;
	font-size: var(--lw-rv-heading);
	line-height: 1.25;
}

/* ------------------------------------------------------------------ stars */

/* Five glyphs twice: grey underneath, the fill clipped to the rating on top. */
.lw-rv-stars {
	position: relative;
	display: inline-block;
	flex: none;
	font-size: 1.1em;
	line-height: 1;
	letter-spacing: 0.08em;
	white-space: nowrap;
	vertical-align: middle;
	color: var(--lw-rv-star-empty);
}

.lw-rv-stars::before {
	content: "\2605\2605\2605\2605\2605";
}

.lw-rv-stars__fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var(--lw-rv-star);
}

.lw-rv-stars__fill::before {
	content: "\2605\2605\2605\2605\2605";
}

/* The compact badge for cards and the summary row. */
.lw-rv-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--lw-rv-text-s);
	color: var(--lw-rv-ink-soft);
}

/* ---------------------------------------------------------------- summary */

.lw-rv__summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	gap: 1em;
	padding: 1.25em;
	background: var(--lw-rv-surface-alt);
	border-radius: var(--lw-rv-radius-l);
}

@media (min-width: 640px) {
	.lw-rv__summary {
		grid-template-columns: minmax(10em, auto) minmax(0, 1fr);
		gap: 2em;
	}
}

.lw-rv__average {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3em;
}

.lw-rv__average-value {
	font-size: var(--lw-rv-big);
	font-weight: 700;
	line-height: 1;
}

.lw-rv__based-on {
	font-size: var(--lw-rv-text-s);
	color: var(--lw-rv-ink-soft);
}

.lw-rv__histogram {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	font-size: var(--lw-rv-text-s);
}

.lw-rv__bar {
	display: grid;
	grid-template-columns: 4.5em minmax(0, 1fr) 2.5em;
	align-items: center;
	gap: 0.6em;
	margin: 0;
}

.lw-rv__bar-track {
	display: block;
	height: 0.6em;
	background: var(--lw-rv-border);
	border-radius: 999px;
	overflow: hidden;
}

.lw-rv__bar-fill {
	display: block;
	height: 100%;
	background: var(--lw-rv-star);
}

.lw-rv__bar-count {
	text-align: end;
	color: var(--lw-rv-ink-soft);
}

/* ------------------------------------------------------------------- list */

.lw-rv__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.lw-rv__review {
	margin: 0;
	padding: 1.25em 0;
	border-block-end: 1px solid var(--lw-rv-border);
}

.lw-rv__card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.6em;
}

.lw-rv__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.3em;
}

.lw-rv__title {
	margin: 0;
	font-size: var(--lw-rv-title);
	line-height: 1.3;
}

.lw-rv__meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.9em;
	font-size: var(--lw-rv-text-s);
	color: var(--lw-rv-ink-soft);
}

.lw-rv__reviewer {
	font-weight: 600;
	color: var(--lw-rv-ink);
}

.lw-rv__verified {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.1em 0.6em;
	font-size: var(--lw-rv-text-xs);
	font-weight: 600;
	color: var(--lw-rv-verified);
	background: var(--lw-rv-verified-bg);
	border-radius: 999px;
}

.lw-rv__verified::before {
	content: "\2713";
}

.lw-rv__body p,
.lw-rv__reply p {
	margin: 0 0 0.6em;
}

.lw-rv__body p:last-child,
.lw-rv__reply p:last-child {
	margin-block-end: 0;
}

.lw-rv__disclosure {
	margin: 0;
	font-size: var(--lw-rv-text-xs);
	font-style: italic;
	color: var(--lw-rv-ink-soft);
}

.lw-rv__photos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.lw-rv__photos li {
	margin: 0;
}

.lw-rv__photo {
	display: block;
	width: 6em;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--lw-rv-radius);
	border: 1px solid var(--lw-rv-border);
}

.lw-rv__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lw-rv__photo:focus-visible {
	outline: 2px solid var(--lw-rv-accent);
	outline-offset: 2px;
}

.lw-rv__reply {
	margin-block-start: 0.4em;
	padding: 0.9em 1.1em;
	background: var(--lw-rv-surface-alt);
	border-inline-start: 3px solid var(--lw-rv-accent);
	border-radius: var(--lw-rv-radius);
	font-size: var(--lw-rv-text-s);
}

.lw-rv__reply-label {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.9em;
	font-weight: 600;
}

.lw-rv__reply-label .lw-rv__date {
	font-weight: 400;
	color: var(--lw-rv-ink-soft);
}

/* "Show all N reviews" — a native <details>; no script. */
.lw-rv__more > summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-block-start: 1em;
	padding: 0.6em 1.2em;
	font-size: var(--lw-rv-text-s);
	font-weight: 600;
	color: var(--lw-rv-accent);
	border: 1px solid currentColor;
	border-radius: var(--lw-rv-radius);
	cursor: pointer;
	list-style: none;
}

.lw-rv__more > summary::-webkit-details-marker {
	display: none;
}

.lw-rv__more[open] > summary {
	display: none;
}

.lw-rv__more > summary:focus-visible {
	outline: 2px solid var(--lw-rv-accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- lightbox */

.lw-rv-lightbox {
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: var(--lw-rv-radius-l);
	background: var(--lw-rv-surface);
	overflow: hidden;
}

.lw-rv-lightbox::backdrop {
	background: rgb(0 0 0 / 0.8);
}

.lw-rv-lightbox__bar {
	position: absolute;
	inset-block-start: 0.5em;
	inset-inline-end: 0.5em;
	margin: 0;
}

.lw-rv-lightbox__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4em;
	height: 2.4em;
	padding: 0;
	font: inherit;
	font-size: var(--lw-rv-title);
	line-height: 1;
	color: var(--lw-rv-ink);
	background: var(--lw-rv-surface);
	border: 1px solid var(--lw-rv-border);
	border-radius: 999px;
	cursor: pointer;
}

.lw-rv-lightbox__img {
	display: block;
	max-width: min(92vw, 1100px);
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* ----------------------------------------------- builder-canvas placeholder */

.lw-rv-placeholder {
	padding: 1em;
	font-size: var(--lw-rv-text-s);
	color: var(--lw-rv-ink-soft);
	border: 1px dashed var(--lw-rv-border);
	border-radius: var(--lw-rv-radius);
}