:root {
  --vermijd: #15803d;
  --normaal: #2563eb;
  --rand: #d4d4d8;
  --tekst: #18181b;
  --zacht: #52525b;
}
* { box-sizing: border-box; }
/* het hidden-attribuut moet altijd winnen, ook van display:flex hieronder */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tekst); }
#map { position: fixed; inset: 0; }

#panel {
  position: absolute; top: 8px; left: 8px; z-index: 5;
  width: min(380px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px); overflow-y: auto;
  background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.25);
  padding: 10px 12px;
}
.kop { display: flex; justify-content: space-between; align-items: center; }
#panel.dicht #inhoud { display: none; }
#panel.dicht #inklap { transform: rotate(-90deg); }

button { font: inherit; color: inherit; cursor: pointer; }
#inklap, .veld button {
  border: 1px solid var(--rand); background: #fff; border-radius: 8px;
  width: 38px; height: 38px; font-size: 18px; flex: none;
}
#inklap { border: none; }

.veld { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.veld input {
  flex: 1; min-width: 0; height: 38px; padding: 0 10px; font: inherit;
  border: 1px solid var(--rand); border-radius: 8px;
}
.stip { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.stip.van { background: #16a34a; }
.stip.naar { background: #dc2626; }

.suggesties {
  position: absolute; top: 40px; left: 20px; right: 46px; z-index: 6;
  margin: 0; padding: 0; list-style: none;
  background: #fff; border: 1px solid var(--rand); border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.suggesties:empty { display: none; }
.suggesties li { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f1f1f3; }
.suggesties li:last-child { border-bottom: none; }
.suggesties li:hover { background: #f4f4f5; }

.tip, .klein { color: var(--zacht); font-size: 12.5px; margin: 8px 0 0; }
#status { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f4f4f5; }
#status.fout { background: #fee2e2; color: #991b1b; }

#resultaten { margin-top: 10px; }
.kaart {
  display: flex; gap: 10px; width: 100%; text-align: left; margin-top: 6px; padding: 9px 10px;
  background: #fff; border: 2px solid var(--rand); border-radius: 10px;
}
.kaart.gekozen { border-color: var(--tekst); background: #fafafa; }
.kaart[disabled] { opacity: .6; cursor: default; }
.kaart .lijn { width: 6px; border-radius: 3px; flex: none; }
.lijn.vermijd { background: var(--vermijd); }
.lijn.normaal { background: var(--normaal); }
.kaart .tekst { display: flex; flex-direction: column; min-width: 0; }
.cijfers { font-size: 14px; }
.extra { font-size: 12.5px; color: var(--zacht); }
.extra.waarschuwing { color: #b45309; }

details { margin-top: 10px; }
summary { cursor: pointer; padding: 4px 0; font-weight: 600; }
#stappen { margin: 6px 0 0; padding-left: 22px; max-height: 40dvh; overflow-y: auto; }
#stappen li { margin-bottom: 5px; }
#stappen small { color: var(--zacht); }

#categorieen .catrij { display: flex; align-items: center; gap: 10px; }
#categorieen label { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
#categorieen label:first-child { flex: 1; min-width: 0; }
#categorieen .vermijd { font-size: 13px; color: var(--zacht); gap: 4px; }
#categorieen .kleur { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.rij { display: block; margin-top: 10px; }
.rij input[type=range] { display: block; width: 100%; margin-top: 4px; }
.knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.knop {
  display: inline-block; padding: 8px 12px; background: #fff; cursor: pointer;
  border: 1px solid var(--rand); border-radius: 8px; font-size: 14px;
}

.rij.invoer { display: flex; gap: 8px; }
.rij.invoer input, .rij input[type=url] { flex: 1; min-width: 0; height: 38px; padding: 0 10px; font: inherit;
  border: 1px solid var(--rand); border-radius: 8px; }
.rij input[type=url] { display: block; width: 100%; margin-top: 4px; }
#plekken-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#plekken-chips:empty { display: none; }
.chip { padding: 6px 12px; border: 1px solid var(--rand); border-radius: 999px; background: #f4f4f5; font-size: 14px; }
.plekrij { display: flex; align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #f1f1f3; }
.plekrij div { flex: 1; min-width: 0; }
.plekrij small { display: block; color: var(--zacht); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plekrij button { padding: 5px 9px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; font-size: 13px; }
.zonerij { padding: 7px 0; border-bottom: 1px solid #f1f1f3; }
.zonerij button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 0; border: none; background: none; text-align: left; font-weight: 600; }
.zonerij .kleur { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.zonerij small { display: block; color: var(--zacht); margin-left: 20px; }
.zonerij a { margin-left: 20px; font-size: 13.5px; }
#zones-detail summary { font-weight: 500; }
.rij.kenteken { display: flex; gap: 8px; }
.rij.kenteken input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; font: inherit; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; border: 1px solid var(--rand); border-radius: 8px; background: #fde047; }
.rij input[type=number] { font: inherit; width: 110px; padding: 5px 8px; border: 1px solid var(--rand); border-radius: 8px; }
.popup-link { display: block; margin-top: 4px; word-break: break-all; }
.popup-zone { margin-bottom: 8px; }
.rij.vink { display: flex; align-items: center; gap: 8px; }
.rij select { font: inherit; padding: 5px 8px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; }

#waarschuwing {
  position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); z-index: 10;
  width: min(440px, calc(100vw - 24px)); padding: 12px 16px; border-radius: 12px;
  background: #b91c1c; color: #fff; font-size: 17px; font-weight: 600; text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
/* mobiele flitser melden + "staat hij er nog?" */
#meld-knop {
  position: fixed; left: 12px; bottom: 130px; z-index: 9; padding: 12px 16px; border: none; border-radius: 999px;
  background: #b91c1c; color: #fff; font-size: 15px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
body.nav #meld-knop { bottom: 196px; }
body.pip #meld-knop, body.pip #vraag { display: none; }
#vraag {
  position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 11;
  width: min(420px, calc(100vw - 32px)); padding: 16px; border-radius: 14px; text-align: center;
  background: #18181b; color: #fff; font-size: 18px; box-shadow: 0 6px 24px rgba(0,0,0,.5);
}
#vraag-knoppen { display: flex; gap: 12px; margin-top: 12px; }
#vraag-knoppen button { flex: 1; padding: 16px; border: none; border-radius: 12px; font-size: 20px; font-weight: 700; color: #fff; }
#vraag-ja { background: #15803d; }
#vraag-nee { background: #b91c1c; }

#traject {
  position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 9;
  width: min(440px, calc(100vw - 24px)); padding: 10px 16px; border-radius: 12px;
  background: #1e3a8a; color: #fff; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#traject b { display: block; font-size: 16px; }
#traject span { font-size: 15px; }
#traject.te-hard { background: #b91c1c; }
body.nav #traject { bottom: 146px; }
/* snelheidsmeter: rond bordje linksonder */
#snelheid {
  position: fixed; left: 12px; bottom: 44px; z-index: 9; width: 74px; height: 74px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #fff; border: 4px solid #18181b; box-shadow: 0 2px 10px rgba(0,0,0,.35); line-height: 1;
}
#snelheid b { font-size: 26px; }
#snelheid small { font-size: 11px; color: var(--zacht); }
#snelheid.te-hard { border-color: #dc2626; color: #b91c1c; }
body.nav #snelheid { bottom: 110px; }
body.pip #snelheid { width: 46px; height: 46px; left: 4px; bottom: 4px; border-width: 3px; }
body.pip #snelheid b { font-size: 17px; }
body.pip #snelheid small, body.pip #traject span { display: none; }
body.pip #traject { bottom: 56px; padding: 4px 8px; width: calc(100vw - 8px); }
#waarschuwing small { display: block; font-weight: 400; font-size: 14px; }

#nav-start {
  width: 100%; margin-top: 8px; padding: 11px; border: none; border-radius: 10px;
  background: var(--vermijd); color: #fff; font-size: 16px; font-weight: 600;
}
body.nav #panel { display: none; }
#nav-boven {
  position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 8;
  width: min(520px, calc(100vw - 16px)); padding: 10px 14px; border-radius: 14px;
  display: flex; align-items: center; gap: 14px;
  background: #14532d; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
#nav-pijl { font-size: 46px; line-height: 1; flex: none; width: 52px; text-align: center; }
#nav-afstand { display: block; font-size: 24px; }
#nav-tekst { font-size: 15px; }
#nav-onder {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 8; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  background: #fff; box-shadow: 0 -2px 10px rgba(0,0,0,.2);
}
#nav-onder div { flex: 1; min-width: 0; }
#nav-rest { display: block; font-size: 18px; }
#nav-aankomst { color: var(--zacht); font-size: 13.5px; }
#nav-onder button { padding: 10px 14px; border: 1px solid var(--rand); border-radius: 10px; background: #fff; }
#nav-stop { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff; font-weight: 600; }
body.nav #waarschuwing { bottom: 78px; }
body.nav .maplibregl-ctrl-top-right { top: 104px; bottom: auto; }
body.nav .maplibregl-ctrl-bottom-right, body.nav .maplibregl-ctrl-bottom-left { bottom: 64px; }
/* Zwevend venster (Android beeld-in-beeld): alleen pijl, afstand en kaart */
body.pip #nav-onder, body.pip .maplibregl-control-container, body.pip #nav-tekst { display: none; }
body.pip #nav-boven { top: 0; width: 100vw; border-radius: 0; padding: 6px 10px; gap: 8px; }
body.pip #nav-pijl { font-size: 34px; width: 36px; }
body.pip #nav-afstand { font-size: 22px; }
body.pip #waarschuwing { bottom: 4px; width: calc(100vw - 8px); padding: 6px 8px; font-size: 14px; }
body.pip #waarschuwing small { display: none; }

.ikzelf {
  width: 22px; height: 22px; border-radius: 50%; background: #2563eb;
  border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(37,99,235,.35), 0 2px 6px rgba(0,0,0,.4);
}

.maplibregl-popup-content { font: inherit; font-size: 13.5px; max-width: 280px; }
.popup-titel { font-weight: 600; margin-bottom: 4px; }
.popup-tekst { white-space: pre-line; color: var(--zacht); }
.popup-knoppen { display: flex; gap: 6px; margin-top: 4px; }
.popup-knoppen button { padding: 7px 10px; border: 1px solid var(--rand); border-radius: 8px; background: #fff; }

/* Op een telefoon blijft de kaart onder het paneel bruikbaar */
@media (max-width: 600px) {
  #panel { max-height: 62dvh; }
  .maplibregl-ctrl-top-right { top: auto; bottom: 76px; }
}