.booking-page{ display:flex; flex-direction:column; gap:1.2rem; padding: clamp(.4rem, 1vw, 1rem) 0 clamp(2rem, 3vw, 3rem); }

.booking-hero-copy h1{ margin: .1rem 0 .4rem; letter-spacing:-0.01em; }
.booking-hero-copy p{ margin:0 0 .5rem; color: var(--muted); }
.booking-highlight{ display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 60%); background: color-mix(in srgb, var(--accent), transparent 85%); }
.booking-meta{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.booking-meta .hero-chip{ background: color-mix(in srgb, var(--card), var(--surface) 30%); color: var(--muted); }

.booking-form{
  display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.booking-card{
  background: color-mix(in srgb, var(--card), var(--surface) 30%);
  border:1px solid color-mix(in srgb, var(--accent), var(--border) 55%);
  border-radius: var(--radius-lg); padding: clamp(1rem, 1.5vw, 1.3rem);
  box-shadow: var(--shadow-1);
}
.booking-card h3{ margin:.1rem 0 .4rem; }
.booking-card p{ margin:0 0 .5rem; color: var(--muted); }
.booking-fields{ display:grid; gap:.75rem; }
.booking-field label{ display:grid; gap:.25rem; font-weight:700; }
.booking-field input,.booking-field select,.booking-field textarea{
  width:100%; background: var(--surface); border:1px solid var(--border); color: var(--text);
  border-radius: 12px; padding:.65rem .75rem; font: inherit;
  transition: border-color .1s ease-out, box-shadow .1s ease-out;
}
.booking-field input:focus,.booking-field select:focus,.booking-field textarea:focus{
  border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 70%);
  outline:none;
}
.booking-field small{ color: var(--muted); }
.booking-actions{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.booking-actions .status{ color: var(--muted); }
.booking-status{ margin-top:.5rem; min-height: 24px; }
.booking-status .notice{ display:flex; gap:.5rem; padding:.55rem .7rem; border-radius:12px; align-items:center; }
.booking-status .notice.success{ background: color-mix(in srgb, var(--accent), transparent 80%); border:1px solid color-mix(in srgb, var(--accent), var(--border) 50%); color: var(--text); }
.booking-status .notice.error{ background: color-mix(in srgb, #f36, transparent 80%); border:1px solid color-mix(in srgb, #f36, var(--border) 40%); color: var(--text); }

.time-options{ display:flex; gap:.5rem; flex-wrap:wrap; }
.time-chip{
  padding:.5rem .8rem; border-radius:12px; border:1px solid var(--border);
  background: var(--surface); cursor:pointer; font-weight:700;
  transition: border-color .1s ease-out, box-shadow .1s ease-out, transform .1s ease-out;
}
.time-chip:hover{ border-color: var(--accent); transform: translateY(-1px); }
.time-chip.active{
  border-color: var(--accent); background: color-mix(in srgb, var(--accent), transparent 88%);
  box-shadow: var(--shadow-1); color: var(--text);
}

.booking-modal{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .15s ease-out;
}
.booking-modal.open{ opacity:1; pointer-events:auto; }
.booking-modal-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter: blur(4px);
}
.booking-modal-dialog{
  position:relative; z-index:1; width:min(960px, 90vw); height:min(720px, 80vh);
  background: var(--card); border:1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow-2); overflow:hidden;
  display:grid; grid-template-rows: auto 1fr;
}
.booking-modal-close{
  position:absolute; top:10px; right:10px; z-index:2;
  width:38px; height:38px; border-radius:12px; border:1px solid var(--border);
  background: var(--surface); color: var(--text); cursor:pointer;
}
.booking-modal iframe{
  width:100%; height:100%; border:0; background: var(--card);
}

@media (max-width: 720px){
  .booking-form{ grid-template-columns:1fr; }
}