/* ─── Custom properties ─────────────────────────────────────────────────────── */
:root {
  --bg:            #fbf8e9;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --input-bg:      #FFFFFF;
  --primary:       #015d2c;
  --primary-hover: #084420;
  --on-primary:    #FFFFFF;
  --accent:        #f0822b;
  --accent-light:  #fff3e8;
  /* Donkerder accent voor TEKST op een lichte accent-achtergrond (feature-/taste-tags,
     chip-hover, focus-links) — het felle --accent haalt op licht geen 4.5:1. */
  --accent-text:   #7a500a;
  /* Cuisine-tag behoudt zijn eigen, iets warmere accent-tint (oorspronkelijke light-waarde). */
  --accent-text-cuisine: #c06010;
  --matcha:        #c7d074;
  --text:          #111827;
  --text-secondary: #4B5563;
  --text-muted:    #6B7280;
  --text-disabled: #9CA3AF;
  --border:        #e0ddd0;
  --border-strong: #cfccbf;
  --focus-ring:    rgba(1,93,44,.20);
  /* Tonale vulling voor de randloze control-familie (nav-cluster, menu-hovers):
     rust/hover = --tint, actief/open = --tint-strong. Eén bron, licht + donker. */
  --tint:          rgba(17,24,39,.06);
  --tint-strong:   rgba(17,24,39,.11);
  --overlay:       rgba(0,0,0,.50);
  --shadow-sm:     0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --shadow-md:     0 4px 12px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:     0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     18px;
  /* Horizontale .container-padding — single source of truth, óók gebruikt door de
     full-bleed carrousel-breakout (.gallery) zodat de negatieve marge nooit méér
     terugneemt dan de container insprong en zo geen paginabrede overflow lekt.
     Override op ≤480px in de small-breakpoint. */
  --container-pad: 24px;
  /* Gedeelde galerij-kaart-verhouding — skeleton én .gallery-card-photo verwijzen
     hiernaar zodat de laad-footprint niet kan divergeren (geen layout-sprong). */
  --card-aspect:   4 / 5;
  /* Rechter rand-fade voor horizontale carrousels (cue: er staat meer naast). */
  --carousel-fade: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  --font-serif:    'Varela Round', system-ui, sans-serif;
  --font-sans:     'Inter', system-ui, sans-serif;
  /* Semantische status-kleuren - single source of truth voor badges, trends en meldingen. */
  --color-success:    #15803D;
  --color-success-bg: #DCFCE7;
  --color-warning:    #854D0E;
  --color-warning-bg: #FEF9C3;
  --color-error:      #B91C1C;
  --color-error-bg:   #FEE2E2;
  --color-info:       #1D4ED8;
  --color-info-bg:    #DBEAFE;
  /* Gereserveerd voor #108 (CMS-grafieken) - in #107 alleen GEDEFINIEERD, niet gebruikt. */
  --chart-1: #2E7D46;
  --chart-2: #E07B39;
  --chart-3: #2563EB;
  --chart-4: #7C3AED;
  --chart-5: #DB2777;
  --chart-6: #0E8C8C;
}

[data-theme="dark"] {
  --bg:            #14161A;
  --surface:       #1C1F24;
  --surface-2:     #24282E;
  --input-bg:      #101216;
  --primary:       #36C46F;
  --primary-hover: #4AD884;
  --on-primary:    #0B1F13;
  --accent:        #F2934A;
  --accent-light:  #2A1C10;
  --accent-text:   #F2934A;            /* op donkere accent-bg is het felle accent juist leesbaar */
  --accent-text-cuisine: #F2934A;      /* cuisine-tag deelt in dark dezelfde leesbare accent-tint */
  --matcha:        #c7d074;
  --text:          #E8EAED;
  --text-secondary: #B4B9C1;
  --text-muted:    #868D97;
  --text-disabled: #5A6069;
  --border:        #2A2E35;
  --border-strong: #363B43;
  --focus-ring:    rgba(54,196,111,.40);
  --tint:          rgba(255,255,255,.07);
  --tint-strong:   rgba(255,255,255,.13);
  --overlay:       rgba(0,0,0,.55);
  --shadow-sm:     0 1px 3px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.40);
  --shadow-md:     0 4px 16px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.45);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.55);
  --color-success:    #3DD68C;
  --color-success-bg: rgba(61,214,140,.14);
  --color-warning:    #E8B339;
  --color-warning-bg: rgba(232,179,57,.14);
  --color-error:      #F49AA0;
  --color-error-bg:   rgba(244,154,160,.14);
  --color-info:       #6BB6F0;
  --color-info-bg:    rgba(107,182,240,.14);
  /* Gereserveerd voor #108 - dark-variant. */
  --chart-1: #4ECB81;
  --chart-2: #F2934A;
  --chart-3: #6BB6F0;
  --chart-4: #A78BFA;
  --chart-5: #F472B6;
  --chart-6: #38BDF8;
}

/* ─── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Geen scroll-behavior: smooth op html — verstoort iOS Safari scroll-restoration */

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden; /* voorkomt horizontale paginascroll door negatieve marges (bijv. .gallery carrousel) */
}

img { max-width: 100%; display: block; }
a   { color: inherit; text-decoration: none; }

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ─── Header ────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
          backdrop-filter: blur(18px) saturate(140%);
  border-bottom: none;
  /* Heeft de visuele scheiding van een lijntje, maar dan zacht zodat de
     cream-hero erdoorheen kan ademen (glass-nav-pattern à la Linear/Vercel). */
  box-shadow:
    0 1px 0 rgba(15,30,15,.04),
    0 8px 24px -16px rgba(15,30,15,.10);
  transition: background .3s;
}
[data-theme="dark"] .site-header {
  background: rgba(20,22,26,0.72);   /* neutraal-antraciet glas-tint (matcht --bg #14161A) */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 16px;
}

/* ─── Announcement bar ──────────────────────────────────────────────────────── */
.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  /* Boven de hero (z:0) maar onder de nav (z:100) — nodig sinds de hero
     onder de glass-nav doorkruipt (margin-top:-64). De opake groene achtergrond
     blokkeert dat hero-prisma de aankondigingsbalk visueel overdekt. */
  z-index: 90;
  min-height: 44px;
  background: #015d2c;
  color: #fff;
  text-align: center;
  padding: 7px 48px;
  font-size: .875rem;
  line-height: 1.5;
}
.announcement-bar.is-hidden { display: none; }
.announcement-text { display: inline-flex; align-items: center; gap: 7px; }
.announcement-text .ico { color: #f0c98a; flex-shrink: 0; }
/* Tekst-content wrapt netjes als één flex-item; min-width:0 zodat lange zinnen
   mogen breken op woordgrenzen i.p.v. de container te oprekken. Voorheen lagen
   de tekst-fragmenten (Nu live in, <strong>Goes</strong>, — meer…) als aparte
   anonymous flex-items in .announcement-text, wat op smalle viewports tot
   rare uit-elkaar-spatting van de highlight leidde. */
.announcement-msg { min-width: 0; }
.announcement-highlight { color: #f6b76e; font-weight: 700; }

/* Mobiel: minder padding-links zodat de tekst niet onnodig hard wrapt. Rechts
   blijft 48px voor de close-button. */
@media (max-width: 480px) {
  .announcement-bar { padding: 7px 44px 7px 14px; font-size: .8125rem; }
}
.announcement-close {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255,255,255,.65);
  transition: background .15s, color .15s;
}
.announcement-close:hover { background: rgba(255,255,255,.14); color: #fff; }
[data-theme="dark"] .announcement-bar {
  background: #0d2318;
  color: rgba(240,246,252,.92);
}

/* ═══ Cashback-promotie-callout (Tabby trakteert) ════════════════════════════
   Kalme, sluitbare callout boven de restaurant-resultaten. Merkkleur-accent
   (--primary), NIET de felle CTA-kleur (--accent). Eigen component; alleen de
   localStorage-dismiss-mechaniek wordt met de announcement-bar gedeeld.
   Verbergen via .is-hidden (niet hard display:none in JS). */
.promo-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px 16px;
  background: rgba(1,93,44,.06);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-md);
}
.promo-callout.is-hidden { display: none; }
.promo-callout-ico { flex-shrink: 0; color: var(--primary); line-height: 0; margin-top: 2px; }
.promo-callout-ico .ico { width: 22px; height: 22px; }
.promo-callout-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.promo-callout-title {
  font-family: var(--font-serif);
  font-size: 1rem;            /* 16px */
  color: var(--primary);
  font-weight: 700;
}
.promo-callout-body {
  font-size: .875rem;          /* 14px — primaire tekst-vloer */
  color: var(--text-secondary);
  line-height: 1.5;
}
.promo-callout-close {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -8px -8px -8px auto;  /* rechts uitgelijnd; 44px tap target zonder de tekst te verdringen */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.promo-callout-close:hover { background: rgba(0,0,0,.05); color: var(--text); }
.promo-callout-close .ico { width: 18px; height: 18px; }
[data-theme="dark"] .promo-callout { background: rgba(54,196,111,.08); }
[data-theme="dark"] .promo-callout-close:hover { background: rgba(255,255,255,.08); }
@media (max-width: 480px) {
  .promo-callout { padding: 12px; gap: 10px; }
}

.logo-img { display: block; width: auto; }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--primary);
}

.logo-mark  { flex-shrink: 0; }
.logo-text  { font-family: var(--font-serif); letter-spacing: -.3px; }
.logo-a     { color: var(--accent); }
/* In dark valt de donkergroene SVG-badge (#1b5b2d) weg tegen de achtergrond.
   Een lichte ring via box-shadow geeft contrast zonder layout-shift en zonder
   de SVG-fills te wijzigen; niet hover-afhankelijk. */
[data-theme="dark"] .logo-mark { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }

/* ─── Nav links (midden, desktop) ───────────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  font-size: .875rem;
  font-weight: 400;
}

.nav-links a {
  color: var(--text-muted);
  position: relative;
  padding-bottom: 2px;
  transition: color .2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--text);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }

/* ─── Nav actions (rechts) ──────────────────────────────────────────────────── */
.nav-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.nav-cta {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 8px 20px;
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 500;
  transition: background .2s;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--primary-hover); color: #fff; }

/* ─── Nav knoppen ───────────────────────────────────────────────────────────── */
/* Randloze tonal ghost: rust transparant, hover/actief de gedeelde --tint.
   Eén familie met de taal-track en de user-pill (zie Taalwisselaar-blok). */
.btn-pill-toggle {
  background: none;
  border: none;
  border-radius: 100px;
  padding: 8px 16px;
  font-size: .875rem;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-sans);
  transition: background .15s, color .15s;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}
.btn-pill-toggle:hover  { background: var(--tint); }
.btn-pill-toggle:active { background: var(--tint-strong); }

/* Thema-knop: ronde 44×44 icoonknop, consistent met de hamburger */
#btnTheme {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.05rem;
  line-height: 1;
}

.btn-login {
  background: none;
  border: none;
  font-size: .875rem;
  font-family: var(--font-sans);
  color: var(--text);
  cursor: pointer;
  padding: 6px 4px;
  font-weight: 500;
}
.btn-login:hover { color: var(--primary); }

.btn-register {
  background: var(--accent);
  border: 1.5px solid var(--accent);
  color: #fff;
  border-radius: 100px;
  padding: 9px 20px;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.btn-register:hover  { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-register:active { transform: translateY(1px); }

/* ─── Hamburger (mobile only) ───────────────────────────────────────────────── */
.btn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 10px;
  flex-shrink: 0;
  transition: background .15s;
}
.btn-hamburger:hover  { background: var(--tint); }
.btn-hamburger:active { background: var(--tint-strong); }
.btn-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
  transform-origin: center;
}
/* Translate vóór rotate: anders verschuift de translate in het geroteerde
   assenstelsel en kruisen de twee balken niet exact in het midden. */
.btn-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.btn-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.btn-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── Mobile menu (slide-down) ──────────────────────────────────────────────── */
.mobile-menu {
  position: absolute;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 20px 24px 24px;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s ease, opacity .2s ease;
  z-index: 99;
  box-shadow: var(--shadow-md);
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-links {
  display: flex;
  flex-direction: column;
}
.mobile-menu-links a {
  padding: 13px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  transition: color .15s;
}
.mobile-menu-links a:hover { color: var(--primary); }
.mobile-menu-divider { margin: 16px 0 12px; border-top: 1px solid var(--border); }
.mobile-menu-auth { display: flex; flex-direction: column; gap: 8px; }

/* Wie-ben-ik-rij met avatar-monogram (zie .nav-avatar bij de user-pill). */
.mobile-menu-user {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: var(--text);
  font-weight: 600;
  padding: 2px 0 10px;
}
/* Lijst-items i.p.v. omkaderde knoppen: zelfde tonal familie als de dropdown. */
.mobile-menu-btn {
  display: block;
  width: 100%;
  padding: 13px 12px;
  background: none;
  border: none;
  border-radius: 10px;
  font-size: .9375rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.mobile-menu-btn:hover  { background: var(--tint); }
.mobile-menu-btn:active { background: var(--tint-strong); }
.mobile-menu-btn--danger { color: var(--color-error); }
.mobile-menu-btn--danger:hover,
.mobile-menu-btn--danger:active { background: rgba(185,28,28,.08); }

/* ─── Taalwisselaar (#149) ─────────────────────────────────────────────────────
   Segmented control (iOS-stijl): ingelegde neutrale track, de actieve taal is
   een licht chip-vlak met merkgroene tekst + zachte schaduw. Bewust géén volle
   primary-vulling: dat oogde als een logge blob en concurreerde met de CTA. */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--tint);
  border: none;
  border-radius: 999px;
  padding: 3px;
}
.lang-btn {
  background: none;
  border: none;
  border-radius: 999px;
  padding: 0 12px;
  min-width: 0;
  min-height: 34px;
  font-size: .875rem;  /* mobiel-vloer: interactieve tekst >= 14px */
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
  letter-spacing: .02em;
}
.lang-btn:hover { color: var(--text); }
.lang-btn.active,
html[lang="nl"] .lang-btn[data-lang-switch="nl"],
html[lang="en"] .lang-btn[data-lang-switch="en"],
html[lang="de"] .lang-btn[data-lang-switch="de"] {
  background: var(--surface-2);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.lang-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Desktop: iets compacter in de topnav, en het hele cluster op één hoogte
   (40px: taal-track = 34 + 2x3 padding, themaknop en user-pill expliciet).
   Mobiel houdt overal 44px tap targets (base-waarden). */
#langSwitcherDesktop { display: none; }
@media (min-width: 701px) {
  #langSwitcherDesktop { display: flex; }
  #btnTheme            { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  /* .nav-auth-prefix: de kale klasse verliest het op volgorde van de
     basisregel (staat verderop in het bestand, zelfde specificiteit). */
  .nav-auth .btn-user-menu { min-height: 40px; }
}

/* Mobiel: taalrij in het hamburger-menu */
.mobile-lang-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.mobile-lang-label {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
}
/* Mobiel vult de control de rij (gelijke derden), tap target >= 44px. */
.lang-switcher--mobile {
  flex: 1;
  max-width: 300px;
  margin-left: 16px;
}
.lang-switcher--mobile .lang-btn {
  flex: 1;
  min-height: 44px;
  padding: 0 12px;
}
/* Drawer-variant (account-drawer taalrij): erft de track; alleen tap target. */
.lang-btn--drawer { min-height: 44px; min-width: 44px; }
.privacy-feedback--ok { color: var(--primary); font-size: .8rem; margin-top: 6px; }

/* Focus-visible op header-/nav-knoppen die hem misten (a11y): een consistente ring. */
.nav-cta:focus-visible,
.btn-pill-toggle:focus-visible,
.btn-login:focus-visible,
.btn-register:focus-visible,
.btn-hamburger:focus-visible,
.btn-user-menu:focus-visible,
.btn-logout:focus-visible,
.btn-account:focus-visible,
.btn-load-more:focus-visible,
.mobile-menu-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 26px;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity .15s, background .2s;
}

.btn:hover { opacity: .88; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-ghost:focus-visible { outline-color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover { opacity: 1; background: #d96b1d; }
[data-theme="dark"] .btn-primary { background: var(--accent); color: #fff; }
[data-theme="dark"] .btn-primary:hover { background: #c4601a; }

.btn-ghost {
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.9);
  border: 1.5px solid rgba(255,255,255,.2);
}

.btn-ghost:hover { background: rgba(255,255,255,.16); opacity: 1; }
/* Op een surface (niet-foto) context moet de ghost-knop in dark leesbaar zijn
   (>=3:1 op --surface-2), ook in disabled-staat. De foto-varianten zijn aparte
   selectoren (.gallery-card-reserve--ghost) en blijven wit-op-foto. */
[data-theme="dark"] .btn-ghost { border-color: var(--border-strong); color: var(--text); background: rgba(255,255,255,.04); }

/* Gevulde danger-knop (destructief: chat wissen, account verwijderen). In light
   donkerrood met witte tekst; in dark zou een gevulde --color-error (lichte rose)
   met witte tekst onleesbaar zijn (WCAG-fail) → daar een tinted-danger-knop. */
.btn-danger-solid { background: var(--color-error); color: #fff; border: none; padding: 10px 20px; font-size: .875rem; min-height: 44px; border-radius: var(--radius-sm); cursor: pointer; }
[data-theme="dark"] .btn-danger-solid { background: var(--color-error-bg); color: var(--color-error); border: 1px solid var(--color-error); }

/* ─── Sections gemeenschappelijk ────────────────────────────────────────────── */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: .95rem;
  margin-bottom: 40px;
}

.section-header { text-align: center; margin-bottom: 32px; }

/* ─── Hoe het werkt ─────────────────────────────────────────────────────────── */
/* "Strak pad": open layout zonder kaartranden. Grote lichte cijfers als
   typografisch anker, icoon in een gevulde accentcirkel, een fijne lijn die
   de drie cirkels verbindt.
   Vier gekoppelde maten staan als CSS-variabele op deze sectie — single source
   of truth, geen handmatig uitgerekende posities:
   - --how-circle    : diameter van de icooncirkel
   - --step-num-size : font-size van het volgnummer; door line-height:1 is dit
                       exact ook de hoogte van .step-num
   - --step-num-gap  : margin-bottom onder het volgnummer
   - --steps-gap     : flex-gap tussen de stappen
   De verbindingslijn (.step::after) wordt volledig uit deze vier afgeleid, dus
   bij elke breakpoint kantelt de lijn mee zodra een variabele wijzigt. */
.how-it-works {
  --how-circle: 64px;
  --step-num-size: 3.5rem;
  --step-num-gap: 10px;
  --steps-gap: 24px;
  background: var(--bg);
  padding: 80px 0;
  text-align: center;
  scroll-margin-top: 72px; /* sticky header (64px) + 8px ademruimte */
}

/* Titel in de merkkleur groen — een merkanker tegenover de oranje accenten
   (cijfers, cirkels, knop). --primary kantelt automatisch mee per thema. */
.how-it-works .section-title { color: var(--primary); }

.how-it-works-subtitle {
  color: var(--text-muted);
  font-size: 1rem;
  margin: -8px 0 44px;
}

.steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--steps-gap);
}

.step {
  position: relative;
  flex: 1 1 240px;
  min-width: 0;
  max-width: 320px;
  padding: 0 12px;
}

/* Verbindende lijn — een fijne stippellijn op de hoogte van het MIDDEN VAN DE
   ICOONCIRKEL, getekend in de tussenruimte tussen twee aangrenzende stappen.
   Loopt achter de cirkels (z-index 0) en raakt geen tekst. Geen lijn na stap 3.

   top: het icoon staat ná .step-num in de flow → cirkelmidden zit op
   (.step-num-hoogte) + (margin onder .step-num) + (halve cirkel). Omdat
   .step-num line-height:1 heeft, is zijn hoogte exact --step-num-size.
   left/right: stappen zijn gelijk breed en het icoon is gecentreerd, dus 50%
   = cirkelmidden van de eigen stap. Het lijnstuk eindigt 8px van de eigen
   cirkelrand (left) en, symmetrisch, 8px van de cirkel van de volgende stap:
   die zit een --steps-gap verderop, vandaar de aftrek in de right-berekening. */
.step::after {
  content: "";
  position: absolute;
  top: calc(var(--step-num-size) + var(--step-num-gap) + var(--how-circle) / 2);
  left:  calc(50% + var(--how-circle) / 2 + 8px);
  right: calc(-50% + var(--how-circle) / 2 - var(--steps-gap) + 8px);
  border-top: 2px dotted var(--border);
  z-index: 0;
}
.step:last-child::after { content: none; }

/* Groot, licht volgnummer — typografisch anker, geen badge.
   line-height:1 → hoogte == --step-num-size; de verbindingslijn rekent daarop. */
.step-num {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--step-num-size);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  opacity: .22;
  margin-bottom: var(--step-num-gap);
}

/* Icoon in een gevulde accentcirkel — consistente maat over de drie stappen.
   position:relative + z-index zet 'm boven de verbindingslijn. */
.step-icon {
  position: relative;
  z-index: 1;
  width: var(--how-circle);
  height: var(--how-circle);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
}

.step-icon .ico { width: 30px; height: 30px; }

/* Stap 1 — de enige actie die de bezoeker zelf doet; subtiel iets meer gewicht. */
.step--lead .step-num { opacity: .32; }
.step--lead .step-icon { box-shadow: 0 6px 18px -4px rgba(240,130,43,.5); }

.step h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--text);
}

.step p { font-size: 1rem; color: var(--text-muted); line-height: 1.6; }

.how-it-works-cta {
  margin-top: 44px;
  min-height: 44px;
  font-size: 1rem;
}

/* Scroll-reveal — elke stap swipet apart omhoog in beeld. De begin-toestand
   staat ALLEEN onder .reveal-armed, een class die JS per .step toevoegt
   wanneer reduced-motion uit staat — zonder JS of bij reduced-motion is de
   stap dus meteen volledig zichtbaar (geen FOUC). JS observeert elke stap los
   (op mobiel verschijnen ze zo één voor één tijdens het scrollen) en zet de
   stagger-vertraging tussen stappen die samen in beeld komen. */
.step.reveal-armed {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .85s ease-out, transform .85s ease-out;
}
.step.reveal-armed.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .step.reveal-armed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Dark mode — cijfers wat steviger zodat ze niet wegvallen tegen de donkere
   achtergrond, maar nog steeds ingetogen blijven. */
[data-theme="dark"] .step-num { opacity: .32; }
[data-theme="dark"] .step--lead .step-num { opacity: .42; }

@media (max-width: 700px) {
  .how-it-works { --how-circle: 56px; --steps-gap: 32px; padding: 56px 0; }
  .steps { flex-direction: column; align-items: center; }
  .step {
    flex: 1 1 auto;
    max-width: 380px;
    width: 100%;
    padding: 0 8px;
  }
  /* Op mobiel stapelen de stappen — een kort verticaal stippellijntje dat
     precies de --steps-gap tussen twee stappen vult. top:100% start op de
     onderrand van de stap, height == de gap → raakt geen tekst en geen
     cirkels. Geen lijn na stap 3 (.step:last-child::after, hierboven). */
  .step::after {
    top: 100%;
    left: 50%;
    right: auto;
    width: 0;
    height: var(--steps-gap);
    border-top: none;
    border-left: 2px dotted var(--border);
  }
  .how-it-works-cta { width: min(360px, 92vw); justify-content: center; }
}

@media (max-width: 480px) {
  /* --step-num-size kleiner → de verbindingslijn-top kantelt automatisch mee. */
  .how-it-works { --step-num-size: 3rem; }
}

/* ─── Featured restaurants ──────────────────────────────────────────────────── */
.featured-section {
  background: var(--surface);
  padding: 80px 0;
  scroll-margin-top: 72px; /* sticky header (64px) + 8px ademruimte */
}

.restaurant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

/* Skeleton loading */
.loading-cards { display: contents; }

