/* De afrekenpagina (templates/tb-afrekenen.php, templates/widgets/cart-summary.php).
   Naar afrekenen.html en afrekenen-instructie.md, 2026-09-12. Alles hangt aan de body-klasse
   `tb-afrekenen-pagina`, zodat Voxels afrekenwidget elders (als die er ooit is) niets verandert. */

.tb-afrekenen-pagina{background:var(--tb-ground,#FDF8F4);}
.tb-afrekenen-pagina .tb-afr-wrap{max-width:1140px;margin:0 auto;padding:0 20px;}
.tb-afr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

/* ---- kop: geen menu, geen uitgang (§7.4) ---- */
.tb-afr-kop{background:#fff;border-bottom:1px solid var(--tb-line,rgba(20,26,51,.09));}
.tb-afr-kop .tb-afr-wrap{display:flex;align-items:center;gap:18px;min-height:64px;}
.tb-afr-merk{display:flex;align-items:center;}
.tb-afr-merk img{height:28px;width:auto;display:block;}
.tb-afr-terug{display:flex;align-items:center;gap:7px;min-height:44px;font-size:14px;color:var(--tb-muted,#6B7089);text-decoration:none;}
.tb-afr-terug:hover{color:var(--tb-ink,#141A33);}
.tb-afr-slot{margin:0 0 0 auto;display:flex;align-items:center;gap:7px;font:600 12.5px/1 var(--tb-sans,sans-serif);color:#0B6B4C;}

/* ---- band met stappen ---- */
.tb-afr-band{background:linear-gradient(104deg,#E7F5F0 0%,#F4F7F2 26%,#FDF8F4 52%,#FDF1EC 76%,#FCE9E4 100%);padding:26px 0 24px;}
.tb-afr-band .tb-afr-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.tb-afr-band h1{margin:0;font:600 32px/1.1 var(--tb-serif,serif);letter-spacing:-.022em;color:var(--tb-ink,#141A33);}
.tb-afr-onder{margin:7px 0 0;font-size:14.5px;color:var(--tb-muted,#6B7089);}
.tb-afr-stappen{display:flex;align-items:center;gap:10px;margin:0;padding:0;list-style:none;font:600 13px/1 var(--tb-sans,sans-serif);color:var(--tb-muted,#6B7089);}
.tb-afr-stappen li{display:flex;align-items:center;gap:8px;}
.tb-afr-stappen li[aria-current="step"]{color:var(--tb-ink,#141A33);}
.tb-afr-stappen i{width:22px;height:22px;border-radius:999px;display:grid;place-items:center;font-style:normal;font-size:11.5px;background:#fff;border:1px solid rgba(20,26,51,.16);color:var(--tb-muted,#6B7089);}
.tb-afr-stappen li[aria-current="step"] i{background:var(--tb-action,#BC5410);border-color:var(--tb-action,#BC5410);color:#fff;}
.tb-afr-streep{width:22px;height:1px;background:rgba(20,26,51,.16);}

/* ---- raamwerk: de vorm links, de bestelling rechts (§1) ----
   Sticky vraagt drie dingen: align-self:start, nergens overflow op een voorouder, en een
   zijkolom die korter is dan het venster. */
.tb-afr-raam{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:28px;max-width:1140px;margin:0 auto;padding:26px 20px 72px;align-items:start;}
.tb-afrekenen-pagina .ts-checkout.tb-afr-app{max-width:none;padding:0;margin:0;background:none;box-shadow:none;border:0;overflow:visible;}
.tb-afrekenen-pagina .elementor{overflow:visible;}

.tb-afr-kaart{background:#fff;border-radius:var(--tb-r-card,16px);box-shadow:0 1px 3px rgba(20,26,51,.05),0 20px 44px -34px rgba(20,26,51,.42);padding:22px 24px;}
.tb-afr-kaart + .tb-afr-kaart,.tb-afr-vorm > * + .tb-afr-kaart{margin-top:18px;}
.tb-afr-kaartkop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:0 0 4px;}
.tb-afr-kaart h2{margin:0;font:600 19px/1.3 var(--tb-serif,serif);letter-spacing:-.015em;color:var(--tb-ink,#141A33);}
.tb-afr-kaartkop a{font-size:13.5px;font-weight:600;white-space:nowrap;color:var(--tb-action,#BC5410);}
.tb-afr-hint{margin:2px 0 16px;font-size:13.5px;color:var(--tb-muted,#6B7089);}

/* velden */
.tb-afr-velden{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
.tb-afr-veld{display:flex;flex-direction:column;gap:6px;min-width:0;}
.tb-afr-veld--breed{grid-column:1 / -1;}
.tb-afr-veld label{font-size:13.5px;font-weight:600;color:var(--tb-ink,#141A33);}
.tb-afr-veld input,.tb-afr-veld textarea{
  font:400 15px/1.5 var(--tb-sans,sans-serif);color:var(--tb-ink,#141A33);background:#fff;
  border:1px solid rgba(20,26,51,.2);border-radius:10px;padding:0 14px;height:48px;width:100%;box-shadow:none;
}
.tb-afr-veld textarea{height:auto;min-height:92px;padding:12px 14px;resize:vertical;}
.tb-afr-veld input::placeholder,.tb-afr-veld textarea::placeholder{color:#6B7089;}
.tb-afr-veld input:focus,.tb-afr-veld textarea:focus{outline:2px solid var(--tb-action,#BC5410);outline-offset:1px;border-color:var(--tb-action,#BC5410);}
.tb-afr-uitleg{margin:0;font-size:12.5px;color:var(--tb-muted,#6B7089);}
.tb-afr-fout{display:flex;align-items:center;gap:6px;margin:0;font-size:12.5px;font-weight:600;color:#9B2F2A;}
.tb-afr-fout[hidden]{display:none;}
.tb-afr-fout--vink{margin:10px 0 0 36px;}
.tb-afr-veld.is-mis input,.tb-afr-veld.is-mis textarea{border-color:#9B2F2A;background:#FBEBEA;}
.tb-afr-teller{margin-left:auto;font-size:12px;color:var(--tb-muted,#6B7089);font-variant-numeric:tabular-nums;}
.tb-afr-codeknop{min-height:44px;padding:0 16px;border-radius:10px;border:1px solid rgba(20,26,51,.2);background:#fff;color:var(--tb-ink,#141A33);font:600 14px/1 var(--tb-sans,sans-serif);cursor:pointer;}
.tb-afr-codeknop:disabled{color:var(--tb-muted,#6B7089);cursor:not-allowed;}

/* vinkjes: vakje 24 px, klikgebied het hele label (§7.3) */
.tb-afr-vink{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14px;line-height:1.5;color:var(--tb-body,#3C4157);}
.tb-afr-vink input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:24px;height:24px;margin:0;border:1px solid rgba(20,26,51,.24);border-radius:7px;background:#fff;cursor:pointer;position:relative;}
.tb-afr-vink input:checked{background:var(--tb-action,#BC5410);border-color:var(--tb-action,#BC5410);}
.tb-afr-vink input:checked::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);}
.tb-afr-vink input:focus-visible{outline:2px solid var(--tb-action,#BC5410);outline-offset:2px;}
.tb-afr-vink.is-mis input{border-color:#9B2F2A;background:#FBEBEA;}
.tb-afr-vink small{display:block;font-size:12.5px;color:var(--tb-muted,#6B7089);}
.tb-afr-vink a{color:var(--tb-action,#BC5410);}
.tb-afr-privacy{margin:12px 0 0 36px;font-size:12.5px;color:var(--tb-muted,#6B7089);}
.tb-afr-privacy a{color:var(--tb-action,#BC5410);}

/* ophalen (§6) */
.tb-afr-ophaal{display:flex;gap:16px;align-items:flex-start;background:#FAF6F2;border:1px solid var(--tb-line,rgba(20,26,51,.09));border-radius:12px;padding:14px 16px;}
.tb-afr-datum{flex:0 0 auto;width:62px;text-align:center;background:#fff;border:1px solid rgba(20,26,51,.16);border-radius:10px;padding:7px 0;}
.tb-afr-datum b{display:block;font:600 24px/1 var(--tb-serif,serif);color:var(--tb-ink,#141A33);}
.tb-afr-datum span{display:block;font:700 10.5px/1 var(--tb-sans,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--tb-action,#BC5410);margin-top:4px;}
.tb-afr-ophaal h3{margin:0 0 3px;font:600 15.5px/1.3 var(--tb-sans,sans-serif);color:var(--tb-ink,#141A33);}
.tb-afr-ophaal p{margin:0;font-size:13.5px;color:var(--tb-muted,#6B7089);}
.tb-afr-bakker{display:flex;align-items:center;gap:11px;margin-top:14px;padding-top:14px;border-top:1px solid var(--tb-line,rgba(20,26,51,.09));}
.tb-afr-bakker p{margin:0;}
.tb-afr-avatar{width:38px;height:38px;border-radius:999px;flex:0 0 auto;overflow:hidden;background:#EFEAE4;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(20,26,51,.06);}
.tb-afr-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.tb-afr-avatar svg{width:58%;height:58%;fill:var(--tb-avatar-ink);}
.tb-afr-bakker__naam{font-size:14px;font-weight:600;color:var(--tb-ink,#141A33);}
.tb-afr-bakker__plaats{font-size:12.5px;color:var(--tb-muted,#6B7089);}
.tb-afr-bakker a{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--tb-action,#BC5410);}

/* betaalknop (§3) */
.tb-afr-betaal{width:100%;min-height:56px;border:0;border-radius:12px;background:var(--tb-action,#BC5410);color:#fff;cursor:pointer;font:700 16.5px/1 var(--tb-sans,sans-serif);display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;text-decoration:none;}
.tb-afr-betaal:hover{background:#A8490D;}
.tb-afr-betaal:disabled,.tb-afr-betaal.is-bezig{opacity:.75;cursor:progress;}
.tb-afr-merken{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:12px 0 0;padding:0;list-style:none;}
.tb-afr-merken li{display:flex;align-items:center;height:28px;padding:0 9px;border:1px solid var(--tb-line,rgba(20,26,51,.09));border-radius:7px;background:#fff;font:600 11.5px/1 var(--tb-sans,sans-serif);color:#555A6E;}
.tb-afr-veilig{margin:10px 0 0;text-align:center;font-size:12.5px;color:var(--tb-muted,#6B7089);}

/* ---- de bestelling rechts: plakt mee ---- */
.tb-afr-zij{position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);overflow-y:auto;overscroll-behavior:contain;}
.tb-afr-samen{background:#fff;border-radius:var(--tb-r-card,16px);box-shadow:0 1px 3px rgba(20,26,51,.05),0 20px 44px -34px rgba(20,26,51,.42);padding:20px 22px;}
.tb-afr-samen h2{margin:0 0 14px;font:600 17px/1.3 var(--tb-serif,serif);letter-spacing:-.015em;color:var(--tb-ink,#141A33);}
.tb-afr-details summary{display:none;}
.tb-afr-regels{list-style:none;margin:0;padding:0;display:grid;gap:14px;}
.tb-afr-regel{display:flex;gap:13px;align-items:flex-start;}
/* een ding is vierkant, radius 10; een mens of bakkerij is rond (§5) */
.tb-afr-regel__thumb{width:64px;height:64px;border-radius:10px;flex:0 0 auto;overflow:hidden;background:#EFEAE4;box-shadow:inset 0 0 0 1px rgba(20,26,51,.06);display:flex;align-items:center;justify-content:center;}
.tb-afr-regel__thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:0;}
.tb-afr-regel__leeg{color:var(--tb-avatar-ink);width:34px;height:34px;}
.tb-afr-regel__leeg svg{width:100%;height:100%;}
.tb-afr-regel__tekst{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;}
.tb-afr-regel__naam{font-size:14.5px;font-weight:600;line-height:1.35;color:var(--tb-ink,#141A33);text-decoration:none;}
.tb-afr-regel__naam:hover{text-decoration:underline;}
.tb-afr-regel__meta{font-size:12.5px;color:var(--tb-muted,#6B7089);margin-top:3px;}
.tb-afr-regel__prijs{margin-left:auto;font:700 15px/1 var(--tb-sans,sans-serif);color:var(--tb-ink,#141A33);font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:2px;}
.tb-afr-regel__acties{display:flex;gap:10px;align-items:center;margin-top:6px;}
.tb-afr-knoplink{background:none;border:0;padding:0;min-height:34px;font:600 12.5px/1 var(--tb-sans,sans-serif);color:var(--tb-action,#BC5410);cursor:pointer;text-decoration:underline;}
.tb-afr-knoplink--stil{color:var(--tb-muted,#6B7089);}
.tb-afr-aantal{width:34px;height:34px;border-radius:8px;border:1px solid rgba(20,26,51,.16);background:#fff;color:var(--tb-ink,#141A33);font:600 16px/1 var(--tb-sans,sans-serif);cursor:pointer;}
.tb-afr-aantal:disabled{opacity:.45;cursor:not-allowed;}
.tb-afr-som{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--tb-line,rgba(20,26,51,.09));font-size:14px;}
.tb-afr-som div{display:flex;justify-content:space-between;gap:14px;padding:4px 0;color:var(--tb-muted,#6B7089);}
.tb-afr-som dt{margin:0;}
.tb-afr-som dd{margin:0;font-weight:500;color:var(--tb-body,#3C4157);font-variant-numeric:tabular-nums;}
.tb-afr-totaal{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--tb-line,rgba(20,26,51,.09));}
.tb-afr-totaal span{font:600 15px/1 var(--tb-sans,sans-serif);color:var(--tb-ink,#141A33);}
.tb-afr-totaal b{font:600 26px/1 var(--tb-serif,serif);letter-spacing:-.02em;color:var(--tb-ink,#141A33);font-variant-numeric:tabular-nums;}
.tb-afr-geenkosten{margin:10px 0 0;font-size:12.5px;color:var(--tb-muted,#6B7089);}

/* wat er daarna gebeurt: uitleg, geen disclaimer (§4) */
.tb-afr-daarna{background:#E4F2EA;border:1px solid rgba(14,122,87,.26);border-radius:var(--tb-r-card,16px);padding:18px 22px;margin-top:18px;}
.tb-afr-daarna h2{margin:0 0 10px;font:600 16px/1.3 var(--tb-sans,sans-serif);color:#0B5B42;}
.tb-afr-daarna ol{margin:0;padding:0;list-style:none;counter-reset:tbafr;}
.tb-afr-daarna li{display:flex;gap:11px;padding:6px 0;font-size:13.5px;color:#1F5241;counter-increment:tbafr;}
.tb-afr-daarna li::before{content:counter(tbafr);flex:0 0 auto;width:21px;height:21px;border-radius:999px;background:#fff;border:1px solid rgba(14,122,87,.26);color:#0B6B4C;font:700 11px/21px var(--tb-sans,sans-serif);text-align:center;}
.tb-afr-daarna p{margin:10px 0 0;font-size:12.5px;color:#2F5F4F;}

/* leeg */
.tb-afr-leeg{max-width:560px;margin:40px auto;padding:32px 24px;text-align:center;background:#fff;border-radius:var(--tb-r-card,16px);}
.tb-afr-leeg h2{margin:0 0 8px;font:600 22px/1.3 var(--tb-serif,serif);color:var(--tb-ink,#141A33);}
.tb-afr-leeg p{margin:0 0 18px;color:var(--tb-muted,#6B7089);}

/* ---- voettekst van één regel (§7.4) ---- */
.tb-afr-voet{border-top:1px solid var(--tb-line,rgba(20,26,51,.09));background:#FAF6F2;}
.tb-afr-voet .tb-afr-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;font-size:13px;color:var(--tb-muted,#6B7089);}
.tb-afr-voet a{color:var(--tb-muted,#6B7089);text-decoration:none;}
.tb-afr-voet a:hover{color:var(--tb-ink,#141A33);text-decoration:underline;}

/* Voxels afrekenscherm voor verzonden producten (starterspakket) blijft binnen de vorm. */
.tb-afr-vorm > .checkout-section{margin-top:18px;background:#fff;border-radius:var(--tb-r-card,16px);padding:22px 24px;}

/* ---- mobiel ---- */
.tb-afr-mbalk{display:none;}
@media (max-width:900px){
  .tb-afr-raam{grid-template-columns:1fr;gap:16px;padding:16px 16px 120px;}
  /* De kaarten uit de zijkolom vallen los in het raster: de bestelling boven de vorm, de uitleg eronder. */
  .tb-afr-zij{display:contents;}
  .tb-afr-samen{order:-1;}
  .tb-afr-vorm{order:1;}
  .tb-afr-daarna{order:3;margin-top:0;}
  .tb-afr-velden{grid-template-columns:1fr;}
  .tb-afr-band{padding:20px 0 18px;}
  .tb-afr-band h1{font-size:26px;}
  .tb-afr-stappen{width:100%;}
  .tb-afr-vorm .tb-afr-betaal,.tb-afr-merken,.tb-afr-veilig{display:none;}
  .tb-afr-terug span,.tb-afr-slot span{display:none;}
  .tb-afr-samen > h2{display:none;}
  .tb-afr-details summary{list-style:none;display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font:600 14.5px/1 var(--tb-sans,sans-serif);color:var(--tb-ink,#141A33);}
  .tb-afr-details summary::-webkit-details-marker{display:none;}
  .tb-afr-details summary::after{content:"";width:9px;height:9px;border:solid var(--tb-muted,#6B7089);border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 0 0 2px;}
  .tb-afr-details[open] summary::after{transform:rotate(-135deg);margin-top:2px;}
  .tb-afr-summary-bedrag{margin-left:auto;font-size:15px;}
  .tb-afr-details[open] summary{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--tb-line,rgba(20,26,51,.09));}
  .tb-afr-kaart{padding:18px 16px;}
  .tb-afr-mbalk{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;align-items:center;gap:14px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--tb-line,rgba(20,26,51,.09));box-shadow:0 -6px 24px -18px rgba(20,26,51,.5);}
  .tb-afr-mbalk p{margin:0;}
  .tb-afr-mbalk__lab{font-size:11.5px;color:var(--tb-muted,#6B7089);}
  .tb-afr-mbalk__bedrag{font:600 20px/1 var(--tb-serif,serif);color:var(--tb-ink,#141A33);font-variant-numeric:tabular-nums;}
  .tb-afr-mbalk button{margin-left:auto;min-height:52px;padding:0 22px;border:0;border-radius:12px;background:var(--tb-action,#BC5410);color:#fff;font:700 16px/1 var(--tb-sans,sans-serif);cursor:pointer;}
  .tb-afr-voet .tb-afr-wrap{padding-bottom:96px;}
}

/* ---- na het betalen: het nummer bevestigen voor de sms (inc/tb-bestelling.php, nummer_bevestigen) ---- */
.tb-nummer{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:#FFF6EC;border:1px solid rgba(188,84,16,.22);}
.tb-nummer p{margin:0 0 8px;}
.tb-nummer-kop{font-weight:600;color:var(--tb-ink,#141A33);}
.tb-nummer-acties[hidden],.tb-nummer-code[hidden]{display:none;}
.tb-nummer-code{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 8px;}
.tb-nummer-code label{flex:1 0 100%;font-size:13.5px;font-weight:600;color:var(--tb-ink,#141A33);}
.tb-nummer-code input{height:44px;width:9em;padding:0 12px;border:1px solid rgba(20,26,51,.2);border-radius:10px;font:500 16px/1 var(--tb-sans,sans-serif);letter-spacing:.12em;color:var(--tb-ink,#141A33);background:#fff;}
.tb-nummer-code input[aria-invalid="true"]{border-color:#9B2F2A;background:#FBEBEA;}
.tb-nummer-melding{font-size:13px;color:var(--tb-muted,#6B7089);}
.tb-nummer-melding:empty{display:none;}
.tb-nummer-melding.is-fout{color:#9B2F2A;font-weight:600;}
.tb-nummer.is-klaar{background:#E4F2EA;border-color:rgba(14,122,87,.26);}
.tb-nummer.is-klaar .tb-nummer-melding{color:#0B5B42;font-weight:600;}