/* ============================================================
   Balance Farm — booking flow (multi-step modal)
   Content and layout specific to the booking modal: the two-column
   split, summary/price card, step panes, add-on cards, actions bar,
   and the "All set!" step. The shared chrome lives in modal-shell.css,
   which MUST be loaded first.
   ============================================================ */

.bkflow--booking .bkflow__body {
  display: grid;
  grid-template-columns: 3fr 2fr;
}
.bkflow--booking.is-done .bkflow__body { grid-template-columns: 1fr 1fr; }


/* ---- Left: title + summary ---- */
.bkflow__info {
  --bkflow-gutter: 20px;        /* matches the other modals */
  padding: var(--bkflow-gutter);
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  overflow-y: auto;
}
.bkflow__titles { display: flex; flex-direction: column; gap: var(--s-4); max-width: 60ch; }
/* the done step reads as one block: subtitle tucks under "All set!" */
.bkflow--booking.is-done .bkflow__titles { gap: var(--s-1); }
.bkflow__subtitle {
  font-size: var(--t-md);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-md-track);
  color: var(--color-ink);
}
.bkflow__subtitle[hidden] { display: none; }
.bkflow__title {
  font-size: var(--t-3xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-3xl-track);
  line-height: 1;
  text-wrap: pretty;
}

.bkflow--booking.is-done .bkflow__title { font-size: var(--t-4xl); }

/* summary wrapper — transparent on desktop; mobile expanded sheet */
.bkflow__sumwrap { display: contents; }
.bkflow__sum-close, .bkflow__sum-backdrop { display: none; }

/* summary / price card — spec: 408px × hug, padding 20, gap 40, radius 8 */
.bkflow__summary {
  width: 408px;
  max-width: 100%;
  background: var(--fill-0);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}
.bkflow__summary-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  flex-wrap: wrap;   /* Change drops to its own line before text can break */
}
.bkflow__summary-when {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-size: var(--t-lg);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-lg-track);
  line-height: 100%;
  min-width: 0;
}
.bkflow__dates, .bkflow__guests { white-space: nowrap; flex: 0 0 auto; }
.bkflow__sep { color: var(--color-ink); opacity: 0.1; }
/* composes .c-pill; only the fill and the denser size are its own */
.bkflow__change { background: var(--fill-2); padding: 12px 16px; height: auto; font-size: var(--t-xs); letter-spacing: var(--t-xs-track); }
@media (hover: hover) {
  .bkflow__change:hover { background: var(--fill-3); }
}

.bkflow__rows { display: flex; flex-direction: column; }
.bkflow__row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  line-height: 100%;
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
}
.bkflow__row-right { display: flex; align-items: center; gap: var(--s-3); }
.bkflow__remove {
  width: 20px; height: 20px;
  padding: 0;
  border-radius: var(--r-md);
  background: transparent;
  border: none;
}
.bkflow__remove img { display: block; width: 20px; height: 20px; }
@media (hover: hover) {
  .bkflow__remove:hover { opacity: 0.7; }
}
.bkflow__addons { display: flex; flex-direction: column; gap: var(--s-4); }
.bkflow__addons[hidden] { display: none; }
.bkflow__addons-label { font-size: var(--t-sm); font-weight: var(--w-medium); letter-spacing: var(--t-sm-track); line-height: 100%; }
.bkflow__addons .bkflow__row { padding: 16px 0; }
.bkflow__total {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-lg);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-lg-track);
  line-height: 100%;
}
.bkflow__total-num { transition: transform 240ms ease; }
.bkflow__total-num.is-pulse { transform: scale(1.05); }

