/* Booking dialog — restyled for website project 3.
   Same behaviour and same markup contract as project 2 (booking-overlay.js is
   unchanged); only the surface is quieter. */

.booking-overlay {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(15, 26, 35, .62);
}
.booking-overlay[hidden] { display: none; }
body.booking-dialog-open { overflow: hidden; }

.booking-dialog {
  width: min(920px, 100%); max-height: min(86vh, 860px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper, #fff); border-radius: var(--radius-lg, 16px);
  box-shadow: 0 24px 64px -24px rgba(15, 26, 35, .55);
}
.booking-dialog__bar {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line, #e6e1d8);
}
.booking-dialog__title {
  margin: 0; font-family: var(--font-display, Georgia, serif);
  font-size: 1.15rem; font-weight: 600; margin-right: auto;
}
.booking-dialog__external { font-size: .88rem; color: var(--gold-deep, #8a6011); }
.booking-dialog__close {
  border: 1px solid var(--line, #e6e1d8); background: transparent; cursor: pointer;
  width: 34px; height: 34px; border-radius: 8px; font-size: 1.3rem; line-height: 1;
  color: var(--ink, #16232e);
}
.booking-dialog__close:hover { border-color: var(--ink, #16232e); }
.booking-dialog__frame-wrap { position: relative; flex: 1; min-height: 460px; }
.booking-dialog__loading {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  color: var(--ink-soft, #46586a); font-size: .95rem;
}
.booking-dialog__loading[hidden] { display: none; }
.booking-dialog__frame { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 560px) {
  .booking-overlay { padding: 0; }
  .booking-dialog { max-height: 100vh; height: 100vh; border-radius: 0; }
}