/* Honesty bar — bovenop gids.css: dezelfde kleuren, kaarten, chips en matglas. Onderin zweeft het mandje,
   op de plek van de tabbalk in de gids. Afrekenen gaat in een blad dat van onderen opkomt. */
.bar .pagina{padding-bottom:calc(112px + env(safe-area-inset-bottom))}
.bon-pagina .pagina{padding-bottom:32px}
.kop-terug{display:inline-flex; align-items:center; gap:6px; text-decoration:none}
/* De uitleg uit Ops mag regels hebben (de tekst uit WordPress was een opsomming) */
.bar .kop-intro{white-space:pre-line}
.kaart.let{background:var(--oker-zacht); border-color:transparent; box-shadow:none}
.kaart.let p{margin:0; color:var(--inkt)}
.bar-noot{margin:4px 4px 16px; color:var(--inkt-3); font-size:14.5px; text-align:center}

/* Producten: foto (als die er is), naam met omschrijving en prijs, en rechts de teller */
.producten{list-style:none; margin:0; padding:0}
.product{display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--lijn)}
.product:first-child{border-top:0; padding-top:0}
.product:last-child{padding-bottom:0}
/* Packshots op wit: heel laten zien, niet bijsnijden */
.product-foto{flex:none; width:56px; height:56px; border-radius:12px; object-fit:contain; background:var(--wit)}
/* Geen foto: een licht vakje met het icoon van de soort */
.product-leeg{display:grid; place-items:center; background:var(--veld); color:var(--inkt-3)}
.product-tekst{flex:1; min-width:0; display:flex; flex-direction:column}
.product h3{font:600 16.5px/1.3 var(--sans); letter-spacing:0; overflow-wrap:anywhere}
.product .meta{margin:1px 0 0; font-size:14px}
.product-prijs{margin-top:3px; font-weight:600; font-size:15px; color:var(--inkt-2); font-variant-numeric:tabular-nums}
.product.gekozen .product-prijs{color:var(--groen-tekst)}
.teller{flex:none; display:flex; align-items:center; gap:2px}
.teller-knop{width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--lijn-2); border-radius:50%; background:var(--wit); color:var(--inkt); cursor:pointer; touch-action:manipulation}
.teller-knop:hover{background:var(--veld)}
.teller-plus{border-color:var(--groen); background:var(--groen); color:var(--wit)}
.teller-plus:hover{background:var(--groen-hover)}
.teller-knop:active{transform:scale(.93)}
.teller-aantal{min-width:28px; text-align:center; font-weight:700; font-size:16px; font-variant-numeric:tabular-nums}

/* Het mandje: zwevend op matglas, zoals de tabbalk van de gids */
.mandje{position:fixed; left:12px; right:12px; bottom:max(10px, env(safe-area-inset-bottom)); z-index:10; display:flex; align-items:center; gap:12px; padding:8px 8px 8px 18px; border:1px solid var(--glas-rand); border-radius:28px; background:var(--glas); -webkit-backdrop-filter:var(--glas-blur); backdrop-filter:var(--glas-blur); box-shadow:0 0 0 1px rgba(19,23,20,.06), 0 8px 28px rgba(19,23,20,.14)}
.mandje-stand{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3}
.mandje-leeg{font-size:14.5px; color:var(--inkt-2)}
.mandje-aantal{font-size:15.5px}
.mandje-totaal{font-size:14.5px; color:var(--inkt-2); font-variant-numeric:tabular-nums}
.mandje-knop{flex:none}
.knop:disabled{opacity:.4; cursor:default}
.knop:disabled:hover{background:var(--groen)}
body.blad-open{overflow:hidden}
body.blad-open .mandje,body.blad-open .taal{visibility:hidden}

