/* =====================================================================
   CinemaLux · reserveren (booking, bedankt, annuleren)
   Same language as design E: plaster + navy + gold, Cinzel + Commissioner,
   screen masking / letterbox frames, the ticket as the summary.
   Works on its own; /assets/site.css (header, footer) loads first.
   ===================================================================== */
@font-face{font-family:"Cinzel";src:url(/fonts/cinzel-wght-latin.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Commissioner";src:url(/fonts/commissioner-wght-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --pleister:#EEE7DE; --kalk:#F5F0EA; --steen:#DCD1C8; --zand:#CDBFB1;
  --zaal:#0B1B32; --diep:#041631; --goud:#DCB67B; --goud-licht:#F4CE94; --brons:#6E5830; --inkt2:#4A5466; --nevel:#8E97A6;
  --zwart:#020B1A; --fout:#9A3324; --fout-licht:#F6A99A;
  --serif:"Cinzel",Georgia,"Times New Roman",serif;
  --sans:"Commissioner",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --g:clamp(16px,4vw,64px); --nav:72px;
  --ease:cubic-bezier(.22,.8,.2,1);
  --lb:clamp(10px,1.4vw,18px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--pleister)}
body{margin:0;background:var(--pleister);color:var(--zaal);font-family:var(--sans);font-weight:380;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,ul,ol,dl,dd,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--zaal);color:var(--goud-licht)}
:focus-visible{outline:2px solid var(--zaal);outline-offset:4px;border-radius:2px}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
.bk-doek :focus-visible,.st :focus-visible,.tk :focus-visible,.bk-stub :focus-visible{outline-color:var(--goud-licht)}
/* the shared header (.nav, site.css) is fixed: push the page below it */
.bk-pagina main{padding-top:var(--nav)}
.bk-pagina main.st{padding-top:0;margin-top:var(--nav)}

/* ---------- type (from E) ---------- */
.disp{font-family:var(--serif);font-weight:500;letter-spacing:.012em;line-height:.94;text-transform:uppercase}
.lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;font-weight:360;max-width:40ch}
.kick{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;letter-spacing:.01em;color:var(--brons)}
.kick::before{content:"";width:28px;height:1px;background:currentColor;flex:none}
.num{font-family:var(--serif);font-weight:500;color:var(--brons);font-size:15px;letter-spacing:.06em}
.ln{display:block;overflow:hidden;padding:.05em 0 .03em}
.ln>span{display:block}

/* ---------- buttons (from E) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 30px;border:0;border-radius:999px;font:500 16px/1 var(--sans);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),opacity .3s}
.btn--navy{background:var(--zaal);color:var(--goud-licht)}
.btn--navy:hover{background:var(--diep)}
.btn--gold{background:var(--goud);color:var(--zaal)}
.btn--gold:hover{background:var(--goud-licht)}
.btn--ghost{background:transparent;border:1px solid rgba(220,182,123,.62);color:var(--goud-licht)}
.btn--ghost:hover{border-color:var(--goud-licht);background:rgba(220,182,123,.08)}
.btn--line{background:transparent;color:inherit;padding:0 6px;min-height:48px}
.btn--line span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:3px;transition:background-size .45s var(--ease)}
.btn--line:hover span{background-size:0 1px;background-position:100% 100%}
.btn .ar{display:inline-block;transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:default}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* =====================================================================
   DOEK: the navy stage. Letterbox masking closes over it at first paint,
   then opens to a thin frame with a gold LED seam (the cove light).
   ===================================================================== */
