/* ============================================================================
   DreamPOS Customer App — app-schil bovenop de bestel-app (bestellen.html).
   Mobiel eerst. Gebruikt de bestaande merkvariabelen van de bestelsite
   (--ink/--paper/--cream/--gold/--gold2/--line/--muted) zodat de branding van
   de zaak doorwerkt zonder een tweede designtaal te introduceren.
   ========================================================================== */

/* ── 1. Scroll-grendel voor het account-scherm ───────────────── */
body.dpa-noscroll{overflow:hidden}

/* ── 2. Servicebalk (welke dienst is actief) ────────────────────────────── */
.dpa-svcbar{
  display:none;align-items:center;gap:8px;
  padding:8px 14px;background:var(--cream,#f5ede0);border-bottom:1px solid var(--line,#e4d9cc);
  font-size:13px;position:sticky;top:64px;z-index:95;
}
.dpa-svcbar.show{display:flex}
.dpa-svcbar-ico{font-size:16px;flex:none}
.dpa-svcbar-txt{flex:1;min-width:0;font-weight:800;color:var(--ink,#0e0a06);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpa-svcbar-txt small{display:block;font-weight:600;font-size:11.5px;color:var(--muted,#7a6a58)}
.dpa-svcbar-btn{
  flex:none;background:#fff;border:1px solid var(--line,#e4d9cc);border-radius:999px;
  padding:6px 12px;font:inherit;font-size:12px;font-weight:800;color:var(--ink,#0e0a06);cursor:pointer;
}
.dpa-svcbar-btn:hover{border-color:var(--gold,#c9952a)}
.dpa-svcbar.table{background:linear-gradient(90deg,rgba(201,149,42,.18),rgba(232,192,106,.08))}
.dpa-tableflow{display:none;position:fixed;left:0;right:0;bottom:0;z-index:900;align-items:stretch;justify-content:center;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:#fff;border-top:1px solid var(--line,#eadfce);box-shadow:0 -5px 18px rgba(14,10,6,.12)}
.dpa-tableflow.show{display:flex}
/* In het afrekenscherm heeft de bevestigingsknop voorrang. De tafelbalk komt
   meteen terug na Terug of Sluiten en mag de submitknop nooit bedekken. */
body.dpa-checkout-open .dpa-tableflow{display:none!important}
.dpa-tableflow span,.dpa-tableflow button{min-width:0;flex:1;display:flex;align-items:center;justify-content:center;gap:3px;padding:6px 3px;border:0;background:transparent;color:var(--muted,#7a6a58);font:700 10.5px/1.15 var(--font-body,Arial);text-align:center}
.dpa-tableflow button{cursor:pointer}
.dpa-tableflow b{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cream,#f5ede0);color:var(--ink,#0e0a06);font-size:12px}
.dpa-tableflow .dpa-tableflow-info{flex:.85;flex-direction:column;color:var(--ink,#0e0a06);font-variant-numeric:tabular-nums;border-right:1px solid var(--line,#eadfce)}
.dpa-tableflow-info strong{font-size:11.5px}
.dpa-tableflow [data-table-action="more"]{flex:1.45;margin:0 3px;padding:7px 6px;border-radius:10px;background:linear-gradient(135deg,var(--red,#9f1d18),var(--red2,#73110e));color:#fff;font-size:11.5px;font-weight:850}
.dpa-tableflow [data-table-action="more"] b{background:rgba(255,255,255,.2);color:#fff}
.dpa-tableflow [data-table-action="more"][disabled]{cursor:wait;opacity:.72;filter:saturate(.75);box-shadow:none}
.dpa-tableflow [data-table-action="waiter"][disabled]{cursor:wait;opacity:.65}
body.dpa-table-order{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
body.dpa-table-order .mobile-bar{display:none!important}
body.dpa-dinein #cartCheckoutBtn{display:none!important}
/* dpa-table-order staat pas aan zodra de checkout opent; tijdens het bladeren
   door de kaart stond deze balk (Filters/Mand) dus nog gewoon te wachten
   boven de vaste tafel-onderbalk. Aan tafel loopt alles via die onderbalk. */
body.dpa-dinein .mobile-bar{display:none!important}
.dpa-tableflow .done,.dpa-tableflow .current{color:var(--ink,#0e0a06)}
.dpa-tableflow .done b{background:#dcfce7;color:#15803d}
.dpa-tableflow .current b{background:var(--gold,#c9952a);color:#fff}

/* ── 3. Account-hub (volledig scherm) ───────────────────────────────────── */
.dpa-acc{
  position:fixed;inset:0;z-index:1900;display:none;
  background:var(--paper,#fdf8f2);color:var(--ink,#0e0a06);
  flex-direction:column;
}
.dpa-acc.open{display:flex}
.dpa-acc-head{
  flex:none;background:var(--ink,#0e0a06);color:#fff;
  padding:calc(14px + env(safe-area-inset-top)) 16px 16px;
}
.dpa-acc-head-row{display:flex;align-items:center;gap:12px}
.dpa-acc-back{
  background:rgba(255,255,255,.12);border:0;color:#fff;width:36px;height:36px;border-radius:50%;
  font-size:17px;cursor:pointer;flex:none;line-height:1;
}
.dpa-acc-head h2{font-family:var(--font-head,Georgia,serif);font-size:21px;font-weight:900;margin:0;flex:1;min-width:0}
.dpa-acc-head .dpa-acc-mail{font-size:12px;color:rgba(255,255,255,.55);margin-top:2px;font-weight:500}
.dpa-acc-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 14px calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;
}
.dpa-acc-body>*+*{margin-top:12px}

.dpa-card{
  background:#fff;border:1px solid var(--line,#e4d9cc);border-radius:16px;padding:14px;
  box-shadow:0 2px 10px rgba(14,10,6,.05);
}
.dpa-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.dpa-card-h h3{font-size:14px;font-weight:900;letter-spacing:-.1px;margin:0;display:flex;align-items:center;gap:7px}
.dpa-card-h a,.dpa-card-h button.link{
  background:none;border:0;font:inherit;font-size:12.5px;font-weight:700;color:var(--gold,#c9952a);cursor:pointer;padding:0;
}
.dpa-empty{font-size:13px;color:var(--muted,#7a6a58);line-height:1.55;text-align:center;padding:14px 6px}

/* Inlogpoort binnen het account */
.dpa-gate{text-align:center;padding:22px 12px}
.dpa-gate .ico{font-size:38px;margin-bottom:10px}
.dpa-gate h3{font-size:17px;font-weight:900;margin:0 0 6px}
.dpa-gate p{font-size:13px;color:var(--muted,#7a6a58);line-height:1.55;margin:0 0 14px}

.dpa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:12px;font:inherit;font-size:14.5px;font-weight:800;
  padding:13px 18px;cursor:pointer;min-height:48px;width:100%;
  background:linear-gradient(135deg,var(--gold,#c9952a),var(--gold2,#e8c06a));color:#1a1206;
}
.dpa-btn.ghost{background:#fff;border:1px solid var(--line,#e4d9cc);color:var(--ink,#0e0a06)}
.dpa-btn.danger{background:#fff;border:1px solid #f0c9c9;color:#b91c1c}
.dpa-btn.sm{min-height:38px;padding:8px 14px;font-size:13px;width:auto}
.dpa-btn:disabled{opacity:.5;cursor:not-allowed}

/* Aan tafel gaat dit scherm over DEZE maaltijd (rekening, tafelstatus); profiel/
   voordelen/geschiedenis horen bij een ander moment en staan hierachter verstopt.
   margin-top:auto (samen met .dpa-acc-body als flex-kolom hierboven) duwt deze
   regel naar de onderkant van het scherm i.p.v. los te blijven hangen vlak onder
   de rekening — zo oogt het als een echt afrekenscherm: kaart boven, actie onderaan. */
.dpa-more{margin-top:auto}
.dpa-more>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:12px 14px;border:1px dashed var(--line,#e4d9cc);border-radius:14px;
  font-size:13px;font-weight:800;color:var(--muted,#7a6a58);
}
.dpa-more>summary::-webkit-details-marker{display:none}
.dpa-more>summary:after{content:'▾';margin-left:auto;font-size:11px;transition:transform .15s}
.dpa-more[open]>summary:after{transform:rotate(180deg)}
.dpa-more>*+*{margin-top:12px}

/* ── 4. Loyalty-kaart ───────────────────────────────────────────────────── */
.dpa-loy{
  background:linear-gradient(135deg,#1a1206,#3a2a12 55%,#0e0a06);
  color:#fff;border:1px solid rgba(232,192,106,.35);border-radius:18px;padding:16px;
  position:relative;overflow:hidden;
}
.dpa-loy:before{
  content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,192,106,.26),transparent 70%);
}
.dpa-loy-top{display:flex;align-items:baseline;gap:8px;position:relative}
.dpa-loy-pts{font-family:var(--font-head,Georgia,serif);font-size:34px;font-weight:900;line-height:1;color:var(--gold2,#e8c06a)}
.dpa-loy-lbl{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.5px;text-transform:uppercase}
.dpa-loy-msg{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.85);margin-top:9px;position:relative}
.dpa-loy-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.14);margin-top:12px;overflow:hidden;position:relative}
.dpa-loy-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold,#c9952a),var(--gold2,#e8c06a));transition:width .5s ease}
.dpa-loy-perks{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;position:relative}
.dpa-loy-perk{
  font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.8);
}
.dpa-loy-perk.ready{background:rgba(34,197,94,.18);border-color:rgba(34,197,94,.5);color:#bbf7d0}
.dpa-loy-vip{
  position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:900;letter-spacing:1px;
  padding:4px 9px;border-radius:999px;background:rgba(232,192,106,.9);color:#1a1206;
}

/* ── 5. Actieve bestelling ──────────────────────────────────────────────── */
.dpa-live{border-color:rgba(34,197,94,.45);background:linear-gradient(180deg,rgba(34,197,94,.07),#fff)}
.dpa-live-steps{display:flex;gap:6px;margin:12px 0 4px}
.dpa-live-step{flex:1;text-align:center}
.dpa-live-step .bar{height:5px;border-radius:999px;background:var(--line,#e4d9cc)}
.dpa-live-step.on .bar{background:#22c55e}
.dpa-live-step .lbl{font-size:10.5px;font-weight:700;color:var(--muted,#7a6a58);margin-top:5px;display:block}
.dpa-live-step.on .lbl{color:#15803d}
.dpa-live-eta{font-size:13px;color:var(--muted,#7a6a58);margin-top:8px;line-height:1.5}
.dpa-live-eta b{color:var(--ink,#0e0a06)}

/* ── 6. Bestelgeschiedenis / rijen ──────────────────────────────────────── */
.dpa-row{
  display:flex;align-items:center;gap:11px;padding:11px 0;border-top:1px solid var(--line,#e4d9cc);
}
.dpa-card>.dpa-row:first-of-type{border-top:0;padding-top:2px}
.dpa-row-ico{
  width:40px;height:40px;flex:none;border-radius:12px;background:var(--cream,#f5ede0);
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.dpa-row-txt{flex:1;min-width:0}
.dpa-row-txt b{display:block;font-size:13.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpa-row-txt span{display:block;font-size:11.5px;color:var(--muted,#7a6a58);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpa-row-act{flex:none;display:flex;gap:6px;align-items:center}
.dpa-pill{
  font-size:11px;font-weight:800;padding:4px 9px;border-radius:999px;
  background:var(--cream,#f5ede0);color:var(--muted,#7a6a58);white-space:nowrap;
}
.dpa-pill.ok{background:rgba(34,197,94,.15);color:#15803d}
.dpa-pill.wait{background:rgba(245,158,11,.16);color:#b45309}
.dpa-reorder{
  background:linear-gradient(135deg,var(--gold,#c9952a),var(--gold2,#e8c06a));color:#1a1206;
  border:0;border-radius:999px;font:inherit;font-size:12px;font-weight:900;padding:8px 13px;
  cursor:pointer;white-space:nowrap;min-height:36px;
}
.dpa-reorder:active{transform:scale(.96)}

/* ── 7. Favorieten ──────────────────────────────────────────────────────── */
.dpa-fav-btn{
  position:absolute;top:8px;right:8px;z-index:3;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.86);backdrop-filter:blur(4px);
  box-shadow:0 2px 8px rgba(14,10,6,.18);
  font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;
  color:#c9c2b8;transition:transform .15s ease,color .15s;
  -webkit-tap-highlight-color:transparent;
}
.dpa-fav-btn.on{color:#e0245e}
.dpa-fav-btn:active{transform:scale(.85)}
.menu-card{position:relative}

.dpa-fav-grid{display:grid;grid-template-columns:1fr;gap:0}
.dpa-favresto{
  display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line,#e4d9cc);
  cursor:pointer;
}
.dpa-favresto:first-child{border-top:0}
.dpa-favresto .logo{
  width:42px;height:42px;border-radius:13px;flex:none;object-fit:cover;
  background:linear-gradient(135deg,var(--red,#8b1a1a),var(--gold,#c9952a));
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:17px;
}

/* ── 8. Adressen & gegevens ─────────────────────────────────────────────── */
.dpa-field{margin-bottom:10px}
.dpa-field label{display:block;font-size:11.5px;font-weight:800;color:var(--muted,#7a6a58);margin-bottom:5px}
.dpa-field input{
  width:100%;border:1px solid var(--line,#e4d9cc);border-radius:11px;padding:12px 13px;
  font:inherit;font-size:15px;background:#fff;color:var(--ink,#0e0a06);min-height:46px;
}
.dpa-field input:focus{outline:0;border-color:var(--gold,#c9952a);box-shadow:0 0 0 3px rgba(201,149,42,.14)}
.dpa-field-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}

/* ── 9. Accountknop in de mobiele onderbalk ─────────────────────────────── */
.mobile-bar .dpa-mob-acc{position:relative}
.dpa-mob-dot{
  position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;
  background:#22c55e;box-shadow:0 0 0 2px rgba(14,10,6,.9);
}

/* ── 10. Tafel-invoer (dine-in zonder QR) ───────────────────────────────── */
.dpa-tablemodal{
  position:fixed;inset:0;z-index:2100;display:none;align-items:center;justify-content:center;
  background:rgba(14,10,6,.72);padding:20px;
}
.dpa-tablemodal.open{display:flex}
.dpa-tablemodal-box{
  background:var(--paper,#fdf8f2);border-radius:20px;padding:22px;width:100%;max-width:340px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.dpa-tablemodal-box h3{font-size:18px;font-weight:900;margin:0 0 6px}
.dpa-tablemodal-box p{font-size:13px;color:var(--muted,#7a6a58);line-height:1.5;margin:0 0 14px}
.dpa-tablemodal-box input{
  width:100%;text-align:center;font-size:30px;font-weight:900;letter-spacing:2px;
  border:2px solid var(--line,#e4d9cc);border-radius:14px;padding:14px;margin-bottom:12px;
  font-family:var(--font-head,Georgia,serif);background:#fff;color:var(--ink,#0e0a06);
}
.dpa-tablemodal-box input:focus{outline:0;border-color:var(--gold,#c9952a)}
.dpa-table-choice{display:flex;gap:8px;margin:0 0 10px}.dpa-table-choice .dpa-btn{flex:1;padding:10px 8px}
.dpa-tablemodal-actions{display:flex;gap:8px}
.dpa-tablemodal-actions .dpa-btn{flex:1}

/* ── 11. Kijkmodus (ter plaatse, zaak laat niet aan tafel bestellen) ─────
   De kaart blijft volledig zichtbaar — foto's, prijzen, allergenen — maar alles
   wat naar een mand leidt verdwijnt. Een knop die nergens heen gaat is erger dan
   geen knop. */
body.dpa-view-only .add-btn,
body.dpa-view-only .qty-row,
body.dpa-view-only .mobile-bar .btn-red,
body.dpa-view-only .cart-panel,
body.dpa-view-only .cart-backdrop,
body.dpa-view-only .lb-cart,
body.dpa-view-only .cart-suggest{display:none!important}
body.dpa-view-only .menu-card{cursor:default}

/* ── 12. Afrekenen aan tafel: alles wat over bezorgen/afhalen gaat, weg ── */
body.dpa-table-order #cartSchedule,
body.dpa-table-order #orderScheduleBlock,
body.dpa-table-order #deliveryAddressBlock,
body.dpa-table-order #coAsapHint,
body.dpa-table-order #coClosedNotice,
body.dpa-table-order .checkout-service-row,
body.dpa-table-order #cartSvcTakeaway,
body.dpa-table-order #cartSvcDelivery{display:none!important}
/* Betalen hoort NIET bij het versturen van een tafelbestelling. De gast is nog niet
   klaar — er komt nog een dessert of een tweede pint bij — en hij rekent af bij de
   bediening wanneer de tafel klaar is. Een betaalkeuze hier duwt hem naar Bancontact
   voor een half bord, en dan staat de rest van de avond op een aparte rekening. */
body.dpa-table-order .modal-field:has(#paymentChoice){display:none!important}
/* E-mail (bevestigingsmail), marketingtoestemming en "vergeet mijn gegevens" zijn
   webshop-reflexen — nuttig als je thuis op een bevestiging wacht, overbodig als je
   aan tafel zit en de bediening zo terugkomt. Naam + telefoon(optioneel) + opmerking
   blijven staan: naam komt op de bon, opmerking is waar een allergie terechtkomt. */
body.dpa-table-order .modal-field:has(#coEmail),
body.dpa-table-order #checkoutMarketingRow,
body.dpa-table-order #coForgetMeRow{display:none!important}

/* ── 13b. Mijn tafel: de lopende rekening in het account-scherm ───────────
   Voor een gast aan tafel is dit hét scherm: wat staat er al op mijn rekening, wat
   kost het samen, en hoe reken ik af. Bewust dezelfde kaart-opmaak als de rest van
   het paneel — het is geen apart product, het is wat er hier het eerst hoort. */
.dpa-bill-sub{font-size:11.5px;font-weight:700;color:var(--muted,#7a6a58);text-transform:uppercase;letter-spacing:.4px;margin:-2px 0 7px}
.dpa-bill{border:1px solid var(--line,#e4d9cc);border-radius:10px;padding:2px 11px;background:#fff}
/* Zelfde ritme als een echte mandregel (.cart-item: padding 7px 0 + lijntje) in
   plaats van krap op elkaar — dit IS de rekening, mag er ook zo uitzien. */
.dpa-bill-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;line-height:1.4;padding:7px 0}
.dpa-bill-row:not(.total){border-bottom:1px solid var(--line,#e4d9cc)}
.dpa-bill-row span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.dpa-bill-row.total{border-top:0;margin-top:2px;padding-top:8px;font-weight:900;font-size:15px}
.dpa-bill-asked{margin-top:9px;padding:9px 11px;border-radius:10px;background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.35);color:#15803d;font-size:12.5px;font-weight:700;line-height:1.45}
.dpa-tablebill .dpa-btn{margin-top:9px}
.dpa-btn-row{display:flex;gap:8px;margin-top:9px}
/* "Order something else" is te lang om op de helft van de breedte op één regel te
   passen op de tekst-grootte van de gewone .dpa-btn; zonder correctie werd deze knop
   (en door de flex-rij zijn buur) 2 regels hoog — merkbaar groter dan "Ask for the
   bill" eronder. Kleinere tekst + geen terugval op een 2e regel houdt ze gelijk. */
.dpa-btn-row .dpa-btn{flex:1;margin-top:0;font-size:12.5px;padding:13px 6px;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dpa-btn.gold{background:linear-gradient(135deg,var(--gold,#c9952a),var(--gold2,#e8c06a));color:#000;border:0}
.dpa-paychoice{margin-top:10px;padding:11px;border:1px solid var(--gold,#c9952a);border-radius:12px;
  background:linear-gradient(135deg,rgba(201,149,42,.12),rgba(232,192,106,.05))}
.dpa-paychoice-q{font-size:13px;font-weight:800;line-height:1.45;margin-bottom:9px;color:var(--ink,#0e0a06)}
.dpa-paychoice-btns{display:flex;gap:8px}
.dpa-paychoice-btns .dpa-btn{flex:1;margin-top:0}
.dpa-link{display:block;width:100%;margin-top:8px;background:none;border:0;padding:4px;
  font:inherit;font-size:12px;color:var(--muted,#7a6a58);text-decoration:underline;cursor:pointer}

/* ── 14. App-modus: de gast zit IN de zaak ────────────────────────────────
   Wie de QR op zijn tafel scant, komt niet op bezoek op een website. Hij wil de
   kaart en zijn mand, meer niet. Toch kreeg hij tot nu de volledige site op zijn
   gsm: een balk met "Home" en "Reserveren", en onderaan de complete voettekst met
   adres, telefoon, e-mail, openingsuren, "Volledig menu →" en downloadknoppen.
   Dat leest als een folder, niet als bestellen aan tafel — en op een klein scherm
   staat het vooral in de weg. In deze modus blijft staan wat hij aan tafel nodig
   heeft: de zaaknaam, zijn tafelnummer, de taalkeuze, zijn account en de mand.

   Alles op body.dpa-dinein: die klasse staat aan zodra "ter plaatse" actief is,
   dus ook wanneer de zaak niet aan tafel laat bestellen (kijkmodus). Ook dan is
   het de kaart van de zaal die telt, niet de website. */
body.dpa-dinein .nav-links{display:none!important}
body.dpa-dinein [data-dpa-web]{display:none!important}
/* De voettekst is de website — aan tafel staat hij tussen de kaart en de vaste
   onderbalk (tafel/mand/ober/rekening) in en hoort daar niet. Volledig weg. */
body.dpa-dinein footer{display:none!important}
/* De merknaam linkt normaal naar de website. Aan tafel is dat een uitgang die
   niemand zoekt — hij blijft staan als titel, zonder link (JS haalt de href weg). */
body.dpa-dinein .nav-brand{cursor:default}
/* Ademruimte: zonder de nav-links past de balk ruimer, dus mag de zaaknaam groter. */
@media(max-width:640px){
  body.dpa-dinein .nav-brand{font-size:19px}
  body.dpa-dinein .nav-inner{gap:8px}
}

/* ── 13. Desktop-verfijning ─────────────────────────────────────────────── */
@media(min-width:900px){
  .dpa-acc{left:auto;width:440px;box-shadow:-14px 0 44px rgba(14,10,6,.22)}
  .dpa-svcbar{top:64px}
}
@media(min-width:1200px){
  .dpa-svcbar{padding-left:24px;padding-right:24px}
}

/* ── 14. "Ik zit in de zaak" ────────────────────────────────────────────── */
.dpa-note{font-size:12.5px;color:var(--muted,#7a6a58);line-height:1.55;margin:0 0 12px}
.dpa-dine-on{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:8px;
  padding:7px 13px;border-radius:999px;font-size:13px;font-weight:800;
  background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.4);color:#15803d;
}
.dpa-service-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.dpa-service-switch .dpa-btn{padding:10px 8px;min-height:44px;font-size:13px}

/* Respecteer "minder beweging" */
@media(prefers-reduced-motion:reduce){
  .dpa-fav-btn,.dpa-loy-fill{transition:none}
}