/* ─── Custom properties ─────────────────────────────────────────────────────── */
:root {
  --bg:            #fbf8e9;
  --surface:       #FFFFFF;
  --primary:       #015d2c;
  --primary-hover: #084420;
  --accent:        #f0822b;
  --accent-light:  #fff3e8;
  --matcha:        #c7d074;
  --text:          #111827;
  --text-muted:    #6B7280;
  --border:        #e0ddd0;
  --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;
  /* 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;
}

[data-theme="dark"] {
  --bg:            #111827;
  --surface:       #1a2535;
  --primary:       #4ADE80;
  --primary-hover: #86EFAC;
  --accent:        #f0822b;
  --accent-light:  #2a1a0a;
  --matcha:        #c7d074;
  --text:          #F0F6FC;
  --text-muted:    #8B949E;
  --border:        #2d3748;
  --shadow-sm:     0 1px 3px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.45);
  --shadow-md:     0 4px 16px rgba(0,0,0,.60), 0 2px 6px rgba(0,0,0,.40);
  --shadow-lg:     0 8px 40px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.50);
}

/* ─── 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 24px;
}

/* ─── 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(13,31,21,0.72);
}

.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);
}

.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: #f0822b; }

/* ─── 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 ───────────────────────────────────────────────────────────── */
.btn-pill-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: .875rem;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-sans);
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}
.btn-pill-toggle:hover { border-color: var(--text-muted); background: var(--bg); }

/* 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: #d96f1c; border-color: #d96f1c; 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: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  padding: 10px;
  flex-shrink: 0;
  transition: border-color .15s;
}
.btn-hamburger:hover { border-color: var(--text-muted); }
.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; }

.mobile-menu-user {
  font-size: .875rem;
  color: var(--text-muted);
  padding: 4px 0 8px;
  display: block;
}
.mobile-menu-btn {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  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(--border); }
.mobile-menu-btn--danger { color: #B91C1C; border-color: transparent; background: none; }
[data-theme="dark"] .mobile-menu-btn--danger { color: #FCA5A5; }


.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  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-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; }
[data-theme="dark"] .chat-send-btn { background: var(--primary); color: #0d1f15; }

.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; }

/* ─── 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: #c06010;
  font-size: .875rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
}
[data-theme="dark"] .cuisine-tag { color: var(--accent); }

/* ─── 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: rgba(251,191,36,.15);
  color: #FCD34D;
}

/* 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(74,222,128,.10) 0%,
    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.
   Flex-kolom: de volgorde van chat vs. reco-kaarten regelen we via `order`,
   niet via DOM-verplaatsing (CLAUDE.md: flexbox-flow boven absolute/JS-reorder). */
#chatContainer {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
/* Gast (default): chat eerst, reco-kaarten (verborgen) daaronder. */
#chatContainer .chat-wrapper { order: 0; }
#chatContainer #recommendationsSection { order: 1; }
/* Ingelogd: persoonlijke reco-kaarten eerst, chat daaronder. */
#chatContainer.chat-container--reco-first .chat-wrapper { order: 1; }
#chatContainer.chat-container--reco-first #recommendationsSection { order: 0; }


.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 {
  /* Groeit inline mee met de inhoud; de PAGINA scrollt, geen genest scrollvenster
     ("kokertje"). Bewust geen max-height-cap meer — het gesprek leest als één
     doorlopende kolom (vraag → antwoord → restaurantkaart), zoals de markt het doet.
     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: 16px;
}

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

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  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;
}

.message-assistant { align-self: flex-start; }
.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);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border);
}

.message-error .bubble {
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}
[data-theme="dark"] .message-error .bubble {
  background: rgba(185,28,28,.15);
  color: #FCA5A5;
  border-color: rgba(185,28,28,.3);
}

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

.bubble ul {
  margin: 6px 0;
  padding-left: 1.15em;
  list-style: none;
}
.bubble li {
  position: relative;
  padding-left: .35em;
  margin: 3px 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; }

/* ─── 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: #7a500a;
}

/* 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 rgba(26,58,42,.08);
}

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

.chat-send-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  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: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  z-index: 200;
  display: none;
}
.user-dropdown.open { display: block; }
.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-family: var(--font-sans);
  color: var(--text);
  cursor: pointer;
  transition: background .12s;
}
.user-dropdown-item:hover { background: var(--bg); }
.user-dropdown-item svg { flex-shrink: 0; color: var(--text-muted); }
.user-dropdown-item--danger { color: #B91C1C; }
[data-theme="dark"] .user-dropdown-item--danger { color: #FCA5A5; }
.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: 4px 0; }


.btn-user-menu {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: .875rem;
  min-height: 44px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.btn-user-menu strong { color: var(--text); font-weight: 600; }
.btn-user-menu:hover  { border-color: var(--text-muted); background: var(--bg); color: var(--text); }

.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 {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: 0 18px;
  min-height: 44px;
  font-size: .875rem;
  font-family: var(--font-sans);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
.chat-load-older-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
}
.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: rgba(0,0,0,.50);
  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);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  width: 100%;
  max-width: 520px;
  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(74,222,128,.1); }
.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 rgba(31,59,46,.1);
}
[data-theme="dark"] .form-group input {
  background: #0f1923;
  border-color: var(--border);
}
[data-theme="dark"] .form-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(74,222,128,.18);
}

.form-error {
  font-size: .85rem;
  color: #B91C1C;
  margin-bottom: 12px;
  min-height: 20px;
}
[data-theme="dark"] .form-error { color: #FCA5A5; }

.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: #7a500a;
  font-size: .875rem;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 100px;
}
[data-theme="dark"] .feature-tag,
[data-theme="dark"] .taste-tag  { color: #fbbf24; }
[data-theme="dark"] .chip:hover,
[data-theme="dark"] .session-chip:hover,
[data-theme="dark"] .session-chip.active { color: #fbbf24; }

/* ─── 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 ──────────────────────────────────────────────────────── */
.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;
}

