/* The calendar container */
.flatpickr-calendar {
  font-family: var(--_typography---heading);
  margin-bottom: 0.5rem;
  font-size: 0.6rem;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent iOS native date picker from showing */
.flatpickr-input[readonly] {
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Remove iOS default styling for date/time inputs */
input[type="date"].flatpickr-mobile,
input[type="time"].flatpickr-mobile {
  /* Remove iOS native styling so it looks like a regular text input */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Ensure text color works properly on iOS */
  -webkit-text-fill-color: currentColor;
  color: inherit;

  /* Make sure it displays as a block element like other inputs */
  display: block;
  width: 100%;
}

/* Ensure mobile date/time inputs match desktop text inputs exactly */
.input--field.flatpickr-mobile[type="date"],
.input--field.flatpickr-mobile[type="time"],
input[type="date"].flatpickr-mobile.is--checkout,
input[type="time"].flatpickr-mobile.is--checkout {
  /* Force display and visibility */
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;

  /* Remove any iOS-specific formatting */
  -webkit-appearance: none !important;
  appearance: none !important;

  /* Ensure proper text rendering */
  -webkit-text-fill-color: currentColor !important;
  color: currentColor !important;

  /* Match exact padding of desktop inputs */
  padding: 0.5rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  height: 3.5rem !important;

  /* Remove iOS default padding/margins */
  margin: 0 !important;
  box-sizing: border-box !important;

  /* Ensure width and height match */
  width: 100% !important;
  min-height: auto !important;

  /* Remove any iOS internal spacing */
  line-height: inherit !important;

  /* Match font styling */
  font-family: var(--_typography---heading) !important;
  font-size: 0.6rem !important;
  font-weight: 300 !important;
  letter-spacing: inherit !important;
  text-align: inherit !important;
}

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  width: 24rem;
  border-radius: 0rem;
}

/* The month/year header */
.flatpickr-months {
  font-size: 0.6rem;
}

.flatpickr-days {
  width: 100%;
  max-width: none;

  border-radius: 0rem;
}

/* Individual day cells */
.flatpickr-day {
  font-size: 0.6rem;
  max-width: none;
  /* Better touch targets for mobile */
  min-height: 2.5rem;
  line-height: 2.5rem;
}

/* Today's date */
.flatpickr-day.today {
}

/* Selected date */
.flatpickr-day.selected {
  background-color: var(--_colors---dark-gold) !important;
}

/* Hovered date */
.flatpickr-day:hover {
}

/* Disabled dates (past dates) */
.flatpickr-day.disabled {
}

/* The input field that shows the formatted date */
.flatpickr-input {
}

.flatpickr-rContainer {
  width: 100%;
  max-width: none;
}

.flatpickr-rContainer .flatpickr-rContainer-months {
  width: 100%;
  max-width: none;
}

.flatpickr-rContainer .flatpickr-rContainer-days {
  width: 100%;
  max-width: none;
}

.dayContainer {
  width: 100%;
  max-width: none;
  min-width: none;
}

.flatpickr-current-month {
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 1rem;
  height: 1rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-size: 0.6rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months select {
  font-size: 0.6rem;
}

.flatpickr-current-month .flatpickr-monthDropdown-months select option {
  font-size: 0.6rem;
}

.flatpickr-current-month input.cur-year {
  font-size: 0.6rem;
}

.flatpickr-current-month input.cur-month {
  font-size: 0.6rem;
}

.flatpickr-current-month input.cur-month:hover {
  font-size: 0.6rem;
}

.flatpickr-current-month input.cur-month:focus {
  font-size: 0.6rem;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background-color: var(--_colors---dark-gold) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay .flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  border-color: transparent;
  box-shadow: none !important;
  outline: none;
}

@media (max-width: 479px) {
  .flatpickr-calendar.open,
  .flatpickr-calendar.inline {
    width: 100%;
    max-width: 19.3rem;
  }

  /* Time picker mobile adjustments */
  .flatpickr-calendar.noCalendar {
    width: 100%;
    max-width: 16rem;
  }

  .flatpickr-time {
    display: flex;
    justify-content: center;
    padding: 1rem;
  }

  .flatpickr-time input {
    font-size: 0.75rem;
    padding: 0.5rem;
  }

  .flatpickr-time .flatpickr-time-separator,
  .flatpickr-time .flatpickr-am-pm {
    font-size: 0.75rem;
  }

  .flatpickr-hour,
  .flatpickr-minute {
    font-size: 0.75rem;
    min-width: 2.5rem;
  }

  .flatpickr-am-pm {
    font-size: 0.75rem;
    padding: 0.5rem;
  }
}

.numInputWrapper {
  font-size: 0.6rem;
  width: 2rem;
  height: 2rem;
}

.numInputWrapper span {
  /* Arrow buttons for time picker */
  border: none;
}

.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Better visibility for increment/decrement buttons */
.numInputWrapper:hover .arrowUp,
.numInputWrapper:hover .arrowDown {
  opacity: 1;
}

.flatpickr-time {
  font-size: 0.6rem;
  border-radius: 0rem;
}

.flatpickr-time input {
  font-size: 0.6rem;
  font-family: var(--_typography---heading);
  font-weight: 300;
}

/* Time picker specific styles */
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  font-size: 0.6rem;
  font-family: var(--_typography---heading);
  font-weight: 300;
}

/* Ensure time-only picker has consistent width */
.flatpickr-calendar.noCalendar {
  width: auto;
  min-width: 12rem;
}

/* Time input wrapper */
.flatpickr-time-separator {
  font-size: 0.6rem;
}

/* AM/PM selector */
.flatpickr-am-pm {
  font-size: 0.6rem;
  font-family: var(--_typography---heading);
  font-weight: 300;
}

/* Hour and minute inputs */
.flatpickr-hour,
.flatpickr-minute {
  font-size: 0.6rem;
  font-family: var(--_typography---heading);
  font-weight: 300;
}

.input--field.active:focus-visible {
  outline: none !important;
  border-color: var(--_colors---dark) !important;
}