/* Roelofsen Bloemen, bezorgapp (web; layouts/Bezorgapp.cfm), 2026-10-14: dezelfde opmaak als de scanner-app
   (design "Zebra Bezorg-app", android/.../ui/Onderdelen.kt en Schermen.kt). Witte balk bovenin, beige grond, witte
   kaarten met afgeronde hoeken, diepgroene hoofdknop, gele scanknop, vaste voet met de knoppen. Tikvlakken minstens
   48 px, hoofdknoppen 56 px. Kleuren en maten uit tokens.css (blok .ba). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ba {
  margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--ba-bg); color: var(--ba-tekst);
  font-family: var(--ba-font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; overscroll-behavior-y: none;
}
:where(.ba) a { color: inherit; text-decoration: none; }
:where(.ba) :where(button, input, select, textarea) { font: inherit; color: inherit; }
.ba h1, .ba h2, .ba p, .ba dl, .ba dd { margin: 0; }
.ba ol, .ba ul { margin: 0; padding: 0; list-style: none; }
.ba [hidden] { display: none !important; }
.ba-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0; }
.ba :focus-visible { outline: 3px solid var(--ba-focus); outline-offset: 2px; }
.bz-icoon, .aicoon { flex: none; vertical-align: middle; }

/* ---------- Balk bovenin (Balk) ---------- */
.ba-balk {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 2px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 12px; background: var(--ba-wit); border-bottom: 1px solid var(--ba-rand);
}
.ba-balk__knop {
  width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: none; color: var(--ba-tekst); cursor: pointer;
}
.ba-balk__knop--zacht { color: var(--ba-tekst-2); }
.ba-balk__knop:active { background: var(--ba-zacht); }
.ba-balk__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ba-balk__titel { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-balk__sub { font-size: 13px; color: var(--ba-tekst-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ba-pagina { display: block; }
.ba-inhoud { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 20px; }
.ba--met-voet .ba-inhoud { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ---------- Vaste voet (Voet) met het gele scanveld of de hoofdknop ---------- */
.ba-voet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); background: var(--ba-wit); border-top: 1px solid var(--ba-rand);
}
.ba-scan {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 6px 0 16px; border-radius: var(--ba-r14);
  background: var(--ba-geel); color: var(--ba-op-geel);
}
.ba-scan:focus-within { box-shadow: 0 0 0 3px var(--ba-geel-druk); }
.ba-scan__icoon { display: flex; }
.ba-scan__veld {
  flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font-size: 17px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .02em; outline: none;
}
.ba-scan__veld::placeholder { color: var(--ba-op-geel); opacity: .75; text-transform: none; letter-spacing: 0; }
.ba-scan__typen {
  width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--ba-r12); background: var(--ba-geel-druk); color: var(--ba-op-geel); cursor: pointer;
}

/* ---------- Knoppen (HoofdKnop, TweedeKnop) ---------- */
.ba-knop {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 12px;
  border-radius: var(--ba-r14); border: 0; font-size: 16px; font-weight: 700; cursor: pointer; text-align: center;
}
.ba-knop--hoofd { min-height: 56px; background: var(--ba-groen-diep); color: var(--ba-wit); font-size: 17px; }
.ba-knop--hoofd:disabled { background: var(--ba-uit); cursor: not-allowed; }
.ba-knop--tweede { background: var(--ba-wit); color: var(--ba-tekst); box-shadow: inset 0 0 0 1.5px var(--ba-rand); }
.ba-knop--tweede.is-uit { color: var(--ba-uit-tekst); cursor: default; }
.ba-knop--tweede:disabled { color: var(--ba-uit-tekst); cursor: not-allowed; }
.ba-knop { transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1); }
.ba-knop:active:not(:disabled) { filter: brightness(.94); transform: scale(.98); transition-duration: 90ms; }
/* UX 2026-11-06 (feedback): verstuurt het formulier (aria-busy van rb.submitGuard), dan draait er een ring voor het label. */
form[aria-busy="true"] .ba-knop[type="submit"], .ba button[aria-busy="true"] { cursor: progress; opacity: .85; pointer-events: none; }
form[aria-busy="true"] .ba-knop[type="submit"]::before, .ba button[aria-busy="true"]::before {
  content: ""; display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ba-draai 700ms linear infinite; flex: none;
}
@keyframes ba-draai { to { transform: rotate(360deg); } }
.ba-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ba-twee form { display: contents; }