.skeleton-card {
  /* Zelfde footprint als de echte galerij-kaart (--card-aspect, ook op
     .gallery-card-photo) zodat er geen layout-sprong is bij het inladen. */
  aspect-ratio: var(--card-aspect);
  background: linear-gradient(90deg, #e8e0d4 25%, #f5f0e8 50%, #e8e0d4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-md);
}
[data-theme="dark"] .skeleton-card {
  background: linear-gradient(90deg, #1e2922 25%, #243228 50%, #1e2922 75%);
  background-size: 200% 100%;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Restaurants count header ──────────────────────────────────────────────── */
.restaurants-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
}
.restaurants-count {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
}
.restaurants-desc { color: var(--text-muted); font-size: .9rem; }

.restaurant-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 0;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.restaurant-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Card nieuwe stijl */
.card-name--orange { color: var(--accent); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.card-meta { font-size: .875rem; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 4px; }
.card-tag {
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.card-cta-row { margin-top: auto; }
.card-book-cta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 3px;
}
.card-book-sub { font-size: .875rem; color: var(--text-muted); }

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cuisine-tag {
  background: var(--accent-light);
  color: var(--accent-text-cuisine);
  font-size: .875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}

/* ─── Prijscategorie-badge ────────────────────────────────────────────────── */
/* Chip op een solide achtergrond (reco, chat, similar) */
.price-badge {
  display: inline-flex;
  align-items: center;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: #FEF3C7;
  color: #92400E;
  letter-spacing: .01em;
}
[data-theme="dark"] .price-badge {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Variant op foto (galerijkaart-band, hero) — frosted glass, zelfde pill als .gallery-card-tag */
.price-badge--photo {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #374151;
  background: rgba(255,255,255,.92);
  padding: 3px 8px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .price-badge--photo { background: rgba(0,0,0,.6); color: #cbd0d8; }

.card-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}

.card-description {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-address {
  font-size: .875rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: auto;
}

.card-hint {
  font-size: .78rem;
  color: var(--accent);
  font-weight: 500;
  display: none; /* vervangen door .card-cta */
  margin-top: 2px;
}

/* ─── Hero sectie ───────────────────────────────────────────────────────────── */
/* Clean hero zonder foto: rustige merk-achtergrond, de chatkaart is het middelpunt. */
.hero-section {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: 40px 0 36px;
}
/* Zachte merk-glow als rustige achtergrond i.p.v. een full-bleed foto. */
.hero-section::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  width: min(960px, 130vw);
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(1,93,44,.11) 0%,
    rgba(240,130,43,.06) 44%,
    transparent 72%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] .hero-section::before {
  background: radial-gradient(ellipse at center,
    rgba(54,196,111,.10) 0%,           /* getemperde primary-glow (#36C46F) i.p.v. neon */
    rgba(240,130,43,.07) 44%,
    transparent 72%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}
.hero-title {
  font-family: var(--font-serif);
  line-height: 1.08;
  margin-bottom: 10px;
}
.hero-line-1,
.hero-line-2 {
  display: block;
  font-size: clamp(2rem, 4.2vw, 2.9rem);
  letter-spacing: -.015em;
}
.hero-line-1 { color: var(--text); }
.hero-line-2 { color: var(--primary); } /* laatste regel = groene focuskleur */
/* Chat container — sluit direct aan op de hero-tekst, vormt één blok.
   De .chat-col is de flex-kolom: de volgorde van chat vs. reco-kaarten
   regelen we via `order` op haar kinderen, niet via DOM-verplaatsing (CLAUDE.md:
   flexbox-flow boven absolute/JS-reorder). In de kadermodus draagt .chat-frame
   (binnen #chatContainer) op desktop de grid (chat-kolom + resultaten-paneel);
   zie de @media (min-width:900px)-tak. */
#chatContainer {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
}
.chat-col {
  display: flex;
  flex-direction: column;
}
/* De reco-rij (#recommendationsSection) staat sinds de paneel-refactor BUITEN
   #chatContainer, vóór het kader in de DOM — dus altijd boven de chat (ingelogd)
   of verborgen (gast). De vroegere `order`-toggle (.chat-container--reco-first)
   binnen .chat-col is daarmee overbodig; de DOM-volgorde bepaalt het nu. */


.chat-wrapper {
  /* Expliciete width:100% NODIG. #chatContainer is een flex-column container;
     met `margin: 0 auto` (auto-margins) vervalt de default `align-items:stretch`
     en krijgt .chat-wrapper anders intrinsic content-width — wat de chat-box
     visueel laat verspringen ("smal bij weinig content, breed na lange replies").
     Dit was vroeger gemaskeerd door .chat-mini-card-rijen die de chat-box
     forceerden tot een minimum breedte; sinds de inline-card-refactor zonder
     die rijen werd het pas zichtbaar. */
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
}

.chat-box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Korte attentie-puls bij binnenkomst (2 iteraties, dan stil). */
  animation: chatBoxPulse 1.3s ease-in-out 2;
}

/* ─── Chat berichten ────────────────────────────────────────────────────────── */
.chat-messages {
  /* Basis = inline groei: het gesprek leest als één doorlopende kolom (vraag →
     antwoord → restaurantkaart). Begrensd scrollvenster komt erbij waar de pagina
     anders te lang wordt: op ≤899px capt de regel in het mobiel/tablet-blok
     .chat-messages intern (max-height + overflow), en op desktop-met-paneel capt
     het glas-kader (.chat-frame:has(#resultsPanel...)). Hier (desktop zonder paneel)
     groeit het bewust mee. min-height vangt enkel de typing-bubbel→begroeting-
     overgang op zodat de kaart niet zichtbaar krimpt. */
  height: auto;
  min-height: min(96px, 14vh);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.message {
  display: flex;
  gap: 10px;
  max-width: 86%;
  animation: fadeUp .15s ease-out;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Korte attentie-puls op de chatkaart bij binnenkomst — trekt de blik naar de
   chat zonder eindeloos te bewegen. Een zachte accent-gloed (box-shadow) i.p.v.
   transform: scale() — schalen verandert letterlijk de grootte en laat de kaart
   "verspringen". box-shadow raakt de layout niet. Stopt na 2 iteraties. */
@keyframes chatBoxPulse {
  0%, 100% { box-shadow: var(--shadow-lg); }
  50%      { box-shadow: var(--shadow-lg), 0 0 0 4px var(--accent-light); }
}

.message-user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* Assistant-bericht als echte chatbubbel: kolom zodat de bubbel + (onder de bubbel
   geplaatste) stemrij/chips netjes stacken en links uitlijnen, en een eigen, smallere
   max-width zodat een lang antwoord niet als brede informatiekaart de hele kolom vult.
   align-items:flex-start geeft de bubbel content-breedte (korte antwoorden = kleine
   bubbels). Op mobiel erft het de bredere .message-cap (95%); 620px begrenst desktop. */
.message-assistant {
  align-self: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: min(560px, 82%);
}
.message-error     { align-self: flex-start; }

.message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.message-avatar img { display: block; width: 28px; height: 28px; }

.bubble {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: .925rem;
  line-height: 1.65;
}

/* Tekst-wrapper binnen een assistant-bubble: de reveal streamt hierin, zodat
   de inline restaurantkaart (sibling .reco-block) tijdens het typen al kan
   verschijnen zonder per-woord gewist te worden. Geen eigen box-spacing —
   erft de typografie van .bubble; margins van markdown-kinderen blijven werken. */
.bubble-text { display: block; }

.message-user .bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.message-assistant .bubble {
  background: var(--bg);
  color: var(--text);
  /* Rondere bubbel met behoud van de "tail" linksonder + iets compactere padding,
     zodat het als chatbubbel leest i.p.v. als informatiekaart. */
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 11px 15px;
  /* Zeer subtiele rand (halftransparant) → minder "omkaderd". Kleur/vlak ongewijzigd. */
  border: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
}

.message-error .bubble {
  background: #FEF2F2;
  color: var(--color-error);
  border: 1px solid #FECACA;
}
[data-theme="dark"] .message-error .bubble {
  background: var(--color-error-bg);
  border-color: rgba(244,154,160,.30);
}

/* Markdown in AI-berichten */
.bubble strong { font-weight: 600; color: var(--primary); }
.bubble em     { font-style: italic; }

.bubble ul {
  margin: 8px 0;
  padding-left: 1.15em;
  list-style: none;
}
.bubble li {
  position: relative;
  padding-left: .35em;
  margin: 5px 0;
  font-size: .9rem;          /* ≥ 14px op mobiel */
  line-height: 1.55;
}
.bubble li::before {
  content: "•";
  position: absolute;
  left: -.7em;
  color: var(--accent);
  font-weight: 700;
}
.bubble .bubble-head {
  font-family: var(--font-serif);
  font-size: .95rem;
  font-weight: 600;
  color: var(--primary);
  margin: 8px 0 4px;
}
.bubble .bubble-head:first-child { margin-top: 0; }

/* ─── Registratie-nudge (#60) ──────────────────────────────────────────────────
   Tabby-chatbericht dat een uitgelogde gast op het waarde-moment uitnodigt een
   account te maken. Leeft in de chatstroom als een assistant-bubble, maar met een
   eigen kaart-styling (eyebrow + CTA + uitweg). Mobile-first: tap targets >= 44px,
   CTA/body >= 14px, microcopy >= 12px. */
.register-nudge { max-width: 92%; }
.register-nudge-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.register-nudge-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .75rem;            /* 12px — microcopy-vloer, label */
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.register-nudge-eyebrow .ico { width: 15px; height: 15px; }
.register-nudge-body {
  margin: 0;
  font-size: .9375rem;          /* 15px — leesbare bodytekst */
  line-height: 1.6;
  color: var(--text);
}
.register-nudge-body strong { color: var(--primary); font-weight: 700; }
.register-nudge-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #f7a64b 0%, var(--accent) 55%, #e06a16 100%);
  box-shadow: 0 6px 16px rgba(240,130,43,.34);
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .2s ease;
}
.register-nudge-cta .ico { width: 20px; height: 20px; flex-shrink: 0; }
.register-nudge-cta:hover  { box-shadow: 0 8px 22px rgba(240,130,43,.42); }
.register-nudge-cta:active { transform: scale(.985); }
.register-nudge-cta:focus-visible { outline: 3px solid var(--accent-light); outline-offset: 2px; }
/* Zachte sheen die eenmalig over de CTA loopt — trekt de blik zonder eindeloze beweging. */
.register-nudge-cta::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg);
  animation: nudgeSheen 2.6s ease-in-out 1;
}
@keyframes nudgeSheen {
  0%   { left: -60%; }
  60%, 100% { left: 130%; }
}
.register-nudge-dismiss {
  align-self: center;
  background: none;
  border: none;
  padding: 10px 16px;
  min-height: 44px;
  font-size: .875rem;           /* 14px */
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.register-nudge-dismiss:hover { color: var(--text); text-decoration: underline; }
.register-nudge-dismiss:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.register-nudge-reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  font-size: .75rem;            /* 12px — microcopy-vloer */
  color: var(--text-muted);
}
.register-nudge-reassure .ico { width: 14px; height: 14px; color: var(--primary); }

/* #61 — registratie-gate-bubble (gast-throttle-muur-moment). Hergebruikt bewust de
   .register-nudge*-kaartstijl hierboven; .register-gate is alleen een wrapper-haak
   (eigen id #registerGate, geen "Misschien later"-uitweg). Geen eigen maatvoering
   nodig — alle tap-target-/font-vloer-/mobiel-regels erven van .register-nudge*. */
.register-gate { /* haak voor toekomstige gate-specifieke overrides */ }

/* #60 — contextregel in de auth-drawer (Tabby's stem bij nudge/hartje). */
.auth-context {
  margin: -4px 0 16px;
  padding: 10px 14px;
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: .875rem;           /* 14px */
  line-height: 1.5;
  color: var(--text);
}
[data-theme="dark"] .auth-context { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .register-nudge-cta::after { animation: none; display: none; }
  .register-nudge-cta:active { transform: none; }
}

/* ─── Typing indicator ──────────────────────────────────────────────────────── */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 18px;
}

.typing-indicator span {
  width: 7px;
  height: 7px;
  background: var(--text-muted);
  border-radius: 50%;
  animation: bounce 1.2s infinite;
}

.typing-indicator span:nth-child(2) { animation-delay: .15s; }
.typing-indicator span:nth-child(3) { animation-delay: .30s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%            { transform: translateY(-5px); opacity: 1; }
}

/* ─── Suggesties ────────────────────────────────────────────────────────────── */
.chat-suggestions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 20px 16px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.chip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  padding: 7px 14px;
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}

.chip:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-text);
}

/* Smaakprofiel-trigger zit nu als 2e item in de chat-tools-popover
   (data-action="taste") — geen aparte rij boven de input meer. */

/* ─── Chat invoer ───────────────────────────────────────────────────────────── */
.chat-input-area {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chat-input {
  flex: 1;
  /* min-width:0 voorkomt dat de placeholder-tekst de input-breedte oprekt en
     daarmee de chat-box visueel breder maakt dan zijn flex-container toestaat
     (default min-width is `auto` = intrinsic content size = placeholder-breedte). */
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-size: .9rem;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

/* Placeholder-fade: standaard zichtbaar, fade-out via JS-klasse */
.chat-input::placeholder {
  opacity: 1;
  transition: opacity .4s ease;
}
.chat-input--placeholder-fading::placeholder {
  opacity: 0;
  transition: opacity .4s ease;
}

.chat-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.chat-input:disabled { opacity: .55; }

.chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}

.chat-send-btn:hover   { background: var(--primary-hover); }
.chat-send-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ─── Nav auth ──────────────────────────────────────────────────────────────── */
.nav-auth { display: flex; align-items: center; gap: 10px; position: relative; }

/* ─── User dropdown ──────────────────────────────────────────────────────────── */
.user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 230px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 200;
  display: none;
}
.user-dropdown.open { display: block; animation: dropdownIn .16s ease; }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
  .user-dropdown.open { animation: none; }
}
/* Wie-ben-ik-kop: naam + e-mail, geen actie. */
.user-dropdown-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px 10px;
}
.user-dropdown-header strong {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
}
.user-dropdown-header span {
  font-size: .8125rem;  /* micro-meta, binnen de 12-14px-band */
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 10px;
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
}
.user-dropdown-item:hover { background: var(--tint); }
.user-dropdown-item svg { flex-shrink: 0; color: var(--text-muted); }
.user-dropdown-item--danger { color: var(--color-error); }
.user-dropdown-item--danger:hover { background: rgba(185,28,28,.08); }
.user-dropdown-item--danger svg { color: inherit; }
.user-dropdown-divider { height: 1px; background: var(--border); margin: 6px 4px; }


/* Randloze tonal pill met avatar-monogram; open dropdown houdt de pill getint
   (via :has op de wrapper, de open-class leeft op de dropdown zelf). */
.btn-user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  border-radius: 100px;
  padding: 4px 12px 4px 4px;
  font-size: .875rem;
  min-height: 44px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.btn-user-menu strong { color: var(--text); font-weight: 600; }
.btn-user-menu:hover,
.nav-auth:has(.user-dropdown.open) .btn-user-menu { background: var(--tint); color: var(--text); }

/* Avatar-monogram: initialen op merkgroen; deelt de maat met het 40px-cluster. */
.nav-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  flex-shrink: 0;
}

.nav-greeting { font-size: .85rem; color: var(--text-muted); }
.nav-greeting strong { color: var(--text); font-weight: 600; }


.nav-user {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: .85rem;
}

.nav-user-name { font-weight: 600; color: var(--primary); }

.btn-logout {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: .875rem;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color .15s;
}
.btn-logout:hover { color: var(--text); }

.btn-account {
  color: var(--primary);
  font-size: .875rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 100px;
  border: 1px solid var(--border);
  transition: background .15s;
  white-space: nowrap;
}
.btn-account:hover { background: var(--bg); }

/* ─── "Toon oudere berichten"-sentinel en knop ───────────────────────────────── */
.chat-load-older {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}
/* class met expliciete display verslaat het [hidden]-attribuut — expliciet uitzetten */
.chat-load-older[hidden] {
  display: none;
}

.chat-load-older-btn {
  /* Stille tekstlink-achtige secundaire actie: randloos, gedempt, klein; 44px
     tap-target via min-height. Hover onderstreept enkel — geen vlak/pill. */
  background: none;
  border: none;
  padding: 0 10px;
  min-height: 44px;
  font-size: .75rem;
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s;
  white-space: nowrap;
}
.chat-load-older-btn:hover {
  color: var(--text);
  text-decoration: underline;
}
.chat-load-older-btn:disabled {
  opacity: .45;
  cursor: default;
}

@media (max-width: 480px) {
  .chat-load-older-btn {
    font-size: .875rem;
    min-height: 44px;
    width: 100%;
    border-radius: var(--radius-sm);
  }
}

@media (max-width: 700px) {
  .chat-load-older { padding: 4px 0 6px; }
}

/* ─── Modals (gemeenschappelijk) ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overscroll-behavior: contain; /* voorkomt rubber-band scroll op achtergrond (iOS 16+) */
  animation: fadeIn .2s ease-out;
}
.modal-overlay[hidden] { display: none; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-box {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: slideUp .25s ease-out;
  /* Eigen scroll op iOS */
  -webkit-overflow-scrolling: touch;
}

.modal-box--wide {
  max-width: min(840px, 92vw);
  padding: 0;
  background: var(--surface); /* expliciete achtergrond — voorkomt transparantie */
  overflow: hidden;           /* flex-layout werkt alleen correct met hidden of auto */
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  transform: translateZ(0); /* GPU-layer promotie — garandeert weergave boven foto's */
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: .9rem;
  color: var(--text-muted);
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  line-height: 1;
  transition: background .15s, color .15s;
}
.modal-close:hover { background: var(--border); color: var(--text); }

.modal-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 20px;
}

/* ─── Auth modal ────────────────────────────────────────────────────────────── */
.auth-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 8px;
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: .9rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  color: var(--text-muted);
  transition: background .15s, color .15s;
}
.auth-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* ─── Registratie-type-keuze (bezoeker vs. restauranthouder) ──────────────── */
.register-type {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 18px;
}
.register-type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  padding: 12px 8px;
  min-height: 44px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.register-type-option:hover { border-color: var(--primary); }
.register-type-option.active {
  border-color: var(--primary);
  background: rgba(31,59,46,.06);
}
[data-theme="dark"] .register-type-option.active { background: rgba(54,196,111,.10); }   /* getemperde primary-tint i.p.v. neon */
.register-type-icon  { font-size: 1.4rem; line-height: 1; }
.register-type-label { font-size: .875rem; font-weight: 600; }
.register-type-desc  { font-size: .75rem; color: var(--text-muted); }
.register-owner-note {
  font-size: .8rem;
  color: var(--text-muted);
  margin: -4px 0 14px;
  line-height: 1.45;
}
@media (max-width: 480px) {
  .register-type { grid-template-columns: 1fr; }
}

.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: .85rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 6px;
}

.form-group label .hint { font-weight: 400; color: var(--text-muted); }

.form-group input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: .925rem;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
[data-theme="dark"] .form-group input {
  background: var(--input-bg);
  border-color: var(--border);
}

.form-error {
  font-size: .85rem;
  color: var(--color-error);
  margin-bottom: 12px;
  min-height: 20px;
}

.btn-full { width: 100%; justify-content: center; border-radius: var(--radius-md); }

.auth-hint {
  text-align: center;
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: 12px;
}

/* ─── Restaurant detail modal ───────────────────────────────────────────────── */
.restaurant-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.restaurant-detail-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--primary);
}

.restaurant-detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.restaurant-detail-description {
  color: var(--text-muted);
  font-size: .95rem;
  line-height: 1.65;
  margin-bottom: 20px;
}

.restaurant-detail-info {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  font-size: .875rem;
}

.info-item { display: flex; align-items: center; gap: 6px; color: var(--text-muted); }
.info-item strong { color: var(--text); }

.features-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}

.feature-tag {
  background: var(--accent-light);
  color: var(--accent-text);
  font-size: .875rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
}

/* ─── C1: Reveal-overslaan hint ─────────────────────────────────────────────── */
/* Los blok ná het revealende bericht (sibling in .chat-messages, dat een
   flex-kolom met gap:16px is). Negatieve margin trekt de hint dicht onder de
   bubble. De hint wordt in finish() uit de DOM verwijderd zodra de reveal klaar
   is — niet enkel verborgen. */
.reveal-skip-hint {
  display: block;
  margin-top: -12px;
  /* Uitlijnen met de LINKERRAND van de bubble. .reveal-skip-hint is een
     direct kind van .chat-messages (padding:24px); de message-container heeft
     geen extra spacing (avatar is `display:none`), dus padding-left:0 hier
     plaatst de hint exact onder de bubble-rand. */
  padding-left: 0;
  font-size: .75rem;
  color: var(--text-muted);
  opacity: .55;
  cursor: pointer;
  user-select: none;
}

/* ─── C2: Vervolg-chips ──────────────────────────────────────────────────────── */
/* Vaste balk boven de composer die de vervolg-chips draagt (buiten #chatMessages,
   zodat ze niet in het scrollvak geklemd raken). Leeg = onzichtbaar. */
.chat-followup {
  padding: 4px 16px 0;
}
.chat-followup:empty { display: none; }
.chat-followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Uitlijnen met de LINKERRAND van de bubble — gelijk aan .reveal-skip-hint.
     De avatar-compensatie van `calc(28+8+12)` is vervallen omdat
     .message-avatar in productie `display:none` is. */
  padding: 8px 0 4px;
  /* Verschijnt rustig ná het antwoord (sectie H: opties komen ná de tekst). */
  animation: chipsFadeIn .3s ease-out .12s both;
}

.chat-followup-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  /* Tap target ≥44px: min-height + padding zorgen daarvoor */
  min-height: 44px;
  padding: 12px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

.chat-followup-chip:hover,
.chat-followup-chip:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-text);
  outline: none;
}

/* Mobiel ≤480px: chips kunnen scrollen als ze niet passen (geen page-scroll) */
@media (max-width: 480px) {
  .chat-followup-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-left: 12px;
    /* Verberg scrollbar maar behoud functionaliteit */
    scrollbar-width: none;
  }
  .chat-followup-chips::-webkit-scrollbar { display: none; }
  .chat-followup-chip {
    scroll-snap-align: start;
    flex-shrink: 0;
    /* Zorg dat de chip ook op 375px leesbaar blijft */
    max-width: min(240px, 70vw);
    white-space: normal;
  }
}

/* Tablet ≤900px: wrap is prima, iets kleiner gap */
@media (max-width: 900px) and (min-width: 481px) {
  .chat-followup-chips {
    gap: 6px;
  }
}

/* ─── Chat-deeplink-chip: "Toon alle open op moment X" (AC5/AC6) ──────────────
   Navigeert NIET weg maar past het moment-filter in-page toe. Visueel
   onderscheidend van .chat-followup-chip: accent-gevuld i.p.v. neutraal, met
   klok-icoon, zodat het als een aparte affordance leest. */
.chat-deeplink-row {
  display: flex;
  padding: 4px 0 6px;
  animation: chipsFadeIn .3s ease-out .12s both;
}
.chat-deeplink-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  color: var(--accent-text);
  font-size: .875rem;          /* >= 14px */
  font-weight: 600;
  font-family: var(--font-sans);
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 100px;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.chat-deeplink-chip .ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.chat-deeplink-chip:hover,
.chat-deeplink-chip:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  outline: none;
  box-shadow: var(--shadow-sm);
}
.chat-deeplink-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Mobiel ≤480px: chip mag wrappen en blijft binnen de bubbelbreedte. */
@media (max-width: 480px) {
  .chat-deeplink-chip {
    white-space: normal;
    max-width: 100%;
  }
}


/* ─── Thema 3: Fallback-bubble (geen-match-vervolgkeuzes) ────────────────────
   Warmer/uitnodigender dan een error — vermijd doodlopende-straat-gevoel.
   Bubble-stijl die past bij .message-assistant maar net iets accent-lighter. */
/* "Geen match"-suggestieblok: NEUTRALE assistant-stijl (zoals een gewone Tabby-bubbel),
   niet de oude amber/oranje look — die las als een fout/waarschuwing terwijl het een
   vriendelijke suggestie is. */
.chat-fallback-bubble {
  align-self: flex-start;
  max-width: min(560px, 92%);
  margin: 4px 0 8px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: var(--radius-md);
  border-bottom-left-radius: 4px;
}
.chat-fallback-head {
  margin: 0 0 10px;
  font-size: .925rem;
  font-weight: 600;
  color: var(--text);
}
.chat-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Chips identiek aan .chat-followup-chip — rustige neutrale chip-stijl i.p.v. oranje. */
.chat-fallback-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .85rem;
  font-weight: 500;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 100px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.chat-fallback-btn:hover,
.chat-fallback-btn:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-text);
  outline: none;
}
.chat-fallback-btn--ghost {
  background: transparent;
  border-color: var(--border);
}

/* ─── Clarification-chips in de wedervraag-bubble (#140) ─────────────────────
   Antwoord-chips die INSIDE de assistant-bubble landen bij een wedervraag
   (is_clarification=true). Iets nadrukkelijker dan een vervolg-chip (subtiele
   accent-rand: dit zijn de directe antwoordopties op de vraag), maar de tekst
   blijft het contrast-veilige --accent-text (niet het felle --accent op licht,
   dat haalt geen 4.5:1 — zelfde keuze als .chat-fallback-btn). */
.chat-clarification-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.chat-clarification-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 100px;
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.chat-clarification-chip:hover,
.chat-clarification-chip:focus-visible {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent-text);
  outline: none;
}

/* Mobiel: horizontaal scrollen bij overflow binnen de bubble — geen pagina-breedte-scroll. */
@media (max-width: 480px) {
  .chat-clarification-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .chat-clarification-chip {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* Dark mode: --accent-text/--accent-light zijn in [data-theme="dark"] al de
   leesbare-op-donker varianten, dus dezelfde regels werken — alleen de rust-rand
   iets zichtbaarder maken op de donkere achtergrond. */
[data-theme="dark"] .chat-clarification-chip {
  background: rgba(255, 255, 255, .04);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

/* ─── Thema 3: Retry-bubble (API-fout herstel) ──────────────────────────────
   Klein blokje met één primaire knop — verschijnt na een error-bubble,
   houdt de drempel om opnieuw te proberen laag. */
.chat-retry-bubble {
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 8px 0 4px;
}
.chat-retry-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  min-height: 44px;
  padding: 12px 20px;
  border-radius: 100px;
  cursor: pointer;
  transition: opacity .15s;
}
.chat-retry-btn:hover:not(:disabled),
.chat-retry-btn:focus-visible:not(:disabled) {
  opacity: .9;
  outline: none;
}
.chat-retry-btn:disabled {
  opacity: .6;
  cursor: default;
}

/* ─── Actie-rij onder de assistant-bubbel ────────────────────────────────────────
   Eén compacte, moderne rij: links de feedbackduimpjes (.vote-row), rechts de
   geheugenstatus (.msg-memory). Geen losse banner/card meer. Stretcht tot de
   bubbelbreedte zodat de status netjes rechts uitlijnt; wrapt op smalle bubbels. */
.msg-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-self: stretch;
  min-width: 0;
}

/* Geheugenstatus (rechts): "✓ <Keyword> onthouden" + subtiele "Bekijk". Lage
   visuele nadruk (gedempt, klein), kleur niet de enige drager (✓ + tekst). */
.msg-memory {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  line-height: 1.2;
  color: var(--text-muted);
  animation: voteFadeIn .3s ease-out .22s both;
}
.msg-memory-ico {
  flex-shrink: 0;
  color: var(--primary);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1;
}
.msg-memory-kw {
  color: var(--text);
  font-weight: 600;
}
/* "Bekijk" als subtiele secundaire tekstactie; tap-zone 44px hoog via onzichtbaar
   ::before (CLAUDE.md-norm, zelfde patroon als .chat-tools-btn) → rij blijft compact. */
.msg-memory-link {
  position: relative;
  flex-shrink: 0;
  background: none;
  border: none;
  /* Geen verticale padding: box-hoogte = teksthoogte, zodat "Bekijk" exact op één
     lijn staat met "Vis onthouden" (de 44px tap-zone zit in ::before). */
  padding: 0 6px;
  border-radius: 6px;
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s;
}
.msg-memory-link::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  transform: translateY(-50%);
  height: 44px;
}
.msg-memory-link:hover,
.msg-memory-link:focus-visible {
  background: color-mix(in srgb, var(--primary) 9%, transparent);
  outline: none;
}

/* Mobiel ≤480px: bij krappe bubbel wrapt de status onder de duimpjes (msg-actions
   flex-wrap), rechts uitgelijnd via margin-left:auto. */

/* Mobiel ≤480px: fallback-keuzes blijven leesbaar op 375px (.875rem = de
   mobiel-minimum uit CLAUDE.md). */
@media (max-width: 480px) {
  .chat-fallback-bubble {
    max-width: 100%;
  }
  .chat-fallback-actions {
    gap: 6px;
  }
  .chat-fallback-btn {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
    padding: 10px 8px;
    font-size: .8rem;
  }
}

/* ─── Thema 3: "Niet meer tonen"-lijst in de account-drawer "Voorkeuren"-tab.
   .dismissal-section deelt de .pref-section margin (18px) — geen eigen rule
   nodig (een eigen `margin-top` zou bovendien later in dit bestand alsnog
   door `.pref-section`-default overschreven worden). */
