/*
 * BFH Review Form (review-form.css)
 *
 * The collapsible "Write a Review" panel. Split from detail.css because the
 * panel only renders for a logged-in visitor and the reviews widget can mount
 * without it.
 */

.bfh-review-form {
    margin-bottom: var(--bfh-space-5);
    padding: var(--bfh-space-5);
    background-color: var(--bfh-surface-hover);
    border: var(--bfh-border-width) solid var(--bfh-border);
    border-radius: var(--bfh-radius-lg);
}

/* The toggle sets [hidden]; this makes sure a display rule elsewhere cannot
   override the browser default and leave the panel visible. */
.bfh-review-form[hidden] {
    display: none;
}

.bfh-review-form__notice {
    margin: 0;
    font-size: var(--bfh-text-sm);
    color: var(--bfh-text-secondary);
}

.bfh-review-form__notice a {
    color: var(--bfh-color-primary);
}

.bfh-review-form__form {
    display: flex;
    flex-direction: column;
    gap: var(--bfh-space-4);
}

.bfh-review-form__field {
    display: flex;
    flex-direction: column;
    gap: var(--bfh-space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.bfh-review-form__label {
    padding: 0;
    font-size: var(--bfh-text-sm);
    font-weight: var(--bfh-font-weight-medium);
    color: var(--bfh-text-primary);
}

.bfh-review-form__required {
    color: var(--bfh-danger);
}

.bfh-review-form__optional {
    font-weight: var(--bfh-font-weight-regular);
    color: var(--bfh-text-muted);
}

/* -------------------- Star radios -------------------- */
/* The stars get their own row so the legend above and the error message below
   stay in normal order — reversing the whole fieldset would move them too. */
.bfh-review-form__stars {
    display: flex;
    /* Rendered 5-to-1 in the markup so a sibling selector can light up the
       chosen star and everything below it; reversed here, and flex-end is the
       left edge in a reversed row. */
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--bfh-space-1);
}

.bfh-review-form__star {
    font-size: var(--bfh-text-2xl);
    line-height: 1;
    color: var(--bfh-rating-empty);
    cursor: pointer;
    transition: color var(--bfh-anim-fast), transform var(--bfh-anim-fast);
}

.bfh-review-form__star:hover,
.bfh-review-form__star:hover ~ .bfh-review-form__star,
.bfh-review-form__star-input:checked ~ .bfh-review-form__star {
    color: var(--bfh-rating-filled);
}

.bfh-review-form__star:hover {
    transform: scale(1.1);
}

/* The input is visually hidden, so the focus ring has to be drawn on its
   label or keyboard users get no indication of where they are. */
.bfh-review-form__star-input:focus-visible + .bfh-review-form__star {
    outline: 2px solid var(--bfh-color-primary);
    outline-offset: 2px;
    border-radius: var(--bfh-radius-sm);
}

/* -------------------- Text -------------------- */
.bfh-review-form__input,
.bfh-review-form__textarea {
    width: 100%;
    padding: var(--bfh-space-3);
    background-color: var(--bfh-surface);
    border: var(--bfh-border-width) solid var(--bfh-border);
    border-radius: var(--bfh-radius-md);
    color: var(--bfh-text-primary);
    font-family: inherit;
    font-size: var(--bfh-text-sm);
    line-height: 1.6;
    transition: border-color var(--bfh-anim-fast);
}

.bfh-review-form__textarea {
    resize: vertical;
}

.bfh-review-form__input:focus,
.bfh-review-form__textarea:focus {
    outline: none;
    border-color: var(--bfh-color-primary);
}

.bfh-review-form__hint {
    margin: 0;
    font-size: var(--bfh-text-xs);
    color: var(--bfh-text-muted);
}

.bfh-review-form__error {
    margin: 0;
    font-size: var(--bfh-text-xs);
    color: var(--bfh-danger);
}

.bfh-review-form__error:empty {
    display: none;
}

.bfh-review-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bfh-space-3);
}

.bfh-review-form__status {
    margin: 0;
    font-size: var(--bfh-text-xs);
    color: var(--bfh-success);
}

.bfh-review-form__status.is-error {
    color: var(--bfh-danger);
}

.bfh-review-form__status:empty {
    display: none;
}

@media (max-width: 600px) {
    .bfh-review-form__actions .bfh-button {
        flex: 1 1 100%;
    }
}