/* ============================================================
   Reservation form — make the native date/time pickers match the
   dark theme and read as clearly interactive (Zohee).
   ============================================================ */

/* Date input: recolor the native calendar icon to white so it is
   visible on the dark field, and make the whole field tappable. */
#book-a-table input[type="date"] {
  cursor: pointer;
}
#book-a-table input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 1;
  cursor: pointer;
  padding: 4px;
  margin-right: 2px;
}

/* Time dropdown: match the dark inputs and show a clear white caret. */
#book-a-table select#time {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #0c0b09;
  color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

/* Keep the options readable when the list opens on desktop browsers. */
#book-a-table select#time option {
  background-color: #fff;
  color: #222;
}
#book-a-table select#time option:disabled {
  color: #999;
}

/* Slightly taller controls on phones so they are easy to tap. */
@media (max-width: 575.98px) {
  #book-a-table .form-control {
    min-height: 48px;
  }
}