.dismissal-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dismissal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.dismissal-photo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  background-color: rgba(0,0,0,.06);
  background-size: cover;
  background-position: center;
}
.dismissal-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.dismissal-name {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dismissal-city {
  font-size: .78rem;
  color: var(--text-muted);
}
.dismissal-remove {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.dismissal-remove:hover:not(:disabled),
.dismissal-remove:focus-visible:not(:disabled) {
  background: #FEF2F2;
  color: var(--color-error);
  border-color: #FECACA;
  outline: none;
}
.dismissal-remove:disabled {
  opacity: .5;
  cursor: default;
}

[data-theme="dark"] .chat-fallback-bubble {
  background: rgba(242,147,74,.10);
  border-color: rgba(242,147,74,.35);
}
[data-theme="dark"] .chat-fallback-head { color: var(--accent); }
[data-theme="dark"] .chat-fallback-btn  { background: rgba(0,0,0,.20); color: var(--accent); }
/* Het ✓ is nu een kale glyph (geen gevulde cirkel meer) → houd 'm in het lichtgroene
   --primary; de oude donkergroene override (voor contrast óp de cirkel) verviel daarmee. */
[data-theme="dark"] .dismissal-remove:hover:not(:disabled) {
  background: var(--color-error-bg);
  border-color: rgba(244,154,160,.40);
}

.dishes-section h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--primary);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.dish-category { margin-bottom: 18px; }

.dish-category-title {
  font-size: .875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.dish-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.dish-item:last-child { border-bottom: none; }
/* hidden-attribuut moet display:flex overrulen — anders verbergt zoeken niets */
.dish-item[hidden] { display: none; }

.dish-info { flex: 1; min-width: 0; }
/* Uniforme schrijfwijze, onafhankelijk van de import: naam altijd hoofdletters,
   beschrijving + sub-tags altijd kleine letters. */
.dish-name  { font-weight: 600; font-size: .9rem; margin-bottom: 2px; text-transform: uppercase; }
.dish-desc  { font-size: .875rem; color: var(--text-muted); line-height: 1.5; text-transform: lowercase; }
.dish-tags  { margin-top: 4px; display: flex; gap: 4px; flex-wrap: wrap; }

.diet-tag {
  background: #DCFCE7;
  color: #166534;
  font-size: .875rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 100px;
  text-transform: lowercase;
}
[data-theme="dark"] .diet-tag { background: rgba(90,175,122,.15); color: #5AAF7A; }

.dish-price {
  font-weight: 600;
  font-size: .9rem;
  color: var(--primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.reserve-btn {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  text-align: center;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-md);
  padding: 13px;
  font-size: .95rem;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background .2s;
}
.reserve-btn:hover { background: var(--primary-hover); }

.detail-ask-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  text-align: center;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  font-size: .95rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.detail-ask-btn:hover { background: var(--bg); border-color: var(--primary); }

.error-text { color: var(--color-error); padding: 20px; text-align: center; }

/* ─── Footer ────────────────────────────────────────────────────────────────── */
.site-footer { background: #084420; color: rgba(255,255,255,.72); }
[data-theme="dark"] .site-footer { background: #0a1a10; }

/* Tabby-afscheidsstrip */
.footer-tabby {
  display: flex; align-items: center; gap: 16px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.footer-tabby-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.3);
}
.footer-tabby-avatar img { width: 100%; height: 100%; display: block; }
.footer-tabby-text { flex: 1; min-width: 0; }
.footer-tabby-text strong {
  display: block; color: #fff;
  font-family: var(--font-serif); font-size: 1.0625rem; margin-bottom: 2px;
}
.footer-tabby-text span { font-size: .875rem; color: rgba(255,255,255,.6); }
.footer-tabby-cta {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff;
  border: none; border-radius: 11px;
  padding: 12px 20px; min-height: 44px;
  font-family: var(--font-sans); font-weight: 700; font-size: .875rem;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.footer-tabby-cta:hover { background: #e0701a; transform: translateY(-1px); }

/* Identiteit + navigatie */
.footer-main { padding: 34px 0 42px; }
.footer-id {
  display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.footer-brand { flex: 1; min-width: 220px; }
.footer-wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-serif); font-weight: 700;
  font-size: 1.1875rem; color: #fff;
}
.footer-wordmark img { width: 26px; height: 26px; display: block; }
.footer-tagline {
  margin: 0;
  font-size: .875rem; line-height: 1.6; color: rgba(255,255,255,.6);
}
.footer-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.footer-nav a, .footer-nav button {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 9px;
  font-family: var(--font-sans); font-size: .875rem;
  color: rgba(255,255,255,.68);
  background: none; border: none; cursor: pointer;
  transition: color .15s;
}
.footer-nav a:hover, .footer-nav button:hover { color: #fff; }
.footer-nav-sep { color: rgba(255,255,255,.2); user-select: none; }

/* Social */
.footer-social { display: flex; gap: 10px; flex-shrink: 0; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.7);
  transition: background .15s, color .15s, transform .12s;
}
.footer-social a:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 17px; height: 17px; }

/* Deze week in de spotlight */
.footer-spotlight { margin-top: 28px; }
.footer-spotlight[hidden] { display: none; }
.footer-spotlight-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
.footer-spotlight-head h2 {
  margin: 0; font-family: var(--font-serif); font-weight: 700;
  font-size: 1.1875rem; color: #fff;
}
.footer-spotlight-head a { font-size: .875rem; font-weight: 600; color: #f6b76e; }
.footer-spotlight-head a:hover { color: #fff; }
.footer-spotlight-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.footer-card {
  position: relative; display: block; width: 100%;
  background: #0a1a10;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px; overflow: hidden;
  aspect-ratio: 3 / 2;
  padding: 0; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.footer-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0,0,0,.4); }
.footer-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.footer-card-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,20,10,.92) 0%, rgba(4,20,10,.2) 55%, transparent 100%);
}
.footer-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 15px; text-align: left; }
.footer-card-name { display: block; font-family: var(--font-serif); font-weight: 700; font-size: 1rem; color: #fff; }
.footer-card-meta { display: block; font-size: .875rem; color: rgba(255,255,255,.72); margin-top: 2px; }

/* Trust-onderbalk */
.footer-bar { border-top: 1px solid rgba(255,255,255,.10); }
.footer-bar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px 16px; flex-wrap: wrap;
  padding: 12px 0;
  font-size: .8125rem; color: rgba(255,255,255,.5);
}
.footer-copy { margin: 0; }
.footer-legal { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.footer-legal-link {
  background: none; border: none; padding: 6px 6px;
  font-family: var(--font-sans); font-size: .8125rem;
  color: rgba(255,255,255,.5); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .15s;
}
.footer-legal-link:hover { color: #fff; }
.footer-legal-sep { color: rgba(255,255,255,.2); user-select: none; }

@media (max-width: 700px) {
  .footer-tabby { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-tabby-cta { width: 100%; }
  .footer-id { flex-direction: column; align-items: flex-start; gap: 16px; }
  .footer-nav { margin-left: -9px; }
  .footer-spotlight-cards {
    grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: 74%; overflow-x: auto;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    /* Subtiele rand-fade rechts — consistente carrousel-cue. */
    -webkit-mask-image: var(--carousel-fade);
            mask-image: var(--carousel-fade);
  }
  .footer-spotlight-cards::-webkit-scrollbar { display: none; }
  .footer-card { scroll-snap-align: start; }
  /* Eén kaart: vul de breedte, geen valse peek/fade. */
  .footer-spotlight-cards.carousel--single {
    grid-auto-columns: 100%;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ─── Hero extras ───────────────────────────────────────────────────────────── */
.btn-ghost--subtle { opacity: .7; font-size: .85rem; padding: 10px 20px; }

.hero-user-hint {
  margin-top: 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  color: rgba(255,255,255,.9);
  font-size: .875rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  transition: background .2s;
}
.hero-user-hint:hover { background: rgba(255,255,255,.16); }
.hero-user-hint strong { color: #E8C77A; }
.hint-top  { font-weight: 600; font-size: .875rem; }
.hint-bottom { font-size: .8rem; opacity: .8; }
.hint-cta  { color: #E8C77A; margin-left: 6px; font-weight: 600; }

/* ─── AI-aanbevelingen sectie ────────────────────────────────────────────────── */
.recommendations-section {
  margin: 0 0 14px;
}
/* Staat sinds de paneel-refactor bóven het chat-kader (los van #chatContainer).
   Eigen breedte die exact meeloopt met het kader eronder: 780px normaal (= de
   chatbox), 1140px in de desktop-kadermodus (zie @media min-width:900px). De
   .container-class zou 1140px geven; hier teruggebracht naar 780 + gecentreerd. */
#recommendationsSection {
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
}

.reco-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: #f0822b;
  margin-bottom: 8px;
}

/* Desktop: flex-rij; mobiel: horizontaal scrollbare carrousel met scroll-snap */
.reco-cards {
  display: flex;
  gap: 14px;
  /* Laat de kaarten hun eigen breedte bepalen; geen wrapping zodat snap werkt */
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;            /* ruimte voor schaduw onderkant */
}
.reco-cards::-webkit-scrollbar { display: none; }

/* Mobiel: subtiele rand-fade rechts — consistente "er staat meer naast"-cue,
   gelijk aan de galerij-carrousel. Bij precies één kaart (.carousel--single)
   geen fade én geen peek: de kaart vult de breedte. */
@media (max-width: 700px) {
  .reco-cards {
    -webkit-mask-image: var(--carousel-fade);
            mask-image: var(--carousel-fade);
  }
  .reco-cards.carousel--single {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .reco-cards.carousel--single .reco-card {
    flex: 1 1 auto;
  }
  /* Volledig naar rechts gescrold → fade uit zodat de laatste kaart niet onder
     de rand-fade afgeknipt oogt. JS togglet .carousel--at-end (_updateCarouselEndFade). */
  .reco-cards.carousel--at-end {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* Op desktop (>700px) hoeft de rij niet te scrollen — gewone flex-wrap */
@media (min-width: 701px) {
  .reco-cards {
    flex-wrap: wrap;
    overflow-x: visible;
    scroll-snap-type: none;
  }
}

/* Reco-kaart — hergebruikt visuele taal van .gallery-card (foto met matte band) */
.reco-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
  /* Mobiel: vaste breedte zodat de kaart goed snapt en de volgende kaart piept */
  flex: 0 0 min(240px, 70vw);
  scroll-snap-align: start;
}

@media (min-width: 701px) {
  /* Desktop: kaarten groeien mee en verdelen de rij gelijk, exact uitgelijnd met de chat-box */
  .reco-card {
    flex: 1 1 0;
    min-width: 0;
    scroll-snap-align: none;
  }
}

.reco-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* Foto-wrapper — zelfde patroon als .gallery-card-photo */
.reco-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;            /* compact landschap — kaart ~187px hoog op desktop */
  /* De band (naam + meta + reden + reserveer-zone) staat absoluut onderin deze
     overflow:hidden-wrapper. Op smalle/landschap-kaarten zou de band anders
     bovenaan afgekapt worden; min-height garandeert genoeg hoogte voor de zone
     (knop/chips, min-height 44px) zonder clipping. */
  min-height: 200px;
  overflow: hidden;
  flex-shrink: 0;
}

.reco-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}

.reco-card:hover .reco-card-photo img { transform: scale(1.04); }

/* Leesbaarheids-scrim als pseudo-element met vaste proportie — zelfde aanpak als
   .gallery-card-photo::before, zodat galerij en reco identiek ogen. Iets hoger
   (80%) omdat de reco-kaart compacter is (5/4) en proportioneel meer tekst draagt
   (naam + meta + redenregel + reserveer-zone). Onder de band/badges, boven de foto. */
.reco-card-photo::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 80%;
  pointer-events: none;
  z-index: 1;            /* boven de foto, onder band/badges (z-index:2) — zie .gallery-card-photo::before */
  background: linear-gradient(to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.64) 24%,
    rgba(0,0,0,.40) 48%,
    rgba(0,0,0,.16) 74%,
    transparent 100%);
}

/* Badge-stapel linksboven op de foto (status + social badge) */
.reco-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;            /* boven de scrim (::before, z-index:1) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Open/gesloten-status — zelfde frosted pill als .gallery-card-status */
.reco-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--shadow-sm);
}
.reco-card-status--open   { color: #1a7a3c; }
.reco-card-status--closed { color: #6b7280; }
[data-theme="dark"] .reco-card-status        { background: rgba(0,0,0,.6); }
[data-theme="dark"] .reco-card-status--open  { color: var(--color-success); }

/* Band met naam + meta + redenregel onderaan de foto. Scrim zit op
   .reco-card-photo::before (consistente, vaste hoogte); de band houdt alleen de
   tekst + text-shadow als leesbaarheids-verzekering. */
.reco-card-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;            /* boven de scrim (::before, z-index:1) */
  padding: 14px 12px 12px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.reco-card-name {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
}

.reco-card-meta {
  margin-top: 2px;
  font-size: .875rem;
  color: rgba(255,255,255,.95);
  /* Eén nette regel (prijs · keuken als platte tekst, geen losse badge). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Redenregel ("✓ Past bij jouw voorkeur voor vis") — max. 2 regels, subtiel accent */
.reco-card-reason {
  margin-top: 5px;
  font-size: .875rem;           /* min. 14px — zie CLAUDE.md mobiel-font-regel */
  color: rgba(255,255,255,.88);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 1;        /* één nette regel op de compacte kaart; volledige reden in de modal */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Social-badge "🔥 Populair deze week" — hergebruikt frosted pill-stijl van
   .gallery-card-tag; aparte class voor de warme kleur */
.gallery-card-popular {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #92400e;                 /* warme bruine tekst, leesbaar op wit */
  background: rgba(255,255,255,.92);
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .gallery-card-popular { background: rgba(0,0,0,.6); color: var(--color-warning); }

/* Zachte sociale badge "Deze week N× geboekt" (A3) — iets gedempter dan de 🔥-badge */
.gallery-card-booked {
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: #374151;
  background: rgba(255,255,255,.82);
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .gallery-card-booked { background: rgba(0,0,0,.5); color: #d1d5db; }

/* 'Nieuw'-badge — fris blauw-groen accent, duidelijk onderscheidend van de warme
   social-badge. Tekst via text-transform: uppercase zodat casing databron-onafhankelijk is.
   Contrast: #0f5543 op rgba(255,255,255,.92) -> ruim boven 4.5:1 (ca. 8:1). */
.gallery-card-new {
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f5543;                   /* donker blauw-groen; >4.5:1 op wit */
  background: rgba(255,255,255,.92);
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .04em;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .gallery-card-new { background: rgba(0,0,0,.6); color: var(--color-success); }

/* Dal-uur-boost-badge (AC2/AC3) — wint de badge-slot zolang effectief-actief.
   Warm amber-accent, duidelijk onderscheidend van de 🔥-social-badge (die bruin is).
   Contrast: #7c2d12 op rgba(255,255,255,.94) -> ruim boven 4.5:1 (ca. 8:1).
   ≥14px (.875rem), nowrap, frosted pill zoals de andere kaart-badges; de
   .gallery-card-badges-stapel houdt 'm al weg van de favoriet-knop (right:60px). */
.gallery-card-boost {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1.3;
  color: #7c2d12;                 /* diep amber-bruin; >4.5:1 op wit */
  background: rgba(255,255,255,.94);
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(6px) saturate(150%);
  backdrop-filter: blur(6px) saturate(150%);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .gallery-card-boost { background: rgba(0,0,0,.62); color: #fdba74; }

/* (Verwijderd: .chat-restaurant-cards / .chat-mini-* — was dubbelop met de
   inline-resto-cards binnen de bubble. Restaurants verschijnen nu uitsluitend
   inline-in-bubble via _enrichLastReply; zie .inline-resto-card hieronder in
   het Tabby-blok.) */

/* ─── Soortgelijke restaurants in detail ─────────────────────────────────────── */
.similar-section { margin-top: 28px; }
.similar-section h3 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--primary);
  margin-bottom: 12px;
}
.similar-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.similar-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  flex: 1;
  min-width: 160px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.similar-card:hover { background: var(--accent-light); transform: translateY(-1px); }
.similar-card-name { font-weight: 600; font-size: .875rem; color: var(--primary); }
.similar-card-meta { font-size: .875rem; color: var(--text-muted); margin-top: 2px; }

/* ─── Animaties ──────────────────────────────────────────────────────────────── */

/* ─── Responsive ────────────────────────────────────────────────────────────── */

/* Tablet (≤900px) */
@media (max-width: 900px) {
  /* Filterbalk: zoekveld op volle breedte, quick-rij eronder */
  .filter-search-wrap { flex-basis: 100%; }
}

/* Mobiel (≤700px) */
@media (max-width: 700px) {
  /* Navigatie: 3-kolom grid → 2-kolom (logo | acties) */
  .header-inner   { grid-template-columns: 1fr auto; gap: 8px; }
  .nav-links      { display: none; }
  .nav-auth       { display: none; }
  .btn-hamburger  { display: flex; }

  /* Restaurant grid */
  .restaurant-grid { grid-template-columns: 1fr; }

  /* Hero comprimeren — chat-invoer op smal scherm vlot zichtbaar */
  .hero-section     { padding: 40px 0 36px; }
  .hero-line-1,
  .hero-line-2      { font-size: clamp(1.9rem, 7.5vw, 2.7rem); }
  .hero-title       { margin-bottom: 10px; }

  /* Chat — krappere padding op mobiel (de interne max-height-cap staat in het
     ≤899px-blok, dat hier ook geldt) */
  .chat-messages { padding: 16px; }
  .message { max-width: 95%; }
  .chat-input-area { padding: 12px 14px; gap: 8px; }
  .recommendations-section { margin-bottom: 10px; }

  /* Fonts op mobiel leesbaar — primair/interactief >= 14px (.875rem) */
  .cuisine-tag        { font-size: .875rem; }
  .card-address       { font-size: .875rem; }
  .dish-category-title{ font-size: .875rem; }
  .card-description   { font-size: .875rem; }

  /* Account drawer (breedte-override staat ná de basisregel, zie hieronder) */
  .drawer-profile-header { padding: 16px 18px; flex-wrap: wrap; }
  .drawer-quick-actions { flex-direction: row; }
  .drawer-body    { padding: 16px 18px; }
  .drawer-tab { padding: 12px 12px; font-size: .875rem; }

  /* Modals */
  .modal-box { padding: 28px 20px; }
}

/* Klein (≤480px) — iPhone SE en vergelijkbaar */
@media (max-width: 480px) {
  /* Container iets minder padding — via de variabele zodat de carrousel-breakout
     (.gallery, margin == -var(--container-pad)) automatisch meekrimpt en niet
     10px buiten de viewport lekt (was: vaste -24px tegen 14px padding). */
  :root { --container-pad: 14px; }

  /* Hero nog compacter op iPhone SE (320–480px) */
  .hero-section     { padding: 28px 0 28px; }
  .hero-line-1,
  .hero-line-2      { font-size: clamp(1.75rem, 8.5vw, 2.15rem); }
  .hero-title       { margin-bottom: 8px; }

  /* (de chat-max-height-cap voor ≤480px staat in het latere ≤480px-blok bij de
     results-panel-overrides, zodat hij ná het ≤899px-blok in de cascade wint) */
  .recommendations-section { margin-bottom: 8px; }

  /* Hero acties op volle breedte */
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { text-align: center; justify-content: center; }

  /* Hero hint compacter */
  .hero-user-hint { padding: 12px 14px; font-size: .82rem; }

  /* Sectie titels */
  .section-title { font-size: 1.6rem; }

  /* Gewone modals (auth, groepsplanner) — gecentreerd met padding */
  .modal-box { padding: 24px 16px; border-radius: var(--radius-md); max-height: 92svh; }

  /* Groepsplanner */
  .radio-row { gap: 6px; }
  .radio-chip, .checkbox-chip { padding: 7px 12px; font-size: .8rem; }

  /* Quick-filter-rij: overflow-x zodat hij op zeer kleine schermen niet wrapt. */
  .filterbar-quick {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--container-pad));
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  .filterbar-quick::-webkit-scrollbar { display: none; }
  .filterbar-quick > * { flex-shrink: 0; }
  /* Stad-select cappen zodat een lange stad de pill niet voorbij de viewport
     verbreedt; de native dropdown toont de volle naam (AC4). */
  .filter-select { max-width: min(220px, 60vw); }

  /* Card foto iets kleiner */
  .card-photo { height: 130px; }
}

/* ─── Weer-banner ────────────────────────────────────────────────────────────── */
.weather-banner {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  text-align: center;
  padding: 10px 20px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.weather-banner:hover { background: linear-gradient(135deg, #d97706, #b45309); }
[data-theme="dark"] .weather-banner {
  background: linear-gradient(135deg, #92400e, #78350f);
  color: #fde68a;
}
[data-theme="dark"] .weather-banner:hover {
  background: linear-gradient(135deg, #78350f, #5c2d0a);
}

/* ─── Omgevingsbanner (test/lokaal — nooit zichtbaar op productie) ───────────── */
/* Eén variabele koppelt de bannerhoogte aan de sticky-offset van de header,
   zodat er geen losse magische getallen uit de pas gaan lopen. */
:root           { --env-banner-h: 0px;  }
.has-env-banner { --env-banner-h: 34px; }

.env-banner { display: none; }
.has-env-banner .env-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 101;                 /* net boven de site-header (z-index 100) */
  height: var(--env-banner-h);
  padding: 0 16px;
  background: var(--color-error);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
}
/* Gevulde infra-balk: wit op rood. In dark is --color-error een lichte rose
   (te licht voor witte tekst), dus hier een solide donkerrode vulling zodat
   het wit leesbaar blijft (WCAG). */
[data-theme="dark"] .env-banner { background: #7F1D1D; }
/* De sticky header zakt mee omlaag zodat de banner hem niet overlapt. */
.has-env-banner .site-header { top: var(--env-banner-h); }

@media (max-width: 700px) {
  .has-env-banner             { --env-banner-h: 38px; }
  .has-env-banner .env-banner { font-size: .875rem;   }  /* mobiel: min. 14px */
}

/* ─── Compacte filterbalk ────────────────────────────────────────────────────
   Zoekveld + quick-filters (stad, "Nu open", "Filters"). Quick-filters passen
   instant toe; "Filters" opent de filter-sheet met de gestagede paneel-filters. */
.filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.filter-search-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 180px;
}
.filter-search {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 14px 8px 40px;
  font-size: .9375rem;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.filter-search:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
[data-theme="dark"] .filter-search { background: var(--input-bg); }

.filter-search-ico {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Quick-filter-rij — op ≤480px een horizontale scroll-rij */
.filterbar-quick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Stad-select met chevron */
.filter-select-wrap { position: relative; }
.filter-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 8px 36px 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;
  font-family: var(--font-sans);
  font-weight: 500;
  cursor: pointer;
  outline: none;
  transition: border-color .15s, box-shadow .2s;
  max-width: 200px;
}
.filter-select:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.filter-select-ico {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* "Nu open"-toggle + "Filters"-knop — pill-knoppen met ≥44px tap-target */
.filter-toggle,
.filter-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.filter-toggle:hover,
.filter-more:hover { border-color: var(--text-muted); }
.filter-toggle:focus-visible,
.filter-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* "Nu open" is een quick-filter → kleurt op wanneer actief */
.filter-toggle .status-dot { background: var(--color-success); }
.filter-toggle[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.filter-toggle[aria-pressed="true"] .status-dot { background: #fff; }
/* Dark mode: --primary is lichtgroen → donkere tekst/dot voor contrast >=4.5:1
   (zelfde patroon als .chat-send-btn), niet wit dat erop wegvalt. */
[data-theme="dark"] .filter-toggle[aria-pressed="true"] { color: var(--on-primary); }
[data-theme="dark"] .filter-toggle[aria-pressed="true"] .status-dot { background: var(--on-primary); }

/* Telbadge op de "Filters"-knop — telt actieve paneel-filters */
.filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  background: var(--primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1;
}
.filter-badge[hidden] { display: none; }
[data-theme="dark"] .filter-badge { color: var(--on-primary); }

/* ─── Actieve-filterchips ────────────────────────────────────────────────────
   Eén chip per actieve filterwaarde + "Wis alles". Verborgen bij 0 filters. */
.active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}
.active-filters[hidden] { display: none; }

.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 32px;
  padding: 5px 6px 5px 13px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--accent-light);
  color: var(--text);
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-sans);
}
/* Chip-label kapt af i.p.v. de chip voorbij de viewport te duwen (AC3/AC4) */
.active-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(220px, 60vw);
}
.active-chip-remove {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
/* Onzichtbare 44x44 raakvlak-uitbreiding — comfortabel tapbaar zonder de chip
   visueel te vergroten (AC3: >=44px raakvlak, niet kleiner dan de oude 22px). */
.active-chip-remove::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.active-chip-remove:hover { background: rgba(0,0,0,.08); color: var(--text); }
.active-chip-remove:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.active-chip-remove .ico { width: 14px; height: 14px; }
[data-theme="dark"] .active-chip-remove:hover { background: rgba(255,255,255,.12); }

/* "Wis alles" als tekstknop in de chiprij */
.active-clear {
  border: none;
  background: none;
  padding: 6px 4px;
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
}
.active-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ─── Filter-drawer ──────────────────────────────────────────────────────────
   Slidet van rechts in beeld; presentatie identiek aan de auth-/restaurant-drawer
   (zelfde overlay/dimming via .drawer-overlay en exact dezelfde transition-tokens).
   Rechter-drawer op alle viewports, fullscreen onder 480px (zie @media). Breedte
   volgt de restaurant-drawer-conventie (5 secties met brede chip-grids). De kop/
   body/voet-classes (.filter-sheet-*) dragen de interne layout. De @media-override
   naar 100vw staat ná deze basisregel, anders wint die bij gelijke specificiteit
   (zie "Verspreide regels" in CLAUDE.md). */
.filter-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 96vw);
  background: var(--surface-2);
  z-index: 402;
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.filter-drawer.open { transform: translateX(0); }
.filter-drawer--closing { transition: transform .25s cubic-bezier(.4,0,1,1) !important; }

@media (max-width: 480px) {
  .filter-drawer { width: 100vw; }
}

.filter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.filter-sheet-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--primary);
  margin: 0;
}
/* Sluitknop in de kop — niet absoluut, gewoon in de flexflow */
.filter-sheet-head .modal-close { position: static; top: auto; right: auto; }

.filter-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 4px 20px 12px;
}

.filter-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.filter-section[hidden] { display: none; }
.filter-section:last-child { border-bottom: none; }
.filter-section-title {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
}

/* Optie-chips in de sheet (prijs, keuken, sfeer, kenmerken) */
.filter-options { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: .9375rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.filter-option:hover { border-color: var(--text-muted); color: var(--text); }
.filter-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.filter-option.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.filter-option .ico { width: 16px; height: 16px; }

/* Segmented control voor "Sorteren" — wederzijds exclusief */
.filter-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.filter-segment {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 8px 12px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: none;
  color: var(--text-muted);
  font-size: .9rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.filter-segment:hover { color: var(--text); }
.filter-segment:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.filter-segment.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

/* Moment-kiezer "Wanneer open?" — twee aparte controls (weekdag + tijd). Op
   desktop naast elkaar, op 375px gestapeld (volle breedte). Dark-mode via tokens. */
.filter-when {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.filter-when-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 140px;
}
.filter-when-label {
  font-size: .8125rem;          /* secundair micro-label, >= 12px */
  font-weight: 600;
  color: var(--text-muted);
}
.filter-when-select,
.filter-when-time {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;          /* primair/interactief, >= 14px */
  font-weight: 500;
  font-family: var(--font-sans);
  width: 100%;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.filter-when-select:hover,
.filter-when-time:hover { border-color: var(--text-muted); }
.filter-when-select:focus-visible,
.filter-when-time:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* type=time toont in sommige browsers een lichte klok-indicator; in dark-mode
   meekleuren zodat hij niet zwart-op-donker wegvalt. */
[data-theme="dark"] .filter-when-time::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.7);
}

@media (max-width: 480px) {
  .filter-when { flex-direction: column; gap: 12px; }
  .filter-when-field { width: 100%; min-width: 0; }
}

/* Sticky voet — "Wis alles" + "Toon N restaurants" */
.filter-sheet-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.filter-sheet-clear {
  border: none;
  background: none;
  padding: 12px 8px;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
}
.filter-sheet-clear:hover { color: var(--text); }
.filter-sheet-clear:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.filter-sheet-apply { flex: 1; justify-content: center; }

/* ─── Leeg-resultaat ─────────────────────────────────────────────────────────
   Vervangt de kale "Geen restaurants"-tekst — uitleg + herstelacties. */
.gallery-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
}
.gallery-empty-icon { color: var(--text-muted); }
.gallery-empty-icon .ico { width: 40px; height: 40px; }
.gallery-empty-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--primary);
  margin: 12px 0 6px;
}
.gallery-empty-text {
  font-size: .9375rem;
  color: var(--text-muted);
  margin: 0 auto 18px;
  max-width: 360px;
  line-height: 1.5;
}
.gallery-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.gallery-empty-relax {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color .15s;
}
.gallery-empty-relax:hover { border-color: var(--primary); color: var(--primary); }
.gallery-empty-relax:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.grid-footer { text-align: center; margin-top: 24px; }
.btn-load-more {
  background: none;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .2s;
}
.btn-load-more:hover { border-color: var(--primary); color: var(--primary); }

/* ─── Account drawer ─────────────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  z-index: 400;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.account-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 95vw);
  background: var(--surface-2);
  z-index: 401;
  box-shadow: -8px 0 40px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.account-drawer.open { transform: translateX(0); }

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.drawer-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.drawer-close {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.drawer-close:hover { background: var(--border); color: var(--text); }

/* ─── Drawer profiel header ─────────────────────────────────────────────────── */
.drawer-profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-user-info { flex: 1; min-width: 0; }
.drawer-quick-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.drawer-action-btn {
  font-size: .78rem;
  font-weight: 500;
  font-family: var(--font-sans);
  padding: 6px 12px;
  min-height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.drawer-action-btn:hover { border-color: var(--primary); color: var(--primary); }
.drawer-action-btn--danger:hover { border-color: var(--color-error); color: var(--color-error); }

/* ─── Drawer tab navigatie ───────────────────────────────────────────────────── */
.drawer-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.drawer-tabs::-webkit-scrollbar { display: none; }
.drawer-tab {
  padding: 12px 16px;
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
  min-height: 44px;
  flex-shrink: 0;
}
.drawer-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.drawer-tab:hover { color: var(--text); }

/* Avatar 56px in de drawer */
.account-drawer .drawer-avatar { width: 56px; height: 56px; font-size: 1.4rem; }

/* Closing animation class */
.account-drawer--closing { transition: transform .25s cubic-bezier(.4,0,1,1) !important; }

/* Mobiel: account-drawer fullscreen — net als de restaurant-drawer. Moet ná de
   basisregel (width: min(520px, 95vw)) staan, anders wint die bij gelijke
   specificiteit en blijft de drawer 95vw (zie "Verspreide regels" in CLAUDE.md). */
@media (max-width: 700px) {
  .account-drawer { width: 100vw; }
}

/* ─── Auth drawer ────────────────────────────────────────────────────────────── */
.auth-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(460px, 95vw);
  background: var(--surface-2);
  z-index: 402;
  box-shadow: -8px 0 40px rgba(0,0,0,.15);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.auth-drawer.open { transform: translateX(0); }
.auth-drawer--closing { transition: transform .25s cubic-bezier(.4,0,1,1) !important; }

.auth-drawer-body { gap: 0; padding: 24px 24px 32px; }

.auth-forgot-wrap { text-align: center; margin-top: 12px; }
.auth-forgot-link {
  font-size: .875rem;
  color: var(--primary);
  text-decoration: none;
  transition: opacity .15s;
}
.auth-forgot-link:hover { opacity: .75; }

@media (max-width: 480px) {
  .auth-drawer { width: 100vw; }
}

/* ─── Restaurant detail drawer ───────────────────────────────────────────── */
.restaurant-drawer {
  --rd-topbar-h: 56px;
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 96vw);
  background: var(--surface-2);
  z-index: 402;
  box-shadow: -8px 0 40px rgba(0,0,0,.18);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.restaurant-drawer.open { transform: translateX(0); }
.restaurant-drawer--closing { transition: transform .25s cubic-bezier(.4,0,1,1) !important; }

/* restaurantModalContent vult het drawer-paneel */
#restaurantModalContent {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ─── Zwevende topbar — actieknoppen op de foto, solide bij scrollen ─────── */
.rd-topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--rd-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  z-index: 10;
  pointer-events: none;            /* transparante balk vangt geen kliks op de foto */
  border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
.rd-topbar > * { pointer-events: auto; }
.rd-topbar--solid {
  background: var(--surface-2);
  border-bottom-color: var(--border);
  pointer-events: auto;            /* solide balk vangt kliks, niet doorvallen naar content */
}
.rd-topbar-actions { display: flex; gap: 8px; }
.rd-topbar-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity .2s;
}
.rd-topbar--solid .rd-topbar-title { opacity: 1; }

/* Ronde zwevende knoppen — op de foto: wit met schaduw */
.rd-circle-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.30);
  transition: background .2s, color .2s, box-shadow .2s, border-color .2s;
}
.rd-circle-btn:hover { background: #fff; }
.rd-circle-btn--close { font-size: 1.1rem; }
/* In de solide balk: lichte vulling + rand zodat de knoppen blijven opvallen */
.rd-topbar--solid .rd-circle-btn {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.rd-topbar--solid .rd-circle-btn:hover { background: var(--surface); }
.rd-circle-btn--fav.active { color: #E11D48; }
.rd-circle-btn--fav.active svg { fill: #E11D48; }
.rd-circle-btn.copied { background: var(--primary); color: #fff; }

/* ─── Zwevende reserveer-FAB — pill die inklapt tot ronde bubbel ─────────── */
.rd-fab {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 170px;          /* vaste breedtes i.p.v. auto → width animeert soepel */
  height: 56px;
  padding: 0 22px;
  border: none;
  border-radius: 28px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .95rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: padding .25s, gap .25s, width .25s, box-shadow .15s;
}
.rd-fab:hover { box-shadow: 0 8px 24px rgba(0,0,0,.34); }
.rd-fab svg { flex-shrink: 0; }
.rd-fab-label {
  overflow: hidden;
  max-width: 160px;
  transition: max-width .25s, opacity .2s;
}
.rd-fab--mini {
  padding: 0;
  width: 56px;
  gap: 0;
  justify-content: center;
}
.rd-fab--mini .rd-fab-label {
  max-width: 0;
  opacity: 0;
}
/* Hover over de ingeklapte bubbel → weer de volledige pill (soepel, vaste breedte) */
.rd-fab--mini:hover {
  width: 170px;
  padding: 0 22px;
  gap: 8px;
}
.rd-fab--mini:hover .rd-fab-label {
  max-width: 160px;
  opacity: 1;
}

/* ─── Scrollgebied — alles onder de topbar ───────────────────────────────── */
.rd-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* Strakke, dunne scrollbar i.p.v. de chunky systeembalk */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.22) transparent;
}
.rd-scroll::-webkit-scrollbar { width: 8px; }
.rd-scroll::-webkit-scrollbar-track { background: transparent; }
.rd-scroll::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.20);
  border-radius: 4px;
}
.rd-scroll::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,.32); }
[data-theme="dark"] .rd-scroll { scrollbar-color: rgba(255,255,255,.22) transparent; }
[data-theme="dark"] .rd-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.20); }
[data-theme="dark"] .rd-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.32); }

/* ─── Hero-foto — full-bleed, eerste element in het scrollgebied ────────── */
.rd-hero {
  position: relative;
  width: 100%;
  height: min(340px, 52vw);
  overflow: hidden;
  background: var(--border);
  flex-shrink: 0;
}
.rd-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero-info — matte/frosted band onderin .rd-hero */
.rd-hero-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 20px 18px;
  background: linear-gradient(to top, rgba(12,14,18,.62), rgba(12,14,18,.30));
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border-top: 1px solid rgba(255,255,255,.10);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rd-hero-name {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-hero-meta {
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
}
.rd-hero-address,
.rd-hero-phone {
  font-size: .875rem;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rd-hero-address a,
.rd-hero-phone a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.rd-hero-address a:hover,
.rd-hero-phone a:hover { color: #fff; }

/* Content boven de tabbalk (direct na hero) */
.rd-above {
  padding: 0 0 4px;
}

/* Inhoud-sectie met padding */
.rd-above-inner {
  padding: 16px 20px 4px;
}

/* Tabbalk + zoekveld — sticky binnen .rd-scroll, plakt onder de topbar */
.rd-tabsbar {
  position: sticky;
  top: var(--rd-topbar-h);
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.rd-tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rd-tabs::-webkit-scrollbar { display: none; }
.rd-tab {
  flex: 1;
  min-width: 0;
  padding: 12px 8px;
  min-height: 44px;
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.rd-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.rd-tab:hover:not(.active) { color: var(--text); }
.rd-search-wrap {
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.rd-search {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: .9rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.rd-search:focus { border-color: var(--primary); }
.rd-search::placeholder { color: var(--text-muted); }

/* Tab-inhoud panes */
.rd-panes { padding: 4px 20px 32px; }
.rd-pane { display: block; }
.rd-pane[hidden] { display: none; }

/* Lege staat binnen een pane */
.rd-empty {
  padding: 32px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
}

/* Footer-sectie: "Misschien ook interessant" + "Stel een vraag"-knop
   Extra onderruimte zodat content niet achter de zwevende FAB verdwijnt. */
.rd-footer {
  padding: 8px 20px 88px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .rd-hero { height: min(300px, 48vw); }
}
@media (max-width: 700px) {
  .restaurant-drawer { width: min(720px, 100vw); }
  .rd-hero { height: min(280px, 52vw); }
  .rd-above-inner { padding: 14px 16px 4px; }
  .rd-panes { padding: 4px 16px 28px; }
  .rd-footer { padding: 8px 16px 88px; }
}
@media (max-width: 480px) {
  .restaurant-drawer { width: 100vw; }
  .rd-tab { font-size: .875rem; }
  .rd-hero { height: min(264px, 66vw); }
  .rd-hero-name { font-size: 1.2rem; }
  .rd-fab { bottom: 16px; right: 16px; }
}

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.drawer-loading { color: var(--text-muted); font-size: .9rem; padding: 20px 0; }

/* Drawer profiel */
.drawer-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg);
  border-radius: var(--radius-md);
}
.drawer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--primary);
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.drawer-name  { font-weight: 600; font-size: 1rem; color: var(--primary); }
.drawer-email { font-size: .8rem; color: var(--text-muted); }
.drawer-since { font-size: .75rem; color: var(--text-muted); margin-top: 2px; }

/* Drawer sectie */
.drawer-section { }
.drawer-section-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Smaakprofiel — twee secties:
   1. .taste-stats — 5 verticale mini-bars naast elkaar (Spotify Wrapped-stijl),
      hoogte = % van totaal-score. Categorienaam + % ERONDER. Lege categorie:
      lege bar + "—" pct, gemute styling via .taste-stat--empty.
   2. .taste-detail — per categorie naam-kop + chips-rij (.taste-cat-tags).
      Lege categorie: skeleton-hint (.taste-detail-cat-hint) ipv chips.
   Hergebruikt .taste-tag*, .taste-cat-tags en .taste-cat-more (chips-grid +
   <details>-collapse, identiek aan vorig design). */
.taste-breakdown { display: flex; flex-direction: column; gap: 18px; }

.taste-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.taste-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.taste-stat-bar {
  width: 100%;
  max-width: 28px;
  height: 64px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.taste-stat-bar > span {
  display: block;
  width: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: height .4s ease;
}
.taste-stat-name {
  font-size: .75rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.1;
}
.taste-stat-pct {
  font-size: .75rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.taste-stat--empty .taste-stat-pct { color: var(--text-muted); font-weight: 400; }

.taste-detail        { display: flex; flex-direction: column; gap: 14px; }
.taste-detail-cat    { display: flex; flex-direction: column; gap: 6px; }
.taste-detail-cat-name { font-size: .82rem; font-weight: 600; color: var(--text); }
.taste-detail-cat--empty .taste-detail-cat-name { color: var(--text-muted); }
.taste-detail-cat-hint {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

.taste-cat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.taste-cat-more { margin-top: 2px; }
.taste-cat-more summary {
  font-size: .78rem;
  color: var(--text-muted);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
}
.taste-cat-more summary::-webkit-details-marker { display: none; }
.taste-cat-more summary::before { content: '↘ '; }
.taste-cat-more[open] summary::before { content: '↗ '; }
.taste-cat-more .taste-cat-tags { margin-top: 6px; }

/* Smaakprofiel tags */
.taste-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.taste-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--accent-light);
  color: var(--accent-text);
  font-size: .78rem;
  font-weight: 600;
  padding: 4px 6px 4px 12px;
  border-radius: 100px;
}
.taste-tag--empty { color: var(--text-muted); font-size: .85rem; font-style: italic; }

/* ×-verwijderknop in smaaktag (A2) — hit-area ≥44×44px via transparante padding;
   zichtbaar ×-icoon kleiner zodat de chip niet oversized oogt */
.taste-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -8px -6px -8px 0;
  padding: 0 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent-text);
  font-size: .85rem;
  line-height: 1;
  opacity: .6;
  border-radius: 100px;
  transition: opacity .15s;
}
.taste-tag-remove:hover,
.taste-tag-remove:focus-visible { opacity: 1; }

/* Explicit-chip: komt uit fav_cuisines (Voorkeuren-cards). Geen ×-knop —
   beheer via de cards eronder. Outline + transparante achtergrond maakt
   visueel duidelijk dat het een ander soort signaal is dan een organic chip
   uit chat/favoriet/view (die anti-yo-yo-dismissed kan worden). */
.taste-tag--explicit {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--accent);
  padding: 3px 11px;
  cursor: default;
}
[data-theme="dark"] .taste-tag--explicit { color: var(--accent); }

/* Drawer sessies */
.drawer-sessions { display: flex; flex-direction: column; gap: 2px; }
.drawer-session {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s;
}
.drawer-session:hover { background: var(--bg); }
.drawer-session-title { font-size: .875rem; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.drawer-session-date  { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }

/* Drawer voorkeuren knop */
.drawer-prefs-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: .875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  color: var(--primary);
  transition: background .15s;
}
.drawer-prefs-btn:hover { background: var(--accent-light); }

.drawer-logout-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px;
  font-size: .875rem;
  font-family: var(--font-sans);
  cursor: pointer;
  color: var(--text-muted);
  transition: all .15s;
  margin-top: auto;
}
.drawer-logout-btn:hover { border-color: var(--color-error); color: var(--color-error); }

/* ─── Checkbox & radio chips (gedeeld door account + groepsplanner modal) ─────── */
.checkbox-row, .radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.checkbox-chip, .radio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg);
  font-size: .82rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}

