/* =========================================================================
   Booking Flow — custom multi-step checkout
   -------------------------------------------------------------------------
   Matches the typography + color palette established in styles.css.
   Lives in its own file so it can be cached separately from the site CSS
   and swapped out if the design evolves.
   ========================================================================= */

.bf {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, 0.2);
}

/* ---- Step indicator ---------------------------------------------------- */
.bf-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
  background: var(--bg-alt);
}
.bf-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  position: relative;
}
.bf-step + .bf-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25%;
  bottom: 25%;
  width: 1px;
  background: var(--rule);
}
.bf-step__num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
}
.bf-step.is-active .bf-step__num,
.bf-step.is-complete .bf-step__num {
  background: var(--accent);
  color: var(--white);
  border-color: var(--accent);
}
.bf-step.is-active,
.bf-step.is-complete {
  color: var(--dark);
}
.bf-step__label { font-weight: 500; }
@media (max-width: 620px) {
  .bf-step__label { display: none; }
}

/* ---- Panels ------------------------------------------------------------ */
.bf-panel {
  padding: clamp(28px, 4vw, 48px);
  display: none;
}
.bf-panel.is-active { display: block; }
.bf-panel__title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  font-weight: 400;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.bf-panel__sub {
  color: var(--muted);
  margin: 0 0 30px;
  font-size: 0.95rem;
}

/* ---- Dates row --------------------------------------------------------- */
.bf-dates {
  display: grid;
  grid-template-columns: 1fr 1fr 140px;
  gap: 16px;
  margin-bottom: 36px;
}
.bf-dates label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.bf-dates input, .bf-dates select {
  font: 500 1rem var(--sans);
  padding: 14px 16px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--dark);
  border-radius: 2px;
}
.bf-dates input:focus, .bf-dates select:focus {
  outline: none;
  border-color: var(--accent);
}
@media (max-width: 620px) {
  .bf-dates { grid-template-columns: 1fr 1fr; }
  .bf-dates label:last-child { grid-column: span 2; }
}

