/* Booking popup – Calendly calendar inside the site (built by js/main.js).
   Desktop: centred window. Phone: full screen. */
.has-dialog { overflow: hidden; }

.booking {
  width: min(var(--container), 100% - 2 * var(--gutter));
  height: calc(100dvh - 2 * var(--space-7));
  max-width: none; max-height: none;
  padding: 0; border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-200);
  color: var(--ink);
  overflow: hidden;
}
.booking::backdrop { background: var(--scrim); }

.booking__panel { display: flex; flex-direction: column; height: 100%; }

.booking__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-hairline) solid var(--line);
}
.booking__head .small { margin-top: var(--space-1); }

.booking__close {
  flex: none;
  display: grid; place-items: center;
  width: var(--space-7); height: var(--space-7);
  border: var(--border-hairline) solid var(--line-strong);
  border-radius: var(--radius-full);
  background: none; color: var(--ink);
  transition: transform var(--duration-fast) var(--ease-out);
}
.booking__close:hover { transform: rotate(90deg); }

.booking__frame { position: relative; flex: 1; min-height: 0; background: var(--surface-200); }
.booking__frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.booking.is-loaded .booking__frame iframe { opacity: 1; }
.booking__loading {
  position: absolute; inset: 0;
  display: grid; place-items: center;
}

.booking__alt {
  padding: var(--space-3) var(--space-6);
  border-top: var(--border-hairline) solid var(--line);
  text-align: center;
}
.booking__alt .link { margin-left: var(--space-1); }

@media (max-width: 767px) {
  .booking {
    width: 100%; height: 100dvh;
    margin: 0; inset: 0;
    border-radius: 0;
  }
  .booking__panel { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .booking__head { padding: var(--space-4); }
  .booking__alt { padding: var(--space-3) var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .booking__close:hover { transform: none; }
}