/* ---- Right: step panes (form column) ---- */
.bkflow__form {
  --bkflow-gutter: 20px;
  padding: var(--bkflow-gutter);
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.bkflow__pane { display: none; }
.bkflow__pane.is-active {
  display: flex;
  flex-direction: column;
  gap: 52px;
  animation: bk-pane 340ms var(--e-move) both;
}
.bkflow__pane[data-bk-pane="0"].is-active { gap: var(--s-4); }
@keyframes bk-pane {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bkflow__section { display: flex; flex-direction: column; gap: var(--s-4); }
.bkflow__section[hidden] { display: none; }
.bkflow__q {
  font-size: var(--t-md);   /* 24 @1440 */
  font-weight: var(--w-medium);
  letter-spacing: var(--t-md-track);
  line-height: 1.15;
}
/* horizontal chip rows: bleed to the gutter so nothing clips */
.bkflow__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.bkflow__chips .c-chip { flex: 0 0 auto; }

/* step 1 — category filters + experience cards (16px between) */
.bkflow__filters {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-1);
  /* bleed to the panel edge so the last chip scrolls fully into view
     instead of being clipped by the column gutter */
  margin-inline: calc(var(--bkflow-gutter) * -1);
  padding-inline: var(--bkflow-gutter);
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.bkflow__filters::-webkit-scrollbar { display: none; }
/* the filter IS a chip; it only adds the row's flex behaviour */
.bkflow__filter { flex: 0 0 auto; }

.bkflow__cards { display: flex; flex-direction: column; gap: var(--s-1); }
.bkflow__card {
  background: var(--fill-1);
  border-radius: var(--r-md);
  padding: var(--s-5);
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}
.bkflow__card.is-selected { background: var(--secondary); color: var(--color-ink); }
.bkflow__card.is-selected .bkflow__card-desc { color: var(--ink-70); }
@media (hover: hover) {
  .bkflow__card:hover { background: var(--secondary); color: var(--color-ink); }
  .bkflow__card:hover .bkflow__card-desc { color: var(--ink-70); }
}
.bkflow__card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.bkflow__card-name { font-size: var(--t-lg); font-weight: var(--w-medium); letter-spacing: var(--t-lg-track); }
.bkflow__card-desc { font-size: var(--t-xs); font-weight: var(--w-medium); letter-spacing: var(--t-xs-track); line-height: 1.45; color: var(--color-ink); margin-top: 56px; max-width: 52ch; transition: color 200ms ease; }
.bkflow__price {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 12px;
  background: var(--fill-1);
  border-radius: var(--r-pill);
  font-size: var(--t-2xs); font-weight: var(--w-medium); letter-spacing: var(--t-2xs-track);
  line-height: 100%;
  color: var(--color-ink);
  transition: background 200ms ease, color 200ms ease;
}
.bkflow__card.is-selected .bkflow__price {
  background: var(--paper);
  color: var(--color-ink);
}
.bkflow__check {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  background: transparent url('../assets/icons/icon-panel-unselected.svg') center / 20px 20px no-repeat;
  border: none;
  border-radius: var(--r-md);
}
/* the corner mark keeps its own dark glyph through hover and select — it is
   never restyled by the card's state */
.bkflow__card.is-selected .bkflow__check {
  background-image: url('../assets/icons/icon-panel-selected.svg');
}

/* done step — no floating actions bar (close/minimize exits) */
.bkflow--booking.is-done .bkflow__actions { display: none; }
.bkdone__details .bkflow__row > span:last-child { white-space: nowrap; }

/* done step — inbox card (extended price component) */
.bkflow__inbox { gap: var(--s-8); }
.bkflow__inbox[hidden] { display: none; }
.bkflow--booking.is-done .bkflow__summary:not(.bkflow__inbox) { display: none; }
.bkflow__inbox-title {
  font-size: var(--t-xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xl-track);
  line-height: 1.2;
  max-width: 18ch;
}
.bkflow__inbox-cta { width: 100%; padding: var(--s-4); }
/* desktop: only on the final "All set!" step (the mobile block hides it) */
.bkflow__inbox[hidden] { display: none; }
.bkflow--booking.is-done .bkflow__inbox:not([hidden]) { display: flex; }

/* done step — retreat panel (right column) */
.bkflow__pane--done.is-active { gap: 0; flex: 1 0 auto; }
.bkdone {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.bkdone__inbox { margin-bottom: 12px; }   /* 12 + the 4px gap = 16 to the panels */
.bkdone__panel {
  background: var(--fill-0);
  border-radius: var(--r-md);
  padding: var(--s-5);
}
.bkdone__details { flex: 1 0 auto; }
.bkdone__label {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  line-height: 100%;
}
.bkdone__head { position: relative; display: flex; flex-direction: column; }
.bkdone__cabin-frame {
  position: absolute;
  top: 20px; right: 20px; bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-radius: var(--r-md);
}
.bkdone__cabin {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  isolation: auto;
}
.bkdone__dates {
  margin-top: var(--s-18);
  font-size: var(--t-2xl);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-2xl-track);
  line-height: 1;
}
/* address is its own block, separated by layout spacing (72px) */
.bkdone__address { margin: 72px 0; }
.bkdone__address .bkflow__row { border-top: 1px solid var(--hairline); }
.bkdone__details .bkflow__rows { margin-top: 0; }
/* composes .c-cta-tertiary at the micro size */
.bkdone__copy {
  padding: 6px 10px;
  font-size: var(--t-2xs);
  letter-spacing: var(--t-2xs-track);
}
.bkdone__addons { margin-top: 72px; }
.bkdone__addons[hidden] { display: none; }
.bkdone__addon-cards {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two per row, stretched; extras wrap */
  gap: var(--s-1);
}
.bkdone__addon {
  background: var(--fill-1);
  border-radius: var(--r-md);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.bkdone__addon-name { font-size: var(--t-md); font-weight: var(--w-medium); letter-spacing: var(--t-md-track); }
.bkdone__addon-time {
  align-self: flex-start;
  height: auto;
  padding: 10px 16px;
  font-size: var(--t-xs);
}

/* payment failure message */
.bkflow__payerror {
  font-size: var(--t-xs); font-weight: var(--w-medium); letter-spacing: var(--t-xs-track);
  line-height: 1.4;
  color: var(--status-error);
}
.bkflow__payerror[hidden] { display: none; }

/* submitting state */
.bkflow__next.is-busy { opacity: 0.6; cursor: default; }

/* no dates chosen — don't let the guest advance */
.bkflow.has-no-dates .bkflow__next { opacity: 0.4; pointer-events: none; }

/* secondary CTA, sized for the card */
.bkdone__addon-price {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  padding: 10px 16px;
  background: var(--secondary);
  border: none;
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-xs-track);
  line-height: 100%;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--d-fast) ease;
}
@media (hover: hover) {
  .bkdone__addon-price:hover { background: var(--secondary-hover); }
}

/* step 4 — payment */
.bkflow__secure { font-size: var(--t-xs); color: var(--ink-45); }
.bkflow__methods { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--ink-70); margin-top: -36px; }

