/* ═══════════════════════════════════════════════════════════════════════
   BUNDLED.CSS — samengevoegd uit 6 losse bestanden
   ═══════════════════════════════════════════════════════════════════════
   Performance-fix: PageSpeed Insights wees renderblokkerende CSS-verzoeken aan
   als vertragend voor de eerste weergave (≈1,9 sec besparing mogelijk op traag
   mobiel netwerk). Was: 3 eigen bestanden (tokens/app/features.css) + 3 externe
   verzoeken naar unpkg.com (leaflet.css, MarkerCluster.css, MarkerCluster.
   Default.css) = 6 losse render-blokkerende requests. Nu: 1 bestand, 1 request,
   zelf gehost — geen los DNS/verbinding meer nodig naar unpkg.com voor CSS.
   Alle commentaar/uitleg uit de originele bestanden staat er nog compleet in.
   Bewerk voortaan DIT bestand voor site-brede styling. De 3 losse leaflet.js-
   CSS-bronbestanden (secties 4-6) zijn ongewijzigde, letterlijke kopieën van
   unpkg.com/leaflet@1.9.4 en unpkg.com/leaflet.markercluster@1.5.3 — bij een
   toekomstige upgrade van die libraries moeten deze secties handmatig opnieuw
   gekopieerd worden (2 relatieve afbeeldingspaden in sectie 4 zijn expres
   herschreven naar absolute unpkg-URLs, zodat die niet breken nu dit bestand
   vanaf ons eigen domein geladen wordt in plaats van vanaf unpkg zelf).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── SECTIE 1: was tokens.css (kleuren/variabelen) ───────── */

/* ══════════════════════════════════════════════════════════════════
   TruckCharge — ontwerpsysteem
   Alle kleuren, fonts en maten op één plek. Wil je de app een andere
   uitstraling geven, pas dan hier iets aan en het werkt overal door.
   ══════════════════════════════════════════════════════════════════ */

:root{

  /* ── KLEUREN ───────────────────────────────────────────────────
     De app is opgebouwd rond drie donkere lagen die op elkaar
     stapelen: bg (achtergrond) → surface (panelen) → surface2
     (invoervelden en kaartjes bínnen panelen).                    */

  --bg:       #0D0F14;   /* diepste laag: body en kaartachtergrond */
  --surface:  #161A22;   /* kopbalk, zijpaneel, modals             */
  --surface2: #1E2430;   /* invoervelden, tags, kaartjes           */
  --border:   rgba(255,255,255,0.09);  /* subtiele scheidingslijn  */

  --text:     #F0F2F7;   /* gewone tekst                            */
  --muted:    #8A90A0;   /* bijschriften, labels, secundair         */
  --body:     #D5D9E3;   /* lopende tekst — alinea's/lijsten,
                            iets zachter dan --text                */

  /* ── ACCENTEN ──────────────────────────────────────────────────
     Elke kleur heeft één betekenis. Niet door elkaar gebruiken,
     anders verliezen de waarschuwingen hun kracht.                */

  --accent: #00C37B;   /* groen  — goed, bevestigd, ≥150 kW         */
  --warn:   #FFB347;   /* geel   — let op, 100-150 kW, eigen punt   */
  --danger: #FF5C5C;   /* rood   — fout, verwijderen, <100 kW       */
  --info:   #4A9EFF;   /* blauw  — externe link, exploitant, jouw
                                   locatie op de kaart              */
  --unver:  #FF8A2B;   /* oranje — NIET geverifieerd (gloeit)       */

  /* ── TYPOGRAFIE ────────────────────────────────────────────────
     Twee fonts: Syne voor koppen en cijfers (kort, karaktervol),
     DM Sans voor lopende tekst (rustig, goed leesbaar klein).     */

  --fh: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;      /* koppen, badges, getallen       */
  --fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;   /* alles wat je leest             */

  /* ── VEILIGE ZONES (telefoon) ──────────────────────────────────
     Voorkomt dat knoppen onder de notch of de home-balk vallen.   */

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  /* ═══ BUGFIX ═══ Alleen boven/onder waren afgeschermd tegen de iPhone-notch/rand-afronding —
     links/rechts ontbrak, waardoor in de standalone/fullscreen PWA-modus (geen Safari-balken meer
     als marge) de trophy-knop, zoomknoppen en locatieknop rechts deels buiten beeld vielen. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* ── MATEN ─────────────────────────────────────────────────────  */

  --peek: 52px;   /* hoogte van het strookje onderpaneel dat
                      zichtbaar blijft als de lijst dicht is —
                      compact gehouden zodat de kaart zo groot
                      mogelijk blijft; toont alleen de kop met
                      "☝️ Laadstations" en het swipe-icoontje       */
}

/* ── LICHT THEMA ───────────────────────────────────────────────────
   Actief wanneer <html data-theme="light">. Zelfde structuur, rustige
   lichte kleuren voor overdag i.p.v. de donkere basis hierboven.
   Accent/warn/danger/info/unver blijven bewust gelijk — die kleuren
   hebben een vaste betekenis (goed/let-op/fout) die niet met het
   thema mag meeveranderen.                                         */
[data-theme="light"]{
  --bg:       #F5F6F9;
  --surface:  #FFFFFF;
  --surface2: #EEF0F4;
  --border:   rgba(13,15,20,0.10);
  --text:     #171A21;
  --muted:    #6A7080;
  --body:     #333844;
}


/* ══════════════════════════════════════════════════════════════════
   VUISTREGELS DIE OVERAL TERUGKOMEN
   ══════════════════════════════════════════════════════════════════

   Afronding
     4-5px   kleine tags en badges
     8-9px   knoppen en invoervelden
     11-12px kaartjes en panelen
     18px    bovenkant van het onderpaneel
     20px    pillen (filterknoppen) en het toast-bericht

   Raakvlakken
     Alles wat je met een vinger aantikt is minimaal 44x44 px.
     Dat is de reden dat de kaartknoppen precies 44px zijn en de
     invoervelden 11px padding hebben in plaats van 8.

   Lettergroottes op mobiel
     Invoervelden staan bewust op 16px. Alles daaronder laat iOS
     inzoomen zodra je een veld aantikt — heel vervelend onderweg.

   Diepte
     Geen zware schaduwen. Lagen worden onderscheiden door
     achtergrondkleur en een lijn van 1px, niet door schaduw.
     Uitzondering: het onderpaneel en de zwevende knoppen, die
     écht boven de kaart hangen.

   Beweging
     .28s cubic-bezier(.4,0,.2,1) voor het schuiven van panelen
     .15s voor kleurwissels bij aanraken
     De enige animatie die aandacht trekt is de gloed om
     niet-geverifieerde meldingen — die moet je zien.
   ══════════════════════════════════════════════════════════════════ */

/* ───────── SECTIE 2: was app.css (hoofdstyling) ───────── */

