/* Woningzoeker – woningzoeker.css */
/* Kleuren en fonts komen via CSS variabelen uit de stijlinstellingen */
.wz-wrapper { position:relative; overflow:hidden; background:#222; font-family:var(--invite-font-body, "Nunito", sans-serif); width:100%; min-height:200px; }
.wz-wrapper a { text-decoration:none; }

.wz-map-container { position:relative; width:100%; height:100%; }
.wz-map-bg { position:absolute; inset:0; background-size:100% 100%; background-repeat:no-repeat; background-position:center; }
.wz-svg { position:absolute; inset:0; width:100%; height:100%; }

/* Shapes */
.wz-kavel { cursor:pointer; outline:none; }
.wz-kavel polygon { stroke-width:2; stroke-linejoin:round; transition:fill .15s,stroke .15s; vector-effect:non-scaling-stroke; }
.wz-kavel:hover polygon { filter:brightness(1.2); }
.wz-kavel.is-selected polygon { stroke:#fff !important; stroke-width:3; }
.wz-kavel.status-verkocht { cursor:default; }

.wz-label { pointer-events:none; font-family:var(--invite-font-body, "Nunito", sans-serif); font-weight:700; font-size:2px; fill:white; text-anchor:middle; dominant-baseline:central; filter:drop-shadow(0 .05px .1px rgba(0,0,0,.7)); paint-order:stroke fill; stroke:rgba(0,0,0,.4); stroke-width:.3px; }

/* Tooltip */
#wz-tooltip { position:absolute; pointer-events:none; z-index:60; display:none; }
#wz-tooltip.visible { display:block; }
.wz-tt-card { background:white; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.18); min-width:240px; max-width:280px; overflow:hidden; }
.wz-tt-card-foto img { display:block; width:100%; height:140px; object-fit:cover; }
.wz-tt-card-body { padding:12px 16px 14px; }
.wz-tt-card-naam { font-family:'BivoacRegular',Georgia,serif; font-size:1.05rem; font-weight:600; color:#1a1a1a; margin-bottom:6px; line-height:1.3; }
.wz-tt-card-stat { font-size:.85rem; color:#555; margin-bottom:4px; }
.wz-tt-card-prijs { font-size:.95rem; font-weight:700; color:#1a1a1a; margin-top:4px; margin-bottom:6px; }
.wz-tt-card-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:600; color:white; font-family:'Work Sans',sans-serif; }

/* Legenda */
.wz-legend { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(20,30,22,.9); backdrop-filter:blur(8px); border-radius:40px; padding:10px 22px; display:flex; gap:20px; align-items:center; z-index:20; border:1px solid rgba(255,255,255,.12); }
.wz-leg-item { display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:500; color:rgba(255,255,255,.9); }
.wz-leg-dot { width:13px; height:13px; border-radius:3px; border:2px solid transparent; }
.wz-leg-dot.beschikbaar { background:rgba(52,180,90,.5); border-color:var(--invite-kleur-primair, #34b45a); }
.wz-leg-dot.optie       { background:rgba(224,144,0,.5);  border-color:#e09000; }
.wz-leg-dot.verkocht    { background:rgba(220,50,50,.5);  border-color:#dc3232; }

/* Panel rechts (default) */
.wz-panel { position:absolute; top:0; right:0; width:360px; height:100%; background:white; z-index:100; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .32s cubic-bezier(.22,.61,.36,1); box-shadow:-6px 0 32px rgba(0,0,0,.18); }
.wz-panel.open { transform:translateX(0); }

/* Panel links */
.wz-wrapper.panel-links .wz-panel { right:auto; left:0; transform:translateX(-100%); box-shadow:6px 0 32px rgba(0,0,0,.18); }
.wz-wrapper.panel-links .wz-panel.open { transform:translateX(0); }

/* Modal overlay */
.wz-modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:9999; align-items:center; justify-content:center; padding:20px; }
.wz-modal-overlay.open { display:flex; }

/* Split-layout modal */
.wz-modal { background:white; border-radius:14px; width:100%; max-width:1100px; max-height:90vh; display:flex; overflow:hidden; box-shadow:0 24px 80px rgba(0,0,0,.35); animation:wz-modal-in .25s cubic-bezier(.22,.61,.36,1); }
@keyframes wz-modal-in { from { opacity:0; transform:scale(.96) translateY(12px); } to { opacity:1; transform:none; } }

/* Linker fotokolom */
.wz-modal-foto-kolom { width:58%; background:#111; display:flex; flex-direction:column; flex-shrink:0; }
.wz-modal-foto-kolom .wz-slider { flex:1; min-height:200px; position:relative; }
.wz-modal-foto-kolom .wz-slider-track { height:100% !important; }
.wz-modal-foto-kolom .wz-slider-track img { height:100% !important; }

/* Pijltjes: zijkant van foto, groot klikvlak, gradient overlay */
.wz-modal-nav-btn {
  position:absolute; top:0; bottom:0; width:64px;
  display:flex; align-items:center; justify-content:center;
  color:white; font-size:2.4rem; font-weight:300; line-height:1;
  cursor:pointer; user-select:none; z-index:6;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
  transition:transform .15s;
}
.wz-modal-nav-btn.wz-modal-nav-prev { left:0; }
.wz-modal-nav-btn.wz-modal-nav-next { right:0; }
.wz-modal-nav-btn:hover { transform:scale(1.2); }

/* Foto-counter: pill rechtsonder */
.wz-modal-foto-kolom .wz-slider-lbl {
  position:absolute; bottom:12px; right:12px; top:auto; left:auto;
  background:rgba(0,0,0,.55); color:white;
  padding:4px 12px; border-radius:14px;
  font-size:.78rem; font-weight:500; letter-spacing:.02em;
  z-index:5; pointer-events:none;
}

.wz-modal-foto-kolom .wz-slider-dots { position:relative; transform:none; bottom:auto; left:auto; justify-content:center; padding:8px 0; background:#111; }

/* Rechter infokolom */
.wz-modal-info-kolom { flex:1; min-width:0; display:flex; flex-direction:column; }
.wz-modal-header { padding:22px 24px 16px; border-bottom:1px solid #f0ede8; flex-shrink:0; }
.wz-modal-titelbalk { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.wz-modal-bouwnr { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#aaa; margin-bottom:4px; }
.wz-modal-naam { font-size:1.35rem; font-weight:800; color:#1a1a1a; line-height:1.2; margin-bottom:6px; font-family:var(--invite-font-heading,"Nunito",sans-serif); }
.wz-modal-header .wz-panel-close { position:static; background:#f0ede8; color:#555; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:.85rem; display:flex; align-items:center; justify-content:center; transition:background .15s; flex-shrink:0; margin-top:2px; }
.wz-modal-header .wz-panel-close:hover { background:#e0dbd0; color:#333; }
.wz-modal-acties { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.wz-modal-scroll { flex:1; overflow-y:auto; padding:16px 24px; }

/* Modal: tabs + content */
.wz-modal-tabs { display:flex; gap:4px; border-bottom:1px solid #e8e4dd; margin:0 0 16px; padding:0 2px; }
.wz-modal-tab { background:none; border:none; padding:10px 14px; font-size:.85rem; font-weight:600; color:#888; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .15s, border-color .15s; }
.wz-modal-tab:hover { color:#444; }
.wz-modal-tab.active { color:#1a1a1a; border-bottom-color:#1a1a1a; }
.wz-modal-tab-count { display:inline-block; background:#f0ede8; color:#888; font-size:.7rem; padding:1px 7px; border-radius:10px; margin-left:5px; vertical-align:1px; }
.wz-modal-tab.active .wz-modal-tab-count { background:#1a1a1a; color:white; }
.wz-modal-tabpanel { display:none; }
.wz-modal-tabpanel.active { display:block; }

/* Prijs prominent */
.wz-modal-prijs-blok { margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #f0ede8; }
.wz-modal-prijs-prefix { font-size:.78rem; color:#888; text-transform:lowercase; letter-spacing:.02em; margin-bottom:2px; }
.wz-modal-prijs { font-size:1.7rem; font-weight:700; color:#1a1a1a; line-height:1.15; }

/* Specs als 2-koloms grid met icoon + label + waarde */
.wz-modal-specs-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.wz-modal-spec-cell { display:flex; align-items:center; gap:11px; padding:11px 12px; background:#faf8f4; border:1px solid #efeae0; border-radius:9px; }
.wz-modal-spec-icon { font-size:1.15rem; line-height:1; flex-shrink:0; }
.wz-modal-spec-info { min-width:0; line-height:1.25; }
.wz-modal-spec-lbl { font-size:.72rem; color:#999; text-transform:uppercase; letter-spacing:.04em; }
.wz-modal-spec-val { font-size:.95rem; font-weight:700; color:#1a1a1a; margin-top:1px; }

/* Type-tags (standalone) */
.wz-modal-tags { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.wz-modal-tag { display:inline-block; background:#f4f1ec; color:#5a5a5a; padding:5px 11px; border-radius:14px; font-size:.78rem; font-weight:500; }

/* Download-knoppen (modal + panel) */
.wz-dl-rij { display:flex; flex-direction:column; gap:8px; }
.wz-dl-btn { display:flex; align-items:center; gap:14px; padding:12px 14px; background:#faf8f4; border:1px solid #e8e4dd; border-radius:10px; text-decoration:none; color:inherit; transition:background .15s, border-color .15s; }
.wz-dl-btn:hover { background:#f3eee5; border-color:#d8d2c5; }
.wz-dl-icon { flex-shrink:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:white; border-radius:7px; font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.wz-dl-text { flex:1; min-width:0; }
.wz-dl-lbl { font-weight:600; font-size:.9rem; color:#1a1a1a; line-height:1.3; }
.wz-dl-sub { font-size:.75rem; color:#888; margin-top:3px; }

/* Responsive */
@media (max-width:640px) {
  .wz-modal { flex-direction:column; max-height:95vh; border-radius:10px; }
  .wz-modal-foto-kolom { width:100%; min-height:200px; max-height:200px; }
  .wz-modal-foto-kolom .wz-slider-track { height:200px !important; }
  .wz-modal-foto-kolom .wz-slider-track img { height:200px !important; }
}
/* ═══════════════════════════════════════════════
   PANEL REDESIGN — BivoacRegular + Work Sans
   ═══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600&display=swap');

.wz-panel-hd { padding:24px 22px 20px; flex-shrink:0; position:relative; background:var(--invite-kleur-primair, #37595d); }
.wz-panel-close { position:absolute; top:14px; right:14px; background:none; border:none; color:rgba(255,255,255,.75); width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:color .15s; user-select:none; }
.wz-panel-close:hover { color:white; }
.wz-panel-nr { display:none; }
.wz-panel-title { font-family:'BivoacRegular', Georgia, serif; font-size:1.2rem; font-weight:400; color:white; text-transform:uppercase; letter-spacing:.03em; line-height:1.45; padding-right:32px; margin:0 0 10px; word-break:break-word; hyphens:auto; overflow-wrap:break-word; }
.wz-panel-badge { display:inline-flex; align-items:center; padding:4px 12px; border-radius:20px; font-size:.75rem; font-weight:600; color:white; font-family:'Work Sans', sans-serif; }
.wz-panel-badge.badge-beschikbaar { background:#34b45a; }
.wz-panel-badge.badge-optie       { background:#e09000; }
.wz-panel-badge.badge-verkocht    { background:#dc3232; }
.wz-stats { display:none; }
.wz-panel-body { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; font-family:'Work Sans', sans-serif; }
.wz-slider { position:relative; background:#1a1a1a; display:none; }
.wz-slider.heeft-fotos { display:block; }
.wz-slider-track { position:relative; overflow:hidden; height:220px; }
.wz-slider-track img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.25,.46,.45,.94); }
.wz-slider-track img:first-child { position:relative; }
.wz-slider-nav { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.55); color:white; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:1.3rem; display:flex; align-items:center; justify-content:center; z-index:5; user-select:none; }
.wz-slider-nav.prev { left:8px; } .wz-slider-nav.next { right:8px; }
.wz-voorkeur-sectie { display:none; }
.wz-section { padding:18px 22px; border-bottom:1px solid #f0ede8; }
.wz-section:last-child { border-bottom:none; }
.wz-section-title { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:#999; margin-bottom:12px; font-family:'Work Sans', sans-serif; }
.wz-kenmerken { list-style:none; padding:0; margin:0; }
.wz-kenmerken { list-style:none !important; padding:0 !important; margin:0 !important; }
.wz-kenmerken li { display:flex !important; align-items:flex-start; gap:10px; padding:7px 0; border-bottom:1px solid #f5f2ee; font-size:.88rem; color:#333; line-height:1.5; font-family:'Work Sans', sans-serif; list-style:none !important; }
.wz-kenmerken li::before { display:none !important; content:none !important; }
.wz-vink { color:var(--invite-kleur-secondair,#b79d3c); font-weight:700; font-size:.85rem; flex-shrink:0; margin-top:1px; }
.wz-kenmerken li:last-child { border-bottom:none; }

.wz-panel-omschrijving { padding:0 22px 18px; font-size:.88rem; line-height:1.7; color:#444; font-family:'Work Sans', sans-serif; }
.wz-panel-omschrijving ul { list-style:none; padding:0; margin:6px 0; }
.wz-panel-omschrijving ul li { display:flex; gap:10px; padding:4px 0; }
.wz-panel-omschrijving ul li::before { content:'✓'; color:var(--invite-kleur-secondair,#b79d3c); font-weight:700; flex-shrink:0; font-size:.8rem; margin-top:2px; }
.wz-panel-omschrijving p { margin:0 0 8px; }
.wz-cta-rij { padding:16px 22px; border-top:1px solid #f0ede8; flex-shrink:0; }
.wz-btn { display:block; width:100%; text-align:center; padding:12px 20px; border-radius:6px; font-size:.88rem; font-weight:600; text-decoration:none; cursor:pointer; font-family:'Work Sans', sans-serif; letter-spacing:.02em; box-sizing:border-box; }

/* ── Voorkeur sectie ───────────────────────────── */
.wz-vk-login { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.wz-vk-login span { font-size:.82rem; color:#666; }
.wz-vk-login-btn { padding:7px 14px; border-radius:20px; background:var(--invite-kleur-primair, #34503c); color:white; font-family:var(--invite-font-body, "Nunito", sans-serif); font-size:.78rem; font-weight:700; text-decoration:none; white-space:nowrap; transition:opacity .15s; }
.wz-vk-login-btn:hover { opacity:.85; color:white; background:var(--invite-kleur-primair, #34503c); }

.wz-vk-knoppen { display:flex; gap:7px; }
.wz-vk-btn { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; border-radius:8px; border:2px solid #e0dbd0; background:#faf8f5; cursor:pointer; transition:all .15s; }
.wz-vk-btn:hover { border-color:var(--invite-kleur-primair, #34503c); background:#f0f8f4; }
.wz-vk-btn.actief { border-color:var(--invite-kleur-primair, #34503c); background:var(--invite-kleur-primair, #34503c); }
.wz-vk-btn.bezet { opacity:.5; cursor:default; }
.wz-vk-num { width:28px; height:28px; border-radius:50%; background:#e0dbd0; display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:800; color:var(--invite-kleur-primair, #34503c); transition:all .15s; }
.wz-vk-btn.actief .wz-vk-num { background:white; color:var(--invite-kleur-primair, #34503c); }
.wz-vk-lbl { font-size:.68rem; font-weight:600; color:#666; text-align:center; line-height:1.2; }
.wz-vk-btn.actief .wz-vk-lbl { color:rgba(255,255,255,.9); }
.wz-vk-actief-msg { margin-top:9px; font-size:.78rem; color:var(--invite-kleur-primair, #34503c); background:#f0f8f4; padding:7px 10px; border-radius:6px; border-left:3px solid var(--invite-kleur-primair, #34503c); }

/* ── Responsive ─────────────────────────────────── */

/* Panel: op mobiel volledige breedte */
@media (max-width: 600px) {
  .wz-panel {
    width: 100% !important;
    max-width: 100%;
    border-radius: 0;
  }
  .wz-wrapper.panel-links .wz-panel {
    width: 100% !important;
  }

  /* Modal: stapel foto boven info op mobiel */
  .wz-modal {
    flex-direction: column;
    max-height: 95vh;
    border-radius: 10px;
    margin: 0;
  }
  .wz-modal-foto-kolom {
    width: 100% !important;
    max-height: 240px;
    flex-shrink: 0;
  }
  .wz-modal-foto-kolom .wz-slider-track img {
    max-height: 240px;
    object-fit: cover;
  }
  .wz-modal-nav-btn { width: 48px; font-size: 2rem; }
  .wz-modal-info-kolom {
    flex: 1;
    overflow-y: auto;
  }
  .wz-modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }

  /* Kaart: zorg dat afbeelding niet overloopt */
  .wz-wrapper {
    overflow: hidden;
  }

  /* Tooltip verbergen op touch */
  .wz-tooltip {
    display: none !important;
  }

  /* Voorkeur knoppen stapelen */
  .wz-vk-knoppen {
    flex-wrap: wrap;
  }
}

/* Tablet: modal iets smaller */
@media (max-width: 900px) and (min-width: 601px) {
  .wz-modal {
    max-width: 700px;
  }
  .wz-modal-foto-kolom {
    width: 48%;
  }
}

/* ── Omschrijving ──────────────────────────────── */
.wz-panel-omschrijving {
  padding: 14px 18px;
  font-size: .88rem;
  line-height: 1.65;
  color: #555;
  border-top: 1px solid #f0ede8;
}

.wz-modal-omschrijving {
  font-size: .88rem;
  line-height: 1.65;
  color: #555;
  margin: 0;
}

.wz-modal-omschrijving-sectie {
  padding: 16px 24px;
  border-top: 1px solid #f0ede8;
}

/* ── Omschrijving HTML opmaak ──────────────────── */
.wz-panel-omschrijving ul,
.wz-modal-omschrijving ul {
  margin: 6px 0 6px 18px;
  padding: 0;
}
.wz-panel-omschrijving ol,
.wz-modal-omschrijving ol {
  margin: 6px 0 6px 18px;
  padding: 0;
}
.wz-panel-omschrijving li,
.wz-modal-omschrijving li {
  margin-bottom: 3px;
  line-height: 1.5;
}
.wz-panel-omschrijving p,
.wz-modal-omschrijving p {
  margin: 0 0 8px;
}
.wz-panel-omschrijving p:last-child,
.wz-modal-omschrijving p:last-child {
  margin-bottom: 0;
}
.wz-panel-omschrijving strong,
.wz-modal-omschrijving strong { font-weight: 700; }
.wz-panel-omschrijving em,
.wz-modal-omschrijving em { font-style: italic; }

/* ── Legenda filter knoppen ─────────────────────── */
.wz-filter-btn { cursor:pointer; border-radius:20px; padding:3px 8px; transition:background .15s, opacity .15s; user-select:none; }
.wz-filter-btn:hover { background:rgba(255,255,255,.12); }
.wz-filter-btn.actief { background:rgba(255,255,255,.2); outline:2px solid rgba(255,255,255,.5); }
.wz-filter-btn.inactief { opacity:0.45; }
.wz-kavel.wz-gefilterd { display:none; }

/* ── Badge in body ───────────────────────────────── */
.wz-info-sectie { padding-bottom: 10px; }
.wz-info-sectie .wz-panel-badge { margin-top: 8px; display: inline-flex; }
.wz-kenmerken-sectie { padding-top: 4px; }

/* ── Responsive panel ────────────────────────────── */
@media (max-width: 640px) {

  /* Panel als fixed bottom sheet — onafhankelijk van wrapper */
  .wz-panel {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 62vh !important;
    transform: translateY(100%) !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(0,0,0,.28) !important;
    z-index: 9999 !important;
  }
  .wz-panel.open { transform: translateY(0) !important; }
  .wz-wrapper.panel-links .wz-panel { transform: translateY(100%) !important; }
  .wz-wrapper.panel-links .wz-panel.open { transform: translateY(0) !important; }

  /* Sleep-hendel bovenaan */
  .wz-panel-hd { border-radius: 18px 18px 0 0; }
  .wz-panel-hd::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(255,255,255,.45);
    border-radius: 2px;
    margin: 0 auto 14px;
  }

  /* Legenda kleiner op mobiel */
  .wz-legend { bottom: 8px; padding: 5px 10px; gap: 8px; font-size: .65rem; flex-wrap: nowrap; max-width: 90%; white-space: nowrap; }
  .wz-legend .wz-leg-dot { width: 9px; height: 9px; flex-shrink:0; }
  .wz-leg-item { gap: 5px; }
}

@media (max-width: 900px) and (min-width: 641px) {
  .wz-panel { width: 300px !important; }
}

/* ── Multi-kaart navigatie ───────────────────────── */
.wz-nav-bar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(20,30,22,.88);
  backdrop-filter: blur(8px);
  border-radius: 30px;
  padding: 6px 14px;
  z-index: 25;
  border: 1px solid rgba(255,255,255,.12);
  max-width: 90%;
}
.wz-terug-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 600;
  padding: 0 8px 0 0;
  border-right: 1px solid rgba(255,255,255,.2);
  white-space: nowrap;
}
.wz-terug-btn:hover { color: white; }
.wz-breadcrumb {
  font-size: .75rem;
  color: rgba(255,255,255,.8);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.wz-bc-item:hover { color: white; text-decoration: underline; }

/* Link-type klikvlak cursor */
.wz-kavel[data-type="link"] { cursor: pointer; }