/*
 * stijl.css — V7-bestelapp.
 *
 * HET IDEE: dit ís een menukaart, dus het ziet eruit als een menukaart.
 * De eerste opzet zette elk gerecht in een eigen wit doosje met een schaduwtje. Dat is de vorm die
 * elke webshop heeft, het kost enorm veel hoogte (zes regels op een telefoon) en het zegt niets
 * over waar je bent. Een gedrukte kaart doet het al honderd jaar anders: een lijst, naam links,
 * prijs rechts, stippellijn ertussen. Dat is compacter (veertien regels), meteen herkenbaar, en het
 * maakt de prijs -- waar je op besluit -- het rustpunt van elke regel.
 *
 * Daar komt één ding uit voort dat deze app zijn eigen maakt: DE PRIJS IS DE KNOP. Op een kaart
 * kijk je naar de prijs en dan besluit je. Hier tik je er ook op. Geen los plusje ernaast dat niets
 * betekent.
 *
 * De rest is bewust stil gehouden: papierwit als grond, haarlijnen als structuur, en één
 * accentkleur die de zaak zelf mag zetten (kassa.menuappCSS -> --accent).
 */

:root {
	/* De huisstijl van Broodbode, zoals op broodbode.nl: crème als grond, teal als hoofdkleur,
	   amber voor de kleine accenten en brick-rood voor wat misgaat. Niets hiervan is verzonnen --
	   het is hun eigen palet, alleen consequent doorgevoerd. */
	--papier:   #eef0e2;   /* crème, iets lichter dan het merk-crème zodat kaarten eruit springen */
	--grond:    #e7ead6;   /* het merk-crème: balken, prijzen, bon */
	--bon:      #e2e6d0;   /* de bon zelf, een tint dieper */
	--inkt:     #241f20;
	--dof:      #5f6455;
	--zacht:    #8d9280;
	--lijn:     #d2d7bd;
	--lijnDun:  #dee2cb;
	--accent:   #2b554e;   /* teal: alles wat een handeling is */
	--accentDonker: #1d3b36;
	--amber:    #c9821f;
	--amberZacht: #f7e6c8;
	--goed:     #2f7d4f;
	--fout:     #922726;   /* brick */

	--rond:     12px;
	--rondKlein: 8px;

	--kop: 'FrankRuhl', Georgia, 'Times New Roman', serif;
	--tekst: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--bonletter: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}


/* De twee letters van het merk, van onze eigen server. Frank Ruhl Libre (serif) voor de namen en
   koppen, Karla voor de lopende tekst -- precies zoals op broodbode.nl. Samen 68 kB; dat is de
   prijs van een eigen gezicht, en ze laden allebei variabel dus er is maar één bestand per letter. */
