/* reviews.css — /reviews en het reviewformulier (/review/:token). De reviewblokken zelf staan in shared.css. */

.reviews-leeg { max-width: var(--leeskolom); color: var(--text-muted); }
.reviews-echtheid { max-width: var(--leeskolom); margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .85rem; color: var(--text-muted); }
@media (width >= 900px) { .reviews-echtheid, .reviews-slot { margin-left: calc(260px + 5rem); } }

/* Na de reviews de volgende stap: het noodtoilet, met de knop naar de productpagina. */
.review__meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.review__meta a:hover { color: var(--primary); }
.reviews-slot { max-width: var(--leeskolom); margin-top: 3rem; display: grid; grid-template-columns: 140px 1fr; gap: 1.25rem; align-items: center; padding: 1.25rem; background: var(--bg-subtle); }
.reviews-slot__beeld img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.reviews-slot h2 { font-size: 1.25rem; line-height: 1.2; margin-bottom: .5rem; }
.reviews-slot__sub { font-size: .9rem; color: var(--text-muted); margin-top: .15rem; }
.reviews-slot__acties { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
.reviews-slot__link { font-size: .9rem; font-weight: 600; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
@media (width < 560px) {
    .reviews-slot { grid-template-columns: 1fr; }
    .reviews-slot__beeld img { aspect-ratio: 4 / 3; }
}

/* ---- Formulier ---- */
.review-form-wrap { max-width: 640px; }
.review-form__title { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; color: var(--primary); margin-bottom: .75rem; }
.review-form__lead { color: var(--text-muted); margin-bottom: 2rem; }
.review-form__lead a { color: var(--primary-medium); font-weight: 600; }
.review-form__fout { background: var(--error-soft-bg); color: var(--error-soft-text); border: 1px solid var(--error-border); border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1.5rem; }

.review-form { display: grid; gap: 1.5rem; justify-items: start; }
.review-form > * { width: 100%; }
.review-form > .btn { width: auto; }
.review-form fieldset { border: 0; }
.review-form legend, .review-form__veld > span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; }
.review-form__veld em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.review-form__veld input, .review-form__veld textarea {
    width: 100%; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: 8px;
    font-size: 1rem; font-family: var(--font-body); color: var(--text); background: var(--bg);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.review-form__veld textarea { resize: vertical; line-height: 1.6; }
.review-form__veld input:focus, .review-form__veld textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary-light) 15%, transparent);
}
.review-form__rij { display: grid; gap: 1.5rem; }
@media (width >= 560px) { .review-form__rij { grid-template-columns: 1fr 1fr; } }

/* Sterrenkiezer zonder JS: radio's in omgekeerde volgorde (5→1), weergegeven als 1→5,
   zodat "deze en alle vorige" via de ~-selector oplichten. */
.sterren-kiezer { display: inline-flex; flex-direction: row-reverse; gap: .25rem; }
.sterren-kiezer input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sterren-kiezer label { cursor: pointer; padding: .15rem; }
.sterren-kiezer svg { width: 2.25rem; height: 2.25rem; fill: var(--border); transition: fill .15s ease; }
.sterren-kiezer label:hover svg,
.sterren-kiezer label:hover ~ label svg,
.sterren-kiezer input:checked ~ label svg { fill: var(--primary); }
.sterren-kiezer input:focus-visible + label { outline: 2px solid var(--primary-light); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Winactie (views/winactie.ejs) hergebruikt het reviewformulier. */
.review-form__honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }