/* Customer ordering app — mobile-first, portrait.
   Redesign "Winkelraam" (richting 1a). Pure drop-in: same markup, same JS
   hooks, same class names as before — only the presentation changed.

   Wat er visueel anders is t.o.v. de vorige versie:
   · De chrome is papierkleurig i.p.v. navy — het winkellogo en de
     categoriekleuren zijn zo de enige kleur bovenaan (white-label).
   · Het menu is een lijst met volle-breedte rijen i.p.v. een 2-koloms raster:
     lange productnamen passen, en het aantal is met één duim te wijzigen.
   · #tabs staat vast onderaan als navigatiebalk (native gevoel op Android/iOS).
   · Grotere raakvlakken: elke +/− knop is minstens 44px.

   Reuses css/style.css's :root tokens; de eigen tokens hieronder zijn de
   opgefriste neutralen rond hetzelfde navy #1e3a5f. */

:root {
  --paper:      #f6f2ec;   /* app-achtergrond */
  --surface:    #ffffff;   /* kaarten, velden */
  --surface-2:  #fffdfa;   /* onderbalk */
  --hairline:   #e9e3d9;   /* scheidingslijn chrome */
  --rule:       #ece7de;   /* scheidingslijn in lijsten */
  --stroke:     #e4ded4;   /* rand op velden en kaarten */
  --stroke-2:   #d8d1c5;   /* rand op knoppen */
  --ink:        #191a1c;
  --ink-2:      #45423d;
  --ink-3:      #6e6a63;
  --ink-4:      #8b857c;
  --navy-soft:  #eef1f6;   /* navy op 8% — actieve tab, statuschip */
  --tap:        44px;      /* minimum raakvlak */
  --nav-h:      74px;      /* hoogte onderbalk */
}
html[data-theme="dark"] {
  --paper:      #14161a;
  --surface:    #1c1e23;
  --surface-2:  #1a1d22;
  --hairline:   #24272e;
  --rule:       #23262c;
  --stroke:     #2a2d34;
  --stroke-2:   #343841;
  --ink:        #eaeaec;
  --ink-2:      #c3c5ca;
  --ink-3:      #9a9ea8;
  --ink-4:      #868d99;
  --navy-soft:  #202631;
  --accent:     #8fb4e8;   /* navy is te donker op zwart — dit is de lift */
}
/* Literal fallback: --navy comes from css/style.css, so if that file is slow,
   cached-stale or blocked, --accent (and the primary "Bevestig en betaal" button
   that uses it as its background) must not resolve to nothing — that renders the
   CTA white-on-transparent, invisible next to the visible "Annuleren". */
:root { --accent: var(--navy, #1e3a5f); }

html, body { height: auto; min-height: 100%; overscroll-behavior: none; background: var(--paper); }
body { color: var(--ink); text-wrap: pretty; }
#app { display: block; height: auto; min-height: 100vh; }

.view { display: none; }
.view.active { display: block; }

/* ══ Auth & winkelkiezer ══════════════════════════════════════════════
   Geen kaart meer op een gekleurde achtergrond: het scherm ís de kaart.
   Dat scheelt een rand, en de titel mag daardoor veel groter. */
#auth-view.active,
#shop-view.active {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 100vh; padding: 24px;
}
#auth-box, #shop-box { width: 100%; max-width: 400px; margin: 0 auto; background: none; box-shadow: none; padding: 0; }

#brand-logo { display: block; width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 18px; }
#auth-logo { display: block; max-height: 64px; max-width: 60%; object-fit: contain; margin: 0 auto 22px; }
#auth-box h1, #shop-box h1 {
  font-size: 30px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  color: var(--ink); text-align: left; margin-bottom: 10px;
}
#auth-box h1, #shop-box h1 { text-align: center; }
#shop-box .auth-hint { text-align: center; }
.auth-hint { font-size: 14px; color: var(--ink-3); margin-bottom: 18px; line-height: 1.55; }

/* Tabs als onderstreping — een pil-schakelaar suggereert "instelling",
   deze twee zijn twee formulieren. */
