/* ═══════════════════════════════════════════════════════════════════
   Review submission form — star rating widget & inputs.
   Pure CSS star selector (no JS): radios stay invisible, label pseudo
   elements show the filled/empty state using :checked ~ label.
   ═══════════════════════════════════════════════════════════════════ */

.rs-review-form {
    max-width: 720px;
}

.rs-review-input,
.rs-review-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #111827;
    background: #ffffff;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
}

.rs-review-input:focus,
.rs-review-textarea:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, .15);
}

.rs-review-textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

/* ── Star rating: visually-hidden radios + clickable <label> stars ────
   Con choices del form en orden DESCENDENTE (5→1) y row-reverse:
   la estrella visualmente más a la izquierda = 1 punto (UX estándar).
   ──────────────────────────────────────────────────────────────────── */
.rs-stars-wrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 18px;
    background: #fafafa;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: border-color .15s, background .15s;
}
.rs-stars-wrap:hover,
.rs-stars-wrap:focus-within {
    border-color: #f59e0b;
    background: #fffbeb;
}

.rs-stars {
    display: inline-flex;
    flex-direction: row-reverse;      /* so :hover ~ .rs-star fills left */
    gap: 6px;
    unicode-bidi: bidi-override;
}

.rs-stars input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.rs-star {
    cursor: pointer;
    color: #d4d4d8;                   /* empty (más oscuro = mejor contraste) */
    transition: color .12s, transform .12s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;                     /* tap target más grande sin agrandar el ícono */
    border-radius: 6px;
}

.rs-star svg {
    /* !important porque Tailwind preflight (CDN) puede setear w/h a 100% en svg
       y dejar las estrellas inflarse al ancho del label. */
    width: 40px !important;
    height: 40px !important;
    display: block;
    flex-shrink: 0;
}

/* Hover fills stars from the hovered one to the start (right-to-left DOM
   + row-reverse → visually left-to-right filling). */
.rs-stars .rs-star:hover,
.rs-stars .rs-star:hover ~ .rs-star {
    color: #f59e0b;
    transform: scale(1.08);
}

/* Selected: fill the checked star and every star to its right in DOM (=
   every star to its left on screen thanks to row-reverse). */
.rs-stars input[type="radio"]:checked ~ .rs-star {
    color: #f59e0b;
}

/* Keyboard focus ring on the adjacent label */
.rs-stars input[type="radio"]:focus-visible + .rs-star svg {
    outline: 2px solid #f97316;
    outline-offset: 3px;
    border-radius: 4px;
}

/* Label "Muy malo / Bueno / Excelente" debajo de las estrellas. Se actualiza
   con CSS puro mostrando el span correspondiente al :checked. */
.rs-stars-label {
    font-size: 13px;
    font-weight: 600;
    color: #71717a;
    min-height: 18px;
    margin-left: 4px;
}
.rs-stars-label > span { display: none; }
.rs-stars-wrap:has(input[value="1"]:checked) .rs-stars-label > .rs-l-1 { display: inline; color: #dc2626; }
.rs-stars-wrap:has(input[value="2"]:checked) .rs-stars-label > .rs-l-2 { display: inline; color: #ea580c; }
.rs-stars-wrap:has(input[value="3"]:checked) .rs-stars-label > .rs-l-3 { display: inline; color: #ca8a04; }
.rs-stars-wrap:has(input[value="4"]:checked) .rs-stars-label > .rs-l-4 { display: inline; color: #16a34a; }
.rs-stars-wrap:has(input[value="5"]:checked) .rs-stars-label > .rs-l-5 { display: inline; color: #15803d; }
.rs-stars-wrap:not(:has(input:checked)) .rs-stars-label > .rs-l-empty { display: inline; }

/* Mobile: stars un poco más chicas pero tap target sigue siendo cómodo. */
@media (max-width: 480px) {
    .rs-stars-wrap { padding: 12px 14px; gap: 4px; }
    .rs-stars { gap: 4px; }
    .rs-star svg { width: 36px !important; height: 36px !important; }
}