/* ---------- Dag kiezen (routes) ---------- */
.ba-dag { display: flex; align-items: center; gap: 4px; padding: 4px 8px; background: var(--ba-wit); border-bottom: 1px solid var(--ba-rand); }
.ba-dag__pijl { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--ba-tekst-2); }
.ba-dag__titel { flex: 1; text-align: center; font-weight: 800; }
.ba-dag__titel small { font-weight: 400; color: var(--ba-tekst-2); }

/* ---------- Tabs Inladen en Route ---------- */
.ba-tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--ba-wit); border-bottom: 1px solid var(--ba-rand); }
.ba-tabs__tab { display: flex; align-items: center; justify-content: center; min-height: 48px; font-weight: 700; color: var(--ba-tekst-2); border-bottom: 3px solid transparent; }
.ba-tabs__tab.is-actief { color: var(--ba-groen-diep); border-bottom-color: var(--ba-groen-diep); }

/* ---------- Voortgang (Voortgang) ---------- */
.ba-voortgang { display: block; width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--ba-zacht); overflow: hidden; -webkit-appearance: none; appearance: none; }
.ba-voortgang::-webkit-progress-bar { background: var(--ba-zacht); }
.ba-voortgang::-webkit-progress-value { background: var(--ba-groen); }
.ba-voortgang::-moz-progress-bar { background: var(--ba-groen); }
.ba-voortgang--dun { height: 5px; border-radius: 0; }
.ba-teller { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--ba-wit); border-bottom: 1px solid var(--ba-rand); }
.ba-teller p { font-size: 15px; }
.ba-teller b { font-size: 22px; font-weight: 800; }