/* ══════════════════════════════════════════════════════════════════
   TruckCharge — app (index.html)
   ──────────────────────────────────────────────────────────────────
   Mobile-first. De basisregels gelden voor de telefoon; onderaan
   staat één mediaquery vanaf 820px die het omzet naar de
   bureaubladindeling met een vaste zijbalk.

   OPBOUW
     1  Basis en variabelen
     2  Kopbalk
     3  Filterbalk
     4  Kaart en zwevende knoppen
     5  Onderpaneel (bottom sheet)
     6  Stationkaartjes en badges
     7  Ranglijst
     8  Laadscherm en foutmelding
     9  Modals (punt toevoegen, melden)
    10  Foto-editor en lightbox
    11  Popup op de kaart
    12  Toast
    13  Bureaublad (min-width:820px)
   ══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none;overflow-x:hidden;max-width:100vw}
body{font-family:var(--fb);background:var(--bg);color:var(--text);height:100vh;height:calc(var(--vh, 1vh) * 100);height:100dvh;display:flex;flex-direction:column;overflow:hidden;padding-top:var(--safe-t)}

header{background:var(--surface);border-bottom:1px solid var(--border);padding:9px calc(14px + var(--safe-r)) 9px calc(14px + var(--safe-l));display:flex;align-items:center;gap:8px;flex-shrink:0;z-index:600}
.logo{font-family:var(--fh);font-size:17px;font-weight:800;line-height:1.3;display:flex;align-items:center;gap:7px;flex-shrink:1;min-width:0;overflow:hidden}
.logo-box{width:28px;height:28px;background:var(--accent);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-box svg{width:16px;height:16px;fill:var(--bg)}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:5px;flex-shrink:0}
.hdr-btn{box-sizing:border-box;padding:7px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-family:var(--fb);white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media(max-width:400px){
  .logo-text{display:none}
  .hdr-btn.optional-text{padding:7px 9px}
  .hdr-btn.optional-text .btn-label{display:none}
}
.hdr-btn:active{background:var(--accent);color:var(--bg);border-color:var(--accent)}
/* ═══ Inloggen/Registreren-knop: kleiner + kruisvervaging tussen beide woorden ═══ Trekt
   subtiel de aandacht zonder de knop breder te maken dan het langste woord nodig heeft — de
   twee teksten liggen op elkaar (wrap heeft een vaste breedte) en wisselen om beurten in/uit. */
.auth-label-wrap{position:relative;display:inline-block;min-width:62px;height:14px;vertical-align:middle;text-align:left}
.auth-label-a,.auth-label-b{position:absolute;left:0;top:0;white-space:nowrap}
.auth-label-a{animation:authFadeA 6s ease-in-out infinite}
.auth-label-b{animation:authFadeB 6s ease-in-out infinite}
@keyframes authFadeA{0%,45%{opacity:1}55%,95%{opacity:0}100%{opacity:1}}
@keyframes authFadeB{0%,45%{opacity:0}55%,95%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.auth-label-a,.auth-label-b{animation:none}.auth-label-b{opacity:0}}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;flex-shrink:0}
.avatar.avatar-lg{width:44px;height:44px;font-size:16px}

.filter-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 14px;display:flex;gap:7px;align-items:center;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.filter-bar::-webkit-scrollbar{display:none}
.chip{padding:6px 13px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:12.5px;font-weight:500;cursor:pointer;white-space:nowrap;font-family:var(--fb);flex-shrink:0;min-height:44px;display:inline-flex;align-items:center}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.chip.truck.active{background:var(--warn);border-color:var(--warn);color:var(--bg)}
.search-wrap{flex:1;min-width:130px}
.search-input{width:100%;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:16px;font-family:var(--fb);outline:none}
.ac-wrap{position:relative}
.ac-list{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:2000;max-height:220px;overflow-y:auto}
.ac-item{padding:9px 12px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--border)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover,.ac-item.hi{background:var(--surface2)}
.search-input:focus{border-color:var(--accent)}
.search-input::placeholder{color:var(--muted);font-size:13px}

/* ═══ Primaire balk: route Van/Naar, direct onder de topbanner. Groter en leesbaarder dan de
   oude compacte zoekbalkjes, en dit is nu de ENIGE balk boven de kaart — zo blijft de kaart
   zo groot mogelijk. ═══ */
.primary-bar{background:var(--surface);border-bottom:1px solid var(--border);padding:8px 14px 10px;flex-shrink:0}
.route-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;padding-left:2px}
.route-row{display:flex;gap:7px;align-items:center}
.route-input-wrap{flex:1;min-width:0;position:relative}
.route-input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:16px;font-family:var(--fb);outline:none;min-height:44px}
.route-input:focus{border-color:var(--accent)}
.route-input::placeholder{color:var(--muted)}
.route-info-row1{font-size:11.5px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-info-row2{display:flex;align-items:center;gap:8px;margin-top:2px}
.more-btn{font-size:10.5px;padding:2px 8px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer}
.route-icon-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface2);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.route-icon-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.route-icon-btn:active,.route-icon-btn.active{background:var(--accent);border-color:var(--accent);color:var(--bg)}
#filterToggle.active{background:rgba(0,195,123,.14);border-color:var(--accent);color:var(--accent)}

/* Filter-paneel: klapt open onder de primaire balk, alle secundaire filters bij elkaar */
.filter-panel{background:var(--surface);border-bottom:1px solid var(--border);padding:10px 14px 12px;flex-shrink:0;display:flex;flex-direction:column;gap:8px}
.filter-panel-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}

/* KW-rij: altijd 4 gelijke kolommen naast elkaar, ook op smalle telefoons — voorkomt dat
   ze willekeurig doorlopen naar een volgende regel en er rommelig uitzien */
.kw-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.kw-row .chip{justify-content:center;flex-direction:column;padding:6px 2px;text-align:center;min-width:0}

/* Overige rijen: 2 gelijke kolommen op smalle schermen, zodat 'past mijn hoogte' /
   'alleen geverifieerd', regio-keuze en merken-filter allemaal even breed en overzichtelijk
   onder elkaar staan i.p.v. willekeurig af te breken. */
.filter-panel-row:not(.kw-row){display:grid;grid-template-columns:1fr 1fr;gap:6px}
.filter-panel-row:not(.kw-row) .chip,
.filter-panel-row:not(.kw-row) select.chip-select{justify-content:center;text-align:center;width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
.filter-panel-row:last-child{grid-template-columns:1fr}
/* De 'Link plakken'-knop staat verborgen (zie HTML) — zonder dit zou de merken-
   dropdown nu maar de helft van de rij innemen i.p.v. lekker breed en goed leesbaar. */
select.chip-select{grid-column:1 / -1}

/* KW-chips: iets compacter maar zelfde hoogte als de rest */
.chip[data-kw]{padding:5px 11px;font-size:12px}
.chip[data-kw] .kw-sub{font-size:9px;opacity:.7;font-weight:400;line-height:1;margin-top:1px}

/* Dropdown "Alle merken" krijgt exact dezelfde styling als de andere chips */
select.chip-select{
  padding:6px 32px 6px 13px;
  border-radius:20px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--muted);
  font-size:12.5px;
  font-weight:500;
  white-space:nowrap;
  font-family:var(--fb);
  flex-shrink:0;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  appearance:auto;
  -webkit-appearance:auto;
  cursor:pointer;
  outline:none;
  max-width:100%;
}
select.chip-select:focus{border-color:var(--accent)}
select.chip-select option{background:var(--surface2);color:var(--text)}

