/* Review form: the five ring rating, the error list and the thank-you. Everything else comes from .gf-form in gf-site.css. */

.gf-review-form { scroll-margin-top: 90px; }

/* Error list inside the existing .gf-form__error box */
.gf-review-form .gf-form__error ul { margin: 0; padding: 0 0 0 18px; display: grid; gap: 4px; }
.gf-review-form .gf-form__input[aria-invalid="true"] { border-color: var(--gf-red); border-width: 2px; }

/* Rating: five rings in a real radio group. The radios sit invisibly over their own ring so they stay focusable and work with the keyboard. */
.gf-rate { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.gf-rate[aria-invalid="true"] .gf-rate__set { outline: 2px solid var(--gf-red); outline-offset: 6px; }
.gf-rate legend { padding: 0; float: left; width: 100%; margin-bottom: 8px; }
.gf-rate__set { position: relative; display: flex; flex-wrap: wrap; gap: 6px 10px; clear: both; }
.gf-rate__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.gf-rate__opt { display: grid; justify-items: center; gap: 4px; min-width: 64px; padding: 8px 6px 6px; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.gf-rate__ring { width: 40px; height: 40px; overflow: visible; transition: transform .25s var(--gf-ease); }
.gf-rate__ring circle { transform-box: view-box; transform-origin: 12px 12px; transition: fill .2s, stroke .2s; }
.gf-rate__a { fill: none; stroke: rgba(10, 21, 27, .35); stroke-width: 1.5; }
.gf-rate__b, .gf-rate__c { fill: none; }
.gf-rate__d { fill: rgba(10, 21, 27, .35); }
.gf-rate__num { font: 400 22px/1 var(--gf-display); letter-spacing: .02em; }
.gf-rate__word { font: 400 11px/1.2 var(--gf-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--gf-muted, #5b6266); }

/* Lit rings: the chosen one on its own works everywhere; lighting every ring up to it needs :has(). */
.gf-rate__input:checked + .gf-rate__opt .gf-rate__a,
.gf-rate__opt:hover .gf-rate__a { fill: var(--gf-saff-2); stroke: none; }
.gf-rate__input:checked + .gf-rate__opt .gf-rate__b,
.gf-rate__opt:hover .gf-rate__b { fill: var(--gf-saff-3); }
.gf-rate__input:checked + .gf-rate__opt .gf-rate__c,
.gf-rate__opt:hover .gf-rate__c { fill: var(--gf-saff-5); }
.gf-rate__input:checked + .gf-rate__opt .gf-rate__d,
.gf-rate__opt:hover .gf-rate__d { fill: var(--gf-bone); }
.gf-rate__input:checked + .gf-rate__opt .gf-rate__num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gf-rate__input:checked + .gf-rate__opt .gf-rate__ring { transform: scale(1.08); }

.gf-rate__set:has(.gf-rate__input[value="2"]:checked) .gf-rate__opt:nth-of-type(-n+2) .gf-rate__a,
.gf-rate__set:has(.gf-rate__input[value="3"]:checked) .gf-rate__opt:nth-of-type(-n+3) .gf-rate__a,
.gf-rate__set:has(.gf-rate__input[value="4"]:checked) .gf-rate__opt:nth-of-type(-n+4) .gf-rate__a,
.gf-rate__set:has(.gf-rate__input[value="5"]:checked) .gf-rate__opt:nth-of-type(-n+5) .gf-rate__a,
.gf-rate__opt:has(~ .gf-rate__opt:hover) .gf-rate__a { fill: var(--gf-saff-2); stroke: none; }
.gf-rate__set:has(.gf-rate__input[value="2"]:checked) .gf-rate__opt:nth-of-type(-n+2) .gf-rate__b,
.gf-rate__set:has(.gf-rate__input[value="3"]:checked) .gf-rate__opt:nth-of-type(-n+3) .gf-rate__b,
.gf-rate__set:has(.gf-rate__input[value="4"]:checked) .gf-rate__opt:nth-of-type(-n+4) .gf-rate__b,
.gf-rate__set:has(.gf-rate__input[value="5"]:checked) .gf-rate__opt:nth-of-type(-n+5) .gf-rate__b,
.gf-rate__opt:has(~ .gf-rate__opt:hover) .gf-rate__b { fill: var(--gf-saff-3); }
.gf-rate__set:has(.gf-rate__input[value="2"]:checked) .gf-rate__opt:nth-of-type(-n+2) .gf-rate__c,
.gf-rate__set:has(.gf-rate__input[value="3"]:checked) .gf-rate__opt:nth-of-type(-n+3) .gf-rate__c,
.gf-rate__set:has(.gf-rate__input[value="4"]:checked) .gf-rate__opt:nth-of-type(-n+4) .gf-rate__c,
.gf-rate__set:has(.gf-rate__input[value="5"]:checked) .gf-rate__opt:nth-of-type(-n+5) .gf-rate__c,
.gf-rate__opt:has(~ .gf-rate__opt:hover) .gf-rate__c { fill: var(--gf-saff-5); }
.gf-rate__set:has(.gf-rate__input[value="2"]:checked) .gf-rate__opt:nth-of-type(-n+2) .gf-rate__d,
.gf-rate__set:has(.gf-rate__input[value="3"]:checked) .gf-rate__opt:nth-of-type(-n+3) .gf-rate__d,
.gf-rate__set:has(.gf-rate__input[value="4"]:checked) .gf-rate__opt:nth-of-type(-n+4) .gf-rate__d,
.gf-rate__set:has(.gf-rate__input[value="5"]:checked) .gf-rate__opt:nth-of-type(-n+5) .gf-rate__d,
.gf-rate__opt:has(~ .gf-rate__opt:hover) .gf-rate__d { fill: var(--gf-bone); }

/* Keyboard focus lands on the ring's label */
.gf-rate__input:focus-visible + .gf-rate__opt { outline: 3px solid var(--gf-saff-4); outline-offset: 2px; }

@media (max-width: 480px) {
	.gf-rate__set { gap: 4px; justify-content: space-between; flex-wrap: nowrap; }
	.gf-rate__opt { min-width: 0; flex: 1 1 0; padding: 8px 2px 6px; }
	.gf-rate__ring { width: 34px; height: 34px; }
	.gf-rate__word { font-size: 10px; letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
	.gf-rate__ring, .gf-rate__ring circle { transition: none; }
}

/* Thank-you, shown in place of the form */
.gf-review-form--thanks { display: grid; gap: 12px; padding: 24px 0 0; border-top: 3px solid var(--gf-ink); }
.gf-review-form__thanks-title { margin: 0; font: 400 clamp(34px, 5vw, 56px)/.95 var(--gf-display); letter-spacing: .02em; }
.gf-review-form__thanks-text { margin: 0; max-width: 60ch; font: 400 18px/1.6 var(--gf-sans); }
.gf-review-form__again { font: 400 14px var(--gf-mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: var(--gf-ink); }