.bk-doek{position:relative;background:var(--diep);color:var(--pleister);isolation:isolate;overflow:hidden}
.bk-doek::before{content:"";position:absolute;left:0;right:0;top:0;height:70%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 90% at 50% 0%,rgba(244,206,148,.13),rgba(244,206,148,0) 72%)}
.lb{position:absolute;left:0;right:0;z-index:8;height:var(--lb);background:var(--zwart);pointer-events:none;transition:height 1.15s var(--ease)}
.lb::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(220,182,123,0),rgba(244,206,148,.75) 22%,rgba(244,206,148,.75) 78%,rgba(220,182,123,0));opacity:.8}
.lb--boven{top:0}.lb--boven::after{bottom:0}
.lb--onder{bottom:0}.lb--onder::after{top:0}
html.js:not(.doek-open) .lb{height:50.5%}
html.js:not(.doek-open) .lb::after{opacity:0}
.bk-doek__in{position:relative;max-width:1240px;margin:0 auto;padding:calc(var(--lb) + clamp(40px,6vw,84px)) var(--g) calc(var(--lb) + clamp(48px,6vw,88px))}
.bk-doek__kop{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.bk-doek__kop .kick{grid-column:1 / -1;color:var(--goud)}
.bk-doek h1{font-size:clamp(46px,6.4vw,104px);color:var(--goud);letter-spacing:.02em;margin-left:-.03em}
.bk-doek .lead{color:var(--steen);justify-self:end;padding-bottom:.4em}
.js .bk-doek h1 .ln>span{transform:translateY(108%);transition:transform 1.1s var(--ease) .35s}
.js .bk-doek h1 .ln+.ln>span{transition-delay:.47s}
.doek-open .bk-doek h1 .ln>span{transform:none}

.bk-stap__t{display:flex;align-items:baseline;gap:16px;font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(22px,2vw,28px);line-height:1;color:var(--pleister);margin-bottom:22px}
.bk-doek .num{color:var(--goud)}

/* ---------- 01 · the two rooms, each a screen with side masking ---------- */
.bk-zalen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.bk-zaal{position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--pleister);-webkit-tap-highlight-color:transparent;--m:7%}
.bk-zaal input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bk-zaal__doek{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#071226;box-shadow:0 0 0 1px rgba(220,182,123,.16),0 34px 60px -34px rgba(0,0,0,.7);transition:box-shadow .7s var(--ease),filter .7s var(--ease)}
/* real stills from the rooms in Mortsel (voor 2: the small room, voor 6: the big room) */
.bk-zaal__doek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%;transform:scale(1.01);transition:transform 1.4s var(--ease)}
.bk-zaal[data-formule="voor-2"] .bk-zaal__doek img{object-position:62% 78%}
.bk-zaal__doek::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(4,22,49,0) 55%,rgba(4,22,49,.55) 100%)}
.bk-zaal__m{position:absolute;top:0;bottom:0;width:var(--m);z-index:2;background:linear-gradient(90deg,var(--zwart),#071631);transition:width .9s var(--ease)}
.bk-zaal__m--l{left:0}
.bk-zaal__m--r{right:0;transform:scaleX(-1)}
.bk-zaal__wat{position:absolute;left:calc(var(--m) + 14px);bottom:12px;z-index:3;font-size:13px;color:rgba(238,231,222,.86);transition:left .9s var(--ease)}
.bk-zaal__tab{position:absolute;left:calc(var(--m) + 14px);top:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 10px;background:var(--zaal);color:var(--goud-licht);font-size:13.5px;font-weight:500;letter-spacing:.02em;opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease),left .9s var(--ease)}
.bk-zaal__info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;padding:22px 2px 0;align-items:end}
.bk-zaal__naam{grid-column:1;grid-row:1;font-family:var(--serif);font-weight:500;text-transform:uppercase;font-size:clamp(28px,2.6vw,42px);line-height:1;color:var(--goud);letter-spacing:.02em;white-space:nowrap}
.bk-zaal__feit{grid-column:1 / -1;color:var(--steen);font-size:16px}
.bk-zaal__uitleg{grid-column:1 / -1;color:var(--steen);font-size:15.5px;line-height:1.5;max-width:56ch}
.bk-zaal__prijs{grid-column:2;grid-row:1;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.bk-zaal__prijs b{font-family:var(--serif);font-weight:500;font-size:clamp(34px,3vw,50px);line-height:.9;color:var(--pleister);font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-zaal__was{font-size:15px;color:var(--nevel)}
.bk-zaal__was s{text-decoration-thickness:1px}
.bk-zaal__promo{grid-column:1 / -1;color:var(--goud-licht);font-size:14.5px;font-weight:450}
.bk-zaal__promo-was{display:none;color:var(--steen)}
.bk-zaal__promo-was s{color:var(--nevel)}
.bk-zaal__kies{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:500;font-size:15.5px;color:var(--goud-licht)}
.bk-zaal__kies i{display:block;height:1px;width:28px;background:currentColor;transition:width .6s var(--ease)}
.bk-zaal:hover,.bk-zaal:focus-within{--m:0%}
.bk-zaal:hover img{transform:scale(1.04)}
.bk-zaal:hover .bk-zaal__kies i{width:48px}
.bk-zaal:has(input:focus-visible) .bk-zaal__doek{outline:2px solid var(--goud-licht);outline-offset:5px}
.bk-zaal.is-gekozen{--m:0%}
.bk-zaal.is-gekozen .bk-zaal__doek{box-shadow:0 0 0 2px var(--goud),0 0 46px -4px rgba(244,206,148,.5),0 34px 60px -34px rgba(0,0,0,.7)}
.bk-zaal.is-gekozen .bk-zaal__tab{opacity:1;transform:none}
.bk-zalen.heeft-keuze .bk-zaal:not(.is-gekozen){--m:21%}
.bk-zalen.heeft-keuze .bk-zaal:not(.is-gekozen) .bk-zaal__doek{filter:brightness(.62) saturate(.8)}
.bk-zalen.heeft-keuze .bk-zaal:not(.is-gekozen):hover{--m:8%}
.bk-zalen.heeft-keuze .bk-zaal:not(.is-gekozen):hover .bk-zaal__doek{filter:none}
/* skeleton while /api/config loads */
.bk-zaal--laden{cursor:default}
.bk-zaal--laden .bk-zaal__doek{background:linear-gradient(100deg,#0D2140 30%,#16305A 50%,#0D2140 70%) 0 0/300% 100%;animation:glans 1.6s linear infinite}
.bk-zaal--laden .bk-zaal__naam,.bk-zaal--laden .bk-zaal__feit{color:transparent;background:#102545;width:60%;border-radius:2px}
.bk-zaal--laden .bk-zaal__feit{width:40%;margin-top:6px}
@keyframes glans{to{background-position:-300% 0}}
/* next step without a pointer: a visible way on (keyboard users choose with the arrow keys) */
.bk-verder{margin-top:clamp(24px,3vw,36px)}
/* two cards side by side on a tablet: name and price stack, so nothing wraps mid-word */
@media (min-width:760px) and (max-width:1100px){
  .bk-zaal__info{grid-template-columns:1fr}
  .bk-zaal__prijs{grid-column:1;grid-row:auto;align-items:flex-start;text-align:left;flex-direction:row;align-items:baseline;gap:10px}
}

/* =====================================================================
   THE FLOW: chapters 02–05 on plaster, the ticket on the side
   ===================================================================== */
.bk-flow{max-width:1240px;margin:0 auto;padding:clamp(40px,6vw,88px) var(--g) clamp(80px,9vw,140px);display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);gap:clamp(40px,5vw,88px);align-items:start}
.bk-aside{position:sticky;top:calc(var(--nav) + 28px);display:flex;flex-direction:column;gap:16px}
/* desktop: room at the end of the grid row, so the sticky ticket never slides under the header at step 05 */
@media (min-width:1000px){
  .bk-flow{padding-bottom:clamp(24px,3vw,48px)}
  .bk-hoofdstukken{padding-bottom:clamp(140px,13vw,190px)}
}
.bk-aside__noot{font-size:14px;color:var(--inkt2);padding:0 4px}
.bk-hfst{border-top:1px solid var(--zand);padding:26px 0 34px;scroll-margin-top:calc(var(--nav) + 14px)}
.bk-hfst[data-status="actief"]{border-top-color:var(--zaal)}
.bk-hfst__kop{display:flex;align-items:center;flex-wrap:wrap;gap:8px 20px;min-height:48px}
.bk-hfst__kop h2{display:flex;align-items:baseline;gap:16px;font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.02em;line-height:1.02;font-size:clamp(28px,3vw,44px);transition:font-size .4s var(--ease)}
.bk-hfst[data-status="klaar"] h2,.bk-hfst[data-status="dicht"] h2{font-size:clamp(19px,1.7vw,23px)}
.bk-hfst[data-status="dicht"] .bk-hfst__kop{opacity:.66}
.bk-hfst__keuze{display:none;flex:1 1 220px;min-width:0;font-weight:500;font-size:16.5px;color:var(--zaal)}
.bk-hfst[data-status="klaar"] .bk-hfst__keuze{display:block}
.bk-wijzig{display:none;margin-left:auto;min-height:44px;padding:0 4px;border:0;background:transparent;cursor:pointer;font-weight:500;font-size:15px;color:var(--brons)}
.bk-wijzig span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.bk-hfst[data-status="klaar"] .bk-wijzig{display:inline-flex;align-items:center}
.bk-hfst__body{display:none;margin-top:24px}
.bk-hfst[data-status="actief"] .bk-hfst__body{display:block;animation:inkomen .6s var(--ease)}
@keyframes inkomen{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bk-hfst__intro{color:var(--inkt2);max-width:52ch;margin-bottom:22px}

/* messages: the site's .melding (site.css), with spacing and a calm variant on the navy screen */
.bk-melding{margin:0 0 22px}
.bk-melding>div{min-width:0}
.bk-melding .btn--line{min-height:44px;padding:0;margin-left:2px;color:inherit;vertical-align:baseline}
.bk-doek .melding{margin-bottom:24px}
/* errors with a way out: try again (gold button) or call */
.bk-uitweg{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:14px}
.bk-uitweg .btn{min-height:48px;padding:0 24px}
.bk-uitweg__of{font-size:15px}
.bk-uitweg__of a{font-weight:500;text-underline-offset:3px}
.bk-melding.melding--fout>div{display:block}
/* on the navy screen: a calm gold-edged panel instead of a pink alert */
.bk-doek .melding--fout{background:rgba(244,206,148,.06);border:1px solid rgba(220,182,123,.35);border-left:3px solid var(--goud);color:var(--pleister)}
.bk-doek .melding--fout b{color:var(--goud-licht);font-weight:500}
.bk-doek .bk-uitweg__of a{color:var(--goud-licht)}

/* ---------- 02 · calendar ---------- */
.bk-kal{max-width:560px}
.bk-kal__kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.bk-kal__maand{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(18px,1.6vw,21px)}
.bk-rond{width:48px;height:48px;flex:none;border-radius:50%;border:1px solid var(--zand);background:transparent;display:grid;place-items:center;cursor:pointer;color:var(--zaal);transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.bk-rond:hover:not([disabled]){background:var(--zaal);border-color:var(--zaal);color:var(--goud-licht)}
.bk-rond[disabled]{opacity:.28;cursor:default}
.bk-kal__vel{position:relative;touch-action:pan-y}
.bk-kal__rooster{width:100%;border-collapse:separate;border-spacing:5px;table-layout:fixed;margin:0 -5px}
.bk-kal__rooster abbr{text-decoration:none}
.bk-kal__rooster th{font-size:13.5px;font-weight:500;color:var(--inkt2);padding:0 0 6px;text-align:center}
.bk-kal__rooster td{padding:0;text-align:center}
.bk-kal__vel.is-wissel .bk-kal__rooster{animation:wissel .45s var(--ease)}
.bk-kal__vel.is-wissel-terug .bk-kal__rooster{animation:wisselT .45s var(--ease)}
@keyframes wissel{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes wisselT{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.bk-dag{position:relative;width:100%;aspect-ratio:1/1;min-height:44px;max-height:72px;border:0;border-radius:3px;padding:0;background:transparent;font:500 17px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--zaal);display:grid;place-items:center;cursor:default}
.bk-dag--vrij{background:var(--kalk);box-shadow:inset 0 -2px 0 rgba(205,191,177,.55);cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.bk-dag--vrij:hover{background:#fff}
.bk-dag--bijna::after{content:"";position:absolute;left:50%;bottom:16%;width:14px;height:2px;margin-left:-7px;background:var(--goud)}
.bk-dag--vol{color:var(--nevel)}
.bk-dag--vol .bk-dag__n{background:linear-gradient(var(--nevel),var(--nevel)) 50% 54%/100% 1px no-repeat;padding:0 3px}
.bk-dag--uit{color:rgba(74,84,102,.32)}
.bk-week--voorbij .bk-dag{aspect-ratio:auto;height:30px;min-height:0;font-size:14px}
.bk-dag--vandaag{box-shadow:inset 0 0 0 1.5px var(--zand)}
.bk-dag.is-gekozen{background:var(--zaal);color:var(--goud-licht);box-shadow:0 10px 22px -12px rgba(11,27,50,.7)}
.bk-dag.is-gekozen::after{background:var(--goud-licht)}
.bk-dag--laden{background:linear-gradient(100deg,var(--kalk) 30%,#FBF8F4 50%,var(--kalk) 70%) 0 0/300% 100%;animation:glans 1.4s linear infinite;color:transparent}
.bk-dag:focus-visible{outline:2px solid var(--zaal);outline-offset:2px}
.bk-kal__legende{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-size:14px;color:var(--inkt2)}
.bk-kal__legende span{display:inline-flex;align-items:center;gap:9px}
.bk-kal__legende i{display:inline-block;width:18px;height:18px;border-radius:2px}
.bk-lg-vrij{background:var(--kalk);box-shadow:inset 0 -2px 0 rgba(205,191,177,.55)}
.bk-lg-bijna{background:linear-gradient(var(--goud),var(--goud)) 50% 78%/10px 2px no-repeat,var(--kalk)}
.bk-lg-vol{background:linear-gradient(var(--nevel),var(--nevel)) 50% 50%/12px 1px no-repeat}
.bk-kal__veeg{display:none;font-size:13.5px;color:var(--inkt2);margin-top:6px}

/* ---------- 03 · times, each a little ticket stub ---------- */
.bk-uren-groep+.bk-uren-groep{margin-top:22px}
.bk-uren-groep h3{font-size:15px;font-weight:500;color:var(--brons);margin-bottom:12px;display:flex;align-items:center;gap:12px}
.bk-uren-groep h3::before{content:"";width:28px;height:1px;background:currentColor}
.bk-uren{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px}
.bk-uur{position:relative;min-height:68px;border:0;padding:10px 16px;background:var(--kalk);color:var(--zaal);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;
  -webkit-mask:radial-gradient(circle 7px at 0 50%,#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 96%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 7px at 0 50%,#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 7px at 100% 50%,#0000 96%,#000) 100% 0/51% 100% no-repeat;
  transition:background .25s var(--ease),color .25s var(--ease)}
.bk-uur b{font:500 21px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.bk-uur small{font-size:13px;color:var(--inkt2);line-height:1}
.bk-uur:hover{background:#fff}
.bk-uur:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--zaal)}
.bk-uur[aria-pressed="true"]{background:var(--zaal);color:var(--goud-licht)}
.bk-uur[aria-pressed="true"] small{color:var(--steen)}
.bk-uur--bezet{background:transparent;box-shadow:inset 0 0 0 1px var(--steen);cursor:not-allowed}
.bk-uur--bezet:hover{background:transparent}
.bk-uur--bezet b{color:var(--nevel);text-decoration:line-through;text-decoration-thickness:1px}
.bk-uur--bezet small{color:var(--nevel)}
.bk-uur--laden{background:linear-gradient(100deg,var(--kalk) 30%,#FBF8F4 50%,var(--kalk) 70%) 0 0/300% 100%;animation:glans 1.4s linear infinite;cursor:default}
.bk-leeg{padding:6px 0 2px}
.bk-leeg p{max-width:46ch;color:var(--inkt2)}
.bk-leeg .disp{font-size:clamp(22px,2vw,28px);color:var(--zaal);margin-bottom:10px}

/* ---------- 04 · details ---------- */
.bk-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.bk-veld--breed{grid-column:1 / -1}
/* gift voucher code in the overview */
.bk-bon{margin:0 0 22px;padding:18px 0;border-top:1px solid var(--steen);border-bottom:1px solid var(--steen)}
.bk-bon__open{appearance:none;border:0;background:none;padding:6px 0;min-height:44px;font:500 16px/1.3 var(--sans);color:var(--zaal);cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.bk-bon__open::before{content:"";width:22px;height:14px;border:1.5px solid var(--brons);border-radius:2px;background:linear-gradient(90deg,transparent 62%,var(--brons) 62%,var(--brons) 66%,transparent 66%)}
.bk-bon__open span{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:2px}
.bk-bon__open[aria-expanded="true"]{display:none}
.bk-bon__veld{display:flex;flex-direction:column;gap:8px}
.bk-bon__rij{display:flex;gap:10px}
.bk-bon__rij .invoer{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.bk-bon__rij .invoer::placeholder{text-transform:none;letter-spacing:.04em}
.bk-bon__rij .btn{flex:none;padding:0 24px}
.bk-bon__ok{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;padding:14px 18px;background:var(--zaal);color:var(--pleister)}
.bk-bon__ok p{display:flex;flex-direction:column;gap:2px;margin:0;font-size:15px;color:#C9CED7}
.bk-bon__ok b{font-weight:500;font-size:16px;color:var(--goud-licht);letter-spacing:.02em}
.bk-bon__ok .btn{color:var(--goud-licht);min-height:44px}
@media (max-width:520px){.bk-bon__rij{flex-direction:column}.bk-bon__rij .btn{width:100%}}
.bk-fout{display:flex;align-items:flex-start;gap:8px;color:var(--rood,#9A3324);font-size:14.5px;font-weight:500;line-height:1.4}
.bk-fout::before{content:"";flex:none;width:6px;height:6px;margin-top:.5em;background:currentColor;transform:rotate(45deg)}
.bk-fout:empty{display:none}
.veld__fout:not(:empty)::before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px .12em 1px;background:currentColor;transform:rotate(45deg)}
.bk-teller{display:inline-flex;align-items:stretch;border:1px solid var(--zand);border-radius:3px;background:#FBF8F4;width:max-content}
.bk-teller button{width:56px;min-height:56px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--zaal);transition:background .2s}
.bk-teller button:hover:not([disabled]){background:var(--steen)}
.bk-teller button[disabled]{opacity:.3;cursor:default}
.bk-teller input{width:64px;border:0;border-left:1px solid var(--zand);border-right:1px solid var(--zand);background:transparent;text-align:center;font:500 20px/1 var(--sans);font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.bk-teller input::-webkit-outer-spin-button,.bk-teller input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.bk-teller input:focus{outline:2px solid var(--zaal);outline-offset:-2px}
.bk-vink{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start;padding:8px 0;cursor:pointer;font-size:16px;line-height:1.5;min-height:44px}
.bk-vink input{-webkit-appearance:none;appearance:none;width:28px;height:28px;margin:-1px 0 0;border:1.5px solid var(--zaal);border-radius:3px;background:var(--kalk);display:grid;place-items:center;cursor:pointer;transition:background .2s}
.bk-vink input::after{content:"";width:13px;height:7px;border-left:2.5px solid var(--goud-licht);border-bottom:2.5px solid var(--goud-licht);transform:translateY(-2px) rotate(-45deg) scale(0);transition:transform .25s var(--ease)}
.bk-vink input:checked{background:var(--zaal)}
.bk-vink input:checked::after{transform:translateY(-2px) rotate(-45deg) scale(1)}
.bk-vink input[aria-invalid="true"]{border-color:var(--fout);box-shadow:0 0 0 3px rgba(158,43,37,.15)}
.bk-vink a{text-underline-offset:3px}
.bk-volgende{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px}

/* ---------- 05 · overview ---------- */
.bk-tk-inline{display:none;margin-bottom:30px}
.bk-regels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(20px,3vw,40px);margin-bottom:28px}
.bk-regel{border-top:1px solid var(--zaal);padding-top:14px}
.bk-regel h3{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:16px;margin-bottom:8px}
.bk-regel p{font-size:15.5px;color:var(--inkt2);line-height:1.5}
.bk-regel p b{color:var(--zaal);font-weight:500}
.bk-akkoord{display:flex;flex-direction:column;gap:4px;margin-bottom:6px}
.bk-betaal{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:22px}
.btn--betaal{min-height:64px;padding:0 38px;font-size:18px}
.btn--betaal b{font-weight:600;font-variant-numeric:tabular-nums}
.bk-veilig{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--inkt2);min-height:22px}
.bk-veilig .spin{width:16px;height:16px;color:var(--brons)}
.bk-veilig svg{flex:none;color:var(--brons)}

/* =====================================================================
   THE TICKET: gold on navy, perforated stub
   ===================================================================== */
.tk{--tk-bg:var(--pleister);position:relative;background:var(--zaal);color:var(--pleister);box-shadow:0 44px 70px -44px rgba(11,27,50,.75),0 2px 0 rgba(11,27,50,.05)}
.tk::after{content:"";position:absolute;inset:9px;border:1px solid rgba(220,182,123,.26);pointer-events:none}
.tk__main{padding:30px 30px 26px}
.tk__merk{display:flex;align-items:center;gap:12px;color:var(--goud);font-size:14px;font-weight:500;letter-spacing:.02em}
.tk__merk img{width:38px}
.tk__zaal{font-family:var(--serif);font-weight:500;text-transform:uppercase;color:var(--goud);font-size:clamp(28px,2.5vw,38px);line-height:1;letter-spacing:.02em;margin:22px 0 18px}
.tk__rijen{display:grid;gap:11px}
.tk__rij{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:baseline}
.tk__rij dt{font-size:13.5px;color:var(--nevel)}
.tk__rij dd{margin:0;font-size:16.5px;line-height:1.35;color:var(--pleister);font-weight:450;overflow-wrap:anywhere}
.tk__leeg{color:#3A4A66}
.tk__stub{position:relative;padding:22px 30px 30px;border-top:2px dashed rgba(220,182,123,.4)}
.tk__stub::before,.tk__stub::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--tk-bg);z-index:1}
.tk__stub::before{left:-12px}.tk__stub::after{right:-12px}
.tk__lbl{font-size:14px;color:var(--nevel)}
.tk__bedrag{font-family:var(--serif);font-weight:500;font-size:clamp(46px,4vw,62px);line-height:.95;color:var(--goud-licht);font-variant-numeric:tabular-nums;margin-top:6px;letter-spacing:.01em}
.tk__bedrag--leeg{color:#3A4A66}
.tk__was{margin-top:8px;font-size:14px;color:var(--steen)}
.tk__was s{color:var(--nevel)}
.tk__zegel{position:absolute;right:24px;top:-42px;z-index:2;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 38% 32%,var(--goud-licht),var(--goud) 55%,#B8925A);display:grid;place-items:center;box-shadow:0 12px 26px -10px rgba(0,0,0,.6);transform:rotate(-10deg)}
.tk__zegel img{width:50px}
.tk__zegel::after{content:"";position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(11,27,50,.28)}
/* wide ticket (status pages, desktop) */
@media (min-width:760px){
  .tk--breed{display:grid;grid-template-columns:minmax(0,1fr) 290px}
  .tk--breed .tk__main{padding:38px 40px 36px}
  .tk--breed .tk__stub{border-top:0;border-left:2px dashed rgba(220,182,123,.4);padding:38px 34px;display:flex;flex-direction:column;justify-content:flex-end}
  .tk--breed .tk__stub::before,.tk--breed .tk__stub::after{left:-13px;right:auto}
  .tk--breed .tk__stub::before{top:-12px}
  .tk--breed .tk__stub::after{top:auto;bottom:-12px}
  .tk--breed .tk__zegel{top:30px;right:30px}
  .tk--breed .tk__rijen{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
  .tk--breed .tk__rij{grid-template-columns:1fr;gap:4px}
  .tk--breed .tk__zaal{font-size:clamp(34px,3.4vw,52px)}
}

/* ---------- phone: the ticket stub that follows you ---------- */
.bk-stub{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:50;display:none;align-items:center;gap:14px;min-height:60px;padding:10px 22px;border:0;background:var(--zaal);color:var(--pleister);text-align:left;cursor:pointer;box-shadow:0 20px 40px -16px rgba(11,27,50,.7);transform:translateY(170%);transition:transform .55s var(--ease);
  -webkit-mask:radial-gradient(circle 8px at 0 50%,#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 96%,#000) 100% 0/51% 100% no-repeat;
  mask:radial-gradient(circle 8px at 0 50%,#0000 96%,#000) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% 50%,#0000 96%,#000) 100% 0/51% 100% no-repeat}
.bk-stub.is-on{transform:none}
/* while the stub is shown (phone, tablet), the footer gets room for it at the end of the page */
@media (max-width:999px){ body.stub-aan .voet{padding-bottom:calc(92px + env(safe-area-inset-bottom))} }
.bk-stub__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:14px;line-height:1.3}
.bk-stub__txt b{font-family:var(--serif);font-weight:500;color:var(--goud);text-transform:uppercase;letter-spacing:.04em;font-size:14px}
.bk-stub__txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--steen)}
.bk-stub__prijs{font-family:var(--serif);font-weight:500;color:var(--goud-licht);font-size:24px;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:14px;border-left:1.5px dashed rgba(220,182,123,.45)}

/* =====================================================================
   STATUS PAGES (bedankt, annuleren): a full navy stage
   ===================================================================== */
.st{position:relative;background:var(--diep);color:var(--pleister);isolation:isolate;overflow:hidden;min-height:calc(100svh - var(--nav))}
.st::before{content:"";position:absolute;left:0;right:0;top:0;height:70%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 62% 90% at 50% 0%,rgba(244,206,148,.12),rgba(244,206,148,0) 72%)}
.st__in{position:relative;max-width:1120px;margin:0 auto;padding:calc(var(--lb) + clamp(44px,7vw,96px)) var(--g) calc(var(--lb) + clamp(56px,7vw,110px))}
.st .tk{--tk-bg:var(--diep);box-shadow:0 0 0 1px rgba(220,182,123,.18),0 50px 80px -40px rgba(0,0,0,.8)}
.st__staat{display:none;animation:inkomen .7s var(--ease)}
.st[data-staat="laden"] [data-voor~="laden"],
.st[data-staat="wachten"] [data-voor~="wachten"],
.st[data-staat="traag"] [data-voor~="traag"],
.st[data-staat="betaald"] [data-voor~="betaald"],
.st[data-staat="mislukt"] [data-voor~="mislukt"],
.st[data-staat="verlopen"] [data-voor~="verlopen"],
.st[data-staat="geannuleerd"] [data-voor~="geannuleerd"],
.st[data-staat="onbekend"] [data-voor~="onbekend"],
.st[data-staat="fout"] [data-voor~="fout"],
.st[data-staat="kan"] [data-voor~="kan"],
.st[data-staat="bevestig"] [data-voor~="bevestig"],
.st[data-staat="telaat"] [data-voor~="telaat"],
.st[data-staat="nietbetaald"] [data-voor~="nietbetaald"],
.st[data-staat="klaar"] [data-voor~="klaar"]{display:block}
.st__kop{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(32px,5vw,56px);max-width:860px}
.st__kop .kick{color:var(--goud)}
.st h1{font-size:clamp(42px,6vw,96px);color:var(--goud);letter-spacing:.02em}
.st h1.st__h1--klein{font-size:clamp(36px,4.6vw,72px)}
.st .lead{color:var(--steen);max-width:46ch}
.st__midden{text-align:center;padding:clamp(20px,6vh,70px) 0}
.st__midden>*+*{margin-top:22px}
.st__midden .leader{margin-left:auto;margin-right:auto;margin-bottom:12px}
.st__midden .lead{margin-left:auto;margin-right:auto}
.st__midden .kick{justify-content:center}
.st .kick{color:var(--goud)}
.st__vraag .st__acts{margin-top:20px}
.st__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:6px}
.st__midden .st__acts{justify-content:center;margin-top:34px}
.st .btn--line{color:var(--goud-licht)}
.st__info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(24px,4vw,56px);margin-top:clamp(40px,6vw,72px)}
.st__blok{border-top:1px solid rgba(220,182,123,.45);padding-top:16px;display:flex;flex-direction:column;gap:10px}
.st__blok h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.04em;font-size:18px;color:var(--goud)}
.st__blok p,.st__blok li{color:var(--steen);font-size:16px;line-height:1.55}
.st__blok ul{display:flex;flex-direction:column;gap:8px}
.st__blok li{position:relative;padding-left:18px}
.st__blok li::before{content:"";position:absolute;left:0;top:.72em;width:7px;height:1px;background:var(--goud)}
.st__blok a{color:var(--goud-licht);text-underline-offset:3px}
.st__adres{font-size:19px!important;color:var(--pleister)!important;font-weight:450}
.st__klein{font-size:14.5px;color:var(--nevel)}
.st__ticket{position:relative;margin-top:8px}
.st__vraag{margin-top:30px;padding:26px clamp(22px,3vw,34px);background:rgba(11,27,50,.9);position:relative;max-width:760px}
.st__vraag::after{content:"";position:absolute;inset:8px;border:1px solid rgba(220,182,123,.24);pointer-events:none}
.st__vraag h2{font-family:var(--serif);font-weight:500;text-transform:uppercase;letter-spacing:.03em;color:var(--goud);font-size:clamp(22px,2vw,28px);line-height:1.1;margin-bottom:10px}
.st__vraag p{color:var(--steen)}
.st__vraag .st__acts{position:relative;z-index:1;margin-top:20px}
.st__melding{margin-top:18px;color:var(--fout-licht);font-weight:500}
.btn--stop{background:transparent;border:1px solid rgba(246,169,154,.7);color:var(--fout-licht)}
.btn--stop:hover{background:rgba(246,169,154,.1);border-color:var(--fout-licht)}

/* film leader: the countdown circle while we wait for the payment */
.leader{position:relative;width:clamp(150px,22vw,200px);aspect-ratio:1/1;color:var(--goud)}
.leader svg{width:100%;height:100%;overflow:visible}
.leader__veeg{transform-origin:100px 100px;animation:veeg 1.6s linear infinite}
.leader__puls{transform-origin:100px 100px;animation:puls 1.6s var(--ease) infinite}
.leader img{position:absolute;left:50%;top:50%;width:34%;transform:translate(-50%,-52%)}
@keyframes veeg{to{transform:rotate(360deg)}}
@keyframes puls{0%,100%{opacity:.25}50%{opacity:.6}}

/* =====================================================================
   PHONE
   ===================================================================== */
@media (max-width:999px){
  .bk-flow{grid-template-columns:minmax(0,1fr)}
  .bk-aside{display:none}
  .bk-tk-inline{display:block}
  .bk-stub{display:flex}
  .bk-flow{padding-bottom:120px}
}
@media (max-width:899px){
  :root{--nav:62px}
  body{font-size:16.5px}
  /* the doek is taller than the screen: the bars stop at 40svh and open fast, so the title reads at once */
  .bk-doek .lb{transition-duration:.6s}
  html.js:not(.doek-open) .bk-doek .lb{height:min(50.5%,40vh);height:min(50.5%,40svh)}
  .js .bk-doek h1 .ln>span{transition-duration:.7s;transition-delay:.05s}
  .js .bk-doek h1 .ln+.ln>span{transition-delay:.11s}
  .bk-doek__kop{grid-template-columns:1fr}
  .bk-doek .lead{justify-self:start;padding-bottom:0}
  .bk-regels{grid-template-columns:1fr;gap:16px}
  .st__info{grid-template-columns:1fr}
}
@media (max-width:759px){
  .bk-zalen{grid-template-columns:1fr;gap:34px}
  .bk-zaal{--m:5%}
  .bk-zaal__doek{aspect-ratio:2/1}
  .bk-zaal__info{padding-top:14px;gap:4px 14px}
  .bk-zaal__kies{margin-top:6px}
  .bk-doek__in{padding-top:calc(var(--lb) + 32px);padding-bottom:calc(var(--lb) + 40px)}
  .bk-doek__kop{margin-bottom:30px;gap:14px}
  .bk-doek h1{font-size:clamp(40px,12vw,54px)}
  .bk-zaal__naam{font-size:clamp(23px,6.8vw,28px);white-space:nowrap}
  .bk-zaal__prijs{grid-row:1}
  .bk-zaal__prijs b{font-size:clamp(28px,8.2vw,34px)}
  .bk-zaal__feit{grid-column:1 / -1}
  .bk-zaal__was{display:none}
  .bk-zaal__promo-was{display:inline}
  .bk-form{grid-template-columns:1fr;gap:20px}
  .bk-kal__veeg{display:block}
  .bk-kal__rooster{border-spacing:4px;margin:0 -4px}
  .bk-dag{font-size:16px}
  .bk-uren{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .bk-uur{padding:10px 8px;min-height:64px}
  .bk-uur b{font-size:19px}
  .btn--betaal{width:100%}
  .bk-volgende .btn--navy{width:100%}
  .tk__main{padding:26px 24px 22px}
  .tk__stub{padding:20px 24px 26px}
  .tk__zegel{width:72px;height:72px;top:-36px;right:18px}
  .tk__zegel img{width:42px}
  .st__acts .btn{flex:1 1 100%}
  .st h1{font-size:clamp(38px,11vw,56px)}
  .st h1.st__h1--klein{font-size:clamp(32px,9.4vw,46px)}
}
@media (max-width:380px){
  .bk-uren{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tk__rij{grid-template-columns:84px minmax(0,1fr)}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  .leader__veeg{animation:none}
}

/* v2 (DESIGN_V2.md 6.12): the chosen or focused room card takes its room's light (copper for voor 2, amber for voor 6) */
.bk-zaal[data-formule="voor-2"]{--w-gloed:rgba(224,112,42,.34)}
.bk-zaal[data-formule="voor-6"]{--w-gloed:rgba(211,118,79,.30)}
.bk-zaal.is-gekozen .bk-zaal__doek{box-shadow:0 0 0 2px var(--goud),0 0 52px -2px var(--w-gloed),0 34px 70px -26px var(--w-gloed)}
.bk-zaal:not(.is-gekozen):has(input:focus-visible) .bk-zaal__doek{box-shadow:0 0 0 1px rgba(220,182,123,.32),0 0 46px -6px var(--w-gloed)}