/* Prijs aanvragen + the boarding-pass ending */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.rq-page main{background:var(--paper)}
.rq{max-width:760px;padding-top:40px;padding-bottom:120px}
.rq-head h1,.done h1{font:800 italic clamp(34px,5vw,48px)/1.05 var(--f-sign)}
.rq-head p,.done>p{margin-top:10px;color:var(--muted)}
.steps{list-style:none;display:flex;gap:6px;margin:26px 0 22px;padding:0}
.steps li{flex:1;display:flex;align-items:center;gap:8px;padding:10px 0 0;border-top:4px solid var(--line);color:var(--muted);font-size:14.5px;cursor:default}
.steps li span{width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--ink);font:800 italic 13px/24px var(--f-sign);text-align:center;flex:none}
.steps li.on{border-color:var(--red);color:var(--ink)}.steps li.on span{background:var(--red);color:#fff}
.steps li.done{border-color:var(--blue);cursor:pointer}.steps li.done span{background:var(--blue);color:#fff}
.step{display:none;border:0;margin:0;padding:0;min-width:0}
.step.on{display:block}
.q{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;margin-bottom:14px}
.q h2{font:700 19px/1.3 var(--f);margin-bottom:14px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:11px 16px;font:600 15px/1 var(--f);cursor:pointer;color:var(--ink);min-height:44px}
.seg button[aria-pressed=true]{border-color:var(--blue);background:var(--blue);color:#fff}
.tolist{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
.tolist button{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:10px 12px;font:600 italic 16px/1.2 var(--f-win);color:var(--ink);cursor:pointer;text-align:left;min-height:44px}
.tolist button::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--red);flex:none}
.tolist button.o{font:600 15px/1.2 var(--f)}.tolist button.o::before{background:var(--gold)}
.tolist button[aria-pressed=true]{border-color:var(--blue);background:#eef2fc}
.other{display:none;margin-top:10px}.other.on{display:block}
input[type=text],input[type=tel],input[type=email],input[type=date],textarea{width:100%;border:1.5px solid #cfd3dc;border-radius:8px;padding:12px 13px;font:500 16px/1.3 var(--f);color:var(--ink);background:#fff}
input:focus,textarea:focus,button:focus-visible{outline:3px solid rgba(29,71,184,.35);outline-offset:1px}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dates label span,.fields label span{display:block;font-weight:600;font-size:14.5px;margin-bottom:6px}
.dates label[hidden]{display:none}
.check{display:flex;gap:12px;align-items:flex-start;margin-top:16px;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--blue);flex:none}
.check small{display:block;color:var(--muted);font-size:14px}
.pax .row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pax .row:last-child{border-bottom:0}
.pax small{display:block;color:var(--muted);font-size:13.5px}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--line);background:#fff;font:600 20px/1 var(--f);cursor:pointer;color:var(--ink)}
.stepper output{min-width:28px;text-align:center;font:800 italic 20px/1 var(--f-sign)}
.fields{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;display:grid;gap:12px}
.err{color:var(--red-d);font-size:14px;font-weight:600;min-height:0;margin:0}
.err:empty{display:none}
.demo{margin-top:12px;font-size:13.5px;color:var(--muted)}
.bar{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;justify-content:flex-end;padding:14px 0 16px;background:linear-gradient(transparent,var(--paper) 28%)}
.bar .btn[hidden]{display:none}
.bar #b-back{margin-right:auto}
@media (max-width:560px){
  .rq{padding-top:18px;padding-bottom:110px}
  .q,.fields{padding:18px 16px}
  .dates{grid-template-columns:1fr}
  .steps li b{display:none}.steps li{justify-content:center}
  .tolist{grid-template-columns:1fr 1fr}
  .bar{padding-bottom:58px}.bar .btn{flex:1}
}

/* ---------- the pass ---------- */
.done{padding-top:6px}
.pass{display:grid;grid-template-columns:1fr 190px;margin:26px 0 22px;filter:drop-shadow(0 18px 30px rgba(20,33,61,.18));animation:print .7s cubic-bezier(.2,.8,.2,1)}
@keyframes print{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.p-main,.p-stub{background:#fff;position:relative}
.p-main{border-radius:14px 0 0 14px;padding:0 0 22px;overflow:hidden;
  -webkit-mask:radial-gradient(circle 12px at 100% 0,#0000 98%,#000) top right/100% 51% no-repeat,radial-gradient(circle 12px at 100% 100%,#0000 98%,#000) bottom right/100% 51% no-repeat;
  mask:radial-gradient(circle 12px at 100% 0,#0000 98%,#000) top right/100% 51% no-repeat,radial-gradient(circle 12px at 100% 100%,#0000 98%,#000) bottom right/100% 51% no-repeat}
.p-stub{border-radius:0 14px 14px 0;border-left:2px dashed #c9cdd6;padding:22px 18px;display:flex;flex-direction:column;gap:4px;
  -webkit-mask:radial-gradient(circle 12px at 0 0,#0000 98%,#000) top left/100% 51% no-repeat,radial-gradient(circle 12px at 0 100%,#0000 98%,#000) bottom left/100% 51% no-repeat;
  mask:radial-gradient(circle 12px at 0 0,#0000 98%,#000) top left/100% 51% no-repeat,radial-gradient(circle 12px at 0 100%,#0000 98%,#000) bottom left/100% 51% no-repeat}
.p-top{display:flex;align-items:center;gap:10px;background:var(--red);color:#fff;padding:12px 20px}
.p-top svg{width:32px;height:29px;color:#fff;flex:none}
.p-brand{font:800 italic 18px/1 var(--f-sign);text-transform:uppercase;letter-spacing:.02em}
.p-kind{margin-left:auto;font:700 12px/1 var(--f);letter-spacing:.16em}
.p-route{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:22px 22px 8px}
.p-route small,.p-grid dt,.p-stub small{display:block;font:700 11px/1.2 var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.p-route b{display:block;font:800 italic 46px/1 var(--f-sign);color:var(--ink);margin-top:4px;word-break:break-word}
.p-route .p-to b{color:var(--blue)}
.p-route .nocode b{font-size:30px}
.p-route span{display:block;font:600 italic 16px/1.3 var(--f-win);color:var(--muted);margin-top:2px}
.p-route .p-to{text-align:right}
.p-plane{width:46px;height:26px;color:var(--red)}
.p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 18px;margin:12px 22px 0;padding-top:16px;border-top:1px solid var(--line)}
.p-grid dd{margin:3px 0 0;font-weight:700;font-size:15.5px}
.p-grid dd i{display:block;font-style:normal;font-weight:500;color:var(--muted);font-size:13px}
.stamp{position:absolute;right:26px;bottom:16px;transform:rotate(-9deg);border:3px solid var(--red);color:var(--red);border-radius:6px;padding:6px 12px;
  font:800 italic 20px/1 var(--f-sign);letter-spacing:.08em;opacity:.88;mix-blend-mode:multiply;animation:stamp .45s .55s both cubic-bezier(.3,1.6,.5,1)}
@keyframes stamp{from{transform:rotate(-9deg) scale(1.8);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:.88}}
.p-stub b{font:800 italic 24px/1.1 var(--f-sign);color:var(--ink)}
.p-codes{margin-top:10px;font:700 15px/1.3 var(--f);color:var(--blue)}
.p-note{margin-top:auto;font-size:12.5px;color:var(--muted);padding-top:14px}
.done-acts{display:flex;flex-wrap:wrap;gap:10px}
@media (max-width:640px){
  .pass{grid-template-columns:1fr}
  .p-main{border-radius:14px 14px 0 0;padding-bottom:70px;
    -webkit-mask:radial-gradient(circle 12px at 0 100%,#0000 98%,#000) bottom left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 100%,#0000 98%,#000) bottom right/51% 100% no-repeat;
    mask:radial-gradient(circle 12px at 0 100%,#0000 98%,#000) bottom left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 100%,#0000 98%,#000) bottom right/51% 100% no-repeat}
  .p-stub{border-radius:0 0 14px 14px;border-left:0;border-top:2px dashed #c9cdd6;
    -webkit-mask:radial-gradient(circle 12px at 0 0,#0000 98%,#000) top left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 0,#0000 98%,#000) top right/51% 100% no-repeat;
    mask:radial-gradient(circle 12px at 0 0,#0000 98%,#000) top left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 0,#0000 98%,#000) top right/51% 100% no-repeat}
  .p-route{padding:18px 16px 6px;gap:8px}
  .p-route b{font-size:32px}.p-route .nocode b{font-size:22px}
  .p-plane{width:30px;height:18px}
  .p-grid{grid-template-columns:1fr 1fr;margin:10px 16px 0}
  .stamp{right:16px;bottom:14px;font-size:17px}
  .done-acts .btn{flex:1 1 100%}
}