/* ---- Actions ---- */
.bkflow__actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  display: flex; align-items: center; justify-content: center;
  padding-top: 32px;
}
.bkflow__actions-group { display: flex; align-items: center; gap: var(--s-2); }
.bkflow__back[hidden], .bkflow__skip[hidden] { display: none; }
.bkflow__back { padding: 0; }
.bkflow__back img { display: block; width: 9px; height: 15px; }
.bkflow__skip { height: auto; padding: 16px 52px; font-size: var(--t-sm); letter-spacing: var(--t-sm-track); }

/* the fields are rules now, not boxes, so they need real space between them */
.bkflow__fields { display: flex; flex-direction: column; gap: var(--s-4); }
.bkflow__field-row { display: flex; gap: var(--s-4); }
.bkflow__field-row > .c-field { flex: 1 1 0; min-width: 0; }
.bkflow__note { height: 160px; }

.bkflow__next {
  padding: var(--s-4);
  background: var(--brand);
  border: none; border-radius: var(--r-md);
  color: var(--paper);
  font-family: inherit; font-size: var(--t-sm); font-weight: var(--w-medium); letter-spacing: var(--t-sm-track);
  cursor: pointer;
  transition: background var(--d-fast) ease;
}
@media (hover: hover) {
  .bkflow__next:hover { background: var(--accent-hover); }
}
.bkflow__next-icon { display: none; }
.bkflow__actions .bkflow__next {
  height: auto;
  padding: 16px 52px;
  font-size: var(--t-sm);
  letter-spacing: var(--t-sm-track);
  border-radius: var(--r-pill);
}
.bkflow--enquiry .bkflow__next { margin-top: auto; width: 100%; }

