/* boeken.css: the overlay of Plan een gesprek (spec 10, 2026-11-02): a scrim over the page and a glass panel with the Calendly booking page in an
   iframe, opened by boeken.js from every link to the booking page. Desktop: a rounded panel of at most 960 by 780 in the middle of the screen;
   phone: the whole screen. The page behind it does not scroll (html.boek-open). The iframe fades in once it has loaded; until then the bar and
   a waiting line are all there is. Reduced motion: no entrance and no fade. */
.boek{position:fixed;inset:0;z-index:90;display:grid;place-items:center;box-sizing:border-box;padding:16px}
.boek[hidden]{display:none}
.boek-scrim{position:absolute;inset:0;background:var(--scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.boek .boek-panel{position:relative;display:grid;grid-template-rows:auto minmax(0,1fr);width:min(960px,100%);height:min(780px,100%);border-radius:24px;overflow:hidden;box-shadow:var(--shadow-dialog);animation:boek-in .35s var(--ease-out)}
.boek-bar{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 20px;font:500 14px/1.2 var(--font-sans);color:var(--grafiet)}
.boek-title{flex:1;color:var(--inkt)}
.boek-done{color:var(--kobalt-text);font-weight:600}
.boek-close{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--glass-line);border-radius:50%;background:var(--glass-tint);color:var(--inkt);cursor:pointer}
.boek-close svg{width:18px;height:18px}
.boek-close:focus-visible{outline:2px solid var(--kobalt);outline-offset:2px}
.boek-body{position:relative;background:var(--papier)}
.boek-frame{display:block;width:100%;height:100%;border:0;opacity:0;transition:opacity .3s}
.boek.is-loaded .boek-frame{opacity:1}
.boek-wait{position:absolute;left:50%;top:50%;margin:0;translate:-50% -50%;font:400 15px/1.4 var(--font-sans);color:var(--grafiet);text-align:center}
.boek.is-loaded .boek-wait{display:none}
html.boek-open{overflow:hidden}
@keyframes boek-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media (max-width:759px){
  .boek{padding:0}
  .boek .boek-panel{width:100%;height:100%;border-radius:0;border:0}
  .boek-bar{padding-top:calc(10px + env(safe-area-inset-top))}
}
@media (prefers-reduced-motion:reduce){
  .boek .boek-panel{animation:none}
  .boek-frame{transition:none}
}