/* ===== Kleuren & Variabelen ===== */
:root{
  --primary:#1351B4; --secondary:#007A8A; --accent:#C2410C; --ink:#0E1320;
  --bg:#FFFFFF; --muted:#F6F8FB; --border:#E2E8F0; --success:#047857; --info:#2563EB;
}

/* ===== Hero Sectie ===== */
.zv-container2{max-width:1120px; padding:0 16px}
.zv-hero2{position:relative;margin:0 0 18px;overflow:hidden;border:1px solid var(--border);background:linear-gradient(180deg,var(--muted) 0%, #fff 100%)}
.zv-hero2-bg{position:absolute;inset:0;background:radial-gradient(1200px 240px at 20% -20%, rgba(37,99,235,.12), transparent 60%), radial-gradient(900px 220px at 110% 10%, rgba(0,122,138,.10), transparent 60%);pointer-events:none}
.zv-hero2-grid{position:relative;display:grid;grid-template-columns:180px 1fr;gap:18px;padding:20px}
.zv-hero2-logo{width:160px;max-width:100%;height:auto;object-fit:contain;)}
.zv-hero2-title{margin:6px 0 4px;font-size:28px;line-height:1.15;color:var(--ink)}
.zv-hero2-sub{margin:0 0 10px;color:var(--secondary);font-weight:600}
.zv-hero2-bullets{display:flex;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.zv-hero2-bullets li{background:#E6F7F9;border:1px solid #CDECEF;color:var(--secondary);padding:6px 10px;border-radius:999px;font-weight:700;white-space:nowrap}

/* ===== Layout & Sidebar ===== */
.zv-wrap{display:grid;grid-template-columns:300px 1fr;gap:1.25rem;align-items:start}
.zv-sidebar{position:sticky;top:16px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:1rem;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.zv-filter .zv-filter-group{border-bottom:1px solid var(--border);padding:12px 0}
.zv-filter .zv-filter-group:last-child{border-bottom:0}
.zv-filter-head{font-weight:700;color:var(--ink);margin-bottom:.35rem}
.zv-filter label{display:block;margin:.25rem 0;color:var(--ink);font-size:.95rem}
.zv-filter em{color:var(--secondary);font-style:normal;font-size:.9rem}
.zv-filter-toggle{display:none;width:50%;background:#1351b48a;color:#fff;font-weight:700;border:none;border-radius:8px;padding:.75rem 1rem;margin-bottom:10px;cursor:pointer}

/* ===== Resultaten Kaarten ===== */
.zv-container{display:flex;flex-direction:column;gap:14px}
.zv-card{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;box-shadow:0 2px 6px rgba(0,0,0,.04)}
.zv-number{background:var(--primary);color:#fff;font-weight:800;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;flex-shrink:0}
.zv-logo{max-height:45px;max-width: 100%;width:auto;object-fit:contain;justify-self:center;}
.zv-info h3{margin:0 0 2px;color:var(--ink);font-size:1.75rem}
.zv-korting,.zv-zorgkeuze{margin:.15rem 0 0;color:var(--ink);font-size:.9rem}
.zv-extra{margin:.35rem 0 0;padding-left:18px;color:var(--ink);font-size:.9rem}
.zv-extra li{margin:.1rem 0}
.zv-price{font-size:2.1rem;font-weight:800;color:var(--ink)}
.zv-price .zv-price-int::before{content:"€";font-weight:700;margin-right:2px}
.zv-per{margin-left:4px;font-size:.9rem;color:#334155}
.zv-button{display:inline-block;text-decoration:none;background:#28af6a;color:#fff;font-weight:700;border-radius:8px;padding:.55rem 1.1rem;transition:.2s ease}
.zv-button:hover{background:#2563ebab;color:#fff}
.zv-empty{border:1px dashed var(--border);border-radius:10px;padding:18px;background:var(--muted);color:var(--ink)}
#zv-list.zv-loading{opacity:.5;transition:opacity .3s;pointer-events:none}

/* ===== Popup / Modal ===== */
.zv-popup-trigger{display:inline-block;margin-top:8px;color:var(--primary);text-decoration:underline;font-size:.9rem;font-weight:600;cursor:pointer}
.zv-popup-trigger:hover{text-decoration:none}
.zv-popup-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:20px;box-sizing:border-box}
.zv-popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(14,19,32,.6);backdrop-filter:blur(4px);cursor:pointer;z-index:999}
.zv-popup-container{position:relative;background:var(--bg);border-radius:16px;box-shadow:0 10px 25px rgba(0,0,0,.15);width:100%;max-width:800px;padding:2rem;z-index:1001;box-sizing:border-box}
.zv-popup-close{position:absolute;top:12px;right:12px;background:var(--muted);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;font-size:24px;line-height:28px;text-align:center;cursor:pointer;color:var(--ink);padding:0;transition:background .2s ease}
.zv-popup-close:hover{background:var(--primary);color:#fff}
.zv-popup-content-grid{display:grid;grid-template-columns:1.5fr 1.2fr;gap:2rem;margin-bottom:1.5rem}

/* Rechterkolom (kaartje) */
.zv-popup-right-col{background:#E6F7F9;border:1px solid #CDECEF;border-radius:12px;padding:16px}
.zv-popup-right-col .zv-logo{max-height:50px;width:auto;margin-bottom:.75rem;display:block}
.zv-popup-right-col h4{margin:0 0 .75rem;font-weight:800;color:#0E1320}
.zv-popup-right-col .zv-button.zv-pill{margin-top:12px;display:inline-flex;align-items:center;gap:.6rem;background:#1351B4;color:#fff;border-radius:999px;padding:.75rem 1.2rem;font-weight:800}
.zv-popup-right-col .zv-button.zv-pill::after{content:"➜";display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#1351B4;font-weight:800}

/* ===== Premie-opbouw (Rij-voor-rij) ===== */
/* Belangrijk: géén grid hier! De oude grid-styles zijn verwijderd */
.zv-price-breakdown{display:block}            /* neutraliseer oude grid-styling */
.zv-breakdown{text-align:left;margin-top:.25rem}
.zv-break-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:.25rem 0;font-size:.95rem}
.zv-break-row span:first-child{color:#475569}
.zv-break-row strong{font-weight:800}
.zv-break-total{border-top:1px solid var(--border);padding-top:.6rem;margin-top:.6rem;font-weight:800}

/* Pros/cons */
.zv-popup-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.zv-popup-pros-cons-block{background:var(--muted);border:1px dashed var(--border);border-radius:12px;padding:1.25rem}
.zv-popup-pros-cons-block h4{margin-top:0;font-size:1.05rem;color:var(--ink);margin-bottom:.75rem;font-weight:700}
.zv-popup-pros-cons-block ul{list-style:none;margin:0;padding:0}
.zv-popup-pros-cons-block ul li{margin-bottom:.5rem;color:var(--ink);font-size:.95rem;display:flex;align-items:flex-start;gap:8px}
.zv-popup-pros-cons-block ul.pros li::before{content:'✓';color:var(--success);font-weight:700;font-size:1.1em;margin-top:-2px}
.zv-popup-pros-cons-block ul.cons li::before{content:'✕';color:var(--accent);font-weight:700;font-size:1.1em;margin-top:-2px}
.zv-popup-main-info p{margin-bottom:1em;line-height:1.6}
.zv-popup-main-info h1,.zv-popup-main-info h2,.zv-popup-main-info h3{margin-top:1.2em;margin-bottom:.5em}
.zv-popup-main-info ul{list-style:disc;padding-left:20px;margin-bottom:1em}

/* Loader overlay tijdens filteren */
#zv-list{position:relative}
#zv-list.zv-loading{pointer-events:none}
#zv-list.zv-loading::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6)}
#zv-list.zv-loading::before{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:zvspin .7s linear infinite;z-index:1}
@keyframes zvspin{to{transform:rotate(360deg)}}

/* ===== Responsive ===== */
@media (max-width:960px){
  .zv-wrap{grid-template-columns:1fr}

.zv-sidebar{
    position: relative;
    padding: 0;
    background: none;
    box-shadow: none;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 12px;
  }

.zv-sidebar.active{
    border-color: var(--border);
    background: var(--bg);
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
  }

.zv-filter-toggle{
    display:block;
    width:50%;
    box-sizing:border-box;      
    margin-bottom:10px;
    background:#1351b48a;
    color:#fff;
    font-weight:700;
    border:none;
    border-radius:8px;
    padding:.75rem 1rem;
    cursor:pointer;
  }

.zv-filter{
    display:block;
    max-height:0;
    overflow:hidden;
    padding:0 1rem;
    border-top:1px solid var(--border);
    transition:max-height .25s ease, padding .25s ease;
    will-change:max-height;
  }

  .zv-sidebar.active .zv-filter{
    max-height:1000px;
    padding:1rem;
  }

}
@media (max-width:900px){
  .zv-hero2-grid{grid-template-columns:120px 1fr;padding:16px}
  .zv-hero2-title{font-size:22px}
}
@media (max-width:640px){
  .zv-hero2-grid{grid-template-columns:1fr}
  .zv-hero2-logo{width:120px}
  .zv-popup-content-grid,.zv-popup-pros-cons{grid-template-columns:1fr}
    .zv-popup-container {
        width: calc(100% - 32px); /* Iets minder marge voor meer ruimte */
        max-height: calc(100% - 32px); /* Maximale hoogte met boven- en ondermarge */
        padding: 1.25rem;
        
        /* --- De Fix --- */
        position: fixed; /* Zorgt voor juiste positionering t.o.v. het scherm */
        top: 16px; /* Start 16px vanaf de bovenkant */
        left: 50%; /* Essentieel voor de transform */
        transform: translateX(-50%); /* Centreert de popup horizontaal */
        overflow-y: auto; /* MAAKT DE POPUP SCROLLBAAR */
    }

    .zv-popup-body {
        /* Indien nodig: */
        /* max-height: 100%; */
        /* overflow-y: auto; */
    }

    .zv-popup-close {
        top: 10px;
        right: 10px;
    }
}

.zv-left, .zv-right {
    display: contents;
}

/* --- Desktop layout (Grid) --- */
.zv-card {
    display: grid;
    grid-template-columns: auto 130px 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "rank logo info price"
        "rank logo info button"
        "rank logo info link";
    gap: 10px 25px;
    align-items: center;
    position: relative; 
    padding-left: 0px; 
}

/* Plaats elk element in het grid */
.zv-card::before {
    content: attr(data-rank);
    grid-area: rank;
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    position: static;
    left: auto;
    top: auto;
    transform: none;
    margin-left:16px;
}

.zv-logo { grid-area: logo; }
.zv-info { grid-area: info; }
.zv-price { grid-area: price; text-align: right; }
.zv-button { grid-area: button; }
.zv-popup-trigger { grid-area: link; text-align: right; margin-top: 0; }
.zv-right { text-align: right; } 


/* --- Mobiele layout (vanaf 640px en kleiner) --- */
@media (max-width: 640px) {
    .zv-card {
        grid-template-columns: 1fr auto; 
        grid-template-areas:
            "logo   price"
            "info   info"
            "button button"
            "link   link";
        padding: 16px; 
        gap: 12px;
    }

    .zv-card::before {
        display: none;
    }

    .zv-logo {
        max-height: 36px;
       justify-self: start;
    }
    
    .zv-info {
        margin-top: 8px;
    }
    
    .zv-info h3 {
        font-size: 1.5rem; }

    .zv-price {
        font-size: 2.3rem; 
        align-self: start; 
    }
    
    .zv-button {
        width: 100%;
        text-align: center;
        padding-top: .75rem;
        padding-bottom: .75rem;
        font-size: 1.4rem;
    }

    .zv-popup-trigger {
        text-align: center; /* Centreer de 'Meer informatie' link */
        margin-top: 4px;
    }
}

ul.zv-extra {
    list-style-type: none;
    padding-left: 0;
}

ul.zv-extra li::before {
    content: '+';
    color: #50b83c; 
    font-weight: bold;
    margin-right: 8px;
}

/*
 * Zorgt voor een consistente layout van de simpele prijsweergave in de popup
 * (zonder premie-opbouw) op zowel desktop als mobiel.
 */

.zv-popup-right-col:has(.zv-price-label) {
    display: flex;
    flex-direction: column; 
    align-items: center;   
    gap: 1rem;             
    padding: 1.25rem 1rem;
    text-align: center;
}

.zv-popup-right-col .zv-price,
.zv-popup-right-col .zv-price-label,
.zv-popup-right-col .zv-button {
    margin: 0;
}

.zv-price .zv-price-decimal {
    font-size: 0.55em;      
    vertical-align: super;  
    font-weight: 600;         
}

/* ================================================= */
/* == Layout voor 'Totaal per maand' prijs in popup == */
/* ================================================= */

/* --- Desktop Layout (naast elkaar) --- */
.zv-price-line {
    display: flex;
    flex-wrap: wrap; /* Voor het geval het toch niet past */
    justify-content: space-between; /* Label links, prijs rechts */
    align-items: baseline; /* Lijn de onderkant van de tekst netjes uit */
    width: 100%;
    gap: 1rem; /* Ruimte tussen de elementen */
    margin-bottom: 1rem; /* Ruimte tot de knop */
}

.zv-price-line .zv-price-label {
    font-weight: 600;
    color: var(--ink);
}

.zv-price-line .zv-price {
    font-weight: 800;
    font-size: 1.8rem;
    line-height: 1;
}

/* --- Mobiele Layout (onder elkaar) --- */
@media (max-width: 640px) {
    .zv-price-line {
        flex-direction: column; 
        align-items: center;    
        text-align: center;
        gap: 0.25rem;         
    }

    .zv-price-line .zv-price {
        font-size: 2.3rem;
	margin:auto;
    }
}

.zv-popup-right-col h4 {
font-size: 1.2rem;
font-weight:500;
}

.zv-break-total {
font-size:1.1rem;
}

.zv-page--single .zv-card::before{
  display: none !important;
  content: none;
}

@media (min-width: 641px){
  .zv-page--single .zv-card{
    grid-template-columns: 130px 1fr auto;
    grid-template-areas:
      "logo info price"
      "logo info button"
      "logo info link";
  }
}

.zv-price .zv-vanaf{
  font-size: .55em !important;
  font-weight: 600;
  opacity: .8;
  margin-right: 6px;
  line-height: 1;
  vertical-align: baseline;
}

@media (max-width: 640px){
  .zv-price .zv-vanaf{ font-size: .5em !important; }
}

.zv-price{
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}

@media (min-width: 641px){
  .zv-page--single .zv-card{
    padding-left: 16px;
  }
}