.star-rating input {
    display: none;  /* hide the radio buttons */
}

.star-rating label {
    font-size: 2rem;
    color: #ddd;  /* empty star color */
    cursor: pointer;
    transition: color 0.2s;
}


.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #ffc107;  /* filled star color */
}

/* Reverse the star order for proper left-to-right hover */
.star-rating .stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.star-rating .stars label {
    margin: 0 2px;
}