/* The request form's date fields (public/assets/booking-dates.js). Once the
   script runs (.is-on) the input is a read-only text box holding the day as
   YYYY-MM-DD, its own text hidden, and the face over it shows the day as the
   site writes it, "Sat 21 Nov", or "Choose a day". A click, a tap or Enter
   opens our calendar: a paper card under an ink ring, the month between our
   arrows, the days in the selector family's type, the chosen ends in its
   selected fill and the days between in the brand tone. On a phone it is a
   bottom sheet. Without the script nothing here applies and the input is the
   browser's date input. */
.bk-date { position: relative; display: block; min-width: 0; }
.bk-date > input { display: block; width: 100%; }

.bk-date.is-on > input { color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; cursor: pointer; text-overflow: clip; }
.bk-date.is-on > input::selection { background: transparent; }

.bk-date-face { display: none; }
.bk-date.is-on > .bk-date-face {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 calc(var(--tud-space-4, 16px) + 1px); pointer-events: none;
  color: var(--tud-color-text-primary); font-size: 16px; font-weight: 500; line-height: 1.4; font-variant-numeric: tabular-nums;
}
.bk-date-text { position: relative; display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transform-origin: 0 60%; }
.bk-date:not(.is-set) .bk-date-text { color: var(--tud-color-text-muted); }
.bk-date-icon { flex: none; }
.bk-date.is-on > input[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--xs-hover-ring, var(--tud-color-text-primary)); }

/* booking B's request page: its field padding and weight, and the tone of its examples in both themes */
.xb-quote .bk-date.is-on > .bk-date-face { padding: 0 12px 0 14px; color: var(--xs-ink); font: 600 16px/1.4 var(--tud-font-primary); }
.xb-quote .bk-date:not(.is-set) .bk-date-text { color: #93887E; }
.xb-quote .bk-date-icon { color: var(--xs-ink-2, currentColor); }

/* ---------- the calendar ---------- */
.bk-cal {
  --cal-cell: 46px;
  position: absolute; z-index: 60; box-sizing: border-box; width: calc(var(--cal-cell) * 7 + 32px); padding: 14px 16px 12px;
  border-radius: calc(var(--xs-r, 12px) + 6px);
  color: var(--xs-ink, var(--ls-ink, var(--tud-color-text-primary)));
  background: var(--xs-bg, var(--ls-paper, var(--tud-color-bg-surface)));
  box-shadow: 0 0 0 1.5px var(--ls-ink, var(--tud-color-text-primary)), 0 22px 44px -22px rgba(20, 20, 18, .45);
  font-family: var(--tud-font-primary);
  animation: bk-cal-in 180ms cubic-bezier(.2, .8, .3, 1);
}
.bk-cal[hidden] { display: none; }
.bk-cal.is-up { animation-name: bk-cal-up; }
@keyframes bk-cal-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes bk-cal-up { from { opacity: 0; transform: translateY(6px); } }
.bk-cal button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.bk-cal :focus-visible { outline: 3px solid var(--ls-ink, currentColor); outline-offset: 2px; }

/* the head: the model, then the two ends (or the one day) */
.bk-cal-head { display: flex; align-items: center; gap: 10px; min-height: 64px; padding-bottom: 12px; }
.bk-cal-model { position: relative; flex: none; display: block; width: 66px; margin: -4px 0 0 -4px; }
.bk-cal-model img { display: block; width: 100%; height: auto; }
.bk-cal-model :is(.xd-off, .xd-cell) { position: absolute; inset: 0; pointer-events: none; }
.bk-cal-model .xd-off { z-index: 1; }
.bk-cal-model.is-day-on .xd-off { opacity: 0; }
.bk-cal-model .xd-cell { z-index: 2; opacity: 0; transform-origin: 45.1% 64.4%; }
.bk-cal-model > .xd-live { position: absolute; z-index: 3; display: block; pointer-events: none; opacity: 0; transition: opacity .22s ease-out; }
.bk-cal-model.is-live > .xd-live { opacity: 1; }
.bk-cal-model.is-live > :not(.xd-live) { opacity: 0; transition: opacity 0s linear .24s; }
[data-theme="dark"] .bk-cal-model:not(.is-live):not(.bk-cal-model--alt) {
  filter: brightness(.93) drop-shadow(1px 0 0 rgba(250, 247, 242, .7)) drop-shadow(-1px 0 0 rgba(250, 247, 242, .7)) drop-shadow(0 1px 0 rgba(250, 247, 242, .7)) drop-shadow(0 -1px 0 rgba(250, 247, 242, .7)) drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }

.bk-cal-ends { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; }
.bk-cal-end, .bk-cal-one {
  display: grid; gap: 1px; min-width: 0; min-height: 52px; padding: 7px 10px 7px 12px; border: 0; border-radius: var(--xs-r, 12px); text-align: left;
  background: var(--xs-bg); box-shadow: inset 0 0 0 1.5px var(--xs-ring, var(--tud-color-border-strong));
}
.bk-cal-one { flex: 1 1 auto; box-shadow: none; padding-left: 0; }
.bk-cal-end { cursor: pointer; transition: background-color 140ms ease, box-shadow 140ms ease; }
.bk-cal-end:hover { background: var(--xs-hover-bg); box-shadow: inset 0 0 0 2px var(--xs-hover-ring); }
.bk-cal-end[aria-pressed="true"] { background: var(--xs-hover-bg); box-shadow: inset 0 0 0 2.5px var(--xs-on-bg, var(--tud-color-text-primary)); }
.bk-cal-end-k { color: var(--xs-ink-2, var(--tud-color-text-secondary)); font-size: 12px; font-weight: 700; line-height: 1.2; }
.bk-cal :is(.bk-cal-end, .bk-cal-one) b { overflow: hidden; font-size: 16px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bk-cal-end:not(.is-set) b, .bk-cal-one b:empty { color: var(--xs-off-ink, var(--tud-color-text-muted)); font-size: 15px; font-weight: 600; }
.bk-cal-close { display: none; flex: none; place-items: center; width: 44px; height: 44px; margin-right: -8px; padding: 0; border: 0; border-radius: var(--xs-r, 12px); background: none; cursor: pointer; }

/* the month between our arrows */
.bk-cal-month { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; margin: 0 -6px 2px; }
.bk-cal-name { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; text-align: center; }
.bk-cal-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--xs-r, 12px); background: none; cursor: pointer; }
.bk-cal-arrow:hover:not(:disabled) { background: var(--xs-hover-bg); box-shadow: inset 0 0 0 2px var(--xs-hover-ring); }
.bk-cal-arrow:disabled { color: var(--ls-line-2, var(--tud-color-border-default)); cursor: default; }