/* ---------- Kaarten en rijen ---------- */
.ba-lijst { display: flex; flex-direction: column; gap: 8px; }
.ba-kaart { display: flex; flex-direction: column; gap: 2px; padding: 14px; background: var(--ba-wit); border: 1px solid var(--ba-rand); border-radius: var(--ba-r14); }
.ba-kaart__titel { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ba-kaart__sub { font-size: 13px; color: var(--ba-tekst-2); }
.ba-kaart--rit { gap: 6px; }
.ba-kaart--rit .ba-kaart__titel { font-size: 17px; }
.ba-rij { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
.ba-rij__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ba-rij__tekst .ba-kaart__titel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ba-rij.is-ingeladen { background: var(--ba-tint-licht); border-color: var(--ba-tint-rand); }
.ba-rij.is-klaar { background: var(--ba-klaar); }
.ba-rij.is-klaar .ba-kaart__titel { color: var(--ba-tekst-2); }
.ba-rij.is-huidig { border: 2px solid var(--ba-groen-diep); padding: 11px; }
li.is-net-ingeladen .ba-rij { border: 3px solid var(--ba-groen); padding: 10px; }
.ba-hint { font-size: 14px; color: var(--ba-tekst-2); padding: 0 0 4px; }
.ba-kop2 { font-size: 15px; font-weight: 700; margin: 10px 0 2px; }

/* Bolletje met een nummer of een vinkje (Bolletje) */
.ba-bol {
  width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--ba-zacht); color: var(--ba-tekst); font-size: 15px; font-weight: 800;
}
.ba-bol--vink, .ba-bol--groen { background: var(--ba-groen-diep); color: var(--ba-wit); }
.ba-bol--tint { background: var(--ba-tint); color: var(--ba-groen-diep); }

/* Labels */
.ba-labels { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ba-label { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 700; }
.ba-labels .ba-label { margin-top: 0; }
.ba-label--ok { background: var(--ba-tint); color: var(--ba-groen-diep); }
.ba-label--retour { background: var(--ba-retour-vlak); color: var(--ba-retour-tekst); }
.ba-label--let { background: var(--ba-notitie); color: var(--ba-notitie-tekst); }

/* Eerst ophalen */
.ba-ophaal { gap: 4px; }
.ba-ophaal .ba-twee { margin-top: 8px; }
.ba-ophaal.is-klaar { background: var(--ba-klaar); }
.ba-ophaal--eerst { background: var(--ba-geel-vlak); box-shadow: 0 0 0 1.5px var(--ba-geel-rand); margin-bottom: 12px; }   /* stap 4: ophalen voor de volgende stop */

/* Volgende stop: de groene kaart */
.ba-volgende { display: flex; flex-direction: column; padding: 16px 16px 18px; border-radius: var(--ba-r18); background: var(--ba-groen-diep); color: var(--ba-wit); }
.ba-volgende__kop { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ba-op-groen-zacht); margin-bottom: 6px; }
.ba-volgende__straat { font-size: 24px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.ba-volgende__regel { font-size: 15px; color: var(--ba-op-groen-zacht); }
.ba-volgende__naam { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--ba-op-groen-lijn); font-size: 15px; font-weight: 600; }
.ba-klaar-alles { align-items: center; text-align: center; padding: 22px; color: var(--ba-groen-diep); }
.ba-klaar-alles__titel { font-size: 20px; font-weight: 800; color: var(--ba-tekst); margin-top: 6px; }

/* Leeg */
.ba-leeg { padding: 48px 24px; text-align: center; }
.ba-leeg__titel { font-size: 20px; font-weight: 800; }
.ba-leeg__sub { font-size: 15px; color: var(--ba-tekst-2); margin-top: 6px; }

/* ---------- Stop ---------- */
.ba-straat { font-size: 26px; font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.ba-adresregel { font-size: 17px; color: var(--ba-tekst-2); margin: 4px 0 8px; }
.ba-inhoud > .ba-twee { margin-bottom: 8px; }
.ba-notitie { padding: 12px 14px; border-radius: var(--ba-r14); background: var(--ba-notitie); }
.ba-notitie__kop { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ba-notitie-tekst); }
.ba-notitie p { font-size: 16px; font-weight: 700; }
.ba-regels { gap: 0; padding: 0 14px; }
.ba-regels > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--ba-rand-licht); }
.ba-regels > div:last-child { border-bottom: 0; }
.ba-regels dt { font-size: 13px; font-weight: 700; color: var(--ba-gedempt); }
.ba-regels dd { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.ba-regels .is-ja { color: var(--ba-groen-diep); }
.ba-regels .is-nee { color: var(--ba-fout); }
.ba-regels .is-retour { color: var(--ba-retour-tekst); }
.ba-klaar { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 10px; border-radius: var(--ba-r14); background: var(--ba-tint); color: var(--ba-groen-diep); font-size: 15px; font-weight: 700; text-align: center; }
.ba-klaar--retour { background: var(--ba-retour-vlak); color: var(--ba-retour-tekst); }

/* Afleverkeuzes (Optie) */
.ba-opties { display: flex; flex-direction: column; gap: 8px; }
.ba-optie { position: relative; display: block; }
.ba-optie input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.ba-optie__vlak {
  display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 0 14px; border-radius: var(--ba-r14);
  background: var(--ba-wit); box-shadow: inset 0 0 0 1.5px var(--ba-rand); color: var(--ba-tekst-2); cursor: pointer;
}
.ba-optie__vlak > span { display: flex; flex-direction: column; }
.ba-optie b { font-size: 17px; color: var(--ba-tekst); }
.ba-optie small { font-size: 13px; color: var(--ba-tekst-2); }
.ba-optie input:checked + .ba-optie__vlak { background: var(--ba-tint-licht); box-shadow: inset 0 0 0 2.5px var(--ba-groen-diep); color: var(--ba-groen-diep); }
.ba-optie--retour input:checked + .ba-optie__vlak { background: var(--ba-retour-vlak); box-shadow: inset 0 0 0 2.5px var(--ba-retour); color: var(--ba-retour); }
.ba-optie input:focus-visible + .ba-optie__vlak { outline: 3px solid var(--ba-focus); outline-offset: 2px; }
.ba-optie.is-uit .ba-optie__vlak { opacity: .5; cursor: not-allowed; }
.ba-paneel { gap: 12px; }
.ba-groep { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ba-groep legend { padding: 0; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ba-tekst-2); }
.ba-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ba-chips--breed { flex-direction: column; }
.ba-chip { position: relative; display: block; }
.ba-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.ba-chip span {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; background: var(--ba-wit);
  box-shadow: inset 0 0 0 1.5px var(--ba-rand); font-size: 15px; font-weight: 600; cursor: pointer;
}
.ba-chips--breed .ba-chip span { min-height: 48px; border-radius: var(--ba-r12); }
.ba-chip input:checked + span { background: var(--ba-retour-vlak); box-shadow: inset 0 0 0 1.5px var(--ba-retour); color: var(--ba-retour-tekst); }
.ba-chip input:focus-visible + span { outline: 3px solid var(--ba-focus); outline-offset: 2px; }
.ba-vink { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 4px 0; cursor: pointer; }
.ba-vink input { position: absolute; opacity: 0; width: 28px; height: 28px; margin: 0; }
.ba-vink__vak {
  width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px;
  background: var(--ba-wit); box-shadow: inset 0 0 0 2px var(--ba-rondje); color: transparent;
}
.ba-vink input:checked + .ba-vink__vak { background: var(--ba-retour); box-shadow: none; color: var(--ba-wit); animation: ba-pop 220ms cubic-bezier(.34, 1.56, .64, 1); }
/* UX 2026-11-06 (feedback): een vinkje popt kort, zodat de tik zichtbaar is aangekomen. */
@keyframes ba-pop { 40% { transform: scale(1.14); } }
.ba-vink input:focus-visible + .ba-vink__vak { outline: 3px solid var(--ba-focus); outline-offset: 2px; }
.ba-vink > span:last-child { display: flex; flex-direction: column; }
.ba-vink b { font-size: 16px; }
.ba-vink small { font-size: 13px; color: var(--ba-tekst-2); }

/* Foto */
.ba-foto { position: relative; display: block; margin-top: 8px; }
.ba-foto input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.ba-foto__vlak { min-height: 52px; border: 1.5px dashed var(--ba-rondje); border-radius: var(--ba-r14); display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; color: var(--ba-tekst-2); background: var(--ba-wit); }
.ba-foto.is-gekozen .ba-foto__vlak { border-style: solid; border-color: var(--ba-groen-diep); color: var(--ba-groen-diep); background: var(--ba-tint-licht); }
.ba-foto__voorbeeld { display: block; width: 100%; max-height: 240px; object-fit: cover; border-radius: var(--ba-r14); margin-top: 8px; }

/* ---------- Velden (Veld) ---------- */
.ba-form { display: flex; flex-direction: column; gap: 14px; }
.ba-veld { display: flex; flex-direction: column; gap: 6px; }
.ba-veld > span, .ba-veld > label { font-size: 13px; font-weight: 700; color: var(--ba-tekst-2); }
.ba-veld em { font-style: normal; font-weight: 400; color: var(--ba-gedempt); }
.ba-in {
  width: 100%; height: 56px; padding: 0 14px; border: 1.5px solid var(--ba-rand); border-radius: var(--ba-r12);
  background: var(--ba-wit); font-size: 18px; color: var(--ba-tekst);
}
.ba-in::placeholder { color: var(--ba-plaats); }
.ba-in:focus { border-color: var(--ba-groen-diep); outline: none; box-shadow: 0 0 0 3px var(--ba-focus); }
.ba-in--code { font-size: 26px; letter-spacing: .3em; text-align: center; }
.pw-veld { position: relative; }
.pw-veld .ba-in { padding-right: 56px; }
.pw-veld [data-pw-toggle] { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; background: none; color: var(--ba-tekst-2); display: flex; align-items: center; justify-content: center; }

/* ---------- Inloggen (wit scherm met logo) ---------- */
body.ba:has(.ba-inlog) { background: var(--ba-wit); }
.ba-inlog { display: flex; flex-direction: column; gap: 14px; max-width: 480px; margin: 0 auto; padding: calc(20px + env(safe-area-inset-top)) 20px 20px; }
.ba-logo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 0 16px; }
.ba-logo img { width: 76px; height: 76px; margin-bottom: 16px; }
.ba-logo h1 { font-size: 24px; font-weight: 800; }
.ba-logo p { font-size: 15px; color: var(--ba-tekst-2); margin-top: 4px; }
.ba-fout { color: var(--ba-fout); font-size: 15px; font-weight: 600; }

