/*
 * SFS Google Reviews — front end.
 *
 * LOADED ONLY WHERE THE WIDGET IS. See includes/Assets.php. A review plugin
 * that adds a stylesheet to the checkout and the blog archive has slowed the
 * site down, whatever it does about API calls.
 *
 * DIRECTION. Logical properties only — there is no `left` or `right` in this
 * file and none may be added. These sites are Hebrew, the same markup has to
 * survive an English install, and under RTL the first flex child renders at the
 * visual right. That one rule is the most common way an RTL layout breaks.
 *
 * THEME-PROOF BY DESIGN. Every value is a CSS custom property on `.sfs-gre`, so
 * a customer or a theme can restyle the whole widget by setting four variables
 * and never has to fight a specificity war with `!important`.
 */

.sfs-gre {
	--sfs-gre-ink: #1f2328;
	--sfs-gre-muted: #6a7178;
	--sfs-gre-rule: #e3e6e9;
	--sfs-gre-paper: #fff;
	--sfs-gre-star: #f5a623;
	--sfs-gre-star-off: #d8dcdf;
	--sfs-gre-radius: 12px;
	--sfs-gre-gap: 18px;
	--sfs-gre-card-min: 260px;

	box-sizing: border-box;
	color: var(--sfs-gre-ink);
	font-size: 15px;
	line-height: 1.6;
}

.sfs-gre *,
.sfs-gre *::before,
.sfs-gre *::after {
	box-sizing: inherit;
}

/* ── header / summary ─────────────────────────────────────────────────────── */

.sfs-gre__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-block-end: var(--sfs-gre-gap);
}

.sfs-gre__title {
	margin: 0;
	font-size: 1.35em;
	line-height: 1.3;
}

.sfs-gre__summary {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.sfs-gre__avg {
	font-size: 1.2em;
	font-weight: 700;
	/* A number must not be reordered by the bidi algorithm inside Hebrew text. */
	direction: ltr;
	unicode-bidi: isolate;
}

.sfs-gre__count {
	color: var(--sfs-gre-muted);
	font-size: 0.9em;
}

/* ── stars ────────────────────────────────────────────────────────────────── */

.sfs-gre__stars {
	display: inline-flex;
	/* The row of stars is a fixed left-to-right shape in every language: the
	   filled ones always start at the same edge as each other, not at the
	   paragraph's edge. */
	direction: ltr;
	unicode-bidi: isolate;
	gap: 1px;
	line-height: 1;
}

.sfs-gre__star {
	color: var(--sfs-gre-star-off);
	font-size: 1.05em;
}

.sfs-gre__star.is-on {
	color: var(--sfs-gre-star);
}

/* ── the cards ────────────────────────────────────────────────────────────── */

.sfs-gre__items {
	display: grid;
	gap: var(--sfs-gre-gap);
	grid-template-columns: repeat(auto-fill, minmax(var(--sfs-gre-card-min), 1fr));
}

.sfs-gre__item {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	border: 1px solid var(--sfs-gre-rule);
	border-radius: var(--sfs-gre-radius);
	background: var(--sfs-gre-paper);
}

.sfs-gre__meta {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sfs-gre__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.sfs-gre__avatar--initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--sfs-gre-rule);
	color: var(--sfs-gre-muted);
	font-size: 18px;
	font-weight: 600;
}

.sfs-gre__who {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.sfs-gre__name {
	font-weight: 600;
	/* A very long display name must not push the card wider than its column. */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sfs-gre__date,
.sfs-gre__source {
	color: var(--sfs-gre-muted);
	font-size: 0.82em;
}

.sfs-gre__source {
	flex: 0 0 auto;
	padding: 2px 8px;
	border: 1px solid var(--sfs-gre-rule);
	border-radius: 999px;
	white-space: nowrap;
}

.sfs-gre__text {
	/* `overflow-wrap` and not `word-break`: a long URL has to wrap, but a Hebrew
	   sentence must never be broken mid-word. */
	overflow-wrap: anywhere;
}

.sfs-gre__reply {
	padding: 10px 12px;
	border-radius: 8px;
	border-inline-start: 3px solid var(--sfs-gre-rule);
	background: #f7f8f9;
	font-size: 0.94em;
}

.sfs-gre__reply-label {
	display: block;
	margin-block-end: 2px;
	color: var(--sfs-gre-muted);
	font-size: 0.86em;
	font-weight: 600;
}

/* ── slider ───────────────────────────────────────────────────────────────── */

.sfs-gre--slider {
	position: relative;
}

.sfs-gre--slider .sfs-gre__items {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block-end: 6px;
	/* The scrollbar itself is the fallback control: with JS blocked the slider
	   is still a scrollable row, never a broken one. */
	scrollbar-width: thin;
}

.sfs-gre--slider .sfs-gre__item {
	flex: 0 0 min(var(--sfs-gre-card-min), 82%);
	scroll-snap-align: start;
}

.sfs-gre__nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-block-start: 10px;
}

.sfs-gre__nav button {
	width: 38px;
	height: 38px;
	border: 1px solid var(--sfs-gre-rule);
	border-radius: 50%;
	background: var(--sfs-gre-paper);
	color: var(--sfs-gre-ink);
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
}

.sfs-gre__nav button:hover,
.sfs-gre__nav button:focus-visible {
	border-color: var(--sfs-gre-muted);
}

/* ── badge ────────────────────────────────────────────────────────────────── */

.sfs-gre-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	border: 1px solid var(--sfs-gre-rule);
	border-radius: var(--sfs-gre-radius);
	background: var(--sfs-gre-paper);
	text-decoration: none;
	color: inherit;
}