.auth-tabs { display: flex; gap: 24px; background: none; border-radius: 0; padding: 0; margin: 30px 0 20px; border-bottom: 1px solid var(--stroke); }
.auth-tab {
  flex: 0 0 auto; padding: 0 0 11px; border: none; background: none; border-radius: 0;
  font-size: 15px; font-weight: 500; color: var(--ink-4); cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent;
}
.auth-tab.active { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }

#shop-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 6px; }
.shop-choice {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 148px; padding: 20px 14px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--stroke); background: var(--surface); color: var(--ink);
  text-align: center;
}
.shop-choice:hover, .shop-choice:active { border-color: var(--accent); background: var(--navy-soft); }
.shop-choice-logo { max-width: 100%; max-height: 72px; object-fit: contain; margin-bottom: 0; }
.shop-choice-name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.shop-choice-name--caption { font-size: 13px; font-weight: 500; color: var(--ink-3); opacity: 1; }

/* ══ Velden en knoppen ═══════════════════════════════════════════════ */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px;
}
.field input {
  width: 100%; padding: 14px 16px; border: 1px solid var(--stroke); border-radius: 12px;
  font-size: 16px;                 /* 16px = geen auto-zoom op iOS */
  background: var(--surface); color: var(--ink);
}
.field input::placeholder { color: var(--ink-4); }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--navy-soft); }

.btn-primary, .btn-secondary {
  width: 100%; min-height: var(--tap); padding: 15px; border-radius: 12px;
  font-size: 16px; font-weight: 600; cursor: pointer; border: none;
}
.btn-primary { background: var(--accent); color: #fff; margin-top: 8px; }
.btn-primary:active { background: var(--navy2); }
.btn-secondary { background: var(--surface); color: var(--ink-2); border: 1px solid var(--stroke); }
html[data-theme="dark"] .btn-primary { color: #10192a; }
.link-btn {
  display: block; width: 100%; min-height: var(--tap); background: none; border: none;
  color: var(--accent); font-size: 14px; font-weight: 500; text-align: center;
  padding: 12px 0 0; cursor: pointer;
}

.made-by { font-size: 12px; color: var(--ink-4); text-align: center; margin-top: 26px; line-height: 1.6; }
.made-by a { color: var(--ink-3); }

/* ══ Wachtwoord tonen/verbergen ══════════════════════════════════════ */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; border: none; background: none; cursor: pointer; color: var(--ink-4);
}
.pw-toggle:hover { color: var(--accent); }
.pw-toggle:focus { outline: none; }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.pw-toggle svg { width: 20px; height: 20px; display: block; }

/* ══ Topbar ══════════════════════════════════════════════════════════
   Papierkleurig, niet navy: de winkel brengt zijn eigen kleur mee. */
#topbar {
  background: var(--paper); color: var(--ink); padding: 16px 20px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 0; z-index: 10;
}
#topbar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
#topbar-logo { height: 40px; width: auto; max-width: 160px; object-fit: contain; border-radius: 7px; flex-shrink: 0; }
#shop-name { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#topbar-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.topbar-btn, #logout-btn {
  background: var(--surface); color: var(--ink-2); border: 1px solid var(--stroke);
  min-height: 36px; padding: 8px 13px; border-radius: 999px;
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.topbar-btn:active { background: var(--navy-soft); border-color: var(--accent); }
.msg-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 999px; background: #e5194f; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}

/* ══ Openingsstatus ══════════════════════════════════════════════════
   Een regel met een stip, geen volle gekleurde balk: open zijn is de
   normale toestand en hoeft niet te schreeuwen. Dicht wél. */