.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: #7a500a;
  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;
  }
}

[data-theme="dark"] .chat-followup-chip:hover,
[data-theme="dark"] .chat-followup-chip:focus-visible { color: #fbbf24; }

/* ─── 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. */
.chat-fallback-bubble {
  align-self: flex-start;
  max-width: min(560px, 92%);
  margin: 4px 0 8px;
  padding: 14px 16px;
  background: var(--accent-light, #fff5e0);
  border: 1px solid var(--accent, #f0c674);
  border-radius: var(--radius-md);
  border-bottom-left-radius: 4px;
}
.chat-fallback-head {
  margin: 0 0 10px;
  font-size: .925rem;
  font-weight: 600;
  color: #7a500a;
}
.chat-fallback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chat-fallback-btn {
  background: #fff;
  border: 1px solid var(--accent, #f0c674);
  color: #7a500a;
  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, #f0c674);
  color: #5c3d05;
  outline: none;
}
.chat-fallback-btn--ghost {
  background: transparent;
  border-color: rgba(122,80,10,.35);
}

/* ─── 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;
}

/* 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: #B91C1C;
  border-color: #FECACA;
  outline: none;
}
.dismissal-remove:disabled {
  opacity: .5;
  cursor: default;
}

[data-theme="dark"] .chat-fallback-bubble {
  background: rgba(240,198,116,.10);
  border-color: rgba(240,198,116,.35);
}
[data-theme="dark"] .chat-fallback-head { color: #fbbf24; }
[data-theme="dark"] .chat-fallback-btn  { background: rgba(0,0,0,.20); color: #fbbf24; }
[data-theme="dark"] .dismissal-remove:hover:not(:disabled) {
  background: rgba(185,28,28,.20);
  color: #FCA5A5;
  border-color: rgba(185,28,28,.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: #B91C1C; padding: 20px; text-align: center; }
[data-theme="dark"] .error-text { color: #FCA5A5; }

/* ─── 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 ────────────────────────────────────────────────── */
/* Geen eigen max-width — zit al in #chatContainer (max-width:780px).
   Zo lopen linker- en rechterrand exact gelijk met de chatbox. */
.recommendations-section {
  margin: 0 0 14px;
}

.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;
  }
}

/* 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 */
  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); }

/* Badge-stapel linksboven op de foto (status + social badge) */
.reco-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  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: #4ade80; }

/* Matte frosted band met naam + meta + redenregel onderaan de foto */
.reco-card-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 12px 12px;
  color: #fff;
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 32%, rgba(0,0,0,.54) 64%,
    rgba(0,0,0,.22) 86%, transparent 100%);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

.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);
}