/* Verberg native inputs — visuele staat via .checked class */
.checkbox-chip input,
.radio-chip input { display: none; }

.checkbox-chip.checked, .radio-chip.checked {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.checkbox-chip:hover:not(.checked), .radio-chip:hover:not(.checked) {
  background: var(--accent-light);
  border-color: var(--accent);
}

/* ─── Voorkeuren-paneel: icon-cards op gradient ─────────────────────────────
   Vervangt de neutrale chip-rijen voor "Wie ben je?" + "Wat zoek je nu?" door
   foto-card-achtige tegels: gradient-vak met wit Lucide-icon + label eronder.
   .pref-cards = 2-koloms grid (grote groep-keuzes), .pref-cards--mini =
   compactere variant (favoriete keukens, eetmoment, prijs, stad). Selected-
   state: primary border + halo + checkmark-badge. */
.pref-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pref-cards--mini {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
/* Per-groep grid-modifiers — voorkomen een wees-kaart op rij 2 bij oneven sets. */
.pref-cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pref-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }
.pref-cards--cols-5 { grid-template-columns: repeat(5, 1fr); }

.pref-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
  min-height: 44px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pref-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pref-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.pref-card.checked {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(1, 93, 44, .22);
}

.pref-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(72px, 10vh);
}
.pref-card-icon-wrap--diet     { background: linear-gradient(135deg, var(--matcha) 0%, #9fb554 100%); }
.pref-card-icon-wrap--occasion { background: linear-gradient(135deg, var(--accent) 0%, #c25c14 100%); }
.pref-card-icon-wrap--style    { background: linear-gradient(135deg, var(--primary) 0%, #02804a 100%); }
.pref-card-icon-wrap--cuisine  { background: linear-gradient(135deg, var(--accent) 0%, #c25c14 100%); }
.pref-card-icon-wrap--moment   { background: linear-gradient(135deg, var(--accent) 0%, #c25c14 100%); }
.pref-card-icon-wrap--city     { background: linear-gradient(135deg, var(--primary) 0%, #02804a 100%); }

.pref-card-icon {
  width: 36px;
  height: 36px;
  color: #fff;
}
.pref-card-label {
  font-family: var(--font-serif);
  font-size: .875rem;
  font-weight: 600;
  padding: 8px 6px;
  text-align: center;
  color: var(--text);
  line-height: 1.25;
}
.pref-card-check {
  position: absolute;
  top: 6px;
  right: 6px;
  color: #fff;
  background: var(--primary);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
}
.pref-card-check .ico { width: 16px; height: 16px; }
.pref-card.checked .pref-card-check { display: inline-flex; }

/* Mini-variant: compactere kaarten voor secundaire keuzes */
.pref-card--mini .pref-card-icon-wrap { height: 60px; }
.pref-card--mini .pref-card-icon      { width: 28px; height: 28px; }
.pref-card--mini .pref-card-label     { font-size: .8125rem; padding: 6px; }
.pref-card--mini .pref-card-check     { width: 18px; height: 18px; top: 4px; right: 4px; }
.pref-card--mini .pref-card-check .ico { width: 12px; height: 12px; }

/* Prijs-variant: geen icoon, grote €-tekens als label */
.pref-card--price .pref-card-icon-wrap {
  height: 48px;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Dark-mode tint-aanpassingen — matcha kan in dark als vies ogen, donkerder
   variant verbetert contrast met wit icon. */
[data-theme="dark"] .pref-card-icon-wrap--diet {
  background: linear-gradient(135deg, #6d7a3a 0%, #3f5520 100%);
}

@media (max-width: 700px) {
  .pref-cards { gap: 10px; }
  .pref-card-icon-wrap { height: 64px; }
}
@media (max-width: 480px) {
  .pref-card-label    { font-size: .8125rem; }
  .pref-card-icon-wrap { height: 56px; }
  .pref-cards--mini   { grid-template-columns: repeat(3, 1fr); }
  .pref-cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .pref-cards--cols-5 { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Voorkeuren-paneel: secties + groepen ───────────────────────────────── */
.pref-section { margin-top: 18px; }
.pref-section:first-of-type { margin-top: 0; }
.pref-section-title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.pref-group { margin-bottom: 14px; }
.pref-group:last-child { margin-bottom: 0; }
.pref-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.pref-hint {
  font-weight: 400;
  font-size: .75rem;
  color: var(--text-muted);
}
.pref-row {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}
.pref-group--half { flex: 1; min-width: 0; }

@media (max-width: 700px) {
  .pref-row { flex-direction: column; gap: 0; }
}

/* ─── Profiel-banner boven homepage ───────────────────────────────────────── */
/* z-index zodat de banner boven de hero blijft als die met negative margin
   onder de glass-nav doorschuift; relative-position is nodig om z-index te
   activeren in de normale document-flow. */
.profile-banner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(960px, 92vw);
  margin: 12px auto;
  padding: 12px 14px;
  background: var(--accent-light);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  color: var(--accent-text);
  font-size: .9rem;
  line-height: 1.4;
}

/* Als de banner direct vóór de spotlight-hero staat, dan annuleren we de
   negative-margin-trick die de hero anders ónder de banner zou schuiven (de
   hero loopt normaal achter de nav door, maar tussen banner en hero hoort
   geen overlap). De prisma start dan exact onder de banner. */
.profile-banner + .hero-section--spotlight {
  margin-top: 0;
  padding-top: 56px;
}
.profile-banner-text { flex: 1; font-weight: 500; }
.profile-banner-cta {
  padding: 8px 16px;
  min-height: 44px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.profile-banner-cta:hover { filter: brightness(.95); }
.profile-banner-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  opacity: .6;
  flex-shrink: 0;
}
.profile-banner-close:hover { opacity: 1; }

@media (max-width: 700px) {
  .profile-banner {
    flex-wrap: wrap;
    padding: 10px 12px;
  }
  .profile-banner-text { flex: 1 1 100%; order: 1; }
  .profile-banner-cta  { order: 2; }
  .profile-banner-close { order: 3; margin-left: auto; }
}
@media (max-width: 480px) {
  .profile-banner { max-width: 100vw; border-radius: 0; margin: 0 0 12px; }
}

/* ─── Verificatie-banner (hergebruik .profile-banner + eigen status-regel) ───── */
/* De resend-status krijgt een eigen volle-breedte regel onder de tekst/knoppen;
   daarom mag de banner wrappen ook op desktop. */
.verify-banner { flex-wrap: wrap; }
/* Resend = primaire interactie → font-vloer 14px (CLAUDE.md), boven de .85rem
   van de gedeelde profielbanner-CTA. */
.verify-banner .profile-banner-cta { font-size: .875rem; }
.verify-banner-status {
  flex: 1 1 100%;
  order: 5;
  margin-top: 2px;
  font-size: .8rem;
  line-height: 1.4;
  font-weight: 600;
}
.verify-banner-status:empty { display: none; }
/* Kleur is nooit de enige drager (de copy verschilt al); de tinten halen
   >=4.5:1 in beide thema's. */
.verify-banner-status--ok  { color: var(--color-success); }
.verify-banner-status--err { color: var(--color-error); }

/* ─── Range input ────────────────────────────────────────────────────────────── */
.range-input {
  width: 100%;
  height: 4px;
  accent-color: var(--primary);
  margin-top: 8px;
}

/* ─── Restaurant kaart foto ──────────────────────────────────────────────────── */
.card-photo {
  position: relative;
  height: 148px;
  overflow: hidden;
  flex-shrink: 0;
}
.card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.restaurant-card:hover .card-photo img { transform: scale(1.03); }
.card-photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.55));
  display: flex;
  gap: 6px;
  align-items: center;
}
.price-badge--light { color: #fff; }

.card-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 22px; }

.card-body--list {
  gap: 8px;
  padding: 18px 20px 16px;
}
.card-body--list .card-name {
  font-size: 1.1rem;
  line-height: 1.3;
  margin-top: 2px;
}
.card-body--list .card-description {
  color: var(--text);
  font-size: .875rem;
  line-height: 1.6;
  opacity: .75;
  margin-top: 2px;
}
.card-body--list .card-address {
  font-size: .875rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.card-cta {
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.restaurant-card:hover .card-cta { text-decoration: underline; }

/* ─── Open/gesloten badge ─────────────────────────────────────────────────── */
.open-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:.875rem; font-weight:600; }
.open-badge--open   { background:var(--color-success-bg); color:var(--color-success); }
.open-badge--closed { background:var(--color-error-bg); color:var(--color-error); }

/* Tijdelijke-sluiting-banner (vakantiesluiting) op het detailpaneel: "Gesloten t/m
   do 8 jan" + vrije note. Span-only/inline-veilig (buildOpenStatusBadge-regel), maar
   display:flex maakt er een blokje van. Kop >=14px, note 12-14px (mobiel-font-vloer).
   Contrast >=4.5:1 in licht én donker. */
.closure-banner {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px;
  margin-bottom:8px; padding:8px 12px; border-radius:10px;
  background:var(--color-error-bg); border:1px solid var(--color-error);
}
.closure-banner svg { color:var(--color-error); flex-shrink:0; }
.closure-banner-head { font-size:.875rem; font-weight:700; color:var(--color-error); line-height:1.35; }
.closure-banner-note { flex-basis:100%; font-size:.8125rem; color:#7f1d1d; line-height:1.5; }
[data-theme="dark"] .closure-banner-note { color:var(--color-error); }

/* Openingstijden — inklapbaar <details>: alleen vandaag, uitklap = hele week */
.hours-week { margin: 4px 0 2px; font-size: .875rem; }
.hours-week summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  list-style: none;
}
.hours-week summary::-webkit-details-marker { display: none; }
.hours-week summary::after {
  content: '▾';
  margin-left: 2px;
  color: var(--text-muted);
  transition: transform .2s;
}
.hours-week[open] summary::after { transform: rotate(180deg); }
.hours-week table { border-collapse: collapse; margin: 2px 0 6px; width: 100%; }
/* Tijd-cel mag wrappen (dag met meerdere tijdvakken) i.p.v. de pagina te laten
   overlopen op 375px; alleen de korte dag-kolom blijft op één regel. */
.hours-week td { padding: 2px 10px 2px 0; color: var(--text-muted); vertical-align: top; }
.hours-week td:last-child { padding-right: 0; word-break: normal; overflow-wrap: anywhere; }
.hours-week td:first-child { width: 34px; font-weight: 500; white-space: nowrap; }
.hours-week tr.hours-today td { color: var(--text); }
.hours-week tr.hours-today td:first-child::after { content: ' ◀'; font-size: .7rem; color: var(--primary); }

/* ─── Favorieten hart ─────────────────────────────────────────────────────── */
.fav-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.1rem;
  padding: 4px 6px; line-height: 1;
  transition: color .15s, transform .15s;
}
.fav-btn.active { color: #E11D48; }
.fav-btn:hover  { transform: scale(1.2); }

/* ─── Chat onboarding chips ──────────────────────────────────────────────── */
/* Chips sluiten visueel aan op de AI-begroeting: lichte inspringing,
   subtiele scheiding, geen extra opsmuk */
.chat-onboarding {
  padding: 6px 20px 10px 56px; /* inspringen tot onder AI-avatar */
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
/* Klein, gedempt label boven de voorbeeldvragen — geeft een duidelijke voorzet.
   font-size minimaal .875rem (14px) — CLAUDE.md-ondergrens voor mobiel font. */
.onboarding-label {
  margin: 8px 0 2px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
}
/* Gelijk 2-koloms raster — zelfde breedte per chip, geen rafelige rij. */
/* 1-koloms stack — past bij de smalle chat-card en is consistent met de POC
   (Spotlight Crystal toont chips onder elkaar zodat de tekst niet afgekapt
   wordt en het oog van boven naar beneden door de opties beweegt). */
.onboarding-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.onboarding-chip {
  /* tap target ≥ 44×44px (CLAUDE.md) */
  display: inline-flex; align-items: center; gap: 8px;
  justify-content: flex-start; text-align: left;
  min-height: 44px; padding: 8px 14px;
  /* Rustige outline-stijl: het accent zit alleen in het icoon, niet in een
     volvlaks vulling — strak & clean, secundair t.o.v. de groene verzendknop. */
  border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface);
  font-size: .875rem; font-family: var(--font-sans);
  cursor: pointer; color: var(--text);
  transition: background .12s, border-color .12s, box-shadow .12s, transform .12s;
  /* Voorbeeldvragen faden zacht in (oplopende delay per :nth-child hieronder). */
  animation: fadeUp .3s ease-out both;
}
.onboarding-chip .ico { color: var(--accent); flex-shrink: 0; }
.onboarding-chip:nth-child(1) { animation-delay: 60ms; }
.onboarding-chip:nth-child(2) { animation-delay: 120ms; }
.onboarding-chip:nth-child(3) { animation-delay: 180ms; }
.onboarding-chip:nth-child(4) { animation-delay: 240ms; }
.onboarding-chip:hover {
  background: var(--accent-light); border-color: var(--accent);
  transform: translateY(-1px);
}

/* ─── Populaire restaurantkaartjes ───────────────────────────────────────── */
.popular-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.popular-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
  cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.popular-card:hover { box-shadow: var(--shadow-md); border-color: var(--primary); }
.popular-card-name  { font-weight: 600; font-size: .875rem; color: var(--text); margin-bottom: 4px; }
.popular-card-meta  { font-size: .75rem; color: var(--text-muted); }

/* ─── Restaurant-galerij ─────────────────────────────────────────────────── */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 90vw), 1fr));
  gap: 20px;
  margin-bottom: 8px;
}

/* Mobiele carrousel */
@media (max-width: 700px) {
  .gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 24px;       /* gesnapte kaart 24px van de schermrand */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 14px;
    /* Negatieve marge zodat kaarten tot de container-edge lopen. Gekoppeld aan
       --container-pad (24px / 14px ≤480px) zodat de breakout exact de container-
       insprong opheft en nooit voorbij de viewport-rand lekt (paginabrede scroll). */
    margin-left: calc(-1 * var(--container-pad));
    margin-right: calc(-1 * var(--container-pad));
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
    /* Subtiele rand-fade: suggereert dat de carrousel doorloopt */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 36px), transparent 100%);
  }
  .gallery::-webkit-scrollbar { display: none; }
  /* Eén resultaat: kaart vult de breedte, geen valse peek én geen rand-fade. */
  .gallery.carousel--single {
    -webkit-mask-image: none;
            mask-image: none;
  }
  .gallery.carousel--single .gallery-card {
    flex: 0 0 100%;
  }
}

/* ─── Carousel "X van N"-positie-indicatie (alleen mobiele hoofd-carousel) ─────
   Subtiele pill onder de galerij; volgt de zichtbare kaart via IntersectionObserver
   in app.js. Standaard verborgen (desktop-grid); JS toont 'm alleen in carousel-
   modus met >1 resultaat. [hidden]-gotcha: .carousel-pos zet geen display, dus
   het [hidden]-attribuut werkt hier zonder extra regel. */
.carousel-pos {
  display: none;
}
@media (max-width: 700px) {
  .carousel-pos {
    display: block;
    width: max-content;
    margin: 12px auto 4px;
    padding: 5px 14px;
    border-radius: 100px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    color: var(--text-muted);
    font-size: .8125rem;     /* micro-meta: ≥12px (.75rem)-vloer gerespecteerd */
    font-weight: 500;
    line-height: 1;
    text-align: center;
    -webkit-user-select: none;
            user-select: none;
  }
  .carousel-pos[hidden] { display: none; }
  .carousel-pos strong { color: var(--text); font-weight: 700; }
}

/* Galerij-kaart — immersief: tekst over de foto */
.gallery-card {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}

.gallery-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* ─── Gesloten kaart — visueel secundair, niet dood ─────────────────────────
   Open kaarten houden prioriteit: een gesloten kaart krijgt een iets zachtere
   foto (minder verzadiging/contrast) + een rustigere schaduw en hover-lift, en
   een ghost-CTA (zie .gallery-card-reserve--ghost). De kaart-layout blijft
   identiek aan een open kaart; alleen het accent zakt. */
.gallery-card--closed {
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.gallery-card--closed:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.gallery-card--closed .gallery-card-photo img {
  filter: saturate(.82) brightness(.93);
}

/* Carrousel-modus: kaart ~76vw zodat de volgende duidelijk piept (scroll-affordance) */
@media (max-width: 700px) {
  .gallery-card,
  .skeleton-card {
    flex: 0 0 76vw;
    scroll-snap-align: start;
  }
}

@media (max-width: 480px) {
  .gallery-card,
  .skeleton-card { flex: 0 0 80vw; }
}

/* Foto vult de hele kaart — immersieve tegel, geen aparte footer */
.gallery-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: var(--card-aspect);
  overflow: hidden;
  flex-shrink: 0;
}

.gallery-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}

.gallery-card:hover .gallery-card-photo img { transform: scale(1.04); }

/* Leesbaarheids-scrim als pseudo-element met VASTE proportie van de kaarthoogte,
   los van hoeveel tekst de band bevat. Zo krijgt elke kaart (kort of met
   beschrijving, knop of chips) exact dezelfde overlay → consistent over de hele
   galerij. Premium i.p.v. zwaar: zacht oplopend, piek .82 (geen hard zwart blok).
   DOM-volgorde: ::before is het eerste kind van .gallery-card-photo → schildert
   boven de foto maar onder de absolute tekstband en badges, dus tekst/CTA blijven
   leesbaar. pointer-events:none zodat klikken/chips niet geblokkeerd worden. */
.gallery-card-photo::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72%;
  pointer-events: none;
  /* z-index expliciet zodat de scrim altijd boven de foto blijft, óók wanneer de
     img bij hover een transform krijgt of (bij gesloten kaarten) een filter — dan
     vormt de img namelijk een stacking context en zou hij anders bóven deze
     ::before springen (foto plots helderder, en een flikker bij het terugvallen
     van de hover-laag). De tekstband/badges staan met z-index:2 weer boven de scrim. */
  z-index: 1;
  background: linear-gradient(to top,
    rgba(0,0,0,.82) 0%,
    rgba(0,0,0,.64) 24%,
    rgba(0,0,0,.40) 48%,
    rgba(0,0,0,.16) 74%,
    transparent 100%);
}

/* Badge-stapel linksboven op de foto: status + kenmerk-pills.
   right houdt de stapel weg van het favoriet-hartje rechtsboven. */
.gallery-card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 60px;
  z-index: 2;            /* boven de scrim (::before, z-index:1) */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

/* Open/gesloten-status — pill linksboven op de foto */
.gallery-card-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--shadow-sm);
}
.gallery-card-status--open    { color: #1a7a3c; }
.gallery-card-status--closed  { color: #6b7280; }
.gallery-card-status--unknown { color: #78716c; }
[data-theme="dark"] .gallery-card-status         { background: rgba(0,0,0,.6); }
[data-theme="dark"] .gallery-card-status--open   { color: var(--color-success); }
[data-theme="dark"] .gallery-card-status--unknown { color: #9ca3af; }

/* ─── Gedeelde status-row + "Opent ..."-label ─────────────────────────────
   Wrapper rond de gesloten-pil + .card-next-open — gebruikt door galerij,
   reco én chat-inline (single source of truth via buildOpenStatusBadge).
   Pil = tap-target (blijft eigen padding/font); label = info-only, kleiner. */
.card-status-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.card-next-open {
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.3;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px) saturate(140%);
  color: #1f2937;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .card-next-open {
  background: rgba(0,0,0,.55);
  color: #e5e7eb;
}
@media (max-width: 480px) {
  .card-next-open {
    font-size: .75rem;     /* 12px-vloer ook op het kleinste scherm */
    max-width: 85vw;
    white-space: normal;
  }
}

/* Favoriet-hartje — rustige zwevende glyph rechtsboven op de foto.
   Default: geen chunky witte cirkel meer; alleen een wit hartje met zachte
   schaduw (leesbaar op elke foto) en iets verlaagde opacity, zodat het niet
   concurreert met naam/badges/CTA. De duidelijke staat verschijnt pas op
   hover/focus (frosted cirkel) of bij geselecteerd (gevuld merk-accent).
   Tap-target blijft 44px ondanks de kleinere glyph. */
.gallery-card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;            /* boven de scrim (::before, z-index:1) */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #fff;
  opacity: .9;
  cursor: pointer;
  transition: transform .15s, color .15s, opacity .15s, background .15s, backdrop-filter .15s;
}
.gallery-card-fav svg {
  width: 19px;
  height: 19px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.gallery-card-fav:hover,
.gallery-card-fav:focus-visible {
  opacity: 1;
  transform: scale(1.08);
  background: rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
  backdrop-filter: blur(5px) saturate(140%);
}
.gallery-card-fav:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.gallery-card-fav.active { color: var(--primary); opacity: 1; }
[data-theme="dark"] .gallery-card-fav        { color: #fff; }
[data-theme="dark"] .gallery-card-fav.active { color: var(--primary); }

/* Frosted band met alle kaartinhoud over de onderkant van de foto */
.gallery-card-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;            /* boven de scrim (::before, z-index:1) */
  padding: 16px 14px 14px;
  color: #fff;
  /* Scrim zit nu op .gallery-card-photo::before (consistente, vaste hoogte).
     De band houdt alleen de tekst; de text-shadow blijft als extra leesbaarheids-
     verzekering bovenaan de tekst op heel lichte of drukke foto's. */
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

.gallery-card-name {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
}

.gallery-card-meta {
  margin-top: 3px;
  font-size: .875rem;
  color: rgba(255,255,255,.92);
  /* Eén nette regel (prijs · keuken · stad als platte tekst, geen losse badge).
     Prijs vooraan zodat die altijd heel zichtbaar blijft; een heel lang keuken-
     type/plaats kapt netjes af met ellipsis i.p.v. raar te wrappen. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gallery-card-desc {
  margin-top: 4px;
  font-size: .875rem;
  line-height: 1.4;
  color: rgba(255,255,255,.82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kenmerk-pills — rij badges op de foto, onder de status */
.gallery-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Kenmerk-pill — lichte frosted badge, leesbaar op élke foto (zoals de status) */
.gallery-card-tag {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #374151;
  background: rgba(255,255,255,.92);
  border-radius: 100px;
  padding: 4px 11px;
  white-space: nowrap;
  text-transform: capitalize;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .gallery-card-tag { background: rgba(0,0,0,.6); color: #cbd0d8; }

/* Reserveer-knop — gevulde accent-CTA op een eigen regel, volle breedte.
   Dit is de reserveer-zone van de kaart.
   PLACEHOLDER: de toekomstige "reserveer op tijdslot"-feature vervangt deze
   knop door een rij beschikbare tijdslot-chips op exact deze plek. */
.gallery-card-reserve {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  border: none;
  border-radius: 100px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: background .15s;
}
.gallery-card-reserve:hover { background: var(--primary-hover); }
.gallery-card-reserve svg { flex-shrink: 0; }
/* Donkere modus: --primary is een lichte groen → donkere tekst voor contrast */
[data-theme="dark"] .gallery-card-reserve { color: var(--on-primary); }

/* Ghost-CTA voor gesloten kaarten ("Bekijk tijden") — outline op de frosted
   band i.p.v. de gevulde groene knop, zodat de open-kaart-CTA visueel domineert.
   Zelfde maatvoering (44px tap-target, breedte, margin) als de gevulde knop. */
.gallery-card-reserve--ghost {
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: none;
  -webkit-backdrop-filter: blur(4px) saturate(140%);
  backdrop-filter: blur(4px) saturate(140%);
}
.gallery-card-reserve--ghost:hover { background: rgba(255,255,255,.28); }
/* Band is in beide thema's donker → tekst blijft wit (overschrijft de
   dark-mode donkere-tekst-regel van de gevulde knop hierboven). */
[data-theme="dark"] .gallery-card-reserve--ghost { color: #fff; }

/* Sentinel voor infinite scroll — bínnen #restaurantGallery als laatste kind */
#gallerySentinel {
  /* Desktop (grid): spant de volle breedte; genoeg hoogte zodat hij pas triggert
     als de gebruiker écht naar de onderkant van de galerij scrollt */
  grid-column: 1 / -1;
  height: 40px;
  width: 100%;
}

@media (max-width: 700px) {
  /* Mobiele carrousel (flex): smalle flex-item aan het einde van de horizontale rij.
     root:null + geen rootMargin → triggert pas als hij horizontaal in de viewport scrollt. */
  #gallerySentinel {
    flex: 0 0 20px;
    width: 20px;
    height: 100%;
    align-self: stretch;
  }
  /* (.onboarding-chips zijn nu standaard 1-koloms; geen mobiel-override nodig) */
}

/* ─── Responsief: onboarding + populair ─────────────────────────────────── */
@media (max-width: 480px) {
  .popular-cards { grid-template-columns: 1fr 1fr; }
  /* geen avatar-breedte op kleine schermen; chips staan al 1-koloms (≤700px) */
  .chat-onboarding { padding-left: 12px; }
}
.card-special {
  font-size: .78rem;
  font-weight: 600;
  color: #92400e;
  background: #FEF3C7;
  padding: 3px 10px;
  border-radius: 100px;
  display: inline-block;
  align-self: flex-start;
}
[data-theme="dark"] .card-special { background: rgba(212,165,85,.15); color: #D4A555; }

.restaurant-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap; /* titel en share-knoppen wrappen als er te weinig ruimte is */
}

.restaurant-detail-title { flex: 1; min-width: 0; word-break: break-word; }

/* ─── Dagspecial badge in detail ──────────────────────────────────────────────── */
.detail-special {
  background: #FEF3C7;
  color: #92400e;
  font-size: .875rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
[data-theme="dark"] .detail-special { background: rgba(212,165,85,.15); color: #D4A555; }

/* ─── Dal-uur actie-blok in de detail-drawer (.rd-above-inner eerste kind) ────
   Visueel patroon identiek aan .book-confirm-boost (boeking-bevestiging):
   groene "deal"-look, full-width, flex met icoon links en body rechts.
   Primaire actie >= .875rem (font-vloer); valid_label .75rem (secundair).
   Contrast >= 4.5:1: #065F46 op #ECFDF5 = ~7:1; dark #6EE7B7 op rgba-achtergrond
   voldoet ook (lichtgroene tekst op donkere bg). Geen em-dash in content. */
.rd-boost {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0 0 16px;
  overflow-wrap: break-word;
  word-break: break-word;
}
.rd-boost-ico {
  color: #065F46;
  flex-shrink: 0;
  line-height: 0;
  margin-top: 2px;
}
.rd-boost-ico .ico { width: 18px; height: 18px; }
.rd-boost-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.rd-boost-action {
  display: block;
  font-size: .875rem;
  line-height: 1.5;
  color: #065F46;
  overflow-wrap: break-word;
  word-break: break-word;
}
.rd-boost-action strong { font-weight: 700; }
.rd-boost-valid {
  display: block;
  font-size: .75rem;
  line-height: 1.45;
  color: #065F46;
  opacity: .85;
}
[data-theme="dark"] .rd-boost {
  background: var(--color-success-bg);
  border-color: rgba(61,214,140,.35);
}
[data-theme="dark"] .rd-boost-ico,
[data-theme="dark"] .rd-boost-action,
[data-theme="dark"] .rd-boost-valid { color: var(--color-success); }

/* ─── Foto-galerij strip (detail modal) ──────────────────────────────────── */
.detail-gallery-strip {
  display: flex;
  gap: 6px;
  padding: 8px 16px;
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.detail-gallery-strip::-webkit-scrollbar { display: none; }

.gallery-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 44px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  background: none;
  transition: border-color .15s;
  min-width: 44px;
  min-height: 44px;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-thumb.active,
.gallery-thumb:hover { border-color: var(--accent); }

@media (max-width: 700px) {
  .gallery-thumb { width: 48px; height: 44px; }
}

/* ─── E-mail verificatie hint (header) ───────────────────────────────────── */
.email-verify-hint {
  font-size: .875rem;
  font-weight: 500;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0 14px;
  gap: 6px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.email-verify-hint .ico { color: var(--accent); }
.email-verify-hint:hover { border-color: var(--text-muted); color: var(--text); }
@media (max-width: 480px) {
  /* Smal scherm: icoon-only — label verbergen, knop blijft 44×44 tap target */
  .email-verify-label { display: none; }
  .email-verify-hint  { padding: 0; width: 44px; justify-content: center; }
}

/* ─── Onboarding wizard ─────────────────────────────────────────────────────── */

/* De wizard hergebruikt .modal-overlay + .modal-box; onderstaande klassen
   verfijnen de lay-out specifiek voor de wizard. */

.onboarding-wizard {
  max-width: min(540px, 92vw);
  padding: 36px 32px 28px;
  text-align: center;
}

/* Voortgangsindicator */
.ob-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.ob-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  transition: background .25s, transform .2s;
}

.ob-dot--active {
  background: var(--primary);
  transform: scale(1.25);
}

/* Vraagtitel */
.ob-question {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.35;
}

/* Kaartenrij: naast elkaar op desktop */
.ob-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

/* Keuzekaart */
.ob-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  text-align: center;
  padding: 0 0 16px;
  /* Tap target: het volledige kaartoppervlak is klikbaar */
  min-height: 44px;
}

.ob-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ob-card--selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(1,93,44,.18);
}

/* Kaartfoto — geen vaste hoogte, relatieve fallback */
.ob-card-photo {
  width: 100%;
  height: min(180px, 24vh);
  object-fit: cover;
  display: block;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

/* Emoji-fallback (als foto ontbreekt) */
.ob-card-photo-fallback {
  width: 100%;
  height: min(180px, 24vh);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.ob-card-label {
  font-size: .9375rem;  /* 15px — boven minimum 14px */
  font-weight: 600;
  color: var(--text);
  margin-top: 14px;
  padding: 0 12px;
  line-height: 1.3;
}

/* Inline foutmelding bij API-fout */
.ob-error {
  font-size: .875rem;    /* 14px — minimum op mobiel */
  color: var(--color-error);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
  text-align: center;
  line-height: 1.45;
}
[data-theme="dark"] .ob-error {
  background: #2D1B1B;
  border-color: #7F1D1D;
}
.ob-error[hidden] { display: none; }

/* Overslaan-link */
.ob-skip-wrap {
  margin-top: 4px;
}

.ob-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .875rem;  /* 14px — minimum op mobiel */
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 12px 24px;  /* tap target ≥ 44px via min-height */
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}

.ob-skip:hover { color: var(--text); }

/* ── Responsive ── */

/* ≤ 700px — kaarten verticaal stapelen */
@media (max-width: 700px) {
  .ob-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ob-card-photo,
  .ob-card-photo-fallback {
    height: min(140px, 20vh);
  }

  .onboarding-wizard {
    padding: 28px 20px 22px;
  }

  .ob-question {
    font-size: 1.125rem;
  }
}

/* ≤ 480px — extra compacte lay-out */
@media (max-width: 480px) {
  .onboarding-wizard {
    padding: 22px 16px 18px;
    border-radius: var(--radius-md);
  }

  .ob-question {
    font-size: 1rem;
    margin-bottom: 16px;
  }

  .ob-card-photo,
  .ob-card-photo-fallback {
    height: min(120px, 18vh);
  }

  .ob-card-label {
    font-size: .875rem;  /* 14px — nooit kleiner */
    margin-top: 10px;
  }
}

/* ─── Toast notificaties ────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-size: .9rem;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  z-index: 600;
  max-width: min(400px, 90vw);
  text-align: center;
  pointer-events: none;
}
.toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast--success { border-color: var(--primary); color: var(--primary); }
.toast--error   { border-color: var(--color-error); color: var(--color-error); }

/* ─── Cookiebanner ──────────────────────────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 24px rgba(0,0,0,.10);
  padding: 16px;

  /* Mobiel-first: kolom-layout, volledige breedte */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

/* [hidden]-gotcha: een class met expliciete display verslaat [hidden] */
.cookie-banner[hidden] { display: none; }

.cookie-banner__tekst {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.cookie-banner__link {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__link:hover { text-decoration: none; }

.cookie-banner__actions {
  /* Mobiel-first: knoppen onder elkaar */
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-banner__btn {
  /* Tap target ≥ 44px — btn btn-primary zorgt hier al deels voor */
  min-height: 44px;
  font-size: .9375rem;
  justify-content: center;
}

.cookie-banner__btn--secondary {
  background: var(--surface);
  color: var(--text);
  border: 1.5px solid var(--border);
}
.cookie-banner__btn--secondary:hover { border-color: var(--text-muted); opacity: 1; }

/* ≥ 700px: rij-layout, gecentreerd, max-breedte */
@media (min-width: 700px) {
  .cookie-banner {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 14px 24px;
    max-width: min(900px, 92vw);
    margin: 0 auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }

  .cookie-banner__tekst { flex: 1; text-align: left; }

  .cookie-banner__actions {
    flex-direction: row;
    align-items: center;
  }

  .cookie-banner__btn {
    align-self: auto;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* ─── Juridische modal ───────────────────────────────────────────────────────── */
.modal-box--legal {
  max-width: min(840px, 92vw);
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  overflow: hidden;
}

.legal-modal-header {
  padding: 32px 36px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.legal-modal-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: 6px;
}

.legal-modal-meta {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0;
}

.legal-modal-body {
  padding: 24px 36px 36px;
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* Platte-tekst rendering: alinea's en regeleinden */
.legal-body p {
  font-size: .9375rem;
  line-height: 1.75;
  color: var(--text);
  margin-bottom: 1rem;
}
.legal-body p:last-child { margin-bottom: 0; }

/* Mobiel ≤ 700px */
@media (max-width: 700px) {
  .legal-modal-header { padding: 24px 20px 16px; }
  .legal-modal-body   { padding: 16px 20px 28px; }
  .legal-modal-title  { font-size: 1.25rem; }
  .legal-body p       { font-size: .875rem; }
}

/* Mobiel ≤ 480px — sheet, volledige schermhoogte */
@media (max-width: 480px) {
  .modal-overlay--legal { padding: 0; align-items: flex-start; }
  .modal-box--legal {
    max-width: 100vw;
    border-radius: 0;
    max-height: 100svh;
  }
  .legal-modal-header { padding: 20px 16px 14px; }
  .legal-modal-body   { padding: 14px 16px 24px; }
}

/* ─── Privacy-tab (account-drawer) ─────────────────────────────────────────── */
.privacy-section {
  margin-bottom: 24px;
}

.privacy-section:last-child { margin-bottom: 0; }

.privacy-section__title {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

.privacy-section__desc {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
}

/* Rode waarschuwingsbox voor account-verwijdering */
.privacy-danger-box {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: .875rem;
  color: #991B1B;
  line-height: 1.5;
}
.privacy-danger-box ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.privacy-danger-box li { margin-bottom: 4px; }
[data-theme="dark"] .privacy-danger-box {
  background: #2D1B1B;
  border-color: #7F1D1D;
  color: var(--color-error);
}

.privacy-feedback {
  font-size: .8rem;
  margin-top: 6px;
  min-height: 1.2em;
}
.privacy-feedback--ok    { color: var(--color-success); }
.privacy-feedback--error { color: var(--color-error); }

/* Nieuwsbrief-checkbox (account Privacy-tab + registratie). Tap target >=44px,
   tekst >=14px (mobiel-vloer); native input+label voor toegankelijkheid (#105). */
.privacy-newsletter,
.register-newsletter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 6px 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--text);
  cursor: pointer;
}
.register-newsletter { margin-bottom: 4px; }
.privacy-newsletter input[type="checkbox"],
.register-newsletter input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--primary);
  cursor: pointer;
}
.privacy-newsletter input:focus-visible,
.register-newsletter input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ═══ ICON-SYSTEEM (Lucide-sprite) ════════════════════════════════════════════
   Eén .ico-klasse voor alle UI-icons. Kleur volgt currentColor → werkt zonder
   extra regels in licht- én donker-thema. De sprite zelf staat verborgen
   bovenaan <body>. Vervangt de emoji's die eerder als icoon dienstdeden. */
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.16em;
}
.ico--btn { width: 20px; height: 20px; }
.ico--lg  { width: 28px; height: 28px; }

/* Statusstip — vervangt de groene 🟢-emoji; kleur erft van de status-pill. */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  flex-shrink: 0;
}

/* Icoon + label netjes uitlijnen in chips/knoppen. */
.onboarding-chip,
.chat-hero-btn { gap: 7px; }
.gallery-card-popular,
.gallery-card-new { display: inline-flex; align-items: center; gap: 5px; }

/* Thema-toggle + modal-sluitknoppen centreren hun icoon. */
#btnTheme,
.modal-close { display: flex; align-items: center; justify-content: center; }

/* Register-type-iconen wat groter dan de basismaat. */
.register-type-icon .ico { width: 26px; height: 26px; }

/* Fallback-icoon op onboarding-keuzekaarten als de foto niet laadt. */
.ob-card-photo-fallback .ico { width: 44px; height: 44px; color: var(--text-muted); }

/* ─── Reduced motion ─────────────────────────────────────────────────────────
   Respecteer de OS-voorkeur "verminder beweging": neutraliseer alle animaties
   en transities (begroeting-typing, in-fade voorbeeldvragen, chatkaart-puls én
   alle bestaande animaties). Het scherm blijft volledig functioneel en
   verzorgd; de JS valt parallel terug op een directe begroeting. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABBY — SPOTLIGHT CRYSTAL (hero + chat-host + tools-popover)
   ───────────────────────────────────────────────────────────────────────────
   Signature visual: één conic-gradient prisma achter de chat-card. Hero is
   compact (alleen titel "Waar wil jij vandaag eten?"), chat-box krijgt een
   glas-look met Tabby-host-header bovenaan en een +-tools-popover links in
   de input-rij. Past in de productie-baseline — alle componenten leven
   binnen `.hero-section--spotlight` of `.chat-box--tabby` zodat er niets
   buiten dit scherm verandert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hero — Spotlight Crystal: overschrijft padding van de generieke .hero-section.
   Schuift onder de glass-nav door (negative margin-top = nav-hoogte 64px) zodat
   de crystal-prisma achter de nav doorloopt en de overgang vloeiend is. */
.hero-section--spotlight {
  position: relative;
  margin-top: -64px;       /* trek hero onder nav door */
  padding: 120px 0 64px;   /* 64 nav-h + 56 originele padding-top */
  z-index: 0;              /* onder nav (z-index 100) */
  overflow: hidden;
}

/* Crystal-prisma achtergrond — conic-gradient achter de card. Hover intensifies. */
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero-bg::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 740px; height: 740px;
  transform: translate(-50%, -50%) rotate(0deg);
  /* On-brand palette: warm oranje (accent), warm cream, matcha-natural, primair groen.
     Vervangt het oude matcha-gras + violet die niet in het brand-palette zaten. */
  background: conic-gradient(from 200deg at 50% 50%,
    rgba(240,130,43,.22)   0%,    /* warm oranje (accent) */
    rgba(245,215,110,.18)  22%,   /* warm cream */
    rgba(80,170,120,.22)   44%,   /* matcha-natural */
    rgba(1,93,44,.20)      66%,   /* primair groen */
    rgba(240,130,43,.22) 100%);
  filter: blur(60px);
  opacity: .85;
  border-radius: 50%;
  transition: opacity .6s ease;
  /* 180s per omwenteling = bijna onmerkbaar, maar de prisma "ademt" continu.
     Puur transform:rotate → GPU-compositie, geen blur-recompute. */
  animation: prismaSlowSpin 180s linear infinite;
  will-change: transform;
}
@keyframes prismaSlowSpin {
  from { transform: translate(-50%, -50%) rotate(0deg);   }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
.hero-bg::after {
  /* Cream overlay zachter dan voorheen — laat de prisma écht doorkomen i.p.v.
     gedempt tot vrijwel onzichtbaar. Combineert met opacity .85 op ::before. */
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    rgba(251,248,233,.05) 0%,
    rgba(251,248,233,.40) 60%,
    rgba(251,248,233,.65) 100%);
}
.hero-section--spotlight:hover .hero-bg::before { opacity: 1; }

[data-theme="dark"] .hero-bg::after {
  background: radial-gradient(ellipse at center,
    rgba(17,24,39,.05) 0%,
    rgba(17,24,39,.40) 60%,
    rgba(17,24,39,.65) 100%);
}
[data-theme="dark"] .hero-bg::before { opacity: .55; }

/* Hero-content boven de prisma. */
.hero-section--spotlight .hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 32px;
}
.hero-section--spotlight #chatContainer {
  position: relative;
  z-index: 1;
  padding-top: 0;
  padding-bottom: 0;
}

/* Tabby-titel — 2 regels, persoonlijk via .hero-line-name. */
.hero-title--tabby {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
/* Spans erven de tabby-font-size i.p.v. de generieke .hero-line-*-regel. */
.hero-title--tabby .hero-line-1,
.hero-title--tabby .hero-line-2 {
  font-size: inherit;
  letter-spacing: inherit;
  display: inline;
}
.hero-title--tabby .hero-line-1     { color: var(--primary); }
.hero-title--tabby .hero-line-2     { color: var(--accent);  }
/* .hero-line-comma erft oranje van .hero-line-2 — komma blijft accent-kleur
   ook als de groene voornaam erna komt. */
.hero-title--tabby .hero-line-name  { color: var(--primary); }
/* ? volgt standaard de oranje basistekst (nieuwe bezoeker: "vandaag eten?").
   Staat er een naam, dan matcht ? de naam — via sibling-selector op :not(:empty). */
.hero-title--tabby .hero-line-q                                { color: var(--accent);  }
.hero-title--tabby .hero-line-name:not(:empty) ~ .hero-line-q { color: var(--primary); }

/* ─── Hero-kicker (positionerend label boven de titel) ─────────────────────
   Bewust positionering ("Zeeland's slimste restaurantgids") i.p.v. host-
   introductie zodat 'ie niet botst met de "Tabby — je tafelhost"-regel in
   de chat-host-header. inline-flex zodat het SVG-icon (Lucide #i-sparkles)
   netjes uitlijnt met de tekst. */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.hero-kicker .ico {
  width: 14px; height: 14px;
  color: var(--accent);
  flex-shrink: 0;
}

/* ─── Entrance-animatie: kicker → titel-regel 1 → regel 2 → chat-box ──────
   Staggered fade-up bij page-load. Productie-pulse op .chat-box wordt door
   deze animation overschreven (was attentie-puls; vervangen door soepele
   entrance die rustiger oogt). */
.hero-kicker,
.hero-title--tabby .hero-line-1,
.hero-title--tabby .hero-line-2,
.hero-section--spotlight .chat-box--tabby {
  opacity: 0;
  animation: heroFadeUp .6s ease-out forwards;
}
/* Spans waren display:inline — transform werkt alleen op inline-block of block. */
.hero-title--tabby .hero-line-1,
.hero-title--tabby .hero-line-2 { display: inline-block; }
.hero-kicker                                                 { animation-delay: .05s; }
.hero-title--tabby .hero-line-1                              { animation-delay: .15s; }
.hero-title--tabby .hero-line-2                              { animation-delay: .25s; }
.hero-section--spotlight .chat-box--tabby                    { animation-delay: .40s; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
  .hero-section--spotlight { padding: 92px 0 32px; }  /* 64 nav-h + 28 originele */
  .hero-title--tabby { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .hero-section--spotlight .hero-inner { padding-bottom: 22px; }
}

/* ─── Chat-box — Tabby glass-styling ──────────────────────────────────────── */
.chat-box--tabby {
  position: relative;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 24px;
  box-shadow:
    0 28px 80px rgba(15,30,15,.10),
    0 8px 20px rgba(240,130,43,.06),
    inset 0 1px 0 rgba(255,255,255,.8);
  padding-top: 4px;
}
[data-theme="dark"] .chat-box--tabby {
  background: rgba(26,37,53,.78);
  border-color: rgba(255,255,255,.08);
  box-shadow:
    0 28px 80px rgba(0,0,0,.55),
    0 8px 20px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* ─── Tabby host-header (bovenaan de chat-box) ───────────────────────────── */
.chat-host-head {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 24px horizontaal = align met .chat-messages padding zodat avatar visueel
     uitlijnt met de eerste bubble eronder. (Was 4px — overgenomen uit POC
     waar de POC-chat-box zelf padding had; in productie heeft .chat-box
     geen horizontale padding op de root.) */
  padding: 18px 24px 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(15,30,15,.06);
}
[data-theme="dark"] .chat-host-head { border-bottom-color: rgba(255,255,255,.06); }
.chat-host-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(1,93,44,.35);
  flex-shrink: 0;
  background: transparent;
}
.chat-host-avatar img { width: 100%; height: 100%; display: block; }
.chat-host-name-block {
  display: flex; flex-direction: column; line-height: 1.15;
}
.chat-host-name {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text);
}
.chat-host-role {
  font-size: .8125rem;
  color: var(--text-muted);
}
.chat-host-status {
  /* Helemaal rechts in de header (rustiger/strakker dan los naast de naam). */
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8125rem;
  color: var(--text-muted);
}
.chat-host-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: tabbyStatusPulse 2s ease-in-out infinite;
}
@keyframes tabbyStatusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  50%      { box-shadow: 0 0 0 7px rgba(34,197,94,0);  }
}

/* Per-bericht avatar verbergen — Tabby-host-header bovenaan is voldoende
   "wie spreekt"-context (à la Claude/ChatGPT). [hidden]-gotcha: de basis
   .message-avatar zet display:flex, dus deze override is nodig. */
.message-avatar { display: none; }

/* ─── Chat tools-knop + popover (+ → ×) ───────────────────────────────────── */
.chat-input-area { position: relative; } /* anker voor de absolute popover */

.chat-tools-btn {
  position: relative; /* anker voor extended tap-area (::before) */
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(15,30,15,.10);
  background: transparent;
  color: var(--text-muted);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
/* Visueel 38×38, hit-area 44×44 (CLAUDE.md-norm). Pseudo-element ligt over
   de knop heen en vangt taps in de 3px-rand eromheen. Pointer-events: auto
   is impliciet — geen aparte handler nodig. */
.chat-tools-btn::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}
.chat-tools-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
  color: var(--accent);
}
.chat-tools-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chat-tools-btn[aria-expanded="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  transform: rotate(45deg);
}
[data-theme="dark"] .chat-tools-btn { border-color: rgba(255,255,255,.10); }

.chat-tools-popover {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 30;
  min-width: 280px;
  max-width: min(360px, 92vw);
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(15,30,15,.10);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(15,30,15,.18), 0 4px 12px rgba(15,30,15,.06);
  padding: 6px;
  animation: toolsPopIn .18s cubic-bezier(.2,.7,.2,1) both;
  transform-origin: bottom left;
}
@keyframes toolsPopIn {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-theme="dark"] .chat-tools-popover {
  background: rgba(36,40,46,.95);            /* frosted --surface-2 (#24282E) */
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 16px 50px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.30);
}

.chat-tools-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px; padding: 10px 14px;
  background: transparent; border: 0;
  border-radius: 10px;
  text-align: left; cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.chat-tools-item:hover { background: var(--accent-light); }
.chat-tools-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--accent-light);
}
.chat-tools-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent) 0%, #f9a86b 100%);
  display: grid; place-items: center;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(240,130,43,.25);
}
.chat-tools-icon svg { width: 18px; height: 18px; }
.chat-tools-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.chat-tools-text strong { font-size: .9375rem; color: var(--text); font-weight: 600; }
.chat-tools-text small  { font-size: .8125rem; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 480px) {
  .chat-tools-popover {
    left: 0; right: 0;
    min-width: auto; max-width: none;
  }
}

/* ─── Tabby "denkt"-status boven typing-indicator ──────────────────────────── */
.tabby-think-status {
  font-size: .75rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 4px;
  opacity: .85;
  animation: thinkFade .3s ease-out;
}
@keyframes thinkFade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: .85; transform: translateY(0); }
}

