.star-rating {
    direction: rtl; /* Faz com que as estrelas sejam selecionáveis da direita para a esquerda */
    display: inline-flex;
}

.star-rating input {
    display: none; /* Esconde o input do tipo radio */
}

.star-rating label {
    font-size: 30px;  /* Tamanho do ícone da estrela */
    color: lightgray; /* Cor das estrelas não selecionadas */
    cursor: pointer;
    transition: color 0.3s; /* Suaviza a transição de cor */
}

.star-rating input:checked ~ label {
    color: gold; /* Cor das estrelas selecionadas */
}

.star-rating label:hover,
.star-rating label:hover ~ label {
    color: gold; /* Cor ao passar o mouse */
}