/* 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: #fcd34d; }

/* 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; }

/* (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 (groeit inline, geen cap; basisregel erft) */
  .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 */
  .container { padding: 0 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; }

  /* (chat groeit inline mee, geen max-height-cap — pagina scrollt) */
  .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; }

  /* Restaurant-modal + filter-sheet — volledige schermhoogte als sheet */
  .modal-overlay--sheet { padding: 0; align-items: flex-start; }
  .modal-overlay--sheet .modal-box--wide { max-width: 100%; border-radius: 0; max-height: 100svh; }
  .modal-box.filter-sheet { max-width: 100vw; border-radius: 0; max-height: 100svh; height: 100svh; }

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

  /* Quick-filter-rij wordt een horizontale scroll-rij zodat hij niet wrapt */
  .filterbar-quick {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin: 0 -14px;
    padding-left: 14px;
    padding-right: 14px;
  }
  .filterbar-quick::-webkit-scrollbar { display: none; }
  .filterbar-quick > * { flex-shrink: 0; }
  .filter-select { max-width: none; }

  /* 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: #b91c1c;
  color: #fff;
  font-family: var(--font-sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
}
/* 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 rgba(31,59,46,.1);
}
[data-theme="dark"] .filter-search { background: #0f1923; }
[data-theme="dark"] .filter-search:focus { box-shadow: 0 0 0 3px rgba(74,222,128,.18); }

.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 rgba(31,59,46,.1); }
.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: #16a34a; }
.filter-toggle[aria-pressed="true"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.filter-toggle[aria-pressed="true"] .status-dot { background: #fff; }

/* 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; }

/* ─── 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;
  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);
}
.active-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.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-sheet ───────────────────────────────────────────────────────────
   Gecentreerde modal op desktop, bottom-sheet op mobiel (hergebruikt
   .modal-overlay--sheet). Sticky kop + voet, scrollende body ertussen. */
.modal-box.filter-sheet {
  max-width: min(560px, 92vw);
  display: flex;
  flex-direction: column;
}

.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 {
  overflow-y: auto;
  -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: 40px;
  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);
}

/* 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: rgba(0,0,0,.45);
  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);
  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: #B91C1C; color: #B91C1C; }

/* ─── 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);
  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);
  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);
  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: #7a500a;
  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: #7a500a;
  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; }
[data-theme="dark"] .taste-tag-remove { color: #fbbf24; }

/* 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: #fbbf24; border-color: #fbbf24; }

/* 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: #B91C1C; color: #B91C1C; }

/* ─── 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: #7a500a;
  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;
}
[data-theme="dark"] .profile-banner { color: #fbbf24; }
.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; }
}

/* ─── 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:#DCFCE7; color:#15803D; }
.open-badge--closed { background:#FEE2E2; color:#B91C1C; }
[data-theme="dark"] .open-badge--open   { background:rgba(74,222,128,.15); color:#4ADE80; }
[data-theme="dark"] .open-badge--closed { background:rgba(252,165,165,.15); color:#FCA5A5; }

/* 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 */
    margin-left: -24px;
    margin-right: -24px;
    padding-left: 24px;
    padding-right: 24px;
    /* 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);
}

/* 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); }

/* 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;
  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; }
[data-theme="dark"] .gallery-card-status        { background: rgba(0,0,0,.6); }
[data-theme="dark"] .gallery-card-status--open  { color: #4ade80; }

/* ─── 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 — ronde knop rechtsboven op de foto */
.gallery-card-fav {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px) saturate(140%);
  box-shadow: var(--shadow-sm);
  color: #6b7280;
  cursor: pointer;
  transition: transform .15s, color .15s;
}
.gallery-card-fav:hover  { transform: scale(1.08); }
.gallery-card-fav.active { color: var(--primary); }
[data-theme="dark"] .gallery-card-fav        { background: rgba(0,0,0,.6); color: #cbd0d8; }
[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;
  padding: 52px 14px 14px;
  color: #fff;
  /* Soepele scrim — donker genoeg onderin voor de tekst, maar laat de foto
     bovenin doorschemeren (geen zwart blok). De text-shadow houdt de naam
     leesbaar waar de scrim lichter wordt, ook op lichte foto's. */
  background: linear-gradient(to top,
    rgba(0,0,0,.92) 0%, rgba(0,0,0,.80) 32%, rgba(0,0,0,.54) 64%,
    rgba(0,0,0,.22) 86%, transparent 100%);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
}

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

.gallery-card-meta {
  margin-top: 2px;
  font-size: .875rem;
  color: rgba(255,255,255,.95);
}

.gallery-card-desc {
  margin-top: 4px;
  font-size: .875rem;
  line-height: 1.4;
  color: rgba(255,255,255,.92);
  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: #0F1117; }

/* 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; }

/* ─── 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: #B91C1C;
  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;
  color: #FCA5A5;
}
.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: #B91C1C; color: #B91C1C; }

/* ─── 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: #FCA5A5;
}

.privacy-feedback {
  font-size: .8rem;
  margin-top: 6px;
  min-height: 1.2em;
}
.privacy-feedback--ok    { color: #16A34A; }
.privacy-feedback--error { color: #B91C1C; }

/* ═══ 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 { 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 {
  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(26,37,53,.95);
  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 */
}
[data-theme="dark"] .reco-name { color: #4ade80; }

/* 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;
}
[data-theme="dark"] .reco-open { color: #4ade80; }
.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: #b91c1c; }   /* 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);
}
[data-theme="dark"] .reco-thumb.is-active                     { color: #4ade80; }
[data-theme="dark"] .reco-thumb.is-active[data-act="dismiss"] { color: #fca5a5; }

/* 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: #0F1117; }
/* 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: #FCD34D; }
/* 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: #B91C1C; }
[data-theme="dark"] .slot-state--error { color: #FCA5A5; }
/* 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: .8125rem;
  -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; }
/* "Bekijk beschikbaarheid"-knop — als vandaag vol/gesloten is */
.gallery-card-availbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  border: 1.5px solid rgba(255,255,255,.7);
  border-radius: 100px;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-family: var(--font-sans);
  font-size: .875rem;
  font-weight: 600;
  padding: 10px 16px;
  min-height: 44px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .15s;
}
.gallery-card-availbtn:hover { background: rgba(255,255,255,.28); }
.gallery-card-availbtn svg { flex-shrink: 0; }

/* ─── 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: #B91C1C;
  margin: 0;
  line-height: 1.45;
}
[data-theme="dark"] .book-field-err { color: #FCA5A5; }
.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: #DC2626; }
.book-input--err:focus-visible { outline-color: #DC2626; }

.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: #0F1117; }
/* 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: #B91C1C;
}
.book-feedback--warn {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  color: #92400E;
}
[data-theme="dark"] .book-feedback--error { background: rgba(185,28,28,.15); border-color: rgba(252,165,165,.35); color: #FCA5A5; }
[data-theme="dark"] .book-feedback--warn  { background: rgba(146,64,14,.18);  border-color: rgba(252,211,77,.35);  color: #FCD34D; }
/* 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: #15803D; }
[data-theme="dark"] .book-confirm-icon { color: #4ADE80; }
.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: #FBBF24; }
.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;
}
/* Inklapbare "bel zelf"-route onder het verzoek-formulier — secundair, dus
   progressive disclosure (native <details>, UX-playbook). */
.book-alt {
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.book-alt-summary {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.book-alt-summary::-webkit-details-marker { display: none; }
.book-alt-summary .ico { width: 17px; height: 17px; color: var(--text-muted); }
.book-alt-summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.book-alt-body { padding: 6px 0 2px; display: flex; flex-direction: column; gap: 10px; }
.book-alt-body .book-confirm-note { margin: 0; }
/* Secundaire "bel"-knop — outline-stijl op een lichte surface (de primaire
   actie is "Verzoek versturen"; bellen is het alternatief). */
.book-call-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: none;
}
.book-call-btn .ico { width: 17px; height: 17px; color: var(--primary); }
.book-call-btn:hover { border-color: var(--primary); background: var(--accent-light); }
.book-call-btn:active { transform: scale(.98); }
.book-call-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 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;
}

@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; }
}