/* the days: the selector family's face, a run of brand tone between the ends */
.bk-cal-grid { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
.bk-cal-grid th { padding: 6px 0; color: var(--xs-ink-2, var(--tud-color-text-secondary)); font-size: 12px; font-weight: 700; text-align: center; }
.bk-cal-grid td { position: relative; height: calc(var(--cal-cell) + 4px); padding: 2px 0; text-align: center; }
.bk-cal-day { cursor: pointer; outline: 0; }
.bk-cal-n {
  position: relative; z-index: 1; display: inline-grid; place-items: center; box-sizing: border-box; width: var(--cal-cell); height: var(--cal-cell);
  border-radius: var(--xs-r, 12px); font-family: var(--tud-font-secondary); font-size: 16px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  transition: background-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}
.bk-cal-day:hover:not(.is-off):not(.is-on) .bk-cal-n { background: var(--xs-hover-bg); box-shadow: inset 0 0 0 2px var(--xs-hover-ring); }
.bk-cal td.bk-cal-day:focus-visible { outline: 0; }
.bk-cal-day:focus-visible .bk-cal-n { outline: 3px solid var(--ls-ink, currentColor); outline-offset: 1px; }
/* today: a short ink bar under the number */
.bk-cal-day[aria-current="date"] .bk-cal-n::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 14px; height: 2.5px; margin-left: -7px; border-radius: 2px; background: currentColor; }
/* the run between the ends, as one band, and half bands under the ends */
.bk-cal-day.is-in::before,
.bk-cal-day.has-run::before,
.bk-cal-day.is-end::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: var(--xs-hover-bg, var(--tud-color-accent-tint)); }
.bk-cal-day.has-run::before { left: 50%; }
.bk-cal-day.is-end::before { right: 50%; }
/* the chosen days: the selector family's selected fill */
.bk-cal-day.is-on .bk-cal-n { color: var(--xs-on-ink, var(--tud-color-text-inverse)); background: var(--xs-on-bg, var(--tud-color-text-primary)); box-shadow: inset 0 0 0 2px var(--xs-on-bg, var(--tud-color-text-primary)); }
/* To, before it is chosen: where the pointer or the arrows are */
.bk-cal-day.is-end:not(.is-on) .bk-cal-n { background: var(--xs-bg); box-shadow: inset 0 0 0 2px var(--xs-on-bg, var(--tud-color-text-primary)); }
/* days that cannot be chosen: no ring, no fill, muted */
.bk-cal-day.is-off { cursor: default; }
.bk-cal-day.is-off .bk-cal-n { color: var(--xs-off-ink, var(--tud-color-text-muted)); font-weight: 500; opacity: .55; }

