/* ============================================================
   Flatpickr theme — RegionExperts brand
   Overrides the upstream flatpickr.min.css for our look & feel
   ============================================================ */

/* Calendar container -------------------------------------------------- */
.flatpickr-calendar {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--card-shadow), 0 12px 28px rgba(0, 0, 0, 0.08);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  color: var(--color-gray-900);
  padding: var(--spacing-2);
  width: 320px;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  border-bottom-color: var(--color-white);
  border-top-color: var(--color-white);
}

/* Month / year header ------------------------------------------------- */
.flatpickr-months {
  padding-bottom: var(--spacing-2);
}

.flatpickr-months .flatpickr-month {
  background: transparent;
  color: var(--color-gray-900);
  font-family: var(--font-family-heading);
  font-weight: 600;
  height: 40px;
  line-height: 40px;
  overflow: visible;
}

.flatpickr-current-month {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-gray-900);
  padding-top: 6px;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-family: var(--font-family-heading);
  font-weight: 600;
  color: var(--color-gray-900);
  background: transparent;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: var(--color-primary-50);
}

.flatpickr-current-month input.cur-year {
  font-family: var(--font-family-heading);
  font-weight: 600;
  color: var(--color-gray-900);
}

/* Prev / next chevrons */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--color-gray-600);
  fill: var(--color-gray-600);
  padding: 8px;
  height: 40px;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--color-primary);
}

/* Weekday labels ------------------------------------------------------ */
.flatpickr-weekdays {
  background: transparent;
  height: 32px;
}

span.flatpickr-weekday {
  background: transparent;
  color: var(--color-gray-500);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Day cells ----------------------------------------------------------- */
.flatpickr-days {
  width: 100%;
}

.dayContainer {
  padding: 4px 0;
  width: 100%;
  min-width: 0;
}

.flatpickr-day {
  border-radius: var(--radius-md);
  color: var(--color-gray-700);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  max-width: 40px;
  height: 38px;
  line-height: 38px;
  margin: 1px 0;
  border: 1px solid transparent;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--color-primary-50);
  border-color: var(--color-primary-50);
  color: var(--color-primary-dark);
}

.flatpickr-day.today {
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: var(--color-primary-50);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.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: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 2px 6px rgba(var(--color-primary-rgb), 0.25);
}

.flatpickr-day.inRange {
  background: var(--color-primary-50);
  border-color: var(--color-primary-50);
  box-shadow: none;
  color: var(--color-primary-dark);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: var(--color-gray-300);
  background: transparent;
  border-color: transparent;
  cursor: not-allowed;
}

/* Time picker (datetime-local) --------------------------------------- */
.flatpickr-time {
  border-top: 1px solid var(--color-gray-200);
  margin-top: 6px;
  height: 44px;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  font-weight: 600;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus {
  background: var(--color-primary-50);
}

.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--color-primary);
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--color-primary);
}

/* Year arrows */
.numInputWrapper:hover {
  background: var(--color-primary-50);
}

.numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--color-primary);
}

.numInputWrapper span.arrowDown:after {
  border-top-color: var(--color-primary);
}

/* The visible alt input flatpickr generates ------------------------- */
.flatpickr-input.form-control.input,
input.flatpickr-input,
input.form-control.flatpickr-input {
  /* Inherit project form styling — flatpickr's stylesheet doesn't override these much */
  font-family: var(--font-family);
}

input.flatpickr-input[readonly] {
  background-color: var(--color-white);
}

/* Focus ring on alt input — match project focus look */
.flatpickr-input:focus,
.flatpickr-alt-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--input-shadow-focus);
}

/* ====================================================================
   Booking page — customer/booking.html wrapper integration
   We keep the existing .date-picker-wrapper outer box (icon + input)
   but the input it wraps is now the flatpickr altInput. Make the entire
   wrapper clickable so clicking the icon area opens the calendar.
   ==================================================================== */

.date-picker-wrapper {
  cursor: pointer;
}

.date-picker-wrapper .flatpickr-alt-input,
.date-picker-wrapper .date-input,
.date-picker-wrapper input.form-control.input.flatpickr-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-gray-900);
  padding: 0;
  cursor: pointer;
  min-width: 0;
}

.date-picker-wrapper .flatpickr-alt-input::placeholder {
  color: var(--color-gray-400);
}

/* The original native input is hidden by flatpickr when altInput=true,
   but make doubly sure it doesn't take pointer space */
.date-picker-wrapper input.flatpickr-input.flatpickr-mobile,
.date-picker-wrapper input[type="date"].flatpickr-input {
  /* flatpickr already sets these to display:none when altInput is on,
     this is defensive only */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Small screens — keep calendar within viewport */
@media (max-width: 480px) {
  .flatpickr-calendar {
    width: calc(100vw - 24px);
    max-width: 320px;
  }

  .flatpickr-day {
    max-width: 100%;
  }
}