/**
 * Star-rating picker — shared by BOTH review surfaces.
 *
 * Extracted from review-popup.css on 2026-07-29 (the originals are commented out
 * there, pointing here) so the picker can be used in two places from one source
 * rather than duplicated and left to drift.
 *
 * Loaded by rnf_reviews_enqueue() whenever EITHER surface is on screen:
 *   1. the 3-minute prompt   -> fieldset class .rnf-review-modal__stars
 *   2. the /feedback/ panel  -> fieldset class .rnf-stars-input
 * Both container class names are matched below, so neither surface's markup had to
 * change.
 *
 * PURE CSS, no JavaScript. The picker is five radio inputs; the fill effect comes
 * from :hover / :checked sibling selectors. review-popup.js never touches it.
 *
 * @package rootsnfruits-reviews
 */

/*
 * row-reverse means "earlier in the DOM sits further right", which is what lets a
 * plain sibling selector light up every star to the LEFT of the hovered or checked
 * one — i.e. the usual left-to-right fill, with no script.
 */
.rnf-stars-input,
.rnf-review-modal__stars {
	border: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 2px;
}

.rnf-stars-input legend,
.rnf-review-modal__stars legend {
	float: left;
	width: 100%;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.rnf-review-star input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.rnf-review-star span[aria-hidden] {
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
	color: #d3d8cc;
	transition: color 0.12s ease;
}

.rnf-review-star:hover span[aria-hidden],
.rnf-review-star:hover ~ .rnf-review-star span[aria-hidden],
.rnf-review-star input:checked ~ span[aria-hidden],
.rnf-review-star:has( input:checked ) ~ .rnf-review-star span[aria-hidden] {
	color: #e0a83c;
}

.rnf-review-star input:focus-visible ~ span[aria-hidden] {
	outline: 2px solid var( --pine, #2f3b2f );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	.rnf-review-star span[aria-hidden] { transition: none; }
}