/* price brief — mobile bottom bar only */
.bkflow__brief { display: none; }

/* ---- Mobile: adaptive single column + fixed bottom bar ---- */
@media (max-width: 1024px) {
  /* the body is the scroller here, so it carries the header clearance + fade */
  .bkflow--booking .bkflow__body {
    display: block;
    overflow-y: auto;
    padding-top: var(--bkflow-topbar-h);
    padding-bottom: 120px;
  }
  .bkflow__title { font-size: var(--t-2xl); }
  .bkflow__titles { margin-bottom: 96px; max-width: none; }   /* title → content: 96px */
  .bkflow__pane.is-active { gap: 48px; }

  /* expanded price component — sits 4px above the fixed bar, blur behind */
  .bkflow--booking .bkflow__sumwrap { display: none; }
  .bkflow--booking.show-sum .bkflow__sumwrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-2);
    position: fixed;
    left: var(--chrome-inset); right: var(--chrome-inset);
    /* clears the measured bar, then the same inset used on the sides */
    bottom: calc(var(--chrome-inset) + var(--bkflow-bar-h, 76px) + 4px);
    z-index: 6;
  }
  .bkflow__calslot {
    max-height: calc(100dvh - var(--bkflow-bar-h, 76px) - 140px);
    overflow-y: auto;
  }
  /* the sheet must be shown while changing, even if the price card is not */
  .bkflow--booking.is-changing .bkflow__sumwrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--s-2);
    position: fixed;
    left: var(--chrome-inset); right: var(--chrome-inset);
    bottom: calc(var(--chrome-inset) + var(--bkflow-bar-h, 76px) + 4px);
    z-index: 6;
    /* the wrapper is full-width but only its card/calendar child is visible,
       so the empty space beside it was swallowing clicks at z-index 6 */
    pointer-events: none;
  }
  .bkflow--booking.is-changing .bkflow__sumwrap > * { pointer-events: auto; }
  .bkflow--booking.show-sum .bkflow__summary {
    display: flex;
    width: 100%;
    /* derived, not guessed: the viewport minus the card's own offset from the
       bottom, the close button and its gap above it, and a 16px top inset.
       A magic cap let the card outgrow the space and scroll, which clipped
       the dates against its top edge. */
    max-height: calc(100dvh - (16px + var(--bkflow-bar-h, 76px) + 4px) - 48px - 8px - 16px);
    overflow-y: auto;
    background: var(--fill-1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  /* "31 Jul—1 Aug" is far longer than "29—31 Oct"; the whole row steps down
     together so the dates and the guest count keep one size */
  .bkflow__summary-when.is-range { font-size: var(--t-md); }
  .bkflow--booking.show-sum .bkflow__summary-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .bkflow--booking.show-sum .bkflow__sum-close {
    display: inline-flex;
    background: var(--secondary);
  }
  /* the calendar has its own Confirm/close affordances; both classes co-exist
     on that path, so this must outrank the rule above */
  .bkflow--booking.show-sum.is-changing .bkflow__sum-close,
  .bkflow--booking.is-changing .bkflow__sum-close { display: none; }
  .bkflow--booking.show-sum .bkflow__sum-backdrop,
  .bkflow--booking.is-changing .bkflow__sum-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 5;
    /* single blur pass; the tint does the hiding (nested
       backdrop-filters composite the whole group per frame) */
    background: var(--tint-1);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }

  .bkflow__actions {
    position: fixed;
    left: var(--chrome-inset); right: var(--chrome-inset); bottom: var(--chrome-inset);
    margin: 0;
    padding: 14px 16px;
    justify-content: space-between;
    gap: var(--s-3);
    /* 12% black tint over a mostly-opaque white base so content
       behind the bar isn't legible through the blur */
    background: var(--fill-4);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: var(--r-lg);
  }
  .bkflow__brief {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    background: none; border: none; padding: 0;
    font-family: inherit; color: var(--color-ink);
    text-align: left;
    cursor: pointer;
  }
  .bkflow__brief-price { font-size: var(--t-lg); font-weight: var(--w-medium); letter-spacing: var(--t-lg-track); display: flex; align-items: center; gap: var(--s-2); }
  .bkflow__brief-chev { width: 8px; height: auto; transform: rotate(180deg); }
  .bkflow__brief-sub { display: flex; flex-direction: column; gap: 2px; font-size: var(--t-2xs); font-weight: var(--w-medium); letter-spacing: var(--t-2xs-track); color: var(--color-ink); }
  .bkflow__skip { padding: 16px 32px; }

  /* Next → circular primary icon button */
  .bkflow__actions button.bkflow__next {
    width: 48px; height: 48px;
    padding: 0;
    border-radius: var(--r-pill);
    display: inline-flex; align-items: center; justify-content: center;
  }
  .bkflow__actions button.bkflow__next [data-bk-nextlabel] { display: none; }
  .bkflow__actions button.bkflow__next .bkflow__next-icon {
    display: block;
    width: 9px; height: 15px;
    transform: rotate(180deg);
    filter: invert(1);
  }

  /* payment step — button says Confirm (text, not icon) */
  .bkflow--booking[data-step="3"] .bkflow__actions button.bkflow__next {
    width: auto;
    height: 48px;
    padding: 0 32px;
    border-radius: var(--r-pill);
  }
  .bkflow--booking[data-step="3"] .bkflow__actions button.bkflow__next [data-bk-nextlabel] { display: inline; }
  .bkflow--booking[data-step="3"] .bkflow__actions button.bkflow__next .bkflow__next-icon { display: none; }

  /* done step — mobile: subtitle carries the inbox line; bottom bar = brief + Open Email */
  /* the done step stacks as one column so the inbox card can sit last:
     the info section becomes transparent to layout and its children join
     the body's flex flow (padding moves onto those children) */
  .bkflow--booking.is-done .bkflow__body { display: flex; flex-direction: column; }
  .bkflow--booking.is-done .bkflow__info { display: contents; }
  .bkflow--booking.is-done .bkflow__titles {
    order: 0;
    /* the body already clears the topbar on mobile; only the gutter is ours,
       which matches the other steps' info padding */
    padding: var(--bkflow-gutter, 16px) var(--bkflow-gutter, 16px) 0;
  }
  .bkflow--booking.is-done .bkflow__form { order: 1; }
  .bkflow--booking.is-done .bkflow__inbox,
  .bkflow--booking.is-done .bkflow__inbox:not([hidden]) {
    display: none;                  /* mobile: the card is desktop-only */
  }
  /* done step: keeps the other steps' floating bar exactly — same fixed
     offsets, padding and blur; only the buttons inside it differ */
  .bkflow--booking.is-done .bkflow__actions {
    display: flex;
    justify-content: center;
  }
  .bkflow--booking.is-done .bkflow__brief { display: none; }
  .bkflow--booking.is-done .bkflow__back,
  .bkflow--booking.is-done .bkflow__skip,
  .bkflow--booking.is-done button.bkflow__next { display: none; }
  .bkdone__cabin-frame {
    position: static;
    display: block;
    margin: 40px auto 0;
    width: fit-content;
    inset: auto;
  }
  .bkdone__cabin {
    width: min(78vw, 340px);
    height: auto;
  }
  .bkdone__dates { margin-top: 40px; font-size: var(--t-2xl); }
  .bkdone__address { margin: 72px 0; }
  .bkdone__addons { margin-top: 72px; }

  /* enquiry fallback */
  .bkflow__body {
    flex-direction: column;
    overflow-y: auto;
    padding-top: var(--bkflow-topbar-h);
  }
}
@media (max-width: 480px) {
  .bkflow__title { font-size: var(--t-xl); }
  .bkflow__card-name { font-size: var(--t-base); }
  .bkflow__summary { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bkflow, .bkflow__panel, .bkflow__next, .bkflow__remove { transition-duration: 1ms !important; }
  .bkflow__pane.is-active { animation-duration: 1ms; }
}

/* while the guest is changing dates, the calendar takes the card's place —
   and its exact width, so the column doesn't jump */
.bkflow__calslot:empty { display: none; }
.bkflow__calslot > * {
  animation: bk-calslot 380ms var(--e-out) both;
}
@keyframes bk-calslot {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bkflow__calslot { width: 100%; }    /* phone + tablet: fills the sheet */
@media (min-width: 1025px) {
  .bkflow__calslot { width: 408px; } /* desktop: same as .bkflow__summary */
  /* the embedded calendar must never outrun the column, or Confirm sits
     below the fold and a newly picked range can't be committed */
  .bkflow.is-changing .bkflow__sumwrap { min-height: 0; }
  .bkflow.is-changing .bkflow__calslot { max-height: 100%; overflow-y: auto; }
  .bkflow.is-changing .bkflow__info { overflow: hidden; }
}
.bkflow.is-changing .bkflow__summary { display: none; }


/* ============================================================
   "All set!" step — desktop: photo column left, panels right.
   The gallery element is MOVED between the two slots at the
   breakpoint (see js/ui/bookingFlow.js), so the photos exist
   once in the DOM and never diverge between layouts.
   ============================================================ */

.bkdone__galleryslot:empty { display: none; }
/* the photos own the column's left and bottom edges; the text keeps its gutter */
.bkflow--booking.is-done .bkflow__info {
  padding-left: 0;
  padding-bottom: 0;
}
.bkflow--booking.is-done .bkflow__titles { padding-left: var(--bkflow-gutter, 16px); }
.bkflow--booking:not(.is-done) .bkdone__galleryslot { display: none; }

/* left column: a vertical run of cabin photos, first one tall enough that
   the next peeks in below it */
.bkdone__gallery {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.bkdone__gallery img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1907 / 2592;         /* reserves the box so lazy loading fires */
  object-fit: cover;
}
@media (min-width: 1025px) {
  .bkflow--booking.is-done .bkflow__info {
    overflow-y: auto;
    /* the wheel must not chain to the page once this column hits its end */
    overscroll-behavior: contain;
  }
  [data-bk-galleryslot="desktop"] {
    margin-top: calc(56px - 32px);   /* 56px total, minus .bkflow__info's gap */
    width: clamp(360px, 34vw, 520px);
  }
  /* every photo is the same height — 73% of the column, measured, so the next
     one's top edge is always well inside view */
  .bkdone__gallery img {
    height: var(--gallery-h, 73vh);
    aspect-ratio: auto;
  }
}

/* ---- inbox panel: outlined, sits above the retreat card ---- */
.bkdone__inbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.bkdone__inbox[hidden] { display: none; }
.bkdone__inbox-title {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  line-height: 1.35;
  max-width: none;
  /* one line while it fits, wrapping to a second only once the column is too
     narrow for it — the buttons keep their gap either way */
  text-wrap: balance;
}
.bkdone__inbox-ctas { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }
.bkdone__inbox-open,
.bkdone__inbox-hide { height: 44px; padding: 0 20px; font-size: var(--t-xs); }

/* ---- retreat panel ---- */
.bkdone__dateline {
  display: flex;
  align-items: center;
  column-gap: var(--s-5);
  row-gap: var(--s-3);                     /* a deliberate stack when the row is tight */
  flex-wrap: wrap;
}
.bkdone__dates {
  display: flex;
  align-items: baseline;
  gap: 0.22em;                       /* desktop: "Feb 6\u201412" reads as one line */
  margin: 0;
  font-size: clamp(var(--t-xl), 4.4vw, var(--t-5xl));
  white-space: nowrap;
}
.bkdone__addcal { height: auto; padding: 12px 16px; font-size: var(--t-xs); white-space: nowrap; }

/* ---- fact grid: label at 40%, value 4px beneath ---- */
.bkdone__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;                            /* rows meet with no gap; hairlines divide */
  margin: 72px 0 0;                  /* from the panel title */
}
.bkdone__facts--stack { grid-template-columns: 1fr; }
.bkdone__personal .bkdone__facts { margin-bottom: 72px; }
.bkdone__fact {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);                          /* value sits right beneath its title */
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  min-width: 0;
}
.bkdone__fact--wide { grid-column: 1 / -1; }
/* separates the cabin/address block from the stay rows beneath it */
.bkdone__fact--break { margin-bottom: 72px; }
.bkdone__fact dt {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  color: var(--ink-45);      /* 40% */
}
.bkdone__fact dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  line-height: 1.35;
}
.bkdone__fact dd.bkdone__tags {
  gap: var(--s-1);
  margin-top: 4px;                   /* + the fact's own 4px = 8 from the title */
}
.bkdone__tag {
  padding: 6px 12px;
  background: var(--fill-2);
  border-radius: var(--r-pill);
  font-size: var(--t-2xs);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-2xs-track);
}

