/*
escondemos los botones de radio
*/
input[type="radio"] {
  display: none !important;
}

/*
damos un color gris a las estrellas, y un tamaño de 28px
*/
label {
  color:#fff;
  margin: 0 6px;
}
label i{
  font-size: 28px!important;
}

/*
La propiedad direction: rtl; cambia la dirección de escritura  de derecha a izquierda ( right to left ). La otra propiedad unicode-bidi ( bidi de bidireccional ) se utiliza junto con la propiedad direction para cambiar  la dirección del texto.
*/
.clasificacion {
  direction: rtl;
  unicode-bidi: bidi-override;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
También cambian de color todas las etiquetas <label> precedidas ( ~ ) por aquella <label> que tiene el ratón encima ( hover )
*/
label:hover,
label:hover ~ label {
  color: orange;
}

/*
Al marcar el botón de radio ( radio:checked ) todas las etiquetas <label> que le preceden ( ~ ) se vuelven color naranja
*/
input[type="radio"]:checked ~ label {
  color: orange;
}

/*
Damos a las estrellas color naranja al momento de mostrarse
*/
.starColor i{color: orange!important;}
.clasificacion {
  direction: rtl;
  unicode-bidi: bidi-override;
  text-align: center;
}

.clasificacion input[type="radio"] {
  display: none;
}

.clasificacion label {
  color: #ddd;
  font-size: 2rem;
  padding: 0 5px;
  cursor: pointer;
  display: inline-block;
  transition: color 0.3s;
}

.clasificacion input[type="radio"]:checked ~ label,
.clasificacion label:hover,
.clasificacion label:hover ~ label {
  color: #FFD700; /* gold */
}