:root{
  --paper:#FAF8F5;--ink:#1A1A1A;--muted:#8A8680;--line:#ECE8E1;
  --accent:#0E9F9F;--accentSoft:#DCEFED;--accentFaint:#F0F7F6;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;background:#000;}
#map{position:fixed;inset:0;}
.maplibregl-ctrl-attrib{font-size:9px;}

.header{position:fixed;top:0;left:0;right:0;z-index:20;
  padding:max(env(safe-area-inset-top),14px) 16px 34px;
  background:linear-gradient(var(--paper) 55%,rgba(250,248,245,0));pointer-events:none;}
.header>*{pointer-events:auto;}
/* Drie zones: logo links, menu gecentreerd, avatar rechts. */
.brand{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;max-width:520px;margin:0 auto;}
.brand .logo{justify-self:start;}
.brand .menuknop{justify-self:center;}
.brand .avatarknop{justify-self:end;}
.avatarknop{width:38px;height:38px;border:none;padding:0;border-radius:50%;cursor:pointer;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;}
/* Anoniem persoon-icoontje: geometrisch gecentreerd, i.p.v. een scheve ☺-glyph. */
.avsvg{display:block;}
.avatarknop .avsvg{width:21px;height:21px;}
.accavatar .avsvg{width:30px;height:30px;}
.logo{display:flex;align-items:center;}
/* Inline SVG-logo (niet als los bestand, zodat het niet van de docroot-symlink afhangt).
   CSS overschrijft de width/height=100% attributen; viewBox houdt de verhouding. */
.logo svg{height:28px;width:auto;display:block;}
/* Voet: spiegelbeeld van de fade in de header. Draagt geen tekst meer — alleen een
   zachte overgang naar papier, zodat de zwevende knoppen leesbaar blijven boven de kaart. */
.voet{position:fixed;left:0;right:0;bottom:0;height:96px;z-index:5;pointer-events:none;
  background:linear-gradient(rgba(250,248,245,0),var(--paper) 72%);}
/* Discrete voetnoot onderaan-centraal. Smal genoeg om de NOOD/GPS-knoppen rechtsonder vrij
   te laten; de fade eronder vangt geen kliks, enkel de Nonius-link is klikbaar. */
.voetnav{position:fixed;left:50%;bottom:max(env(safe-area-inset-bottom),7px);transform:translateX(-50%);
  z-index:6;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;
  max-width:min(62vw,300px);text-align:center;}
.voetnav .vdis{font-size:10.5px;line-height:1.25;color:var(--muted);}
.voetnav .vmeta{display:flex;align-items:center;gap:8px;}
.voetnav .vpow{pointer-events:auto;font-size:11.5px;font-weight:600;color:var(--muted);text-decoration:none;}
.voetnav .vpow b{color:var(--accent);font-weight:700;}
.voetnav .vpow:active{opacity:.7;}
/* Versielabel: subtiel, met een klein beta-accent. */
.voetnav .vver{font-size:10px;font-weight:600;color:var(--muted);opacity:.85;
  border:1px solid var(--line);border-radius:999px;padding:1px 7px;white-space:nowrap;}
/* Zoom, locatie en NOOD staan op één verticale as rechtsonder. NOOD is 74 breed op
   right:18, dus zijn hart ligt 55px van de rechterrand; de andere twee krijgen een
   right-waarde die hun hart op diezelfde 55px zet. Zo lijnen ze echt uit in plaats van
   toevallig bijna. Zoomknoppen staan net boven de locatieknop, boven de fade. */
.maplibregl-ctrl-bottom-right{z-index:6;margin:0 40px 164px 0;}
/* MapLibre geeft de groep zelf ook 10px marge; die telde erbij op en zette het hart
   10px naast dat van de andere twee. */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl{margin:0;}
/* Zelfde familie als de locatieknop ernaast: wit vlak, aqua randje, aqua icoon. */
/* Zelfde gloed als de andere twee, nog een tik zachter — dit is de minst belangrijke
   van de drie knoppen. NOOD .45 → locatie .32 → zoom .22. */
.maplibregl-ctrl-bottom-right .maplibregl-ctrl.maplibregl-ctrl-group{
  box-shadow:0 5px 14px rgba(14,159,159,.22);
  border:1px solid var(--accent);border-radius:10px;overflow:hidden;background:#fff;}
.maplibregl-ctrl-group button + button{border-top:1px solid var(--accentSoft);}
/* De icoontjes zijn achtergrond-SVG's in donkergrijs (#333). MapLibre zet ze met
   `.maplibregl-ctrl button.…`, dus die selector moeten we evenaren om te winnen. */
.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%230E9F9F' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");}
.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%230E9F9F' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");}

/* Menuknop: drie streepjes, zelfde ronde vorm als de andere zwevende knoppen. */
.menuknop{width:38px;height:38px;border:none;background:var(--accentSoft);border-radius:50%;
  display:grid;place-content:center;gap:4px;cursor:pointer;padding:0;}
.menuknop span{display:block;width:16px;height:2px;border-radius:2px;background:var(--accent);}

/* Menu-rijen in het sheet: tikbaar blok met chevron, zoals in een app. */
.greep{width:38px;height:4px;border-radius:2px;background:var(--line);margin:2px auto 14px;}
.mrij{display:flex;align-items:center;gap:12px;padding:15px 4px;text-decoration:none;
  border-bottom:1px solid var(--line);}
.mrij:last-of-type{border-bottom:none;}
.mrij:active{background:var(--accentFaint);}
.mtxt{flex:1;}
.mtxt strong{display:block;font-size:16px;color:var(--ink);}
.mtxt span{display:block;font-size:13px;color:var(--muted);margin-top:2px;}
.mpijl{font-size:22px;color:var(--muted);line-height:1;}
/* Meta en bronvermelding: duidelijk ondergeschikt aan de twee hoofditems. */
.mmeta{display:flex;gap:18px;padding:16px 4px 0;border-top:1px solid var(--line);margin-top:6px;}
.mmeta a{font-size:13px;color:var(--muted);text-decoration:none;font-weight:600;}
.mmeta a:active{color:var(--accent);}
.mbron{padding:12px 4px 4px;font-size:11px;line-height:1.5;color:var(--muted);}
.mbron a{color:var(--muted);}

/* Account-sheet. */
.accavatar{flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:700;}
.acckop{display:flex;align-items:center;gap:14px;margin:4px 0 18px;}
.accavatar{width:52px;height:52px;font-size:21px;}
.acctitel{font-size:19px;font-weight:800;letter-spacing:-.02em;}
.accsub{font-size:13px;color:var(--muted);margin-top:2px;}
.acclabel{display:block;font-size:12.5px;font-weight:600;margin:6px 2px 6px;}
.acclos{font-weight:400;color:var(--muted);}
.accnaamrij{display:flex;gap:8px;}
.accinput{flex:1;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;-webkit-appearance:none;appearance:none;}
.accinput:focus{outline:none;border-color:var(--accentSoft);box-shadow:0 0 0 3px var(--accentFaint);}
.accmelding{font-size:12.5px;color:var(--muted);min-height:16px;margin-top:8px;}
.accmelding.ok{color:var(--accent);}
.acclijst{margin-top:4px;}
.accleeg{color:var(--muted);font-size:13.5px;padding:6px 2px;}
.accitem{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer;}
.accitem:last-child{border-bottom:none;}
.accitem:active{background:var(--accentFaint);}
.accitem .an{flex:1;font-size:14.5px;color:var(--ink);}
.accitem .as{font-size:13px;font-weight:700;color:var(--accent);}
.accitem .ax{border:none;background:none;color:var(--muted);font-size:20px;cursor:pointer;padding:0 4px;line-height:1;}
.accsync{margin-top:20px;background:var(--accentFaint);border:1px solid var(--accentSoft);
  border-radius:14px;padding:14px 16px;font-size:13px;line-height:1.5;}
.accsync strong{display:block;color:var(--ink);margin-bottom:2px;}
.accsync span{color:var(--muted);}
/* Eigen Google-inlogknop in ons teal met witte tekst — past in de UI en de tekst is
   gegarandeerd leesbaar. Het Google-G-logo staat op een wit chipje (merkrichtlijn). */
.gbtn{margin-top:14px;width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  border:none;background:var(--accent);color:#fff;font:inherit;font-weight:700;font-size:15px;
  padding:13px 16px;border-radius:12px;cursor:pointer;box-shadow:0 2px 10px rgba(14,159,159,.22);
  transition:transform .12s ease,filter .15s ease,opacity .15s ease;}
.gbtn:hover{filter:brightness(1.05);}
.gbtn:active{transform:scale(.98);}
.gbtn:disabled{opacity:.55;cursor:default;box-shadow:none;}
.gbtn .gg{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;flex:0 0 auto;}
.gbtn .gg svg{display:block;}
.accingelogd{background:var(--accentSoft);}
.accingelogd .btn.s{margin-top:12px;}

/* Hartje (bewaren) in het toiletdetail: een echte ronde knop in de app-stijl, groot genoeg
   om als UI-element te lezen. Leeg = teal contour op lichte vulling; bewaard = vol teal, wit hart. */
.hart{flex:0 0 auto;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--accentSoft);
  background:var(--accentFaint);color:var(--accent);font-size:23px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .12s ease,background .15s ease,color .15s ease,border-color .15s ease;}
.hart[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 2px 10px rgba(14,159,159,.28);}
.hart:active{transform:scale(1.12);}
.searchwrap{position:relative;max-width:520px;margin:10px auto 0;}
.search{display:block;width:100%;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 14px;font-size:14px;color:var(--ink);box-shadow:0 2px 10px rgba(26,26,26,.06);font-family:inherit;-webkit-appearance:none;appearance:none;}
.search::placeholder{color:var(--muted);}
.search:focus{outline:none;border-color:var(--accentSoft);box-shadow:0 0 0 3px var(--accentFaint),0 2px 10px rgba(26,26,26,.06);}
.search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
.qres{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:4px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 28px rgba(26,26,26,.16);max-height:min(46vh,320px);overflow-y:auto;}
.qres li{padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13.5px;line-height:1.35;}
.qres li:hover,.qres li[aria-selected="true"]{background:var(--accentFaint);}
.qres .qt{color:var(--ink);font-weight:600;}
.qres .qs{color:var(--muted);font-size:12px;}
/* Meldformulier (melden.js). Staat op hulp-, privacy- en voorwaardenpagina. */
.mf{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;margin:14px 0;}
.mf-t{font-weight:700;font-size:15.5px;margin-bottom:10px;}
.mf-l{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin:10px 0 5px;}
.mf-opt{font-weight:400;color:var(--muted);}
.mf-s,.mf-i,.mf-x{width:100%;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:10px 12px;-webkit-appearance:none;appearance:none;}
.mf-x{resize:vertical;min-height:92px;line-height:1.5;}
.mf-s:focus,.mf-i:focus,.mf-x:focus{outline:none;border-color:var(--accentSoft);
  box-shadow:0 0 0 3px var(--accentFaint);}
.mf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.mf-k{margin-top:14px;width:100%;border:none;background:var(--accent);color:#fff;font-weight:700;
  font-size:15px;font-family:inherit;border-radius:999px;padding:13px 20px;cursor:pointer;}
.mf-k:disabled{opacity:.6;cursor:default;}
.mf-m{margin-top:10px;font-size:13px;color:var(--muted);min-height:18px;}
.mf-m.fout{color:#B4342B;}
.mf-ok{background:var(--accentFaint);border:1px solid var(--accentSoft);border-radius:12px;
  padding:16px;font-size:14px;line-height:1.55;}
.mf-ok div{color:var(--muted);font-size:13px;margin-top:4px;}

/* Eerste-bezoekbalk. Staat in de header, in de normale flow onder de filters — daardoor
   kan hij per definitie de NOOD-knop niet bedekken, en is er geen positioneringstruc nodig. */
.eerste{max-width:520px;margin:10px auto 0;background:rgba(26,26,26,.94);color:#fff;
  border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center;
  box-shadow:0 6px 20px rgba(26,26,26,.22);}
.eerste[hidden]{display:none;}
.eerste .et{font-size:12px;line-height:1.45;flex:1;}
.eerste .et a{color:var(--accentSoft);}
.eknop{flex:0 0 auto;border:none;background:#fff;color:var(--ink);font-weight:700;font-size:12.5px;
  font-family:inherit;border-radius:999px;padding:8px 14px;cursor:pointer;}

/* Zoom-hint: zweeft midden op de kaart, maar vangt geen kliks zodat je gewoon kunt
   blijven pannen en zoomen. Alleen de knop zelf is aanklikbaar. */
.zoomhint{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:15;
  pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease;
  background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 10px 30px rgba(26,26,26,.16);padding:18px 20px;text-align:center;max-width:min(86vw,320px);}
.zoomhint.op{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1);}
.zoomhint .zt{font-weight:700;font-size:15.5px;color:var(--ink);}
.zoomhint .zs{color:var(--muted);font-size:13px;line-height:1.5;margin-top:4px;}
.zknop{pointer-events:auto;margin-top:12px;border:none;background:var(--accent);color:#fff;
  font-weight:700;font-size:14px;font-family:inherit;border-radius:999px;padding:10px 20px;cursor:pointer;}

.cleeg{color:var(--muted);font-size:13px;line-height:1.5;background:var(--accentFaint);border:1px solid var(--accentSoft);border-radius:12px;padding:12px 14px;}
.clink{background:none;border:none;padding:0;margin-left:4px;color:var(--accent);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer;}
.qres .qleeg{color:var(--muted);cursor:default;}
.qres .qleeg:hover{background:none;}
.chips{max-width:520px;margin:10px auto 0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff;}

.status{position:fixed;left:50%;top:calc(max(env(safe-area-inset-top),14px) + 138px);transform:translateX(-50%);z-index:15;background:rgba(26,26,26,.82);color:#fff;font-size:12px;padding:7px 13px;border-radius:999px;opacity:0;transition:opacity .4s;pointer-events:none;}

.pin{width:30px;height:30px;cursor:pointer;}
.pin .dot{width:30px;height:30px;border-radius:50% 50% 50% 2px;transform:rotate(45deg);background:var(--accent);border:2.5px solid #fff;display:grid;place-items:center;box-shadow:0 4px 10px rgba(14,159,159,.4);}
.pin.sponsored .dot{box-shadow:0 0 0 4px rgba(14,159,159,.22),0 4px 10px rgba(14,159,159,.45);}
.pin .dot span{transform:rotate(-45deg);color:#fff;font-size:13px;line-height:1;}

.nood{position:fixed;right:18px;bottom:max(env(safe-area-inset-bottom),24px);z-index:20;width:74px;height:74px;border-radius:50%;border:none;background:var(--accent);color:#fff;font-weight:800;font-size:15px;letter-spacing:.04em;box-shadow:0 12px 28px rgba(14,159,159,.45);cursor:pointer;}
/* right:32 in plaats van 18 — dan valt het hart van deze 46px-knop op dezelfde as
   als dat van de 74px NOOD-knop (55px van de rechterrand). */
.loc{position:fixed;right:32px;bottom:calc(max(env(safe-area-inset-bottom),24px) + 84px);z-index:20;width:46px;height:46px;border-radius:50%;border:1px solid var(--accent);background:#fff;color:var(--accent);font-size:20px;cursor:pointer;
  /* Aqua gloed, net als NOOD maar zachter: die is de hoofdknop, deze staat eronder. */
  box-shadow:0 6px 18px rgba(14,159,159,.32);}

.scrim{position:fixed;inset:0;z-index:30;background:rgba(26,26,26,.30);opacity:0;pointer-events:none;transition:opacity .25s;}
.scrim.show{opacity:1;pointer-events:auto;}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);border-radius:26px 26px 0 0;box-shadow:0 -10px 30px rgba(26,26,26,.12);transform:translateY(105%);transition:transform .32s cubic-bezier(.32,.9,.35,1);max-height:86%;overflow-y:auto;padding:10px 20px calc(max(env(safe-area-inset-bottom),20px) + 12px);}
.sheet.show{transform:translateY(0);}
.sheet .inner{max-width:520px;margin:0 auto;}
.grab{width:42px;height:5px;border-radius:3px;background:var(--line);margin:6px auto 14px;}
.rowsb{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.tname{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.tmeta{font-size:13px;color:var(--muted);margin-top:3px;}
.tmeta .open{color:var(--accent);font-weight:600;}
.scorenum{font-size:30px;font-weight:800;color:var(--accent);letter-spacing:-.03em;line-height:1;text-align:center;}
.stars{color:var(--accent);font-size:13px;letter-spacing:2px;text-align:center;}
.dirty{display:none;margin-top:12px;background:#FBF0DF;color:#B26B00;font-weight:600;font-size:12.5px;border-radius:10px;padding:8px 11px;}
.fresh{margin-top:14px;background:var(--accentFaint);border:1px solid var(--accentSoft);border-radius:12px;padding:10px 12px;font-size:12.5px;color:var(--ink);}
.fresh b{color:var(--accent);}
.deal{margin-top:12px;border:1.5px solid var(--accentSoft);background:#fff;border-radius:14px;padding:12px 14px;position:relative;}
.deal .tag{position:absolute;top:10px;right:12px;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;}
.deal .dt{font-size:14.5px;font-weight:700;color:var(--accent);padding-right:76px;}
.deal .ds{font-size:12.5px;color:var(--muted);margin-top:3px;}
.facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.fact{border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 11px;font-size:12.5px;font-weight:500;color:var(--ink);}
.sect{margin-top:20px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px;}
.cless{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.citem{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:13px;color:var(--ink);}
.d9{width:9px;height:9px;border-radius:50%;}
.btnrow{display:flex;gap:10px;margin-top:22px;}
.btn{flex:1;border-radius:14px;padding:14px;font-size:14.5px;font-weight:700;border:none;text-align:center;cursor:pointer;}
.btn.p{background:var(--accent);color:#fff;}
.btn.s{background:#fff;color:var(--ink);border:1.5px solid var(--line);}
.linkbtn{display:block;width:100%;margin-top:14px;background:none;border:none;color:var(--muted);font-size:13.5px;font-weight:600;text-decoration:underline;cursor:pointer;}
.title{font-size:19px;font-weight:700;color:var(--ink);}
.sub{font-size:13px;color:var(--muted);margin-top:3px;}
.q{margin-top:18px;} .q label{font-size:14.5px;font-weight:600;color:var(--ink);}
.starrow{display:flex;gap:6px;margin-top:8px;}
.starrow .star{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-size:20px;color:var(--line);cursor:pointer;}
.starrow .star.on{background:var(--accent);border-color:var(--accent);color:#fff;}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px;}
.ropt{background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:16px 12px;font-size:13.5px;font-weight:600;text-align:left;cursor:pointer;color:var(--ink);}
.ropt small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:3px;}