/* ---- floating Join & Save, same bar the other steps use ---- */
@media (min-width: 1025px) {
  .bkflow--booking.is-done .bkdone {
    /* room for the sticky button at the foot of the run; on mobile the bar is
       fixed and .bkflow__body's own bottom padding already covers it */
    margin-bottom: calc(var(--bkflow-gutter, 16px) + 48px);
  }
}
.bkflow--booking.is-done .bkflow__actions {
  display: flex;
  justify-content: center;
  background: none;                  /* no bar behind the button */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: 0;
  z-index: 7;
  pointer-events: none;              /* only the button itself is clickable */
}
@media (min-width: 1025px) {
  /* scoped to desktop: the mobile block above sets its own static treatment,
     and a media query adds no specificity to override it */
  .bkflow--booking.is-done .bkflow__actions {
    /* sticky, not absolute: .bkflow__form is the scroll container, so an
       absolute child would resolve against its content box and scroll away. */
    position: sticky;
    /* identical box to the other steps' bar: flush offset, same top padding */
    bottom: 0;
    padding: 32px 0 0;
  }
}
.bkflow--booking.is-done .bkflow__actions-group {
  justify-content: center;
  width: 100%;
  pointer-events: none;
}
.bkflow--booking.is-done .bkflow__join { pointer-events: auto; }
.bkflow--booking.is-done .bkflow__brief,
.bkflow--booking.is-done .bkflow__back,
.bkflow--booking.is-done .bkflow__skip,
.bkflow--booking.is-done button[data-bk-next] { display: none; }
/* Standalone primary CTA — deliberately NOT .bkflow__next, which carries
   step-specific rules (desktop padding, and a circular icon-button form on
   mobile that would hide this label). */
