/* vgc-calculator.css — gedeelde stijlen van vermogensgroeicalculator.nl (Fase 4a, 2026-09-09).
   Bevat uitsluitend CSS-blokken die op alle vier de rekentools letterlijk identiek waren; per pagina wordt de oorspronkelijke
   cascadevolgorde bewaakt (blokken blijven waar nodig ook inline). */
body{
    background:linear-gradient(180deg, #F2F6FC 0%, #FFFFFF 420px) no-repeat, #FFFFFF;
    color:var(--ink);
    font-family:'Inter',sans-serif;
    padding:32px 16px 64px;
    -webkit-font-smoothing:antialiased;
  }
html[data-theme="dark"] .about-text{
    color:#B7C4DA;
  }
.site-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 4px 18px;
  }
.site-logo img{ height:32px; width:auto; display:block; max-width:100%; }
.masthead h1{
    font-family:'Poppins','Inter',sans-serif;
    font-weight:600;
    font-size:clamp(28px,6vw,38px);
    line-height:1.15;
    margin:0 0 10px;
    color:#FBF6E3;
  }
.masthead p{
    font-size:15px;
    line-height:1.55;
    color:#C9E3D3;
    margin:0;
    max-width:46ch;
  }
.card{
    background:var(--paper);
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 16px 40px rgba(8,34,80,0.10), 0 0 0 1px rgba(8,34,80,0.25);
    position:relative;
  }
.card::before{
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg, var(--gold-deep), var(--gold) 35%, var(--gold-soft) 60%, var(--gold) 85%, var(--gold-deep));
  }
html[data-theme="dark"] .card{
    box-shadow:0 28px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(10,168,92,0.2);
  }
.result .label{
    font-size:13px;
    color:var(--ink-soft);
    margin:0 0 4px;
  }
.share-btn:hover{
    border-color:var(--gold);
    color:var(--gold-deep);
    background:rgba(8,34,80,0.06);
  }
.print-btn:hover{
    border-color:var(--gold);
    color:var(--gold-deep);
    background:rgba(8,34,80,0.06);
  }
