.star-rating {
    direction: rtl; /* inverte a ordem para facilitar :hover */
    unicode-bidi: bidi-override;
    font-size: 2rem;
    display: inline-flex;
    gap: 0.25rem;
    cursor: pointer;
}

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

    .star-rating label {
        color: #ccc; /* cor base (cinza) */
        transition: color 0.2s;
    }

        /* Hover visual: marca estrelas da direita pra esquerda */
        .star-rating label:hover,
        .star-rating label:hover ~ label {
            color: #ffc107; /* amarelo (hover) */
        }

    /* Selecionado visual: aplica amarelo ao valor marcado e os anteriores */
    .star-rating input[type="radio"]:checked ~ label {
        color: #ffc107; /* amarelo (selecionado) */
    }