/* =====================================================================
   The site's date picker  (.bjcal, flatpickr dressed)
   ---------------------------------------------------------------------
   One calendar for the search cards: white, a small caps title above the
   month ("Travel date", "Pickup date"), the month and year as one line
   between two round arrows, round day cells with the chosen day orange and
   today ringed, and a foot that says the day in words beside a navy Done.
   Drawn first for the cab card (css/bj-cabs.css .bjcab-cal, value for value
   with the hotel and experiences calendars); the holiday cards moved onto
   it on 2026-10-31 (the designer, with the cab calendar on her screen:
   "aise calendar banao na, holiday ka"). The selectors carry the .bjcal
   class, so they beat flatpickr's own sheet whichever order the two load
   in - no !important needed except where flatpickr uses it itself.
   Scripts add the class and the title/foot on onReady (see the holiday
   views' hpDressCal()).
   ===================================================================== */
.flatpickr-calendar.bjcal {
  box-sizing: content-box; padding: 14px 18px 0; margin-top: 8px;
  border: 1px solid #e6e9f0 !important; border-radius: 18px !important;
  box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 28px 60px -22px rgba(23, 35, 62, .38) !important;
  font-family: inherit;
}
.flatpickr-calendar.bjcal::before, .flatpickr-calendar.bjcal::after { display: none; }
.bjcal__title { margin: 0 0 4px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8b93a5; text-align: left; }
.bjcal .flatpickr-months { align-items: center; margin-bottom: 8px; }
.bjcal .flatpickr-months .flatpickr-month { height: 38px; color: #17233e; fill: #17233e; }
.bjcal .flatpickr-current-month { padding-top: 9px; font-size: 15px; font-weight: 600; }
.bjcal .flatpickr-current-month span.cur-month { margin-left: 0; font-weight: 600; color: #17233e; }
.bjcal .flatpickr-current-month span.cur-month:hover { background: none; }
.bjcal .flatpickr-current-month .numInputWrapper { width: 6ch; }
.bjcal .flatpickr-current-month input.cur-year { font-weight: 600; color: #17233e; pointer-events: none; }
.bjcal .numInputWrapper span { display: none; }
.bjcal .flatpickr-months .flatpickr-prev-month, .bjcal .flatpickr-months .flatpickr-next-month {
  top: 34px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid #e6e9f0; background: #fff; color: #17233e; fill: #17233e;
  transition: background-color .2s ease, border-color .2s ease;
}
.flatpickr-calendar.bjcal .flatpickr-months .flatpickr-prev-month { left: 18px; }
.flatpickr-calendar.bjcal .flatpickr-months .flatpickr-next-month { right: 18px; }
.bjcal .flatpickr-months .flatpickr-prev-month svg, .bjcal .flatpickr-months .flatpickr-next-month svg { width: 11px; height: 11px; }
.bjcal .flatpickr-months .flatpickr-prev-month:hover, .bjcal .flatpickr-months .flatpickr-next-month:hover { background: #f5f7fb; border-color: #cfd5e0; }
.bjcal .flatpickr-months .flatpickr-prev-month:hover svg, .bjcal .flatpickr-months .flatpickr-next-month:hover svg { fill: #f5761a; }
.bjcal .flatpickr-months .flatpickr-disabled { opacity: .3; cursor: default; }
.bjcal .flatpickr-weekdays { height: 30px; }
.bjcal span.flatpickr-weekday { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #8b93a5; }
.bjcal .flatpickr-day { border: 0; font-size: 13.5px; font-weight: 500; color: #17233e; transition: background-color .15s ease, color .15s ease; }
.bjcal .flatpickr-day:hover, .bjcal .flatpickr-day:focus { background: #f0f3f8; border: 0; }
.bjcal .flatpickr-day.today { border: 1.5px solid #f5761a; color: #f5761a; font-weight: 600; }
.bjcal .flatpickr-day.prevMonthDay, .bjcal .flatpickr-day.nextMonthDay { color: #c3c9d4; }
.bjcal .flatpickr-day.flatpickr-disabled, .bjcal .flatpickr-day.flatpickr-disabled:hover { color: #cdd2db; background: none; text-decoration: line-through; text-decoration-color: rgba(205, 210, 219, .7); }
.bjcal .flatpickr-day.selected, .bjcal .flatpickr-day.selected:hover {
  background: #f5761a !important; border-color: #f5761a !important; color: #fff; font-weight: 600;
  box-shadow: 0 6px 14px -6px rgba(245, 118, 26, .8) !important;
}
.bjcal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px -18px 0; padding: 12px 18px; border-top: 1px solid #eef0f4; border-radius: 0 0 18px 18px; background: #fafbfc;
}
.bjcal__words { font-size: 12.5px; font-weight: 500; color: #17233e; text-align: left; }
.bjcal__done {
  flex: 0 0 auto; padding: 8px 18px; border: 0; border-radius: 999px; background: #17233e; color: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .2s ease;
}
.bjcal__done:hover { background: #22335a; }
@media (max-width: 575.98px) {
  .flatpickr-calendar.bjcal { padding: 12px 10px 0; }
  .flatpickr-calendar.bjcal .flatpickr-months .flatpickr-prev-month { left: 10px; }
  .flatpickr-calendar.bjcal .flatpickr-months .flatpickr-next-month { right: 10px; }
  .bjcal__foot { margin: 10px -10px 0; padding: 10px 12px; }
  .bjcal__words { font-size: 11.5px; }
  .bjcal__done { padding: 7px 16px; font-size: 12.5px; }
}


/* ---------------------------------------------------------------------
   The sheet (js/bj-cal.js BJCal.place): where the calendar would not fit
   under its cell without the page being scrolled, the script adds
   .bjcal--sheet on open and the calendar sits in the middle of the screen
   over a dimmed page, with a round close at its top right. Works on every
   dressed calendar (.bjcal, .bjcab-cal, .bjta-cal): the title row grows
   to hold the close and the month arrows move under it. The dim is a
   spread shadow, not an overlay.
   --------------------------------------------------------------------- */
.flatpickr-calendar.bjcal--sheet {
  position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important;
  transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 9999 !important;
  padding-top: 14px !important;
}
.flatpickr-calendar.bjcal--sheet.open {
  box-shadow: 0 2px 6px rgba(23, 35, 62, .06), 0 28px 60px -22px rgba(23, 35, 62, .38), 0 0 0 100vmax rgba(23, 35, 62, .45) !important;
}
.bjcal__x {
  display: none; position: absolute; top: 12px; right: 14px; z-index: 5;
  width: 30px; height: 30px; padding: 0; border: 1px solid #e6e9f0; border-radius: 50%; background: #fff;
  color: #17233e; font-size: 20px; line-height: 1; cursor: pointer;
}
.bjcal__x:hover { background: #f5f7fb; border-color: #cfd5e0; }
.flatpickr-calendar.bjcal--sheet .bjcal__x { display: grid; place-items: center; }
/* a calendar that has no title of its own (the experiences hub) shows one on the sheet only */
.bjta-cal .bjcal__title { display: none; }
.flatpickr-calendar.bjcal--sheet .bjcal__title, .flatpickr-calendar.bjcal--sheet .bjcab-cal__title {
  display: block; line-height: 30px; margin: 0 0 8px; padding-right: 44px;
}
.flatpickr-calendar.bjcal--sheet .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar.bjcal--sheet .flatpickr-months .flatpickr-next-month { top: 52px; }
@media (max-width: 575.98px) {
  .flatpickr-calendar.bjcal--sheet { max-width: calc(100vw - 24px); }
  .bjcal__x { right: 8px; }
}