/* ---------- Meldingen (Melding), flits en netwerk ---------- */
.ba-toast {
  position: fixed; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--ba-r14); background: var(--ba-toast); color: var(--ba-wit); font-size: 15px; font-weight: 600;
  box-shadow: var(--ba-schaduw-hoog); transition: opacity .25s, transform .25s; cursor: pointer;
}
.ba--met-voet .ba-toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
.ba-toast--fout { background: var(--ba-fout); }
.ba-toast.is-weg { opacity: 0; transform: translateY(12px); pointer-events: none; }
.ba-flits {
  position: fixed; left: 12px; right: 12px; top: calc(76px + env(safe-area-inset-top)); z-index: 65; padding: 16px; border-radius: var(--ba-r14);
  color: var(--ba-wit); font-size: 17px; font-weight: 700; text-align: center; box-shadow: var(--ba-schaduw-hoog);
}
.ba-flits--ok { background: var(--ba-toast); }
.ba-flits--fout { background: var(--ba-fout); }
.ba-netwerk { position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 70; background: var(--ba-fout); color: var(--ba-wit); text-align: center; padding: 10px; font-weight: 700; }
/* Sessiebalk (rb.sessieBalk in gedeeld.js) als tweede balk: onder de offline-balk als die ook zichtbaar is. */
.ba-netwerk.is-ok { background: var(--ba-groen-diep); }
.ba-netwerk a { color: inherit; text-decoration: underline; }
[data-netwerk]:not([hidden]) + .rb-sessiebalk { top: calc(env(safe-area-inset-top) + 44px); }

