.booking-dialog {
  box-sizing: border-box;
  width: min(42rem, calc(100vw - 2rem));
  max-width: 100%;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--font-body);
}
.booking-dialog[open] { display: flex; flex-direction: column; }
.booking-dialog::backdrop { background: color-mix(in srgb, var(--navy) 82%, transparent); }
.booking-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.booking-header h2 { font-size: var(--step-2); margin: 0; }
.booking-content {
  padding: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  overflow-wrap: anywhere;
}
.booking-dialog p { margin-block: var(--space-3); }
.booking-dialog form { display: grid; gap: var(--space-3); margin-block: var(--space-4); }
.booking-dialog input:not([type="radio"]), .booking-dialog select {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: max(16px, 1rem);
  background: var(--surface-raised);
  color: var(--ink);
}
.booking-dialog button, .booking-dialog a { min-height: 44px; min-width: 44px; }
.booking-dialog a { display: inline-flex; align-items: center; }
.booking-close {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
  padding: var(--space-2);
  cursor: pointer;
}
.booking-dialog :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.booking-dialog fieldset { min-width: 0; border: 1px solid var(--line); padding: var(--space-3); }
.booking-slot { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2); cursor: pointer; }
.booking-slot:has(:checked) { background: var(--accent-soft); outline: 1px solid var(--ink); }
.booking-slot input { flex-shrink: 0; width: 1.25rem; height: 1.25rem; accent-color: var(--ink); }
.booking-field { display: grid; gap: var(--space-2); }
.booking-dialog [aria-invalid="true"] { border: 2px solid var(--ink); }
.booking-dialog [role="alert"]:not(:empty) { border-inline-start: 3px solid var(--ink); padding-inline-start: var(--space-3); font-weight: 600; }
.booking-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.booking-dialog button:disabled { opacity: .6; cursor: wait; }
.booking-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 600px) {
  .booking-dialog { width: 100%; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  .booking-header { padding-top: max(var(--space-4), env(safe-area-inset-top)); }
  .booking-content, .booking-header { padding-left: max(var(--space-4), env(safe-area-inset-left)); padding-right: max(var(--space-4), env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) { .booking-dialog *, .booking-dialog { scroll-behavior: auto; animation: none; transition: none; } }