/* ============================================================
   Bespaarwijzer Pro — Component Styles
   ============================================================ */

/* Progress indicator */
.bw-progress { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:2rem; flex-wrap:wrap; }
.bw-prog-step { display:flex; align-items:center; gap:0.375rem; padding:0.375rem 0.75rem; font-size:0.8rem; font-weight:600; color:var(--text-muted); transition:all 0.3s; }
.bw-prog-step .num { width:26px; height:26px; border-radius:50%; background:var(--border); color:var(--text-muted); display:flex; align-items:center; justify-content:center; font-size:0.75rem; font-weight:700; transition:all 0.3s; }
.bw-prog-step.active .num { background:var(--green-700); color:#fff; }
.bw-prog-step.done .num { background:var(--green-500); color:#fff; }
.bw-prog-step.active { color:var(--green-900); }
.bw-prog-step.done { color:var(--green-700); }
.bw-prog-line { width:24px; height:2px; background:var(--border); }
@media(max-width:600px) { .bw-prog-step .lbl { display:none; } .bw-prog-line { width:12px; } }

/* Panel */
.bw-panel { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:2rem; animation:fadeIn 0.35s ease; }
.bw-panel-title { font-size:1.25rem; margin-bottom:0.5rem; }
.bw-panel-sub { color:var(--text-light); font-size:0.9rem; margin-bottom:1.5rem; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Fields */
.bw-field { margin-bottom:1.25rem; }
.bw-field > label { display:block; font-weight:700; font-size:0.875rem; margin-bottom:0.5rem; }
.bw-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px) { .bw-row { grid-template-columns:1fr; } }
.bw-input { width:100%; padding:0.75rem 1rem; border:2px solid var(--border); border-radius:var(--radius-sm); font-family:var(--font-body); font-size:1rem; outline:none; transition:border-color 0.2s; }
.bw-input:focus { border-color:var(--green-500); }
.bw-hint { font-size:0.75rem; color:var(--text-muted); margin-top:0.25rem; display:block; }
.bw-hint-box { background:var(--warmtefonds-light); border:1px solid #90CAF9; border-radius:var(--radius-sm); padding:0.875rem 1rem; font-size:0.85rem; margin:1rem 0; }

/* Tile selectors */
.bw-tiles { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:0.625rem; }
.bw-tiles-sm { grid-template-columns:repeat(auto-fit, minmax(100px, 1fr)); }
.bw-tile { display:flex; flex-direction:column; align-items:center; gap:0.375rem; padding:1rem 0.75rem; border:2px solid var(--border); border-radius:var(--radius-sm); background:#fff; cursor:pointer; font-family:inherit; font-size:0.9rem; font-weight:600; color:var(--text); transition:all 0.2s; }
.bw-tile:hover { border-color:var(--green-400); background:var(--green-50); }
.bw-tile.sel { border-color:var(--green-700); background:var(--green-50); box-shadow:0 0 0 1px var(--green-700); }
.bw-tile .ico { font-size:1.5rem; }
.bw-svg { width:56px; height:44px; flex-shrink:0; }
.bw-tiles-sm .bw-tile { padding:0.625rem 0.5rem; font-size:0.8rem; }

/* Energy label tiles */
.bw-label-tiles { display:flex; gap:0.375rem; flex-wrap:wrap; }
.bw-ltile { width:38px; height:38px; border-radius:8px; border:2px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.85rem; cursor:pointer; transition:all 0.2s; color:var(--lc, #666); font-family:inherit; }
.bw-ltile:hover { border-color:var(--lc); }
.bw-ltile.sel { background:var(--lc); color:#fff; border-color:var(--lc); }

/* Measures list */
.bw-measure { border:2px solid var(--border); border-radius:var(--radius-sm); margin-bottom:0.75rem; transition:border-color 0.2s; }
.bw-measure.active { border-color:var(--green-500); }
.bw-measure-head { display:flex; align-items:center; justify-content:space-between; padding:0.875rem 1rem; cursor:pointer; }
.bw-measure-check { display:flex; align-items:center; gap:0.5rem; cursor:pointer; font-size:0.9rem; }
.bw-measure-check input { width:18px; height:18px; accent-color:var(--green-600); cursor:pointer; }
.bw-measure-sub { font-size:0.75rem; color:var(--text-muted); }
.bw-measure-body { padding:0 1rem 1rem; }
.bw-measure-body .bw-row { gap:0.75rem; }
.bw-measure-body .bw-field label { font-size:0.8rem; }
.bw-measure-body .bw-input { padding:0.5rem 0.75rem; font-size:0.875rem; }

.bw-double-notice { background:var(--green-50); border:2px solid var(--green-100); border-radius:var(--radius-sm); padding:0.875rem 1rem; font-size:0.85rem; color:var(--green-900); margin:1rem 0; animation:fadeIn 0.3s; }

/* Navigation */
.bw-nav { display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }

/* Results cards */
.bw-res-cards { display:grid; grid-template-columns:repeat(4, 1fr); gap:0.75rem; margin-bottom:2rem; }
@media(max-width:700px) { .bw-res-cards { grid-template-columns:1fr 1fr; } }
.bw-res-card { border-radius:var(--radius); padding:1.25rem; text-align:center; }
.bw-rc-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:0.25rem; }
.bw-rc-val { font-family:var(--font-heading); font-size:1.5rem; font-weight:800; }
.bw-rc-sub { font-size:0.7rem; margin-top:0.125rem; }
.bw-res-invest { background:#f5f5f5; color:var(--text); }
.bw-res-invest .bw-rc-val { color:var(--text); }
.bw-res-subsidie { background:var(--green-50); } .bw-res-subsidie .bw-rc-label,.bw-res-subsidie .bw-rc-val,.bw-res-subsidie .bw-rc-sub { color:var(--green-900); }
.bw-res-netto { background:var(--warmtefonds-light); } .bw-res-netto .bw-rc-label,.bw-res-netto .bw-rc-sub { color:var(--warmtefonds); } .bw-res-netto .bw-rc-val { color:var(--warmtefonds); }
.bw-res-voordeel { background:var(--green-700); } .bw-res-voordeel .bw-rc-label,.bw-res-voordeel .bw-rc-val,.bw-res-voordeel .bw-rc-sub { color:#fff; }

/* Detail sections */
.bw-detail-section { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; margin-bottom:1rem; }
.bw-detail-section h3 { font-size:1rem; margin-bottom:1rem; }
.bw-detail-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.bw-detail-table th { background:var(--bg-alt); padding:0.625rem 0.75rem; text-align:left; font-weight:700; font-size:0.75rem; text-transform:uppercase; border-bottom:2px solid var(--border); }
.bw-detail-table td { padding:0.625rem 0.75rem; border-bottom:1px solid #f0f0f0; }
.bw-detail-table tfoot td { font-weight:700; border-top:2px solid var(--green-100); background:var(--green-50); }

/* Finance grid */
.bw-finance-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:0.625rem; margin-bottom:0.75rem; }
@media(max-width:600px) { .bw-finance-grid { grid-template-columns:1fr 1fr; } }
.bw-fin-option { border:2px solid var(--border); border-radius:var(--radius-sm); padding:0.875rem; text-align:center; cursor:pointer; transition:all 0.2s; }
.bw-fin-option:hover { border-color:var(--warmtefonds); }
.bw-fin-option.active { border-color:var(--warmtefonds); background:var(--warmtefonds-light); }
.bw-fin-years { font-size:0.75rem; font-weight:700; text-transform:uppercase; color:var(--text-muted); }
.bw-fin-amount { font-family:var(--font-heading); font-size:1.35rem; font-weight:800; color:var(--warmtefonds); margin:0.25rem 0; }
.bw-fin-note { font-size:0.7rem; color:var(--text-muted); }
.bw-fin-compare { font-size:0.85rem; color:var(--text-light); text-align:center; padding:0.75rem; background:var(--bg-alt); border-radius:var(--radius-sm); }

/* Stat rows */
.bw-stat-row { display:flex; justify-content:space-between; padding:0.5rem 0; border-bottom:1px solid #f0f0f0; font-size:0.875rem; }
.bw-stat-row:last-child { border-bottom:none; }
.bw-stat-row.hl { background:var(--green-50); margin:0.25rem -0.75rem; padding:0.75rem; border-radius:6px; border-bottom:none; }
.bw-stat-row.hl strong { color:var(--green-700); font-size:1.1rem; }
.bw-res-duo { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:600px) { .bw-res-duo { grid-template-columns:1fr; } }

/* Projection bars */
.bw-projection { display:flex; align-items:flex-end; gap:4px; height:140px; padding:0 0.5rem; }
.bw-proj-bar { flex:1; background:var(--green-500); border-radius:4px 4px 0 0; position:relative; min-height:4px; transition:height 0.5s ease; }
.bw-proj-bar span { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:0.55rem; font-weight:700; color:var(--text-muted); white-space:nowrap; }
.bw-proj-total { text-align:center; margin-top:0.75rem; font-size:0.95rem; color:var(--green-900); padding:0.75rem; background:var(--green-50); border-radius:var(--radius-sm); }
.bw-proj-total strong { font-size:1.25rem; }

/* Package recommendation */
.bw-pakket-recommend { text-align:center; padding:1rem; background:var(--green-50); border-radius:var(--radius-sm); }
.bw-pr-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; color:var(--green-700); }
.bw-pr-name { font-family:var(--font-heading); font-size:1.5rem; font-weight:800; color:var(--green-900); margin:0.25rem 0; }
.bw-pr-desc { font-size:0.85rem; color:var(--text-light); }

/* Save actions */
.bw-save-actions { display:flex; gap:0.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.bw-save-actions .btn { flex:1; min-width:200px; }

/* Print styles */
@media print { .site-header,.site-footer,.cta-banner,.bw-progress,.bw-nav,.bw-save-actions { display:none !important; } .bw-panel { display:block !important; border:none; padding:0; } #step4 { display:block !important; } }

/* ── Visuele resultaten row ─────────────────────────────── */
.bw-visual-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:0; }
.bw-vis-block { margin-bottom:0 !important; }
@media(max-width:700px) { .bw-visual-row { grid-template-columns:1fr; } }