/* ---- Unit grid --------------------------------------------------------- */
.bf-units { margin-bottom: 30px; }
.bf-units__heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.bf-units__heading h4 {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  margin: 0;
}
.bf-units__status {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.bf-units__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.bf-unit {
  border: 1px solid var(--rule);
  padding: 0;
  background: var(--white);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, transform 0.2s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bf-unit:hover:not(:disabled) { border-color: var(--accent); }
.bf-unit.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.bf-unit:disabled { opacity: 0.45; cursor: not-allowed; }
.bf-unit__img {
  aspect-ratio: 4 / 3;
  background: var(--bg-alt) center/cover no-repeat;
  position: relative; /* anchor for the SOLD OUT chip */
}
/* SOLD OUT chip overlaid on the card image when the tier has zero
   availability for the selected dates. Replaces the older 'separate banner
   in the grid' approach which broke the visual rhythm. Positioned top-left
   with a slight backdrop blur so it reads cleanly over any photo. */
.bf-unit__soldout {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(180, 62, 46, 0.92); /* var(--red) at ~92% */
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 3px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  pointer-events: none; /* chip is decorative — clicks pass through */
  z-index: 1;
}
/* Slightly desaturate the photo on sold-out cards so the chip pops more
   and the card visually recedes vs the available ones. */
.bf-unit.is-unavailable .bf-unit__img {
  filter: saturate(0.55) brightness(0.95);
}

/* Empty state when EVERY tier is sold out for the dates. Spans the full
   grid (not a single cell) so it reads as one clean message instead of
   ghost cards. */
.bf-empty-state {
  grid-column: 1 / -1;
  background: #FAFAF7;
  border: 1px solid var(--rule, #EDE7DA);
  border-radius: 6px;
  padding: 36px 28px;
  text-align: center;
}
.bf-empty-state h3 {
  margin: 0 0 8px 0;
  font-family: var(--serif, Georgia, serif);
  font-weight: 400;
  font-size: 20px;
  color: var(--ink, #111);
}
.bf-empty-state p {
  margin: 0;
  color: var(--muted, #6E6C66);
  font-size: 14px;
  line-height: 1.55;
}
.bf-empty-state a {
  color: var(--gold, #B08D57);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.bf-unit__body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
/* Pin the title block to a fixed two-line height so cards align cleanly
   regardless of whether the room name wraps to one line or two. The previous
   layout had Standard wrapping to 2 lines and Deluxe staying on 1, which
   misaligned the meta + price rows across the three cards. */
.bf-unit__name {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
  margin: 0 0 4px;
  min-height: calc(1.05rem * 1.3 * 2); /* exactly 2 lines tall */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bf-unit__meta {
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  /* Pin meta to its own row so cards stay aligned even when title is short. */
  min-height: 1.2rem;
}
.bf-unit__price {
  margin-top: auto; /* pushes price to the bottom regardless of title length */
  padding-top: 8px;
  font-size: 0.95rem;
  font-weight: 500;
}
.bf-unit-skeleton {
  height: 260px;
  background: linear-gradient(90deg, var(--bg-alt) 0%, var(--white) 50%, var(--bg-alt) 100%);
  background-size: 200% 100%;
  animation: bf-skeleton 1.4s ease-in-out infinite;
}
@keyframes bf-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Review split layout ---------------------------------------------- */
.bf-review {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
}
@media (max-width: 820px) {
  .bf-review { grid-template-columns: 1fr; }
}
.bf-review__summary {
  background: var(--bg-alt);
  padding: 22px;
  border-left: 3px solid var(--accent);
  margin-bottom: 10px;
}
.bf-review__summary h4 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
}
.bf-review__summary dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  font-size: 0.92rem;
  margin: 0;
}
.bf-review__summary dt { color: var(--muted); letter-spacing: 0.04em; }
.bf-review__summary dd { margin: 0; font-weight: 500; }

.bf-review__card {
  position: sticky;
  top: 80px;
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 24px;
}
.bf-review__card h4 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  margin: 0 0 14px;
}
.bf-review__card .bf-price-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.93rem;
  color: var(--dark);
}
.bf-review__card .bf-price-row--muted { color: var(--muted); }
.bf-review__card .bf-price-row--total {
  border-top: 1px solid var(--rule);
  margin-top: 8px;
  padding-top: 14px;
  font-family: var(--serif);
  font-size: 1.2rem;
}

/* ---- Forms ------------------------------------------------------------- */
.bf-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.bf-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.bf-form__wide { grid-column: span 2; }
.bf-form input, .bf-form textarea {
  font: 400 1rem var(--sans);
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--dark);
  border-radius: 2px;
  letter-spacing: normal;
  text-transform: none;
}
.bf-form input:focus, .bf-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
@media (max-width: 620px) {
  .bf-form { grid-template-columns: 1fr; }
  .bf-form__wide { grid-column: auto; }
}

/* ---- Cancellation Protection upsell ----------------------------------- */
.bf-protection {
  max-width: 540px;
  border: 1px solid var(--rule);
  background: var(--bg-alt);
  padding: 16px 18px;
  margin: 0 0 22px;
  border-radius: 4px;
}
.bf-protection__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.bf-protection__head input[type="checkbox"] {
  margin-top: 4px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--accent, #b8893f);
}
.bf-protection__title {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
}
.bf-protection__title strong {
  font-weight: 500;
}
.bf-protection__price {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--accent, #b8893f);
  font-weight: 500;
  white-space: nowrap;
}
.bf-protection__copy {
  margin: 8px 0 0 28px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.bf-price-row--protect {
  color: var(--accent, #b8893f);
}

/* ---- Stripe card element ---------------------------------------------- */
.bf-card-form {
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bf-card-form label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 14px;
}
.bf-card-form input[type="text"] {
  font: 400 1rem var(--sans);
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.bf-stripe-card {
  padding: 14px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--white);
  min-height: 48px;
}
.bf-stripe-card.StripeElement--focus { border-color: var(--accent); }
.bf-stripe-card.StripeElement--invalid { border-color: #d14; }

/* Promo code (collapsed by default) */
.bf-promo {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed var(--rule);
  border-radius: 8px;
  background: var(--bg-alt);
}
.bf-promo summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  list-style: none;
}
.bf-promo summary::-webkit-details-marker { display: none; }
.bf-promo summary::before {
  content: "+ ";
  color: var(--accent);
  font-weight: 700;
}
.bf-promo[open] summary::before { content: "− "; }
.bf-promo__row {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.bf-promo__row input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--sans);
  font-size: 0.92rem;
  text-transform: uppercase;
  background: var(--white);
}
.bf-promo__row .btn { padding: 10px 18px; }
.bf-promo__status {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--muted);
  min-height: 1em;
}
.bf-promo__status.is-success { color: #1a7a3e; }
.bf-promo__status.is-error   { color: #b3261e; }

/* "You save vs. Airbnb" line in the pay summary card */
.bf-price-row--savings {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule);
  color: #1a7a3e;
  font-weight: 500;
}
.bf-price-row--coupon {
  color: var(--accent-dark);
  font-size: 0.86rem;
}

/* ---- Nightly rate breakdown ------------------------------------------- *
 * Collapsible date-by-date list shown above the subtotal/cleaning/taxes  *
 * lines on both review (step 2) and payment (step 3). Default-open for   *
 * stays of 4 nights or fewer, collapsed for longer ones to keep the      *
 * summary scannable.                                                     */
.bf-price-nights {
  margin: 0 0 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--bg-alt, #f7f4ee);
  overflow: hidden;
}
.bf-price-nights > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink, #2a2a2a);
  letter-spacing: 0.02em;
}
.bf-price-nights > summary::-webkit-details-marker { display: none; }
.bf-price-nights > summary::after {
  content: "▾";
  margin-left: 8px;
  color: var(--accent, #b8893f);
  transition: transform 0.15s ease;
}
.bf-price-nights[open] > summary::after { transform: rotate(180deg); }
.bf-price-nights__hint {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bf-price-nights[open] .bf-price-nights__hint { display: none; }
.bf-price-nights__body {
  padding: 4px 14px 12px;
  border-top: 1px solid var(--rule);
}
.bf-price-row--night {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 0.88rem;
  color: var(--dark);
}
.bf-price-row--night + .bf-price-row--night {
  border-top: 1px dotted var(--rule);
}
.bf-price-nights__note {
  margin: 10px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.45;
}
.bf-price-nights__avg {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: normal;
}

/* Cancellation policy block on the payment step */
.bf-cancel-policy {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-alt);
  border-radius: 8px;
  font-family: var(--sans);
}
.bf-cancel-policy h5 {
  margin: 0 0 6px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  font-weight: 500;
}
.bf-cancel-policy p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
}
.bf-cancel-policy a { color: var(--accent-dark); }

.bf-card-error {
  color: #d14;
  font-size: 0.88rem;
  min-height: 1.2em;
  margin-top: 6px;
}
.bf-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  font-size: 0.9rem;
  color: var(--dark);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.bf-checkbox input { margin-top: 4px; }

.bf-pay-trust {
  margin-top: 18px;
  font-size: 0.82rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Actions ---------------------------------------------------------- */
.bf-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.bf-actions .btn--ghost {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--rule);
}
.bf-actions .btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- Confirmation ----------------------------------------------------- */
.bf-confirm { text-align: center; padding: 20px 10px; }
.bf-confirm__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #E8F5EC;
  color: #2F8B53;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: 18px;
}
.bf-confirm h3 {
  font-family: var(--serif);
  font-size: 2rem;
  margin: 0 0 10px;
}
.bf-confirm__sub { color: var(--muted); max-width: 480px; margin: 0 auto 20px; }
.bf-confirm__card {
  display: inline-block;
  text-align: left;
  padding: 20px 26px;
  background: var(--bg-alt);
  border-left: 3px solid var(--accent);
  margin-top: 16px;
  font-size: 0.93rem;
}
.bf-confirm__card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  margin: 0;
}
.bf-confirm__card dt { color: var(--muted); }
.bf-confirm__card dd { margin: 0; font-weight: 500; }

/* ---- Overlays --------------------------------------------------------- */
.bf-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
/* Respect the hidden attribute — `display: flex` above was overriding it,
   which made the spinner visible on page load even before anything asked
   for it. */
.bf-overlay[hidden] { display: none; }
.bf-overlay__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--muted);
  font-size: 0.9rem;
}
.bf-spinner {
  width: 32px; height: 32px;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bf-spin 0.9s linear infinite;
}
@keyframes bf-spin { to { transform: rotate(360deg); } }

.bf-error {
  margin: 16px clamp(28px, 4vw, 48px);
  padding: 14px 18px;
  background: #FFF0F0;
  border: 1px solid #F5C6C6;
  color: #7A1F1F;
  font-size: 0.92rem;
}