.star-rating {
  display: inline-flex;
  font-size: 2rem;
}

/* base star */
.star-rating a {
  position: relative;
  text-decoration: none;
  color: #2676ac; /* default filled */
  cursor: pointer;
  transition: color 0.2s;
}

/* HALF STAR (default state for last star) */
.star-rating a.half-star {
  color: #ccc; /* base empty */
}

.star-rating a.half-star::before {
  content: "★";
  position: absolute;
  left: 0;
  width: 50%;
  overflow: hidden;
  color: #2676ac; /* half filled overlay */
}

/* HOVER BEHAVIOR:
   - when hovering the whole group, start with everything filled
   - then empty everything to the RIGHT of the hovered star
*/
.star-rating:hover a {
  color: #2676ac;
}

.star-rating a:hover ~ a {
  color: #ccc;
}

/* FIX: if hovering ANYWHERE in the group, remove the half overlay
   so the 5th star can fully empty when hovering stars 1–4 */
.star-rating:hover a.half-star::before {
  width: 0;
}

/* EXCEPTION: hovering the half star itself makes it full */
.star-rating a.half-star:hover::before {
  width: 100%;
}