/* the foot: the trip's length, Clear for a day that is optional, Done for a range */
.bk-cal-foot { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--ls-line-2, var(--tud-color-border-default)); }
.bk-cal-foot[hidden] { display: none; }
.bk-cal-count { flex: 1 1 auto; margin: 0; color: var(--xs-ink-2, var(--tud-color-text-secondary)); font-size: 14px; font-weight: 700; }
.bk-cal-clear, .bk-cal-done { min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--xs-r, 12px); font-weight: 800 !important; cursor: pointer; }
.bk-cal-clear { background: none; text-decoration: underline; text-underline-offset: 3px; }
.bk-cal-clear[hidden] { display: none; }
.bk-cal-done { color: var(--ls-paper, #fff) !important; background: var(--ls-ink, var(--tud-color-text-primary)); }

/* a phone: the bottom sheet */
.bk-cal.is-sheet {
  --cal-cell: min(44px, calc((100vw - 40px) / 7));
  position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0; box-shadow: 0 0 0 1.5px var(--ls-ink, var(--tud-color-text-primary)), 0 -18px 40px -20px rgba(20, 20, 18, .5);
  animation: bk-cal-sheet 240ms cubic-bezier(.2, .8, .3, 1);
}
.bk-cal.is-sheet::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 4px; background: var(--xs-ring, var(--tud-color-border-strong)); }
.bk-cal.is-sheet .bk-cal-close { display: grid; }
.bk-cal.is-sheet .bk-cal-model { width: 58px; }
/* a brand's own model (Horizon Trips' suitcase, booking-suitcase.js): its still is framed like the live canvas, which
   reaches past the spot so the handle can rise and the case can roll; the dark still carries its own cream line */
.bk-cal-model--alt { height: 70px; }
.bk-cal.is-sheet .bk-cal-model--alt { width: 60px; height: 64px; }
.bk-cal-model--alt > img { position: absolute; left: -40%; top: -70%; width: 230%; max-width: none; height: 195%; }
.bk-cal-model--alt > .bk-alt-dark, [data-theme="dark"] .bk-cal-model--alt > .bk-alt-light { display: none; }
[data-theme="dark"] .bk-cal-model--alt > .bk-alt-dark { display: block; }
@keyframes bk-cal-sheet { from { transform: translateY(100%); } }
.bk-cal-scrim { position: fixed; inset: 0; touch-action: none; z-index: 59; background: rgba(20, 20, 18, .5); animation: bk-cal-fade 200ms ease-out; }
@keyframes bk-cal-fade { from { opacity: 0; } }
@media (max-width: 380px) { .bk-cal-end { padding: 7px 10px; } .bk-cal :is(.bk-cal-end, .bk-cal-one) b { font-size: 15px; } }

@media (prefers-reduced-motion: reduce) {
  .bk-cal, .bk-cal.is-sheet, .bk-cal-scrim { animation: none; }
  .bk-cal-n, .bk-cal-end { transition: none; }
  .bk-cal-model .xd-cell { display: none; }
}
@media (forced-colors: active) {
  .bk-cal { border: 1px solid CanvasText; }
  .bk-cal-day.is-on .bk-cal-n { forced-color-adjust: none; color: HighlightText; background: Highlight; }
  .bk-cal-day.is-in::before, .bk-cal-day.has-run::before, .bk-cal-day.is-end::before { background: Mark; }
}
/* dark: the brand tone sits too close to the dark paper, so the run takes a little of the selected fill instead */
[data-theme="dark"] .bk-cal-day:is(.is-in, .has-run, .is-end)::before { background: color-mix(in srgb, var(--xs-on-bg, #F2B868) 20%, var(--xs-bg, #241F1A)); }