/*
 * VDT Hypotheekscan
 *
 * Eén op één overgenomen uit het Elementor-blok, zodat het uiterlijk niet
 * verandert. Alles staat achter #vdt-scan, dus het kan de rest van de site niet
 * raken. Poppins wordt hier niet opgehaald: dat lettertype staat al op de site.
 */

#vdt-scan {
  --color-accent:#F58021; --color-accent-hover:#E06E12; --color-accent-active:#C25C0C; --color-accent-soft:#FEF1E6;
  --orange-700:#C25C0C;
  --slate-900:#3A3A43; --slate-800:#4D4D59; --slate-700:#5C5C68; --slate-600:#666671;
  --slate-500:#84848E; --slate-400:#A6A6AE; --slate-300:#C9C9CF; --slate-200:#E2E2E6;
  --white:#FFFFFF; --grey-bg:#F3F3F3;
  --text-heading:#4D4D59; --text-body:#84848E; --text-muted:#84848E;
  --surface-card:#FFFFFF; --surface-inset:#F3F3F3;
  --border-subtle:#E2E2E6; --border-default:#C9C9CF; --border-strong:#A6A6AE;
  --color-neutral:#666671; --color-neutral-hover:#5C5C68;
  --shadow-card:0 8px 28px rgba(58,58,67,.10); --shadow-md:0 6px 18px rgba(58,58,67,.10);
  --ease-out:cubic-bezier(0.22,1,0.36,1); --dur-base:220ms; --dur-fast:140ms;
  --font-sans:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-family:var(--font-sans);
  background:transparent;
  display:flex; justify-content:center; align-items:flex-start;
  padding:40px 20px; min-height:520px; color:var(--text-body);
}
#vdt-scan *, #vdt-scan *::before, #vdt-scan *::after { box-sizing:border-box; }
#vdt-scan h2, #vdt-scan p { margin:0; }

#vdt-scan .vdt-card { width:100%; max-width:560px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:0 22px 0 22px; box-shadow:var(--shadow-card); padding:32px 30px; }

@keyframes vdtFade { from { transform:translateY(8px); } to { transform:none; } }
#vdt-scan .vdt-view { animation:vdtFade .32s var(--ease-out); }

#vdt-scan input:focus, #vdt-scan select:focus, #vdt-scan textarea:focus {
  outline:none; border-color:var(--color-accent); box-shadow:none;
}
#vdt-scan .vdt-money { transition:border-color .18s var(--ease-out); }
#vdt-scan .vdt-money:focus-within { border-color:var(--color-accent); }
#vdt-scan input::placeholder, #vdt-scan textarea::placeholder { color:#84848E; opacity:1; }

#vdt-scan .vdt-pill { flex:1; min-width:0; padding:13px 14px; border-radius:10px; border:1.5px solid var(--border-default); background:var(--white); color:var(--text-body); font-weight:500; font-size:14px; line-height:1.25; cursor:pointer; transition:all .18s var(--ease-out); font-family:var(--font-sans); text-align:center; }
#vdt-scan .vdt-pill:hover { border-color:var(--slate-400); }
#vdt-scan .vdt-pill[data-sel="true"] { border-color:var(--color-accent); background:var(--color-accent-soft); color:var(--orange-700); font-weight:600; }

#vdt-scan .vdt-btn { display:inline-flex; align-items:center; justify-content:center; text-align:center; gap:8px; font-family:var(--font-sans); font-weight:700; font-size:16px; line-height:1.25; padding:15px 24px; min-height:54px; border-radius:5px; border:none; cursor:pointer; transition:background var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
#vdt-scan .vdt-btn:active { transform:translateY(1px); }
#vdt-scan .vdt-btn-primary { background:var(--color-accent); color:#fff; }
#vdt-scan .vdt-btn-primary:hover { background:var(--color-accent-hover); }
#vdt-scan .vdt-btn-outline { background:transparent; color:var(--text-heading); border:1.5px solid var(--border-strong); }
#vdt-scan .vdt-btn-outline:hover { background:var(--surface-inset); }
#vdt-scan .vdt-btn-full { width:100%; }
#vdt-scan .vdt-btn[disabled] { opacity:.45; cursor:not-allowed; }

#vdt-scan .vdt-label { font-size:14px; font-weight:500; color:var(--text-heading); }
#vdt-scan .vdt-input { width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid var(--border-default); font-family:var(--font-sans); font-size:15px; color:var(--text-heading); background:var(--white); }
#vdt-scan textarea.vdt-input { resize:vertical; line-height:1.5; }

#vdt-scan .vdt-select { appearance:none; -webkit-appearance:none; width:100%; padding:13px 42px 13px 14px; border-radius:10px; border:1.5px solid var(--border-default); background-color:var(--white); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23666671' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; font-family:var(--font-sans); font-size:15px; color:var(--text-heading); cursor:pointer; }

#vdt-scan input.vdt-range { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:999px; outline:none; cursor:pointer; margin:4px 0; }
#vdt-scan input.vdt-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--color-accent); cursor:pointer; border:3px solid #fff; box-shadow:0 2px 8px rgba(58,58,67,.3); }
#vdt-scan input.vdt-range::-moz-range-thumb { width:24px; height:24px; border:3px solid #fff; border-radius:50%; background:var(--color-accent); cursor:pointer; box-shadow:0 2px 8px rgba(58,58,67,.3); }

#vdt-scan .vdt-card-link { display:flex; align-items:center; gap:13px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:14px; padding:15px 16px; text-decoration:none; transition:box-shadow .2s var(--ease-out), transform .2s var(--ease-out), border-color .2s var(--ease-out); }
#vdt-scan .vdt-card-link:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--border-default); }
#vdt-scan .vdt-card-link:hover .vdt-card-arrow { transform:translateX(3px); }
#vdt-scan .vdt-card-arrow { transition:transform .2s var(--ease-out); color:var(--color-accent); display:flex; }

/* Koppen en tekst binnen de kaart. Stond als los override-blok achter het
   Elementor-blok; hier meteen op de goede plek. */
#vdt-card h1, #vdt-card h2, #vdt-card h3, #vdt-card h4, #vdt-card h5, #vdt-card h6 { color:#666671; font-weight:700; }
#vdt-card > .vdt-view > p { color:#84848E; }

@media (max-width:600px) {
  #vdt-scan { padding:24px 0; min-height:0; }
  #vdt-scan .vdt-card { padding:26px 20px; border-radius:0 18px 0 18px; }
}