/* ─── Source-line onder een assistant-reply ───────────────────────────────── */
.bubble-source {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15,30,15,.10);
  font-size: .75rem;
  color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.bubble-source-check { color: var(--primary); font-weight: 700; }
[data-theme="dark"] .bubble-source { border-top-color: rgba(255,255,255,.10); }

/* ═══ Tabby v2 — concierge restaurant-blokken in een chat-bubble ═══════════
   Geen aparte cards-omlijsting: het antwoord van Tabby is één coherent
   canvas. Per restaurant: foto + naam + meta met optionele inline tel-link;
   primaire actie eronder (slot-chips of "Andere dagen →"). Whitespace doet
   het scheidingswerk; geen dashed dividers, geen badge-rij, geen rationale-
   regel — Claude's antwoordtekst draagt het concierge-verhaal. */
.reco-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
/* Bij meerdere restaurants in één advies: extra adem zodat de blokken niet
   in elkaar lopen. Geen lijn — alleen lucht. */
.reco-block + .reco-block { margin-top: 28px; }

.reco-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 6px;
  margin: -6px;                       /* hover-tint mag het anker overlappen */
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s;
}
.reco-head:hover         { background: rgba(15,30,15,.05); }
.reco-head:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: rgba(15,30,15,.05);
}
[data-theme="dark"] .reco-head:hover,
[data-theme="dark"] .reco-head:focus-visible { background: rgba(255,255,255,.04); }