.bkflow__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 16px 32px;                /* narrower than Next's 52px: shorter label */
  background: var(--brand);
  border: none;
  border-radius: var(--r-pill);
  color: var(--paper);
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--d-fast) ease;
}
.bkflow__join:hover { background: var(--accent-hover); }
.bkflow__join[hidden] { display: none; }

/* ---- mobile: the photos become the retreat panel's backdrop ---- */
@media (max-width: 1024px) {
  .bkdone__head { position: relative; overflow: hidden; padding: 0; }
  [data-bk-galleryslot="mobile"] { display: block; }
  [data-bk-galleryslot="mobile"] .bkdone__gallery {
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  [data-bk-galleryslot="mobile"] .bkdone__gallery::-webkit-scrollbar { display: none; }
  [data-bk-galleryslot="mobile"] .bkdone__gallery img {
    flex: 0 0 100%;
    /* svh, so browser UI showing/hiding never resizes the photo mid-scroll */
    height: 80svh;
    scroll-snap-align: start;
  }
  /* label and dates ride over the photo */
  .bkdone__head .bkdone__label,
  .bkdone__head .bkdone__dateline {
    position: absolute;
    left: 20px; right: 20px;
    z-index: 2;
    color: var(--paper);
  }
  .bkdone__head .bkdone__label { top: 20px; }
  .bkdone__head .bkdone__dateline { bottom: 20px; }
  .bkdone__head .bkdone__dates {
    width: 100%;
    justify-content: space-between;
    gap: var(--s-4);
    /* fluid, so a two-digit cross-month range ("Sep 28—Dec 30") can never
       outrun the card — the row cannot wrap or shrink otherwise */
    font-size: clamp(var(--t-xl), 10vw, var(--t-5xl));
    letter-spacing: var(--t-5xl-track);
  }
  .bkdone__head .bkdone__cabin-frame { display: none; }

  .bkdone__facts { grid-template-columns: 1fr; }
  .bkdone__inbox { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .bkdone__inbox-title { max-width: none; font-size: var(--t-base); }   /* matches .bkflow__subtitle */
  .bkdone__inbox-ctas > * { flex: 1 1 0; }
}


/* Retreat panel: a real two-column grid — copy on the left, the cabin mark in
   its own track on the right. Reserving the column (instead of overlaying an
   absolutely-positioned image) is what keeps the illustration off the
   "Add to calendar" button and the dates on one baseline with it. */
@media (min-width: 1025px) {
  /* Plain block flow: the label sizes itself and the dates sit 72px below it.
     The cabin mark is taken OUT of flow — sharing a row with the label made
     the row as tall as the illustration, so the gap measured from the cabin. */
  .bkdone__head { position: relative; display: block; }
  .bkdone__head {
    /* one source of truth for the illustration's column */
    --cabin-w: clamp(90px, 11vw, 150px);
  }
  .bkdone__head .bkdone__cabin-frame {
    position: absolute;
    top: 20px;
    right: 20px;
    width: var(--cabin-w);
    padding: 0;
  }
  .bkdone__head .bkdone__cabin { width: 100%; height: auto; }
  .bkdone__head .bkdone__dateline {
    margin-top: 72px;                /* measured from the label, as specced */
    align-items: center;
  }
  .bkdone__head .bkdone__dates {
    gap: 0.22em;                     /* "Jul 30\u201431" on one row */
    font-size: var(--t-2xl);
    line-height: 1;
  }
  .bkdone__dates { margin-top: 0; }
}

/* 4. the inbox pills stay on one line */
.bkdone__inbox-open,
.bkdone__inbox-hide { white-space: nowrap; }


/* the cabin illustration closes in on the dates below this width, so the
   secondary action steps aside rather than colliding with it */
@media (max-width: 1180px) {
  .bkdone__addcal { display: none; }
}


/* ---- express wallets ---- */
/* fields + wallets are one block, so the pane's row-gap applies to the group
   and this margin is the only spacing between them */
.bkflow__pay { display: block; }
.bkflow__wallets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
  margin-top: var(--s-14);
}
/* composes .c-cta-tertiary; the logo sets the height */
.bkflow__wallet {
  height: 56px;
  padding: 0 16px;
}
.bkflow__wallet img { height: 20px; width: auto; display: block; }

@media (max-width: 600px) {
  .bkflow__wallets { grid-template-columns: 1fr; }
}