#status-bar { display: none; padding: 0 20px 12px; font-size: 13px; font-weight: 500; text-align: left; }
#status-bar.open, #status-bar.closed { display: flex; align-items: center; gap: 8px; }
#status-bar::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
#status-bar.open { color: var(--ink-3); border-bottom: none; background: none; }
#status-bar.open::before { background: var(--green); }
#status-bar.closed {
  color: #a03027; background: var(--red-bg); border-bottom: 1px solid #f0c4bf;
  padding: 11px 20px; font-weight: 600; margin-bottom: 2px;
}
#status-bar.closed::before { background: #c0392b; }
html[data-theme="dark"] #status-bar.closed { background: #3a1a16; color: #ffb4aa; border-bottom-color: #5a2b26; }
html[data-theme="dark"] #status-bar.open::before { background: #6bbf8d; }

/* ══ Navigatie — vaste onderbalk ═════════════════════════════════════ */
#tabs {
  display: flex; gap: 4px; align-items: center;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
  padding: 8px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-2); border-top: 1px solid var(--hairline); border-bottom: none;
}
#tabs .tab {
  flex: 1; min-height: var(--tap); padding: 10px 0; text-align: center;
  background: none; border: none; border-radius: 12px;
  font-size: 13px; font-weight: 500; color: var(--ink-4); cursor: pointer;
  /* style.css's POS .tab is uppercase + gespatieerd; hier niet. */
  text-transform: none; letter-spacing: 0; transition: none;
}
#tabs .tab.active { color: var(--accent); font-weight: 600; background: var(--navy-soft); border-bottom: none; }

.main-tab { display: none; padding: 4px 20px calc(var(--nav-h) + 90px); }
.main-tab.active { display: block; }

/* ══ Menu — lijst met volle-breedte rijen ════════════════════════════ */
.menu-cat-hdr {
  position: sticky; top: 56px; z-index: 5;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cat-accent, var(--accent));
  margin: 26px 0 6px; padding: 8px 0;
  background: var(--paper); border-radius: 0; border-left: none;
}
.menu-cat-hdr::after { content: ''; flex: 1; height: 1px; background: var(--stroke); }
.menu-cat-hdr:first-child { margin-top: 4px; }

.menu-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.menu-card {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center; column-gap: 14px; row-gap: 2px;
  background: none; border-radius: 0; box-shadow: none;
  padding: 11px 0; text-align: left;
  border-bottom: 1px solid var(--rule);
}
.menu-card.sold-out { opacity: 1; }
.menu-card.sold-out .menu-card-name,
.menu-card.sold-out .menu-card-price { color: var(--ink-4); }
.menu-card-emoji {
  grid-column: 1; grid-row: 1 / span 2;
  width: 52px; height: 52px; border-radius: 12px; background: var(--warm);
  font-size: 26px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.menu-card-emoji img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.menu-card-name { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); align-self: end; }
.menu-card-price { grid-column: 2; grid-row: 2; font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; align-self: start; }
.sold-out-lbl {
  grid-column: 3; grid-row: 1 / span 2;
  font-size: 12px; font-weight: 600; color: var(--ink-4);
  background: var(--warm); padding: 8px 12px; border-radius: 999px;
  margin-top: 0; white-space: nowrap;
}

/* Stepper: 0 → één ronde +, daarna een navy pil met − aantal +.
   De JS rendert altijd alle drie; de "leeg"-staat komt van .qty-0. */
.qty-stepper {
  grid-column: 3; grid-row: 1 / span 2;
  display: flex; align-items: center; gap: 4px; margin-top: 0;
  background: var(--accent); border-radius: 999px; padding: 4px;
}
.qty-stepper button {
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.16); color: #fff;
  font-size: 19px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.qty-stepper button:active { background: rgba(255,255,255,.3); }