/* Route gewijzigd onderweg (bezorgapp.js, data-routestand): opvallende balk bovenin tot de pagina ververst. */
.ba-nieuw {
  position: fixed; left: 12px; right: 12px; top: calc(76px + env(safe-area-inset-top)); z-index: 66; display: flex; flex-direction: column; gap: 10px;
  padding: 16px; border-radius: var(--ba-r14); background: var(--ba-geel); color: var(--ba-op-geel); box-shadow: var(--ba-schaduw-hoog);
  border: 2px solid var(--ba-geel-druk);
}
.ba-nieuw__titel { margin: 0; font-size: 19px; font-weight: 800; }
.ba-nieuw__sub { margin: 0; font-size: 15px; }
.ba-label--nieuw { background: var(--ba-geel); color: var(--ba-op-geel); }

@media (prefers-reduced-motion: reduce) { .ba-toast { transition: none; } .ba-vink input:checked + .ba-vink__vak { animation: none; } .ba-routekaart img { animation: none; } .ba-knop:active:not(:disabled) { transform: none; } }
@media (min-width: 700px) {
  .ba-inhoud, .ba-voet > * { max-width: 640px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* ---------- Inloggen op een telefoon, koppelen, inladen met een tik ---------- */
.ba-of { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ba-gedempt); }
.ba-of::before, .ba-of::after { content: ""; flex: 1; height: 1px; background: var(--ba-rand); }
.ba-link { display: block; width: 100%; min-height: 44px; border: 0; background: none; color: var(--ba-tekst-2); font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.ba-hint--midden { text-align: center; }
.ba-inlaadrij { display: flex; gap: 8px; align-items: stretch; }
.ba-inlaadrij > .ba-rij { flex: 1; min-width: 0; }
.ba-inlaadrij form { display: flex; }
.ba-inlaad {
  width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0;
  border-radius: var(--ba-r14); background: var(--ba-groen-diep); color: var(--ba-wit); font-size: 12px; font-weight: 700; cursor: pointer;
}

/* Hele route op de kaart (RouteKaartService, SVG) */
.ba-routekaart summary { font-weight: 700; cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.ba-routekaart img {
  display: block; width: 100%; height: auto; margin: 10px 0 6px; border-radius: var(--ba-r12);
  /* UX 2026-11-06 (skeleton): de kaart komt van de server (tegels); tot die tijd een glans in de vorm van de kaart. */
  background: linear-gradient(90deg, var(--ba-zacht) 25%, var(--ba-wit) 50%, var(--ba-zacht) 75%); background-size: 200% 100%; animation: ba-shimmer 1400ms linear infinite;
}
@keyframes ba-shimmer { to { background-position: -200% 0; } }
.ba-routekaart img.is-geladen { animation: none; background: var(--ba-zacht); }   /* bezorgapp.js: de kaart is er */

/* Vertrek, terug en duur (routeplanner) onder de tabs */
.ba-plan { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px 12px; background: var(--ba-wit); border-bottom: 1px solid var(--ba-rand); font-size: 14px; color: var(--ba-tekst-2); }
.ba-plan b { color: var(--ba-tekst); }
.ba-plan__fout { color: var(--ba-notitie-tekst); }

/* Kaart in een gecentreerde modal (data-vergroot; bezorgapp.js) */
.kaart-modal { width: min(1100px, 96vw); max-width: 96vw; max-height: 92vh; padding: 0; border: 0; border-radius: var(--ba-r14); background: var(--ba-wit); box-shadow: var(--ba-schaduw-hoog); overflow: hidden; }
.kaart-modal::backdrop { background: var(--scrim); }
.kaart-modal__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--ba-rand); }
.kaart-modal__titel { margin: 0; font-size: 16px; font-weight: 800; }
.kaart-modal__img { display: block; width: 100%; height: auto; max-height: calc(92vh - 64px); object-fit: contain; }
.kaart-modal__sluit { width: 48px; height: 48px; flex: none; border: 0; border-radius: 50%; background: transparent; font-size: 26px; line-height: 1; cursor: pointer; }
.kaart-modal__fout { margin: 0; padding: 32px 16px; text-align: center; }

/* Kop van een ophaalblok op het inlaadscherm (Roy 2026-10-30). */
.ba-kop2__sub { font-weight: 500; font-size: 13px; color: var(--ba-tekst-2, inherit); margin-left: 6px; }

/* ---------- Stap 5: route maken en orders toevoegen ---------- */
.ba-keuze { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ba-rand-licht); font-size: 15px; }
.ba-keuze input { width: 28px; height: 28px; margin: 0; accent-color: var(--ba-groen-diep); flex: none; }   /* review 12: 28 px zoals .ba-vink (handschoenen, zon) */
.ba-keuze:has(input:checked) { background: var(--ba-tint-licht); }   /* review 12: de rij zelf toont de keuze, niet alleen het vinkje */