/* ═══ 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: #DCFCE7; color: #15803D; }
.resv-badge--cancelled { background: #FEE2E2; color: #B91C1C; }
[data-theme="dark"] .resv-badge--pending   { background: rgba(251,191,36,.16); color: #FBBF24; }
[data-theme="dark"] .resv-badge--confirmed { background: rgba(74,222,128,.15);  color: #4ADE80; }
[data-theme="dark"] .resv-badge--cancelled { background: rgba(252,165,165,.15); color: #FCA5A5; }

/* ─── 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 #DC2626;
  color: #B91C1C;
}
.book-cancel-btn:hover { background: rgba(220,38,38,.07); }
[data-theme="dark"] .book-cancel-btn { border-color: #FCA5A5; color: #FCA5A5; }
[data-theme="dark"] .book-cancel-btn:hover { background: rgba(252,165,165,.1); }

.resv-confirm-cancel {
  border: 1.5px solid #DC2626;
  border-radius: var(--radius-md);
  background: rgba(220,38,38,.05);
  padding: 14px 16px;
}
[data-theme="dark"] .resv-confirm-cancel { border-color: rgba(252,165,165,.4); background: rgba(185,28,28,.12); }
.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: #DC2626; border: 1.5px solid #DC2626; color: #fff; }
.book-cancel-confirm:hover { background: #B91C1C; }
.book-cancel-confirm:disabled { opacity: .7; cursor: default; }

/* 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: #B91C1C; }
[data-theme="dark"] .book-confirm-icon--cancelled { color: #FCA5A5; }

/* ─── 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; }
}