/* Occasional pointer interactions: bridge the booking flow without delaying state or focus. */
#booking-dialog {
  --booking-duration: 200ms;
  --booking-gutter: clamp(24px, 6dvh, 48px);
  /* A stable top edge prevents shorter steps from recentering the entire dialog. */
  inset-block: var(--booking-gutter) auto;
  margin-block: 0;
  max-height: calc(100dvh - var(--booking-gutter) * 2);
  opacity: 0;
  transform: scale(.96);
  transform-origin: center;
  transition: opacity var(--booking-duration) var(--ease-out), transform var(--booking-duration) var(--ease-out);
}
#booking-dialog[data-booking-visible] { opacity: 1; transform: scale(1); }
#booking-dialog::backdrop {
  opacity: 0;
  transition: opacity var(--booking-duration) var(--ease-out);
}
#booking-dialog[data-booking-visible]::backdrop { opacity: 1; }
#booking-dialog[data-booking-closing] { pointer-events: none; }
#booking-dialog [data-step], #booking-confirmation {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--booking-duration) var(--ease-out), transform var(--booking-duration) var(--ease-out);
}
#booking-dialog [data-booking-enter] {
  opacity: 0;
  transform: translateY(8px);
  transition: none;
}
#booking-dialog[data-motion-immediate],
#booking-dialog[data-motion-immediate]::backdrop,
#booking-dialog[data-motion-immediate] * { transition: none !important; }
@media (max-width: 680px) {
  #booking-dialog { --booking-gutter: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #booking-dialog, #booking-dialog::backdrop, #booking-dialog * { transition: none !important; }
}