/* =====================================================================
   The /flights search calendar  (.bjfc, added by js/bj-flight-cal.js)
   ---------------------------------------------------------------------
   2026-10-15, the designer: "isme calendar ko user ke according user
   friendly banao". The look is the hotels calendar she approved on
   2026-10-06 (css/bj-hotel-search.css, .bjhs-cal - copied here under its
   own prefix so neither page leans on the other's stylesheet): white,
   round days, navy words, orange only for the chosen days, the trip
   between departure and return a soft band, a foot line that says what
   is chosen and how long the trip is, Done.

   Added for flights: the band follows the pointer in the return calendar
   before the return is chosen (.bjfc-peek, a ring rather than a fill), a
   one-way search gets an "Add a return" link in the foot, and on a phone
   the calendar is a sheet over the page with a title and a close.

   The page's old navy-header rules for the calendar are gone from the
   view, so nothing here needs to out-shout them. content-box: flatpickr
   sets the width of the months itself; the padding goes round that.
   ===================================================================== */
.flatpickr-calendar.bjfc {
  box-sizing: content-box; padding: 16px 18px 0; margin-top: 10px;
  background: #fff;
  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.bjfc::before, .flatpickr-calendar.bjfc::after { display: none; }   /* the little pointer */

/* the head: the phone sheet's title and close - see the 575 block */
.bjfc__head { display: none; }

/* month and year, between two round arrows */
/* position: the arrows below are placed from this row, not from the sheet,
   so they stay beside the month name when the phone head sits above */
.bjfc .flatpickr-months { position: relative; align-items: center; margin-bottom: 8px; }
.bjfc .flatpickr-months .flatpickr-month { height: 38px; color: #17233e; fill: #17233e; background: transparent; }
.bjfc .flatpickr-current-month { padding-top: 9px; font-size: 15px; font-weight: 600; color: #17233e; }
.bjfc .flatpickr-current-month span.cur-month { margin-left: 0; font-weight: 600; color: #17233e; }
.bjfc .flatpickr-current-month span.cur-month:hover { background: none; }
.bjfc .flatpickr-current-month .numInputWrapper { width: 6ch; }
.bjfc .flatpickr-current-month input.cur-year { font-weight: 600; color: #17233e; pointer-events: none; }
.bjfc .numInputWrapper span { display: none; }
.bjfc .flatpickr-months .flatpickr-prev-month, .bjfc .flatpickr-months .flatpickr-next-month {
  top: 2px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid #e6e9f0; background: #fff; color: #17233e; fill: #17233e; z-index: 3;
  transition: background-color .2s ease, border-color .2s ease;
}
.bjfc .flatpickr-months .flatpickr-prev-month { left: 18px; }
.bjfc .flatpickr-months .flatpickr-next-month { right: 18px; }
.bjfc .flatpickr-months .flatpickr-prev-month svg, .bjfc .flatpickr-months .flatpickr-next-month svg { width: 11px; height: 11px; fill: #17233e; }
.bjfc .flatpickr-months .flatpickr-prev-month:hover, .bjfc .flatpickr-months .flatpickr-next-month:hover { background: #f5f7fb; border-color: #cfd5e0; }
.bjfc .flatpickr-months .flatpickr-prev-month:hover svg, .bjfc .flatpickr-months .flatpickr-next-month:hover svg { fill: #f5761a; }
.bjfc .flatpickr-months .flatpickr-disabled { opacity: .3; cursor: default; }

/* the days of the week */
.bjfc .flatpickr-weekdays { height: 30px; background: transparent; }
.bjfc span.flatpickr-weekday { font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #8b93a5; background: transparent; }

/* the days: round, navy; the chosen ones orange; the trip between them a band */
/* the view keeps every day a 38px circle in a seven-column grid (the
   designer, 2026-10-05: "date select karne ko circle mein do"); position so
   the band below can hang off a day */
.bjfc .flatpickr-day {
  position: relative;
  border: 0; border-radius: 50%; font-size: 13.5px; font-weight: 500; color: #17233e;
  transition: background-color .15s ease, color .15s ease;
}
.bjfc .flatpickr-day:hover, .bjfc .flatpickr-day:focus { background: #f0f3f8; border: 0; }
.bjfc .flatpickr-day.today { border: 1.5px solid #f5761a; color: #f5761a; font-weight: 600; }
.bjfc .flatpickr-day.prevMonthDay, .bjfc .flatpickr-day.nextMonthDay { visibility: hidden; pointer-events: none; }
.bjfc .flatpickr-day.flatpickr-disabled, .bjfc .flatpickr-day.flatpickr-disabled:hover {
  color: #cdd2db; background: none; text-decoration: line-through; text-decoration-color: rgba(205, 210, 219, .7);
}
/* the band between departure and return (the day under the pointer stands
   in for the return until one is chosen): drawn by a ::before behind each
   day, since the days themselves stay circles - with no z-index on the day
   the pseudo falls to the calendar's stacking context and paints under
   the orange discs, so the band runs behind the two chosen days */
.bjfc .flatpickr-day.bjfc-mid, .bjfc .flatpickr-day.bjfc-mid:hover { background: transparent; color: #17233e; }
.bjfc .flatpickr-day.bjfc-mid::before,
.bjfc .flatpickr-day.bjfc-start.bjfc-band::before,
.bjfc .flatpickr-day.bjfc-end::before,
.bjfc .flatpickr-day.bjfc-peek::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; z-index: -1; background: #fff1e5;
}
.bjfc .flatpickr-day.bjfc-start.bjfc-band::before { left: 50%; }
.bjfc .flatpickr-day.bjfc-end::before, .bjfc .flatpickr-day.bjfc-peek::before { right: 50%; }
.bjfc .flatpickr-day.selected,
.bjfc .flatpickr-day.bjfc-start,
.bjfc .flatpickr-day.bjfc-end {
  background: #f5761a !important; border: 0 !important; border-radius: 50%;
  color: #fff; font-weight: 600; box-shadow: 0 6px 14px -6px rgba(245, 118, 26, .8);
}
/* the day the pointer is on, before it is chosen: a ring, not a fill */
.bjfc .flatpickr-day.bjfc-peek, .bjfc .flatpickr-day.bjfc-peek:hover {
  background: #fff !important; border: 1.5px solid #f5761a !important;
  color: #f5761a; font-weight: 600; box-shadow: none;
}
.bjfc .dayContainer + .dayContainer { box-shadow: -1px 0 0 #eef0f4; }

/* the foot: what is chosen, how long the trip is, and Done */
.bjfc__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px -18px 0; padding: 12px 18px; border-top: 1px solid #eef0f4;
  font-size: 13px; color: #56607a;
}
.bjfc__sum b { font-weight: 600; color: #17233e; }
.bjfc__hint { color: #8b93a5; }
.bjfc__acts { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.bjfc__add {
  padding: 0; border: 0; background: none; color: #f5761a; font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.bjfc__add:hover { text-decoration: underline; }
.bjfc__add[hidden] { display: none; }
.bjfc__done {
  flex: 0 0 auto; padding: 8px 20px; 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;
}
.bjfc__done:hover { background: #22335a; }

/* the sheet: where the calendar would not fit under its cell without the
   page being scrolled - a laptop window of 650px, every phone - the script
   adds .bjfc--sheet on open and the calendar sits in the middle of the
   screen over a dimmed page, with its own title and close (2026-10-15, the
   designer: "user ko scroll karna hi padega, user friendly toh hai hi
   nahi"). On a tall monitor it stays attached under the cell. The dim is a
   spread shadow, not an overlay: an overlay drawn as the sheet pseudo
   element sat over its white body (the view, 2026-10-05). */
.flatpickr-calendar.bjfc--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: 0;
}
.flatpickr-calendar.bjfc--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;
}
.bjfc--sheet .bjfc__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 -18px 8px; padding: 12px 18px 10px; border-bottom: 1px solid #eef0f4;
}
.bjfc__title { font-size: 14px; font-weight: 600; color: #17233e; }
.bjfc__close {
  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;
}
.bjfc__close:hover { background: #f5f7fb; border-color: #cfd5e0; }

/* the phone and the small tablet: the sheet a step tighter */
@media (max-width: 768px) {
  .flatpickr-calendar.bjfc { width: auto !important; max-width: calc(100vw - 32px); padding-left: 10px; padding-right: 10px; }
  .bjfc--sheet .bjfc__head { margin: 0 -10px 8px; padding: 12px 14px 10px; }
  .bjfc .flatpickr-months .flatpickr-prev-month { left: 6px; }
  .bjfc .flatpickr-months .flatpickr-next-month { right: 6px; }
  .bjfc__foot { flex-wrap: wrap; margin: 10px -10px 0; padding: 10px 12px; font-size: 12px; }
  .bjfc__acts { margin-left: auto; }
  .bjfc__add { font-size: 12.5px; }
  .bjfc__done { padding: 7px 16px; font-size: 12.5px; }
}