.rating-form-stars {
    display: inline-block;
    direction: rtl; /* Right-to-left to make the hover effect work correctly */
    font-size: 2rem;
}

.rating-form-stars input[type="radio"] {
    display: none; /* Hide the actual radio buttons */
}

.rating-form-stars label {
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}

/* This handles the hover effect */
.rating-form-stars label:hover,
.rating-form-stars label:hover ~ label {
    color: #ffc107;
}

/* This handles the selected (checked) state */
.rating-form-stars input[type="radio"]:checked ~ label {
    color: #ffc107;
}