/**
 * Star Rating Component
 * CSS-only Star-Rating mit Radio-Buttons und FontAwesome
 * Nutzt row-reverse Trick für Hover-Effekt
 */

/* === Star Rating Input (Formular) === */
.star-rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.star-rating-input input[type="radio"] {
    display: none;
}

.star-rating-input label {
    cursor: pointer;
    font-size: 1.5rem;
    color: #d1d5db;
    transition: color 0.15s;
}

.star-rating-input label:hover,
.star-rating-input label:hover ~ label,
.star-rating-input input[type="radio"]:checked ~ label {
    color: #f59e0b;
}

/* === Star Rating Display (Readonly) === */
.star-rating-display {
    display: inline-flex;
    gap: 2px;
}

.star-rating-display .star-filled {
    color: #f59e0b;
}

.star-rating-display .star-empty {
    color: #d1d5db;
}