.qty-stepper span { min-width: 22px; text-align: center; color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .qty-stepper button,
html[data-theme="dark"] .qty-stepper span { color: #10192a; }
html[data-theme="dark"] .qty-stepper button { background: rgba(16,25,42,.14); }

/* Niets in het mandje: alleen een + knop, geen lege pil met een 0 erin. */
.qty-stepper.qty-0 { background: none; padding: 0; gap: 0; }
.qty-stepper.qty-0 span,
.qty-stepper.qty-0 button:first-child { display: none; }
.qty-stepper.qty-0 button:last-child {
  width: var(--tap); height: var(--tap);
  background: var(--surface); border: 1px solid var(--stroke-2); color: var(--accent);
  font-size: 22px;
}

.empty-state { padding: 48px 20px; text-align: center; color: var(--ink-4); font-size: 14px; line-height: 1.6; }

/* ══ Mandjebalk ══════════════════════════════════════════════════════ */
#cart-bar {
  display: none; position: fixed; left: 16px; right: 16px;
  bottom: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom, 0px));
  background: var(--accent); color: #fff; border-radius: 14px; padding: 14px 18px;
  align-items: center; justify-content: space-between; gap: 12px;
  box-shadow: 0 8px 22px rgba(30,58,95,.28); cursor: pointer; z-index: 20;
}
#cart-bar.show { display: flex; }
#cart-summary { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cart-cta { font-weight: 600; font-size: 15px; background: rgba(255,255,255,.16); padding: 9px 16px; border-radius: 999px; white-space: nowrap; }
#cart-bar.offline { background: var(--ink-4); cursor: default; box-shadow: none; }
html[data-theme="dark"] #cart-bar { color: #10192a; box-shadow: none; }
html[data-theme="dark"] .cart-cta { background: rgba(16,25,42,.14); }