/* Afrekenen */
.blad{position:fixed; inset:0; z-index:20; display:flex; align-items:flex-end; justify-content:center; background:rgba(19,23,20,.34)}
.blad-paneel{width:100%; max-width:560px; max-height:calc(100% - 32px); overflow-y:auto; overscroll-behavior:contain; padding:0 18px max(18px, env(safe-area-inset-bottom)); background:var(--kaart); border-radius:var(--r) var(--r) 0 0; box-shadow:var(--schaduw-hoog)}
.blad-kop{position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 -18px; padding:14px 10px 8px 18px; background:var(--kaart)}
.blad-kop h2{font-size:23px}
.blad-sluit{width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:none; color:var(--inkt-2); cursor:pointer}
.blad-sluit:hover{background:var(--veld)}
.blad-regels{list-style:none; margin:0; padding:0}
.blad-regels li{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--lijn)}
.blad-regels li:first-child{border-top:0}
.blad-regels .naam{flex:1; min-width:0; font-weight:500; overflow-wrap:anywhere}
.blad-regels .bedrag{min-width:68px; text-align:right; font-variant-numeric:tabular-nums}
.blad-regels .teller-knop{width:34px; height:34px}
.blad-totaal{display:flex; justify-content:space-between; align-items:baseline; margin:0 0 16px; padding-top:12px; border-top:1px solid var(--lijn-2); font-weight:600}
.blad-totaal b{font:600 26px/1 var(--serif); font-variant-numeric:lining-nums tabular-nums}
.blad-form{display:flex; flex-direction:column; gap:6px; margin:0}
.blad-form label{font-weight:600}
.blad-form input{width:100%; min-height:54px; padding:0 16px; border:1px solid var(--lijn-2); border-radius:14px; background:var(--veld); color:var(--inkt); font:600 22px/1 var(--sans); letter-spacing:.08em}
.blad-form input:focus{outline:none; border-color:var(--groen-tekst); background:var(--wit)}
.blad-form input.ongeldig{border-color:var(--bordeaux); background:var(--bordeaux-zacht)}
.blad-form .klein{margin:0 0 6px}
.blad-fout{margin:0 0 6px; padding:10px 12px; border-radius:12px; background:var(--bordeaux-zacht); color:var(--bordeaux); font-size:14.5px}
.blad-betaal{width:100%; min-height:54px; margin-top:4px; font-size:17px}
.blad-veilig{margin:8px 0 0; text-align:center}
.draai{width:18px; height:18px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:draai .8s linear infinite}
@keyframes draai{to{transform:rotate(360deg)}}

/* Na het betalen: de uitkomst en het bonnetje */
.uitkomst{text-align:center; padding:4px 8px 20px}
.uitkomst-ico{display:grid; place-items:center; width:64px; height:64px; margin:0 auto 14px; border-radius:50%; background:var(--groen-zacht); color:var(--groen-tekst)}
.uitkomst-ico.fout{background:var(--bordeaux-zacht); color:var(--bordeaux)}
.wacht-ico{background:var(--veld-2)}
.wacht-ico::after{content:""; width:26px; height:26px; border:3px solid var(--lijn-2); border-top-color:var(--groen-tekst); border-radius:50%; animation:draai .9s linear infinite}
.uitkomst h1{font-size:32px; line-height:1.15; margin-bottom:8px}
.uitkomst p{color:var(--inkt-2)}
.bon .kaart-kop{margin-bottom:12px}
.bon .twee{margin-bottom:8px}
.bon-regels{list-style:none; margin:12px 0 0; padding:0}
.bon-regels li{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-top:1px solid var(--lijn)}
.bon-regels li:first-child{border-top:0}
.bon-regels em{font-style:normal; font-size:13px; color:var(--inkt-3); margin-left:4px}
.bon-regels b{font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.bon-totaal{margin:0; padding:10px 0 2px; border-top:1px solid var(--lijn-2)}
.bon-totaal div{display:flex; justify-content:space-between; gap:12px; padding:3px 0; font-size:14.5px; color:var(--inkt-2)}
.bon-totaal dd{margin:0; font-variant-numeric:tabular-nums; white-space:nowrap}
.bon-totaal .bon-eind{align-items:baseline; padding-top:10px; color:var(--inkt); font-size:16.5px; font-weight:600}
.bon-eind dd{font:600 24px/1.1 var(--serif); font-variant-numeric:lining-nums tabular-nums}
.bon-bedrijf{margin:14px 0 0; padding-top:12px; border-top:1px solid var(--lijn); font-size:13px; line-height:1.6; color:var(--inkt-3)}
.bon-knoppen{justify-content:center; margin:4px 0 8px}

@media (min-width:720px){
  .mandje{left:50%; right:auto; width:540px; bottom:16px; transform:translateX(-50%)}
  .blad{align-items:center}
  .blad-paneel{border-radius:var(--r); max-height:min(720px, calc(100% - 48px))}
}
@media (prefers-reduced-motion:reduce){.draai,.wacht-ico::after{animation-duration:2.4s}}

/* Bewaren als pdf of printen: alleen de uitkomst en het bonnetje */
@media print{
  body{background:#fff}
  .taal,.kop,.bon-knoppen,.bar-noot,.voet,.uitkomst-ico{display:none !important}
  .uitkomst{padding:0 0 8px}
  .uitkomst h1{font-size:22px}
  .kaart{box-shadow:none; border-color:#ccc; break-inside:avoid}
}