/* pictostickers.nl kassa (afrekenen, bedankt, testbetaling). Bouwt op stijl.css:
   tokens --bg/--vlak/--ink/--mut/--zacht/--focus, fonts --kop/--tekst/--mono, en de
   klassen .wrap .kruimel .mand-kop .mand-sub .mand-som .knop .formulier .preview .som-*. */
:root{--rood:#D2122E;--groen:#1E8A55}
@media (prefers-color-scheme:dark){:root{--rood:#ff6b7d;--groen:#4cc488}}

.kassa{padding-bottom:104px}
.kassa .kruimel+.mand-kop{padding-top:0}
.ka-kop{margin-bottom:36px}
.p-kassa .mand-kop:first-child{padding-top:48px}

/* testmodus: zwarte balk, niet te missen */
.ka-test{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;align-items:baseline;margin:0 0 36px;padding:16px 20px;background:var(--ink);color:var(--bg)}
.ka-test b{font:800 15px/1.2 var(--kop);text-transform:uppercase;letter-spacing:.06em}
.ka-test p{margin:0;font-size:15px}
.ka-dicht{margin:0 0 36px}

/* ---------------------------------------------------------------- afrekenen */
.ka-vol{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.ka-form{grid-column:1/8;margin:0;gap:0}
.ka-form fieldset{border:0;margin:0 0 40px;padding:0;display:grid;gap:16px;min-width:0}
.ka-form legend{float:left;width:100%;margin:0 0 4px;padding:0 0 12px;border-bottom:2px solid var(--ink);font:800 26px/1.1 var(--kop90)}
.ka-form legend+*{clear:both}
.ka-form label small{font:400 13px/1.4 var(--tekst);color:var(--mut)}
.ka-opt{font:500 13px/1 var(--mono);color:var(--mut);margin-left:4px}
.ka-som .som-klein{text-wrap:balance}
.ka-zakelijk{align-items:end}
.ka-zakelijk .ka-opt{margin-left:0}
.ka-hint{margin:0;font-size:14px;color:var(--mut);min-width:0;overflow-wrap:anywhere}
.ka-hint a{color:var(--ink);text-underline-offset:3px}
.ka-form textarea{resize:vertical;min-height:62px}
.ka-form input:focus-visible,.ka-form textarea:focus-visible{outline-offset:0}
.ka-form [aria-invalid="true"]{border-color:var(--rood)}
.ka-vf{font:600 14px/1.3 var(--tekst);color:var(--rood)}
.ka-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* betaalwijze als twee grote keuzevlakken */
.ka-keuze{grid-template-columns:22px minmax(0,1fr)!important;align-items:start;gap:14px!important;padding:18px 18px 18px 16px;border:2px solid var(--zacht);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.ka-keuze:hover{border-color:var(--mut)}
.ka-keuze:has(input:checked){border-color:var(--ink);box-shadow:inset 6px 0 0 var(--ink)}
.ka-keuze input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.ka-keuze-t{display:grid;gap:4px;min-width:0;overflow-wrap:anywhere}
.ka-keuze-t b{font:700 18px/1.2 var(--kop)}
.ka-keuze-t span{font:400 15px/1.4 var(--tekst);color:var(--mut)}

.ka-akkoord{grid-template-columns:22px minmax(0,1fr)!important;align-items:start;gap:12px!important;margin:0 0 22px;font:400 16px/1.45 var(--tekst)!important}
.ka-akkoord input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.ka-akkoord a{text-underline-offset:3px}
.ka-akkoord .ka-vf{grid-column:2}
.ka-fout{margin:0 0 18px;padding:14px 18px;border:2px solid var(--rood);color:var(--ink);font-weight:600;box-shadow:inset 6px 0 0 var(--rood)}
.ka-fout:focus{outline:none}
.ka-form .knop-vol{height:64px;font-size:19px}
/* vertrouwen bij de knop: betaaldienst en de betaalwijzen die de kassa aanbiedt */
.ka-veilig{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:16px 0 0}
.ka-veilig-t{display:inline-flex;align-items:center;gap:8px;font:700 15px/1.2 var(--kop)}
.ka-veilig svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.ka-merken{display:inline-flex;flex-wrap:wrap;gap:8px}
.ka-merk{padding:5px 9px;border:2px solid var(--ink);font:700 13px/1 var(--kop);white-space:nowrap}
.ka-veilig+.som-klein{margin-top:12px}
.knop[disabled]{opacity:.55;cursor:wait}
.knop-rand{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.knop-rand:hover{background:var(--vlak)}

/* overzicht rechts */
.ka-som{grid-column:9/13;margin-top:0}
.ka-som-kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;margin-bottom:4px;border-bottom:2px solid var(--ink)}
.ka-som-kop h2{margin:0;font:800 22px/1.1 var(--kop)}
.ka-som-kop a{position:relative;font:600 14px/1 var(--kop);text-underline-offset:3px}
/* klein zichtbaar, maar een aanraakdoel van 44 px hoog */
.ka-som-kop a::after{content:"";position:absolute;left:-10px;right:-10px;top:50%;height:44px;transform:translateY(-50%)}
.ka-regels{list-style:none;margin:0 0 18px;padding:0}
.ka-r{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--zacht)}
.ka-r-beeld{display:grid;place-items:center;aspect-ratio:1/1;background:var(--vlak);padding:12%}
.ka-r-beeld .stk{width:100%;height:100%;object-fit:contain}
.ka-r-info{display:grid;gap:3px;min-width:0}
.ka-r-info b{font:700 15px/1.2 var(--kop);overflow-wrap:anywhere}
.ka-r-info span{font:500 12px/1.4 var(--mono);color:var(--mut)}
.ka-r-info i{font-style:normal;color:var(--ink);background:var(--vlak);padding:0 5px}
.ka-r-tot{font:700 15px/1 var(--tekst);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------------------------------------------------------- bedankt */
.bd-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.bd-tekst{grid-column:1/8}
.bd-lead{margin:0 0 14px;font:500 22px/1.4 var(--tekst);max-width:36ch}
.bd-uitleg{margin:0 0 26px;font-size:17px;color:var(--mut);max-width:52ch}
.bd-stappen{list-style:none;margin:30px 0 34px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--ink)}
.bd-stappen li{display:grid;gap:6px;align-content:start;padding:16px 16px 18px;min-height:96px}
.bd-stappen li+li{border-left:2px solid var(--ink)}
.bd-stappen b{display:flex;align-items:center;gap:10px;font:800 18px/1.1 var(--kop)}
.bd-stappen b::before{content:"";width:14px;height:14px;flex:none;box-shadow:inset 0 0 0 2px var(--ink)}
.bd-stappen span{font:500 12px/1.4 var(--mono);color:var(--mut)}
.bd-stappen .klaar{background:var(--ink);color:var(--bg)}
.bd-stappen .klaar b::before{background:var(--groen);box-shadow:none}
.bd-stappen .klaar span{color:color-mix(in srgb,var(--bg) 72%,transparent)}
.bd-acties{margin:0}
#bd-som{grid-column:9/13}

/* ---------------------------------------------------------------- testbetaling */
.tb{max-width:760px}
.tb-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}

/* ---------------------------------------------------------------- tablet en mobiel */
@media (max-width:1180px){
  .ka-form,.bd-tekst{grid-column:1/8}
  .ka-som,#bd-som{grid-column:8/13}
}
@media (max-width:900px){
  .kassa{padding-bottom:64px}
  .p-kassa .mand-kop:first-child{padding-top:30px}
  .ka-kop{margin-bottom:24px}
  .ka-test{grid-template-columns:minmax(0,1fr);padding:14px 16px;margin-bottom:24px}
  .ka-vol,.bd-in{grid-template-columns:minmax(0,1fr)}
  .ka-form,.ka-som,.bd-tekst,#bd-som{grid-column:1}
  .ka-som{order:-1;position:static;margin:0 0 36px;padding:20px}
  #bd-som{margin-top:12px;padding:20px}
  .ka-form legend{font-size:23px}
  .bd-lead{font-size:19px}
  .bd-stappen{grid-template-columns:minmax(0,1fr)}
  .bd-stappen li{min-height:0;padding:14px 16px}
  .bd-stappen li+li{border-left:0;border-top:2px solid var(--ink)}
  .tb-knoppen .knop{width:100%;justify-content:center}
}
.kassa>.ka-test:first-child{margin-top:48px}
@media (max-width:900px){
  .kassa>.ka-test:first-child{margin-top:24px}
  .bd-in .ka-som{order:0}
}
#bd-nr,#tb-nr{white-space:nowrap}
.bd .mand-kop h1{font-size:clamp(40px,7.6vw,112px)}
@media (max-width:900px){.bd .mand-kop h1{font-size:clamp(34px,10.4vw,80px)}}
/* 150% paginazoom op een smalle telefoon: regels onder elkaar in plaats van over elkaar */
@media (max-width:300px){.ka-r{grid-template-columns:40px minmax(0,1fr)}.ka-r-tot{grid-column:2}}