/* Booking embed on /afspraak. Owner: FOUNDATION.
   Amelia renders its own Vue widget with a light palette of its own, which we do
   not restyle — fighting a plugin's internal markup breaks on its next update.
   Instead we give it a card to sit in, so a light widget on the dark ink page
   reads as deliberate rather than as a rendering fault. */

.booking-embed {
  /* Sits outside .signal-copy (a 342px prose measure) — a calendar needs room.
     Capped so it does not sprawl across the full 1265px section either. */
  max-width: 940px;
  margin: 2rem auto 1.5rem;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  background: rgba(233, 241, 247, 0.96);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(6, 14, 22, 0.45);
  /* Amelia's step nav is wide; let it scroll rather than burst the column. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* The widget brings its own type scale — don't let the page's prose rules,
   which are tuned for a 674px measure of body copy, leak into it. */
.booking-embed .amelia-app-booking,
.booking-embed .amelia-v2-booking {
  font-size: 1rem;
  line-height: 1.5;
}

/* Amelia ships a max-width for its own container; on a narrow column that
   leaves a stripe of card either side. Let it use the full card. */
.booking-embed .amelia-app-booking > div,
.booking-embed .amelia-v2-booking > div {
  max-width: none;
}

@media (max-width: 640px) {
  .booking-embed {
    padding: 0.5rem;
    border-radius: 10px;
  }
}