@media (max-width:520px){
  .route-label{font-size:10px}
  /* ═══ BUGFIX ═══ Was 15px — onder de 16px-drempel zoomt iOS Safari automatisch in zodra je
     dit veld aantikt, en in de standalone/fullscreen PWA-modus keert dat zoomniveau soms niet
     vanzelf terug na het loslaten — vandaar het "ingezoomde scherm met afgesneden randen" tot
     je handmatig weer uitzoomt. 16px is de laagste waarde die deze auto-zoom voorkomt. */
  .route-input{padding:11px 12px;font-size:16px}
}

.map-area{flex:1;position:relative;min-height:0}
#map{width:100%;height:100%;touch-action:pan-x pan-y;overscroll-behavior:contain}
.leaflet-container{background:var(--bg) !important}
.leaflet-control-zoom{display:none}
.leaflet-control-attribution{background:rgba(13,15,20,.7) !important;color:#5A5F6E !important;font-size:9px !important;padding:1px 5px !important}
.leaflet-control-attribution a{color:#6A7080 !important}
.leaflet-control-zoom a{background:rgba(22,26,34,.94) !important;color:#F0F2F7 !important;border-color:var(--border) !important}
.leaflet-control-zoom a:hover{background:rgba(30,36,48,.98) !important}

.map-fabs{position:absolute;right:calc(12px + var(--safe-r));bottom:calc(var(--peek) + 14px);display:flex;flex-direction:column;gap:8px;z-index:450;transition:bottom .28s cubic-bezier(.4,0,.2,1)}
.fab{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:rgba(22,26,34,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 14px rgba(0,0,0,.45);padding:0;font:inherit;-webkit-appearance:none;appearance:none}
.fab svg{width:20px;height:20px;fill:none;stroke:#F0F2F7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fab:active{background:var(--accent)}
.fab:active svg{stroke:var(--bg)}
.fab.on svg{stroke:var(--accent)}

.sheet{position:absolute;left:0;right:0;bottom:0;height:78vh;height:78dvh;background:var(--surface);border-top:1px solid var(--border);border-radius:18px 18px 0 0;box-shadow:0 -6px 28px rgba(0,0,0,.5);z-index:500;display:flex;flex-direction:column;transform:translateY(calc(100% - var(--peek)));transition:transform .28s cubic-bezier(.4,0,.2,1);touch-action:none}
.sheet.open{transform:translateY(0)}
/* ═══ "Stuiter"-hint na route-berekening ═══ De peek-strip (--peek, 52px) is op een telefoon
   makkelijk over het hoofd te zien — deze animatie laat de balk kort een stuk omhoogveren en
   weer terugzakken, zodat duidelijk wordt dat je 'm met je vinger omhoog kan schuiven. Puur
   visueel: schuift na afloop netjes terug naar de normale (dichte) stand. */
.sheet.bounce-hint{animation:sheetBounceHint 1.15s cubic-bezier(.34,1.56,.64,1)}
@keyframes sheetBounceHint{
  0%{transform:translateY(calc(100% - var(--peek)))}
  35%{transform:translateY(calc(100% - var(--peek) - 150px))}
  55%{transform:translateY(calc(100% - var(--peek) - 50px))}
  75%{transform:translateY(calc(100% - var(--peek) - 100px))}
  100%{transform:translateY(calc(100% - var(--peek)))}
}
.sheet-grab{padding:5px 0 2px;display:flex;align-items:center;justify-content:center;cursor:grab;flex-shrink:0}
.grab-bar{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.22)}
.sheet-head{padding:6px 16px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;border-bottom:1px solid var(--border);cursor:pointer;min-height:44px}
.sheet-head h2{font-family:var(--fb);font-size:14px;font-weight:700;display:flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-swipe-icon{display:inline-flex;color:var(--accent);animation:swipeHintUp 1.4s ease-in-out infinite;transform-origin:center}
.sheet-swipe-icon svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.sheet.open .sheet-swipe-icon{transform:rotate(180deg);animation:swipeHintDown 1.4s ease-in-out infinite}
@keyframes swipeHintUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes swipeHintDown{0%,100%{transform:rotate(180deg) translateY(0)}50%{transform:rotate(180deg) translateY(-4px)}}
.sheet-hint{display:none;text-align:center;font-size:11px;color:var(--muted);padding:6px 0;cursor:pointer;border-bottom:1px solid var(--border)}
.sheet.open .sheet-hint{display:block}
.sheet:not(.open) .cnt{display:none}
.cnt{font-size:11px;background:var(--surface2);color:var(--muted);padding:3px 9px;border-radius:10px;border:1px solid var(--border)}
.station-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(var(--safe-b) + 12px)}
.station-list::-webkit-scrollbar{width:3px}
.station-list::-webkit-scrollbar-thumb{background:var(--surface2)}
.station-list{scrollbar-width:thin;scrollbar-color:var(--surface2) transparent}

.scard{padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;position:relative}
.scard:active{background:var(--surface2)}
.scard.selected{background:rgba(0,195,123,.08);border-left:3px solid var(--accent)}
.scard.custom-station{border-left:3px solid rgba(255,179,71,.55)}
.srow1{display:flex;align-items:flex-start;gap:10px;margin-bottom:3px}
.sname{font-family:var(--fh);font-size:13.5px;font-weight:700;line-height:1.3;flex:1}
.sdist{font-size:11.5px;color:var(--accent);font-weight:500;white-space:nowrap;flex-shrink:0;padding-top:1px}
.saddr{font-size:11.5px;color:var(--muted);margin-bottom:7px;line-height:1.4}
.sop{font-size:11px;color:var(--info);margin-bottom:6px}
.smeta{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.pbadge{font-size:11px;font-weight:600;padding:2.5px 8px;border-radius:5px;font-family:var(--fh);line-height:1.3;background:rgba(0,195,123,.14);color:var(--accent)}
.ph{background:rgba(0,195,123,.18);color:var(--accent)}
.pm{background:rgba(255,179,71,.18);color:var(--warn)}
.pl{background:rgba(255,92,92,.18);color:var(--danger)}
.ctag{font-size:10px;padding:2.5px 7px;border-radius:5px;background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
.custom-tag{font-size:10px;padding:2.5px 7px;border-radius:5px;background:rgba(255,179,71,.15);color:var(--warn);border:1px solid rgba(255,179,71,.3)}
.warn-tag{font-size:10px;padding:2.5px 7px;border-radius:5px;background:rgba(255,92,92,.13);color:var(--danger);border:1px solid rgba(255,92,92,.28)}
.vtag{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:5px;background:rgba(0,195,123,.16);color:var(--accent);border:1px solid rgba(0,195,123,.35)}
.utag{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:5px;background:rgba(255,138,43,.18);color:#FFB067;border:1px dashed var(--unver);animation:glow 1.9s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 0 rgba(255,138,43,0)}50%{box-shadow:0 0 9px 1px rgba(255,138,43,.55)}}

/* fotostrook */
.thumbs{display:flex;gap:7px;margin-top:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.thumbs::-webkit-scrollbar{display:none}
.thumb-labeled{position:relative;flex-shrink:0}
.thumb-label{position:absolute;bottom:3px;right:3px;font-size:10px;background:rgba(13,15,20,.72);border-radius:5px;padding:1px 3px;line-height:1.3}
.thumb{width:78px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0;border:1px solid var(--border);cursor:zoom-in;background:var(--surface2)}
.thumb.unver{border:1px dashed var(--unver)}

.reports-box{margin-top:9px;display:flex;flex-direction:column;gap:6px}
.rep{background:var(--surface2);border-radius:8px;padding:9px 11px;border-left:3px solid var(--accent)}
.rep.unverified{border-left-color:var(--unver);background:rgba(255,138,43,.07)}
.rep-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.rep-h{font-family:var(--fh);font-size:13px;font-weight:700;line-height:1.3}
.rep-v{font-size:11px;color:var(--muted)}
.rep-note{font-size:11.5px;color:var(--muted);line-height:1.45;margin-top:4px}
.rep-by{font-size:10.5px;color:#9AA0AE;margin-top:6px;display:flex;align-items:center;gap:6px}

.card-actions{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}
.act-btn{flex:1;min-width:92px;padding:9px;min-height:44px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:12px;font-family:var(--fb);cursor:pointer;text-align:center;text-decoration:none;display:block}
.act-btn.primary{background:rgba(0,195,123,.15);border-color:rgba(0,195,123,.35);color:var(--accent)}
.act-btn.info{background:rgba(74,158,255,.13);border-color:rgba(74,158,255,.32);color:var(--info)}
.act-btn.orange{background:rgba(255,138,43,.14);border-color:rgba(255,138,43,.35);color:#FFB067}
.act-btn.danger{background:rgba(255,92,92,.12);border-color:rgba(255,92,92,.3);color:var(--danger);flex:0 0 auto;min-width:0;padding:9px 13px}

.hidden{display:none!important}
#loader{position:absolute;inset:0;background:rgba(13,15,20,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:520}
.spinner{width:30px;height:30px;border:3px solid var(--surface2);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{font-size:13px;color:var(--muted)}
#errBanner{display:none;background:rgba(255,92,92,.14);border-bottom:1px solid rgba(255,92,92,.3);padding:8px 14px;font-size:11.5px;color:var(--danger);flex-shrink:0;line-height:1.4}

.modal{position:fixed;inset:0;z-index:800;background:var(--bg);display:none;flex-direction:column;padding-top:var(--safe-t)}
.modal.open{display:flex}
.mhead{padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;gap:12px}
.mhead h2{font-family:var(--fb);font-size:17px;font-weight:700}
.mhead p{font-size:11.5px;color:var(--muted);margin-top:2px}
.close-x{width:40px;height:40px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:20px;line-height:1;cursor:pointer;flex-shrink:0;font-family:var(--fb)}
.mbody{padding:16px;display:flex;flex-direction:column;gap:13px;overflow-y:auto;flex:1;padding-bottom:calc(var(--safe-b) + 24px)}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:11px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.field input,.field select,.field textarea{padding:11px 13px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:16px;font-family:var(--fb);outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field select option{background:var(--surface2);color:var(--text)}
.photo-field{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
.photo-field:first-of-type{border-color:rgba(0,195,123,.3)}
.photo-field:last-of-type{border-color:rgba(91,155,255,.3)}
.photo-field label{font-size:12.5px;color:var(--text);font-weight:500}
.photo-field input[type=file]{font-size:12px;color:var(--muted)}
.field textarea{resize:vertical;min-height:64px}
.conn-row{display:flex;gap:7px;align-items:center}
.conn-row input{max-width:86px}
.conn-row select{flex:1}
.add-conn-btn{padding:9px;border-radius:8px;border:1px dashed var(--border);background:transparent;color:var(--muted);font-size:12.5px;cursor:pointer;font-family:var(--fb)}
.remove-conn{background:none;border:none;color:var(--danger);font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
.big-btn{padding:14px;border-radius:10px;background:var(--accent);border:none;color:var(--bg);font-size:15px;font-weight:700;font-family:var(--fb);cursor:pointer;width:100%}
.big-btn:disabled{opacity:.5}
.ghost-btn{padding:12px;border-radius:10px;background:transparent;border:1px solid var(--border);color:var(--muted);font-size:13.5px;font-family:var(--fb);cursor:pointer;width:100%}
.notice{font-size:11.5px;color:var(--muted);background:rgba(0,195,123,.08);border:1px solid rgba(0,195,123,.2);padding:10px 12px;border-radius:8px;line-height:1.55}
.notice.orange{background:rgba(255,138,43,.09);border-color:rgba(255,138,43,.28);color:#C9A176}
.coords-display{font-size:12.5px;color:var(--accent);font-weight:500;min-height:18px}
.coord-row{display:flex;gap:7px}
.coord-row input{flex:1;min-width:0}
.coord-row select{flex:0 0 auto;min-width:120px}
.pick-btn{padding:11px;border-radius:9px;background:var(--surface2);border:1px solid var(--accent);color:var(--accent);font-size:13px;font-family:var(--fb);cursor:pointer;width:100%}
.veh-grid{display:flex;flex-wrap:wrap;gap:7px}
.veh{padding:9px 13px;border-radius:9px;border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-size:13px;font-family:var(--fb);cursor:pointer}
.veh.on{background:rgba(0,195,123,.16);border-color:var(--accent);color:var(--accent)}

/* toestemming */
.consent{display:flex;gap:11px;align-items:flex-start;padding:12px;border-radius:9px;background:var(--surface2);border:1px solid var(--border);cursor:pointer}
.consent input{width:21px;height:21px;accent-color:var(--accent);flex-shrink:0;margin-top:1px}
.consent span{font-size:12.5px;line-height:1.5;color:var(--text)}
.consent small{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.45}

/* foto-editor */
.photo-stage{position:relative;background:#000;border-radius:10px;overflow:hidden;border:1px solid var(--border)}
#editCanvas{width:100%;display:block;touch-action:none;cursor:crosshair}
.editor-tools{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap}
.tool{flex:1;min-width:96px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:12.5px;font-family:var(--fb);cursor:pointer}
.tool.on{background:rgba(0,195,123,.16);border-color:var(--accent);color:var(--accent)}
.photo-hint{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.5}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:2000;display:none;flex-direction:column;padding-top:var(--safe-t)}
.lightbox.open{display:flex}
.lb-head{padding:12px 16px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.lb-head span{font-size:12.5px;color:var(--muted);flex:1;line-height:1.4}
.lb-img{flex:1;display:flex;align-items:center;justify-content:center;padding:12px;overflow:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch}
.lb-img img{max-width:100%;max-height:100%;border-radius:8px}

/* ranglijst */
.board-me{background:linear-gradient(135deg,rgba(0,195,123,.18),rgba(0,195,123,.06));border:1px solid rgba(0,195,123,.35);border-radius:12px;padding:15px 17px;margin-bottom:14px}
.board-me .pos{font-family:var(--fh);font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.board-me .rank{font-size:12.5px;color:var(--accent);font-weight:500;margin-top:2px}
.board-me .stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:11.5px;color:var(--muted)}
.board-me .stats b{color:var(--text);font-family:var(--fh);font-size:14px;display:block}
.brow{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:9px;background:var(--surface2);margin-bottom:6px;border:1px solid var(--border)}
.brow.top1{border-color:rgba(255,196,0,.45);background:rgba(255,196,0,.08)}
.brow.top2{border-color:rgba(190,196,210,.35)}
.brow.top3{border-color:rgba(205,127,50,.4)}
.bpos{font-family:var(--fh);font-size:15px;font-weight:800;width:30px;text-align:center;color:var(--muted);flex-shrink:0}
.brow.top1 .bpos{color:#FFC400}.brow.top2 .bpos{color:#BEC4D2}.brow.top3 .bpos{color:#CD7F32}
.bname{flex:1;font-size:13.5px;font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bname small{display:block;font-size:10.5px;color:var(--muted);font-weight:400}
.bpts{font-family:var(--fh);font-size:14px;font-weight:700;color:var(--accent);flex-shrink:0}
.pts-table{width:100%;font-size:12.5px;margin-top:6px}
.pts-table td{padding:6px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.pts-table td:last-child{text-align:right;color:var(--accent);font-family:var(--fh);font-weight:700}
.pick-banner{display:none;position:absolute;left:calc(12px + var(--safe-l));right:calc(12px + var(--safe-r));top:calc(12px + var(--safe-t));z-index:470;background:rgba(0,195,123,.95);color:var(--bg);padding:11px 14px;border-radius:11px;font-size:13px;font-weight:500;text-align:center}
.pick-banner.on{display:block}

/* "Nu actief"-teller: bewust klein en onopvallend linksonder op de kaart — een leuk
   weetje, geen belangrijke functie, dus mag nooit in de weg zitten of de aandacht
   trekken van de kaart of knoppen zelf. */
.presence-badge{position:absolute;left:calc(12px + var(--safe-l));bottom:calc(var(--peek) + 14px);z-index:440;background:rgba(22,26,34,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--muted);font-size:10.5px;padding:5px 10px;border-radius:20px;border:1px solid var(--border);pointer-events:none;transition:bottom .28s cubic-bezier(.4,0,.2,1)}

.leaflet-popup-content-wrapper{background:var(--surface2) !important;border:1px solid var(--border) !important;border-radius:12px !important;color:var(--text) !important;font-family:'DM Sans',sans-serif !important}
.leaflet-popup-content{margin:12px 14px !important;font-size:13px !important}
.leaflet-popup-tip{background:var(--surface2) !important}
.leaflet-popup-close-button{color:var(--muted) !important;font-size:20px !important;padding:6px 8px 0 0 !important}
.popup-name{font-family:'Syne',sans-serif;font-size:14px;font-weight:700;margin-bottom:4px;padding-right:14px}
.popup-op{font-size:11px;color:#4A9EFF;margin-bottom:5px}
.popup-addr{font-size:12px;color:var(--muted);margin-bottom:8px;line-height:1.45}
.popup-row{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.popup-body{cursor:pointer}
.popup-op{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);margin-bottom:6px}
.popup-amenities{display:flex;gap:6px;font-size:14px;margin-bottom:2px;opacity:.9}
.nav-link{display:block;margin-top:6px;font-size:12px;color:var(--bg);background:#00C37B;text-decoration:none;padding:9px;border-radius:7px;text-align:center;font-weight:500}
.op-link{display:block;margin-top:6px;font-size:12px;color:#4A9EFF;background:rgba(74,158,255,.12);border:1px solid rgba(74,158,255,.3);text-decoration:none;padding:9px;border-radius:7px;text-align:center}

.toast{position:fixed;bottom:calc(var(--safe-b) + 90px);left:50%;transform:translateX(-50%) translateY(70px);opacity:0;visibility:hidden;background:var(--surface2);border:1px solid var(--accent);color:var(--accent);padding:11px 20px;border-radius:9px;font-size:13px;z-index:9999;transition:transform .3s,opacity .3s,visibility .3s;pointer-events:none;max-width:88vw;text-align:center;line-height:1.4}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.empty{padding:36px 20px;text-align:center;font-size:13px;color:var(--muted);display:none;line-height:1.6}

@media(min-width:820px) and (pointer:fine){
  .map-area{display:flex}
  .sheet{position:relative;height:auto;width:355px;flex-shrink:0;border-top:none;border-right:1px solid var(--border);border-radius:0;transform:none !important;box-shadow:none;order:-1;touch-action:auto}
  .sheet-grab{display:none}
  .sheet-hint{display:none !important}
  .sheet-swipe-icon{display:none}
  .cnt{display:inline-block !important}
  .sheet-head{cursor:default;padding:12px 16px}
  #map{flex:1;width:auto}
  .map-fabs{bottom:20px}
  .modal{position:absolute;left:auto;right:0;top:0;bottom:0;width:400px;border-left:1px solid var(--border);background:var(--surface)}
  .toast{bottom:28px}
  .leaflet-control-zoom{display:block}
  /* De badge stond op dezelfde plek als het zijpaneel (dat een eigen ondoorzichtige
     achtergrond heeft en er bovenop ligt) — daardoor was hij onzichtbaar op desktop.
     Hier verschuiven naar net voorbij de vaste breedte van het zijpaneel (355px + 12px
     marge), zodat hij op de kaart zelf te zien is. */
  .presence-badge{left:367px;bottom:20px}
}

/* ── SEO / info-blok onderin de lijst (statisch, crawl-baar) ───── */
.seo-block{border-top:1px solid var(--border);padding:22px 18px calc(var(--safe-b) + 26px);color:var(--muted);font-size:13px;line-height:1.6;background:var(--surface)}
.seo-block h1{font-family:var(--fh);font-size:19px;font-weight:800;color:var(--text);line-height:1.35;margin:0 0 10px}
.seo-block h2{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--text);line-height:1.3;margin:20px 0 7px}
.seo-block h3{font-family:var(--fh);font-size:13.5px;font-weight:700;color:var(--accent);line-height:1.3;margin:14px 0 5px}
.seo-block p{margin:0 0 10px}
.seo-block ul{margin:0 0 10px 18px}
.seo-block li{margin-bottom:5px}
.seo-block strong{color:var(--text)}
.seo-block a{color:var(--accent)}

/* Nette verticale uitlijning voor de eigen SVG-iconen (i.p.v. emoji) in badges,
   chips, tags en voorzieningen-lijstjes — zonder dit hangen ze standaard net iets
   te hoog t.o.v. de tekst ernaast. */
.veh svg,.vtag svg,.smeta svg,.popup-amenities svg,.chip svg,.notice svg{vertical-align:-2px}

/* ───────── SECTIE 3: was features.css (topbanner, trophy-podium) ───────── */

/* Extra styles voor nieuwe features */
  #topBanner{background:var(--surface);border-bottom:1px solid var(--border);padding:6px 14px;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;scrollbar-width:none;flex-shrink:0;cursor:pointer}
  #topBanner::-webkit-scrollbar{display:none}
  .top-item{font-size:11px;color:var(--muted);background:var(--surface2);padding:3px 10px;border-radius:12px;border:1px solid var(--border)}
  .top-item strong{color:var(--accent);font-family:var(--fh)}
  .radius-control{display:flex;align-items:center;gap:5px;font-size:10.5px;color:var(--muted)}
  .radius-control input[type=range]{width:70px;height:16px;accent-color:var(--accent);margin:0}
  .chip .kw-sub{display:block;font-size:9px;opacity:.7;font-weight:400;line-height:1;margin-top:1px}
  @media(hover:hover){.chip[data-tip]:hover::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#0D0F14;border:1px solid var(--border);color:var(--text);font-size:11px;padding:7px 11px;border-radius:8px;white-space:nowrap;z-index:700;box-shadow:0 4px 14px rgba(0,0,0,.5);pointer-events:none;font-weight:400}}
  .chip{position:relative}
  
  /* Trophy Modal Styles */
  .trophy-intro{text-align:center;padding:6px 0 18px}
  .trophy-intro h2{font-family:var(--fh);font-size:22px;font-weight:800;margin-bottom:4px}
  .trophy-intro p{font-size:12.5px;color:var(--muted);line-height:1.5}
  .podium{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:18px 0 26px}
  .pod{flex:1;max-width:120px;background:var(--surface2);border:1px solid var(--border);border-radius:12px 12px 0 0;padding:14px 8px 12px;text-align:center;position:relative;overflow:hidden}
/* ═══ BUGFIX ═══ '.av' had ALLEEN styling binnen '.pod .av'/'.rest .av' (scoped voor de
   Trophy-pagina) — buiten die context (bijv. in het gebruikersprofiel) had de klasse dus
   NUL opgemaakte breedte/hoogte/ronding. Bij een gebruiker met een eigen avatarfoto rendert
   die dan op volledige, ongecomprimeerde fotogrootte, die door 'overflow:hidden' van de
   omliggende container hardhandig werd afgekapt — vandaar dat er niets herkenbaars te zien was.
   Deze basisstijl geldt nu overal; de scoped regels hierboven overschrijven 'm nog steeds waar
   nodig (hogere CSS-specificiteit), dus de Trophy-pagina blijft ongewijzigd. */
.av{display:inline-flex;width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--surface2);border:2px solid var(--border);align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--muted);flex-shrink:0}
  .pod .av{width:54px;height:54px;border-radius:50%;object-fit:cover;background:var(--bg);border:2px solid var(--border);margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--muted)}
  .pod .nm{font-family:var(--fh);font-size:13px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pod .rk{font-size:10.5px;color:var(--muted);margin-top:2px}
  .pod .pts{font-family:var(--fh);font-size:15px;font-weight:800;color:var(--accent);margin-top:6px}
  .pod .badges{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:6px}
  .badge-chip{font-size:9px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:2px 6px;white-space:nowrap}
  .pod.p1{order:2;border-color:rgba(255,196,0,.5);min-height:170px;background:linear-gradient(180deg,rgba(255,196,0,.12),var(--surface2))}
  .pod.p2{order:1;border-color:rgba(190,196,210,.4);min-height:140px}
  .pod.p3{order:3;border-color:rgba(205,127,50,.4);min-height:120px}
  .pod.p1 .av{border-color:#FFC400;width:64px;height:64px;font-size:24px}
  .rest-list{display:flex;flex-direction:column;gap:7px}
  .rest{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--border)}
  .rest .pos{font-family:var(--fh);font-size:14px;font-weight:800;color:var(--muted);width:26px;text-align:center;flex-shrink:0}
  .rest .av{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--muted);flex-shrink:0}
  .rest .info{flex:1;min-width:0}
  .rest .nm{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rest .meta{font-size:10.5px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rest .pts{font-family:var(--fh);font-size:13px;font-weight:700;color:var(--accent);flex-shrink:0}
  .me-bar{background:linear-gradient(135deg,rgba(0,195,123,.18),rgba(0,195,123,.06));border:1px solid rgba(0,195,123,.35);border-radius:11px;padding:12px 14px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
  .me-bar .pos{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--accent)}
  .me-bar .txt{font-size:12px;color:var(--muted);line-height:1.4}
  .me-bar .txt b{color:var(--text)}
  @keyframes pop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
  .pod{animation:pop .5s cubic-bezier(.2,.8,.3,1) both}
  .pod.p2{animation-delay:.08s}.pod.p1{animation-delay:.16s}.pod.p3{animation-delay:.24s}
  .upload-preview{width:100px;height:100px;border-radius:8px;object-fit:cover;border:1px solid var(--border);margin-top:8px;display:none}

/* ───────── SECTIE 4: was https://unpkg.com/leaflet@1.9.4/dist/leaflet.css ───────── */

/* required styles */

.leaflet-pane,
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-tile-container,
.leaflet-pane > svg,
.leaflet-pane > canvas,
.leaflet-zoom-box,
.leaflet-image-layer,
.leaflet-layer {
	position: absolute;
	left: 0;
	top: 0;
	}
.leaflet-container {
	overflow: hidden;
	}
.leaflet-tile,
.leaflet-marker-icon,
.leaflet-marker-shadow {
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
	  -webkit-user-drag: none;
	}
/* Prevents IE11 from highlighting tiles in blue */
.leaflet-tile::selection {
	background: transparent;
}
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
.leaflet-safari .leaflet-tile {
	image-rendering: -webkit-optimize-contrast;
	}
/* hack that prevents hw layers "stretching" when loading new tiles */
.leaflet-safari .leaflet-tile-container {
	width: 1600px;
	height: 1600px;
	-webkit-transform-origin: 0 0;
	}
.leaflet-marker-icon,
.leaflet-marker-shadow {
	display: block;
	}
/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
.leaflet-container .leaflet-overlay-pane svg {
	max-width: none !important;
	max-height: none !important;
	}
.leaflet-container .leaflet-marker-pane img,
.leaflet-container .leaflet-shadow-pane img,
.leaflet-container .leaflet-tile-pane img,
.leaflet-container img.leaflet-image-layer,
.leaflet-container .leaflet-tile {
	max-width: none !important;
	max-height: none !important;
	width: auto;
	padding: 0;
	}

.leaflet-container img.leaflet-tile {
	/* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */
	mix-blend-mode: plus-lighter;
}

.leaflet-container.leaflet-touch-zoom {
	-ms-touch-action: pan-x pan-y;
	touch-action: pan-x pan-y;
	}
.leaflet-container.leaflet-touch-drag {
	-ms-touch-action: pinch-zoom;
	/* Fallback for FF which doesn't support pinch-zoom */
	touch-action: none;
	touch-action: pinch-zoom;
}
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
	-ms-touch-action: none;
	touch-action: none;
}
.leaflet-container {
	-webkit-tap-highlight-color: transparent;
}
.leaflet-container a {
	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
}
.leaflet-tile {
	filter: inherit;
	visibility: hidden;
	}
.leaflet-tile-loaded {
	visibility: inherit;
	}
.leaflet-zoom-box {
	width: 0;
	height: 0;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	z-index: 800;
	}
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
.leaflet-overlay-pane svg {
	-moz-user-select: none;
	}

.leaflet-pane         { z-index: 400; }

.leaflet-tile-pane    { z-index: 200; }
.leaflet-overlay-pane { z-index: 400; }
.leaflet-shadow-pane  { z-index: 500; }
.leaflet-marker-pane  { z-index: 600; }
.leaflet-tooltip-pane   { z-index: 650; }
.leaflet-popup-pane   { z-index: 700; }

.leaflet-map-pane canvas { z-index: 100; }
.leaflet-map-pane svg    { z-index: 200; }

.leaflet-vml-shape {
	width: 1px;
	height: 1px;
	}
.lvml {
	behavior: url(#default#VML);
	display: inline-block;
	position: absolute;
	}


/* control positioning */

.leaflet-control {
	position: relative;
	z-index: 800;
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}
.leaflet-top,
.leaflet-bottom {
	position: absolute;
	z-index: 1000;
	pointer-events: none;
	}
.leaflet-top {
	top: 0;
	}
.leaflet-right {
	right: 0;
	}
.leaflet-bottom {
	bottom: 0;
	}
.leaflet-left {
	left: 0;
	}
.leaflet-control {
	float: left;
	clear: both;
	}
.leaflet-right .leaflet-control {
	float: right;
	}
.leaflet-top .leaflet-control {
	margin-top: 10px;
	}
.leaflet-bottom .leaflet-control {
	margin-bottom: 10px;
	}
.leaflet-left .leaflet-control {
	margin-left: 10px;
	}
.leaflet-right .leaflet-control {
	margin-right: 10px;
	}


/* zoom and fade animations */

.leaflet-fade-anim .leaflet-popup {
	opacity: 0;
	-webkit-transition: opacity 0.2s linear;
	   -moz-transition: opacity 0.2s linear;
	        transition: opacity 0.2s linear;
	}
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
	opacity: 1;
	}
.leaflet-zoom-animated {
	-webkit-transform-origin: 0 0;
	    -ms-transform-origin: 0 0;
	        transform-origin: 0 0;
	}
svg.leaflet-zoom-animated {
	will-change: transform;
}

.leaflet-zoom-anim .leaflet-zoom-animated {
	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
	}
.leaflet-zoom-anim .leaflet-tile,
.leaflet-pan-anim .leaflet-tile {
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	}

.leaflet-zoom-anim .leaflet-zoom-hide {
	visibility: hidden;
	}


/* cursors */

.leaflet-interactive {
	cursor: pointer;
	}
.leaflet-grab {
	cursor: -webkit-grab;
	cursor:    -moz-grab;
	cursor:         grab;
	}
.leaflet-crosshair,
.leaflet-crosshair .leaflet-interactive {
	cursor: crosshair;
	}
.leaflet-popup-pane,
.leaflet-control {
	cursor: auto;
	}
.leaflet-dragging .leaflet-grab,
.leaflet-dragging .leaflet-grab .leaflet-interactive,
.leaflet-dragging .leaflet-marker-draggable {
	cursor: move;
	cursor: -webkit-grabbing;
	cursor:    -moz-grabbing;
	cursor:         grabbing;
	}

/* marker & overlays interactivity */
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-image-layer,
.leaflet-pane > svg path,
.leaflet-tile-container {
	pointer-events: none;
	}

.leaflet-marker-icon.leaflet-interactive,
.leaflet-image-layer.leaflet-interactive,
.leaflet-pane > svg path.leaflet-interactive,
svg.leaflet-image-layer.leaflet-interactive path {
	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
	pointer-events: auto;
	}

/* visual tweaks */

.leaflet-container {
	background: #ddd;
	outline-offset: 1px;
	}
.leaflet-container a {
	color: #0078A8;
	}
.leaflet-zoom-box {
	border: 2px dotted #38f;
	background: rgba(255,255,255,0.5);
	}


/* general typography */
.leaflet-container {
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-size: 0.75rem;
	line-height: 1.5;
	}


/* general toolbar styles */

.leaflet-bar {
	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
	border-radius: 4px;
	}
.leaflet-bar a {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	width: 26px;
	height: 26px;
	line-height: 26px;
	display: block;
	text-align: center;
	text-decoration: none;
	color: black;
	}
.leaflet-bar a,
.leaflet-control-layers-toggle {
	background-position: 50% 50%;
	background-repeat: no-repeat;
	display: block;
	}
.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: #f4f4f4;
	}
.leaflet-bar a:first-child {
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	}
.leaflet-bar a:last-child {
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom: none;
	}
.leaflet-bar a.leaflet-disabled {
	cursor: default;
	background-color: #f4f4f4;
	color: #bbb;
	}

.leaflet-touch .leaflet-bar a {
	width: 30px;
	height: 30px;
	line-height: 30px;
	}
.leaflet-touch .leaflet-bar a:first-child {
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	}
.leaflet-touch .leaflet-bar a:last-child {
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	}

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
	font: bold 18px 'Lucida Console', Monaco, monospace;
	text-indent: 1px;
	}

.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
	font-size: 22px;
	}


/* layers control */

.leaflet-control-layers {
	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
	background: #fff;
	border-radius: 5px;
	}
.leaflet-control-layers-toggle {
	background-image: url(https://unpkg.com/leaflet@1.9.4/dist/images/layers.png);
	width: 36px;
	height: 36px;
	}
.leaflet-retina .leaflet-control-layers-toggle {
	background-image: url(https://unpkg.com/leaflet@1.9.4/dist/images/layers-2x.png);
	background-size: 26px 26px;
	}
.leaflet-touch .leaflet-control-layers-toggle {
	width: 44px;
	height: 44px;
	}
.leaflet-control-layers .leaflet-control-layers-list,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
	display: none;
	}
.leaflet-control-layers-expanded .leaflet-control-layers-list {
	display: block;
	position: relative;
	}
.leaflet-control-layers-expanded {
	padding: 6px 10px 6px 6px;
	color: #333;
	background: #fff;
	}
.leaflet-control-layers-scrollbar {
	overflow-y: scroll;
	overflow-x: hidden;
	padding-right: 5px;
	}
.leaflet-control-layers-selector {
	margin-top: 2px;
	position: relative;
	top: 1px;
	}
.leaflet-control-layers label {
	display: block;
	font-size: 13px;
	font-size: 1.08333em;
	}
.leaflet-control-layers-separator {
	height: 0;
	border-top: 1px solid #ddd;
	margin: 5px -10px 5px -6px;
	}

/* Default icon URLs */
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
	background-image: url(https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png);
	}


/* attribution and scale controls */

.leaflet-container .leaflet-control-attribution {
	background: #fff;
	background: rgba(255, 255, 255, 0.8);
	margin: 0;
	}
.leaflet-control-attribution,
.leaflet-control-scale-line {
	padding: 0 5px;
	color: #333;
	line-height: 1.4;
	}
.leaflet-control-attribution a {
	text-decoration: none;
	}
.leaflet-control-attribution a:hover,
.leaflet-control-attribution a:focus {
	text-decoration: underline;
	}
.leaflet-attribution-flag {
	display: inline !important;
	vertical-align: baseline !important;
	width: 1em;
	height: 0.6669em;
	}
.leaflet-left .leaflet-control-scale {
	margin-left: 5px;
	}
.leaflet-bottom .leaflet-control-scale {
	margin-bottom: 5px;
	}
.leaflet-control-scale-line {
	border: 2px solid #777;
	border-top: none;
	line-height: 1.1;
	padding: 2px 5px 1px;
	white-space: nowrap;
	-moz-box-sizing: border-box;
	     box-sizing: border-box;
	background: rgba(255, 255, 255, 0.8);
	text-shadow: 1px 1px #fff;
	}
.leaflet-control-scale-line:not(:first-child) {
	border-top: 2px solid #777;
	border-bottom: none;
	margin-top: -2px;
	}
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
	border-bottom: 2px solid #777;
	}

.leaflet-touch .leaflet-control-attribution,
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	box-shadow: none;
	}
.leaflet-touch .leaflet-control-layers,
.leaflet-touch .leaflet-bar {
	border: 2px solid rgba(0,0,0,0.2);
	background-clip: padding-box;
	}


/* popup */

.leaflet-popup {
	position: absolute;
	text-align: center;
	margin-bottom: 20px;
	}
.leaflet-popup-content-wrapper {
	padding: 1px;
	text-align: left;
	border-radius: 12px;
	}
.leaflet-popup-content {
	margin: 13px 24px 13px 20px;
	line-height: 1.3;
	font-size: 13px;
	font-size: 1.08333em;
	min-height: 1px;
	}
.leaflet-popup-content p {
	margin: 17px 0;
	margin: 1.3em 0;
	}
.leaflet-popup-tip-container {
	width: 40px;
	height: 20px;
	position: absolute;
	left: 50%;
	margin-top: -1px;
	margin-left: -20px;
	overflow: hidden;
	pointer-events: none;
	}
.leaflet-popup-tip {
	width: 17px;
	height: 17px;
	padding: 1px;

	margin: -10px auto 0;
	pointer-events: auto;

	-webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
	}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	background: white;
	color: #333;
	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
	}
.leaflet-container a.leaflet-popup-close-button {
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	text-align: center;
	width: 24px;
	height: 24px;
	font: 16px/24px Tahoma, Verdana, sans-serif;
	color: #757575;
	text-decoration: none;
	background: transparent;
	}
.leaflet-container a.leaflet-popup-close-button:hover,
.leaflet-container a.leaflet-popup-close-button:focus {
	color: #585858;
	}
.leaflet-popup-scrolled {
	overflow: auto;
	}

.leaflet-oldie .leaflet-popup-content-wrapper {
	-ms-zoom: 1;
	}
.leaflet-oldie .leaflet-popup-tip {
	width: 24px;
	margin: 0 auto;

	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
	}

.leaflet-oldie .leaflet-control-zoom,
.leaflet-oldie .leaflet-control-layers,
.leaflet-oldie .leaflet-popup-content-wrapper,
.leaflet-oldie .leaflet-popup-tip {
	border: 1px solid #999;
	}


/* div icon */

.leaflet-div-icon {
	background: #fff;
	border: 1px solid #666;
	}


/* Tooltip */
/* Base styles for the element that has a tooltip */
.leaflet-tooltip {
	position: absolute;
	padding: 6px;
	background-color: #fff;
	border: 1px solid #fff;
	border-radius: 3px;
	color: #222;
	white-space: nowrap;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
	}
.leaflet-tooltip.leaflet-interactive {
	cursor: pointer;
	pointer-events: auto;
	}
.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	position: absolute;
	pointer-events: none;
	border: 6px solid transparent;
	background: transparent;
	content: "";
	}

/* Directions */

.leaflet-tooltip-bottom {
	margin-top: 6px;
}
.leaflet-tooltip-top {
	margin-top: -6px;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-top:before {
	left: 50%;
	margin-left: -6px;
	}
.leaflet-tooltip-top:before {
	bottom: 0;
	margin-bottom: -12px;
	border-top-color: #fff;
	}
.leaflet-tooltip-bottom:before {
	top: 0;
	margin-top: -12px;
	margin-left: -6px;
	border-bottom-color: #fff;
	}
.leaflet-tooltip-left {
	margin-left: -6px;
}
.leaflet-tooltip-right {
	margin-left: 6px;
}
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
	top: 50%;
	margin-top: -6px;
	}
.leaflet-tooltip-left:before {
	right: 0;
	margin-right: -12px;
	border-left-color: #fff;
	}
.leaflet-tooltip-right:before {
	left: 0;
	margin-left: -12px;
	border-right-color: #fff;
	}

/* Printing */

@media print {
	/* Prevent printers from removing background-images of controls. */
	.leaflet-control {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		}
	}

/* ───────── SECTIE 5: was https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css ───────── */

.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

.leaflet-cluster-spider-leg {
	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}

/* ───────── SECTIE 6: was https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css ───────── */

.marker-cluster-small {
	background-color: rgba(181, 226, 140, 0.6);
	}
.marker-cluster-small div {
	background-color: rgba(110, 204, 57, 0.6);
	}

.marker-cluster-medium {
	background-color: rgba(241, 211, 87, 0.6);
	}
.marker-cluster-medium div {
	background-color: rgba(240, 194, 12, 0.6);
	}

.marker-cluster-large {
	background-color: rgba(253, 156, 115, 0.6);
	}
.marker-cluster-large div {
	background-color: rgba(241, 128, 23, 0.6);
	}

	/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
	background-color: rgb(181, 226, 140);
	}
.leaflet-oldie .marker-cluster-small div {
	background-color: rgb(110, 204, 57);
	}

.leaflet-oldie .marker-cluster-medium {
	background-color: rgb(241, 211, 87);
	}
.leaflet-oldie .marker-cluster-medium div {
	background-color: rgb(240, 194, 12);
	}

.leaflet-oldie .marker-cluster-large {
	background-color: rgb(253, 156, 115);
	}
.leaflet-oldie .marker-cluster-large div {
	background-color: rgb(241, 128, 23);
}

.marker-cluster {
	background-clip: padding-box;
	border-radius: 20px;
	}
.marker-cluster div {
	width: 30px;
	height: 30px;
	margin-left: 5px;
	margin-top: 5px;

	text-align: center;
	border-radius: 15px;
	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
	}
.marker-cluster span {
	line-height: 30px;
	}