.sfs-gre-badge__avg {
	font-size: 1.5em;
	font-weight: 700;
	direction: ltr;
	unicode-bidi: isolate;
}

.sfs-gre-badge__count {
	color: var(--sfs-gre-muted);
	font-size: 0.86em;
}

/* ── editor-only empty state ──────────────────────────────────────────────── */

.sfs-gre--empty {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 20px;
	border: 1px dashed var(--sfs-gre-rule);
	border-radius: var(--sfs-gre-radius);
	color: var(--sfs-gre-muted);
	font-size: 0.92em;
}

/* ── collection form ──────────────────────────────────────────────────────── */

.sfs-gre-form__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	max-width: 560px;
	padding: 20px;
	border: 1px solid var(--sfs-gre-rule);
	border-radius: var(--sfs-gre-radius);
	background: var(--sfs-gre-paper);
}

.sfs-gre-form__title {
	margin: 0;
	font-size: 1.2em;
}

.sfs-gre-form__row {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
}

.sfs-gre-form__row input,
.sfs-gre-form__row textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--sfs-gre-rule);
	border-radius: 8px;
	font: inherit;
	color: inherit;
}

/*
 * The rating control is five radio buttons rendered right-to-left in source
 * order, so `~` can light every star before the checked one. It is the one
 * place a visual direction is intentional and it is scoped to this element
 * rather than to the page.
 */
.sfs-gre-form__rating {
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
}

.sfs-gre-form__rating legend {
	/* A fieldset legend cannot be a flex item, so it is taken out of the flow
	   and the label above it does the visible work. */
	float: none;
	width: 100%;
	margin-block-end: 6px;
	padding: 0;
	font-weight: 600;
}

.sfs-gre-form__rating input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sfs-gre-form__rating label {
	color: var(--sfs-gre-star-off);
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
}

.sfs-gre-form__rating input:checked ~ label,
.sfs-gre-form__rating label:hover,
.sfs-gre-form__rating label:hover ~ label {
	color: var(--sfs-gre-star);
}

.sfs-gre-form__rating input:focus-visible + label {
	outline: 2px solid currentcolor;
	outline-offset: 2px;
}

/* The honeypot. `display:none` is the one thing a smart bot checks for, so it
   is moved out of view instead — and it is never a required field, so a screen
   reader that fills it in cannot block a real person. */
.sfs-gre-form__hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.sfs-gre-form__actions button {
	padding: 11px 22px;
	border: 0;
	border-radius: 8px;
	background: var(--sfs-gre-ink);
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
}

.sfs-gre-form__done,
.sfs-gre-form__error {
	margin-block-end: 12px;
	padding: 12px 16px;
	border-radius: 8px;
}

.sfs-gre-form__done {
	background: #e7f0e6;
	color: #2f5a31;
}

.sfs-gre-form__error {
	background: #fbeaea;
	color: #8f3227;
}

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.sfs-gre {
		--sfs-gre-gap: 14px;
		--sfs-gre-card-min: 100%;
	}

	.sfs-gre__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.sfs-gre__nav {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfs-gre--slider .sfs-gre__items {
		scroll-behavior: auto;
	}
}

@media (prefers-color-scheme: dark) {
	/*
	 * Only applied when the theme itself declares a dark scheme. Without the
	 * `color-scheme` guard, a light theme on a phone set to dark would get white
	 * text on a white card — which is what happens when a plugin assumes the OS
	 * preference is the page's.
	 */
	:root[data-theme="dark"] .sfs-gre,
	.sfs-gre:where([data-scheme="dark"], .has-dark-scheme) {
		--sfs-gre-ink: #e8eaed;
		--sfs-gre-muted: #9aa1a8;
		--sfs-gre-rule: #343a40;
		--sfs-gre-paper: #1c1f22;
	}
}

@media print {
	.sfs-gre__nav,
	.sfs-gre-form {
		display: none;
	}

	.sfs-gre--slider .sfs-gre__items {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		overflow: visible;
	}
}