/* =====================================================================
   Beyond Journey - fixed departure dates
   ---------------------------------------------------------------------
   WHY THIS REPLACED A CALENDAR POPUP

   The tour pages carried a month grid hidden behind "Select Departure
   Date". Three things were wrong with it, and all three cost enquiries:

     1. On a fixed-departure tour the DATE IS THE PRODUCT. Hiding it
        behind a click asks the visitor to work for the one fact they
        came for. Every operator who sells these - Veena World, Kesari,
        SOTC, Thomas Cook - prints the dates on the page.
     2. A 42-cell month grid to expose three active days is the wrong
        instrument. Most of the grid is dead, and the live days are
        indistinguishable until you hunt for them.
     3. It opened reading "Total Payable  0", which reads as broken
        rather than as "nothing chosen yet".

   So: the departures are a list, grouped by month, fare printed against
   each date, chosen with one tap. The estimate only appears once a date
   is actually chosen, and a departure whose date has passed is shown as
   closed rather than quietly dropped - a visitor who saw it advertised
   should be told it has gone, not left wondering.

   Tokens come from css/bj-listing.css when the page loads it, with the
   brand values restated so this works standalone.
   ===================================================================== */

.bjq {
  --bjq-navy: var(--bjl-navy, #17233e);
  --bjq-orange: var(--bjl-orange, #f5761a);
  --bjq-orange-600: var(--bjl-orange-600, #d9600d);
  --bjq-ink: var(--bjl-ink, #17233e);
  --bjq-muted: var(--bjl-muted, #5a6377);
  --bjq-faint: var(--bjl-faint, #8b93a5);
  --bjq-line: var(--bjl-line, #e6e3dc);
  --bjq-line-soft: var(--bjl-line-soft, #f1efe9);
  --bjq-paper: var(--bjl-paper, #faf8f5);
  --bjq-ok: var(--bjl-ok, #1a7f4b);
  --bjq-surface: #fff;
  --bjq-ease: cubic-bezier(.4, 0, .2, 1);

  background: var(--bjq-surface);
  border: 1px solid var(--bjq-line);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--bjl-ui, 'Poppins', 'Segoe UI', system-ui, sans-serif);
  color: var(--bjq-ink);
}
.bjq :where(ul, ol) li { display: block; color: inherit; }

.bjq__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--bjq-navy); color: #fff;
}
.bjq__head i { color: var(--bjq-orange); font-size: 14px; }
.bjq__head strong { font-size: 14.5px; font-weight: 700; }
.bjq__head span {
  margin-left: auto; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(255, 255, 255, .6);
}

.bjq__body { padding: 14px 16px 16px; }

.bjq__month {
  margin: 0 0 7px; padding-top: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--bjq-faint);
}
.bjq__month + .bjq__list { margin-bottom: 12px; }

.bjq__list { list-style: none; margin: 0 0 4px; padding: 0; }

/* one departure. A whole-row button: on a phone the date, the fare and
   the empty space between them are all the same tap target. */
.bjq__dep {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 12px; margin: 0 0 6px;
  border: 1px solid var(--bjq-line); border-radius: 9px;
  background: var(--bjq-surface);
  font-family: inherit; text-align: left; cursor: pointer;
  transition: border-color .18s var(--bjq-ease), background .18s var(--bjq-ease);
}
.bjq__dep:hover:not(:disabled) { border-color: var(--bjq-orange); background: #fffdfa; }
.bjq__dep[aria-pressed="true"] {
  border-color: var(--bjq-orange); background: var(--bjl-orange-50, #fdf4ec);
  box-shadow: inset 0 0 0 1px var(--bjq-orange);
}
.bjq__dep:disabled { cursor: not-allowed; background: var(--bjq-paper); }

.bjq__when { min-width: 0; }
.bjq__day {
  display: block; font-size: 14px; font-weight: 700; line-height: 1.2;
  font-variant-numeric: tabular-nums lining-nums;
}
.bjq__dow { display: block; margin-top: 1px; font-size: 11px; color: var(--bjq-faint); }
.bjq__dep:disabled .bjq__day, .bjq__dep:disabled .bjq__dow { color: var(--bjq-faint); }

.bjq__fare { margin-left: auto; text-align: right; flex: 0 0 auto; }
.bjq__fare b {
  display: block; font-size: 14.5px; font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.bjq__fare small { display: block; margin-top: 1px; font-size: 10.5px; color: var(--bjq-faint); }
.bjq__dep:disabled .bjq__fare b { color: var(--bjq-faint); text-decoration: line-through; }

.bjq__tag {
  flex: 0 0 auto; padding: 3px 8px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.bjq__tag--open { background: rgba(26, 127, 75, .1); color: var(--bjq-ok); }
.bjq__tag--closed { background: var(--bjq-line-soft); color: var(--bjq-faint); }

/* ---- travellers + estimate, only once a date is chosen ---- */
.bjq__pick { margin-top: 13px; padding-top: 13px; border-top: 1px dashed var(--bjq-line); }
.bjq__pick[hidden] { display: none; }

.bjq__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 10px;
}
.bjq__row > span { font-size: 13px; color: var(--bjq-muted); }
.bjq__step {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--bjq-line); border-radius: 8px; overflow: hidden;
}
.bjq__step button {
  width: 30px; height: 30px; border: 0; background: var(--bjq-surface);
  color: var(--bjq-ink); font-size: 14px; cursor: pointer;
}
.bjq__step button:hover:not(:disabled) { background: var(--bjq-paper); color: var(--bjq-orange-600); }
.bjq__step button:disabled { color: var(--bjq-faint); cursor: not-allowed; }
.bjq__step b {
  min-width: 30px; text-align: center; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.bjq__sum { margin: 0; padding: 11px 12px; background: var(--bjq-paper); border-radius: 9px; }
.bjq__line {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12.5px; color: var(--bjq-muted); padding: 2px 0;
}
.bjq__line b { color: var(--bjq-ink); font-variant-numeric: tabular-nums lining-nums; }
.bjq__total {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--bjq-line);
  font-size: 13.5px; font-weight: 700;
}
.bjq__total b { font-size: 19px; font-variant-numeric: tabular-nums lining-nums; }

.bjq__cta {
  display: block; width: 100%; margin-top: 12px; padding: 12px 14px;
  border: 0; border-radius: 9px; text-align: center;
  background: var(--bjq-orange); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .2s var(--bjq-ease);
}
.bjq__cta:hover { background: var(--bjq-orange-600); color: #fff; }

.bjq__note {
  margin: 11px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--bjq-faint);
}
.bjq__note i { color: var(--bjq-faint); margin-right: 4px; }

/* ---- nothing upcoming: say so, and open a door ---- */
.bjq__none {
  padding: 16px 14px; border-radius: 9px;
  background: var(--bjq-paper); border: 1px dashed var(--bjq-line);
  font-size: 13px; line-height: 1.6; color: var(--bjq-muted);
}
.bjq__none strong { display: block; color: var(--bjq-ink); margin-bottom: 4px; font-size: 13.5px; }

/* ---------------------------------------------------------------
   The compact strip used on a listing card
   --------------------------------------------------------------- */
.bjq-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--bjl-muted, #5a6377);
}
.bjq-strip__label {
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  font-size: 10px; color: var(--bjl-faint, #8b93a5); margin-right: 2px;
}
.bjq-strip__date {
  padding: 3px 8px; border-radius: 5px;
  background: var(--bjl-paper, #faf8f5); border: 1px solid var(--bjl-line-soft, #f1efe9);
  font-variant-numeric: tabular-nums lining-nums;
}
.bjq-strip__more { color: var(--bjl-orange-600, #d9600d); font-weight: 700; }

@media (max-width: 575px) {
  .bjq__dep { padding: 10px; gap: 9px; }
  .bjq__tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bjq *, .bjq *::before, .bjq *::after { transition-duration: .01ms !important; }
}

/* inside a tour row's body the strip sits under the tag line */
.bjg-tour__body .bjq-strip {
  margin-top: 9px; padding-top: 10px;
  border-top: 1px dashed var(--bjl-line, #e6e3dc);
}

/* inside another card (the detail page's price rail) the panel drops its
   own chrome and inherits the host card's ground */
.bjq--flat { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.bjq--flat .bjq__dep { background: var(--bjq-surface); }

/* ---------------------------------------------------------------
   Month-grid calendar (the detail rail)
   ---------------------------------------------------------------
   A month view whose departure days carry their fare, so "when does
   it run and what does that date cost" is one glance. Non-departure
   days stay flat text - only a day you can actually buy is a button. */
.bjq-cal__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 8px;
}
.bjq-cal__nav strong { font-size: 13.5px; color: var(--bjq-ink); }
.bjq-cal__nav button {
  width: 28px; height: 28px; border: 1px solid var(--bjq-line); border-radius: 7px;
  background: var(--bjq-surface); color: var(--bjq-ink); cursor: pointer; font-size: 10px;
}
.bjq-cal__nav button:hover:not(:disabled) { border-color: var(--bjq-orange); color: var(--bjq-orange-600); }
.bjq-cal__nav button:disabled { opacity: .35; cursor: not-allowed; }

.bjq-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); margin: 0 0 3px; }
.bjq-cal__dow span {
  text-align: center; padding: 3px 0;
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--bjq-faint);
}

.bjq-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
span.bjq-cal__day {
  display: flex; align-items: center; justify-content: center;
  min-height: 40px; font-size: 11.5px; color: var(--bjq-faint);
}
button.bjq-cal__day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 44px; padding: 3px 1px;
  border: 1px solid var(--bjq-line); border-radius: 8px;
  background: var(--bjq-surface); font-family: inherit; cursor: pointer;
  transition: border-color .15s var(--bjq-ease), background .15s var(--bjq-ease);
}
button.bjq-cal__day b { font-size: 12.5px; font-weight: 700; color: var(--bjq-ink); line-height: 1; }
button.bjq-cal__day small { font-size: 8.5px; font-weight: 700; color: var(--bjq-orange-600); line-height: 1.2; }
button.bjq-cal__day:hover:not(:disabled) { border-color: var(--bjq-orange); background: #fffdfa; }
button.bjq-cal__day.is-sel {
  background: var(--bjl-orange-50, #fdf4ec); border-color: var(--bjq-orange);
  box-shadow: inset 0 0 0 1px var(--bjq-orange);
}
button.bjq-cal__day.is-past { background: var(--bjq-paper); cursor: not-allowed; }
button.bjq-cal__day.is-past b { color: var(--bjq-faint); }
button.bjq-cal__day.is-past small { color: var(--bjq-faint); text-decoration: line-through; }
.bjq-cal__hint { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--bjq-faint); }

/* ---- the date field the calendar popup hangs from ---- */
.bjq-caldd { position: relative; }
.bjq-caldd__field {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; border: 1px solid var(--bjq-line); border-radius: 9px;
  background: var(--bjq-surface); font-family: inherit; cursor: pointer; text-align: left;
  transition: border-color .18s var(--bjq-ease);
}
.bjq-caldd__field:hover, .bjq-caldd.is-open .bjq-caldd__field { border-color: var(--bjq-orange); }
.bjq-caldd__field i.cal { color: var(--bjq-orange-600); font-size: 14px; }
.bjq-caldd__field strong { display: block; font-size: 13.5px; color: var(--bjq-ink); line-height: 1.3; }
.bjq-caldd__field small { display: block; margin-top: 1px; font-size: 10.5px; color: var(--bjq-faint); }
.bjq-caldd__field .chev {
  margin-left: auto; font-size: 10px; color: var(--bjq-faint);
  transition: transform .2s var(--bjq-ease);
}
.bjq-caldd.is-open .chev { transform: rotate(180deg); }

.bjq-caldd__pop {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80;
  background: var(--bjq-surface); border: 1px solid var(--bjq-line); border-radius: 12px;
  box-shadow: 0 16px 38px -12px rgba(11, 17, 32, .38);
  padding: 12px;
}