.rating {
  border: none;
  float: left;
}

.rating > input {
  display: none;
}

.rating > label:before {
  margin: 5px;
  font-size: 1.25em;
  font-family: "Font Awesome 5 Free";
  font-weight: 900; /* Required for solid icons */
  display: inline-block;
  content: "\f005"; /* Unicode for solid star (fas fa-star) */
}

.rating > .half:before {
  content: "\f089"; /* Unicode for half star (fas fa-star-half-alt) */
  position: absolute;
}

/* Default star color */
.rating > label {
  color: #ddd;
  float: right;
}

/***** CSS Magic to Highlight Stars on Hover *****/

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #FFD700; /* Gold color on click or hover */
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #FFED85; /* Lighter gold on hover after select */
}

.checked-star {
  color: #FFD700;
}

.unchecked-star {
  color: lightgrey;
}

.btn-rate-now {
  text-decoration: none;
  font-size: 12px;
  color: #ffc107;
}