/* ═══════════════════════════════════════════════════
   REISGIDS-APP — Shell CSS
   Generiek voor alle bestemmingen
   ═══════════════════════════════════════════════════ */

:root {
  --primair:     var(--brand-primair,  #1A5276);
  --primair-d:   var(--brand-primair-d, #0D3D61);
  --primair-l:   var(--brand-primair-l, #D6EAF8);
  --accent:      var(--brand-accent,   #C8622A);
  --accent-l:    var(--brand-accent-l, #FDEBD0);
  --groen:       #1E8449; --groen-l:#D5F5E3; --groen-d:#1A5C35;
  --amber:       #BA7517; --amber-l:#FAEEDA; --amber-d:#633806;
  --paars:       #6C3483; --paars-l:#E8DAEF;
  --rood-l:      #FCEBEB; --rood-d:#A32D2D;
  --grijs-bg:    #f5f4f0;
  --wit:         #ffffff;
  --tekst:       #1a1a1a;
  --tekst2:      #555555;
  --tekst3:      #888888;
  --rand:        rgba(0,0,0,0.1);
  --radius:      12px;
  --radius-sm:   8px;
  --safe-top:    env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

@media (prefers-color-scheme: dark) {
  :root {
    --grijs-bg:#1a1a1a; --wit:#242424;
    --tekst:#f0f0f0; --tekst2:#bbb; --tekst3:#888;
    --rand:rgba(255,255,255,0.12);
    --primair-l:#0D2535; --accent-l:#2d1208;
    --groen-l:#0a2318; --amber-l:#2e1a04; --paars-l:#1a0a2e; --rood-l:#2d0f0f;
  }
}

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent }
html, body { height:100%; background:var(--grijs-bg); color:var(--tekst); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px; line-height:1.5; overflow:hidden }

/* ── App-shell ── */
#app { display:flex; flex-direction:column; height:100%; max-width:480px; margin:0 auto; background:var(--wit); position:relative }

/* ── Onboarding ── */
#onboarding { position:fixed; inset:0; z-index:1000; background:var(--wit); overflow-y:auto; display:flex; flex-direction:column }
.verborgen { display:none !important }
.ob-header { background:linear-gradient(135deg,var(--primair-d),var(--primair)); color:#fff; padding:calc(32px + var(--safe-top)) 24px 28px; text-align:center }
.ob-header h1 { font-size:24px; font-weight:700; margin-bottom:6px }
.ob-header p  { font-size:14px; opacity:0.85 }
.ob-stap { display:none; padding:28px 20px; flex:1 }
.ob-stap.actief { display:block }
.ob-stap h2 { font-size:17px; font-weight:700; margin-bottom:6px; color:var(--tekst) }
.ob-stap > p { font-size:14px; color:var(--tekst2); margin-bottom:20px }

.rt-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
.rt-kaart { border:2px solid var(--rand); border-radius:var(--radius); padding:20px 16px; text-align:center; cursor:pointer; transition:all 0.15s; background:var(--grijs-bg) }
.rt-kaart .rt-icon { font-size:36px; margin-bottom:10px }
.rt-kaart h3 { font-size:15px; font-weight:700; margin-bottom:4px }
.rt-kaart p  { font-size:12px; color:var(--tekst3); line-height:1.5 }
.rt-kaart.geselecteerd { border-color:var(--primair); background:var(--primair-l) }
.rt-kaart.geselecteerd h3 { color:var(--primair-d) }

.thema-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.thema-knop { border:1.5px solid var(--rand); border-radius:var(--radius-sm); padding:12px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; background:var(--grijs-bg); transition:all 0.15s; text-align:left }
.thema-knop .ti { font-size:22px; flex-shrink:0 }
.thema-knop strong { font-size:13px; font-weight:600; display:block; margin-bottom:2px }
.thema-knop span  { font-size:11px; color:var(--tekst3); line-height:1.4 }
.thema-knop.geselecteerd { border-color:var(--accent); background:var(--accent-l) }
.thema-knop.geselecteerd strong { color:var(--accent) }

.ob-voort-btn { display:block; width:100%; margin-top:28px; padding:14px; background:var(--primair); color:#fff; border:none; border-radius:var(--radius); font-size:16px; font-weight:600; cursor:pointer }
.ob-voort-btn:disabled { opacity:0.4; cursor:not-allowed }

/* ── Header ── */
#header { background:var(--primair); color:#fff; padding:calc(10px + var(--safe-top)) 16px 10px; flex-shrink:0; display:flex; align-items:center; gap:10px }
#header-logo { width:32px; height:32px; border-radius:6px; background:rgba(255,255,255,0.2); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0 }
#header-info { flex:1 }
#header h1 { font-size:16px; font-weight:700; line-height:1.2 }
#header p  { font-size:11px; opacity:0.8; margin-top:1px }
#instellingen-btn { background:none; border:none; color:rgba(255,255,255,0.8); font-size:20px; cursor:pointer; padding:4px; flex-shrink:0 }
#contact-btn { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); border-radius:20px; color:#fff; font-size:12px; font-weight:500; padding:4px 12px; cursor:pointer; flex-shrink:0; text-decoration:none }

/* ── Main shell ── */
#main { display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden }

/* ── Content & Nav ── */
#content { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:calc(64px + var(--safe-bottom)) }
#nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; background:var(--wit); border-top:0.5px solid var(--rand); z-index:100 }
#nav-scroll { display:flex; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; padding-bottom:var(--safe-bottom) }
#nav-scroll::-webkit-scrollbar { display:none }
.nav-btn { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; padding:7px 3px 5px; font-size:9px; color:var(--tekst3); background:none; border:none; cursor:pointer; gap:3px; transition:color 0.15s; white-space:nowrap; overflow:hidden }
.nav-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.nav-btn.actief { color:var(--primair) }

/* ── Panels ── */
.panel { display:none; padding:16px }
.panel.actief { display:block }

/* ── Kaart panel ── */
#panel-kaart { padding:0; height:calc(100vh - 120px - var(--safe-bottom)); display:none; flex-direction:column }
#panel-kaart.actief { display:flex }
#kaart-filters { display:flex; gap:6px; padding:10px 12px; overflow-x:auto; flex-shrink:0; scrollbar-width:none; background:var(--wit); border-bottom:0.5px solid var(--rand) }
#kaart-filters::-webkit-scrollbar { display:none }
#kaart-regio-btns { display:flex; gap:6px; padding:8px 12px; overflow-x:auto; flex-shrink:0; scrollbar-width:none; background:var(--grijs-bg); border-bottom:0.5px solid var(--rand) }
#kaart-regio-btns::-webkit-scrollbar { display:none }
.filter-btn { flex-shrink:0; padding:5px 12px; border:1px solid var(--rand); border-radius:20px; background:var(--wit); font-size:12px; font-weight:500; cursor:pointer; color:var(--tekst2); transition:all 0.15s }
.filter-btn.actief { background:var(--primair); border-color:var(--primair); color:#fff }
.regio-btn { flex-shrink:0; padding:4px 11px; border:1px solid var(--rand); border-radius:20px; background:var(--wit); font-size:11px; font-weight:500; cursor:pointer; color:var(--tekst2); transition:all 0.15s }
.regio-btn.actief { border-color:var(--primair); color:var(--primair); background:var(--primair-l) }
#kaart-el { flex:1 }

/* ── Mijn positie marker ── */
.mijn-pos { position:relative; width:20px; height:20px }
.mpp-dot  { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:14px; height:14px; background:#4285F4; border:2.5px solid #fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,0.35) }
.mpp-dot::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px; height:28px; background:rgba(66,133,244,0.2); border-radius:50%; animation:gps-puls 2s ease-in-out infinite }
@keyframes gps-puls { 0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.6 } 50% { transform:translate(-50%,-50%) scale(1.5); opacity:.1 } }

/* ── Mijn locatie knop (Leaflet control) ── */
.kaart-locatie-btn { width:36px; height:36px; background:var(--wit); border:1px solid var(--rand); border-radius:8px; font-size:18px; cursor:pointer; box-shadow:0 1px 5px rgba(0,0,0,0.2); display:flex; align-items:center; justify-content:center; margin-bottom:8px }

/* ── Kaart-marker kleuren (Leaflet divIcon) ── */
.marker-eten    { background:var(--accent);  }
.marker-verblijf{ background:var(--primair); }
.marker-sight   { background:var(--groen);   }
.marker-wijn    { background:#7B241C;        }
.marker-camper  { background:var(--amber);   }
.marker-basis {
  width:28px; height:28px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,0.9);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; box-shadow:0 2px 6px rgba(0,0,0,0.3);
  cursor:pointer;
}

/* ── Regio-marker (zoom ≤9) ── */
.regio-marker { display:flex; flex-direction:column; align-items:center; background:var(--wit); border:2.5px solid var(--primair); border-radius:10px; padding:5px 10px; box-shadow:0 2px 8px rgba(0,0,0,0.25); cursor:pointer; min-width:110px; text-align:center; gap:1px }
.rm-icon  { font-size:16px; line-height:1 }
.rm-naam  { font-size:11px; font-weight:700; color:var(--tekst); white-space:nowrap }
.rm-counts{ font-size:10px; color:var(--tekst2); white-space:nowrap }

/* ── Stad-marker (zoom 10–11) ── */
.stad-marker { display:flex; flex-direction:column; align-items:center; background:var(--primair); border-radius:8px; padding:4px 9px; box-shadow:0 2px 6px rgba(0,0,0,0.3); cursor:pointer; min-width:90px; text-align:center; gap:1px }
.sm-naam   { font-size:11px; font-weight:700; color:#fff; white-space:nowrap }
.sm-counts { font-size:10px; color:rgba(255,255,255,0.85); white-space:nowrap }

/* ── Stad-popup ── */
.stad-popup h3 { font-size:14px; font-weight:700; margin-bottom:10px; color:var(--tekst); border-bottom:1px solid var(--rand); padding-bottom:6px }
.stad-pop-item { display:flex; align-items:flex-start; gap:8px; padding:7px 0; border-bottom:0.5px solid var(--rand) }
.stad-pop-item:last-child { border-bottom:none }
.spi-icon  { font-size:18px; flex-shrink:0; margin-top:1px }
.spi-info  { flex:1; min-width:0 }
.spi-info strong { display:block; font-size:12px; font-weight:700; color:var(--tekst); margin-bottom:2px }
.spi-info span   { display:block; font-size:11px; color:var(--tekst2); line-height:1.4; margin-bottom:3px }
.spi-acties { display:flex; flex-direction:column; gap:4px; flex-shrink:0 }
.spi-acties .pop-btn { font-size:13px; padding:4px 6px }

/* ── Locatie-popup (zoom ≥12) ── */
.kaart-popup { min-width:210px }
.pop-type-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px }
.pop-type-badge { font-size:11px; font-weight:600; color:var(--tekst2); background:var(--grijs-bg); padding:2px 8px; border-radius:10px }
.pop-prijs { font-size:11px; font-weight:700; color:var(--groen-d); background:var(--groen-l); padding:2px 8px; border-radius:10px }
.kaart-popup h3 { font-size:14px; font-weight:700; margin-bottom:2px; color:var(--tekst) }
.pop-stad { font-size:11px; color:var(--tekst3); margin-bottom:7px }
.pop-info { font-size:12px; color:var(--tekst); line-height:1.55; margin-bottom:8px }
.pop-themas { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:10px }
.pop-acties { display:flex; gap:6px; border-top:0.5px solid var(--rand); padding-top:9px; margin-top:2px }
.pop-btn { flex:1; display:block; text-align:center; padding:7px 4px; border-radius:7px; font-size:12px; font-weight:600; text-decoration:none }
.pop-btn-web   { background:var(--primair-l); color:var(--primair-d); border:1px solid var(--primair) }
.pop-btn-route { background:var(--primair); color:#fff }

/* ── Kaartjes (cards) ── */
.card { background:var(--wit); border:0.5px solid var(--rand); border-radius:var(--radius); padding:14px; margin-bottom:10px }
.card.accent-links { border-left:3px solid var(--accent) }
.card.groen-links  { border-left:3px solid var(--groen) }
.card.blauw-links  { border-left:3px solid var(--primair) }
.card.amber-links  { border-left:3px solid var(--amber) }
.card.paars-links  { border-left:3px solid var(--paars) }
.card-rij { display:flex; gap:10px; align-items:flex-start }
.card-icon { width:36px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0 }
.card h3 { font-size:14px; font-weight:600; margin-bottom:4px }
.card p  { font-size:13px; color:var(--tekst2); line-height:1.55 }
.card-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px }

/* ── Tags ── */
.tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; font-weight:500 }
.tag-groen  { background:var(--groen-l);  color:var(--groen-d) }
.tag-amber  { background:var(--amber-l);  color:var(--amber-d) }
.tag-blauw  { background:var(--primair-l);color:var(--primair-d) }
.tag-accent { background:var(--accent-l); color:var(--accent) }
.tag-paars  { background:var(--paars-l);  color:var(--paars) }
.tag-rood   { background:var(--rood-l);   color:var(--rood-d) }

/* ── Dividers, tips ── */
.divider { font-size:11px; font-weight:600; color:var(--tekst3); margin:16px 0 8px; display:flex; align-items:center; gap:8px; text-transform:uppercase; letter-spacing:0.5px }
.divider::after { content:''; flex:1; height:0.5px; background:var(--rand) }
.tip { background:var(--amber-l); border:0.5px solid var(--amber); border-radius:var(--radius-sm); padding:10px 13px; margin-bottom:12px; font-size:13px; color:var(--amber-d); line-height:1.6 }
.tip.blauw  { background:var(--primair-l); border-color:var(--primair); color:var(--primair-d) }
.tip.groen  { background:var(--groen-l);   border-color:var(--groen);   color:var(--groen-d) }
.tip.accent { background:var(--accent-l);  border-color:var(--accent);  color:var(--accent) }

/* ── Hero ── */
.hero { background:linear-gradient(135deg,var(--primair-d),var(--primair)); border-radius:var(--radius); padding:20px; color:#fff; margin-bottom:16px }
.hero h2 { font-size:20px; font-weight:700; margin-bottom:4px }
.hero p  { font-size:13px; opacity:0.85; margin-bottom:14px }
.badges { display:flex; flex-wrap:wrap; gap:6px }
.badge  { background:rgba(255,255,255,0.18); border:1px solid rgba(255,255,255,0.3); border-radius:20px; padding:3px 10px; font-size:11px }

/* ── Info-blokken ── */
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.info-blok { background:var(--wit); border:0.5px solid var(--rand); border-radius:var(--radius); padding:12px }
.info-blok h3 { font-size:13px; font-weight:600; margin-bottom:4px }
.info-blok p  { font-size:12px; color:var(--tekst2); line-height:1.55 }

/* ── Regio-kaarten ── */
.regio-kaart { background:var(--wit); border:0.5px solid var(--rand); border-radius:var(--radius); padding:14px; margin-bottom:10px; border-left:4px solid var(--primair) }
.regio-header { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.regio-header .ri { font-size:22px }
.regio-header h3  { font-size:15px; font-weight:700 }
.regio-kaart p    { font-size:13px; color:var(--tekst2); line-height:1.55; margin-bottom:8px }
.regio-mustsees   { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px }
.regio-reistijd   { font-size:11px; color:var(--tekst3) }
.regio-zoom-btn   { float:right; margin-top:-4px; padding:4px 10px; background:var(--primair-l); border:none; border-radius:20px; font-size:11px; color:var(--primair-d); cursor:pointer; font-weight:500 }

/* ── Routes ── */
.route-selector { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin-bottom:16px; padding-bottom:2px }
.route-selector::-webkit-scrollbar { display:none }
.route-tab { flex-shrink:0; padding:7px 14px; border:1.5px solid var(--rand); border-radius:20px; background:var(--grijs-bg); font-size:13px; font-weight:500; cursor:pointer; color:var(--tekst2); white-space:nowrap }
.route-tab.actief { background:var(--primair); border-color:var(--primair); color:#fff }
.route-dag { margin-bottom:14px }
.route-dag-header { background:var(--primair-l); border-radius:var(--radius-sm); padding:8px 12px; font-size:13px; font-weight:600; color:var(--primair-d); margin-bottom:8px }
.route-dag ul { list-style:none; padding:0 }
.route-dag li { font-size:13px; color:var(--tekst2); padding:5px 0; border-bottom:0.5px solid var(--rand); padding-left:16px; position:relative; line-height:1.5 }
.route-dag li::before { content:'→'; position:absolute; left:0; color:var(--primair) }
.route-dag li:last-child { border-bottom:none }

/* ── Verblijf filter ── */
.verblijf-filter { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap }
.vf-btn { padding:6px 13px; border:1px solid var(--rand); border-radius:20px; background:var(--grijs-bg); font-size:12px; font-weight:500; cursor:pointer; color:var(--tekst2) }
.vf-btn.actief { background:var(--primair); border-color:var(--primair); color:#fff }

/* ── Taal-tab ── */
.lang-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px }
.lang-kaart { background:var(--wit); border:0.5px solid var(--rand); border-radius:var(--radius); padding:12px; cursor:pointer; transition:all 0.15s; position:relative; overflow:hidden }
.lang-kaart .pt  { font-size:15px; font-weight:700; color:var(--primair); margin-bottom:2px }
.lang-kaart .nl  { font-size:12px; color:var(--tekst2); margin-bottom:3px }
.lang-kaart .pron{ font-size:10px; color:var(--tekst3); font-style:italic }
.lang-kaart .spk { position:absolute; top:8px; right:8px; background:var(--primair-l); border:none; border-radius:50%; width:24px; height:24px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px }
.lang-kaart.speaking { background:var(--primair-l); border-color:var(--primair) }
.taal-cat-titel { font-size:13px; font-weight:600; margin:14px 0 8px; color:var(--tekst) }

/* ── Camper-filter in taal ── */
.taal-filter { display:flex; gap:6px; margin-bottom:14px }
.taal-filter button { padding:5px 12px; border:1px solid var(--rand); border-radius:20px; background:var(--grijs-bg); font-size:12px; cursor:pointer; color:var(--tekst2) }
.taal-filter button.actief { background:var(--primair); border-color:var(--primair); color:#fff }

/* ── Vertaal-tab ── */
.mic-btn { width:76px; height:76px; border-radius:50%; background:var(--primair); color:#fff; border:none; font-size:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; transition:all 0.2s; box-shadow:0 4px 12px rgba(26,82,118,0.35) }
.mic-btn.luisteren { background:var(--rood-d); animation:pulse 1s infinite }
.mic-btn.verwerken { background:var(--amber) }
@keyframes pulse { 0%,100%{box-shadow:0 4px 12px rgba(163,45,45,0.35)}50%{box-shadow:0 4px 24px rgba(163,45,45,0.6)} }
.vertaal-status { text-align:center; font-size:13px; color:var(--tekst3); margin-bottom:14px; min-height:18px }
.vertaal-box { background:var(--grijs-bg); border:0.5px solid var(--rand); border-radius:var(--radius); padding:13px; margin-bottom:10px; min-height:56px }
.vertaal-box-label { font-size:10px; font-weight:600; color:var(--tekst3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px }
.vertaal-box-tekst { font-size:15px; color:var(--tekst); line-height:1.5 }
.vertaal-box-tekst.placeholder { color:var(--tekst3); font-style:italic; font-size:13px }
.vertaal-spreken-btn { width:100%; padding:9px; background:var(--primair-l); border:0.5px solid var(--primair); border-radius:var(--radius-sm); color:var(--primair-d); font-size:13px; font-weight:500; cursor:pointer; margin-top:6px; display:none }
.taal-keuze { display:flex; gap:6px; margin-bottom:10px }
.tk-btn { flex:1; padding:7px; border:1px solid var(--rand); border-radius:var(--radius-sm); background:var(--grijs-bg); font-size:12px; font-weight:500; cursor:pointer; color:var(--tekst2) }
.tk-btn.actief { background:var(--primair-l); border-color:var(--primair); color:var(--primair-d) }
.doeltaal-keuze { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap }
.vertaal-sectie-label { font-size:10px; font-weight:600; color:var(--tekst3); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px }
.snelzin-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px }
.snelzin { background:var(--wit); border:0.5px solid var(--rand); border-radius:var(--radius-sm); padding:9px 11px; font-size:12px; cursor:pointer; color:var(--tekst2); text-align:left }
.snelzin:active { background:var(--primair-l); border-color:var(--primair) }

/* ── Thema-badge ── */
.thema-badge { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:3px; vertical-align:middle }

/* ── Scroll-top ── */
#scroll-top { position:fixed; bottom:calc(70px + var(--safe-bottom)); right:14px; width:36px; height:36px; border-radius:50%; background:var(--primair); color:#fff; border:none; font-size:16px; cursor:pointer; display:none; align-items:center; justify-content:center; z-index:99; box-shadow:0 2px 8px rgba(0,0,0,0.2) }
#scroll-top.zichtbaar { display:flex }

/* ── Geen resultaten ── */
.leeg { text-align:center; padding:32px 16px; color:var(--tekst3); font-size:14px }