.form button:disabled {
  opacity: .55;
  cursor: progress;
}

/* Landing composition */
.bg-photo {
  width: 54.4%;
  height: 48.45%;
  margin-inline: auto;
  opacity: .92;
  filter: saturate(.9) contrast(1.04);
  object-fit: contain;
  object-position: center top;
}

body::before {
  background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.12) 36%, rgba(0,0,0,.82) 76%, #000 100%);
}

body:not(.schedule-mode) .page {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
  padding-bottom: clamp(22px, 4vh, 46px);
}

body:not(.schedule-mode) .intro { text-align: left; }
body:not(.schedule-mode) .intro h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(42px, 5vw, 72px);
  letter-spacing: 0;
}
body:not(.schedule-mode) .card-head { display: none; }
.options { gap: 14px; }
.option, .loading {
  min-height: 190px;
  padding: 20px 22px 18px;
  border-radius: 8px;
  backdrop-filter: blur(16px);
}
.option-top { margin-bottom: 10px; }
.option-icon { width: 40px; height: 40px; font-size: 18px; border-radius: 7px; }
.option-icon svg, .summary-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.option.recommended { border-color: rgba(255,255,255,.3); background: linear-gradient(180deg,rgba(35,35,36,.94),rgba(14,14,15,.84)); box-shadow: 0 26px 80px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08); }
.option.recommended::after { content: "Recommended"; position: absolute; left: 22px; top: 18px; color: #d8d3cb; font: 800 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing: .14em; text-transform: uppercase; }
.option.recommended .option-icon { margin-top: 18px; }
.option h3 { margin: 10px 0 6px; font-size: 20px; letter-spacing: 0; }
.option p { font-size: 13px; line-height: 1.4; max-width: none; }
.option-cta { padding-top: 12px; font-size: 10px; }

.time-card { display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.time-card > strong { flex: 0 0 auto; }
.times.empty { flex: 1; min-height: 260px; align-self: center; text-align: center; }

/* Dedicated confirmation state */
.confirmation {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: auto;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(18px) saturate(.55);
}
.confirmation-panel {
  width: min(840px, 100%);
  padding: 38px 40px 34px;
  color: #f8f8f8;
  background: rgba(12,12,13,.94);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  box-shadow: 0 32px 120px rgba(0,0,0,.72);
}
.confirmation-kicker {
  margin: 0 0 14px;
  color: #aaa5ad;
  font: 800 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.confirmation h2 { margin: 0 0 24px; font-size: 30px; line-height: 1.1; letter-spacing: 0; }
.booking-summary {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) minmax(260px,auto);
  align-items: center;
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
}
.booking-summary-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: #202024; font-size: 22px; }
.booking-summary-name strong, .booking-summary-name span, .booking-summary-when strong, .booking-summary-when span, .booking-summary-when small { display: block; }
.booking-summary-name strong { font-size: 17px; }
.booking-summary-name span, .booking-summary-when small { margin-top: 3px; color: #8f8a93; font-size: 13px; }
.booking-summary-when { padding-left: 22px; border-left: 1px solid rgba(255,255,255,.09); text-align: right; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.booking-summary-when strong, .booking-summary-when span { font-size: 13px; line-height: 1.55; }
.confirm-form { margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.09); }
.confirm-form label { display: block; margin-top: 18px; color: #aaa5ad; font: 800 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; text-transform: uppercase; }
.confirm-form label:first-child { margin-top: 0; }
.confirm-form label em { color: #ee5962; font-style: normal; }
.confirm-form label small { font: inherit; color: #6f6b73; }
.input-shell { display: flex; align-items: center; gap: 12px; margin-top: 9px; padding: 0 14px; border: 1px solid rgba(255,255,255,.13); border-radius: 7px; background: rgba(0,0,0,.25); }
.input-shell:focus-within { border-color: rgba(255,255,255,.42); }
.input-shell i { color: #77727c; font-style: normal; font-size: 17px; }
.input-shell input, .input-shell textarea { margin: 0; padding: 15px 0; border: 0; border-radius: 0; outline: 0; color: #fff; background: transparent; text-transform: none; }
.input-shell input::placeholder, .input-shell textarea::placeholder { color: #55515a; }
.textarea-shell { align-items: flex-start; }
.textarea-shell i { padding-top: 16px; }
.input-shell textarea { min-height: 90px; resize: vertical; }
#formStatus { display: block; min-height: 18px; margin-top: 14px; color: #c8c3cb; font-size: 13px; }
.confirm-actions { display: grid; grid-template-columns: 220px 1fr; gap: 12px; margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09); }
.confirm-actions button { min-height: 54px; border-radius: 7px; border: 1px solid rgba(255,255,255,.13); background: #171719; color: #fff; font: 900 12px/1 sans-serif; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.confirm-actions .confirm-submit { margin: 0; background: #fff; color: #0a0a0a; }
.confirm-actions button:disabled { cursor: progress; opacity: .72; }

@media (max-width: 700px) {
  .bg-photo { width: auto; height: 40.8svh; max-width: none; margin: 0; left: 50%; right: auto; transform: translateX(-50%); object-fit: fill; }
  body:not(.schedule-mode) .page { min-height: 100svh; padding: 20px 14px; }
  body:not(.schedule-mode) .intro h1 { font-size: 40px; }
  .options { grid-template-columns: 1fr; gap: 8px; }
  .option { min-height: 116px; padding: 14px 16px; }
  .option-top { position: absolute; right: 14px; top: 14px; }
  .option-icon { display: grid; width: 36px; height: 36px; }
  .option.recommended::after { left: 16px; top: 14px; }
  .option.recommended .option-icon { margin-top: 0; }
  .option h3 { margin-top: 0; }
  .option.recommended h3 { margin-top: 22px; }
  .option p { padding-right: 70px; }
  .option-cta { padding-top: 8px; }
  .confirmation { place-items: start center; padding: 12px; }
  .confirmation-panel { padding: 24px 18px 18px; }
  .confirmation h2 { font-size: 25px; }
  .input-shell input, .input-shell textarea { font-size: 16px; }
  .booking-summary { grid-template-columns: 44px 1fr; padding: 14px; }
  .booking-summary-icon { width: 44px; height: 44px; }
  .booking-summary-when { grid-column: 1 / -1; padding: 14px 0 0; border-left: 0; border-top: 1px solid rgba(255,255,255,.09); text-align: left; }
  .confirm-actions { grid-template-columns: 1fr; }
  .confirm-actions .confirm-submit { grid-row: 1; }
  .times.empty { min-height: 180px; }
}