:root{
  --bg:#f3f4f7;
  --surface:#ffffff;
  --rand:#e5e7ec;
  --tekst:#14181f;
  --tekst-zacht:#6b7280;
  --primair:#2f5bff;
  --primair-dim:#c9d4ff;
  --groen:#16a34a;
  --amber:#f59e0b;
  --rood:#dc2626;
  --paars:#7c3aed;
  --schaduw:0 8px 24px rgba(20,24,31,.08), 0 2px 6px rgba(20,24,31,.05);
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--tekst);
  font-family:'Inter',sans-serif;
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:1000;
  display:flex;align-items:center;gap:18px;
  padding:14px 20px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rand);
  flex-wrap:wrap;
}
.merk{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.merk-dot{width:10px;height:10px;border-radius:3px;background:var(--primair);}
.merk-naam{font-family:'Sora',sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;}

.zoekpil{
  flex:1;min-width:280px;
  display:flex;align-items:center;gap:8px;
  background:var(--surface);
  border:1px solid var(--rand);
  border-radius:999px;
  padding:6px;
  box-shadow:var(--schaduw);
}
.zoekveld{
  flex:1;display:flex;align-items:center;gap:8px;
  padding:6px 10px;min-width:0;
}
.zoek-icoon{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.zoek-icoon--van{background:var(--tekst-zacht);}
.zoek-icoon--naar{background:var(--primair);}
.zoekveld input{
  flex:1;min-width:0;border:none;outline:none;background:transparent;
  font-size:14px;font-family:'Inter',sans-serif;color:var(--tekst);
}
.zoekveld input::placeholder{color:#9aa1ab;}
#gpsknop{
  border:none;background:none;cursor:pointer;font-size:15px;padding:2px 4px;border-radius:50%;
}
.wisselknop{
  border:none;background:#f1f3f7;color:var(--tekst-zacht);
  width:30px;height:30px;border-radius:50%;cursor:pointer;flex-shrink:0;font-size:14px;
}
.wisselknop:hover{background:var(--primair-dim);color:var(--primair);}
.ga-knop{
  background:var(--primair);color:#fff;border:none;
  padding:10px 20px;border-radius:999px;font-family:'Sora',sans-serif;font-weight:600;font-size:14px;
  cursor:pointer;flex-shrink:0;
}
.ga-knop:disabled{background:#a9b6e6;cursor:wait;}
.ga-knop:hover:not(:disabled){filter:brightness(1.08);}

.status{
  text-align:center;font-size:13px;color:var(--tekst-zacht);padding:6px 20px;min-height:14px;
}
.status.fout{color:var(--rood);font-weight:500;}

/* ---------- kaart ---------- */
.kaartwrap{position:relative;height:58vh;min-height:380px;}
#map{width:100%;height:100%;}

.verkeer-toggle{
  position:absolute;top:14px;right:14px;z-index:500;
  background:var(--surface);border:1px solid var(--rand);border-radius:999px;
  padding:9px 16px 9px 12px;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;
  box-shadow:var(--schaduw);cursor:pointer;display:flex;align-items:center;gap:7px;color:var(--tekst);
}
.verkeer-toggle.actief{background:var(--tekst);color:#fff;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}
.dot--rood{background:var(--rood);}
.dot--groen{background:var(--groen);}
.dot--amber{background:var(--amber);}
.dot--paars{background:var(--paars);}

.routechips{
  position:absolute;left:14px;right:14px;bottom:14px;z-index:500;
  display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;
}
.chip{
  flex-shrink:0;
  background:var(--surface);border:2px solid transparent;border-radius:16px;
  padding:10px 16px;box-shadow:var(--schaduw);cursor:pointer;min-width:150px;
}
.chip.actief{border-color:var(--primair);}
.chip .chip-label{font-size:11px;color:var(--tekst-zacht);text-transform:uppercase;letter-spacing:.06em;font-weight:600;}
.chip .chip-tijd{font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:19px;margin-top:2px;}
.chip .chip-detail{font-size:12px;color:var(--tekst-zacht);margin-top:2px;}
.chip .chip-vertraging{color:var(--rood);font-weight:600;}
.chip .chip-vertraging.ok{color:var(--groen);}

/* ---------- panelen ---------- */
.panelen{
  max-width:840px;margin:22px auto 40px;padding:0 20px;
  display:grid;gap:14px;
}
.paneel{
  background:var(--surface);border:1px solid var(--rand);border-radius:16px;
  padding:16px 18px;box-shadow:var(--schaduw);
}
.paneel-kop{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.paneel-kop h2{
  font-family:'Sora',sans-serif;font-size:14px;font-weight:700;margin:0;letter-spacing:-.005em;
}
.badge{
  font-family:'IBM Plex Mono',monospace;font-size:11px;background:#eef0f4;color:var(--tekst-zacht);
  padding:3px 8px;border-radius:999px;
}
.badge--rood{background:#fdecec;color:var(--rood);}

ul.rijlijst{list-style:none;margin:0;padding:0;}
ul.rijlijst li{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 0;border-top:1px solid var(--rand);font-size:14px;
}
ul.rijlijst li:first-child{border-top:none;}
.naam{font-weight:500;display:flex;align-items:center;gap:7px;}
.naam .land{color:var(--paars);font-family:'IBM Plex Mono',monospace;font-size:10px;text-transform:uppercase;background:#f3edff;padding:1px 6px;border-radius:5px;}
.waarden{font-family:'IBM Plex Mono',monospace;font-size:12.5px;color:var(--tekst-zacht);text-align:right;white-space:nowrap;}
.waarden b{color:var(--tekst);}
.leeg{color:var(--tekst-zacht);font-size:13px;font-style:italic;padding:6px 0;}

.ernst-tag{font-size:10px;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:5px;font-weight:600;}
.ernst-tag.matig{background:#fff4e0;color:var(--amber);}
.ernst-tag.zwaar{background:#fdecec;color:var(--rood);}
.ernst-tag.licht{background:#eef0f4;color:var(--tekst-zacht);}

.footer{
  text-align:center;font-size:11.5px;color:#9aa1ab;padding:0 20px 40px;line-height:1.6;
}

/* leaflet marker labels */
.mini-marker{
  width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);
}

@media (max-width:640px){
  .topbar{gap:10px;}
  .merk-naam{display:none;}
  .kaartwrap{height:48vh;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }