/*!
 * Stepfox Hotel Booking — guest reviews (handle `stepfox-hb-reviews`).
 *
 * Block `hotel-booking/stay-reviews`: summary (gold score, sub-rating bars,
 * rating histogram), sort/filter toolbar, review cards with host replies,
 * pager, and the "Write a review" disclosure + accessible star form.
 *
 * Colours come ONLY from the 16 palette presets (var(--wp--preset--color--*))
 * so the dark scheme flips everything. Stars are a CSS mask (partial fill via
 * --sfhb-rating), so there is no colour in any image. Logical properties
 * throughout; motion is wrapped in prefers-reduced-motion: no-preference.
 *
 *  1. Tokens + base        5. Review card
 *  2. Stars                6. Pager
 *  3. Summary              7. Write a review (form + star radios)
 *  4. Toolbar              8. States, responsive
 */

/* ==========================================================================
   1. Tokens + base
   ========================================================================== */

.sfhb-reviews {
	--rv-ink: var(--wp--preset--color--ink);
	--rv-muted: var(--wp--preset--color--muted);
	--rv-panel: var(--wp--preset--color--panel);
	--rv-panel-2: var(--wp--preset--color--panel-2);
	--rv-base: var(--wp--preset--color--base);
	--rv-line: var(--wp--preset--color--line);
	--rv-gold: var(--wp--preset--color--gold);
	--rv-aegean: var(--wp--preset--color--accent-2);
	--rv-accent: var(--wp--preset--color--accent);
	--rv-sage: var(--wp--preset--color--neon);
	--rv-sea: var(--wp--preset--color--turf);
	--rv-edge: var(--wp--preset--color--edge);
	--rv-border: var(--wp--preset--color--muted);
	--rv-radius: var(--sfhb-radius-card, 16px);
	--rv-radius-input: var(--sfhb-radius-input, 12px);
	--rv-display: var(--sfhb-font-display, var(--wp--preset--font-family--display, Georgia, "Times New Roman", serif));
	--rv-num: var(--sfhb-font-num, var(--wp--preset--font-family--num, inherit));
	--rv-ease: var(--sfhb-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	--rv-ring: 2px solid var(--wp--preset--color--accent-2);

	display: grid;
	gap: clamp(20px, 3vw, 32px);
	color: var(--rv-ink);
	min-inline-size: 0;
	scroll-margin-block-start: calc(var(--sfhb-header-h, 72px) + 16px);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.sfhb-reviews {
		--rv-border: color-mix(in srgb, var(--wp--preset--color--ink) 32%, transparent);
	}
}

.sfhb-reviews *,
.sfhb-reviews *::before,
.sfhb-reviews *::after {
	box-sizing: border-box;
}

.sfhb-reviews .sfhb-sr-only {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.sfhb-reviews p {
	margin: 0;
}

.sfhb-reviews__anchor {
	display: block;
	block-size: 0;
	scroll-margin-block-start: calc(var(--sfhb-header-h, 72px) + 16px);
}

.sfhb-reviews__heading {
	margin: 0;
	font-family: var(--rv-display);
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.sfhb-reviews .sfhb-icon,
.sfhb-reviews .sfhb-rv-ico {
	flex: none;
}

/* ==========================================================================
   2. Stars (CSS mask, partial fill)
   ========================================================================== */

.sfhb-rv-stars {
	--sfhb-rv-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 6.2 6.8.95-4.95 4.7 1.25 6.75L12 17.7l-6.05 3.3 1.25-6.75L2.25 9.55l6.8-.95z'/%3E%3C/svg%3E");
	--sfhb-s: var(--sfhb-star-size, 16px);
	position: relative;
	display: inline-block;
	flex: none;
	inline-size: calc(var(--sfhb-s) * 5);
	block-size: var(--sfhb-s);
	vertical-align: -0.2em;
	background: var(--wp--preset--color--panel-2);
	-webkit-mask: var(--sfhb-rv-star) 0 0 / var(--sfhb-s) var(--sfhb-s) repeat-x;
	mask: var(--sfhb-rv-star) 0 0 / var(--sfhb-s) var(--sfhb-s) repeat-x;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.sfhb-rv-stars {
		background: color-mix(in srgb, var(--wp--preset--color--muted) 38%, transparent);
	}
}

.sfhb-rv-stars::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: calc(var(--sfhb-rating, 0) / 5 * 100%);
	background: var(--wp--preset--color--gold);
}

.sfhb-rv-stars--lg {
	--sfhb-s: 24px;
}

/* ==========================================================================
   3. Summary
   ========================================================================== */

.sfhb-reviews__summary {
	display: grid;
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}

.sfhb-reviews__summary > .sfhb-reviews__panel:nth-child(2):last-child {
	grid-column: span 2;
}

.sfhb-reviews__score-card,
.sfhb-reviews__panel {
	background: var(--rv-panel);
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	padding: clamp(18px, 2.4vw, 26px);
}

.sfhb-reviews__score-card {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: 6px;
	background: linear-gradient(160deg, var(--rv-panel), var(--rv-panel-2));
}

.sfhb-reviews__score {
	display: flex;
	align-items: baseline;
	gap: 8px;
	line-height: 0.95;
}

.sfhb-reviews__score-num {
	font-family: var(--rv-display);
	font-size: clamp(3.6rem, 3rem + 3vw, 5rem);
	font-weight: 600;
	font-variant-numeric: lining-nums tabular-nums;
	letter-spacing: -0.03em;
	color: var(--rv-gold);
}

.sfhb-reviews__score-max {
	font-size: 1rem;
	font-weight: 600;
	color: var(--rv-muted);
}

.sfhb-reviews__band {
	font-family: var(--rv-display);
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 1.2;
}

.sfhb-reviews__count {
	font-size: 0.9rem;
	color: var(--rv-muted);
}

.sfhb-reviews__verified {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-block-start: 8px;
	font-size: 0.85rem;
	line-height: 1.35;
	color: var(--rv-ink);
}

.sfhb-reviews__verified svg {
	color: var(--rv-sage);
	margin-block-start: 1px;
}

.sfhb-reviews__sub {
	margin: 0 0 14px;
	font-family: inherit;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rv-muted);
}

.sfhb-reviews__cats,
.sfhb-reviews__dist {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfhb-reviews__cat {
	display: grid;
	grid-template-columns: minmax(0, 7.5em) minmax(0, 1fr) 2.2em;
	align-items: center;
	gap: 12px;
	font-size: 0.92rem;
}

.sfhb-reviews__cat-val,
.sfhb-reviews__dist-n {
	text-align: end;
	font-family: var(--rv-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sfhb-reviews__track {
	display: block;
	block-size: 8px;
	border-radius: 999px;
	background: var(--rv-panel-2);
	overflow: hidden;
}

.sfhb-reviews__fill {
	display: block;
	inline-size: var(--sfhb-pct, 0%);
	block-size: 100%;
	border-radius: inherit;
	background: var(--rv-aegean);
}

.sfhb-reviews__track--gold .sfhb-reviews__fill {
	background: var(--rv-gold);
}

@media (prefers-reduced-motion: no-preference) {
	.sfhb-reviews__fill {
		animation: sfhb-rv-grow 0.8s var(--rv-ease) both;
	}

	@keyframes sfhb-rv-grow {
		from {
			inline-size: 0;
		}
	}
}

/* Histogram rows are real buttons (rating filter) once JS has enabled them. */
.sfhb-reviews__dist-row {
	display: grid;
	grid-template-columns: 4.6em minmax(0, 1fr) 2.2em;
	align-items: center;
	gap: 12px;
	margin: 0 -6px;
	padding: 4px 6px;
	inline-size: calc(100% + 12px);
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--rv-ink);
	font: inherit;
	font-size: 0.92rem;
	text-align: start;
	cursor: default;
}

.sfhb-reviews__dist-row:disabled {
	color: var(--rv-ink);
	opacity: 1;
}

.sfhb-reviews.is-enhanced .sfhb-reviews__dist-row {
	cursor: pointer;
	transition: background-color 0.15s var(--rv-ease);
}

.sfhb-reviews.is-enhanced .sfhb-reviews__dist-row:hover {
	background: var(--rv-panel-2);
}

.sfhb-reviews__dist-row:focus-visible {
	outline: var(--rv-ring);
	outline-offset: 1px;
}

.sfhb-reviews__dist-row.is-active {
	background: var(--rv-panel-2);
	box-shadow: inset 0 0 0 1.5px var(--rv-gold);
	font-weight: 700;
}

/* ==========================================================================
   4. Toolbar
   ========================================================================== */

.sfhb-reviews__toolbar {
	display: grid;
	gap: 10px;
	margin: 0;
}

.sfhb-reviews__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
}

.sfhb-reviews__ctl {
	display: grid;
	gap: 4px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rv-muted);
}

.sfhb-reviews__ctl select,
.sfhb-rv-form select {
	min-block-size: 44px;
	padding: 9px 12px;
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-input);
	background-color: var(--rv-panel);
	color: var(--rv-ink);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
}

.sfhb-reviews__chip {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}

.sfhb-reviews__chip input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.sfhb-reviews__chip span,
.sfhb-reviews__clear {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-block-size: 44px;
	padding: 0 16px;
	border: 1px solid var(--rv-border);
	border-radius: 999px;
	background: var(--rv-panel);
	color: var(--rv-ink);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	transition: background-color 0.15s var(--rv-ease), color 0.15s var(--rv-ease), border-color 0.15s var(--rv-ease);
}

.sfhb-reviews__chip:hover span,
.sfhb-reviews__clear:hover {
	background: var(--rv-panel-2);
}

.sfhb-reviews__chip input:checked + span {
	background: var(--rv-ink);
	border-color: var(--rv-ink);
	color: var(--rv-base);
}

.sfhb-reviews__chip input:focus-visible + span,
.sfhb-reviews__clear:focus-visible {
	outline: var(--rv-ring);
	outline-offset: 2px;
}

.sfhb-reviews__clear {
	cursor: pointer;
	border-color: var(--rv-gold);
}

.sfhb-reviews__clear[hidden] {
	display: none;
}

.sfhb-reviews__count-line {
	font-size: 0.9rem;
	color: var(--rv-muted);
}

.sfhb-reviews__apply {
	min-block-size: 44px;
}

/* ==========================================================================
   5. Review card
   ========================================================================== */

.sfhb-reviews__list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-margin-block-start: calc(var(--sfhb-header-h, 72px) + 16px);
}

.sfhb-reviews__list:focus {
	outline: none;
}

.sfhb-reviews__none {
	padding: 28px;
	border: 1px dashed var(--rv-border);
	border-radius: var(--rv-radius);
	text-align: center;
	color: var(--rv-muted);
}

.sfhb-rv {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfhb-rv__card {
	display: grid;
	gap: 12px;
	padding: clamp(18px, 2.4vw, 26px);
	background: var(--rv-panel);
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
}

.sfhb-rv__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}

.sfhb-rv__avatar {
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: 50%;
	background: var(--rv-aegean);
	color: var(--rv-base);
	font-family: var(--rv-display);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1;
}

.sfhb-rv__avatar--1 {
	background: var(--rv-accent);
}

.sfhb-rv__avatar--2 {
	background: var(--rv-sage);
}

.sfhb-rv__avatar--3 {
	background: var(--wp--preset--color--violet);
}

.sfhb-rv__avatar--4 {
	background: var(--rv-gold);
}

.sfhb-rv__who {
	display: grid;
	gap: 2px;
	min-inline-size: 0;
}

.sfhb-rv__name {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.sfhb-rv__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 0;
	font-size: 0.84rem;
	color: var(--rv-muted);
}

.sfhb-rv__meta > span:not(:first-child)::before {
	content: "\00b7";
	margin-inline: 0.5em;
}

.sfhb-rv__rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.sfhb-rv__rating .sfhb-rv-stars {
	--sfhb-s: 16px;
}

