/*--------------------------------------------------------------
  # Booking Settings
  --------------------------------------------------------------*/

/* Target all form inputs and selects inside the form */
#bookingForm input.form-control,
#bookingForm select.form-select {
  background-color: transparent !important;
  border-radius: 0px !important;
  border: 1px solid #ccc;
  color: #f8f9fa;
}

/* Optional: Customize the label color too, if needed */
#bookingForm label {
  color: #f8f9fa;
}

/* Optional: Placeholder color for inputs */
#bookingForm input::placeholder {
  color: #ccc;
}

/* Optional: border + color on focus */
#bookingForm input.form-control:focus,
#bookingForm select.form-select:focus {
  border-color: #f8f9fa;
  border-radius: 0px !important;
  box-shadow: none;
  outline: none;
}

/* This part ensures dropdown menu items are black */
#bookingForm select.form-select option {
  color: #000;
  background-color: #fff;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

#bookingForm button {
  border-radius: 0px 0px 20px 0px !important;
}

/* Chrome, Safari, Edge */
#bookingForm input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* Inverts the color to white */
  cursor: pointer;
}

/* Firefox */
#bookingForm input[type="date"] {
  color-scheme: light; /* Makes icon white if system is in dark mode */
}



@media (max-width: 768px) {
  #bookingForm button {
  border-radius: 20px 20px 20px 20px !important;

  }
}