/* Reset: dezelfde duidelijke rode stijl als 'Alles resetten' op de groeipagina */
.reset-btn{ color:#9A3A24; background:rgba(169,67,46,0.08); border-color:rgba(169,67,46,0.35); font-weight:600; }
.reset-btn:hover{ border-color:#9A3A24; color:#9A3A24; background:rgba(169,67,46,0.16); }
.reset-btn.armed{ border-color:#A9432E !important; color:#fff !important; background:#A9432E !important; }
html[data-theme="dark"] .reset-btn{ color:#F6C3B0; background:rgba(169,67,46,0.18); border-color:rgba(246,195,176,0.35); }
html[data-theme="dark"] .reset-btn:hover{ background:rgba(169,67,46,0.28); border-color:#F6C3B0; color:#F6C3B0; }
/* ---------- Sticky result bar (appears when the main result scrolls away) ---------- */
  .sticky-result{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:70;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 16px;
    background:rgba(8,34,80,0.96);
    color:#FBF6E3;
    border-top:1px solid rgba(8,34,80,0.35);
    box-shadow:0 -8px 24px rgba(0,0,0,0.25);
    transform:translateY(110%);
    transition:transform .25s ease;
  }
.sticky-result.visible{ transform:translateY(0); }
.sticky-result .sr-label{ font-size:12px; color:#C9E3D3; }
.sticky-result .sr-amount{ font-family:'Poppins','Inter',sans-serif; font-weight:700; font-size:20px; color:var(--gold-soft); }
.sticky-result .sr-link{
    font-size:12.5px; font-weight:600; color:#082250; background:var(--gold);
    text-decoration:none; border-radius:999px; padding:8px 12px; flex:0 0 auto;
  }
body.has-sticky{ padding-bottom:88px; }
button:focus-visible, a:focus-visible, input[type=range]:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }
.info-icon{ display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--gold); color:var(--gold-deep); font-size:10px; font-family:'Inter',sans-serif; font-style:italic; font-weight:600; cursor:pointer; margin-left:5px; flex:0 0 auto; user-select:none; }
.tooltip-popup{ position:fixed; max-width:250px; background:#0B1D3D; color:#EAF0F8; font-size:12.5px; line-height:1.5; padding:10px 12px; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.35); z-index:80; opacity:0; pointer-events:none; transition:opacity .12s ease; }
.tooltip-popup.active{ opacity:1; pointer-events:auto; }
.chart-area{
    padding:20px 26px 8px;
    border-top:1px solid var(--line);
  }
.chart-area svg{ width:100%; height:auto; display:block; }
.chart-legend{
    display:flex;
    gap:18px;
    font-size:12px;
    color:var(--ink-soft);
    margin-top:8px;
    flex-wrap:wrap;
  }
.chart-legend span{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.field{
    padding:16px 0;
    border-bottom:1px solid var(--line);
  }
.field:last-child{ border-bottom:none; }
.field-top{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:12px;
    margin-bottom:8px;
  }
.field label{
    font-size:14px;
    font-weight:500;
    color:var(--ink);
  }
.field .value{
    font-family:'Poppins','Inter',sans-serif;
    font-weight:600;
    font-size:16px;
    color:var(--gold);
    white-space:nowrap;
  }
.value-edit input{
    width:66px;
    font-family:'Poppins','Inter',sans-serif;
    font-weight:600;
    font-size:16px;
    color:var(--gold);
    background:transparent;
    border:none;
    border-bottom:1px solid var(--line);
    text-align:right;
    outline:none;
    padding:0 2px 1px;
    -moz-appearance:textfield;
  }
.value-edit input::-webkit-outer-spin-button,
  .value-edit input::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
.value-edit input:focus{ border-bottom-color:var(--gold); }
.field .hint{
    font-size:13px;
    color:#4A5E7A; /* 6,3:1 op crème (was 3,7:1) */
    margin-top:4px;
    line-height:1.4;
  }
.num-input:focus{ border-bottom-color:var(--gold); }
.currency-combo{ position:relative; }
.currency-combo-input{
    width:100%;
    font-family:'Inter',sans-serif;
    font-size:14px;
    padding:10px 36px 10px 12px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--paper) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232E6E52" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>') no-repeat right 10px center;
    background-size:16px;
    color:var(--ink);
    outline:none;
    box-sizing:border-box;
  }
.currency-combo-input:focus{ border-color:var(--gold); }
.currency-combo-list{
    display:none;
    position:absolute;
    top:calc(100% + 4px);
    left:0; right:0;
    max-height:250px;
    overflow-y:auto;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 10px 24px rgba(8,34,80,0.08);
    z-index:60;
  }
.currency-combo-list.open{ display:block; }
.currency-combo-option{
    padding:10px 12px;
    font-size:13.5px;
    color:var(--ink);
    cursor:pointer;
    border-bottom:1px solid var(--line);
  }
.currency-combo-option:last-child{ border-bottom:none; }
.currency-combo-option:hover,
  .currency-combo-option.active{
    background:rgba(10,168,92,0.14);
  }
.currency-combo-option.no-results{
    color:var(--ink-soft);
    font-style:italic;
    cursor:default;
  }
.currency-combo-option.no-results:hover{ background:none; }
html[data-theme="dark"] .currency-combo-input{ background-color:var(--paper-dim); }
html[data-theme="dark"] .currency-combo-list{ background:var(--paper-dim); }
input[type=range]::-webkit-slider-runnable-track{
    height:4px; border-radius:2px; background:var(--line);
  }
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:18px; height:18px;
    border-radius:50%;
    background:var(--gold);
    border:3px solid var(--knob);
    box-shadow:0 0 0 1px var(--gold);
    cursor:pointer;
    margin-top:-7px;
  }
input[type=range]::-moz-range-thumb{
    width:18px; height:18px;
    border-radius:50%;
    background:var(--gold);
    border:3px solid var(--knob);
    box-shadow:0 0 0 1px var(--gold);
    cursor:pointer;
    border:none;
  }
.about-section{
    padding:20px 26px 26px;
  }
.faq-section{
    background:var(--paper);
    border-radius:18px;
    margin-top:20px;
    padding:26px;
    box-shadow:0 12px 32px rgba(8,34,80,0.08), 0 0 0 1px rgba(8,34,80,0.15);
  }
.faq-section h2{
    font-family:'Poppins','Inter',sans-serif;
    font-weight:600;
    font-size:19px;
    color:var(--ink);
    margin:0 0 14px;
  }
.faq-item{
    border-bottom:1px solid var(--line);
  }
.faq-item:last-child{ border-bottom:none; }
.faq-question{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    background:none;
    border:none;
    text-align:left;
    padding:14px 2px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    font-size:14px;
    font-weight:600;
    color:var(--ink);
  }
.faq-question:hover{ color:var(--gold-deep); }
.faq-question .chevron{
    flex:0 0 auto;
    width:16px; height:16px;
    transition:transform .2s ease;
    color:var(--gold-deep);
  }
.faq-item.open .faq-question .chevron{ transform:rotate(180deg); }
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease;
  }
.faq-item.open .faq-answer{ max-height:500px; }
.faq-answer p{
    font-size:13.5px;
    color:var(--ink-soft);
    line-height:1.6;
    margin:0 0 16px;
    padding:0 2px;
  }
/* ---------- Next-step cross links ---------- */
  .next-steps{ margin-top:20px; padding:0 4px; }
.next-label{ font-size:12.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--gold-soft); margin:0 0 10px; }
.next-links{ display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width: 640px){ .next-links{ grid-template-columns:1fr 1fr; } }
.next-link{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:var(--paper); border-radius:14px; padding:14px 16px; text-decoration:none;
    box-shadow:0 10px 24px rgba(8,34,80,0.08), 0 0 0 1px rgba(8,34,80,0.18);
    transition:transform .15s ease;
  }
.next-link:hover{ transform:translateY(-2px); }
.next-link strong{ display:block; font-family:'Poppins','Inter',sans-serif; font-size:15.5px; color:var(--ink); margin-bottom:2px; }
.next-link span{ display:block; font-size:12.5px; color:var(--ink-soft); }
.next-link svg{ width:18px; height:18px; color:var(--gold-deep); flex:0 0 auto; }
/* ---------- Amount quick-pick chips ---------- */
  .amount-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.amount-chip{
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; color:var(--ink-soft);
    background:rgba(8,34,80,0.05); border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
.amount-chip:hover{ border-color:var(--gold); color:var(--gold-deep); background:rgba(10,168,92,0.08); }
.amount-chip.active{ background:var(--gold); border-color:var(--gold); color:#082250; }
html[data-theme="dark"] .amount-chip{ background:rgba(233,238,247,0.06); }
/* ---------- Reality-check hints ---------- */
  .reality-hint{ display:none; font-size:12.5px; line-height:1.45; color:#8A5A12; background:rgba(10,168,92,0.12); border-left:3px solid var(--gold); padding:7px 10px; border-radius:0 8px 8px 0; margin:8px 0 0; }
.reality-hint.show{ display:block; }
html[data-theme="dark"] .reality-hint{ color:var(--gold-soft); }
.feedback-line{ text-align:center; font-size:12px; color:#CBD6CD; margin:10px 0 0; }
.feedback-line a{ color:var(--gold-soft); text-decoration:underline; }
/* ---------- Toast (undo after reset, restored notice) ---------- */
  .toast{
    position:fixed; left:50%; bottom:20px; transform:translate(-50%, 120%); z-index:90;
    display:flex; align-items:center; gap:14px; max-width:min(520px, calc(100% - 92px));
    background:#0B1D3D; color:#EAF0F8; font-size:13.5px; padding:12px 16px; border-radius:12px;
    box-shadow:0 12px 30px rgba(0,0,0,0.35);
    visibility:hidden; opacity:0;
    transition:transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
  }
.toast.show{ visibility:visible; opacity:1; transform:translate(-50%, 0); transition-delay:0s; }
body.has-sticky .toast{ bottom:96px; }
.toast button{ background:var(--gold); color:#082250; border:none; border-radius:999px; padding:7px 12px; font-weight:700; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.toast button:empty{ display:none; }
.result-disclaimer{ font-size:12.5px; line-height:1.5; color:var(--ink-soft); margin:14px 0 4px; }