.sfhb-rv__rating-num {
	font-family: var(--rv-num);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sfhb-rv__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sfhb-rv__verified {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px 4px 8px;
	border-radius: 999px;
	background: var(--rv-sea);
	color: var(--rv-ink);
	font-size: 0.8rem;
	font-weight: 700;
}

.sfhb-rv__verified svg {
	color: var(--rv-sage);
}

.sfhb-rv__title {
	margin: 0;
	font-family: var(--rv-display);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.3;
}

.sfhb-rv__text {
	font-size: 1rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.sfhb-rv__text p {
	margin: 0 0 0.8em;
}

.sfhb-rv__text p:last-child {
	margin-block-end: 0;
}

.sfhb-reviews.is-enhanced .sfhb-rv__text.is-clamped:not(.is-open) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 5;
	line-clamp: 5;
	overflow: hidden;
}

.sfhb-rv__more {
	justify-self: start;
	margin: -4px 0 0;
	padding: 6px 0;
	border: 0;
	background: none;
	color: var(--rv-aegean);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sfhb-rv__more:focus-visible {
	outline: var(--rv-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

.sfhb-rv__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfhb-rv__cats li {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--rv-panel-2);
	font-size: 0.8rem;
	color: var(--rv-muted);
}

.sfhb-rv__cats b {
	color: var(--rv-ink);
	font-family: var(--rv-num);
	font-variant-numeric: tabular-nums;
}

.sfhb-rv__date {
	font-size: 0.82rem;
	color: var(--rv-muted);
}

.sfhb-rv__reply {
	display: grid;
	gap: 6px;
	margin-block-start: 4px;
	padding: 14px 16px;
	border-inline-start: 3px solid var(--rv-aegean);
	border-radius: 4px 12px 12px 4px;
	background: var(--rv-panel-2);
}

.sfhb-rv__reply-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 0.86rem;
	font-weight: 700;
}

.sfhb-rv__reply-head svg {
	color: var(--rv-aegean);
}

.sfhb-rv__reply-head time {
	font-weight: 500;
	color: var(--rv-muted);
}

.sfhb-rv__reply-text {
	font-size: 0.95rem;
	line-height: 1.6;
}

.sfhb-rv__reply-text p {
	margin: 0 0 0.6em;
}

.sfhb-rv__reply-text p:last-child {
	margin-block-end: 0;
}

/* ==========================================================================
   6. Pager
   ========================================================================== */

.sfhb-rv-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sfhb-rv-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0 14px;
	border: 1px solid var(--rv-border);
	border-radius: 12px;
	background: var(--rv-panel);
	color: var(--rv-ink);
	font-family: var(--rv-num);
	font-size: 0.95rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background-color 0.15s var(--rv-ease);
}

a.sfhb-rv-pager__link:hover {
	background: var(--rv-panel-2);
}

a.sfhb-rv-pager__link:focus-visible {
	outline: var(--rv-ring);
	outline-offset: 2px;
}

.sfhb-rv-pager__link.is-current {
	background: var(--rv-ink);
	border-color: var(--rv-ink);
	color: var(--rv-base);
}

.sfhb-rv-pager__link.is-disabled {
	opacity: 0.45;
}

.sfhb-rv-pager__gap {
	padding-inline: 4px;
	color: var(--rv-muted);
}

/* ==========================================================================
   7. Write a review
   ========================================================================== */

.sfhb-reviews__write {
	background: var(--rv-panel);
	border: 1px solid var(--rv-line);
	border-radius: var(--rv-radius);
	overflow: clip;
	scroll-margin-block-start: calc(var(--sfhb-header-h, 72px) + 16px);
}

.sfhb-reviews__write-sum {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 18px clamp(18px, 2.4vw, 26px);
	cursor: pointer;
	list-style: none;
}

.sfhb-reviews__write-sum::-webkit-details-marker {
	display: none;
}

.sfhb-reviews__write-sum:focus-visible {
	outline: var(--rv-ring);
	outline-offset: -3px;
	border-radius: var(--rv-radius);
}

.sfhb-reviews__write-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-block-size: 48px;
	padding: 0 20px;
	border-radius: var(--sfhb-radius-btn, 12px);
	background: var(--rv-accent);
	color: var(--rv-base);
	font-weight: 700;
	font-size: 1rem;
}

.sfhb-reviews__write-btn svg:last-child {
	transition: transform 0.2s var(--rv-ease);
}

