/* ============================================================
   Balance Farm — booking search panel
   Sits under the nav from first paint: check in / check out /
   guests, then Location. Opening it reveals the cabin list or the
   calendar and the Clear / Next|Book footer.

   Collapses away on scroll, at which point the nav shows its own
   Book pill instead. Emits `balance:book:submit` for the
   Hostaway / PeaPod integration.
   ============================================================ */

/* ---- Overlay + backdrop (blurs the hero) ---- */
.booking {
  position: fixed;
  inset: 0;
  z-index: 25;                 /* below the nav (30) so the pill stays on top */
  pointer-events: none;
}
.booking[hidden] { display: none; }
/* the resting panel is interactive too, not just the opened one */
.booking .booking__dialog { pointer-events: auto; }
.booking.is-open { pointer-events: auto; }

/* the backdrop carries the blur and fades softly both ways, so the dialog's
   roll-up stays visible underneath it while closing */
.booking__backdrop {
  position: fixed;
  inset: 0;
  background: var(--tint-1);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  opacity: 0;
  transition: opacity 460ms ease;
}
.booking.is-open .booking__backdrop { opacity: 1; }
.booking:not(.is-open) .booking__backdrop { pointer-events: none; }

/* ---- Dialog: anchored below the nav pill ---- */
.booking__dialog {
  position: fixed;
  top: calc(var(--chrome-inset) + 60px + 4px);   /* 4px below the nav bar */
  left: 50%;
  transform: translateX(-50%);
  /* the side margin matches the nav's, so the two panels frame identically */
  width: min(407px, calc(100% - var(--chrome-inset) * 2));
  max-height: calc(100vh - var(--chrome-inset) - 60px - 4px - var(--chrome-inset));
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px;
  overflow: hidden;
  background: var(--chrome);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-radius: var(--r-md);
  color: var(--color-ink);
  transition: opacity 420ms ease, transform 520ms var(--e-out);
}
.booking.is-open .booking__dialog { overflow-y: auto; }

/* scrolled past the hero: the panel steps aside and the nav takes over */
.booking.is-stuck .booking__dialog {
  opacity: 0;
  transform: translate(-50%, -12px);
  pointer-events: none;
}

/* ---- Header: check-in / check-out / guests ---- */
.booking__head {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex: 0 0 auto;
}
.booking__field {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 16px;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  color: var(--color-ink);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--d-fast) ease;
}
.booking__field + .booking__field { border-left: 1px solid var(--booking-line); }
.booking__field.is-active { background: var(--tint-3); }
.booking__field--guests { cursor: default; }
.booking__field-label { font-size: var(--t-xs); font-weight: var(--w-medium); letter-spacing: var(--t-xs-track); }
.booking__field-value { font-size: var(--t-xs); font-weight: var(--w-medium); color: var(--ink-45); white-space: nowrap; }
.booking__field-value.is-set { color: var(--color-ink); font-weight: var(--w-medium); }

/* guest stepper */
.booking__stepper { display: flex; align-items: center; justify-content: space-between; gap: 0; width: 100%; }
.booking__step {
  width: 14px; height: 14px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-ink);
  font-family: inherit; font-size: var(--t-sm); line-height: 1;
  cursor: pointer;
  transition: opacity 140ms ease;
}
.booking__step img { display: block; width: 14px; height: 14px; }
@media (hover: hover) {
  .booking__step:hover { opacity: 0.6; }
}
.booking__step:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) {
  .booking__step:disabled:hover { opacity: 0.3; }
}
.booking__count { font-size: var(--t-xs); font-weight: var(--w-medium); letter-spacing: var(--t-xs-track); min-width: 12px; text-align: center; }

/* ---- Location: the chosen cabin; opens the list ---- */
.booking__location {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  background: transparent;
  border: none;
  border-top: 1px solid var(--booking-line);
  border-radius: var(--r-md);
  font-family: inherit;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--d-fast) ease;
}
/* at rest it reads like the fields above it; only an open list highlights it */
.booking__location.is-active { background: var(--tint-3); }
.booking__location-label { font-size: var(--t-xs); font-weight: var(--w-medium); letter-spacing: var(--t-xs-track); }
.booking__location-value {
  font-size: var(--t-xs); font-weight: var(--w-medium); letter-spacing: var(--t-xs-track);
  white-space: nowrap;   /* a cabin name is one phrase, never two lines */
  color: var(--ink-45);
}
.booking__location-value.is-set { color: var(--color-ink); }

/* ---- Panes: cabin list or calendar; only one at a time ----
   Collapsed until the panel opens, using the nav menu's reveal. */
.booking__panes {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--d-slow) var(--e-move),
              margin-top var(--d-slow) var(--e-move);
}
.booking.is-open .booking__panes {
  max-height: min(520px, calc(100vh - 320px));
  overflow-y: auto;
}
.booking__pane { display: none; }
.booking__pane.is-active { display: block; }

/* ---- Cabin cards: 164px tall, 16px padding, 132px image ---- */
.booking__cabins { display: flex; flex-direction: column; gap: 2px; }
.booking__cabin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  height: 164px;
  padding: var(--s-4);
  background: transparent;
  border: none;
  border-radius: var(--r-sm);
  font-family: inherit;
  text-align: left;
  color: var(--color-ink);
  cursor: pointer;
  transition: background 200ms ease;
}
.booking__cabin.is-selected { background: var(--paper); }
@media (hover: hover) {
  .booking__cabin:not(.is-selected):hover { background: var(--tint-2); }
}
.booking__cabin-name {
  font-size: var(--t-lg);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-lg-track);
  line-height: 1.05;
}
.booking__cabin-img {
  flex: 0 0 auto;
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: var(--r-sm);
}

