/* 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:1300px; max-height:78vh; 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:60%; background:#111; display:flex; flex-direction:column; flex-shrink:0; }
.wz-modal-foto-kolom .wz-slider { flex:1; min-height:200px; position:relative; cursor:zoom-in; }
.wz-modal-foto-kolom .wz-slider-track { height:100% !important; }
.wz-modal-foto-kolom .wz-slider-track img { height:100% !important; object-fit:contain !important; background:#111; }

/* 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; min-height: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; }

/* Gegroepeerde specs: sectie-titel + key-value rijen (matched aan voorbeeld-screenshot) */
.wz-modal-spec-groups { margin-bottom:16px; }
.wz-sg-section { margin-bottom:10px; }
.wz-sg-section:last-child { margin-bottom:0; }
.wz-sg-titel { font-size:1.05rem; font-weight:700; color:#1a1a1a; padding:14px 0 8px; border-bottom:1px solid #ebe8e2; margin-bottom:0; }
.wz-sg-section:first-child .wz-sg-titel { padding-top:0; }
.wz-sg-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:8px 0; font-size:.9rem; line-height:1.4; }
.wz-sg-lbl { color:#666; flex-shrink:0; }
.wz-sg-val { color:#1a1a1a; font-weight:500; text-align:right; }

/* Vrije kenmerken — bullet lijst */
.wz-modal-bullets { list-style:none; padding:0; margin:0 0 16px; }
.wz-modal-bullets li { position:relative; padding:5px 0 5px 22px; font-size:.88rem; color:#3a3a3a; line-height:1.45; border-bottom:1px solid #f4f1ec; }
.wz-modal-bullets li:last-child { border-bottom:none; }
.wz-modal-bullets li::before { content:'✓'; position:absolute; left:0; top:5px; color:#34b45a; font-weight:700; }

/* 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:grid; grid-template-columns:repeat(auto-fit, minmax(58px, 1fr)); gap:5px; }
.wz-vk-btn { display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 4px; 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:24px; height:24px; border-radius:50%; background:#e0dbd0; display:flex; align-items:center; justify-content:center; font-size:.82rem; 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:.66rem; font-weight:600; color:#666; text-align:center; line-height:1.2; white-space:nowrap; }
.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: grid regelt het wrappen automatisch */
}

/* 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; }

/* ── Thumbnails in modal slider ───────────────────────────── */
.wz-modal-thumbs {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #111;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 #222;
}
.wz-modal-thumbs::-webkit-scrollbar { height: 6px; }
.wz-modal-thumbs::-webkit-scrollbar-track { background: #222; }
.wz-modal-thumbs::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
.wz-modal-thumb {
  width: 72px;
  height: 54px;
  flex-shrink: 0;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: #222;
  cursor: pointer;
  opacity: 0.5;
  border: 2px solid transparent;
  transition: opacity .15s, border-color .15s;
}
.wz-modal-thumb:hover { opacity: 0.85; }
.wz-modal-thumb.active { opacity: 1; border-color: white; }

/* Dots verbergen in modal als thumbs aanwezig zijn */
.wz-modal-foto-kolom.heeft-thumbs .wz-slider-dots { display: none !important; }

/* Bij smal scherm: kleinere thumbs */
@media (max-width: 640px) {
  .wz-modal-thumb { width: 56px; height: 42px; }
  .wz-modal-thumbs { padding: 6px 8px; }
}

/* ── Lightbox ────────────────────────────────────────────── */
.wz-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.93);
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.wz-lightbox.open { display: flex; }
.wz-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.wz-lightbox-close,
.wz-lightbox-prev,
.wz-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,.12);
  border: none;
  color: white;
  font-size: 28px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.wz-lightbox-close:hover,
.wz-lightbox-prev:hover,
.wz-lightbox-next:hover { background: rgba(255,255,255,.25); }
.wz-lightbox-close { top: 20px; right: 20px; font-size: 22px; }
.wz-lightbox-prev  { left: 20px; top: 50%; transform: translateY(-50%); }
.wz-lightbox-next  { right: 20px; top: 50%; transform: translateY(-50%); }
.wz-lightbox-lbl {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0,0,0,.5);
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
}
.wz-lightbox.solo .wz-lightbox-prev,
.wz-lightbox.solo .wz-lightbox-next,
.wz-lightbox.solo .wz-lightbox-lbl { display: none; }

@media (max-width: 640px) {
  .wz-lightbox { padding: 20px; }
  .wz-lightbox-close,
  .wz-lightbox-prev,
  .wz-lightbox-next { width: 40px; height: 40px; font-size: 22px; }
  .wz-lightbox-close { top: 10px; right: 10px; }
  .wz-lightbox-prev  { left: 10px; }
  .wz-lightbox-next  { right: 10px; }
}