.sfhb-reviews__write[open] .sfhb-reviews__write-btn svg:last-child {
	transform: rotate(180deg);
}

.sfhb-reviews__write-lead {
	flex: 1 1 260px;
	color: var(--rv-muted);
	font-size: 0.95rem;
}

.sfhb-reviews__write-body {
	display: grid;
	gap: 18px;
	padding: 4px clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 28px);
	border-block-start: 1px solid var(--rv-line);
	padding-block-start: clamp(18px, 2.4vw, 24px);
}

.sfhb-rv-verified-note,
.sfhb-rv-note,
.sfhb-rv-success {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: var(--rv-sea);
	color: var(--rv-ink);
	font-size: 0.94rem;
	line-height: 1.5;
}

.sfhb-rv-verified-note svg,
.sfhb-rv-success > svg {
	color: var(--rv-sage);
	margin-block-start: 1px;
}

.sfhb-rv-note--err {
	background: var(--rv-panel-2);
	box-shadow: inset 0 0 0 1.5px var(--rv-accent);
	font-weight: 600;
}

.sfhb-rv-note:focus,
.sfhb-rv-success:focus {
	outline: none;
}

.sfhb-rv-success[hidden] {
	display: none;
}

.sfhb-rv-success p {
	margin: 4px 0 0;
}

.sfhb-reviews__gate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 18px clamp(18px, 2.4vw, 24px);
	border-radius: var(--rv-radius);
	background: var(--rv-panel-2);
	color: var(--rv-muted);
	font-size: 0.95rem;
	line-height: 1.5;
}

.sfhb-reviews__gate p {
	flex: 1 1 260px;
	color: var(--rv-ink);
}

.sfhb-reviews__gate svg {
	color: var(--rv-muted);
}

.sfhb-reviews__signin {
	min-block-size: 44px;
}

.sfhb-reviews__empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 22px clamp(18px, 2.4vw, 26px);
	border: 1px dashed var(--rv-border);
	border-radius: var(--rv-radius);
	color: var(--rv-muted);
}

.sfhb-reviews__empty p {
	display: grid;
	gap: 2px;
}

.sfhb-reviews__empty strong {
	color: var(--rv-ink);
	font-family: var(--rv-display);
	font-size: 1.15rem;
}

/* Form */
.sfhb-rv-form {
	display: grid;
	gap: 20px;
	margin: 0;
}

.sfhb-rv-form[hidden] {
	display: none;
}

.sfhb-rv-trap {
	position: absolute;
	inset-inline-start: -9999px;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
}

.sfhb-rv-fs {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.sfhb-rv-legend,
.sfhb-rv-field > label {
	display: block;
	padding: 0;
	margin: 0 0 6px;
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1.3;
}

.sfhb-rv-legend--solo {
	margin-block-end: 10px;
}

.sfhb-rv-req {
	color: var(--rv-accent);
}

.sfhb-rv-opt {
	font-weight: 500;
	color: var(--rv-muted);
}

.sfhb-rv-hint {
	margin: 4px 0 0;
	font-size: 0.82rem;
	color: var(--rv-muted);
}

.sfhb-rv-err {
	margin: 6px 0 0;
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--rv-accent);
}

.sfhb-rv-err[hidden] {
	display: none;
}

.sfhb-rv-field {
	min-inline-size: 0;
}

.sfhb-rv-form input[type="text"],
.sfhb-rv-form input[type="email"],
.sfhb-rv-form textarea,
.sfhb-rv-form select {
	inline-size: 100%;
	min-block-size: 46px;
	padding: 11px 14px;
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-input);
	background-color: var(--rv-panel);
	color: var(--rv-ink);
	font: inherit;
	font-size: 1rem;
}

.sfhb-rv-form textarea {
	min-block-size: 150px;
	resize: vertical;
	line-height: 1.55;
}

.sfhb-rv-form ::placeholder {
	color: var(--rv-muted);
	opacity: 1;
}

.sfhb-rv-form input:focus-visible,
.sfhb-rv-form textarea:focus-visible,
.sfhb-rv-form select:focus-visible {
	outline: var(--rv-ring);
	outline-offset: 1px;
	border-color: var(--rv-aegean);
}