/* ---- Calendar ---- */
.booking__cal { padding: 14px 16px 0; }
.booking__cal-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.booking__month { font-size: var(--t-lg); font-weight: var(--w-medium); letter-spacing: var(--t-lg-track); }
.booking__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--r-pill);
  font-size: var(--t-md); line-height: 1; color: var(--color-ink);
  cursor: pointer;
  transition: background var(--d-fast) ease, opacity var(--d-fast) ease;
}
@media (hover: hover) {
  .booking__nav:hover { background: var(--fill-2); }
}
.booking__nav img { display: block; width: 9px; height: 15px; }
.booking__nav[data-cal-prev] { left: 0; }
.booking__nav[data-cal-next] { right: 0; }
.booking__nav[data-cal-next] img { transform: rotate(180deg); }
.booking__nav:disabled { opacity: 0; pointer-events: none; }

.booking__weekdays,
.booking__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.booking__weekdays { margin-bottom: 0; }
.booking__weekdays span {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  color: var(--ink-45);
}

/* day cells — no gaps; circles touch */
.booking__day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-sm-track);
  color: var(--color-ink);
  cursor: pointer;
  z-index: 0;
}
.booking__day::before {                 /* the circular hit/hover surface */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: var(--tint-2);
  transition: background 140ms ease;
  z-index: -1;
}
.booking__day--empty::before { background: transparent; }
.booking__day--empty { cursor: default; }
.booking__day.is-disabled { color: var(--ink-30); cursor: default; }
@media (hover: hover) {
  .booking__day:not(.is-disabled):not(.is-selected):hover::before { background: var(--line); }
}

/* range: tinted band that connects the endpoints */
.booking__day.is-range { color: var(--color-ink); }
.booking__day.is-range::before { background: transparent; }
.booking__day.is-range::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-tint);
  z-index: -2;
}
/* selected endpoints — solid black circle */
.booking__day.is-selected { color: var(--paper); }
.booking__day.is-selected::before { background: var(--accent); }
/* fill the gap between an endpoint and the range band */
.booking__day.is-selected.is-start.has-range::after {
  content: ""; position: absolute; inset: 0 0 0 50%;
  background: var(--accent-tint); z-index: -2;
}
.booking__day.is-selected.is-end.has-range::after {
  content: ""; position: absolute; inset: 0 50% 0 0;
  background: var(--accent-tint); z-index: -2;
}

/* ---- Footer: same box as the location row ---- */
.booking__foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4);
  border-radius: var(--r-sm);
  max-height: 0;
  overflow: hidden;
  padding-block: 0;
  transition: max-height var(--d-slow) var(--e-move),
              padding-block var(--d-slow) var(--e-move),
              margin-top var(--d-slow) var(--e-move);
}
.booking.is-open .booking__foot {
  max-height: 100px;
  padding-block: 16px;
}
/* closed, the panel keeps an even 2px shell padding: a collapsed row still
   takes its share of the column gap, so each one cancels a gap while hidden */
.booking:not(.is-open) .booking__panes,
.booking:not(.is-open) .booking__foot { margin-top: -2px; }

/* On touch there is no pointer travel time: a thumb is already over Book when
   the panel opens, and the footer's roll-down clips it (overflow: hidden) for
   the length of the transition — so the first tap landed on clipped area and
   only the second one registered. Touch gets the footer at full height at once. */
@media (hover: none) {
  .booking__foot { transition: none; }
}

/* both compose .c-pill; Clear drops the fill, Next takes the accent */
.booking__clear,
.booking__submit { padding: 12px 30px; height: auto; }
.booking__clear { background: transparent; }
@media (hover: hover) {
  .booking__clear:hover { background: transparent; opacity: 0.6; }
}
.booking__submit { background: var(--accent); color: var(--paper); }
@media (hover: hover) {
  .booking__submit:hover { background: var(--accent-hover); }
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  /* the label sits closer to its value on a phone, where the panel is tighter */
  .booking__field { gap: 6px; }
  .booking__dialog { top: calc(var(--chrome-inset) + 60px + 4px); }
  .booking__cabin { height: 148px; }
  .booking__cabin-name { font-size: var(--t-md); }
  .booking__cabin-img { width: 116px; height: 116px; }
}

@media (prefers-reduced-motion: reduce) {
  .booking, .booking__dialog, .booking__day::before, .booking__submit, .booking__nav {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---- inline mode: the same dialog embedded in another component
   (the booking flow's summary column) instead of floating below the nav.
   Everything positional is neutralised; the host owns the placement. ---- */
.booking__dialog.booking--inline {
  position: static;
  width: 100%;
  max-height: none;
  opacity: 1;
  overflow: visible;
  transform: none;
  transition: none;
  background: var(--fill-0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-radius: var(--r-md);
}
.booking__dialog.booking--inline .booking__close { display: none; }
/* inline the panel keeps its Location row, so changing a stay from the
   booking flow can change the cabin too */
.booking__dialog.booking--inline .booking__panes {
  max-height: none;
  overflow: visible;
}
.booking__dialog.booking--inline .booking__foot {
  max-height: 100px;
  padding-block: 16px;
}