/**
 * Booking — legacy Step-1 reservation sidebar → design-system token bridge.
 *
 * The `.booking-compact-sidebar` + `.compact-booking-card` markup is the
 * 200+-line calendar/reservation widget bolted on top of `booking-calendar.js`
 * (777 lines). Rewriting it is a TASK-41/TASK-47-sized job. This file just
 * re-skins it with the same tokens the `.bk-card` family uses, so the Step-1
 * sidebar reads as part of the same gold-and-navy design without touching
 * any JS.
 *
 * Extracted from `bk-card.css` 2026-05-23 so the visual-contract file
 * (bk-card.css) stays focused on the new design and this file stays the
 * one obvious place to look when re-touching the legacy sidebar.
 *
 * Touches ONLY scoped selectors under `.booking-compact-sidebar` so it
 * cannot leak into any other page.
 */

/* ==========================================================================
   Card shell — same border / radius / shadow as .bk-card.
   ========================================================================== */
.booking-compact-sidebar .compact-booking-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-5);
}

/* ==========================================================================
   Date-picker boxes — bordered input row + hoverable cells.
   ========================================================================== */
.booking-compact-sidebar .date-picker-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.booking-compact-sidebar .date-picker-box {
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.booking-compact-sidebar .date-picker-box + .date-picker-box {
  border-left: 1px solid var(--color-border);
}
.booking-compact-sidebar .date-picker-box:hover {
  background-color: var(--surface-sunken);
}
.booking-compact-sidebar .date-picker-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);
}
.booking-compact-sidebar .date-picker-value {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* ==========================================================================
   Reserve CTA — 2026-05-24: migrated to `.pub-btn--accent` (gold) on the
   button element itself (see compact_booking_sidebar_simple.html). The
   sidebar only owns the layout slot — width + spacing — via the
   `.bk-sidebar__reserve` modifier below. All paint (background, color,
   border, hover, disabled) comes from pub-btn now.
   ========================================================================== */
.booking-compact-sidebar .bk-sidebar__reserve {
  width: 100%;
  margin-top: var(--space-4);
}

/* ==========================================================================
   Guest counter +/- circle buttons.
   ========================================================================== */
.guest-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  padding: 0;
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-primary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.guest-btn:hover:not(:disabled) {
  background-color: var(--color-accent-100, rgba(212, 175, 55, 0.1));
  border-color: var(--color-accent, #d4af37);
  color: var(--color-accent-dark, #b49225);
}
.guest-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.guest-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
[data-theme="dark"] .guest-btn {
  color: var(--dm-text-primary, #ffffff);
  border-color: var(--color-border, rgba(255, 255, 255, 0.2));
}
[data-theme="dark"] .guest-btn:hover:not(:disabled) {
  background-color: rgba(212, 175, 55, 0.15);
  border-color: var(--color-accent, #d4af37);
  color: var(--color-accent, #d4af37);
}

/* ==========================================================================
   "Add guest details" / "Hide breakdown" toggle — was using browser default
   button styling, now a small text-button with a navy chevron.
   ========================================================================== */
.booking-compact-sidebar .guest-breakdown-toggle,
.guest-breakdown-toggle {                       /* unscoped to also catch lonely instances */
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-family-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.booking-compact-sidebar .guest-breakdown-toggle:hover,
.guest-breakdown-toggle:hover {
  background-color: var(--color-accent-100);
  color: var(--color-accent-900);
}
.booking-compact-sidebar .guest-breakdown-toggle:focus-visible,
.guest-breakdown-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.booking-compact-sidebar .guest-breakdown-toggle i,
.guest-breakdown-toggle i {
  font-size: 0.85em;
  color: var(--color-accent-dark);
}

/* ==========================================================================
   Price display + rating row — match heading hierarchy.
   ========================================================================== */
.booking-compact-sidebar .compact-price-amount {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}
.booking-compact-sidebar .compact-price-period {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.booking-compact-sidebar .compact-rating-display i {
  color: var(--color-accent);
}