/* ── KDV Kosten Calculator – Stylesheet ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+3:wght@400;600&display=swap');

:root {
  --kdv-bruin:      #654a1f;
  --kdv-bruin-dark: #4a3415;
  --kdv-salmon:     #e19b7c;
  --kdv-salmon-lt:  #f5d5cc;
  --kdv-beige:      #f3e9e2;
  --kdv-groen:      #6e8b5e;
  --kdv-groen-dark: #5f7a50;
  --kdv-grijs:      #6c6c6c;
  --kdv-grijs-lt:   #e8e8e8;
  --kdv-wit:        #ffffff;
  --kdv-laag:       #c8a200;
  --kdv-midden:     #654a1f;
  --kdv-hoog:       #666;
  --radius:         8px;
  --shadow:         0 2px 12px rgba(0,0,0,.08);
}

.kdv-app {
    font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
    color: #654a1f;
    max-width: 1200px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.kdv-app h1, .kdv-app h2, .kdv-app h3, .kdv-app h4 {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    margin: 0 0 12px !important;
    color: var(--kdv-bruin) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.kdv-app h2 { font-size: 1.35rem !important; }
.kdv-app h3 { font-size: 1.05rem !important; }
/* Avada's kale h3 (h3 { font-family: var(--h3_typography-font-family) }, spec 0,0,1)
   maakt onze koppen cursief. wpautop sluit #kdv-app voortijdig, dus .kdv-app-scope grijpt
   niet op de tool-content. Daarom scopen we op de container-classes rond de koppen
   (spec 0,1,1) -> wint altijd van het thema, onafhankelijk van de wrapper. */
.kdv-panel h1, .kdv-panel h2, .kdv-panel h3, .kdv-panel h4,
.kdv-results h1, .kdv-results h2, .kdv-results h3, .kdv-results h4,
.kdv-modal h2, .kdv-modal h3, .kdv-modal h4,
.kdv-pakket-header h3 {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important;
}
.kdv-panel__header h2, .kdv-pakket-header h3 {
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
}
/* Demo: Avada's responsive-typography overrulet onze h3-grootte/kleur met !important.
   Forceer pakket-koppen terug naar bruin + kleiner, gelijk aan de volledige tool. */