.sfhb-rv-form [aria-invalid="true"] {
	border-color: var(--rv-accent);
	box-shadow: 0 0 0 1px var(--rv-accent);
}

.sfhb-rv-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 16px;
}

.sfhb-rv-details__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
	gap: 14px 20px;
	padding: 16px 18px;
	border-radius: 14px;
	background: var(--rv-panel-2);
}

.sfhb-rv-details__grid .sfhb-rv-legend {
	margin-block-end: 4px;
	font-weight: 600;
}

.sfhb-rv-privacy {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.84rem;
	line-height: 1.45;
	color: var(--rv-muted);
}

.sfhb-rv-privacy svg {
	margin-block-start: 2px;
}

.sfhb-rv-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.sfhb-rv-submit {
	min-block-size: 50px;
	padding-inline: 28px;
}

.sfhb-rv-submit[disabled] {
	opacity: 0.65;
	cursor: progress;
}

.sfhb-rv-status {
	flex: 1 1 220px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--rv-muted);
}

.sfhb-rv-status.is-error {
	color: var(--rv-accent);
}

/* Star radios: natural DOM order 1..5, fill = value, keyboard = arrow keys */
.sfhb-rv-fs--lg {
	--sfhb-rate-size: 38px;
}

.sfhb-rv-fs--sm {
	--sfhb-rate-size: 26px;
}

.sfhb-rv-rate-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}

.sfhb-rv-rate {
	--sfhb-rv-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.95 6.2 6.8.95-4.95 4.7 1.25 6.75L12 17.7l-6.05 3.3 1.25-6.75L2.25 9.55l6.8-.95z'/%3E%3C/svg%3E");
	--sfhb-rate-track: var(--wp--preset--color--panel-2);
	position: relative;
	display: inline-flex;
	gap: 2px;
	border-radius: 10px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.sfhb-rv-rate {
		--sfhb-rate-track: color-mix(in srgb, var(--wp--preset--color--muted) 38%, transparent);
	}
}

.sfhb-rv-rate__input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.sfhb-rv-rate__star {
	display: block;
	inline-size: var(--sfhb-rate-size, 30px);
	block-size: var(--sfhb-rate-size, 30px);
	background: var(--sfhb-rate-track);
	-webkit-mask: var(--sfhb-rv-star) center / 100% 100% no-repeat;
	mask: var(--sfhb-rv-star) center / 100% 100% no-repeat;
	cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
	.sfhb-rv-rate__star {
		transition: background-color 0.12s var(--rv-ease), transform 0.12s var(--rv-ease);
	}

	.sfhb-rv-rate__star:hover {
		transform: scale(1.12);
	}
}

/* Fill driven by JS (data-value / data-hover). */
.sfhb-rv-rate[data-value="1"] .sfhb-rv-rate__star:nth-of-type(-n+1),
.sfhb-rv-rate[data-value="2"] .sfhb-rv-rate__star:nth-of-type(-n+2),
.sfhb-rv-rate[data-value="3"] .sfhb-rv-rate__star:nth-of-type(-n+3),
.sfhb-rv-rate[data-value="4"] .sfhb-rv-rate__star:nth-of-type(-n+4),
.sfhb-rv-rate[data-value="5"] .sfhb-rv-rate__star:nth-of-type(-n+5) {
	background: var(--wp--preset--color--gold);
}

.sfhb-rv-rate[data-hover] .sfhb-rv-rate__star:nth-of-type(n) {
	background: var(--sfhb-rate-track);
}

.sfhb-rv-rate[data-hover="1"] .sfhb-rv-rate__star:nth-of-type(-n+1),
.sfhb-rv-rate[data-hover="2"] .sfhb-rv-rate__star:nth-of-type(-n+2),
.sfhb-rv-rate[data-hover="3"] .sfhb-rv-rate__star:nth-of-type(-n+3),
.sfhb-rv-rate[data-hover="4"] .sfhb-rv-rate__star:nth-of-type(-n+4),
.sfhb-rv-rate[data-hover="5"] .sfhb-rv-rate__star:nth-of-type(-n+5) {
	background: var(--wp--preset--color--gold);
}

