/*
 * Visual-only polish for the native booking date and time controls.
 * The browser pickers, values, validation and React state remain untouched.
 */
main form input[type="date"],
main form input[type="time"] {
  min-height: 3.375rem;
  border-color: #d9cedf;
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
  background-color: #fff;
  box-shadow: 0 1px 2px rgb(18 18 18 / 4%), inset 0 1px 0 rgb(255 255 255 / 80%);
  color: #1a1a1a;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color-scheme: light;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

main form input[type="date"]:hover,
main form input[type="time"]:hover {
  border-color: #bda8c8;
  background-color: #fdfcfe;
  box-shadow: 0 3px 10px rgb(98 21 120 / 8%);
}

main form input[type="date"]:focus,
main form input[type="date"]:focus-visible,
main form input[type="time"]:focus,
main form input[type="time"]:focus-visible {
  border-color: #8b1fa8;
  outline: none;
  box-shadow: 0 0 0 3px rgb(139 31 168 / 12%), 0 4px 14px rgb(98 21 120 / 10%);
}

main form input[type="date"]::-webkit-calendar-picker-indicator,
main form input[type="time"]::-webkit-calendar-picker-indicator {
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.25rem -0.25rem -0.25rem 0.5rem;
  padding: 0.375rem;
  border-radius: 0.5rem;
  background-color: #f3edf6;
  opacity: 0.82;
  cursor: pointer;
  transition: background-color 180ms ease, opacity 180ms ease;
}

main form input[type="date"]::-webkit-calendar-picker-indicator:hover,
main form input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: #e9dced;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  main form input[type="date"],
  main form input[type="time"] {
    transition-duration: 1ms;
  }
}