.botnav{
  display:none;
  position:fixed;
  left:12px;
  right:12px;
  bottom:12px;
  z-index:901;
  height:74px;
  border-radius:24px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 10px 35px rgba(15,23,42,.12),0 2px 8px rgba(15,23,42,.06);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
:root[data-theme="dark"] .botnav{background:rgba(19,23,32,.88);border-color:rgba(255,255,255,.08)}
.botnav-inner{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 8px;gap:4px}
.bn{flex:1;height:58px;border:none;background:transparent;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink4);font-size:10px;font-weight:600;cursor:pointer;position:relative;transition:transform .18s ease,background .18s ease,color .18s ease;-webkit-tap-highlight-color:transparent;overflow:hidden}
.bn .bi{width:32px;height:32px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;background:transparent;transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .18s ease,color .18s ease,box-shadow .18s ease}
.bn span:last-child{letter-spacing:.01em}
.bn:hover{color:var(--ink2)}
.bn.on{color:var(--blue)}
.bn.on .bi{background:linear-gradient(180deg,#eff6ff 0%, #dbeafe 100%);color:var(--blue);box-shadow:0 6px 16px rgba(37,99,235,.16);transform:translateY(-2px) scale(1.06)}
:root[data-theme="dark"] .bn.on .bi{background:linear-gradient(180deg,#10203d 0%, #163163 100%)}
.bn:active{transform:scale(.97)}
.ripple{position:absolute;border-radius:50%;background:rgba(37,99,235,.1);animation:rpl .4s ease-out forwards;pointer-events:none}
@keyframes rpl{from{width:0;height:0;opacity:1;transform:translate(-50%,-50%)}to{width:64px;height:64px;opacity:0;transform:translate(-50%,-50%)}}
@media (max-width:700px){.botnav{display:block}}

@media (max-width: 700px){

  /* hoofdlayout onder elkaar */
  .mlayout{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:14px 0 18px;
  }

  /* map eerst, daarna kaarten/lijst */
  #fmap{
    order:1;
    width:100%;
    height:52vh;
    min-height:320px;
    max-height:520px;
    border-radius:18px;
  }

  .mside{
    order:2;
    width:100%;
    max-height:none;
    overflow:visible;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  .msc{
    width:100%;
  }

  /* chips iets compacter */
  .chips{
    padding:12px 0 10px;
    gap:6px;
  }

  .chip{
    font-size:12px;
    padding:7px 12px;
  }

  /* popup netter op mobiel */
  .pu{
    min-width:0;
    max-width:220px;
    padding:12px 13px;
  }

  .pu-name{
    font-size:13px;
  }

  .pu-free{
    font-size:24px;
  }

  .pu-btns{
    grid-template-columns:1fr;
  }

  /* leaflet controls beter klikbaar */
  .leaflet-control-zoom a{
    width:34px !important;
    height:34px !important;
    line-height:32px !important;
    font-size:18px !important;
  }

  .leaflet-popup-close-button{
    top:6px !important;
    right:8px !important;
    font-size:20px !important;
    padding:4px 6px !important;
  }

  /* als je slide panel gebruikt */
  .ov{
    justify-content:flex-end;
    align-items:flex-end;
  }

  .slide{
    max-width:none;
    width:100%;
    max-height:88vh;
    border-left:none;
    border-top-left-radius:18px;
    border-top-right-radius:18px;
    animation:slib .25s var(--spring) both;
  }

  .sd{
    display:block;
  }

  .sl-head{
    padding:10px 12px 0;
  }

  .sl-b{
    padding:0 12px 22px;
  }

  .sl-grid{
    grid-template-columns:1fr;
  }

  .sl-btns{
    flex-direction:column;
  }
}