/* hoco 5970 order 5528: the voucher: Philip's pick B 'Rustig ticket' (order 5536), on every proef page (boek, laptop, phone), a calm paper ticket (on top of site.css, only on /bijles/voorstel-voucher-b) */
body.vv-b{--vb-ink:#24304F;--vb-paper:#FCFAF4;--vb-line:rgba(36,48,79,.14);--vb-soft:rgba(36,48,79,.62)}
/* the ticket: cream paper, a hairline edge, a quiet lift */
body.vv-b .pf-ticket{gap:0!important;padding:30px 26px 0!important;border-radius:6px!important;background:var(--vb-paper)!important;color:var(--vb-ink)!important;
  outline:0!important;border:1px solid var(--vb-line)!important;
  box-shadow:0 1px 1px rgba(14,20,42,.04),0 2px 6px rgba(14,20,42,.04),0 24px 48px -28px rgba(14,20,42,.30)!important;overflow:visible!important}
body.vv-b .pf-ticket::before,body.vv-b .pf-ticket::after,body.vv-b .pf-stub::before,body.vv-b .pf-stub::after{display:none!important}
body.vv-b .pf-logo{content:url(/bijles/_c/bijlino-logo-navy.svg);height:22px!important;margin:0 0 30px!important;opacity:.92}
body.vv-b .pf-ticket h1{margin:0 0 12px!important;color:var(--vb-ink)!important;font-weight:500!important;font-size:30px!important;line-height:1.12!important;letter-spacing:-.015em}
body.vv-b .pf-ticket > p{margin:0!important;color:var(--vb-soft)!important;font-size:17px!important;line-height:1.5!important}
/* the form: quiet hairline fields */
body.vv-b .pf-ticket .pf-form{gap:16px!important;margin:28px 0 0!important}
body.vv-b .pf-ticket .pf-form label{gap:8px!important;color:var(--vb-ink)!important;font-size:15px!important;font-weight:500;letter-spacing:.01em}
body.vv-b .pf-ticket input{min-height:50px!important;border-radius:8px!important;background:#fff!important;border:1px solid rgba(36,48,79,.18)!important;box-shadow:none!important;color:var(--vb-ink)!important;font-size:17px}
body.vv-b .pf-ticket input:focus{border-color:var(--vb-ink)!important;outline:0!important}
body.vv-b .pf-ticket .pf-go{min-height:54px!important;margin-top:8px!important;border-radius:8px!important;background:var(--vb-ink)!important;color:var(--vb-paper)!important;box-shadow:none!important;font-weight:500!important;font-size:17px!important;letter-spacing:.01em}
body.vv-b .pf-ticket .pf-go svg{width:18px;height:18px}
body.vv-b .pf-ticket .pf-err{color:#B3261E!important}
/* the stub: one fine row of perforation dots, edge to edge */
body.vv-b .pf-stub{position:relative;margin:30px -26px 0!important;padding:22px 26px 24px!important;min-height:0!important;border-top:0!important;
  background:radial-gradient(circle,rgba(36,48,79,.32) 1.1px,transparent 1.5px) 3px 0/7px 3px repeat-x!important;align-items:center!important}
body.vv-b .pf-code{color:var(--vb-ink)!important;font-weight:500!important;font-size:26px!important;letter-spacing:.32em!important;font-variant-numeric:tabular-nums}
body.vv-b .pf-new .pf-stub .pf-code:empty::before{width:150px!important;height:26px!important;
  background:repeating-linear-gradient(90deg,rgba(36,48,79,.16) 0 18px,transparent 18px 26.4px) left bottom/150px 1.5px no-repeat!important}
/* the stamp: a thin, calm mark */
body.vv-b .pf-new .pf-okslot{width:104px!important;height:30px!important;transform:none!important;border-radius:4px!important;box-shadow:inset 0 0 0 1px rgba(36,48,79,.14)!important}
body.vv-b .pf-ok{transform:none!important;padding:8px 12px!important;border-radius:4px!important;background:transparent!important;color:#1E8C68!important;
  box-shadow:inset 0 0 0 1px rgba(30,140,104,.55)!important;font-weight:500!important;font-size:13px!important;letter-spacing:.16em!important}
body.vv-b .pf-ok svg{width:14px!important;height:14px!important}
/* the steps below: hairline numbers to match */
body.vv-b .pf-how h2{font-weight:500!important;font-size:21px!important;letter-spacing:-.01em}
body.vv-b .pf-how li::before{background:transparent!important;color:var(--vb-ink)!important;box-shadow:inset 0 0 0 1px rgba(36,48,79,.35);font-weight:500!important;font-size:16px}
body.vv-b .pf-desk{border-radius:8px!important;font-weight:500!important}
/* round 2: tighter rhythm, a toned tear-off stub, no ghost text in the empty stamp */
body.vv-b .pf-ticket{padding-top:26px!important}
body.vv-b .pf-logo{margin:0 0 22px!important}
body.vv-b .pf-ticket h1{font-size:29px!important;margin-bottom:10px!important}
body.vv-b .pf-ticket > p{text-wrap:pretty}
body.vv-b .pf-ticket .pf-form{gap:12px!important;margin-top:22px!important}
body.vv-b .pf-ticket .pf-form label{gap:6px!important}
body.vv-b .pf-ticket input{min-height:48px!important}
body.vv-b .pf-ticket .pf-go{min-height:52px!important;margin-top:6px!important}
body.vv-b .pf-stub{margin-top:24px!important;padding:20px 26px 22px!important;border-radius:0 0 5px 5px;
  background:radial-gradient(circle,rgba(36,48,79,.30) 1px,transparent 1.4px) 3px 0/7px 3px repeat-x,#F5F1E6!important}
body.vv-b .pf-code{letter-spacing:.26em!important}
body.vv-b .pf-new .pf-okslot{color:transparent!important;font-size:0!important}
/* round 3: even text edge, code placeholder on the code's line, a smaller stamp */
body.vv-b .pf-ticket > p{max-width:none!important;text-wrap:wrap!important}
body.vv-b .pf-new .pf-stub .pf-code:empty::before{background-position:left center!important}
body.vv-b .pf-ok{padding:7px 11px!important;gap:5px!important;letter-spacing:.14em!important}
body.vv-b .pf-new .pf-okslot{width:96px!important;height:28px!important}
/* the laptop QR card: the line in navy on the cream stub */
body.vv-b .pf-qrstub p,body.vv-b .pf-stub p{color:#24304F!important}
/* judge r28: the linked-phone card with the same space below as above */
body.vv-b .pf-linked .pf-ticket{padding-bottom:28px!important}
/* order 5554: the questions about the child, one per step: a thin progress line, large calm tap choices, back */
body.vv-b .pf-prog{height:3px;border-radius:2px;background:rgba(36,48,79,.12);overflow:hidden;margin:2px 0 6px}
body.vv-b .pf-prog i{display:block;height:100%;width:25%;background:#24304F;transition:width .25s ease}
body.vv-b .pf-q{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:14px}
body.vv-b .pf-q[hidden]{display:none}
body.vv-b .pf-q legend{padding:0;margin:0 0 14px;font:500 19px/1.3 Ubuntu,system-ui,sans-serif;color:#24304F}
body.vv-b .pf-opts{display:grid;gap:10px}
body.vv-b .pf-opts.c3{grid-template-columns:repeat(3,1fr)}body.vv-b .pf-opts.c2{grid-template-columns:repeat(2,1fr)}body.vv-b .pf-opts.c1{grid-template-columns:1fr}
body.vv-b .pf-opts button{min-height:54px;padding:12px 14px;border:1px solid rgba(36,48,79,.22);border-radius:10px;background:#fff;color:#24304F;font:500 17px/1.25 Ubuntu,system-ui,sans-serif;cursor:pointer;text-align:center}
body.vv-b .pf-opts.c1 button{text-align:left;padding-left:18px}
body.vv-b .pf-opts button[hidden]{display:none}
body.vv-b .pf-opts button.on{background:#24304F;color:#FCFAF4;border-color:#24304F}
body.vv-b .pf-back{align-self:flex-start;margin:0 0 4px;padding:6px 0;border:0;background:none;color:#24304F;font:500 15px/1.2 Ubuntu,system-ui,sans-serif;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(36,48,79,.35);cursor:pointer}
body.vv-b .pf-back[hidden]{display:none}
/* orders 5556/5557: the optional steps: a date pick with Verder, and a clear skip */
body.vv-b .pf-date{display:grid;grid-template-columns:1fr auto;gap:10px}
body.vv-b .pf-date input{min-height:54px;padding:0 14px;border:1px solid rgba(36,48,79,.22);border-radius:10px;background:#fff;color:#24304F;font:500 17px Ubuntu,system-ui,sans-serif;-webkit-appearance:none;appearance:none;min-width:0}
body.vv-b .pf-next{min-height:54px;padding:0 20px;border:0;border-radius:10px;background:#24304F;color:#FCFAF4;font:500 17px Ubuntu,system-ui,sans-serif;cursor:pointer}
body.vv-b .pf-next:disabled{opacity:.35;cursor:default}
body.vv-b .pf-skip{align-self:flex-start;margin-top:2px;padding:12px 18px;border:1px solid rgba(36,48,79,.22);border-radius:10px;background:transparent;color:#24304F;font:500 16px/1.2 Ubuntu,system-ui,sans-serif;cursor:pointer}
/* the booking page top bar solid, so scrolled text never shows through it */
body.vv-b .bo-top{background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* judge r30: the date step like the other steps: Verder waits as a quiet outline and turns navy once a date is picked */
body.vv-b .pf-next:disabled{opacity:1!important;background:transparent!important;color:rgba(36,48,79,.45)!important;box-shadow:inset 0 0 0 1px rgba(36,48,79,.22)}
/* judge r31: an empty date field shows "Kies een datum", never today's date in grey; the talk button keeps its border at every step */
body.vv-b .pf-date{position:relative}
body.vv-b .pf-ph{position:absolute;left:15px;top:0;height:54px;display:flex;align-items:center;color:rgba(36,48,79,.5);font:500 17px Ubuntu,system-ui,sans-serif;pointer-events:none}
body.vv-b .pf-date input:invalid::-webkit-datetime-edit{color:transparent}
body.vv-b .pf-date:has(input:valid) .pf-ph{display:none}
body.vv-b .pf-talk{transition:none!important}
body.vv-b .pf-date input:invalid{color:transparent!important;-webkit-text-fill-color:transparent}
/* judge r32: no orphan word at the end of the voucher sentence */
body.vv-b .pf-ticket p{text-wrap:pretty}