/* Purpose: Booking page — two-column persuasive layout + payment-ready form. */

.booking { position: relative; overflow: hidden; padding-top: clamp(7rem, 14vh, 11rem); }
.booking__bg { position: absolute; inset: 0; pointer-events: none; }
.booking__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.booking__title { font-size: var(--text-5xl); margin-top: var(--space-4); }
.booking__title em { font-weight: var(--weight-medium); }
.booking__subtitle { margin-top: var(--space-5); font-size: var(--text-lg); color: var(--color-text); max-width: 44ch; }
.booking__lead { color: var(--color-text-muted); max-width: 52ch; }

.booking__benefits { margin-top: var(--space-8); display: grid; gap: var(--space-5); }
.booking-benefit { display: flex; gap: var(--space-4); align-items: flex-start; }
.booking-benefit__check {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  color: var(--color-primary-dark);
  display: inline-flex; align-items: center; justify-content: center;
}
.booking-benefit__check svg { width: 18px; height: 18px; }
.booking-benefit strong { display: block; font-size: var(--text-md); }
.booking-benefit__desc { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Panel */
.booking__panel {
  position: sticky; top: 110px;
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.booking__price { display: flex; align-items: baseline; gap: var(--space-3); }
.booking__price-amt { font-family: var(--font-heading); font-size: var(--text-4xl); color: var(--color-primary-dark); line-height: 1; }
.booking__price-unit { color: var(--color-text-muted); font-size: var(--text-sm); }
.booking__fee-note { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.booking__form-title { font-size: var(--text-xl); margin: var(--space-6) 0 var(--space-5); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.booking__trust { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); text-align: center; }

.booking__success { text-align: center; }
.booking__success .booking__lead { margin-bottom: var(--space-4); }

@media (max-width: 859px) {
  .booking__grid { grid-template-columns: 1fr; }
  .booking__panel { position: relative; top: 0; }
}
@media (max-width: 479px) { .field-row { grid-template-columns: 1fr; } }