/* ══ Bestellingen ════════════════════════════════════════════════════ */
.order-card {
  background: var(--surface); border: 1px solid var(--stroke); border-radius: 16px;
  box-shadow: none; padding: 18px; margin-bottom: 14px;
}
.order-card-hdr { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.order-status { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.status-open { background: var(--navy-soft); color: var(--accent); }
.status-ready { background: var(--green-bg); color: var(--green); }
.status-collected { background: var(--warm); color: var(--ink-4); }
.status-cancelled { background: var(--red-bg); color: var(--red); }
.order-card-code { font-size: 11px; color: var(--ink-4); letter-spacing: .02em; margin: -4px 0 8px; }
.order-card-items { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 0; }
.order-card-total { font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; margin-top: 12px; }
.order-card-actions { display: flex; gap: 8px; margin-top: 14px; }
/* Unpaid order: pay-or-cancel stacked vertically, payment button first/on top. */
.order-card-actions.stacked { flex-direction: column; }
.order-card-actions.stacked .order-action { flex: 0 0 auto; } /* full width, natural height */
.order-action {
  flex: 1; min-height: var(--tap); padding: 11px 14px; border-radius: 999px;
  border: 1px solid var(--stroke-2); background: var(--surface); color: var(--ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.order-action:active { background: var(--warm); }
/* The "Opnieuw betalen" primary action — matches .btn-primary (accent has a
   literal fallback so it can't render invisible if css/style.css is missing). */
.order-action.pay { background: var(--accent, #1e3a5f); color: #fff; border-color: var(--accent, #1e3a5f); }
html[data-theme="dark"] .order-action.pay { color: #10192a; }
.order-action.danger { flex: 0 0 auto; color: var(--red); border-color: #f0d9d5; background: var(--surface); }

.order-payment { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-3); }
.order-payment.paid { color: var(--green); font-weight: 600; }
.order-payment.failed, .order-payment.expired { color: var(--red); font-weight: 600; }
.order-payment .link-btn { display: inline; width: auto; min-height: 0; margin-left: 6px; font-size: 13px; padding: 0; }

/* ══ Checkout — nu een volledig herzienbaar mandjescherm ═════════════
   Vult (bijna) het hele scherm i.p.v. een half sheet: de klant kan
   rustig nalezen wat hij besteld heeft vóór hij betaalt. */
#checkout-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; align-items: flex-end; justify-content: center; }
#checkout-overlay.show { display: flex; }
#checkout-box {
  background: var(--paper); width: 100%; max-width: 480px;
  border-radius: 20px 20px 0 0; height: 94vh; max-height: 94vh;
  display: flex; flex-direction: column; overflow: hidden;
}
#checkout-hdr {
  background: var(--paper); color: var(--ink); padding: 20px 22px 16px;
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  border-bottom: 1px solid var(--hairline);
}
#checkout-body { padding: 18px 22px; overflow-y: auto; flex: 1; }

/* Herzienbare regels: naam + eenheidsprijs, stepper, regeltotaal. */
.co-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.co-item-name { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.co-item-unit { font-size: 13px; color: var(--ink-4); margin-top: 2px; font-variant-numeric: tabular-nums; }
.co-item-total { min-width: 62px; text-align: right; font-size: 15px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.co-stepper {
  display: flex; align-items: center; gap: 3px;
  border: 1px solid var(--stroke-2); background: var(--surface); border-radius: 999px; padding: 3px;
}
.co-stepper button {
  width: 34px; height: 34px; border-radius: 50%; border: none; background: none;
  color: var(--ink-2); font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.co-stepper button:active { background: var(--warm); }
.co-stepper span { min-width: 20px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

.co-line { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; color: var(--ink-3); padding: 5px 0; border-bottom: none; font-variant-numeric: tabular-nums; }
#checkout-total { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.co-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 20px; font-weight: 700; color: var(--ink);
  padding: 12px 0 0; margin-bottom: 4px;
  border-top: none; border-bottom: none;
  font-variant-numeric: tabular-nums;
}
/* Stacked, not side by side: the primary "Bevestig en betaal" on top, "Annuleren"
   full-width beneath it — so the pay button is never squeezed off the edge. */
#checkout-footer { padding: 14px 22px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; background: var(--paper); border-top: 1px solid var(--hairline); }
#checkout-footer button { flex: 0 0 auto; width: 100%; margin-top: 0; }

/* ══ Betaling bezig ══════════════════════════════════════════════════ */
#payment-wait { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; align-items: center; justify-content: center; }
#payment-wait.show { display: flex; }
#payment-wait-box { background: var(--surface); border-radius: 18px; padding: 28px 34px; text-align: center; font-size: 15px; font-weight: 600; max-width: 80vw; color: var(--ink); }
.payment-wait-hint { margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.spinner { width: 28px; height: 28px; margin: 0 auto 14px; border: 3px solid var(--stroke); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ══ Bedankt-scherm ══════════════════════════════════════════════════ */
#success-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 250; align-items: center; justify-content: center; padding: 20px; }
#success-overlay.show { display: flex; }
#success-box { background: var(--surface); width: 100%; max-width: 400px; border-radius: 20px; padding: 30px 26px; text-align: left; max-height: 90vh; overflow-y: auto; }
#success-icon { font-size: 40px; line-height: 1; margin-bottom: 14px; }
#success-title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); margin-bottom: 8px; }
#success-sub { font-size: 14px; color: var(--ink-3); line-height: 1.6; margin-bottom: 22px; }
#success-summary { text-align: left; margin-bottom: 22px; }
#success-summary:empty { display: none; }
#success-summary .co-line { font-size: 14px; padding: 7px 0; color: var(--ink-2); }
#success-summary .co-total { font-size: 18px; padding: 12px 0 0; margin-top: 8px; border-top: 1px solid var(--stroke); }
.success-code { font-size: 12px; color: var(--ink-4); letter-spacing: .02em; margin-bottom: 8px; }
.success-pickup { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--stroke); }
#success-footer { display: flex; flex-direction: column; gap: 10px; }
#success-footer button { margin-top: 0; }
#success-push { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--stroke); }
#success-push button { width: 100%; }

/* ══ Toestemming bij registreren ═════════════════════════════════════ */
.reg-consent { display: flex; align-items: flex-start; gap: 11px; margin: 8px 0 16px; font-size: 13px; line-height: 1.5; color: var(--ink-3); cursor: pointer; }
.reg-consent input { width: 20px; height: 20px; margin-top: 1px; flex-shrink: 0; cursor: pointer; accent-color: var(--accent); }

/* ══ Berichten van de winkel ═════════════════════════════════════════ */
#message-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 130; align-items: center; justify-content: center; padding: 20px; }
#message-overlay.show { display: flex; }
#message-box { background: var(--surface); width: 100%; max-width: 420px; border-radius: 20px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; }
#message-hdr { background: var(--surface); color: var(--ink); padding: 22px 24px 14px; font-size: 20px; font-weight: 700; letter-spacing: -.02em; flex-shrink: 0; border-bottom: 1px solid var(--rule); }
#message-body { padding: 4px 24px; overflow-y: auto; }
#message-footer { padding: 14px 24px calc(22px + env(safe-area-inset-bottom, 0px)); flex-shrink: 0; }
#message-footer button { width: 100%; }
.msg-item { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.msg-item:last-child { border-bottom: none; }
.msg-item-hdr { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.msg-item-hdr .msg-title { margin-bottom: 4px; }
.msg-del { flex-shrink: 0; background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 6px; border-radius: 8px; opacity: .5; }
.msg-del:hover { opacity: 1; background: var(--red-bg); }
.msg-item .msg-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.msg-item .msg-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-item .msg-when { font-size: 12px; color: var(--ink-4); margin-top: 7px; }
.msg-item.unread .msg-title::before { content: '●'; color: #c0392b; font-size: 11px; margin-right: 7px; vertical-align: middle; }
.msg-item.unread .msg-title::after { content: none; }

/* ══ Mijn gegevens ═══════════════════════════════════════════════════ */
#profile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 100; align-items: flex-end; justify-content: center; }
#profile-overlay.show { display: flex; }
#profile-box { background: var(--paper); width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
#profile-hdr { background: var(--paper); color: var(--ink); padding: 20px 22px 16px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; border-bottom: 1px solid var(--hairline); }
#profile-body { padding: 18px 22px; overflow-y: auto; }
#profile-footer { padding: 14px 22px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; gap: 10px; background: var(--paper); border-top: 1px solid var(--hairline); }
#profile-footer button { flex: 1; margin-top: 0; }
#profile-body input:disabled { background: var(--warm); color: var(--ink-4); cursor: default; }
.field-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-4); line-height: 1.5; }
#pf-push-row label, #pf-theme-row label { font-size: 15px; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 500; }
#pf-push-row input[type="checkbox"], #pf-theme-row input[type="checkbox"] { width: 20px !important; height: 20px !important; accent-color: var(--accent); }

/* ══ Toast ═══════════════════════════════════════════════════════════ */
#toast {
  position: fixed; bottom: calc(var(--nav-h) + 24px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--paper); padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; opacity: 0; transition: all .3s; z-index: 300;
  white-space: nowrap; pointer-events: none; max-width: 90vw; overflow: hidden; text-overflow: ellipsis;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ Donkere modus — oppervlakken die deze app hardcodeert ═══════════ */
html[data-theme="dark"] #auth-box,
html[data-theme="dark"] #shop-box { background: none; }
html[data-theme="dark"] .shop-choice,
html[data-theme="dark"] .menu-card-emoji,
html[data-theme="dark"] .order-card,
html[data-theme="dark"] #payment-wait-box,
html[data-theme="dark"] #success-box,
html[data-theme="dark"] #message-box,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .topbar-btn { background: var(--surface); }
html[data-theme="dark"] .menu-card-emoji { background: #22262d; }
html[data-theme="dark"] #checkout-box,
html[data-theme="dark"] #profile-box,
html[data-theme="dark"] #checkout-hdr,
html[data-theme="dark"] #profile-hdr,
html[data-theme="dark"] #checkout-footer,
html[data-theme="dark"] #profile-footer { background: var(--paper); }
html[data-theme="dark"] #message-hdr { background: var(--surface); }
html[data-theme="dark"] .auth-tab.active { box-shadow: inset 0 -2px 0 var(--accent); }
html[data-theme="dark"] .link-btn,
html[data-theme="dark"] #tabs .tab.active,
html[data-theme="dark"] .status-open,
html[data-theme="dark"] .qty-stepper.qty-0 button:last-child { color: var(--accent); }