@font-face {
	font-family: 'FrankRuhl';
	src: url('frankruhl.woff2') format('woff2-variations');
	font-weight: 300 900; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Karla';
	src: url('karla.woff2') format('woff2-variations');
	font-weight: 200 800; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--papier); color: var(--inkt);
	font: 15px/1.45 var(--tekst);
	font-variant-numeric: tabular-nums;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.overslaan { position: absolute; left: -9999px; background: var(--inkt); color: #fff; padding: 10px 16px; z-index: 100; }
.overslaan:focus { left: 0; top: 0; }

/* ============================== kop ==============================
   Scrollt gewoon weg. Alleen de categoriebalk blijft plakken; die heb je nodig, de naam van de
   zaak niet -- die weet je inmiddels wel. */
/* De kop staat in het teal van het merk en eindigt in de kartelrand uit hun eigen huisstijl
   (bb-kartel.svg). Diezelfde gescheurde lijn komt verderop terug bij de bon; dat is geen toeval
   maar precies waarom dit ontwerp bij Broodbode past. */
.zaak {
	background: var(--accent); color: var(--grond);
	padding: 20px 18px 16px; padding-top: calc(18px + env(safe-area-inset-top));
	position: relative; margin-bottom: 34px;
}
.zaak::after {
	/* De tanden moeten ONDER de kop uitsteken, op het crème -- binnen de kop zou teal op teal staan
	   en dan zie je er niets van. Vandaar bottom:-25px en de kop 25px hoger eindigen. */
	content: ''; position: absolute; left: 0; right: 0; bottom: -25px; height: 26px;
	background: url('bb-kartel.svg') repeat-x bottom center / auto 26px;
	transform: scaleY(-1);   /* de tanden moeten naar BENEDEN wijzen, aan de kop vast */
	pointer-events: none;
}
.zaak h1 { color: var(--grond); }
.zaak p { color: rgba(231,234,214,.72); }
.zaakLogo { border-radius: 0; background: none; }
.zaakBoven { color: var(--amberZacht) !important; }
.modus { border-top-color: rgba(231,234,214,.22); color: rgba(231,234,214,.8); }
.modus .modusNu { color: var(--grond); }
.modusWissel { color: var(--amberZacht); }
.zaakBinnen { display: flex; gap: 12px; align-items: center; max-width: 720px; margin: 0 auto; }
.zaakLogo { width: 38px; height: 48px; object-fit: contain; flex: none; }
.zaakTekst { min-width: 0; }
.zaak h1 {
	font-family: var(--kop); font-weight: 700;
	font-size: clamp(25px, 6.8vw, 33px); line-height: 1.06; letter-spacing: -.012em;
	margin: 0; overflow-wrap: anywhere;
}
.zaak p { margin: 4px 0 0; color: var(--zacht); font-size: 13px; }

.modus {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	max-width: 720px; margin: 14px auto 0; padding: 8px 0 0;
	border-top: 1px solid var(--lijnDun); font-size: 13px; color: var(--dof);
}
.modusNu { font-weight: 600; color: var(--inkt); }
.modusNu::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--goed); margin-right: 7px; vertical-align: 1px; }
.modusAdres { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modusWissel { margin-left: auto; color: var(--accent); font-weight: 600; text-decoration: none; }

/* ============================== hoofd ============================== */
main { max-width: 720px; margin: 0 auto; padding: 0 18px 128px; }
.melding { margin: 14px 0 0; padding: 11px 13px; border-radius: var(--rondKlein); background: #fdf3ec; border: 1px solid #f0d7c4; font-size: 14px; }
.melding-fout { background: #fceceb; border-color: #f0c8c4; color: var(--fout); }
.melding-goed { background: #edf6f0; border-color: #c9e2d3; color: var(--goed); }
h2.sectie { font-family: var(--kop); font-weight: 700; letter-spacing: -.02em; font-size: 21px; margin: 26px 0 10px; }

/* ---------- de startpagina: afhalen of bezorgen ----------
   Dit is het eerste wat iemand ziet, dus hier mag de zaak zich even voorstellen. De twee keuzes
   zijn geen formulierknoppen maar twee panelen met een tekening, de tijden van vandaag erbij, en
   genoeg vlees om met een duim te raken. */
.zaakHero { text-align: center; padding-bottom: 4px; }
.zaakHero .zaakBinnen { flex-direction: column; gap: 14px; }
.zaakHero .zaakLogo { width: 62px; height: 78px; object-fit: contain; box-shadow: none; }
.zaakHero h1 { font-size: clamp(28px, 8vw, 38px); }
.zaakBoven {
	display: block; font-family: var(--bonletter); font-size: 10px; letter-spacing: .12em;
	text-transform: uppercase; margin-bottom: 7px; white-space: nowrap;
	overflow: hidden; text-overflow: ellipsis;
}

.kiesRij { display: grid; gap: 12px; margin: 26px 0 8px; }
@media (min-width: 620px) { .kiesRij { grid-template-columns: 1fr 1fr; } }
.kiesKaart {
	display: flex; align-items: center; gap: 16px; width: 100%;
	text-align: left; color: inherit; cursor: pointer;
	background: var(--papier); border: 1.5px solid var(--lijn); border-radius: 16px;
	padding: 16px 18px; text-decoration: none;
	transition: border-color .16s, transform .16s, box-shadow .16s;
}
.kiesKaart:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(28,23,16,.45); }
.kiesTekst { min-width: 0; }
.kiesKaart b { font-family: var(--kop); font-weight: 700; font-size: 21px; letter-spacing: -.02em; display: block; color: var(--inkt); }
/* LET OP de volgorde: .kiesTekst span moet vóór .kiesBeeld staan en even zwaar zijn, anders kleurt
   de algemene span-regel de tekening ook grijs. Dat ging hier eerst mis. */
.kiesTekst span { display: block; color: var(--dof); font-size: 13.5px; line-height: 1.4; }
.kiesKaart .kiesBeeld { flex: none; width: 62px; height: 62px; color: var(--accent); }
.kiesKaart .kiesBeeld svg { width: 100%; height: 100%; }
.kiesTijd {
	margin-top: 5px; font-family: var(--bonletter); font-size: 11px; letter-spacing: .06em;
	text-transform: uppercase; color: #8a5a0c !important;
}
.kiesKaart.dicht { opacity: .55; pointer-events: none; }
.kiesKaart.dicht .kiesBeeld { color: var(--zacht); }
.kiesKaart.dicht b::after { content: ' · gesloten'; color: var(--fout); font-size: 15px; font-weight: 600; }

/* ---------- de filiaallijst op de kale domeinnaam ---------- */
.filialen { display: grid; gap: 8px; margin: 4px 0 8px; }
@media (min-width: 620px) { .filialen { grid-template-columns: 1fr 1fr; } }
.filiaal {
	display: block; text-decoration: none; color: inherit;
	background: var(--papier); border: 1.5px solid var(--lijn); border-radius: var(--rond);
	padding: 13px 15px; transition: border-color .14s, transform .14s;
}
.filiaal:hover { border-color: var(--accent); transform: translateY(-1px); }
.filiaalNaam { display: block; font-family: var(--kop); font-weight: 700; font-size: 17px; }
.filiaalAdres { display: block; color: var(--dof); font-size: 13.5px; margin-top: 1px; }
.filiaalWat {
	display: block; margin-top: 5px; font-family: var(--bonletter); font-size: 10.5px;
	letter-spacing: .1em; text-transform: uppercase; color: var(--amber);
}

/* ---------- categoriebalk ---------- */
.catBalk {
	position: sticky; top: 0; z-index: 30; margin: 14px -18px 0; padding: 7px 0;
	background: color-mix(in srgb, var(--papier) 90%, transparent);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--lijn);
}
.catBalk ul { display: flex; gap: 5px; margin: 0; padding: 0 18px; list-style: none; overflow-x: auto; scrollbar-width: none; }
.catBalk ul::-webkit-scrollbar { display: none; }
.catBalk a {
	display: block; white-space: nowrap; text-decoration: none;
	font-size: 13px; font-weight: 600; letter-spacing: .01em;
	padding: 6px 11px; border-radius: 99px; color: var(--dof);
}
.catBalk a.nu { background: var(--accent); color: var(--grond); }

/* ============================== DE KAART ==============================
   Een lijst, geen dozen. Naam links, prijs rechts, stippellijn ertussen. */
.catKop { display: flex; align-items: baseline; gap: 12px; margin: 30px 0 6px; scroll-margin-top: 56px; }
.catKop h2 {
	font-family: var(--kop); font-weight: 700; font-size: 17px; letter-spacing: .04em;
	text-transform: uppercase; margin: 0; flex: none; color: var(--accent);
}
.catKop::after { content: ''; flex: 1; height: 2px; background: var(--amberZacht); border-radius: 2px; }
.catKop p { flex-basis: 100%; margin: 4px 0 0; color: var(--dof); font-size: 13.5px; }
.tussenkop { font-family: var(--kop); font-weight: 600; font-size: 14px; color: var(--accent); margin: 16px 0 2px; }

.items { display: block; }

.regel {
	display: grid; grid-template-columns: 1fr auto; align-items: baseline;
	column-gap: 10px; width: 100%; text-align: left; cursor: pointer;
	background: none; border: 0; border-bottom: 1px solid var(--lijnDun);
	padding: 9px 0; color: inherit;
}
.regel:last-child { border-bottom: 0; }
.regel.metFoto { grid-template-columns: 62px 1fr auto; column-gap: 13px; }
.regelFoto {
	grid-row: span 2; width: 62px; height: 62px; border-radius: 10px; object-fit: cover;
	align-self: center; background: var(--grond);
	/* Veel artikelfoto's zijn productshots op een zwarte ondergrond. Die zweven als postzegels op
	   het papier; een warm randje en een zachte gloed eronder zetten ze in iets in plaats van erop. */
	box-shadow: 0 0 0 1px var(--lijn), 0 2px 6px rgba(28,23,16,.10);
}
.regelKop { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.regelNaam { font-weight: 500; font-size: 15px; line-height: 1.3; }
.regelVul { flex: 1; border-bottom: 1.5px dotted #ddd8cc; transform: translateY(-3px); min-width: 14px; }
.regelAlg { flex: none; font-size: 11.5px; letter-spacing: .5px; opacity: .85; }

/* De prijs is de knop. Daarom heeft hij een rand, een eigen vlak en een duimformaat. */
.regelPrijs {
	grid-column: -1; align-self: center; flex: none; white-space: nowrap;
	font-family: var(--kop); font-weight: 700; font-size: 14px; letter-spacing: -.01em;
	color: var(--inkt); background: var(--grond); border: 0; border-radius: 99px;
	padding: 6px 12px; box-shadow: inset 0 0 0 1px rgba(231,220,198,.9); transition: background .12s, color .12s;
}
/* De + verschijnt pas als je de regel aanraakt: op een kaart hoort de prijs te staan, niet een rij
   plusjes. Op een telefoon is er geen hover, dus daar is de hele regel het doelwit -- dat is groot
   genoeg en dat weet iedereen inmiddels van een bestelapp. */
.regelPrijs::after { content: ''; }
@media (hover: hover) {
	.regel:hover .regelPrijs::after { content: ' +'; }
}
.regel:hover .regelPrijs, .regel:active .regelPrijs { background: var(--accent); border-color: var(--accent); color: #fff; }
.regelBij { grid-column: 1 / -2; color: var(--dof); font-size: 13px; line-height: 1.4; margin-top: 3px; }
.regel.metFoto .regelBij { grid-column: 2 / -2; }
/* Een merkteken achter de naam, geen zin op een eigen regel. "Vandaag op" is informatie, geen
   alarm -- en het artikel is voor morgen gewoon te bestellen. */
.regelTag {
	flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	color: #8a5a0c; background: var(--amberZacht); border-radius: 4px; padding: 2px 6px;
	position: relative; top: -1px;
}
/* De kijk-kaart: geen knop, dus ook niet de vorm van een knop. De prijs is gewoon een prijs, en
   staat dan ook op dezelfde regel als de naam in plaats van in een eigen vlak eronder. */
.regel.kijk { cursor: default; padding: 7px 0; }
.regel.kijk .regelPrijs {
	background: none; box-shadow: none; padding: 0; font-size: 15px;
	align-self: baseline; letter-spacing: 0;
}
.regel.kijk:hover .regelPrijs { background: none; color: var(--inkt); }
.regel.kijk:hover .regelPrijs::after { content: ''; }
.regel.op .regelNaam { text-decoration: line-through; color: var(--zacht); }
.regel.op .regelPrijs { color: var(--zacht); }
.regel.op .regelFoto { filter: grayscale(1); opacity: .55; }

/* ============================== het bonnetje ============================== */
.bon {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	transform: translateY(150%); transition: transform .3s cubic-bezier(.2,.9,.3,1); pointer-events: none;
}
.bon.bonAan { transform: translateY(0); pointer-events: auto; }
/* Onderin steekt de bon net boven de rand uit -- met dezelfde scheurrand als op de mandjespagina,
   zodat het zichtbaar hetzelfde vel papier is dat je omhoog trekt. */
/* Onderin steekt de bon net boven de rand uit, mét de scheurrand -- zichtbaar hetzelfde vel dat je
   omhoog trekt. In de accentkleur, want dit is ook de weg naar afrekenen en die moet je vinden
   zonder zoeken; op papierkleur was hij te bescheiden voor wat hij doet. */
.bonKnop {
	position: relative; display: flex; align-items: center; gap: 12px;
	max-width: 692px; margin: 0 auto; background: var(--accent); color: #fff;
	text-decoration: none; padding: 15px 16px 14px;
	box-shadow: 0 14px 34px -12px rgba(140,38,18,.7);
}
.bonKnop::before {
	content: ''; position: absolute; left: 0; right: 0; top: -8px; height: 9px;
	background:
		linear-gradient(-45deg, var(--accent) 50%, transparent 51%) 0 0 / 14px 9px repeat-x,
		linear-gradient(45deg,  var(--accent) 50%, transparent 51%) 0 0 / 14px 9px repeat-x;
}
.bonAantal { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 3px; background: rgba(255,255,255,.22); color: #fff;
	display: grid; place-items: center; font-family: var(--bonletter); font-weight: 700; font-size: 12.5px; }
.bonWoord { font-family: var(--bonletter); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.bonTotaal { margin-left: auto; font-family: var(--kop); font-weight: 800; font-size: 19px; letter-spacing: -.03em; }
.bon.stoot .bonKnop { animation: stoot .34s ease; }
@keyframes stoot { 40% { transform: translateY(-5px); } }
.vliegt {
	position: fixed; z-index: 60; pointer-events: none;
	font-family: var(--kop); font-weight: 700; font-size: 14px;
	background: var(--inkt); color: var(--papier); padding: 5px 10px; border-radius: 99px;
	transition: transform .5s cubic-bezier(.4,0,.6,1), opacity .5s;
}

/* ============================== bladen ============================== */
.sluier { position: fixed; inset: 0; z-index: 50; background: rgba(20,19,15,.4); opacity: 0; transition: opacity .22s; }
.sluier.aan { opacity: 1; }
.blad {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 51;
	background: var(--papier); border-radius: 18px 18px 0 0; max-height: 90vh;
	display: flex; flex-direction: column;
	transform: translateY(101%); transition: transform .3s cubic-bezier(.2,.9,.3,1);
	box-shadow: 0 -20px 50px -20px rgba(20,19,15,.35);
}
.blad.aan { transform: translateY(0); }
@media (min-width: 700px) {
	.blad { left: 50%; right: auto; width: 540px; transform: translate(-50%, 101%); }
	.blad.aan { transform: translate(-50%, 0); }
}
.bladKop { display: flex; align-items: center; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid var(--lijn); }
.bladKop h2 { font-family: var(--kop); font-weight: 700; font-size: 20px; margin: 0; letter-spacing: -.02em; }
.bladDicht { margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--lijn); background: none; font-size: 15px; cursor: pointer; }
.bladLijf { padding: 16px 18px; overflow-y: auto; }
.bladVoet { padding: 12px 18px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lijn); background: var(--grond); }

.vraag { margin-bottom: 22px; }
.vraag h3 { font-family: var(--kop); font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 2px; }
.vraag .vraagBij { color: var(--zacht); font-size: 12.5px; margin: 0 0 8px; }
.optie { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid var(--lijnDun); cursor: pointer; }
.optie:last-child { border-bottom: 0; }
.optie input { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.optie .optieNaam { flex: 1; font-size: 15px; }
.optie .optiePrijs { color: var(--dof); font-family: var(--bonletter); font-size: 12.5px; }
.optie.op { opacity: .55; }
.optie.op .optieNaam { text-decoration: line-through; }

.stap { display: flex; align-items: center; gap: 2px; border: 1px solid var(--lijn); border-radius: 6px; padding: 1px; }
.stap button { width: 30px; height: 30px; border-radius: 5px; cursor: pointer; border: 0; background: none; font-size: 17px; line-height: 1; }
.stap button:disabled { opacity: .3; cursor: default; }
.stap .stapNu { min-width: 26px; text-align: center; font-family: var(--bonletter); font-weight: 700; font-size: 15px; }

/* ============================== DE BON ==============================
 * Dit is het hart van het ontwerp. Wat je bestelt wordt straks een kassabon; hier is hij dat al.
 * Een eigen vel papier op de kaart, met gescheurde randen, de letter van een bonprinter voor alles
 * wat cijfer is, en een dubbele regel boven het totaal. Het is de enige plek waar deze app iets
 * nabootst -- en het is precies wat de gast even later in zijn hand krijgt.
 */
.bonVel {
	background: var(--bon); margin: 18px 0 0; padding: 0 18px;
	filter: drop-shadow(0 1px 0 rgba(20,19,15,.06)) drop-shadow(0 14px 26px rgba(20,19,15,.07));
}
/* De scheurrand: een rij driehoekjes, boven én onder, met de kleur van de kaart eronder. */
.bonScheur { height: 9px; background:
	linear-gradient(-45deg, var(--bon) 50%, transparent 51%) 0 0 / 14px 9px repeat-x,
	linear-gradient(45deg,  var(--bon) 50%, transparent 51%) 0 0 / 14px 9px repeat-x; }
.bonScheur.onder { transform: scaleY(-1); }

.bonHoofd {
	font-family: var(--bonletter); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--dof); text-align: center; padding: 16px 0 4px;
}
.bonZaak {
	font-family: var(--kop); font-weight: 800; font-size: 17px; letter-spacing: -.02em;
	text-align: center; padding-bottom: 12px; border-bottom: 1px dashed #cdc7b5; margin-bottom: 4px;
}

.mandLijst { list-style: none; margin: 0; padding: 0; }
.mandRegel { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 11px 0; border-bottom: 1px dashed #ded8c6; }
.mandRegel:last-child { border-bottom: 0; }
.mandAantal { font-family: var(--bonletter); font-size: 13px; font-weight: 700; color: var(--dof); }
.mandNaam { font-weight: 500; font-size: 15px; }
.mandExtra { color: var(--dof); font-size: 12.5px; margin-top: 2px; }
.mandPrijs { font-family: var(--bonletter); font-size: 14px; font-weight: 700; white-space: nowrap; }
.mandKnoppen { display: flex; align-items: center; gap: 12px; margin-top: 7px; }
.mandWeg { background: none; border: 0; color: var(--zacht); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 3px 0; }

.telling { margin: 4px 0 0; padding-top: 10px; border-top: 3px double var(--inkt); }
.telRegel { display: flex; align-items: baseline; gap: 8px; padding: 3px 0;
	font-family: var(--bonletter); font-size: 12.5px; letter-spacing: .02em; }
.telRegel .telNaam { flex: none; text-transform: uppercase; color: var(--dof); }
.telRegel .telVul { flex: 1; border-bottom: 1px dotted #cdc7b5; transform: translateY(-3px); min-width: 16px; }
.telRegel .telBedrag { flex: none; font-weight: 700; }
.telRegel.telTotaal { font-size: 15px; padding: 8px 0 2px; }
.telRegel.telTotaal .telNaam { color: var(--inkt); font-weight: 700; }
.telRegel.telTotaal .telBedrag { font-family: var(--kop); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.telRegel.telKorting .telBedrag { color: var(--goed); }
.bonVoet { font-family: var(--bonletter); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
	color: var(--zacht); text-align: center; padding: 14px 0 16px; }

/* De kortingscode hoort niet naast de bestelknop om aandacht te vechten. Achter één regel tekst. */
.uitklap { margin: 16px 0 0; }
.uitklap summary { cursor: pointer; color: var(--dof); font-size: 13.5px; list-style: none; }
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary::before { content: '+ '; font-family: var(--bonletter); }
.uitklap[open] summary::before { content: '– '; }
.uitklap .veld { margin-top: 10px; }

/* ============================== formulier ============================== */
.veld { margin-bottom: 14px; }
.veld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--inkt); }
.veld .bij { font-weight: 400; color: var(--zacht); }
.invoer { width: 100%; padding: 12px 13px; border-radius: var(--rondKlein); border: 1.5px solid var(--lijn); background: #fff; font-size: 16px; }
.invoer:focus { border-color: var(--inkt); outline: none; }
.veldRij { display: grid; gap: 12px; }
@media (min-width: 560px) { .veldRij { grid-template-columns: 1fr 1fr; } }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

form > .knop, .blok + .knop { margin-top: 24px; }
.knop {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 100%; padding: 15px 18px; border: 0; border-radius: 99px;
	background: var(--accent); color: #fff; font-family: var(--kop);
	font-size: 16px; font-weight: 700; letter-spacing: -.01em; cursor: pointer; text-decoration: none;
}
.knop:hover { background: var(--accentDonker); }
.knop:disabled { background: var(--zacht); cursor: default; }
.knop.stil { background: none; color: var(--inkt); border: 1.5px solid var(--lijn); }
.knop.stil:hover { border-color: var(--inkt); background: none; }

/* Op het afrekenscherm dezelfde structuur als op de kaart: een kopje op een regel, en daaronder
   de velden. Geen dozen -- die zetten alles op afstand en maken het formulier langer dan het is. */
.blokKop {
	display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px;
	font-family: var(--kop); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.blokKop::after { content: ''; flex: 1; height: 1px; background: var(--lijn); }
.blok { margin-bottom: 4px; }
.kaartBlok { border: 1px solid var(--lijn); border-radius: var(--rond); padding: 16px; margin: 14px 0; background: #fff; }

/* ============================== klaar ============================== */
.klaar { text-align: center; padding: 46px 0 20px; }
.klaar .klaarBon { font-family: var(--kop); font-weight: 800; font-size: clamp(30px, 9vw, 44px); letter-spacing: -.03em; margin: 0 0 8px; }
.klaar p { color: var(--dof); max-width: 34ch; margin: 0 auto 8px; }

/* ============================== voet ============================== */
.voet { border-top: 1px solid var(--lijn); margin-top: 36px; padding: 20px 18px 108px; text-align: center; color: var(--zacht); font-size: 13px; }
.voet nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.voet a { color: var(--dof); text-decoration: none; }
.voet a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}