/**
 * Booking — shared .bk-card design (2026-05-23).
 *
 * Extracted from step3.css so every booking page (steps 1–5, payment
 * success/failure) renders `.bk-card` consistently. Token-only. Loaded
 * site-wide via base_booking.html.
 *
 * Single source of truth for: .bk-card, .bk-card__title, .bk-card__edit,
 * .bk-card__details, .bk-step (page wrapper), .bk-step__intro,
 * .bk-rule-chips, .bk-rule-chip, .bk-rule-list, .bk-policy-* (badge,
 * summary, timeline, fineprint), .bk-guest__*, .bk-review-grid /__item.
 *
 * step3.css still defines step-3 specific additions (.bk-agree, .bk-notice,
 * .bk-aside-actions etc.) but no longer owns the shared visual contract.
 */

/* ==========================================================================
   Page wrapper — every booking step uses this.
   ========================================================================== */
.bk-step { padding-block: var(--space-6) var(--space-12); }

.bk-step__intro {
  margin: 0 0 var(--space-6);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}

/* ==========================================================================
   Card shell — the visual contract every wizard surface inherits.
   ========================================================================== */
.bk-card {
  background-color: var(--surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

/* Dark mode: align with the site-wide ultra-dark palette used by the
   home page property cards (--dm-bg-secondary #0a0a0a, --dm-border-primary
   #2a2a2a). The public --surface-raised token resolves to #161b22 (bluish
   charcoal) in tokens-dark.css, which renders inconsistently next to
   home/about/contact dark surfaces. We override at the .bk-card source so
   bookings (steps 1-5) and property detail (About / Features / What's
   Nearby / Specifications / Need Expert Assistance / Share & Save) all
   match each other and match the home page in dark mode. */
[data-theme="dark"] .bk-card {
  background-color: var(--dm-bg-secondary, #0a0a0a);
  border-color: var(--dm-border-primary, #2a2a2a);
}

[data-theme="dark"] .bk-card__details {
  background-color: var(--dm-bg-tertiary, #121212);
  border-color: var(--dm-border-primary, #2a2a2a);
}
.bk-card + .bk-card { margin-top: var(--space-5); }

.bk-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  font-family: var(--font-family-body);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.bk-card__title i {
  color: var(--color-accent-dark);
  font-size: 0.9em;
}
[data-theme="dark"] .bk-card__title i { color: var(--color-accent); }

.bk-card__edit {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  text-decoration: none;
}
.bk-card__edit:hover { text-decoration: underline; }

/* In-card disclosure (.pub-accordion__item used standalone — restyle the
   border + radius so it sits flush inside .bk-card without a double frame). */
.bk-card__details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--surface-base);
  overflow: hidden;
}
.bk-card__details > .pub-accordion__head { padding: var(--space-3) var(--space-4); font-size: var(--font-size-sm); }
.bk-card__details > .pub-accordion__body { padding: 0 var(--space-4) var(--space-4); }

/* ==========================================================================
   Stay-details grid + review-item (used by step 3 mostly, but lives here
   so the .bk-card __ scope stays unified).
   ========================================================================== */
.bk-review-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .bk-review-grid { grid-template-columns: repeat(2, 1fr); } }

.bk-review-item { display: flex; gap: var(--space-3); }
.bk-review-item__icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 2.75rem; height: 2.75rem;
  font-size: var(--font-size-base);
  color: var(--color-primary);
  background-color: var(--color-primary-50);
  border-radius: var(--radius-lg);
}
[data-theme="dark"] .bk-review-item__icon {
  color: var(--color-accent);
  background-color: var(--color-background-tertiary);
}
.bk-review-item__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.bk-review-item__value {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.bk-review-item__sub {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* ==========================================================================
   Guest details (step 3) — labels + values in a 2-col grid.
   ========================================================================== */
.bk-guest-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .bk-guest-grid { grid-template-columns: repeat(2, 1fr); } }

.bk-guest__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.bk-guest__value {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}
.bk-guest--full { grid-column: 1 / -1; }

/* ==========================================================================
   Cancellation-policy badge + timeline + house-rules chips.
   ========================================================================== */
.bk-policy-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-3);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  background-color: var(--color-accent-100);
  color: var(--color-accent-900);
  border: 1px solid var(--color-accent);
}
.bk-policy-badge--flexible       { background-color: var(--color-success-soft); color: var(--color-success-strong); border-color: var(--color-success); }
.bk-policy-badge--moderate       { background-color: var(--color-accent-100);   color: var(--color-accent-900);     border-color: var(--color-accent); }
.bk-policy-badge--strict,
.bk-policy-badge--super_strict,
.bk-policy-badge--non_refundable { background-color: var(--color-warning-soft); color: var(--color-warning-strong); border-color: var(--color-warning); }
.bk-policy-badge--long_term,
.bk-policy-badge--custom         { background-color: var(--surface-sunken);    color: var(--color-text-secondary); border-color: var(--color-border); }

.bk-policy-summary {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
}

.bk-policy-timeline {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bk-policy-timeline__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}
.bk-policy-timeline__row:last-child { border-bottom: none; }
.bk-policy-timeline__period { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.bk-policy-timeline__refund {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.bk-policy-timeline__refund.is-full    { color: var(--color-success-strong); }
.bk-policy-timeline__refund.is-partial { color: var(--color-info-strong); }
.bk-policy-timeline__refund.is-low     { color: var(--color-warning-strong); }
.bk-policy-timeline__refund.is-none    { color: var(--color-text-tertiary); }
.bk-policy-timeline__refund i { font-size: 0.85em; color: var(--color-success); }

.bk-policy-fineprint {
  margin: 0;
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  line-height: var(--line-height-relaxed);
}
.bk-policy-fineprint i { margin-top: 2px; color: var(--color-info); }

/* House-rules + property-details chips (used on step 1 + step 3). */
.bk-rule-chips {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.bk-rule-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  background-color: var(--surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.bk-rule-chip i { font-size: 0.95em; color: var(--color-text-secondary); }
.bk-rule-chip--no  { color: var(--color-warning-strong); border-color: var(--color-warning); background-color: var(--color-warning-soft); }
.bk-rule-chip--no i { color: var(--color-warning-strong); }
.bk-rule-chip--yes { color: var(--color-success-strong); border-color: var(--color-success); background-color: var(--color-success-soft); }
.bk-rule-chip--yes i { color: var(--color-success-strong); }

.bk-rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bk-rule-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
.bk-rule-list li i { margin-top: 3px; color: var(--color-text-tertiary); }
.bk-rule-list__text div { color: var(--color-text-primary); }

/* ==========================================================================
   Step-4 trust badges (.bk-trust-card) — denser version of .bk-rule-chips
   for the payment-page security/cancellation/support row.
   ========================================================================== */
.bk-trust-card .bk-trust-chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.bk-trust-chip {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--surface-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}
.bk-trust-chip:hover {
  border-color: var(--color-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.bk-trust-chip__icon {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-primary);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-700, var(--color-primary)));
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}
[data-theme="dark"] .bk-trust-chip__icon {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
  color: var(--color-primary);
}
.bk-trust-chip__body { display: flex; flex-direction: column; gap: 2px; }
.bk-trust-chip__body strong {
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
}
.bk-trust-chip__body small {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-snug);
}

.bk-trust-list {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}
.bk-trust-list li i { color: var(--color-success); margin-top: 4px; }
.bk-trust-list li div { color: var(--color-text-primary); }

/* ==========================================================================
   Payment success / failure helpers — extracted from inline style="..."
   attributes that were dropped in templates payment/success.html and
   payment/failure.html during the 2026-05-23 cleanup.
   ========================================================================== */

/* Property image card — strip the .bk-card padding so the photo fills the
   shell flush. */
.bk-card--media {
  padding: 0;
  overflow: hidden;
}
.bk-card--media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Booking reference number — monospace + bigger so it stands out. */
.bk-reference {
  margin: 0;
  font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  letter-spacing: 0.05em;
}

/* Numbered "what happens next" steps — round navy chip + step number. */
.bk-step-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bk-step-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
}
.bk-step-list__num {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-100);
  color: var(--color-accent-900);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
}
.bk-step-list strong { color: var(--color-text-primary); }

/* Failure-page success-icon override (red instead of green). The base
   `.success-icon` lives in step5.css — `.success-icon--danger` is a
   modifier we use to flip it without re-defining the box. Stacked
   selector (`.success-icon.success-icon--danger`) gives 0,2,0 to
   override step5.css's 0,1,0 base rule regardless of cascade order. */
.success-icon.success-icon--danger {
  background-color: var(--color-danger-soft);
  color: var(--color-danger);
}

/* Plain links inside .bk-rule-list (support email / phone on the failure
   page). Need to be navy instead of the parent list's secondary grey. */
.bk-rule-list a {
  color: var(--color-primary);
  text-decoration: none;
}
.bk-rule-list a:hover { text-decoration: underline; }

/* ==========================================================================
   Desktop sizing — match the property detail page's roomier columns
   (.property-section-card renders ~888px wide vs the wizard's old ~688px).
   Override .pub-step's grid to give the main column more breathing room
   without making the sidebar feel cramped.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Lift the legacy .booking-container 1200px cap that boxes EVERY booking
     page. Without this, the inner .ds-container + .pub-step max-widths below
     never get a chance to expand. */
  .booking-page .booking-container {
    max-width: var(--container-wide);     /* 1400px */
  }

  /* Wider main column + narrower (but still readable) sidebar + tighter
     gap. Net: main goes from ~688px to ~880px on a 1440px viewport — matches
     the property detail page's 888px so the wizard feels consistent with
     the rest of the site. */
  .booking-page .pub-step {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-6);
    padding-inline: var(--space-5);
    max-width: var(--container-wide);
  }

  /* .bk-step uses .ds-container directly (no .pub-step wrapper) on Step 5
     and the payment pages — keep their cap aligned too. */
  .booking-page .ds-container {
    max-width: var(--container-wide);
  }
}

