/* ============================================================
   Shared price header + date-selection control + calendar popover.

   Originally part of tour-packages.css (only loaded for tours with active
   packages). Split out and always loaded so day tours WITHOUT packages can
   reuse the exact same sidebar design — see BookingSidebar.tsx's daily-mode
   branch. Colour comes from the shared tokens in tourpage-v3.css, same rule
   as the file this was split from: do NOT introduce local colour variables
   or var() fallbacks that could silently diverge from the palette.
   ============================================================ */

/* ── Price header ── */
.v3-pkg-price-header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.v3-pkg-from { font-size: 13px; color: var(--pkg-muted, #6B7280); }
.v3-pkg-header-compare { font-size: 15px; color: var(--pkg-muted, #6B7280); text-decoration: line-through; }
/* Black, not navy or red (owner preference): the figures and the two control
   labels below read as plain data, so the only colour left in the card is the
   blue CTA. An earlier rule flipped this red whenever a compare-at price was
   shown — the strikethrough beside it already signals the markdown. */
.v3-pkg-header-price { font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.5px; color: var(--fg, #16181c); }
.v3-pkg-header-label { font-size: 13px; color: var(--pkg-muted, #6B7280); }

/* ── Controls box: single bordered box with dividers (GYG design) — holds
   the Adults stepper row and the date-control row below it ── */
.v3-pkg-ctrl { display: flex; flex-direction: column; border: 1px solid var(--pkg-border, #E3E7ED); border-radius: 16px; margin-bottom: 12px; }
.v3-pkg-ctrl-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 12px; box-sizing: border-box; }
.v3-pkg-ctrl > .v3-pkg-ctrl-row { border-bottom: 1px solid var(--pkg-border, #E3E7ED); }
.v3-pkg-ctrl-label { font-size: 14px; font-weight: 700; color: var(--fg, #16181c); }

/* ── Total row, directly below the controls box ── */
.v3-pkg-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.v3-pkg-total-label { font-size: 14px; font-weight: 600; color: var(--pkg-muted, #6B7280); }
.v3-pkg-total-val { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.4px; color: var(--fg, #16181c); }

/* ── Date control (trigger button + error state) ── */
.v3-pkg-ctrl-date { position: relative; }
/* KAN-298: the empty state for the one required field in the booking flow.
   --pkg-red already existed but was only ever used for discount pricing; a
   field error is what it is actually for. */
.v3-pkg-ctrl-date--invalid { box-shadow: inset 0 0 0 1.5px var(--pkg-red, #C5221F); border-radius: 0 0 15px 15px; }
.v3-pkg-ctrl-error {
  margin: 0;
  padding: 8px 14px 10px;
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--pkg-red, #C5221F);
}
.v3-pkg-ctrl-datebtn { background: none; border: none; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--fg, #16181c); }
.v3-pkg-ctrl-dateval { display: flex; align-items: center; gap: 8px; }

/* ── Calendar popover ── */
.v3-pkg-cal-backdrop { position: fixed; inset: 0; z-index: 940; background: transparent; }
.v3-pkg-cal-popover {
  position: absolute; top: calc(100% + 8px); right: 0; left: auto; z-index: 950;
  width: 640px; max-width: calc(100vw - 32px);
  background: #fff; border: 1px solid var(--pkg-border, #E3E7ED); border-radius: 16px;
  box-shadow: 0 16px 44px rgba(20,35,61,0.18); padding: 24px 28px;
}
.v3-pkg-cal-header { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.v3-pkg-cal-nav, .v3-pkg-cal-close { background: none; border: none; padding: 7px; border-radius: 8px; cursor: pointer; color: var(--navy); }
.v3-pkg-cal-nav:hover:not(:disabled), .v3-pkg-cal-close:hover { background: var(--pkg-bg-pill, #F1F3F6); }
/* Months before this one contain nothing selectable, so the arrow stops. */
.v3-pkg-cal-nav:disabled { opacity: 0.35; cursor: default; }
/* Takes the slack between the arrows, so "next" still sits at the right edge
   without the margin-left:auto it used when the header held only two buttons. */
.v3-pkg-cal-header-title { display: none; }
.v3-pkg-cal-nav--prev { margin-right: auto; }
.v3-pkg-cal-close { margin-left: 4px; font-size: 15px; line-height: 1; }
.v3-pkg-cal-months { display: flex; gap: 44px; }
.v3-pkg-cal-month { flex: 1; min-width: 0; }
.v3-pkg-cal-month-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.3px; color: var(--navy); text-align: center; margin-bottom: 14px; }
.v3-pkg-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.v3-pkg-cal-weekdays span { font-size: 13px; color: var(--pkg-muted, #6B7280); text-align: center; }
.v3-pkg-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.v3-pkg-cal-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 500; border: 1.5px solid transparent; background: none; border-radius: 8px; cursor: pointer; color: var(--pkg-text, #1F2937); transition: background 0.12s, border-color 0.12s; }
.v3-pkg-cal-cell:hover:not(:disabled) { background: var(--pkg-bg-pill, #F1F3F6); }
/* KAN-305: was rgba(0,0,0,0.22) — 1.90:1 on the white popover, i.e. not
   readable — and struck through, which everywhere else on this page means
   "was this price" (.v3-pkg-price-compare). #767E89 is 3.9:1 against that fill, clearly
   demoted but legible, and the soft fill carries the "blocked" signal so
   strikethrough can go back to meaning one thing. */
.v3-pkg-cal-cell:disabled { color: #767E89; background: #F7F8FA; cursor: default; text-decoration: none; }
.v3-pkg-cal-cell--empty { visibility: hidden; cursor: default; }
/* KAN-302: selection is one treatment — filled --action for compact controls
   (calendar cell, radio, dot), a 2px --action border for card-sized ones. The
   navy outline this replaced read as a hover/today state, because navy is not
   the selection colour anywhere else in the flow. */
.v3-pkg-cal-cell--sel { border-color: var(--action); background: var(--action); color: #fff; font-weight: 700; }
.v3-pkg-cal-cell--sel:hover:not(:disabled) { background: var(--action); }

/* Fixed-departure tours: days with a scheduled group departure carry a dot
   AND a light action-blue tint (see the legend); every other future day books
   a private trip. The tint sits after the --sel rules in this file, so the
   selected day's solid fill is restated with two-class specificity below —
   without that line the tint would silently win over the selection fill. */
.v3-pkg-cal-cell--grp { position: relative; font-weight: 700; background: #E8F1FC; }
.v3-pkg-cal-cell--grp:hover:not(:disabled) { background: #D9E8FA; }
.v3-pkg-cal-cell--grp::after {
  content: ""; position: absolute; bottom: 4px; left: 50%;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--action);
}
.v3-pkg-cal-cell--sel.v3-pkg-cal-cell--grp,
.v3-pkg-cal-cell--sel.v3-pkg-cal-cell--grp:hover:not(:disabled) { background: var(--action); }
.v3-pkg-cal-cell--sel.v3-pkg-cal-cell--grp::after { background: #fff; }
.v3-pkg-cal-legend {
  display: flex; align-items: center; gap: 7px;
  margin: 2px 0 10px; font-size: 12px; line-height: 1.4;
  color: var(--pkg-muted, #6B7280);
}
.v3-pkg-cal-legend strong { color: var(--pkg-text, #1F2937); font-weight: 700; }
.v3-pkg-cal-legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--action); flex-shrink: 0; }

@media (max-width: 991px) {
  .v3-pkg-cal-popover { width: 560px; }

  /* Swipeable month strip (mobile + tablet). The component renders every month
     in one row here and scroll-snap does the paging, so a swipe is the primary
     way to change month and the arrows just scroll this same container — no
     gesture maths, and it keeps native momentum/rubber-banding.
     `overscroll-behavior-x: contain` stops a swipe past the last month from
     triggering the browser's back-navigation gesture. */
  .v3-pkg-cal-months--swipe {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .v3-pkg-cal-months--swipe::-webkit-scrollbar { display: none; }
  /* Two months per page at tablet width, matching what the static popover
     showed here before (the parent's 44px gap is split across the pair). */
  .v3-pkg-cal-months--swipe > .v3-pkg-cal-month {
    flex: 0 0 calc(50% - 22px);
    scroll-snap-align: start;
  }
}
/* 768, not 767: tourpage-v3.css switches the FAQ, itinerary and headings to
   their mobile form at max-width:768, so a 767 here left exactly one pixel of
   width where the page was half-converted (KAN-304). */
@media (max-width: 768px) {
  .v3-pkg-cal-backdrop { background: rgba(20,35,61,0.4); }
  .v3-pkg-cal-popover {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-width: none;
    border-radius: 16px 16px 0 0; max-height: 82vh; overflow-y: auto; padding: 20px;
  }
  /* :not(--swipe) so this doesn't fight the swipe strip below. Both selectors
     are one class, so plain `.v3-pkg-cal-months` here would beat
     `.v3-pkg-cal-months--swipe` on source order alone and stack the strip in a
     column — which is exactly what it did before this guard: 12 months all at
     the same offsetLeft, nothing to scroll. Still needed even though the
     component is always swipeable at this width, because its matchMedia only
     resolves after the first paint. */
  .v3-pkg-cal-months:not(.v3-pkg-cal-months--swipe) { flex-direction: column; gap: 20px; }
  /* One month per page in the sheet. */
  .v3-pkg-cal-months--swipe { gap: 20px; }
  .v3-pkg-cal-months--swipe > .v3-pkg-cal-month { flex: 0 0 100%; }
  /* One month renders here (the component drops the second), so the caption moves
     up between the arrows and the in-grid one would just repeat it. A single month
     lands around 380px — inside the max-height above, so the sheet won't scroll. */
  .v3-pkg-cal-header-title {
    display: block;
    flex: 1;
    text-align: center;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--navy);
  }
  .v3-pkg-cal-month-title { display: none; }
  .v3-pkg-cal-nav--prev { margin-right: 0; }
}

/* Both booking-card variants need the shared card's rounded-corner overflow
   clip lifted — otherwise it clips the calendar popover, which is a
   descendant positioned outside the card's bounds. */
.v3-booking-card.v3-pkg-booking-card,
.v3-booking-card.v3-book-daily-card {
  overflow: visible;
}