/* ============================================================
   Star Rating — pure CSS/SVG, no icon library
   Star shape is drawn with an inline SVG path; states (empty,
   hover preview, selected fill) are pure CSS transitions.
   ============================================================ */

.star-group {
    --star-size: 26px;
    --star-empty: #55608c;
    --star-empty-hover: #8b93b8;
    --star-fill: #fbbf24;
    --star-focus: #667eea;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    direction: ltr;
    position: relative;
}

/* Visually hidden radio inputs — keep native keyboard/ARIA behaviour */
.star-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.star-slot {
    position: relative;
    width: var(--star-size);
    height: var(--star-size);
    display: inline-block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.star {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Empty state: outlined star */
.star-empty {
    color: var(--star-empty);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    transition: color 0.15s ease;
}

/* Filled state: solid gold star, revealed on hover/selection */
.star-fill {
    color: var(--star-fill);
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.star-slot:hover .star-empty {
    color: var(--star-empty-hover);
}

.star-slot.active .star-fill,
.star-slot.preview .star-fill {
    opacity: 1;
    transform: scale(1);
}

/* Keyboard focus ring */
.star-radio:focus-visible + .star-slot {
    outline: 2px solid var(--star-focus);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Accessible readout of the current value */
.star-value {
    margin-left: 10px;
    font-size: 13px;
    color: var(--star-empty-hover);
    min-width: 52px;
}

/* Match the site light theme */
html[data-theme="light"] .star-group {
    --star-empty: #cbd5e1;
    --star-empty-hover: #94a3b8;
    --star-fill: #f59e0b;
    --star-focus: #7c3aed;
}

@media (prefers-reduced-motion: reduce) {
    .star-fill { transition: none; }
}

@media (max-width: 480px) {
    .star-group {
        --star-size: 22px;
        gap: 4px;
    }
}