/* ==========================================================================
   Mobile sizing — cards used to keep desktop 24/21px padding + 1rem container
   gutter on tiny screens, which felt cramped next to the edge-to-edge property
   hero. Reduce gutter + padding to match the hero rhythm; tighten radius so
   cards look more "section-like" and less "floating-mini-card".
   ========================================================================== */
@media (max-width: 559px) {
  /* Pull the page container almost flush with the viewport edge. The hero
     gallery already does this, so cards now sit at the same width.
     ALSO zero out .pub-step's own horizontal padding (it nests inside
     .ds-container, so it was adding 16px on top of the container's 12–16px
     — net 28px inset on every card vs. ~14px on the hero). */
  .bk-step .ds-container,
  .booking-page .ds-container {
    padding-inline: var(--space-3);
  }
  /* Scoped to body.booking-page so the .pub-step inset only collapses inside
     the booking wizard — other pages using .pub-step elsewhere keep their
     16px gutter. */
  .booking-page .pub-step {
    padding-inline: 0;
  }

  .bk-card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
  .bk-card + .bk-card {
    margin-top: var(--space-3);
  }

  .bk-card__title {
    margin-bottom: var(--space-3);
    font-size: var(--font-size-base);
  }

  /* Chips wrap nicer when each takes its own row's worth of space. */
  .bk-rule-chips {
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }
  .bk-rule-chip {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }

  .bk-policy-badge {
    /* On mobile let the badge wrap to its own line under the title if the
       row gets cramped, instead of pushing the title text out. */
    margin-left: 0;
  }
  .bk-card__title {
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
}