/* UX 2026-11-06 (pull to refresh, gedeeld.js rb.pullToRefresh): naar beneden trekken bovenaan een lijst ververst de pagina.
   De lijst volgt de vinger met weerstand (ongeveer 35 procent, loopt vast op 84 px); de ring vult en draait mee met de
   trek en gaat rond zodra er wordt ververst. Chrome op de Zebra heeft geen eigen pull to refresh meer (overscroll-behavior none). */
.rb-pull { position: fixed; top: calc(12px + env(safe-area-inset-top)); left: 50%; width: 28px; height: 28px; margin-left: -14px; z-index: 60; border-radius: 50%; border: 3px solid var(--ba-groen-diep); border-right-color: transparent; opacity: 0; pointer-events: none; }
.rb-pull.is-actief { opacity: var(--pull, 0); transform: rotate(calc(var(--pull, 0) * 270deg)); }
.rb-pull.is-bezig { opacity: 1; animation: rb-pull-draai 700ms linear infinite; }
@keyframes rb-pull-draai { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.is-pull-loslaten { transition: transform 300ms cubic-bezier(.22, 1, .36, 1); }

/* Review 14 (B17): pull to refresh onder reduced motion (na de regels hierboven, anders wint hun transition): de lijst
   springt terug zonder te glijden, de ring draait langzamer (hij zegt dat er iets gebeurt). */
@media (prefers-reduced-motion: reduce) {
  .is-pull-loslaten { transition: none; }
  .rb-pull.is-bezig { animation-duration: 1.6s; }
}