@media (max-width: 767.98px) {
  .booking-section .row > [class*="col-"] {
    margin-bottom: 1rem;
  }
  .booking-section .row > [class*="col-"]:last-child {
    margin-bottom: 0;
  }
}

.booking-section {
  padding: 50px;
}

.booking-title {
  font-family: Alike, serif;
}

.booking-label,
.booking-help,
.booking-submit {
  font-family: Alike, serif;
}

.booking-submit {
  background: rgb(112, 67, 44);
  color: #f8e7cb;
  border-width: 0;
}

.star-rating {
  display: inline-flex;
  align-items: center;
  direction: rtl; /* makes the visual order intuitive for some setups */
}
.star-rating input[type="radio"] { display: none; }
.star-rating label {
  font-size: 2rem;
  color: #ddd;
  cursor: pointer;
}
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #ffc107;
}
.star-rating label.selected { color: #ffd166; } /* extra highlight if desired */
@media (max-width: 576px) {
  .star-rating label { font-size: 1.75rem; }
}

.star-rating .star:before {
  content: attr(data-count);
  /* If you want literally asterisks: render the number of asterisks equal to data-count */
  display: inline-block;
  filter: none;
}