/* Karma Mobility — extra laag (okt 2026): berichtenballon, beschikbaarheid, prijstabel, maatkiezer, mobiele balk */
:root{ --km-groen:#2E6B3E; --km-licht:#4CAF6E; --km-diep:#0F2318; --km-nacht:#0A130E; --km-creme:#EDF3ED; --km-dim:#AFC2B4; --km-amber:#F2E7CE; --km-rand:rgba(233,240,233,.14) }

/* ── Berichtenballon ── */
#kmBal{ position:fixed; right:18px; bottom:18px; z-index:9990; display:flex; align-items:center; gap:.55rem;
  background:var(--km-groen); color:#fff; border:0; border-radius:100px; padding:.85rem 1.3rem;
  font:600 .95rem/1 'Outfit',system-ui,sans-serif; cursor:pointer; box-shadow:0 10px 28px rgba(5,12,8,.35) }
#kmBal:hover{ background:#255a34 }
#kmBal:focus-visible{ outline:3px solid var(--km-amber); outline-offset:3px }
#kmBal svg{ flex:none }
#kmBal .km-punt{ width:8px; height:8px; border-radius:50%; background:var(--km-amber); box-shadow:0 0 0 0 rgba(242,231,206,.7); animation:km-puls 2.4s infinite }
@keyframes km-puls{ 0%{box-shadow:0 0 0 0 rgba(242,231,206,.6)} 70%{box-shadow:0 0 0 9px rgba(242,231,206,0)} 100%{box-shadow:0 0 0 0 rgba(242,231,206,0)} }
@media (prefers-reduced-motion:reduce){ #kmBal .km-punt{ animation:none } }
body.km-balk-aan #kmBal{ bottom:84px }

#kmWrap{ position:fixed; inset:0; z-index:10010; display:none }
#kmWrap.open{ display:block }
#kmScrim{ position:absolute; inset:0; background:rgba(5,12,8,.55) }
#kmPanel{ position:absolute; right:16px; bottom:16px; width:min(430px,calc(100vw - 32px)); max-height:min(720px,calc(100vh - 32px));
  background:#F7F8F5; color:#0F2318; border-radius:18px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px rgba(5,12,8,.45); font-family:'Outfit',system-ui,sans-serif }
#kmKop{ background:var(--km-diep); color:#fff; padding:16px 18px; display:flex; align-items:flex-start; gap:.75rem }
#kmKop .km-k{ width:36px; height:36px; border-radius:9px; background:var(--km-groen); display:flex; align-items:center; justify-content:center; font:700 19px Georgia,serif; flex:none }
#kmKop b{ font-size:1rem; display:block; margin-bottom:.15rem }
#kmKop small{ color:#b9cdbf; font-size:.8rem; line-height:1.4; display:block }
#kmX{ margin-left:auto; background:0; border:0; color:#b9cdbf; font-size:26px; cursor:pointer; line-height:1; padding:0 2px }
#kmX:focus-visible{ outline:2px solid var(--km-amber) }
#kmBody{ overflow-y:auto; padding:16px 18px 18px; -webkit-overflow-scrolling:touch }
.km-snel{ margin:0 0 14px }
.km-snel > p{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:#5b6d61; margin:0 0 .5rem; font-weight:600 }
.km-snel details{ background:#fff; border:1px solid #DDE6DF; border-radius:12px; margin:0 0 .45rem }
.km-snel summary{ cursor:pointer; padding:.7rem .9rem; font-size:.9rem; font-weight:600; list-style:none; color:#0F2318 }
.km-snel summary::-webkit-details-marker{ display:none }
.km-snel summary::after{ content:'+'; float:right; color:var(--km-groen); font-weight:700 }
.km-snel details[open] summary::after{ content:'–' }
.km-snel .km-antw{ padding:0 .9rem .8rem; font-size:.88rem; line-height:1.6; color:#33463a }
.km-snel .km-antw a{ color:var(--km-groen); font-weight:600 }
.km-snel ul{ margin:.2rem 0 .4rem; padding-left:1.1rem }

/* ── Berichtformulier (ballon en /contact) ── */
.km-form{ display:grid; gap:.7rem }
.km-form .km-rij{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem }
.km-form label{ display:block; font-size:.8rem; font-weight:600; color:#2a3d31; margin:0 0 .25rem }
.km-form label small{ font-weight:400; color:#5b6d61 }
.km-form input[type=text], .km-form input[type=email], .km-form input[type=date], .km-form select, .km-form textarea{
  width:100%; box-sizing:border-box; border:1px solid #C9D7CD; border-radius:10px; padding:.68rem .8rem; background:#fff; color:#0F2318;
  font:inherit; font-size:16px; line-height:1.3 }
.km-form textarea{ min-height:96px; resize:vertical }
.km-form input:focus, .km-form select:focus, .km-form textarea:focus{ outline:2px solid var(--km-licht); outline-offset:0; border-color:var(--km-groen) }
.km-form .km-fout{ border-color:#c0392b !important }
.km-form .km-keus{ display:flex; gap:.5rem; flex-wrap:wrap }
.km-form .km-keus label{ display:flex; align-items:center; gap:.35rem; font-weight:500; background:#fff; border:1px solid #C9D7CD; border-radius:100px; padding:.45rem .8rem; cursor:pointer; margin:0 }
.km-form .km-keus input{ accent-color:var(--km-groen) }
.km-form .km-meer{ font-size:.85rem }
.km-form .km-meer summary{ cursor:pointer; color:var(--km-groen); font-weight:600; padding:.2rem 0 .5rem }
.km-form .km-meer > div{ display:grid; gap:.7rem }
.km-form button[type=submit]{ background:var(--km-groen); color:#fff; border:0; border-radius:100px; padding:.9rem 1rem; font:600 1rem 'Outfit',sans-serif; cursor:pointer }
.km-form button[type=submit]:hover{ background:#255a34 }
.km-form button[disabled]{ opacity:.6; cursor:wait }
.km-form .km-priv{ font-size:.75rem; color:#5b6d61; line-height:1.5; margin:0 }
.km-form .km-priv a{ color:#33463a }
.km-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden }
.km-melding{ border-radius:12px; padding:1rem 1.1rem; font-size:.92rem; line-height:1.6 }
.km-melding.ok{ background:#E6F2E9; border:1px solid #BFDCC7; color:#173b23 }
.km-melding.fout{ background:#FBEAEA; border:1px solid #EBC2C2; color:#6b1d1d }
.km-melding a{ color:inherit; font-weight:600 }
@media (max-width:560px){
  #kmPanel{ right:0; bottom:0; left:0; top:0; width:100%; max-height:none; height:100%; border-radius:0 }
  #kmBal{ right:14px; bottom:14px; padding:.8rem 1.1rem }
  .km-form .km-rij{ grid-template-columns:1fr }
}

/* Formulier op een donkere pagina (contact) */
.km-form-kaart{ background:#F7F8F5; color:#0F2318; border-radius:18px; padding:clamp(18px,3vw,30px); box-shadow:0 18px 50px rgba(0,0,0,.25) }
.km-form-kaart h2{ color:#0F2318 !important; margin:0 0 .4rem }
.km-form-kaart > p{ color:#3e5145 !important; margin:0 0 1.1rem; line-height:1.6 }

/* ── Beschikbaarheid (14 dagen) ── */
.km-besch{ margin:.7rem 0 0; font-size:.72rem }
.km-besch-kop{ display:block; letter-spacing:.12em; text-transform:uppercase; opacity:.75; margin-bottom:.35rem }
.km-besch ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(14,1fr); gap:3px }
.km-besch li{ text-align:center; border-radius:5px; padding:3px 0 2px; line-height:1.15 }
.km-besch li span{ display:block; font-size:.62rem; opacity:.8 }
.km-besch li b{ font-size:.72rem }
.km-besch .km-vrij{ background:rgba(76,175,110,.28) }
.km-besch .km-deels{ background:rgba(242,190,90,.32) }
.km-besch .km-bezet{ background:rgba(200,80,70,.32); text-decoration:line-through }
.km-besch-leg{ display:flex; gap:.6rem; align-items:center; margin-top:.35rem; opacity:.8 }
.km-besch-leg i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.2rem; vertical-align:-1px }
.km-besch-leg i.km-vrij{ background:rgba(76,175,110,.8) } .km-besch-leg i.km-deels{ background:rgba(242,190,90,.85) } .km-besch-leg i.km-bezet{ background:rgba(200,80,70,.8) }

/* ── Prijstabel ── */
.km-prijzen{ width:100%; border-collapse:collapse; font-size:.95rem }
.km-prijzen th, .km-prijzen td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--km-rand); vertical-align:top }
.km-prijzen td.km-num, .km-prijzen th.km-num{ text-align:right; white-space:nowrap }
.km-prijzen small{ display:block; opacity:.75; font-size:.8rem }
.km-tabel-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
@media (max-width:640px){
  .km-prijzen thead{ display:none }
  .km-prijzen tr{ display:block; padding:12px 0; border-bottom:1px solid var(--km-rand) }
  .km-prijzen td{ display:flex; justify-content:space-between; gap:1rem; border:0; padding:4px 2px }
  .km-prijzen td::before{ content:attr(data-l); opacity:.7 }
  .km-prijzen td.km-num{ text-align:right }
}

/* ── Kaders en blokken voor nieuwe pagina's ── */
.km-kort{ border-left:3px solid var(--km-licht); padding:1rem 1.2rem; border-radius:0 12px 12px 0; background:rgba(76,175,110,.08); max-width:760px; line-height:1.75 }
.km-kort p{ margin:.25rem 0 .75rem } .km-kort p:last-child{ margin-bottom:0 }
.km-blokken{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:1.3rem }
.km-blok{ border:1px solid var(--km-rand); border-radius:14px; padding:18px 20px; line-height:1.65 }
.km-blok h3{ margin:0 0 .4rem; font-size:1.05rem }
.km-blok p{ margin:0 0 .6rem } .km-blok p:last-child{ margin:0 }
.km-tekst{ max-width:760px; line-height:1.8 }
.km-tekst p{ margin:0 0 1rem }
.km-bron{ font-size:.8rem; opacity:.75; line-height:1.6; margin-top:1rem }
.km-kruimel{ font-size:.85rem; margin:0 0 1.4rem; padding:0 2px; opacity:.85 }
.km-kruimel a{ text-decoration:none }
.km-kruimel span{ margin:0 .45rem; opacity:.6 }

/* ── Maatkiezer verhuizing ── */
.km-maat{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin:1.2rem 0 }
.km-maat button{ border:1px solid var(--km-rand); background:transparent; color:inherit; border-radius:14px; padding:14px 12px; text-align:left; cursor:pointer; font:inherit; line-height:1.4 }
.km-maat button b{ display:block; font-size:1rem; margin-bottom:.2rem }
.km-maat button small{ opacity:.75 }
.km-maat button[aria-pressed=true]{ border-color:var(--km-licht); background:rgba(76,175,110,.16) }
.km-maat button:focus-visible{ outline:2px solid var(--km-amber); outline-offset:2px }
.km-advies{ border:1px solid var(--km-licht); border-radius:16px; padding:18px 20px; margin-top:.6rem; line-height:1.7 }
.km-advies h3{ margin:0 0 .4rem }

/* ── Wie kan huren (EN/NL) ── */
.km-wie{ border:1px dashed var(--km-rand); border-radius:14px; padding:16px 18px; line-height:1.7; max-width:760px }
.km-wie ul{ margin:.4rem 0 0; padding-left:1.1rem }

/* ── Mobiele boekbalk ── */
#kmBalk{ position:fixed; left:0; right:0; bottom:0; z-index:9989; display:none; gap:.5rem; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,19,14,.96); border-top:1px solid rgba(233,240,233,.12) }
#kmBalk a, #kmBalk button{ flex:1; text-align:center; border-radius:100px; padding:.8rem .6rem; font:600 .92rem 'Outfit',sans-serif; text-decoration:none; border:0; cursor:pointer }
#kmBalk .km-b1{ background:var(--km-licht); color:#08140c }
#kmBalk .km-b2{ background:transparent; color:#EDF3ED; border:1px solid rgba(233,240,233,.3) }
@media (max-width:760px){ body.km-balk-aan #kmBalk{ display:flex } body.km-balk-aan{ padding-bottom:70px } body.km-balk-aan #kmBal{ display:none } }

/* Footer kolommen (verhuurfocus) */
.km-voet-lijst{ list-style:none; margin:0; padding:0 }
.km-voet-lijst li{ margin:0 0 .45rem }

/* Compacte tabel (afstanden): blijft een tabel op mobiel */
@media (max-width:640px){
  .km-prijzen.km-compact thead{ display:table-header-group }
  .km-prijzen.km-compact tr{ display:table-row; padding:0; border:0 }
  .km-prijzen.km-compact td{ display:table-cell; padding:8px 6px; border-bottom:1px solid var(--km-rand) }
  .km-prijzen.km-compact th{ padding:8px 6px }
  .km-prijzen.km-compact td::before{ content:none }
  .km-prijzen.km-compact .km-verberg-m{ display:none }
}

/* Routestrook op plaatspagina's: niet breder dan het scherm op mobiel */
@media (max-width:640px){
  .k-route-in{ flex-wrap:wrap }
  .k-route svg{ min-width:0; flex-basis:100% }
  .k-route-feit{ flex-wrap:wrap; white-space:normal; gap:.6rem 1.1rem }
}