.reco-photo {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-color: var(--border);
}

.reco-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.reco-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.25;
}
.reco-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);              /* concierge-groen — anchor in de bubble */
}

/* Inline "open"-indicator naast de naam (alleen bij is_open === true). */
.reco-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .8125rem;
  color: var(--primary);
  font-weight: 500;
}
.reco-open-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Meta: prijs · cuisine · stad. Eén leesregel onder de naam.
   Geen tel-link meer — reserveringen lopen via het platform, niet via
   bellen (zie .reco-action voor het "Reservering aanvragen →"-pad). */
.reco-meta {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.reco-next-open {
  display: block;
  font-size: .8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Slot-zone onder de head: chips of "Andere dagen →"-link. */
.reco-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-left: 68px;                 /* uitgelijnd op de meta (foto + gap) */
}
/* Slot-chips in chat-context: lichte bubble, dus pas de frosted preview-
   variant aan zodat hij leesbaar blijft op een witte/lichte achtergrond.
   Min-height 44px erft van bestaande .slot-chip — tap-target gerespecteerd. */
.reco-slots .slot-chip--preview {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: .875rem;
}
.reco-slots .slot-chip--preview:hover:not(:disabled) {
  background: var(--accent-light);
  border-color: var(--primary);
}
[data-theme="dark"] .reco-slots .slot-chip--preview {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e5e7eb;
}
[data-theme="dark"] .reco-slots .slot-chip--preview:hover:not(:disabled) {
  background: rgba(255,255,255,.10);
}

/* "Andere dagen →" — tekst-link met voldoende tap-target via padding. */
/* Tekstlink-actie onder de meta — "Andere dagen →" of "Reservering aanvragen →".
   Inline-block met padding zodat het tap-target ≥44px haalt zonder als knop
   te ogen. Accent-kleur voor visuele prominentie naast de gedempte meta. */
.reco-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 4px;
  font-size: .875rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}
.reco-action:hover { text-decoration: underline; }

/* Rationale-regel onder de meta — één rustige cursieve zin met de "waarom".
   Bron: Claude's <!--RATIONALE:id=zin-->-tags via api/chat.php. Render gate
   in JS op .trim(); hier alleen styling. */
.reco-rationale {
  margin-top: 4px;
  font-size: .875rem;          /* ≥14px-bodem CLAUDE.md */
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Actie-rij: slots/aanvraag-link links + duim-knoppen rechts. Wraps op
   smal scherm; padding-left lijnt slots-cel met de meta-regel uit (zoals
   de oude .reco-slots stond). */
.reco-actionrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-left: 68px;
  flex-wrap: wrap;
}
.reco-slots { padding-left: 0; }   /* override: nu binnen .reco-actionrow */

.reco-thumbs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.reco-thumb {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  background: transparent;
  border-radius: 50%;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s, opacity .2s;
}
.reco-thumb:hover:not(:disabled) {
  background: rgba(15,30,15,.05);
  color: var(--text);
}
.reco-thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.reco-thumb.is-active                      { color: var(--primary); }
.reco-thumb.is-active[data-act="dismiss"]  { color: var(--color-error); }   /* afgewezen-rood */
/* Actieve knoppen blijven hover-baar (toggle = klik om ondoen). Geen
   permanente :disabled-state meer; tijdens een lopende fetch staat de hele
   handler op een per-kaart busy-flag (geen visuele indicatie nodig — de
   request is meestal < 200ms). */
.reco-thumb svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
[data-theme="dark"] .reco-thumb:hover {
  background: rgba(255,255,255,.06);
}

/* Afgewezen-state per kaart: de kaart blijft staan in de bubble (coherent
   met Claude's antwoordtekst) maar voelt 'weg-gezet'. Head + slot-actie
   zijn niet meer klikbaar; de hover-tint op .reco-head valt weg. */
.reco-block.is-dismissed .reco-head {
  cursor: default;
  pointer-events: none;
  opacity: .55;
}
.reco-block.is-dismissed .reco-head:hover { background: transparent; }
.reco-block.is-dismissed .reco-slots      { opacity: .45; pointer-events: none; }
.reco-block.is-dismissed .reco-rationale  { opacity: .65; }
/* De duim-knoppen blijven volledig leesbaar — de actieve 👎 is hier juist
   het signaal "waarom de kaart gedimd is". */

/* Mobiel (≤480px): iets compactere foto + uitlijning op de smallere indent. */
@media (max-width: 480px) {
  .reco-block { gap: 8px; }
  .reco-block + .reco-block { margin-top: 20px; }
  .reco-photo { width: 48px; height: 48px; }
  .reco-head  { gap: 10px; }
  .reco-name  { font-size: .9375rem; }
  .reco-actionrow { padding-left: 58px; }
}

/* Reduced-motion-fallback voor de hero-prisma: rotatie uit + hover-pin op
   nieuwe baseline (geen opacity-sprong). De globale reduced-motion-regel
   demt animaties al; deze regels voorkomen secundaire visuele storingen. */
@media (prefers-reduced-motion: reduce) {
  /* Prisma-rotatie uit + hover-pin op nieuwe baseline (geen opacity-sprong). */
  .hero-bg::before { animation: none; }
  .hero-section--spotlight:hover .hero-bg::before { opacity: .85; }
  [data-theme="dark"] .hero-section--spotlight:hover .hero-bg::before { opacity: .55; }
  /* Hero entrance-animatie uit — alles direct in beeld. */
  .hero-kicker,
  .hero-title--tabby .hero-line-1,
  .hero-title--tabby .hero-line-2,
  .hero-section--spotlight .chat-box--tabby {
    animation: none;
    opacity: 1;
  }
}

/* ═══ TIJDSLOTEN — slot-chips & slotsectie ══════════════════════════════════
   Gedeeld door het detailpaneel ("Reserveer een tijd"), de boekmodal en de
   galerij-kaart. Eén set classes; .slot-grid wrapt mobiel-first (3 per rij). */

/* Reserveer-teaser in het detailpaneel — staat in .rd-above-inner na de
   openingstijden. Compacte voorproef; de volledige flow zit in de sheet. */
.rd-slots {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.rd-slots[hidden] { display: none; }
.rd-teaser-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.rd-teaser-head .ico { width: 18px; height: 18px; color: var(--primary); }
.rd-teaser-sub {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0 0 10px;
}
/* Tijd-chips + "Meer tijden" op één rij; wrapt mobiel netjes */
.rd-teaser-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.rd-teaser-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rd-teaser-chips .slot-chip {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 8px 14px;
}
/* "Meer tijden" — ghost-knop, sluit aan op de app-knopstijl */
.rd-teaser-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.rd-teaser-more:hover { border-color: var(--primary); background: var(--accent-light); }
.rd-teaser-more:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rd-teaser-more .ico { width: 15px; height: 15px; }
/* Terugvalknop — geen tijden vandaag → "Bekijk beschikbaarheid" */
.rd-teaser-availbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 11px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.rd-teaser-availbtn:hover { border-color: var(--primary); background: var(--accent-light); }
.rd-teaser-availbtn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rd-teaser-availbtn .ico { width: 17px; height: 17px; }

/* Slot-grid — wrappend grid, mobiel 3 per rij, tap targets ≥44px */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

/* Slot-chip — kiesbare tijd. Default = outline; vol/verstreken = disabled. */
.slot-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 44px;
  padding: 6px 8px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
.slot-chip:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--accent-light);
}
.slot-chip:active:not(:disabled) { transform: scale(.97); }
.slot-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Selected — bevestigde keuze in de boekmodal */
.slot-chip.selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
[data-theme="dark"] .slot-chip.selected { color: var(--on-primary); }
/* Resterende-plekken-subtekst onder de tijd */
.slot-chip-sub {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
}
.slot-chip.selected .slot-chip-sub { color: rgba(255,255,255,.85); }
[data-theme="dark"] .slot-chip.selected .slot-chip-sub { color: rgba(0,0,0,.7); }
/* Bijna vol — schaarste-cue op een nog boekbaar slot (amberkleur). */
.slot-chip-sub--warn { color: #92400E; font-weight: 600; }
[data-theme="dark"] .slot-chip-sub--warn { color: var(--color-warning); }
/* Disabled — vol, verstreken of te klein voor het gezelschap. Kleur is niet de
   enige drager: doorhaling + tekstlabel maken het ook zonder kleur duidelijk. */
.slot-chip:disabled {
  cursor: not-allowed;
  opacity: .55;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.slot-chip:disabled .slot-chip-sub { text-decoration: none; }

/* States: laden / leeg / fout in de slotsectie */
.slot-state {
  font-size: .85rem;
  color: var(--text-muted);
  padding: 4px 0;
}
.slot-state--error { color: var(--color-error); }
/* Sub-zin onder een state-melding (bv. "geen vrije tijden binnen de horizon") */
.slot-state--sub { font-size: .8125rem; }

/* Eerstvolgende-beschikbaar-knop — onder een onboekbare-dag-melding.
   Outline-knop in lijn met .rd-teaser-availbtn. */
.book-next-avail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--primary);
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.book-next-avail:hover { border-color: var(--primary); background: var(--accent-light); }
.book-next-avail:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.book-next-avail .ico { width: 18px; height: 18px; flex-shrink: 0; }

/* Skeleton-chips tijdens het laden */
.slot-skel {
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--border);
  animation: cms-slotskel 1.4s ease-in-out infinite;
}
@keyframes cms-slotskel { 0%,100% { opacity: .55; } 50% { opacity: 1; } }

/* ─── Galerij-kaart slot-zone — vervangt de placeholder reserveer-knop ─────── */
.gallery-card-slots {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Preview-chip op de foto — frosted pill zoals .gallery-card-tag, maar klikbaar.
   min-height 44px = tap-target-ondergrens (CLAUDE.md). */
.slot-chip--preview {
  flex: 0 0 auto;
  min-height: 44px;
  flex-direction: row;
  gap: 4px;
  padding: 6px 12px;
  border: none;
  border-radius: 100px;
  background: rgba(255,255,255,.92);
  color: #1f2937;
  font-size: .875rem;
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.slot-chip--preview:hover:not(:disabled) {
  background: #fff;
  border: none;
}
[data-theme="dark"] .slot-chip--preview { background: rgba(0,0,0,.62); color: #e5e7eb; }
/* Geen 'Bekijk beschikbaarheid'-tussenknop meer: zonder vrije chips blijft de
   reserveer-knop staan (zie slotZoneMarkup/fillSlotZonesFromCache in app.js). */

/* ─── Mobiel: ≤480px chips iets compacter, grid blijft 3 per rij ──────────── */
@media (max-width: 480px) {
  .slot-grid { grid-template-columns: repeat(3, 1fr); }
  .slot-chip { font-size: .875rem; }
}

/* ═══ RESERVEER-SHEET ═══════════════════════════════════════════════════════
   Eén plek voor reserveren. Desktop: gecentreerde overlay (zoals de andere
   modals). Mobiel ≤700px: bottom-sheet die van onderaf opschuift, met grijpbalk
   + swipe-to-dismiss. Hergebruikt .modal-overlay / .modal-box, maar met eigen
   slide-up-mechaniek en frosted vormtaal.
   --book-sheet-radius = single source of truth voor de hoekafronding. */
.book-sheet-overlay {
  z-index: 700;                  /* boven restaurant-drawer (402), topbar, FAB */
  padding: 0;
  /* Bottom-sheet op elke breedte: onderaan verankerd. Op desktop rechts
     uitgelijnd zodat hij binnen de restaurant-drawer-kolom omhoogschuift. */
  align-items: flex-end;
  justify-content: flex-end;
}
.modal-box.book-sheet {
  --book-sheet-radius: var(--radius-lg);
  /* Desktop: breedte = de restaurant-drawer-kolom (min(720px,96vw)) zodat de
     sheet daarbinnen van onderaf omhoogschuift; mobiel wordt dit 100vw. */
  width: min(720px, 96vw);
  max-width: min(720px, 96vw);
  max-height: 88vh;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;              /* flex-layout: scroll zit op .book-sheet-body */
  /* Onderaan verankerd → alleen de bovenhoeken rond */
  border-radius: var(--book-sheet-radius) var(--book-sheet-radius) 0 0;
  transition: transform .28s cubic-bezier(.32, .72, 0, 1);
  animation: bookSheetUp .3s cubic-bezier(.32, .72, 0, 1);
}
/* Sluit-animatie — door .book-sheet-overlay--closing in JS gezet */
.book-sheet-overlay--closing .modal-box.book-sheet {
  transform: translateY(100%);
}

/* Grijpbalk bovenaan de sheet — grijp-/sluit-affordance */
.book-sheet-grip {
  display: block;
  flex-shrink: 0;
  width: 100%;
  border: none;
  background: var(--surface);
  padding: 10px 0 4px;
  cursor: grab;
  touch-action: none;            /* eigen swipe-afhandeling, geen scroll-conflict */
}
.book-sheet-grip::before {
  content: "";
  display: block;
  width: 40px;
  height: 5px;
  margin: 0 auto;
  border-radius: 100px;
  background: var(--border);
}
.book-sheet-grip:active { cursor: grabbing; }
.book-sheet-grip:focus-visible { outline: 2px solid var(--primary); outline-offset: -3px; }

/* Kop — titel + restaurantnaam + sluitknop, sticky boven de scrollende body */
.book-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.book-sheet-titles { min-width: 0; }
.book-sheet-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--primary);
  margin: 0;
}
.book-sheet-sub {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 2px 0 0;
}
.book-sheet-sub:empty { display: none; }
/* Sluitknop in de kop — in de flexflow, niet absoluut gepositioneerd */
.book-sheet-head .modal-close { position: static; flex-shrink: 0; }

/* Scrollende body — alle velden; blijft scrollbaar als het mobiele toetsenbord
   opkomt zodat de bevestigknop bereikbaar blijft. */
.book-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 20px 20px;
}
.book-sheet-loading {
  text-align: center;
  color: var(--text-muted);
  font-size: .9rem;
  padding: 40px 0;
}

/* ─── Reserveer-formulier ─────────────────────────────────────────────────── */
.book-form { display: flex; flex-direction: column; gap: 16px; }
.book-field { display: flex; flex-direction: column; gap: 6px; }
.book-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text);
}
.book-req { color: var(--primary); }
.book-optional { font-weight: 400; color: var(--text-muted); }

/* Hulptekst onder een veld (bijv. waarvoor het e-mailadres dient) */
.book-field-hint {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}
/* Inline veld-fout — onder het veld, blijft staan tot opgelost (UX-playbook).
   role="alert" in de markup; leeg → geen ruimte innemen. */
.book-field-err {
  font-size: .75rem;
  color: var(--color-error);
  margin: 0;
  line-height: 1.45;
}
.book-field-err:empty { display: none; }
/* Veld met validatiefout — rode rand naast de tekst-melding (kleur is niet de
   enige info-drager). */
