/**
 * Fleet Booking Form Styles
 */

.fleet-booking-form {
  width: 100%;
  max-width: 100%;
}

.fleet-booking-form-wrapper {
  width: 100%;
}

.fleet-booking-form .form-item {
  margin-bottom: 0;
  width: 100%;
}

.fleet-booking-form input[type="text"],
.fleet-booking-form input[type="email"],
.fleet-booking-form input[type="tel"],
.fleet-booking-form input[type="date"],
.fleet-booking-form input[type="time"],
.fleet-booking-form input[type="number"],
.fleet-booking-form select,
.fleet-booking-form textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.fleet-booking-form textarea {
  min-height: 80px;
  max-height: 200px;
}

/* Flatpickr Time Picker Customization */
.flatpickr-time {
  max-height: none !important;
  background: #fff !important;
}

.flatpickr-time input {
  font-size: 16px !important;
  padding: 8px !important;
  background: #fff !important;
  color: #393C3F !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: #f9fafb !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  font-size: 16px !important;
  line-height: 32px !important;
  color: #393C3F !important;
}

.flatpickr-time input.flatpickr-hour,
.flatpickr-time input.flatpickr-minute {
  font-weight: 600 !important;
}

/* Increase time picker dropdown arrow size */
.flatpickr-time .numInputWrapper {
  background: #fff !important;
}

.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
  width: 20px !important;
  height: 20px !important;
  background: transparent !important;
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #393C3F !important;
  border-width: 6px !important;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #393C3F !important;
  border-width: 6px !important;
}

.flatpickr-time .numInputWrapper span:hover {
  background: rgba(31, 102, 144, 0.1) !important;
}

/* Make time input more visible */
.flatpickr-calendar.hasTime .flatpickr-time {
  border-top: 1px solid #E0E0E0;
  padding: 10px;
  background: #fff !important;
}

/* Flatpickr calendar positioning */
.flatpickr-calendar {
  z-index: 9999 !important;
  background: #fff !important;
}

/* Remove any red/pink backgrounds */
.flatpickr-time .numInputWrapper:hover {
  background: transparent !important;
}

.flatpickr-time input:focus,
.flatpickr-time input.flatpickr-hour:focus,
.flatpickr-time input.flatpickr-minute:focus {
  background: #f0f9ff !important;
  border-color: #1F6690 !important;
}

/* Trip Type Radio Buttons */
.fleet-booking-form .trip-type-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.fleet-booking-form .trip-type-radio:checked + label {
  background-color: #1F6690;
  color: #fff;
  border-color: #1F6690;
}

/* Error States */
.fleet-booking-form .form-item--error input,
.fleet-booking-form .form-item--error select,
.fleet-booking-form .form-item--error textarea {
  border-color: #EF4444 !important;
}

.fleet-booking-form .form-item--error-message {
  color: #EF4444;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Success Message */
.fleet-booking-form .messages--status {
  padding: 1rem;
  background-color: #10B981;
  color: #fff;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

/* Error Message */
.fleet-booking-form .messages--error {
  padding: 1rem;
  background-color: #EF4444;
  color: #fff;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
}

/* Ensure no overflow */
.fleet-booking-form *,
.fleet-booking-form-wrapper * {
  box-sizing: border-box;
}