/* Elena Marlowe — Design Two · Booking page (Figma 25:572, 1920×1367) */

/* Screen is taller than the viewport: panel at y183, footer line flows after it (y1293). */
.booking-screen {
  padding-top: 183px;                       /* panel top, Figma 22:566 */
  padding-bottom: 0;
}
.booking-screen .footer-line.is-static { padding-top: 42px; padding-bottom: 46px; }   /* 1293 − 1251, 1367 − 1321 */

/* Dark semi-transparent panel: 1124 wide (container.is-narrow) */
.booking-panel {
  position: relative;
  background: var(--c-overlay);
  padding: 58px var(--gutter) 60px;         /* H1 top y241 − 183 */
}
.booking-panel .h1-display { margin-bottom: 66px; }   /* H1 bottom 311 → title 377 */

/* Form column: 705 wide, two 330 fields + 45 gap (22:546) */
.booking-form {
  width: 100%;
  max-width: 705px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.booking-form .form-group { width: 100%; }
.booking-form .form-group__title { width: 100%; margin-bottom: 33px; }   /* title bottom 411 → row 444 */
.booking-form .form-group + .form-group { margin-top: 60px; }           /* row bottom 555 → title 616 */
.booking-form .form-grid { column-gap: 45px; row-gap: 40px; }
.booking-form .field__input { padding-top: 2px; padding-bottom: 6px; }
.booking-form .form-grid .field:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* 5th field (Location) spans both columns */

/* Submit pill (22:539, 370×50 at y1013) */
.booking-form .btn--solid {
  width: 100%;
  max-width: 370px;
  min-height: 50px;
  margin-top: 68px;                          /* pills bottom 945 → submit 1013 */
}
.booking-form .form-status { margin-top: var(--sp-3); }
.booking-form .form-note { margin-top: var(--sp-4); }

@media (max-width: 1280px) {
  .booking-screen { padding-top: 160px; }
  .booking-panel { padding-top: 48px; padding-bottom: 48px; }
  .booking-panel .h1-display { margin-bottom: 48px; }
  .booking-form .form-group + .form-group { margin-top: 48px; }
  .booking-form .btn--solid { margin-top: 48px; }
}
@media (max-width: 991px) {
  .booking-screen { padding-top: 140px; }
  .booking-form .form-grid { column-gap: 32px; row-gap: 32px; }
}
@media (max-width: 767px) {
  /* Panel goes full-width: the container drops its gutter, the panel carries it */
  .booking-screen { padding-top: 104px; }
  .booking-container { padding-left: 0; padding-right: 0; max-width: none; }
  .booking-panel { padding: 40px var(--gutter); }
  .booking-panel .h1-display { margin-bottom: 36px; }
  .booking-form .form-group__title { margin-bottom: 24px; }
  .booking-form .form-group + .form-group { margin-top: 40px; }
  .booking-form .form-grid { row-gap: 28px; }
  .booking-form .form-grid .field:last-child:nth-child(odd) { grid-column: auto; }
  .booking-form .btn--solid { margin-top: 36px; }
  .booking-screen .footer-line.is-static { padding-top: 28px; padding-bottom: 28px; }
}
@media (max-width: 479px) {
  .booking-panel { padding-top: 32px; padding-bottom: 32px; }
  .booking-form .pill-group { gap: 8px; }
  .booking-form .pill span { padding-left: 16px; padding-right: 16px; }
}