.book-input--err { border-color: var(--color-error); }
.book-input--err:focus-visible { outline-color: var(--color-error); }

.book-input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-family: var(--font-sans);
  background: var(--surface);
  color: var(--text);
}
.book-input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}
.book-textarea {
  resize: vertical;
  min-height: 64px;
  line-height: 1.5;
}
/* ─── Datumstrip — horizontaal scrollende dag-chips ───────────────────────── */
/* Alleen de strip scrolt horizontaal; overscroll-behavior houdt de pagina vast. */
.book-daystrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;            /* ruimte voor focus-outline onderaan */
}
/* Dag-chip — weekdag boven, dagnummer onder; tap target ≥44×44px */
.book-day {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 60px;
  min-height: 56px;
  padding: 8px 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  cursor: pointer;
  scroll-snap-align: center;
  transition: border-color .12s, background .12s, color .12s;
}
.book-day-top { font-size: .75rem; font-weight: 600; line-height: 1.2; }
.book-day-num { font-size: 1.0625rem; font-weight: 700; line-height: 1.1; }
.book-day:hover:not(.book-day--selected) {
  border-color: var(--primary);
  background: var(--accent-light);
}
.book-day:active { transform: scale(.97); }
.book-day:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
/* Geselecteerde dag — primary-vulling, dark-theme-tegenhanger zoals .slot-chip */
.book-day--selected {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
[data-theme="dark"] .book-day--selected { color: var(--on-primary); }
/* Gesloten weekdag — gedimd maar wél tikbaar (toont de gesloten-melding) */
.book-day--closed { opacity: .45; }

/* ─── Personen-stepper — tap-bediening, geen cijfertoetsenbord ────────────── */
.book-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;              /* klipt de knophoeken op de afgeronde rand */
}
.book-stepper-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;                   /* tap target ≥ 44×44 (CLAUDE.md) */
  height: 44px;
  min-width: 44px;
  border: none;
  background: var(--bg);
  color: var(--primary);
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
.book-stepper-btn:hover:not(:disabled) { background: var(--accent-light); }
.book-stepper-btn:active:not(:disabled) { transform: scale(.94); }
.book-stepper-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.book-stepper-btn:disabled { opacity: .35; cursor: not-allowed; }
.book-stepper-btn .ico { width: 18px; height: 18px; }
.book-stepper-val {
  flex: 1;
  text-align: center;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text);
}

/* ─── Tijd-blok — slot-chips (de blikvanger) ──────────────────────────────── */
.book-field--slots { gap: 8px; }
.book-slots { min-height: 44px; }
.book-slot-hint {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0;
}

/* ─── Inline feedback (fout / conflict) ───────────────────────────────────── */
.book-feedback {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  margin-bottom: 14px;
}
.book-feedback .ico { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.book-feedback--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: var(--color-error);
}
.book-feedback--warn {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  color: #92400E;
}
.book-feedback--ok {
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
}
[data-theme="dark"] .book-feedback--error { background: var(--color-error-bg); border-color: rgba(244,154,160,.35); }
[data-theme="dark"] .book-feedback--warn  { background: var(--color-warning-bg); border-color: rgba(232,179,57,.35);  color: var(--color-warning); }
[data-theme="dark"] .book-feedback--ok    { background: var(--color-success-bg); border-color: rgba(61,214,140,.35); color: var(--color-success); }
/* Inline "opnieuw proberen"-link in een slot-state */
.book-link-btn {
  background: none;
  border: none;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
  padding: 0;
}

.book-submit { margin-top: 4px; }

/* ─── Bevestiging — formulier weg, nette samenvatting ─────────────────────── */
.book-confirm { text-align: center; padding: 8px 0; }
.book-confirm-icon { color: var(--color-success); }
.book-confirm-icon .ico { width: 48px; height: 48px; }
/* Neutrale variant — niet-beschikbaar-staat (geen "geslaagd"-groen) */
.book-confirm-icon--neutral { color: var(--text-muted); }
[data-theme="dark"] .book-confirm-icon--neutral { color: var(--text-muted); }
/* In-afwachting-variant — een aanvraag is nog niet bevestigd, dus geen groen;
   amber communiceert "wordt beoordeeld". */
.book-confirm-icon--pending { color: #B45309; }
[data-theme="dark"] .book-confirm-icon--pending { color: var(--color-warning); }
.book-confirm-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text);
  margin: 8px 0 16px;
}
/* Korte uitleg-zin onder de bevestigtitel (wat er nu gebeurt) */
.book-confirm-lead {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}

/* ─── Verzoek-formulier — restaurant zonder online reserveren ──────────────────
   Restaurant zonder tijdslot-regels: naast de "bel zelf"-route kan de gast een
   verzoek achterlaten. Hergebruikt .book-form / .book-field / .book-input. */
.book-intro {
  font-size: .875rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 4px;
}
/* Twee gelijkwaardige optionele velden naast elkaar (datum + tijd); valt op
   smal scherm terug naar één kolom. */
.book-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .book-row { grid-template-columns: 1fr; }
}
.book-confirm-details {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 16px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.book-confirm-details > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.book-confirm-details > div:last-child { border-bottom: none; }
.book-confirm-details dt {
  font-size: .875rem;
  color: var(--text-muted);
}
.book-confirm-details dd {
  margin: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.book-confirm-note {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0 0 16px;
}

/* ─── Persistente account-faal-melding onder de bevestiging ──────────────────
   Waarschuwingstoon (amber, geen alarmrood). Kleur is niet de enige drager:
   het woord "Let op" + het driehoek-icoon dragen de betekenis ook. Full-width,
   linksuitgelijnd, wrapt op 375px zonder horizontale scroll; een lang
   e-mailadres breekt af. Tekst >= 14px (.875rem). */
.book-confirm-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0 0 16px;
}
.book-confirm-warn-ico { color: #92400E; flex-shrink: 0; line-height: 0; margin-top: 2px; }
.book-confirm-warn-ico .ico { width: 18px; height: 18px; }
.book-confirm-warn-text {
  font-size: .875rem;
  line-height: 1.55;
  color: #92400E;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.book-confirm-warn-text strong { font-weight: 700; }
[data-theme="dark"] .book-confirm-warn {
  background: var(--color-warning-bg);
  border-color: rgba(232,179,57,.35);
}
[data-theme="dark"] .book-confirm-warn-ico,
[data-theme="dark"] .book-confirm-warn-text { color: var(--color-warning); }

/* ─── Boost-snapshot in de bevestiging (AC7) ─────────────────────────────────
   Positieve toon (groen), niet alarmerend. Kleur niet de enige drager: het
   vlam-icoon + "Je profiteert van:" dragen de betekenis. Full-width, links
   uitgelijnd, wrapt op 375px; lange perk-tekst breekt af. Tekst >= 14px. */
.book-confirm-boost {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-align: left;
  background: #ECFDF5;
  border: 1px solid #6EE7B7;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 0 0 16px;
}
.book-confirm-boost-ico { color: #065F46; flex-shrink: 0; line-height: 0; margin-top: 2px; }
.book-confirm-boost-ico .ico { width: 18px; height: 18px; }
.book-confirm-boost-text {
  font-size: .875rem;
  line-height: 1.55;
  color: #065F46;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.book-confirm-boost-text strong { font-weight: 700; }
[data-theme="dark"] .book-confirm-boost {
  background: var(--color-success-bg);
  border-color: rgba(61,214,140,.35);
}
[data-theme="dark"] .book-confirm-boost-ico,
[data-theme="dark"] .book-confirm-boost-text { color: var(--color-success); }

@keyframes bookSheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ─── Mobiel ≤700px: sheet over de volle schermbreedte ────────────────────── */
@media (max-width: 700px) {
  .modal-box.book-sheet {
    width: 100vw;
    max-width: 100vw;
    max-height: 92svh;
  }
  /* Iets meer ademruimte onderaan zodat de knop vrij van de schermrand zit */
  .book-sheet-body { padding-bottom: 28px; }
}

/* ─── Klein ≤480px: compactere padding ────────────────────────────────────── */
@media (max-width: 480px) {
  .book-sheet-head { padding: 16px 16px 12px; }
  .book-sheet-body { padding: 14px 16px 28px; }
}

/* Reduced-motion: geen slide, gewoon tonen */
@media (prefers-reduced-motion: reduce) {
  .modal-box.book-sheet { animation: none; transition: none; }
}

/* ─── Book-sheet one-liner — cashback-verwachting onder het boekformulier ─────
   Kalm informatief blokje (AC2), geen actie. Merkkleur-accent, niet de CTA. */
.book-sheet-promo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(1,93,44,.05);
  border-radius: var(--radius-sm);
  font-size: .8125rem;          /* micro-meta, >= 12px-vloer */
  color: var(--text-secondary);
  line-height: 1.5;
}
.book-sheet-promo .ico { width: 16px; height: 16px; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
[data-theme="dark"] .book-sheet-promo { background: rgba(54,196,111,.07); }

/* Cashback-aankondiging in de bevestiging (AC2) — boost-toon (groen), geen CTA. */
.book-confirm-boost--cashback .book-confirm-boost-text strong { display: inline-block; margin-bottom: 2px; }

/* ═══ CLAIM-SHEET — Cashback "Tabby trakteert" (#118) ════════════════════════
   Hergebruikt de .book-sheet-infra (drag-bottom-sheet, overlay, lockBodyScroll).
   Alleen de desktop-uitlijning + breedte wijken af: standalone sheet (niet binnen
   de restaurant-drawer-kolom), dus gecentreerd en smaller (520px). */
.book-sheet-overlay--claim { justify-content: center; }
@media (min-width: 701px) {
  .modal-box.book-sheet--claim { width: min(520px, 95vw); max-width: min(520px, 95vw); }
}
/* Terms-modal moet bóven de claim-sheet (z:700) openen vanuit de consent-link. */
.modal-overlay--legal { z-index: 800; }

/* Skelet-laadstate terwijl de eligibility-GET loopt (AC3). */
.claim-skel { display: flex; flex-direction: column; gap: 14px; padding: 6px 0 10px; }
.claim-skel-line {
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e8e0d4 25%, #f5f0e8 50%, #e8e0d4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.claim-skel-line--title { height: 22px; width: 60%; }
.claim-skel-line--mid   { width: 80%; }
.claim-skel-line--btn   { height: 44px; border-radius: var(--radius-sm); margin-top: 6px; }
[data-theme="dark"] .claim-skel-line {
  background: linear-gradient(90deg, #1e2922 25%, #243228 50%, #1e2922 75%);
  background-size: 200% 100%;
}
.claim-loading-label { text-align: center; color: var(--text-muted); font-size: .8125rem; margin: 2px 0 0; }

/* Deadline-regel + max-bedrag-regel bovenaan het formulier. */
.claim-deadline {
  font-size: .875rem;
  color: var(--text);
  background: rgba(1,93,44,.06);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  line-height: 1.5;
  margin: 0 0 10px;
}
[data-theme="dark"] .claim-deadline { background: rgba(54,196,111,.08); }
.claim-maxnote { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 16px; }

/* Reserveringssamenvatting in de te-vroeg-state (links uitgelijnd binnen .book-confirm). */
.claim-resv {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 4px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.claim-resv-row { display: flex; flex-direction: column; gap: 2px; }
.claim-resv-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.claim-resv-val { font-size: .9375rem; color: var(--text); font-weight: 600; }

/* Bestand-veld — native file input met 44px tap target. */
.claim-file {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .875rem;
  font-family: var(--font-sans);
}
.claim-file::file-selector-button {
  margin-right: 12px;
  padding: 8px 12px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
/* Fout-rand op het file-veld: hogere specificiteit dan .claim-file (die later in
   het bestand staat dan de generieke .book-input--err en die anders zou winnen). */
.claim-file.book-input--err { border-color: var(--color-error); }

/* Instagram-opt-in — ingeklapte <details>. */
.claim-ig { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.claim-ig > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  min-height: 44px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
}
.claim-ig > summary::-webkit-details-marker { display: none; }
.claim-ig > summary .ico { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.claim-ig-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.claim-ig-body p { font-size: .8125rem; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Akkoord-checkbox + voorwaarden-link. */
.claim-consent { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; }
.claim-consent-cb { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; }
.claim-consent-text { font-size: .875rem; color: var(--text); line-height: 1.5; }
.claim-consent-link { margin: 2px 0 0; }
.claim-link {
  background: none;
  border: none;
  padding: 11px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: .875rem;          /* 14px — interactieve link, primaire vloer */
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

/* Rustige mail-fallbackregel onderin de sheet. */
.claim-mailfallback {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .8125rem;          /* micro-meta, >= 12px-vloer */
  color: var(--text-muted);
  line-height: 1.5;
  text-align: center;
}
.claim-mailfallback a { color: var(--primary); }

/* ═══ RESERVERING ZELF BEHEREN ══════════════════════════════════════════════
   - "Mijn reserveringen"-drawer-tab (resv-*)
   - account-uitnodiging in de boekingsflow (book-account-*)
   - manage-sheet annuleer-bevestiging + alternatieve-tijden (resv-confirm/-alt)
   Mobile-first: tap targets ≥44px, primaire tekst ≥14px, micro-meta ≥12px. */

/* ─── Status-badge (tab + read-only manage) ──────────────────────────────── */
.resv-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .8125rem;   /* 13px — secundaire meta, boven de 12px-vloer */
  font-weight: 600;
  white-space: nowrap;
}
.resv-badge--pending   { background: #FEF3C7; color: #B45309; }
.resv-badge--confirmed { background: var(--color-success-bg); color: var(--color-success); }
.resv-badge--cancelled { background: var(--color-error-bg); color: var(--color-error); }
[data-theme="dark"] .resv-badge--pending   { background: var(--color-warning-bg); color: var(--color-warning); }

/* ─── Mijn reserveringen — tab ───────────────────────────────────────────── */
.resv-tab { display: flex; flex-direction: column; gap: 22px; }
.resv-group { display: flex; flex-direction: column; gap: 10px; }
.resv-list  { display: flex; flex-direction: column; gap: 10px; }
.resv-empty-line { font-size: .875rem; color: var(--text-muted); margin: 2px 0 0; }

.resv-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.resv-card--clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.resv-card--clickable:hover { border-color: var(--primary); }
.resv-card--clickable:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.resv-card-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.resv-card-name {
  font-size: .9375rem;   /* 15px */
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resv-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: .8125rem;   /* 13px micro-meta */
  color: var(--text-muted);
}
.resv-card-meta .ico { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; }
.resv-card-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.resv-card-chev { color: var(--text-muted); display: inline-flex; }
.resv-card-chev .ico { width: 18px; height: 18px; }

/* Verleden — inklapbaar, gedimd read-only */
.resv-past { border-top: 1px solid var(--border); padding-top: 14px; }
.resv-past-summary {
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  padding: 6px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.resv-past-summary::-webkit-details-marker { display: none; }
.resv-past-summary::before { content: '▸'; margin-right: 8px; color: var(--text-muted); transition: transform .15s; }
.resv-past[open] .resv-past-summary::before { transform: rotate(90deg); }
.resv-list--past { margin-top: 8px; }
.resv-list--past .resv-card { opacity: .72; background: var(--surface-2, var(--surface)); }
.resv-list--past .resv-card-name { font-weight: 600; }

/* Lege/laad/fout-states (tab + manage-peek) */
.resv-state { text-align: center; padding: 28px 8px; }
.resv-state-icon { color: var(--text-muted); margin-bottom: 10px; }
.resv-state-icon .ico { width: 40px; height: 40px; }
.resv-state-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 6px; }
.resv-state-sub { font-size: .875rem; color: var(--text-muted); margin: 0 0 6px; line-height: 1.5; }
.resv-cta, .resv-retry { margin-top: 14px; min-height: 44px; padding: 11px 22px; }

/* Skeleton */
.resv-skel-list { display: flex; flex-direction: column; gap: 10px; }
.resv-skel {
  height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, var(--border) 25%, var(--surface) 37%, var(--border) 63%);
  background-size: 400% 100%;
  animation: resvSkel 1.3s ease-in-out infinite;
}
@keyframes resvSkel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .resv-skel { animation: none; } }

/* ─── Manage-sheet: read-only weergave ───────────────────────────────────── */
.resv-readonly { padding: 4px 0 8px; }
.resv-readonly-status { margin-bottom: 12px; }
.resv-readonly-lead { font-size: .9375rem; color: var(--text); line-height: 1.5; margin: 0 0 16px; }

/* ─── Manage-sheet: annuleer-knop + bevestiging ──────────────────────────── */
.book-cancel-btn {
  margin-top: 10px;
  min-height: 44px;
  background: transparent;
  border: 1.5px solid var(--color-error);
  color: var(--color-error);
}
.book-cancel-btn:hover { background: rgba(220,38,38,.07); }
[data-theme="dark"] .book-cancel-btn:hover { background: var(--color-error-bg); }

.resv-confirm-cancel {
  border: 1.5px solid var(--color-error);
  border-radius: var(--radius-md);
  background: rgba(220,38,38,.05);
  padding: 14px 16px;
}
[data-theme="dark"] .resv-confirm-cancel { border-color: rgba(244,154,160,.4); background: var(--color-error-bg); }
.resv-confirm-cancel-q { font-size: .9375rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.resv-confirm-cancel-sub { font-size: .8125rem; color: var(--text-muted); margin: 0 0 12px; line-height: 1.45; }
.resv-confirm-cancel-row { display: flex; gap: 10px; }
.resv-confirm-cancel-row .btn { flex: 1; min-height: 44px; }
.book-cancel-keep {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
}
.book-cancel-keep:hover { border-color: var(--text-muted); }
.book-cancel-confirm { background: var(--color-error); border: 1.5px solid var(--color-error); color: #fff; }
.book-cancel-confirm:hover { background: var(--color-error); filter: brightness(.92); }
.book-cancel-confirm:disabled { opacity: .7; cursor: default; }
/* In dark is --color-error een lichte rose; een gevulde knop met witte tekst
   zou daar onleesbaar zijn (WCAG-fail). Maak er een tinted-danger-knop van. */
[data-theme="dark"] .book-cancel-confirm { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); }
[data-theme="dark"] .book-cancel-confirm:hover { filter: none; background: var(--color-error-bg); }

/* Vol-slot-409: alternatieve tijden inline */
.resv-alt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.resv-alt-chip { min-height: 44px; }

/* Cancelled-icoon in het bevestigingsscherm */
.book-confirm-icon--cancelled { color: var(--color-error); }

/* ─── Account-uitnodiging in de boekingsflow ─────────────────────────────── */
.book-account-invite {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2, var(--surface));
  padding: 12px 14px;
}
.book-account-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  min-height: 44px;
}
.book-account-check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--primary);
  cursor: pointer;
}
.book-account-check-text { display: flex; flex-direction: column; gap: 2px; }
.book-account-check-title { font-size: .9375rem; font-weight: 600; color: var(--text); line-height: 1.35; }
.book-account-check-sub { font-size: .8125rem; color: var(--text-muted); line-height: 1.35; }
.book-account-pw { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.book-account-pw[hidden] { display: none; }   /* [hidden]-gotcha: expliciet */

/* ─── Mobiel ≤480px ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .resv-card { padding: 12px; }
  .resv-card-name { font-size: .9375rem; }
  .resv-confirm-cancel-row { flex-direction: column; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   RESULTATEN-PANEEL — één #resultsPanel-element, twee presentaties.
   Basis (default + ≤899px) = bottom peek-sheet (position:fixed).
   Desktop ≥900px = sticky paneel rechts in een 2-koloms grid.
   Stack-context: sheet z-index 390 (onder overlay 400 / drawers 402 /
   boekingssheet 700 → die openen correct bovenop met eigen scrim).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Sheet-basis (mobiel/tablet, default) ─────────────────────────────────── */
.results-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 390;
  display: flex;
  flex-direction: column;
  /* Vaste hoogte == max-height zodat translateY(100%) altijd de bedoelde
     sheet-hoogte is (90dvh), niet de variabele content-hoogte. Met weinig
     kaarten zou content < 90dvh een negatieve expanded-translateY geven →
     de sheet zweeft boven bottom:0 en de pagina piept eronder door. Met een
     vaste hoogte resolven de [data-state]-calc()-formules exact en deelt de
     JS-gesture (px van onderaf) hetzelfde rustmodel. #resultsPanelCards
     (flex:1 1 auto, overflow-y:auto) vult de rest; korte content = hooguit
     witruimte onderin, geen gat. Desktop (≥900px-tak) zet de hoogte zelf. */
  height: 90dvh;
  max-height: 90dvh;
  background: var(--surface-2);
  border-radius: 20px 20px 0 0;
  /* Zachtere sheet-schaduw → rustiger, minder dominant secundair paneel. */
  box-shadow: 0 -6px 22px rgba(0,0,0,.10), 0 -2px 6px rgba(0,0,0,.05);
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  touch-action: none;
  will-change: transform;
}
/* [hidden]-gotcha: een class met expliciete display verslaat [hidden]. */
.results-panel[hidden] { display: none; }

/* Drag-grip — echte button, full-width sleepzone. Het balkje is decoratief
   (::before); de knop is 28px hoog (ruimer dan de bestaande .book-sheet-grip)
   en spant de volle breedte, dus een comfortabele sleep-/tikzone. */
.results-sheet-grip {
  flex: none;
  display: block;
  width: 100%;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
}
.results-sheet-grip::before {
  content: "";
  display: block;
  width: 40px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 100px;
  background: var(--border);
}
.results-sheet-grip:active { cursor: grabbing; }

.results-panel-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 18px 12px;
}
.results-panel-title {
  margin: 0;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--text-muted);
}
.results-panel-close {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.results-panel-close:hover { background: var(--accent-light); color: var(--text); }
.results-panel-close .ico { width: 18px; height: 18px; }

.results-panel-cards {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px 20px;
  touch-action: pan-y;     /* lijst scrollt vrij, ook al staat de grip op none */
}
.results-panel-empty {
  margin: 0;
  padding: 32px 20px 40px;
  text-align: center;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ─── Resultaatkaart ───────────────────────────────────────────────────────── */
.result-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  /* Rustiger/secundair: platte lijst i.p.v. dashboard-kaarten — geen schaduw,
     hairline-rand. Het paneel ondersteunt de chat, trekt zelf geen aandacht. */
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: none;
  /* Subtiele binnenkomst ná het antwoord (sectie H). */
  animation: panelItemIn .3s ease-out both;
}
.result-card-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.result-card-head:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.result-card-photo {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-sm);
  background-color: var(--accent-light);
  background-size: cover;
  background-position: center;
}
/* Favoriet-hartje óp de foto — ronde knop, 44px tap-target.
   Zelfde rustige glyph-aanpak als .gallery-card-fav: geen witte cirkel in
   default, wel duidelijk op hover/focus of bij geselecteerd. */
.result-card-fav {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: #fff;
  opacity: .9;
  cursor: pointer;
  transition: transform .15s, color .15s, opacity .15s, background .15s, backdrop-filter .15s;
}
.result-card-fav .ico {
  width: 17px;
  height: 17px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.result-card-fav:hover,
.result-card-fav:focus-visible {
  opacity: 1;
  transform: scale(1.08);
  background: rgba(255,255,255,.24);
  -webkit-backdrop-filter: blur(5px) saturate(140%);
  backdrop-filter: blur(5px) saturate(140%);
}
.result-card-fav:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.result-card-fav.active { color: var(--primary); opacity: 1; }
[data-theme="dark"] .result-card-fav        { color: #fff; }
[data-theme="dark"] .result-card-fav.active { color: var(--primary); }
.result-card-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.result-card-name {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.result-card-meta {
  font-size: .875rem;
  line-height: 1.3;
  color: var(--text-muted);
}
.result-card-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.result-card-rationale {
  font-size: .8125rem;
  line-height: 1.4;
  font-style: italic;
  color: var(--text-muted);
}
.result-card-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  /* Gelijke actie-rij-hoogte voor boekbare én niet-boekbare kaarten -> nette,
     gelijke onderrand tussen kaarten. */
  min-height: 44px;
}
.result-card-slots {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* Tekstlink-actie ("Andere dagen →" / "Reservering aanvragen →") — padding
   geeft het tap-target. */
.result-card-action {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* Pill-affordance gelijk aan de tijd-pills (hover-vlak i.p.v. enkel underline). */
  padding: 8px 12px;
  border-radius: 100px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: background .15s;
}
.result-card-action:hover { background: var(--accent-light); }
/* Afwijzen (#94 AC1) — tekst-affordance "Niet passend", ghost-pill met 44px
   tap-target. Bewust géén duim-icoon en visueel los van de #89-stemrij: dit
   haalt het restaurant uit Tabby's selectie, de duimen voeden de KPI. margin-
   left:auto duwt 'm rechts naast de CTA; bij krappe breedte wrapt de actie-rij
   en zakt deze naar een eigen regel (geen horizontale scroll op 375px). */
.result-card-dismiss {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 44px;
  /* Stille, secundaire tekstactie: geen kader/achtergrond, gedempt, kleiner. Mag
     niet concurreren met de primaire reserveer-actie. 44px tap-target behouden. */
  padding: 8px 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.result-card-dismiss:hover {
  color: var(--text);
  background: var(--accent-light);
}
.result-card-dismiss .ico { width: 14px; height: 14px; }

/* Ranking-/match-label (#94 AC5) — subtiele, niet-primaire pill in de status-rij.
   Span-only en inline-veilig; rendert alleen als een pad match_label meegeeft. */
.result-card-match {
  display: inline-flex;
  align-items: center;
  font-size: .75rem;          /* 12px — micro-meta, op de mobiel-vloer */
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-muted);
  background: var(--accent-light);
  border-radius: 100px;
  padding: 3px 9px;
}
[data-theme="dark"] .result-card-match {
  background: rgba(255,255,255,.08);
  color: #cbd0d8;
}

/* Slot-chips in het paneel: zelfde lichte-achtergrond-behandeling als de
   reco-context (hergebruik bestaande preview-variant-overrides). */
.result-card-slots .slot-chip--preview {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-size: .875rem;
}
.result-card-slots .slot-chip--preview:hover:not(:disabled) {
  background: var(--accent-light);
  border-color: var(--primary);
}
[data-theme="dark"] .result-card-slots .slot-chip--preview {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: #e5e7eb;
}

/* #89/#94: per-beurt 👍/👎-tevredenheidsrij. Staat ONDER de bubbel (gehangen aan
   .message-assistant — een flex-kolom — i.p.v. ín de .bubble), zodat het niet als
   een AI-reviewblok in het bericht voelt. Strak/minimalistisch: kale icon-buttons
   zonder kader/achtergrond, gedempt, licht oplichtend op hover. Verschijnt rustig
   ná het antwoord (sectie H: late, subtiele fade-in). */
.vote-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 0;
  animation: voteFadeIn .3s ease-out .18s both;
}
/* Label alleen voor screenreaders (de knoppen hebben aria-label); visueel weg. */
.vote-row-label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.vote-btns {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Kale, gedempte icon-button: geen rand/achtergrond/gradient in rust. 44×44
   tap-target blijft (mobiel-vloer) maar zónder zichtbaar vlak — leest als een
   los icoontje met ruime klikzone. */
.vote-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 6px;
  line-height: 1;
  color: var(--text-muted);
  border: none;
  border-radius: 10px;
  background: transparent;
  opacity: .5;
  cursor: pointer;
  transition: background .15s, color .15s, opacity .15s, transform .1s;
}
.vote-btn .ico { width: 18px; height: 18px; }
.vote-btn:hover:not(:disabled) {
  background: var(--accent-light);
  color: var(--text);
  opacity: 1;
}
.vote-btn:active:not(:disabled) { transform: scale(.92); }
.vote-btn:disabled { cursor: default; opacity: .35; }
.vote-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Actieve staat: gedempte kleur + heel lichte wash (kleur + opacity, geen zwaar
   kader). 👍 = groen, 👎 = rood. aria-pressed dekt de screenreader-staat. */
.vote-btn--up.vote-btn--active {
  color: var(--primary);
  background: var(--accent-light);
  opacity: 1;
}
.vote-btn--down.vote-btn--active {
  color: var(--color-error);
  background: rgba(185,28,28,.08);
  opacity: 1;
}
@keyframes voteFadeIn {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Sectie H: opties (chips + paneelkaarten) faden ná de tekst rustig in. */
@keyframes chipsFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes panelItemIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

[data-theme="dark"] .vote-btn--down.vote-btn--active {
  background: var(--color-error-bg);
}

/* ≤480px: identiek aan desktop — kale icon-buttons, 44×44 tap-target, label sr-only. */

/* Heropen-pill — verschijnt als de mobiele sheet is weggeveegd. */
.results-pill {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 395;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 11px 20px;
  border: none;
  border-radius: 100px;
  background: var(--primary);
  color: #fff;
  font-size: .9375rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
  cursor: pointer;
}
.results-pill[hidden] { display: none; }
.results-pill:hover { background: var(--primary-hover); }
.results-pill #resultsPillCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 100px;
  background: rgba(255,255,255,.22);
  font-size: .8125rem;
}

/* ─── Mobiel/tablet ≤899px: peek-sheet-toestanden ──────────────────────────── */
@media (max-width: 899px) {
  .results-panel[data-state="peek"]     { transform: translateY(calc(100% - 40dvh)); }
  .results-panel[data-state="expanded"] { transform: translateY(0); } /* height==90dvh → vol uitgeklapt */
  .results-panel[data-state="hidden"]   { transform: translateY(100%); }

  /* De kop-balk is op mobiel een extra sleepzone (naast de grip). touch-action:none
     houdt de verticale sleep bij de gesture-handler i.p.v. dat de browser 'm als
     page-scroll opvat. De × erbinnen behoudt zijn eigen tap (stopPropagation in JS).
     #resultsPanelCards blijft pan-y (vrije lijst-scroll). */
  .results-panel-head { touch-action: none; }

  /* ─── Stacking-fix: de fixed peek-sheet hoort op viewport-niveau te stacken ───
     De sheet (#resultsPanel) is position:fixed met z-index:390 — bedoeld als
     viewport-overlay in de ladder topbar 100 < sheet 390 < overlay 400. Maar de
     hero-sectie (#chat, z-index:0) én #chatContainer (z-index:1) vormen elk een
     stacking-context, waardoor de z:390 van de sheet alleen BINNEN die context
     telt en niet op root. Latere secties als 'Hoe het werkt' bevatten positioned
     elementen (.step = position:relative, .step-icon z:1) die op root-niveau ná
     #chat schilderen en zo dwars door het opake sheet-vlak heen kwamen
     schemeren (stapnummers, icoon-cirkels, koppen — zie issue #8). Door op mobiel
     de twee opsluitende stacking-contexten op te heffen, behoudt de fixed sheet
     zijn z:390 op root en dekt hij de pagina daadwerkelijk af. hero-bg krijgt
     z-index:-1 zodat de prisma-achtergrond achter de chat blijft nu #chatContainer
     geen positieve z-index meer levert. Desktop (≥900px, grid + transparant glas)
     blijft ongemoeid: die regels staan in de min-width:900px-tak. */
  .hero-section--spotlight              { z-index: auto; }
  .hero-section--spotlight #chatContainer { z-index: auto; }
  .hero-section--spotlight .hero-bg     { z-index: -1; }

  /* ─── Achtergrond bevriezen zolang de sheet open is ──────────────────────────
     Open (peek óf expanded): de page-scroll is JS-zijde vergrendeld (lockBodyScroll
     in setSheetState) en de navigatiebalk wordt inert, zodat de sticky nav niet
     meebeweegt/reageert terwijl alleen de sheet scrollt. De chat-composer blijft in
     peek bewust bruikbaar (geen pointer-events:none op .chat-col in de open-stand). */
  body.reco-sheet-open .site-header,
  body.reco-sheet-open .announcement-bar { pointer-events: none; }

  /* ─── AC3: volledige page-laag inactief in de expanded-substaat ───────────────
     Volledig uitgeklapt (data-state="expanded", ~90dvh): de afgedekte page-laag
     deterministisch inactief via pointer-events:none (niet louter opacity/z-index),
     zodat er geen fantoom-taps doorvallen. De sheet zelf en alle overlays/drawers
     (z 400/402/700, eigen scrim) blijven actief; er komt bewust GÉÉN scrim onder de
     sheet. */
  body.reco-sheet-expanded .site-header,
  body.reco-sheet-expanded .announcement-bar,
  body.reco-sheet-expanded #recommendationsSection,
  body.reco-sheet-expanded .hero-inner,
  body.reco-sheet-expanded .chat-col,
  body.reco-sheet-expanded #restaurants,
  body.reco-sheet-expanded #hoe-het-werkt,
  body.reco-sheet-expanded .site-footer { pointer-events: none; }

  /* Chat-transcript cappen op mobiel/tablet: lange gesprekken scrollen INTERN
     i.p.v. de hero eindeloos te laten groeien. max-height (geen vaste height) ->
     korte chats/begroeting blijven compact, geen leeg hoog vak. Composer en
     onboarding zijn siblings BUITEN #chatMessages -> blijven in flow eronder.
     Spiegelt de desktop-kadermodus zodat de bestaande JS-scrollhelpers
     (scrollToBottom e.a., sturen al chatMessages.scrollTop) hier ook werken. */
  .chat-messages {
    max-height: min(58dvh, 460px);
    overflow-y: auto;
  }

  /* Sheet open (peek/expanded): de fixed results-sheet bedekt de onderste ~40dvh.
     Kort het chat-leesvak dan hard in zodat de chip-balk (#chatFollowup) EN de
     composer bóven de peek blijven en tikbaar zijn. In peek leest de bezoeker het
     advies compact; de aanbevelingskaarten staan in het sheet. Bij wegvegen (pill)
     valt deze klasse weg en groeit het leesvak weer naar de volle hoogte.
     Bewust GEEN :has(#chatFollowup)-variant: die kreeg door de ID in :has()
     specificiteit (1,3,0) en versloeg juist deze regel; en zonder sheet scrollt de
     pagina gewoon, dus dan is de balk vanzelf bereikbaar. */
  body.reco-sheet-open .chat-box .chat-messages {
    max-height: min(15dvh, 120px);
  }
}

/* ─── Klein ≤480px: sheet vol-breed, compactere kaart ──────────────────────── */
@media (max-width: 480px) {
  .results-panel-head  { padding: 4px 14px 10px; }
  .results-panel-cards { padding: 0 12px 18px; }
  .result-card-photo   { width: 76px; height: 76px; }

  /* Lager plafond op SE-klasse schermen: ruimte houden voor kop + composer + reco-rij.
     Staat ná het >=899px-blok in het bestand -> wint bij gelijke specificiteit. */
  .chat-messages { max-height: min(50dvh, 380px); }
}

/* ─── Desktop ≥900px: chat + paneel als ÉÉN geheel (gedeeld glas-kader, vaste hoogte) ─
   Zolang het paneel verborgen is (nog geen aanbevelingen) blijft de chat
   gecentreerd in haar eigen glas-kaart. Zodra #resultsPanel zichtbaar is, wordt
   #chatContainer zélf het frosted-glass-kader — exact hetzelfde materiaal als de
   chat-box (.chat-box--tabby) — met twee secties: chat (links) en aanbevelingen
   (rechts), gescheiden door één naadlijn, met één doorlopende kop-balk bovenaan.
   Het kader heeft een VASTE, begrensde hoogte (het groeit niet mee met de chat);
   beide secties scrollen intern: links alleen de .chat-messages, rechts alleen de
   .results-panel-cards. De bestaande scroll-helpers (scrollToBottom /
   scrollMessageToTop) werken al op chatMessages.scrollTop, dus die blijven kloppen
   zodra .chat-messages hier overflow krijgt. Mobiel: zie het mobiel/tablet-blok.
   Desktop-zonder-paneel: zie de regel ná de :has()-kadermodus-selectors hieronder.
   BELANGRIJK: zet GEEN `animation: none` op de chat-box — de .chat-box--tabby
   start op `opacity:0` en wordt zichtbaar via `heroFadeUp … forwards`; animation
   uitzetten liet de chat-box terugvallen naar opacity:0 (de hele chat verdween).
   GEEN overflow:hidden op het kader. :has() voorkomt een lege gereserveerde kolom
   vóór de eerste respons. */
@media (min-width: 900px) {
  /* In de kadermodus is het kader 1140px breed; de reco-rij erboven loopt mee zodat
     hun randen uitlijnen. :has() op de hero-sectie (#chat bevat zowel de reco-rij
     als #chatContainer) detecteert het zichtbare paneel. */
  #chat:has(#resultsPanel:not([hidden])) #recommendationsSection {
    max-width: 1140px;
  }
  /* In de kadermodus verbreedt alleen de .container: hij houdt zijn eigen
     horizontale padding (24px desktop / 14px ≤480px) én margin:auto, zodat zijn
     content-box exact even breed en even gecentreerd is als de reco-rij en alle
     andere secties. Het glas-kader + de grid zitten op .chat-frame (hieronder),
     die de content-box vult — daardoor lijnt het kader op élke viewport uit met
     de andere secties (een glas op #chatContainer zelf zou de border-box = 24px
     breder pakken en buiten de andere secties uitsteken). */
  #chatContainer:has(#resultsPanel:not([hidden])) {
    max-width: 1140px;
  }
  .chat-frame:has(#resultsPanel:not([hidden])) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: 1fr;
    grid-template-areas: "chat panel";
    /* Single source of truth voor de hoogte van béide kop-balken (chat-host-head
       links + .results-panel-head rechts), zodat hun onderranden/scheidingslijnen
       gegarandeerd op gelijke hoogte liggen. = avatar 40 + padding 18+14 + border 1. */
    --rd-header-h: 73px;
    align-items: stretch;   /* beide secties vullen de vaste kaderhoogte */
    gap: 0;                 /* secties raken elkaar; de naadlijn is de scheiding */
    /* Vaste, begrensde hoogte: het kader groeit niet mee met de chat, beide
       secties scrollen intern bij meer content. */
    height: min(600px, calc(100dvh - 180px));
    /* Glas-kader — identiek aan .chat-box--tabby zodat het materiaal klopt. */
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255,255,255,.75);
    border-radius: 24px;
    /* Kalmer kader: geen warme oranje-gloed en een lichtere slagschaduw, zodat
       het geheel (en het paneel rechts) rustiger/secundair oogt. */
    box-shadow:
      0 18px 50px rgba(15,30,15,.07),
      inset 0 1px 0 rgba(255,255,255,.8);
  }
  [data-theme="dark"] .chat-frame:has(#resultsPanel:not([hidden])) {
    background: rgba(26,37,53,.78);
    border-color: rgba(255,255,255,.08);
    box-shadow:
      0 28px 80px rgba(0,0,0,.55),
      0 8px 20px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.05);
  }
  /* Naadlijn: als border-left op het paneel zelf (zit altijd exact op de
     kolomgrens, ongeacht container-padding/scrollbars — een absoluut
     gepositioneerde ::before op `right:360px` rekende vanaf de padding-box en
     stond daardoor 24px te ver naar rechts, waardoor de paneel-content erover
     viel). Zie de .results-panel-desktopregel hieronder. */
  /* Linker sectie = chat-kolom; vult de kaderhoogte. */
  .chat-frame:has(#resultsPanel:not([hidden])) > .chat-col {
    grid-area: chat;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }
  .chat-frame:has(#resultsPanel:not([hidden])) .chat-wrapper {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* Chat-box smelt op in het glas-kader (geen eigen achtergrond/rand/schaduw/blur)
     én vult de hoogte. GEEN animation-override (zie blok-comment). De linkerhoeken
     krijgen de kader-radius (24px) zodat de bestaande overflow:hidden de
     ondoorzichtige .chat-input-area-balk netjes rond clipt — anders steekt die
     uit de afgeronde linksonder-kaderhoek (de hoek oogt dan scherp). */
  .chat-frame:has(#resultsPanel:not([hidden])) .chat-box {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 24px 0 0 24px;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    flex: 1 1 0;
    min-height: 0;
    /* .chat-box--tabby heeft padding-top:4px — in het kader weg, anders begint de
       chat-host-head 4px lager dan de paneel-head en liggen de scheidingslijnen
       scheef. De normale chat (mobiel/zonder-paneel) houdt de 4px. */
    padding-top: 0;
  }
  /* Beide kop-balken exact even hoog (single source of truth → scheidingslijnen
     lijnen uit). De host-head is van nature al ~73px (avatar); de min-height
     koppelt 'm hard aan dezelfde variabele als de paneel-head. */
  .chat-frame:has(#resultsPanel:not([hidden])) .chat-host-head {
    min-height: var(--rd-header-h);
    box-sizing: border-box;
  }
  /* Alleen de berichten scrollen; host-head en invoerveld blijven vast.
     Extra rechter-padding zodat de bubbels niet tegen de (subtiele) scrollbar plakken. */
  .chat-frame:has(#resultsPanel:not([hidden])) .chat-messages {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    padding-right: 32px;
  }

  /* Rechter sectie = paneel; vult de kaderhoogte, transparant (kader levert het
     glas). Alleen de kaarten scrollen. Geen sticky meer — het kader is vast. De
     border-left is de naadlijn tussen chat en paneel — zit per definitie op de
     kolomgrens. */
  .results-panel {
    grid-area: panel;
    height: 100%;
    min-height: 0;
    max-height: none;
    border: none;
    border-left: 1px solid rgba(15,30,15,.08);
    /* Rechter-hoeken afgerond + overflow:hidden zodat de kaarten-scrollbar binnen
       de afronding blijft (anders loopt hij voorbij de afgeronde rechtsonder-
       kaderhoek). Spiegelt de chat-box-linkerhoeken. */
    border-radius: 0 24px 24px 0;
    overflow: hidden;
    box-shadow: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
    transition: none;
    touch-action: auto;
  }
  [data-theme="dark"] .results-panel { border-left-color: rgba(255,255,255,.08); }
  .results-panel-cards { flex: 1 1 0; min-height: 0; padding-top: 24px; }
  /* Geen drag-grip én geen sluit-knop op desktop: het paneel is daar een vast
     onderdeel van het kader (zoals de chat-host-header). De × sloot het paneel,
     waardoor :has() niet meer matchte en het hele kader (vaste hoogte + interne
     scroll) wegviel — terug naar de oude losse chat. Op mobiel blijft de × (sluit
     de peek-sheet → pill). Het paneel verdwijnt op desktop vanzelf bij een nieuwe
     chat of de lege staat. */
  .results-sheet-grip,
  .results-panel-close { display: none; }
  /* Kop-balk uitlijnen met de chat-host-head: exact dezelfde hoogte via de
     gedeelde --rd-header-h-variabele + dezelfde onderlijn, zodat de
     scheidingslijnen op gelijke hoogte liggen en er één doorlopende kop over het
     kader loopt. Horizontale padding = de kaarten (16px) zodat titel en kaarten
     uitlijnen. */
  .results-panel-head {
    min-height: var(--rd-header-h);
    box-sizing: border-box;
    padding: 18px 16px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(15,30,15,.06);
  }
  [data-theme="dark"] .results-panel-head { border-bottom-color: rgba(255,255,255,.06); }

  /* Desktop ≥900px zonder paneel: begrensde interne scroll zodat de composer in
     beeld blijft en scrollToBottom() na F5/reload bij de laatste beurt landt.
     Staat ná de :has()-kadermodus-selectors zodat die altijd winnen op volgorde.
     max-height op .chat-messages zelf (niet het kader) zodat de composer — sibling
     van .chat-messages in .chat-box — in flow zichtbaar blijft. */
  .chat-messages {
    max-height: min(65dvh, calc(100dvh - 180px));
    overflow-y: auto;
  }
}

/* Scroll-fade-hint — vervaagt de content-rand alleen aan de kant waar nog te
   scrollen valt, zodat zichtbaar is dat een sectie scrollbaar is. JS
   (_updateScrollFade in app.js) zet --sf-top/--sf-bottom op 0 of 1 op basis van
   de scrollpositie; zonder interne overflow blijven ze 0 → geen zichtbare fade. */
.scroll-fade-y {
  --sf-top: 0;
  --sf-bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--sf-top) * 26px), #000 calc(100% - var(--sf-bottom) * 26px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 calc(var(--sf-top) * 26px), #000 calc(100% - var(--sf-bottom) * 26px), transparent 100%);
}

/* ─── Moderne, subtiele scrollbar (anno 2026) ────────────────────────────────
   Dun en rustig — één implementatie via de standaard `scrollbar-width: thin` +
   `scrollbar-color`, BEWUST zónder `::-webkit-scrollbar`. Reden: in recente
   Chrome overschrijft de standaard de `::-webkit-scrollbar`-pseudo gedeeltelijk,
   waardoor de twee scroll-secties (chat links, paneel rechts) verschillend
   renderden — de ene zwol bij hover, de andere niet. De standaard-property geeft
   beide secties exact dezelfde dunne, consistente scrollbar (Chrome 121+, Edge,
   Firefox, Safari 18+; oudere engines vallen terug op de native scrollbar). */
.scroll-fade-y {
  scrollbar-width: thin;
  scrollbar-color: rgba(15,30,15,.16) transparent;
}
[data-theme="dark"] .scroll-fade-y { scrollbar-color: rgba(255,255,255,.16) transparent; }

/* ═══ FEEDBACK FAB + SHEET ═══════════════════════════════════════════════════
   In-app feedback (idee/probleem/compliment). Pixel-naast docs/mockups/feedback-knop.html.
   Eén afgebakend blok incl. @media zodat de component bij elkaar blijft.
   Zichtbaarheid van de FAB stuurt app.js via het [hidden]-attribuut (centrale
   staat: lock-teller + results-sheet); de class zet display, dus de [hidden]-gotcha
   wordt expliciet afgevangen met de regels onderaan dit blok. */

/* 1. De floating feedback-knop (subtiel/secundair: surface + rand, geen accent-pill). */
.fb-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30; display: inline-flex; align-items: center; gap: 8px;
  height: 48px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: var(--font-sans); font-size: .9rem; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow-lg);
}
.fb-fab .ico { width: 20px; height: 20px; flex: none; color: var(--accent); }
.fb-fab:active { transform: scale(.97); }

