.rating {
    direction: rtl; /* Ensure layout is RTL */
}

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

.rating label {
    font-size: 13px;
    color: lightgray;
    cursor: pointer;
}

/* Handle the checked state of radio buttons and color the labels */
.rating input[type="radio"]:checked + label {
    color: gold; /* Color the corresponding label when radio is checked */
}

/* Hover effect */
.rating label:hover,
.rating label:hover ~ label {
    color: gold; /* Color the labels from right to left on hover */
}

/* Ensure previously checked stars are filled when radio is checked */
.rating input[type="radio"]:checked + label,
.rating input[type="radio"]:checked + label ~ label {
    color: gold;
}