/* Keyboard focus: ring on the group (a mask would clip an outline on the star). */
@supports selector(:has(*)) {
	.sfhb-rv-rate:has(.sfhb-rv-rate__input:focus-visible) {
		outline: var(--rv-ring);
		outline-offset: 4px;
	}

	/* No-JS fill from the checked radio. */
	.sfhb-reviews:not(.is-enhanced) .sfhb-rv-rate:has(input[value="1"]:checked) .sfhb-rv-rate__star:nth-of-type(-n+1),
	.sfhb-reviews:not(.is-enhanced) .sfhb-rv-rate:has(input[value="2"]:checked) .sfhb-rv-rate__star:nth-of-type(-n+2),
	.sfhb-reviews:not(.is-enhanced) .sfhb-rv-rate:has(input[value="3"]:checked) .sfhb-rv-rate__star:nth-of-type(-n+3),
	.sfhb-reviews:not(.is-enhanced) .sfhb-rv-rate:has(input[value="4"]:checked) .sfhb-rv-rate__star:nth-of-type(-n+4),
	.sfhb-reviews:not(.is-enhanced) .sfhb-rv-rate:has(input[value="5"]:checked) .sfhb-rv-rate__star:nth-of-type(-n+5) {
		background: var(--wp--preset--color--gold);
	}
}

@supports not selector(:has(*)) {
	.sfhb-rv-rate:focus-within {
		outline: var(--rv-ring);
		outline-offset: 4px;
	}
}

.sfhb-rv-rate__text {
	min-inline-size: 7em;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--rv-ink);
}

.sfhb-rv-rate__clear {
	padding: 4px 6px;
	border: 0;
	background: none;
	color: var(--rv-muted);
	font: inherit;
	font-size: 0.84rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.sfhb-rv-rate__clear[hidden] {
	display: none;
}

.sfhb-rv-rate__clear:focus-visible {
	outline: var(--rv-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

.sfhb-rv-fs--rate [data-sfhb-err] {
	margin-block-start: 4px;
}

/* ==========================================================================
   8. States + responsive
   ========================================================================== */

.sfhb-reviews [aria-busy="true"] {
	opacity: 0.5;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.sfhb-reviews__list,
	.sfhb-reviews__summary {
		transition: opacity 0.2s var(--rv-ease);
	}
}

@media (max-width: 960px) {
	.sfhb-reviews__summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sfhb-reviews__score-card {
		grid-column: 1 / -1;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 24px;
	}

	.sfhb-reviews__score-card > * {
		grid-column: 2;
	}

	.sfhb-reviews__score-card > .sfhb-sr-only {
		grid-column: auto;
	}

	.sfhb-reviews__score-card .sfhb-reviews__score {
		grid-column: 1;
		grid-row: 1 / span 4;
	}

	.sfhb-reviews__summary > .sfhb-reviews__panel:nth-child(2):last-child {
		grid-column: 1 / -1;
	}
}

@media (max-width: 640px) {
	.sfhb-reviews__summary {
		grid-template-columns: minmax(0, 1fr);
	}

	.sfhb-reviews__score-card {
		grid-template-columns: minmax(0, 1fr);
	}

	.sfhb-reviews__score-card > *,
	.sfhb-reviews__score-card .sfhb-reviews__score {
		grid-column: 1;
		grid-row: auto;
	}

	.sfhb-reviews__filters {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.sfhb-reviews__ctl select {
		inline-size: 100%;
	}

	.sfhb-reviews__chip span,
	.sfhb-reviews__clear {
		inline-size: 100%;
		justify-content: center;
	}

	.sfhb-rv__head {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.sfhb-rv__rating {
		grid-column: 1 / -1;
	}

	.sfhb-reviews__write-btn {
		inline-size: 100%;
		justify-content: center;
	}

	.sfhb-rv-submit {
		inline-size: 100%;
	}
}

@media (forced-colors: active) {
	.sfhb-rv-stars {
		forced-color-adjust: none;
		background: GrayText;
	}

	.sfhb-rv-stars::before {
		background: Highlight;
	}
}