/* Flatpickr theme overrides — match Go Beyond controls.
   Shared by the hotel profile booking widget and the hotels index rate search.
   Self-contained: reads global brand tokens only, so it can load without
   hotel-booking.css. Load after flatpickr.min.css. */

:root {
  --fp-line: var(--divider-color, #C7D1E5);
  --fp-ink: var(--primary-color, #1E1D49);
  --fp-ink-soft: var(--color-neutral-dark-gray);
  --fp-muted: var(--color-neutral-dark-gray);
  --fp-brand: var(--secondary-color, #B50061);
  --fp-soft: var(--accent-soft, #EEF3FF);
  --fp-shadow: 0 4px 20px rgba(30, 29, 73, .08);
  --fp-heading-font: "Quicksand", sans-serif;
  --fp-sans: "Open Sans", Arial, sans-serif;
}

.flatpickr-input[readonly]{ background: #fff; cursor: pointer; }
.flatpickr-calendar{
  font-family: var(--fp-sans) !important;
  border: 1px solid var(--fp-line) !important;
  box-shadow: var(--fp-shadow) !important;
  border-radius: 8px !important;
  padding: 6px !important;
}
.flatpickr-calendar.arrowTop:before, .flatpickr-calendar.arrowTop:after{ border-bottom-color: var(--fp-line); }
/* Flatpickr sets an inline width from the day grid alone, which the padding and
   border above then eat into — clipping the Saturday column (and the second
   month's, in range view). Let the box size to its content instead. The phone
   rules at the bottom of this file override this with a fluid width. */
.flatpickr-calendar{ width: auto !important; }
.flatpickr-months .flatpickr-month{
  height: 44px;
  color: var(--fp-ink);
}
.flatpickr-current-month{
  font-family: var(--fp-heading-font) !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  padding-top: 6px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year{
  font-family: var(--fp-heading-font) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
}
.flatpickr-weekdays{ background: transparent; }
/* Flatpickr's default is `space-around`, which centers any partial last row.
   Force flex-start so cells stay under their day-of-week column even when
   the row has fewer than 7 days. */
.dayContainer{ justify-content: flex-start; }
span.flatpickr-weekday{
  color: var(--fp-muted);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: transparent;
}
.flatpickr-day{
  border-radius: 8px;
  color: var(--fp-ink);
  font-weight: 500;
  height: 40px;
  line-height: 40px;
  /* Match the weekday-header column width (1/7 of the container) so the last
     week's cells line up under their day-of-week header. Flatpickr's default
     max-width: 39px on day cells but flex:1 on weekday headers causes a
     compounding offset that's most visible on the last row. */
  max-width: none;
  width: 14.2857%;
  flex-basis: 14.2857%;
}
.flatpickr-day:hover{
  background: var(--fp-soft);
  border-color: transparent;
}
.flatpickr-day.today{
  border-color: var(--fp-brand);
  color: var(--fp-brand);
}
.flatpickr-day.today:hover{ background: var(--fp-soft); }
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover{
  background: var(--fp-brand) !important;
  border-color: var(--fp-brand) !important;
  color: #fff !important;
}
.flatpickr-day.inRange, .flatpickr-day.inRange:hover, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange{
  background: var(--fp-soft) !important;
  color: var(--fp-ink) !important;
  border-color: var(--fp-soft) !important;
  box-shadow: -5px 0 0 var(--fp-soft), 5px 0 0 var(--fp-soft) !important;
}
.flatpickr-day.startRange.endRange{ border-radius: 8px !important; }
.flatpickr-day.startRange{ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.flatpickr-day.endRange{ border-top-left-radius: 0  !important; border-bottom-left-radius: 0  !important; }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover{
  color: var(--fp-muted);
  background: transparent;
}
.flatpickr-monthSelect-month.selected{
  background: var(--fp-brand) !important;
  color: #fff !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg{ fill: var(--fp-ink-soft); }
.flatpickr-prev-month:hover svg, .flatpickr-next-month:hover svg{ fill: var(--fp-brand); }

/* Flatpickr calendar fluid-width on phones so iPhone SE-class screens
   don't clip the right edge. The default fixed 307.875px width pushes
   past 320 - 28px of safe area. */
@media (max-width: 480px){
  .flatpickr-calendar.open {
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 62px) !important;
    max-width: 328px !important;
    min-width: 0 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
    opacity: 1 !important;
  }
  .flatpickr-calendar.inline {
    width: calc(100vw - 62px) !important;
    max-width: 328px !important;
    min-width: 0 !important;
  }
  .flatpickr-calendar.arrowTop:before,
  .flatpickr-calendar.arrowTop:after { display: none; }
  .flatpickr-days,
  .flatpickr-rContainer { width: auto !important; max-width: 100% !important; }
  .dayContainer {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}