/* ==========================================================================
   Treehouse Chalets — shared Flatpickr theme (gold)

   Used by BOTH the inline hero booking bar (thc-ibar) and the booking
   pop-up (thc-bk), so the calendar looks identical everywhere it appears.
   Change colours here only -- no need to touch inline-booking-bar.css or
   booking-modal.css separately.
   ========================================================================== */

.flatpickr-calendar {
  font-family: "Montserrat", Helvetica, sans-serif;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  border: none;

  /* Force a fully solid white panel. Without this, some mobile browsers
     render the calendar with a washed-out/translucent look (letting the
     page underneath show through) during or after its open animation. */
  background-color: #fff !important;
  opacity: 1 !important;

  /* The booking pop-up sits at z-index: 100000. This keeps the calendar
     above it even when opened from inside the pop-up. Harmless for the
     inline bar too, since nothing there gets anywhere near this value. */
  z-index: 999999 !important;
}

/* Every inner section explicitly opaque white too, so no nested part
   of the calendar can pick up transparency from anywhere else. */
.flatpickr-calendar,
.flatpickr-months,
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer {
  background-color: #fff;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none;
}

/* ---------- Header / months ---------- */

.flatpickr-months {
  padding: 10px 0 4px;
}

.flatpickr-months .flatpickr-month {
  color: #24262d;
  height: 42px;
}

.flatpickr-current-month {
  font-size: 16px;
  font-weight: 700;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  font-family: inherit;
  font-weight: 700;
  color: #24262d;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(151, 134, 103, 0.12);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  fill: #978667;
  color: #978667;
  padding: 10px;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #978667;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #4b514d;
}

/* ---------- Weekday row ---------- */

span.flatpickr-weekday {
  color: #978667;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---------- Days ---------- */

.flatpickr-day {
  border-radius: 50%;
  font-weight: 500;
  color: #24262d;
}

.flatpickr-day.today {
  border-color: #978667;
  color: #978667;
  font-weight: 700;
}

.flatpickr-day.today:hover {
  background: rgba(151, 134, 103, 0.15);
  color: #24262d;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(151, 134, 103, 0.15);
  border-color: transparent;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange,
.flatpickr-day.endRange:hover {
  background: #978667 !important;
  border-color: #978667 !important;
  color: #fff !important;
  box-shadow: none;
}

.flatpickr-day.inRange,
.flatpickr-day.inRange:hover {
  background: rgba(151, 134, 103, 0.18);
  border-color: transparent;
  box-shadow: -5px 0 0 rgba(151, 134, 103, 0.18), 5px 0 0 rgba(151, 134, 103, 0.18);
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled {
  color: #d9d9d9;
}

/* ==========================================================================
   Mobile — centre the calendar on screen.

   By default Flatpickr anchors the calendar to the input it belongs to.
   On a narrow screen that can push the last column (Sunday) off the edge
   where it can't be seen or tapped. Below 576px we take it out of that
   flow entirely and pin it to the middle of the viewport instead, with a
   dimmed backdrop, so the full week is always visible.
   ========================================================================== */

@media (max-width: 575px) {
  /* Centred WITHOUT transform. A transform on this element would make
     it the positioning anchor for its own fixed-position ::before
     backdrop below, causing that backdrop to render as a small
     misplaced grey block next to the calendar instead of covering the
     full screen. Fixed top + negative margin-left avoids that trap
     entirely while still landing centred for this fixed 340px width. */
  .flatpickr-calendar.open {
    position: fixed !important;
    top: 6vh !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -170px !important; /* half of max-width below */
    transform: none !important;
    width: 92vw !important;
    max-width: 340px !important;
    max-height: 82vh;
    overflow-y: auto;
    overflow-x: hidden !important;
    padding-bottom: 6px;
  }

  /* Force every nested Flatpickr container to fill the calendar's
     actual rendered width, instead of the library's own fixed pixel
     widths. Without this, the day grid can stay narrower than the box
     around it -- cutting off the Sunday column and leaving an empty
     strip visitors can drag/scroll into. */
  .flatpickr-calendar.open .flatpickr-innerContainer,
  .flatpickr-calendar.open .flatpickr-rContainer,
  .flatpickr-calendar.open .flatpickr-days,
  .flatpickr-calendar.open .dayContainer,
  .flatpickr-calendar.open .flatpickr-weekdays,
  .flatpickr-calendar.open .flatpickr-weekdaycontainer,
  .flatpickr-calendar.open .flatpickr-month {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .flatpickr-calendar.open .flatpickr-day {
    max-width: none;
    height: 42px;
    line-height: 42px;
  }

  /* Dimmed backdrop behind the centred calendar -- now correctly
     anchored to the real viewport, not the calendar box. */
  .flatpickr-calendar.open:before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
  }
}