/* 2. Scrim + bottom-sheet. */
.fb-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 40;
}
.fb-scrim.open { opacity: 1; pointer-events: auto; }

.fb-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 100%);
  width: min(520px, 96vw); max-height: 88dvh;
  display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-lg); transition: transform .28s cubic-bezier(.4,0,.2,1);
  z-index: 41; padding-bottom: env(safe-area-inset-bottom);
}
.fb-sheet.open { transform: translate(-50%, 0); }
.fb-grip { width: 40px; height: 4px; border-radius: 99px; background: var(--border); margin: 10px auto 4px; display: block; }

.fb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 20px 4px; }
.fb-head h2 { margin: 0; font-family: var(--font-serif); font-size: 1.15rem; }
.fb-head p  { margin: 4px 0 0; color: var(--text-muted); font-size: .85rem; line-height: 1.4; }
.fb-close {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: transparent; color: var(--text-muted);
  cursor: pointer; display: grid; place-items: center;
}
.fb-close .ico { width: 18px; height: 18px; }

.fb-form { padding: 14px 20px 20px; overflow-y: auto; }
.fb-label {
  display: block; font-size: .8rem; font-weight: 600; color: var(--text-muted);
  margin: 0 0 8px; text-transform: uppercase; letter-spacing: .03em;
}

/* type-keuze als segmented chips */
.fb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.fb-type {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; min-height: 64px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: .875rem; font-weight: 500; cursor: pointer;
}
.fb-type .ico { width: 24px; height: 24px; flex: none; }
.fb-type[aria-pressed="true"] {
  border-color: var(--primary); background: var(--accent-light);
  color: var(--primary); font-weight: 600;
}

.fb-textarea {
  width: 100%; min-height: 120px; resize: vertical; padding: 12px 14px;
  border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans); font-size: .95rem; line-height: 1.5;
}
.fb-textarea:focus { outline: none; border-color: var(--primary); }
.fb-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 2px 0; }
.fb-count   { font-size: .75rem; color: var(--text-muted); flex: none; }
.fb-context { font-size: .75rem; color: var(--text-muted); }

/* honeypot — visueel weg, blijft in het DOM zodat bots 'm invullen */
.fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fb-error {
  margin: 14px 2px 0; padding: 10px 12px; font-size: .85rem; line-height: 1.4;
  color: var(--accent); background: var(--accent-light);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
}
.fb-submit {
  width: 100%; margin-top: 18px; height: 50px; min-height: 44px; border: none;
  border-radius: 999px; background: var(--primary); color: #fff;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; cursor: pointer;
}
[data-theme="dark"] .fb-submit { color: #06231a; }
.fb-submit:disabled { opacity: .5; cursor: not-allowed; }
.fb-privacy { margin: 12px 2px 0; font-size: .75rem; color: var(--text-muted); line-height: 1.5; text-align: center; }

/* succes-staat */
.fb-done { display: none; flex-direction: column; align-items: center; text-align: center; padding: 40px 24px 48px; }
.fb-done .check {
  width: 64px; height: 64px; border-radius: 50%; background: var(--accent-light);
  color: var(--primary); display: grid; place-items: center; margin-bottom: 16px;
}
.fb-done .check .ico { width: 36px; height: 36px; }
.fb-done h2 { margin: 0 0 6px; font-family: var(--font-serif); font-size: 1.2rem; }
.fb-done p  { margin: 0; color: var(--text-muted); font-size: .9rem; max-width: 34ch; line-height: 1.5; }
.fb-sheet[data-state="done"] .fb-form { display: none; }
.fb-sheet[data-state="done"] .fb-done { display: flex; }

/* ≤480px: volledig schermbreed, hogere sheet */
@media (max-width: 480px) {
  .fb-sheet { width: 100vw; width: 100dvw; max-height: 92dvh; }
}

/* [hidden]-gotcha: de class zet display (inline-flex/flex/block), dus een expliciete
   override is nodig zodat het hidden-attribuut wint wanneer app.js het zet. */
.fb-fab[hidden], .fb-scrim[hidden], .fb-sheet[hidden], .fb-error[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   PWA - offline-banner, SW-update-toast, iOS-installatiekaart
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Offline-banner (AC4) ─────────────────────────────────────────────── */
.offline-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1f2937;
  color: #f9fafb;
  font-size: .875rem;
  font-weight: 500;
  padding: 10px 16px;
  min-height: 44px;
  text-align: center;
}
.offline-banner svg { flex-shrink: 0; }
.offline-banner[hidden] { display: none; }

/* Verschuif de rest van de UI omlaag als de banner zichtbaar is */
body.has-offline-banner .site-header,
body.has-offline-banner .env-banner,
body.has-offline-banner .weather-banner {
  top: 44px;
}
body.has-offline-banner .sw-update-toast {
  top: calc(44px + 64px);
}

/* ─── SW-update-toast (AC5) ─────────────────────────────────────────────── */
.sw-update-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1900;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1f2937;
  color: #f9fafb;
  font-size: .875rem;
  border-radius: 10px;
  padding: 12px 14px 12px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  white-space: nowrap;
  max-width: min(480px, calc(100vw - 32px));
}
.sw-update-toast[hidden] { display: none; }
.sw-update-toast__btn {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  white-space: nowrap;
  font-family: inherit;
}
.sw-update-toast__btn:hover { background: #014d24; }
.sw-update-toast__close {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
}
.sw-update-toast__close:hover { color: #f9fafb; }

@media (max-width: 480px) {
  .sw-update-toast {
    bottom: 80px;
    left: 16px;
    right: 16px;
    transform: none;
    white-space: normal;
  }
}

/* ─── iOS-installatiekaart (bottom-sheet, Randgeval) ────────────────────── */
.ios-install-scrim {
  position: fixed;
  inset: 0;
  z-index: 1800;
  background: rgba(0,0,0,.45);
}
.ios-install-scrim[hidden] { display: none; }

.ios-install-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1801;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom));
  width: min(520px, 92vw);
  margin: 0 auto;
  box-shadow: 0 -4px 32px rgba(0,0,0,.12);
}
.ios-install-sheet[hidden] { display: none; }

.ios-install-sheet__header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.ios-install-sheet__icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  flex-shrink: 0;
}
.ios-install-sheet__title {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text);
  display: block;
  margin-bottom: 2px;
}
.ios-install-sheet__sub {
  font-size: .8125rem;
  color: var(--text-muted);
  margin: 0;
}

.ios-install-sheet__steps {
  list-style: decimal;
  padding-left: 20px;
  margin-bottom: 24px;
}
.ios-install-sheet__steps li {
  font-size: .9375rem;
  color: var(--text);
  line-height: 1.6;
  padding: 4px 0;
}
.ios-install-sheet__steps svg {
  vertical-align: middle;
  display: inline-block;
  color: var(--primary);
}

.ios-install-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ios-install-sheet__btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 12px 20px;
  font-size: .9375rem;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
}
.ios-install-sheet__btn-ghost:hover { background: var(--bg); }

/* ─── Account-drawer installatieknop ────────────────────────────────────── */
.drawer-install-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.drawer-install-row[hidden] { display: none; }
.drawer-install-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .875rem;
  font-family: inherit;
  cursor: pointer;
  min-height: 44px;
  text-align: left;
}
.drawer-install-btn:hover { background: var(--bg); }
.drawer-install-btn svg { color: var(--primary); flex-shrink: 0; }