.kdv-pakket-header h3 {
    color: var(--kdv-bruin) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* Panels */
.kdv-panel { background: var(--kdv-wit); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin-bottom: 24px; }
.kdv-panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.kdv-panel__header h2 { margin: 0; font-size: 1.25rem; color: var(--kdv-bruin); }

/* Buttons */
.kdv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 20px; border: none; cursor: pointer; font-size: 14px !important; font-weight: 600; transition: all .15s; font-family: 'Inter', sans-serif !important; text-decoration: none !important; line-height: 1.4; box-sizing: border-box; }
.kdv-btn--primary   { background: var(--kdv-groen); color: #fff !important; border-radius: 16px 45px 45px 16px; }
.kdv-btn--primary:hover { background: #5f7a50 !important; color: #fff !important; text-decoration: none !important; }
.kdv-btn--secondary { background: var(--kdv-salmon); color: #fff !important; border-radius: 16px 45px 45px 16px; }
.kdv-btn--secondary:hover { background: #c8845f !important; color: #fff !important; text-decoration: none !important; }
.kdv-btn--ghost     { background: transparent; color: var(--kdv-bruin) !important; border: 1px solid var(--kdv-bruin); border-radius: 16px 45px 45px 16px; }
.kdv-btn--ghost:hover { background: var(--kdv-beige) !important; color: var(--kdv-bruin) !important; text-decoration: none !important; }

/* Package tabel */
.kdv-pkg-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.kdv-pkg-table thead th { text-align:left; padding:10px 14px; font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600; color:var(--kdv-bruin); text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--kdv-bruin); }
.kdv-pkg-table tbody tr { border-bottom:1px solid var(--kdv-grijs-lt); transition:background .1s; }
.kdv-pkg-table tbody tr:hover { background:var(--kdv-beige); }
.kdv-pkg-table tbody tr.kdv-pkg-row { cursor:pointer; }
.kdv-pkg-table tbody tr.kdv-pkg-row:hover { background:var(--kdv-salmon-lt) !important; }
.kdv-pkg-table td { padding:12px 14px; color:var(--kdv-bruin); vertical-align:middle; }
.kdv-pkg-table td strong { font-weight:600; }
.kdv-pkg-loc { font-weight:400; color:var(--kdv-bruin); font-size:.85rem; }
.kdv-pkg-table td:nth-child(4) { white-space:nowrap; }
/* Uitlijning: kolommen 2-6 (Hoofdjaar, Uurtarief, Vergelijkingsjaar, Uurtarief, Kinderen) + kruisje gecentreerd; Naam en Bijgewerkt links */
.kdv-pkg-table thead th:nth-child(n+2):nth-child(-n+6),
.kdv-pkg-table tbody td:nth-child(n+2):nth-child(-n+6),
.kdv-pkg-table thead th:last-child,
.kdv-pkg-table tbody td:last-child { text-align:center; }
.kdv-btn-del { background:none; border:none; cursor:pointer; color:var(--kdv-bruin); font-size:1rem; padding:4px 8px; border-radius:4px; line-height:1; }
.kdv-btn-del:hover { background:#fdecea; color:#c0392b; }

/* Package list (legacy - verborgen) */
.kdv-package-list { display: grid; gap: 12px; }
.kdv-package-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; background: var(--kdv-beige); border-radius: 6px; border-left: 4px solid var(--kdv-bruin); }
.kdv-package-item__info h4 { margin: 0 0 4px; font-size: .95rem; color: var(--kdv-bruin); }
.kdv-package-item__info p  { margin: 0; font-size: .8rem; color: var(--kdv-bruin); }
.kdv-package-item__actions { display: flex; gap: 8px; }
.kdv-package-item__actions button { padding: 6px 12px; font-size: .8rem; }

/* Form */
.kdv-form-block { background: var(--kdv-beige); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.kdv-form-block--basis   { background: var(--kdv-bruin); }
.kdv-form-block--basis h3 { color: #fff; font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; margin:0 0 16px; font-family:'Inter',sans-serif; }
.kdv-form-block--basis .kdv-form-field label { color: rgba(255,255,255,0.85); }
.kdv-form-block--basis .kdv-form-field input,
.kdv-form-block--basis .kdv-form-field select { background: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.3); }
.kdv-form-block--huidig  { background: #f0d9cc; border-left: 4px solid var(--kdv-salmon); }
.kdv-form-block--vergelijk { background: #f3e9e2; border-left: 4px solid var(--kdv-grijs-lt); }
.kdv-form-block h3 { margin: 0 0 16px; font-size: 1.1rem; color: var(--kdv-bruin); font-family: 'Inter', sans-serif; }
.kdv-form-block--basis h3 { color: #fff !important; font-size:.85rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.kdv-form-row { display: flex; flex-wrap: wrap; gap: 16px; }
.kdv-form-field { display: flex; flex-direction: column; gap: 6px; min-width: 160px; flex: 1; }
.kdv-form-field label { font-size: .8rem; font-weight: 600; color: var(--kdv-bruin); text-transform: uppercase; letter-spacing: .04em; }
.kdv-form-field input, .kdv-form-field select { padding: 10px 12px; border: 1px solid var(--kdv-grijs-lt); border-radius: 6px; font-size: .95rem; background: #fff; }
.kdv-form-field input:focus, .kdv-form-field select:focus { outline: none; border-color: var(--kdv-bruin); }
.kdv-readonly { display: block; padding: 10px 12px; background: #ddd; border-radius: 6px; font-size: .95rem; color: #555; }
.kdv-form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* Notices */
.kdv-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: .9rem; }
.kdv-notice--warning { background: #fff3cd; border-left: 4px solid #c8a200; color: #6d4c00; }
.kdv-notice--info    { background: var(--kdv-beige); border-left: 4px solid var(--kdv-salmon); color: var(--kdv-bruin); margin-top: 12px; }

/* Results */
.kdv-results { animation: kdvFadeIn .3s ease; }
@keyframes kdvFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }

/* Rapport header */
.kdv-rapport-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 28px; background: var(--kdv-wit); border-bottom: 2px solid var(--kdv-bruin); margin-bottom: 24px; }
.kdv-rapport-logo { height: 48px; }
.kdv-rapport-meta { text-align: right; font-size: .8rem; color: var(--kdv-bruin); line-height: 1.8; }
.kdv-rapport-meta strong { color: var(--kdv-salmon); }

/* Sections */
.kdv-section { background: var(--kdv-wit); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; margin-bottom: 24px; }
.kdv-section h2 { font-size: 1.6rem; color: var(--kdv-bruin); margin-top: 0; font-weight: 700; }
.kdv-chart-subtitle { color: var(--kdv-salmon); font-weight: 600; margin-top: -8px; margin-bottom: 16px; font-size: .95rem; }
/* Form blokken jaar — grid zodat kolommen in beide blokken uitlijnen */
.kdv-form-block--jaar .kdv-form-row {
    display: grid;
    grid-template-columns: 90px 90px 110px 100px auto;
    gap: 16px;
    align-items: end;
}
.kdv-form-block--jaar .kdv-form-field { min-width: 0; overflow: hidden; }
.kdv-form-block--jaar .kdv-form-field label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 6px;
    font-size: .78rem;
}
.kdv-form-block--jaar input[type="number"],
.kdv-form-block--jaar select { width: 100%; }

/* Pakket header */
.kdv-pakket-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: nowrap; }
.kdv-pakket-header h3 { margin: 0; font-size: 1.1rem; color: var(--kdv-bruin); white-space: nowrap; flex-shrink: 0; }
.kdv-pakket-naam { padding: 6px 10px; border: 1px solid var(--kdv-grijs-lt); border-radius: 6px; font-size: .9rem; flex: 1; min-width: 0; background:#fff; }
.kdv-pakket-naam:focus { outline: none; border-color: var(--kdv-bruin); }

/* Grafieken alleen bij jaarverschil */
.kdv-alleen-jaarverschil { display: block; }

/* Tarief row */
.kdv-tarief-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.kdv-tarief-row #tarief-mode-a input,
.kdv-tarief-row #pct-mode-a input { width: 110px; }
/* Pakket B uurtarief ook breder */
#f-uurtarief-b { width: 110px; }
.kdv-tarief-row #pct-mode-a { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.kdv-toggle-wrap { display:flex; gap:0; border-radius:6px; overflow:hidden; border:1px solid var(--kdv-grijs-lt); width:fit-content; flex-shrink:0; }
.kdv-toggle-btn { padding:5px 12px; border:none; background:var(--kdv-wit); color:var(--kdv-bruin); font-size:.78rem; font-weight:600; cursor:pointer; transition:all .15s; }
.kdv-toggle-btn.active { background:var(--kdv-bruin); color:#fff; }
.kdv-toggle-btn:hover:not(.active) { background:var(--kdv-beige); }
.kdv-pct-symbool { font-size:1rem; font-weight:600; color:var(--kdv-bruin); }
.kdv-pct-resultaat { display:inline-block; font-size:.88rem; font-weight:700; color:var(--kdv-bruin); }

/* Onderbouwing — kleiner lettertype */
.kdv-onderbouwing-tekstveld { margin-bottom:20px; }
.kdv-onderbouwing-tekstveld label { display:block; margin-bottom:8px; font-size:.85rem; }
.kdv-onderbouwing-tekstveld textarea { width:100%; padding:10px 12px; border:1px solid var(--kdv-grijs-lt); border-radius:6px; font-size:.85rem; font-family:inherit; resize:vertical; }
.kdv-onderbouwing-tekstveld textarea:focus { outline:none; border-color:var(--kdv-bruin); }
.kdv-onderbouwing-stappen { padding-left:20px; margin:12px 0 16px; }
.kdv-onderbouwing-stappen li { margin-bottom:6px; font-size:.82rem; line-height:1.6; color: var(--kdv-bruin); }
#sec-onderbouwing p { font-size:.82rem; color: var(--kdv-bruin); }
#sec-onderbouwing h3 { font-size:.95rem; color:var(--kdv-bruin); margin:20px 0 8px; }
#sec-onderbouwing .kdv-sumtable td,
#sec-onderbouwing .kdv-sumtable th { font-size:.82rem; padding:8px 12px; }
.kdv-section h3 { font-size:1rem; color:var(--kdv-bruin); margin:20px 0 10px; }

/* Toelichting onder grafieken */
.kdv-toelichting { font-size:.82rem; color:var(--kdv-bruin); background:var(--kdv-beige); border-left:3px solid var(--kdv-grijs-lt); padding:8px 12px; border-radius:4px; margin-top:8px; line-height:1.6; }
.kdv-toelichting a { color:var(--kdv-bruin); }

/* Kernvraag / cursief kader bij grafieken */
.kdv-results .kdv-kern { font-style:italic !important; font-size:.92rem !important; color:var(--kdv-bruin) !important; background:var(--kdv-beige) !important; border-left:3px solid var(--kdv-salmon) !important; padding:10px 14px !important; border-radius:4px !important; margin:12px 0 4px !important; line-height:1.6 !important; }

/* Dynamische uitkomst-zin per grafiek (feitelijk-neutraal) */
.kdv-results .kdv-uitkomst { font-size:.9rem !important; font-weight:600 !important; color:var(--kdv-bruin) !important; background:#faf6f2 !important; border-left:3px solid var(--kdv-salmon) !important; padding:10px 14px !important; border-radius:4px !important; margin:12px 0 6px !important; line-height:1.5 !important; }
.kdv-results .kdv-uitkomst:empty { display:none !important; }

/* Indexeringsnoot */
.kdv-index-noot { display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#f7f3ee; border-left:3px solid var(--kdv-bruin); padding:10px 16px; border-radius:4px; margin-bottom:20px; font-size:.88rem; color:var(--kdv-bruin); }
.kdv-btn-link { background:none; border:none; color:var(--kdv-bruin); font-size:.88rem; font-weight:600; cursor:pointer; text-decoration:underline; padding:0; }
.kdv-btn-link:hover { color:var(--kdv-salmon); }

/* Popover */
.kdv-popover-overlay { position:fixed; inset:0; background:rgba(0,0,0,.15); z-index:999999; }
.kdv-popover { background:#fff; border-radius:var(--radius); box-shadow:0 8px 40px rgba(0,0,0,.22); display:flex; flex-direction:column; z-index:1000000; overflow:hidden; }
.kdv-popover-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px 16px; border-bottom:1px solid var(--kdv-grijs-lt); }
.kdv-popover-header h3 { margin:0; color:var(--kdv-bruin); font-size:1.1rem; }
.kdv-popover-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--kdv-bruin); padding:4px 8px; border-radius:4px; }
.kdv-popover-close:hover { background:var(--kdv-grijs-lt); }
.kdv-popover-body { overflow-y:auto; padding:20px 24px; }
.kdv-popover-body table { width:100%; border-collapse:collapse; font-size:.85rem; }
.kdv-popover-body th { background:var(--kdv-bruin); color:#fff; padding:8px 12px; text-align:right; font-weight:600; position:sticky; top:0; }
.kdv-popover-body th:first-child { text-align:left; }
.kdv-popover-body td { padding:6px 12px; text-align:right; border-bottom:1px solid var(--kdv-grijs-lt); }
.kdv-popover-body td:first-child { text-align:left; font-weight:600; }
.kdv-popover-body tr:nth-child(even) td { background:#faf8f5; }
.kdv-popover-body tr.kdv-klasse-grens td { border-top:2px solid var(--kdv-bruin); }
.kdv-zone-laag  { color:var(--kdv-laag); font-size:.75rem; font-weight:700; }
.kdv-zone-midden{ color:var(--kdv-bruin); font-size:.75rem; font-weight:700; }
.kdv-zone-hoog  { color:var(--kdv-bruin); font-size:.75rem; font-weight:700; }

.kdv-chart-wrap { position: relative; height: 540px; margin-top: 20px; padding-bottom: 20px; }
.kdv-chart-wrap canvas { max-height: 540px; }

/* Inkomensklasse badges */
.kdv-inkomen-legenda { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.kdv-badge { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.kdv-badge--laag   { background: #fff8e1; color: var(--kdv-laag); border: 1px solid var(--kdv-laag); }
.kdv-badge--midden { background: #f3ece0; color: var(--kdv-bruin); border: 1px solid var(--kdv-bruin); }
.kdv-badge--hoog   { background: #f0f0f0; color: var(--kdv-hoog); border: 1px solid #bbb; }

/* Samenvatting tabel */
.kdv-sumtable { width: 100%; border-collapse: collapse; }
.kdv-sumtable td, .kdv-sumtable th { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--kdv-grijs-lt); }
.kdv-sumtable td:first-child, .kdv-sumtable th:first-child { text-align: left; }
.kdv-sumtable th { font-weight: 700; font-size: .85rem; color: var(--kdv-bruin); }
.kdv-sumtable tr:last-child td { border-bottom: none; }
.kdv-pct-pos { color: #c0392b; }
.kdv-pct-neg { color: #27ae60; }

/* Export panel */
.kdv-export-panel { background: var(--kdv-beige); border-radius: var(--radius); padding: 24px; margin-top: 8px; }
.kdv-export-panel h3 { margin-top: 0; color: var(--kdv-bruin); }
.kdv-export-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin: 16px 0; }
.kdv-export-checks label { display: flex; align-items: center; gap: 8px; font-size: .9rem; cursor: pointer; }
.kdv-export-actions { display: flex; gap: 12px; flex-wrap: wrap; }
#kdv-pdf-status { margin-top: 12px; font-size: .85rem; }

/* Intro sectie */
.kdv-intro { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--kdv-grijs-lt); }
.kdv-intro h2 { font-family:'Inter',sans-serif; font-size:1.4rem; color:var(--kdv-bruin); margin:0 0 7px; }
.kdv-intro .kdv-intro-eyebrow { display:flex !important; align-items:center !important; gap:8px !important; font-family:'Inter',sans-serif !important; font-size:.72rem !important; font-weight:700 !important; letter-spacing:.09em !important; text-transform:uppercase !important; color:var(--kdv-salmon) !important; margin:0 0 7px !important; }
.kdv-intro .kdv-eyebrow-streep { width:20px !important; height:2px !important; background:var(--kdv-salmon) !important; display:inline-block !important; flex-shrink:0 !important; }
.kdv-intro .kdv-intro-subline { font-size:.84rem !important; color:#8c7350 !important; font-weight:700 !important; margin:0 0 16px !important; line-height:1.5 !important; }
.kdv-intro > p { color:var(--kdv-bruin); font-size:.95rem; margin:0 0 20px; }
.kdv-intro-opties { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.kdv-intro-optie { display:flex; gap:14px; background:var(--kdv-beige); border-radius:var(--radius); padding:16px; }
.kdv-intro-nr { flex-shrink:0; width:28px; height:28px; background:var(--kdv-bruin); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-weight:600; font-size:.85rem; margin-top:2px; }
.kdv-intro-optie strong { display:block; font-family:'Inter',sans-serif; font-size:.9rem; color:var(--kdv-bruin); margin-bottom:6px; }
.kdv-intro-optie p { margin:0; font-size:.82rem; color:var(--kdv-bruin); line-height:1.6; }
.kdv-intro-doel { font-size:.85rem; color:var(--kdv-bruin); font-style:italic; margin:0; }
@media(max-width:640px) { .kdv-intro-opties { grid-template-columns:1fr; } }
.kdv-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999999; display:flex; align-items:center; justify-content:center; padding:20px; }
.kdv-modal { background:#fff; border-radius:var(--radius); box-shadow:0 8px 40px rgba(0,0,0,.18); width:100%; max-width:480px; }
.kdv-modal-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px 16px; border-bottom:1px solid var(--kdv-grijs-lt); }
.kdv-modal-header h3 { margin:0; color:var(--kdv-bruin); font-family:'Inter',sans-serif; font-size:1.1rem; }
.kdv-modal-close { background:none; border:none; font-size:1.2rem; cursor:pointer; color:var(--kdv-bruin); padding:4px 8px; border-radius:4px; }
.kdv-modal-close:hover { background:var(--kdv-grijs-lt); }
.kdv-modal-body { padding:20px 24px; display:flex; flex-direction:column; gap:16px; }
.kdv-modal-meta { background:var(--kdv-beige); border-radius:6px; padding:12px 14px; font-size:.85rem; color:var(--kdv-bruin); line-height:1.8; }
.kdv-modal-meta strong { color:var(--kdv-bruin); }
.kdv-modal-footer { display:flex; gap:12px; padding:16px 24px 20px; border-top:1px solid var(--kdv-grijs-lt); }

/* Responsive */
@media (max-width: 640px) {
  /* Geen eigen horizontale buitenmarge op .kdv-app: op de representatieve
     pagina-opzet (Fusion Builder 100%-stretch-rij) levert Avada al ~22px
     padding via .fusion-column-wrapper (inline style, niet overrulebaar).
     Eigen padding hier stapelde daarbovenop -> te krap. Zie CHANGELOG 1.5.49. */
  .kdv-form-row { flex-direction: column; }
  /* De pakket-rij (Jaar/Dagen per week/Uren per dag) had vaste pixelkolommen
     (90+90+110+100+auto = 390px+gaps) die simpelweg niet op een telefoon
     passen, los van alle padding-discussie. Nu 2 flexibele kolommen die wrappen. */
  .kdv-form-block--jaar .kdv-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  /* Bruto uurtarief (toggle + input) past niet in een halve kolom naast de
     andere velden -> eigen volle rij geven op mobiel. */
  .kdv-form-block--jaar .kdv-tarief-field { grid-column: 1 / -1; }
  .kdv-tarief-row { flex-wrap: wrap; }
  .kdv-rapport-header { flex-direction: column; gap: 12px; }
  .kdv-rapport-meta { text-align: left; }
  .kdv-panel__header { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* .kdv-sumtable wordt hergebruikt voor meerdere tabellen (Samenvatting,
     Bronnen en aannames, Inkomensklassen) met wisselend aantal kolommen.
     Op mobiel: geen brede tabel, maar elke rij als kaart. De eerste cel is
     het label (vet); overige cellen krijgen -indien aanwezig- hun eigen
     kolomkop als mini-label via data-label (zie calculator.js). */
  .kdv-sumtable, .kdv-sumtable thead, .kdv-sumtable tbody, .kdv-sumtable tr, .kdv-sumtable th, .kdv-sumtable td { display: block; width: auto !important; }
  .kdv-sumtable thead { display: none; }
  .kdv-sumtable tr { padding: 10px 0; border-bottom: 1px solid var(--kdv-grijs-lt); }
  .kdv-sumtable tr:last-child { border-bottom: none; }
  .kdv-sumtable td { padding: 2px 0 !important; text-align: left !important; border: none !important; }
  .kdv-sumtable td:first-child { font-weight: 700; color: var(--kdv-bruin); margin-bottom: 4px; }
  .kdv-sumtable td[data-label] { display: flex; justify-content: space-between; gap: 12px; }
  .kdv-sumtable td[data-label]::before { content: attr(data-label); font-weight: 400; color: var(--kdv-bruin); opacity: .65; }
}

@media (max-width: 480px) {
  .kdv-panel, .kdv-section, .kdv-export-panel { padding: 20px 16px !important; }
}

.kdv-field-hint { display:block; font-size:.75rem; color:var(--kdv-bruin); opacity:.7; margin-top:4px; font-style:italic; }
.kdv-badge-concept { display:inline-block; font-size:.7rem; font-weight:600; background:var(--kdv-salmon); color:#fff; border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle; font-family:"Inter",sans-serif; }

.kdv-kot-max-row { display:block; margin-top:14px; padding-top:14px; border-top:1px solid rgba(101,74,31,0.15); }
.kdv-kot-max-row label { font-size:.8rem; font-weight:600; color:var(--kdv-bruin); text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.kdv-kot-max-row input { width:100px; padding:8px 10px; border:1px solid var(--kdv-grijs-lt); border-radius:6px; font-size:.95rem; background:#fff; }
.kdv-kot-max-row .kdv-field-hint { font-size:.75rem; color:var(--kdv-bruin); opacity:.7; font-style:italic; }
/* Compacte KOT-tariefweergave + 'tarief wijzigen' */
.kdv-kot-eyebrow { display:block !important; font-size:.72rem !important; font-weight:700 !important; letter-spacing:.05em !important; text-transform:uppercase !important; color:#8c7350 !important; margin-bottom:8px !important; }
.kdv-kot-display { display:flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important; }
.kdv-kot-display .kdv-kot-bedrag { font-size:1.5rem !important; font-weight:800 !important; color:var(--kdv-bruin) !important; line-height:1 !important; }
.kdv-kot-display .kdv-badge-concept { margin-left:0 !important; }
.kdv-kot-wijzig { color:var(--kdv-groen) !important; font-weight:700 !important; font-size:.9rem !important; text-decoration:underline !important; text-underline-offset:3px !important; cursor:pointer !important; display:inline-flex !important; align-items:center !important; gap:5px !important; }
.kdv-kot-wijzig:hover { color:var(--kdv-groen-dark) !important; }
.kdv-kot-pen { font-style:normal !important; }
/* KOT popup */
.kdv-kot-popup-hint { margin:0 !important; font-size:.82rem !important; color:#8c7350 !important; line-height:1.5 !important; }
.kdv-kot-popup-field { display:flex !important; flex-direction:column !important; gap:8px !important; align-items:flex-start !important; }
.kdv-kot-popup-label { font-size:.72rem !important; font-weight:700 !important; letter-spacing:.04em !important; text-transform:uppercase !important; color:var(--kdv-bruin) !important; }
.kdv-kot-popup-input { width:100% !important; box-sizing:border-box !important; padding:11px 13px !important; border:1.5px solid #d8c4b6 !important; border-radius:8px !important; font-size:1.05rem !important; color:var(--kdv-bruin) !important; font-weight:700 !important; background:#fff !important; }
.kdv-kot-popup-reset { color:var(--kdv-groen) !important; font-size:.83rem !important; font-weight:700 !important; text-decoration:underline !important; text-underline-offset:3px !important; cursor:pointer !important; }
.kdv-kot-popup-acties { display:flex !important; gap:10px !important; justify-content:flex-end !important; }
/* PDF-voortgang popup */
.kdv-pdf-modal-box { max-width:380px !important; }
.kdv-pdf-modal-body { display:block !important; text-align:center !important; padding:34px 28px 28px !important; }
.kdv-pdf-spinner { display:flex !important; gap:9px !important; justify-content:center !important; margin-bottom:20px !important; }
.kdv-pdf-spinner span { width:13px !important; height:13px !important; border-radius:50% !important; background:var(--kdv-salmon) !important; display:inline-block !important; animation:kdvPdfDot 1s infinite ease-in-out both !important; }
.kdv-pdf-spinner span:nth-child(1) { animation-delay:-.32s !important; }
.kdv-pdf-spinner span:nth-child(2) { animation-delay:-.16s !important; }
@keyframes kdvPdfDot { 0%,80%,100% { transform:scale(.5); opacity:.4; } 40% { transform:scale(1); opacity:1; } }
.kdv-pdf-check { font-size:2.6rem !important; line-height:1 !important; color:var(--kdv-groen) !important; margin-bottom:12px !important; }
.kdv-pdf-modal-body h3 { margin:0 0 8px !important; color:var(--kdv-bruin) !important; font-family:'Inter',sans-serif !important; font-size:1.15rem !important; }
.kdv-pdf-modal-body p { margin:0 0 20px !important; color:var(--kdv-bruin) !important; font-size:.9rem !important; line-height:1.5 !important; }
.kdv-pdf-modal-actions { display:flex !important; gap:10px !important; justify-content:center !important; flex-wrap:wrap !important; }
/* Anchor-knop bovenin resultaten */
.kdv-results-topbar { display:flex; justify-content:flex-start; margin:4px 0 18px; }

/* BSO type toggle */
.kdv-type-toggle { display:flex; gap:6px; margin-bottom:16px; }
.kdv-type-btn { padding:5px 16px; border:1px solid var(--kdv-bruin); border-radius:20px; background:#fff; color:var(--kdv-bruin); font-size:.82rem; font-weight:600; cursor:pointer; font-family:'Inter',sans-serif; transition:all .15s; }
.kdv-type-btn.active { background:var(--kdv-bruin); color:#fff; }
.kdv-form-block--huidig .kdv-type-btn.active { background:var(--kdv-salmon); border-color:var(--kdv-salmon); color:#fff; }
.kdv-form-block--vergelijk .kdv-type-btn.active { background:var(--kdv-bruin); color:#fff; }

/* BSO tabel */
.kdv-bso-tabel { width:100%; border-collapse:collapse; margin-top:12px; }
.kdv-bso-tabel thead th { font-family:'Inter',sans-serif; font-size:.78rem; font-weight:600; color:var(--kdv-bruin); text-transform:uppercase; letter-spacing:.04em; padding:6px 10px; border-bottom:1px solid rgba(101,74,31,0.2); text-align:left; }
.kdv-bso-tabel tbody td { padding:8px 10px; vertical-align:middle; }
.kdv-bso-label { font-weight:600; color:var(--kdv-bruin); font-size:.9rem; width:90px; }
.kdv-bso-tabel input { width:90px; padding:7px 10px; border:1px solid var(--kdv-grijs-lt); border-radius:6px; font-size:.9rem; }

/* Demo banner */
.kdv-notice--demo { background:#f0f7ff; border-left:4px solid #4a90d9; color:#1a4a7a; }
.kdv-notice--demo a { color:#1a4a7a; font-weight:600; text-decoration:underline; }

/* Demo modal acties */
.kdv-demo-modal-acties { display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.kdv-demo-modal-acties .kdv-btn { flex:1; text-align:center; min-width:140px; }

/* Demo preview tabel */
.kdv-demo-preview { margin-top:16px; border:1px solid var(--kdv-grijs-lt); border-radius:8px; overflow:hidden; }
.kdv-demo-preview__header { padding:12px 16px; background:var(--kdv-beige); font-size:.88rem; color:var(--kdv-bruin); display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--kdv-grijs-lt); }
.kdv-demo-preview__lock { font-size:1rem; }
.kdv-demo-preview__table { filter:blur(2px); opacity:.5; pointer-events:none; margin:0; }
.kdv-demo-preview__table th, .kdv-demo-preview__table td { padding:10px 12px; }
.kdv-demo-preview__acties { padding:14px 16px; background:var(--kdv-beige); border-top:1px solid var(--kdv-grijs-lt); display:flex; gap:10px; }
.kdv-btn--sm { padding:5px 14px; font-size:.82rem; }

/* Opslaan bevestiging */
.kdv-notice--success { background:#f0faf0; border-left:4px solid #5f7a50; color:#2d4a20; margin-top:12px; }
.kdv-notice--success a { color:#3d6b2e; font-weight:600; text-decoration:underline; }

/* Datum kolom overzicht */
.kdv-pkg-datum { color: var(--kdv-bruin); font-size: .82rem; opacity: .75; white-space: nowrap; }

#kdv-rapport-meta { display:flex; flex-direction:column; gap:2px; text-align:right; }
.kdv-meta-naam { font-size:.95rem; font-weight:700; color:var(--kdv-bruin); }
.kdv-meta-locatie { font-size:.82rem; font-weight:600; color:var(--kdv-bruin); opacity:.7; }
.kdv-meta-pakketten { font-size:.78rem; color:var(--kdv-bruin); opacity:.6; }

/* BSO nul-knop */
.kdv-bso-nul { background:var(--kdv-beige); border:1px solid var(--kdv-bruin); border-radius:4px; color:var(--kdv-bruin); cursor:pointer; padding:5px 10px; font-size:.85rem; font-weight:600; line-height:1; transition:all .15s; }
.kdv-bso-nul:hover { background:var(--kdv-salmon); border-color:var(--kdv-salmon); color:#fff; }
.kdv-bso-reset { background:var(--kdv-beige); border:1px solid var(--kdv-grijs-lt); border-radius:4px; color:var(--kdv-bruin); cursor:pointer; padding:5px 10px; font-size:.85rem; font-weight:600; line-height:1; transition:all .15s; margin-left:4px; }
.kdv-bso-reset:hover { background:var(--kdv-bruin); border-color:var(--kdv-bruin); color:#fff; }
.kdv-bso-tabel td:last-child { width:80px; padding:4px; white-space:nowrap; }

/* BSO nieuwe tabel layout */
.kdv-bso-top-row { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.kdv-bso-tabel--nieuw { width:100%; border-collapse:collapse; }
.kdv-bso-tabel--nieuw th { font-size:.78rem; font-weight:600; color:var(--kdv-bruin); text-transform:uppercase; letter-spacing:.04em; padding:6px 10px 8px; text-align:left; border-bottom:2px solid var(--kdv-grijs-lt); }
.kdv-bso-tabel--nieuw td { padding:8px 6px; vertical-align:middle; }
.kdv-bso-tabel--nieuw .kdv-bso-label { font-size:.88rem; font-weight:600; color:var(--kdv-bruin); white-space:nowrap; padding-right:12px; }
.kdv-bso-tabel--nieuw input[type="number"] { width:90px; padding:6px 8px; border:1px solid var(--kdv-grijs-lt); border-radius:6px; font-size:.9rem; }
.kdv-bso-tabel--nieuw input[type="number"]:focus { outline:none; border-color:var(--kdv-bruin); }
.kdv-bso-tabel--nieuw tr:not(:last-child) td { border-bottom:1px solid var(--kdv-grijs-lt); }

/* PDF-only: elementen verbergen tijdens genereren */
.kdv-pdf-mode .kdv-no-pdf { display:none !important; }
#kdv-inkomensklassen-tabel { margin-bottom: 18px; }


/* ===== Demo/Avada-pariteit (kop-maten) =====================================
   Avada's responsive-typography forceert 28px + thema-kleur op kale koppen van
   de tool en wint met !important van onze reguliere kop-regels. Hieronder
   forceren we elke tool-kop terug naar de bedoelde maat/kleur, exact gelijk aan
   de volledige (ingelogde) tool. =========================================== */
.kdv-intro h2              { font-size: 1.4rem  !important; color: var(--kdv-bruin) !important; line-height: 1.3 !important; }
.kdv-panel__header h2      { font-size: 1.25rem !important; color: var(--kdv-bruin) !important; line-height: 1.3 !important; }
.kdv-form-block--basis h3  { font-size: .85rem  !important; color: #fff !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .06em !important; line-height: 1.3 !important; }
.kdv-pakket-header h3      { font-size: 1.1rem  !important; color: var(--kdv-bruin) !important; font-weight: 600 !important; line-height: 1.3 !important; }
.kdv-section h2           { font-size: 1.6rem  !important; color: var(--kdv-bruin) !important; font-weight: 700 !important; line-height: 1.3 !important; }
.kdv-section h3           { font-size: 1rem    !important; color: var(--kdv-bruin) !important; line-height: 1.3 !important; }
#sec-onderbouwing h3       { font-size: .95rem  !important; color: var(--kdv-bruin) !important; line-height: 1.3 !important; }
.kdv-export-panel h3       { font-size: 1.1rem  !important; color: var(--kdv-bruin) !important; line-height: 1.3 !important; }
.kdv-modal-header h3       { font-size: 1.1rem  !important; color: var(--kdv-bruin) !important; line-height: 1.3 !important; }
.kdv-popover-header h3     { font-size: 1.1rem  !important; color: var(--kdv-bruin) !important; line-height: 1.3 !important; }
.kdv-package-item__info h4 { font-size: .95rem  !important; color: var(--kdv-bruin) !important; line-height: 1.3 !important; }

/* ===================================================================
   FAQ  —  [kdv_faq] shortcode (los plaatsbaar, los van de tool)
   Hergebruikt de merkkleuren uit :root. Titel met !important zodat
   Avada's responsive-typography hem niet vergroot.
   =================================================================== */
.kdv-faq{
    max-width:820px; margin:0 auto; color:#3a2f22; line-height:1.6;
    font-family:'Source Sans 3','Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
.kdv-faq *{ box-sizing:border-box; }
.kdv-faq .kdv-faq__title{
    font-family:'Inter','Source Sans 3',system-ui,sans-serif !important;
    color:var(--kdv-bruin) !important; font-size:1.9rem !important;
    font-weight:700 !important; line-height:1.25 !important; margin:0 0 6px !important;
}
.kdv-faq__intro{ color:#6b5a45; margin:0 0 22px; font-size:1.02rem; }
.kdv-faq__item{
    border:1px solid #e7d9cc; border-left:4px solid var(--kdv-salmon);
    border-radius:10px; background:#fff; margin:0 0 12px; overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.kdv-faq__item[open]{ border-left-color:var(--kdv-bruin); box-shadow:0 6px 18px rgba(101,74,31,.08); }
.kdv-faq__item summary{
    list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px;
    padding:16px 20px; font-family:'Inter','Source Sans 3',sans-serif;
    font-weight:500; font-size:1.06rem; color:var(--kdv-bruin);
}
.kdv-faq__item summary::-webkit-details-marker{ display:none; }
.kdv-faq__item summary:hover{ background:var(--kdv-beige); }
.kdv-faq__item summary:focus-visible{ outline:3px solid var(--kdv-salmon); outline-offset:-3px; border-radius:8px; }
.kdv-faq__chevron{
    flex:0 0 auto; width:22px; height:22px; margin-left:auto; border-radius:50%;
    background:var(--kdv-beige); color:var(--kdv-bruin); display:grid; place-items:center;
    font-size:13px; line-height:1; transition:transform .2s ease, background .2s ease;
}
.kdv-faq__item[open] .kdv-faq__chevron{ transform:rotate(45deg); background:var(--kdv-salmon-lt); }
.kdv-faq__a{ padding:0 20px 18px 20px; color:#473a2b; }
.kdv-faq__a p{ margin:0; }
.kdv-faq__a a{ color:var(--kdv-groen); text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ .kdv-faq__item, .kdv-faq__chevron{ transition:none; } }

/* FAQ — categorie-koppen (h3). !important + font-style:normal tegen Avada's
   kale cursieve h3 en responsive-typography. */
.kdv-faq__cat{
    font-family:'Inter','Source Sans 3',system-ui,sans-serif !important;
    font-style:normal !important; color:var(--kdv-bruin) !important;
    font-size:1.18rem !important; font-weight:500 !important; line-height:1.3 !important;
    margin:30px 0 14px !important; padding-bottom:7px;
    border-bottom:2px solid var(--kdv-salmon-lt);
}
.kdv-faq__cat:first-of-type{ margin-top:16px !important; }
.kdv-faq__cat-intro{ color:#6b5a45; margin:-4px 0 14px; font-size:.97rem; }
.kdv-faq__cat-intro a{ color:var(--kdv-groen); text-decoration:underline; }

/* FAQ — wervend advies/CTA-blok in sectie 2 */
.kdv-faq__cta{
    background:#fff; border:1px solid #e7d9cc; border-left:4px solid var(--kdv-salmon);
    border-radius:12px; padding:20px 22px; margin:0 0 16px;
}
.kdv-faq__cta-lead{
    font-family:'Inter','Source Sans 3',system-ui,sans-serif; font-weight:500;
    color:var(--kdv-bruin); font-size:1.08rem; line-height:1.4; margin:0 0 8px;
}
.kdv-faq__cta-body{ color:#473a2b; margin:0 0 16px; }
.kdv-faq__cta-actions{ display:flex; flex-wrap:wrap; gap:14px 18px; align-items:center; }
.kdv-faq__cta-btn{
    display:inline-block; background:var(--kdv-groen); color:#fff !important;
    text-decoration:none !important; font-family:'Inter','Source Sans 3',sans-serif;
    font-weight:600; font-size:.95rem; padding:9px 18px; border-radius:8px;
    transition:background .2s ease;
}
.kdv-faq__cta-btn:hover{ background:var(--kdv-groen-dark); }
.kdv-faq__cta-link{ color:var(--kdv-groen) !important; font-weight:600; text-decoration:underline; }

/* FAQ-anchor offset: landt 200px onder de bovenrand (sticky header) */
#veelgestelde-vragen{ scroll-margin-top:200px; }

/* Demo: context-blok over de (concept) maximum uurtarieven 2027 */
.kdv-tarief-info{
    background:var(--kdv-beige); border-left:4px solid var(--kdv-salmon);
    border-radius:10px; padding:18px 22px; margin:0 0 22px; color:#473a2b; line-height:1.55;
}
.kdv-tarief-info__title{
    font-family:'Inter','Source Sans 3',system-ui,sans-serif !important; font-style:normal !important;
    color:var(--kdv-bruin) !important; font-weight:600 !important; font-size:1.05rem !important;
    line-height:1.3 !important; margin:0 0 8px !important;
}
.kdv-tarief-info p{ margin:0 0 10px; }
.kdv-tarief-info p:last-child{ margin-bottom:0; }
.kdv-tarief-info strong{ color:var(--kdv-bruin); font-weight:700; }

/* ── Kostprognose-module ([kdv_kostprognose]) ───────────────────────────── */
.kdv-kostprognose{ font-family:'Source Sans 3',system-ui,sans-serif; color:#654a1f; max-width:840px; margin:0 auto; line-height:1.55; background:var(--kdv-wit); border-radius:var(--radius); box-shadow:var(--shadow); padding:30px 34px; box-sizing:border-box; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.kdv-kostprognose *{ box-sizing:border-box; }
.kdv-kp-titel{ font-family:'Inter','Source Sans 3',sans-serif !important; font-style:normal !important; color:var(--kdv-bruin) !important; font-weight:600 !important; font-size:1.45rem !important; margin:0 0 8px !important; line-height:1.25 !important; }
.kdv-kp-intro{ margin:0 0 10px; }
.kdv-kp-badge{ display:inline-block; font-size:.82rem; color:#654a1f; background:var(--kdv-beige); border-radius:8px; padding:5px 11px; margin:0 0 16px; }
.kdv-kp-meta{ display:flex; flex-wrap:wrap; gap:14px; margin:0 0 18px; }
.kdv-kp-meta label{ display:flex; flex-direction:column; font-size:.82rem; font-weight:600; color:var(--kdv-bruin); gap:4px; }
.kdv-kp-meta input, .kdv-kp-meta select{ font-size:.95rem; font-weight:400; padding:7px 9px; border:1px solid #d9ccc0; border-radius:8px; background:#fff; color:#654a1f; min-width:0; width:100%; max-width:220px; box-sizing:border-box; }
.kdv-kp-meta input:focus, .kdv-kp-meta select:focus{ outline:2px solid var(--kdv-salmon); border-color:var(--kdv-salmon); }
.kdv-kp-tabel{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:.95rem; margin:0 0 6px; }
.kdv-kp-tabel col.kp-c1{ width:56%; } .kdv-kp-tabel col.kp-c2,.kdv-kp-tabel col.kp-c3{ width:22%; }
.kdv-kp-tabel th{ text-align:right; font-weight:600; color:var(--kdv-bruin); padding:7px 6px; border-bottom:2px solid var(--kdv-bruin); }
.kdv-kp-tabel th:first-child{ text-align:left; }
.kdv-kp-tabel td{ padding:5px 6px; border-bottom:1px solid #ece2da; vertical-align:middle; }
.kdv-kp-tabel td:not(.kdv-kp-label){ text-align:right; }
.kdv-kp-tabel input{ width:100%; min-width:0; box-sizing:border-box; text-align:right; font-size:.95rem; padding:5px 7px; border:1px solid #d9ccc0; border-radius:7px; background:#fff; color:#654a1f; }
.kdv-kp-tabel input:focus{ outline:2px solid var(--kdv-salmon); border-color:var(--kdv-salmon); }
.kdv-kp-sub td{ font-size:.85rem; color:#654a1f; padding-top:2px; padding-bottom:6px; }
.kdv-kp-sub td:first-child{ padding-left:18px; }
.kdv-kp-tot-loon td{ font-weight:600; color:var(--kdv-bruin); background:var(--kdv-beige); border-bottom:1px solid #e0d2c6; }
.kdv-kp-info{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; min-width:16px; border-radius:50%; border:1px solid var(--kdv-salmon); background:#fff; color:var(--kdv-bruin); font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:11px; line-height:1; cursor:help; padding:0; margin-left:7px; vertical-align:middle; }
.kdv-kp-tip{ position:absolute; bottom:135%; left:50%; transform:translateX(-50%); width:230px; max-width:60vw; background:var(--kdv-bruin); color:#fff; font-family:'Source Sans 3',sans-serif; font-style:normal; font-size:.78rem; font-weight:400; line-height:1.45; text-align:left; padding:9px 11px; border-radius:9px; opacity:0; visibility:hidden; transition:opacity .12s; z-index:40; pointer-events:none; }
.kdv-kp-tip::after{ content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--kdv-bruin); }
.kdv-kp-info:hover .kdv-kp-tip, .kdv-kp-info:focus .kdv-kp-tip{ opacity:1; visibility:visible; }
.kdv-kp-gewicht{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:14px 0 4px; font-size:.92rem; color:#654a1f; }
.kdv-kp-gewicht label{ font-weight:600; color:var(--kdv-bruin); display:inline-flex; align-items:center; }
.kdv-kp-gewicht input[type=range]{ flex:1; min-width:140px; accent-color:var(--kdv-salmon); }
.kdv-kp-gew-out{ font-weight:600; min-width:42px; text-align:right; color:var(--kdv-bruin); }
.kdv-kp-gew-rest{ font-size:.82rem; color:#654a1f; }
.kdv-kp-rendement input[type=number]{ width:90px; min-width:0; box-sizing:border-box; text-align:right; font-size:.95rem; padding:6px 8px; border:1px solid #d9ccc0; border-radius:7px; color:#654a1f; }
.kdv-kp-rendement-suffix{ font-weight:600; color:var(--kdv-bruin); }
.kdv-kp-resultaat--tarief{ margin-top:6px; }
.kdv-kp-resultaat--tarief .kdv-kp-kaart{ background:#fff; border:1px solid #ece2da; border-left:3px solid var(--kdv-groen); }
.kdv-kp-resultaat--tarief .kdv-kp-kaart--mid{ background:var(--kdv-groen); }
.kdv-kp-resultaat--tarief .kdv-kp-kaart--mid .kdv-kp-kaart-lbl, .kdv-kp-resultaat--tarief .kdv-kp-kaart--mid .kdv-kp-kaart-val{ color:#fff; }
.kdv-kp-resultaat{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 0; }
.kdv-kp-kaart{ background:var(--kdv-beige); border-radius:12px; padding:15px 16px; text-align:center; }
.kdv-kp-kaart--mid{ background:var(--kdv-salmon-lt); }
.kdv-kp-kaart-lbl{ font-size:.82rem; color:#654a1f; margin-bottom:3px; }
.kdv-kp-kaart-val{ font-family:'Inter',sans-serif; font-size:1.7rem; font-weight:600; color:var(--kdv-bruin); }
.kdv-kp-tarief{ margin:18px 0 0; padding:15px 16px; background:#fff; border:1px solid #ece2da; border-left:4px solid var(--kdv-groen); border-radius:0 10px 10px 0; }
.kdv-kp-tarief-lbl{ display:block; font-weight:600; color:var(--kdv-bruin); margin-bottom:8px; }
.kdv-kp-tarief-rij{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.95rem; }
.kdv-kp-tarief-rij input{ width:90px; min-width:0; box-sizing:border-box; text-align:right; font-size:.95rem; padding:6px 8px; border:1px solid #d9ccc0; border-radius:7px; }
.kdv-kp-tarief-uit strong{ color:var(--kdv-groen-dark); }
.kdv-kp-tarief-noot{ font-size:.82rem; color:#654a1f; margin:9px 0 0; }
.kdv-kp-uitleg{ margin:22px 0 0; padding-top:16px; border-top:1px solid #ece2da; }
.kdv-kp-uitleg h3{ font-family:'Inter',sans-serif !important; font-style:normal !important; color:var(--kdv-bruin) !important; font-weight:600 !important; font-size:1.1rem !important; margin:0 0 8px !important; }
.kdv-kp-uitleg p{ margin:0 0 10px; font-size:.92rem; }
.kdv-kp-bron{ font-size:.82rem !important; color:#654a1f; }
@media (max-width:560px){
  .kdv-kp-resultaat{ grid-template-columns:1fr; }
  .kdv-kp-meta{ flex-direction:column; gap:12px; }
  .kdv-kp-meta input, .kdv-kp-meta select{ width:100%; min-width:0; box-sizing:border-box; font-size:16px; height:40px; }

  /* Tabel op mobiel: geen 3 krappe kolommen naast elkaar, maar elke rij als blok.
     Let op: niet elke eerste cel heeft de klasse .kdv-kp-label (bv. subtotaal-
     en totaalrijen), dus we sturen op kolompositie i.p.v. die klasse. */
  .kdv-kp-tabel, .kdv-kp-tabel tbody, .kdv-kp-tabel tr, .kdv-kp-tabel td { display:block; width:auto !important; }
  .kdv-kp-tabel thead{ display:none; }
  .kdv-kp-tabel tr{ padding:12px 0; border-bottom:1px solid #ece2da; }
  .kdv-kp-tabel td{ padding:0; border-bottom:none; text-align:left !important; }
  .kdv-kp-tabel td:nth-child(1){ font-weight:600; color:#654a1f; margin-bottom:8px; font-size:.9rem; }
  .kdv-kp-tabel td:nth-child(2), .kdv-kp-tabel td:nth-child(3){ display:inline-block; width:48% !important; vertical-align:top; }
  .kdv-kp-tabel td:nth-child(2){ margin-right:4%; }
  .kdv-kp-tabel td:nth-child(2)::before{ content:"laag %"; display:block; font-size:.72rem; color:#654a1f; opacity:.65; margin-bottom:3px; }
  .kdv-kp-tabel td:nth-child(3)::before{ content:"hoog %"; display:block; font-size:.72rem; color:#654a1f; opacity:.65; margin-bottom:3px; }
  .kdv-kp-tabel input{ width:100%; min-width:0; box-sizing:border-box; font-size:16px; line-height:1.2; height:38px; padding:4px 8px; }
  /* Subtotaal- en totaalrijen: geen vet label, geen laag/hoog-preffix (staat al in de context) */
  .kdv-kp-sub td:nth-child(1){ font-weight:400; opacity:.75; font-size:.85rem; }
  .kdv-kp-sub td:nth-child(2)::before, .kdv-kp-sub td:nth-child(3)::before,
  .kdv-kp-tot-loon td:nth-child(2)::before, .kdv-kp-tot-loon td:nth-child(3)::before{ content:none; }
}

@media (max-width:480px){
  .kdv-kostprognose{ padding:18px 14px; }
  .kdv-kp-tarief-rij input{ width:100%; max-width:110px; box-sizing:border-box; font-size:16px; height:38px; }
}

/* Kostprognose: vergrendelde (historische) velden -- alleen-lezen */
.kdv-kp-tabel input:read-only{ background:#f3eee9; color:#9c8d7d; cursor:not-allowed; border-color:#e4d8cd; }
.kdv-kp-gewicht input[type=range]:disabled{ opacity:.45; cursor:not-allowed; }
.kdv-kp-locked .kdv-kp-badge{ background:#efe6dc; color:#6b5a44; }

.kdv-kp-uitleg h4{ font-family:'Inter',sans-serif !important; font-style:normal !important; color:#654a1f !important; font-weight:600 !important; font-size:.98rem !important; margin:16px 0 4px !important; }

/* Werkelijk-kolom (alleen zichtbaar bij een historisch jaar) */
.kdv-kp-tabel .kp-werk-col{ display:none; }
.kdv-kostprognose.kp-toon-werk .kdv-kp-tabel .kp-werk-col{ display:table-cell; }
.kdv-kostprognose.kp-toon-werk .kdv-kp-tabel col.kp-c1{ width:40%; }
.kdv-kostprognose.kp-toon-werk .kdv-kp-tabel col.kp-c2,
.kdv-kostprognose.kp-toon-werk .kdv-kp-tabel col.kp-c3,
.kdv-kostprognose.kp-toon-werk .kdv-kp-tabel col.kp-c4{ width:20%; }
.kdv-kp-vergelijk{ display:none; margin:14px 0 0; padding:14px 16px; background:var(--kdv-beige); border-radius:10px; }
.kdv-kostprognose.kp-toon-werk .kdv-kp-vergelijk{ display:block; }
.kdv-kp-verg-rij{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:3px 0; font-size:.95rem; color:#654a1f; }
.kdv-kp-verg-rij strong{ font-variant-numeric:tabular-nums; }
.kdv-kp-verg-afw{ border-top:1px solid #e4d8cd; margin-top:4px; padding-top:7px; }
.kdv-kp-verg-afw strong{ color:var(--kdv-bruin); font-size:1.05rem; }
.kdv-kp-verg-noot{ margin:8px 0 0 !important; font-size:.8rem !important; color:#654a1f !important; }

/* Cumulatieve terugblik 2020-2026 */
.kdv-kp-cumulatief{ margin:18px 0 0; padding:14px 16px; background:var(--kdv-beige); border-radius:10px; }
.kdv-kp-cumulatief h4{ font-family:'Inter',sans-serif !important; font-style:normal !important; color:var(--kdv-bruin) !important; font-weight:600 !important; font-size:1rem !important; margin:0 0 8px !important; }

/* ---- Kostprognose: uitsplitsing CAO/inflatie (v1.5.20) ---- */
.kdv-kp-driver{ margin:18px 0 0; padding:14px 16px; background:var(--kdv-beige); border-radius:10px; }
.kdv-kp-driver h4{ font-family:'Inter',sans-serif !important; font-style:normal !important; color:var(--kdv-bruin) !important; font-weight:600 !important; font-size:1rem !important; margin:0 0 10px !important; }
.kdv-kostprognose .kdv-kp-drivertabel{ width:100% !important; border-collapse:collapse !important; font-size:.92rem; color:#654a1f; margin:0 !important; }
.kdv-kostprognose .kdv-kp-drivertabel th{ text-align:right !important; font-weight:600 !important; color:#654a1f !important; font-size:.8rem !important; padding:4px 6px !important; border:none !important; border-bottom:1px solid #e4d8cd !important; background:transparent !important; }
.kdv-kostprognose .kdv-kp-drivertabel th:first-child{ text-align:left !important; }
.kdv-kostprognose .kdv-kp-drivertabel td{ text-align:right !important; padding:5px 6px !important; border:none !important; border-bottom:1px solid #efe6dc !important; font-variant-numeric:tabular-nums; background:transparent !important; }
.kdv-kostprognose .kdv-kp-drivertabel td:first-child{ text-align:left !important; }
.kdv-kostprognose .kdv-kp-drivertabel .kp-dc-w{ color:var(--kdv-groen-dark) !important; font-weight:600 !important; }
.kdv-kostprognose .kdv-kp-drivertabel .kdv-kp-dc-tot td{ border-top:1px solid #e4d8cd !important; border-bottom:none !important; font-weight:600 !important; padding-top:7px !important; }
.kdv-kp-bars{ margin:16px 0 0; }
.kdv-kp-bar-rij{ display:flex; align-items:center; gap:10px; margin:0 0 9px; }
.kdv-kp-bar-lbl{ flex:0 0 54px; max-width:54px; font-size:.82rem; color:#654a1f; text-align:right; }
.kdv-kp-bar-track{ position:relative; flex:1 1 auto; height:18px; background:#fff; border:1px solid #e4d8cd; border-radius:5px; }
.kdv-kp-bar-band{ position:absolute; top:0; bottom:0; left:0; width:0; min-width:3px; background:rgba(101,74,31,.20); border-left:2px solid var(--kdv-bruin); border-right:2px solid var(--kdv-bruin); border-radius:3px; box-sizing:border-box; }
.kdv-kp-bar-mark{ position:absolute; top:-3px; bottom:-3px; left:0; width:3px; margin-left:-1px; background:var(--kdv-groen); border-radius:2px; box-shadow:0 0 0 2px rgba(255,255,255,.75); }
.kdv-kp-bar-as{ display:flex; justify-content:space-between; margin-left:64px; font-size:.72rem; color:#654a1f; }
.kdv-kp-bar-legenda{ margin:9px 0 0 !important; font-size:.78rem !important; color:#654a1f !important; display:flex; align-items:center; }
.kdv-kp-leg-band{ display:inline-block; width:22px; height:11px; background:rgba(101,74,31,.20); border:1px solid var(--kdv-bruin); border-radius:2px; margin-right:5px; }
.kdv-kp-leg-mark{ display:inline-block; width:4px; height:13px; background:var(--kdv-groen); border-radius:2px; margin:0 5px 0 14px; }

/* ---- Kostprognose: tarieventool-stijl (v1.5.22) ---- */
.kdv-kp-head{ margin:0 0 18px; padding:0 0 18px; border-bottom:1px solid var(--kdv-grijs-lt); }
.kdv-kp-eyebrow{ display:flex !important; align-items:center !important; gap:8px !important; font-family:'Inter',sans-serif !important; font-size:.72rem !important; font-weight:700 !important; letter-spacing:.09em !important; text-transform:uppercase !important; color:var(--kdv-salmon) !important; margin:0 0 8px !important; }
.kdv-kp-eyebrow-streep{ width:20px !important; height:2px !important; background:var(--kdv-salmon) !important; display:inline-block !important; flex-shrink:0 !important; }
.kdv-kp-subline{ font-size:.84rem !important; color:#654a1f !important; font-weight:700 !important; margin:0 0 14px !important; line-height:1.5 !important; }
@media(max-width:600px){ .kdv-kostprognose{ padding:20px 18px; } }
@media(max-width:480px){ .kdv-kostprognose{ padding:18px 14px; } }

/* inflatie-inhaal: werkelijk-kolom n.v.t. */
.kdv-kostprognose .kdv-kp-na{ text-align:right !important; color:#b3a595; }

/* v1.5.28 - gelockte (readonly) numerieke velden: spinner-pijltjes verbergen */
.kdv-kostprognose input[type="number"][readonly]::-webkit-outer-spin-button,
.kdv-kostprognose input[type="number"][readonly]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.kdv-kostprognose input[type="number"][readonly]{ -moz-appearance:textfield; appearance:textfield; }

/* v1.5.29 - kostprognose PDF-export */
.kdv-kp-acties{ margin:4px 0 24px; }
.kdv-kp-pdf-knop{ display:inline-flex; align-items:center; gap:8px; background:#6e8b5e; color:#fff; border:none; border-radius:8px; padding:11px 22px; font-size:15px; font-weight:600; cursor:pointer; transition:background .15s ease; }
.kdv-kp-pdf-knop:hover{ background:#5d7a4f; }
.kdv-kostprognose.kp-pdf-mode .kdv-kp-eyebrow,
.kdv-kostprognose.kp-pdf-mode .kdv-kp-titel,
.kdv-kostprognose.kp-pdf-mode .kdv-kp-subline,
.kdv-kostprognose.kp-pdf-mode .kdv-kp-badge,
.kdv-kostprognose.kp-pdf-mode .kdv-kp-meta,
.kdv-kostprognose.kp-pdf-mode .kp-no-pdf,
.kdv-kostprognose.kp-pdf-mode .kdv-kp-info{ display:none !important; }
.kp-only-pdf{ display:none; }
.kdv-kostprognose.kp-pdf-mode .kp-only-pdf{ display:block; }
.kdv-kp-pdf-titel{ font-size:24px; font-weight:700; color:#654a1f; margin:0 0 12px; line-height:1.2; }

/* v1.5.32 - weging-badges + uitleg-streep weg in PDF */
.kdv-kp-weegbadges{ display:inline-flex; flex-wrap:wrap; gap:8px; align-items:center; }
.kdv-kp-weegbadge{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:.85rem; font-weight:600; line-height:1.2; }
.kdv-kp-weegbadge strong{ font-weight:700; }
.kdv-kp-weegbadge--loon{ background:#f3e9e2; color:#654a1f; }
.kdv-kp-weegbadge--ov{ background:#eef2ea; color:#6e8b5e; }
.kdv-kostprognose.kp-pdf-mode .kdv-kp-uitleg{ border-top:none; padding-top:0; }

/* v1.5.33 - slider verbergen in PDF (badges tonen percentages) */
.kdv-kostprognose.kp-pdf-mode .kdv-kp-gewicht input[type=range]{ display:none !important; }

/* v1.5.42 - Tariefschaar-banner (witte achtergrond, roze links, Buitenhek-link inline) */
.kdv-tariefschaar-banner { margin: 0 0 22px; padding: 18px 22px; background: #fff; border: 1px solid var(--kdv-salmon-lt); border-left: 6px solid var(--kdv-salmon); border-radius: 8px; box-shadow: 0 1px 3px rgba(101,74,31,.08); }
.kdv-tariefschaar-banner__title { margin: 0 0 6px; font-size: 1.12rem; font-weight: 700; color: var(--kdv-bruin); letter-spacing: -.01em; }
.kdv-tariefschaar-banner__body { margin: 0 0 12px; font-size: .95rem; line-height: 1.5; color: var(--kdv-bruin); }
.kdv-tariefschaar-banner__body strong { color: var(--kdv-bruin-dark); }
.kdv-tariefschaar-banner__body em { font-style: italic; }
.kdv-tariefschaar-banner__links { margin: 0; }
.kdv-tariefschaar-banner a { color: var(--kdv-salmon); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
.kdv-tariefschaar-banner a:hover { color: var(--kdv-bruin); }