/* ═══════════════════════════════════════════════════════════
   AI-scan tool — v3 huisstijl
   Legt de v3-laag over assets/scan.css heen. scan.css blijft de basis
   (structuur, states, animaties); hier staat alleen wat de vormgeving
   gelijktrekt met de rest van het v3-ontwerp.

   Alles hangt aan .scan-v3. Dat is bewust: zolang /ai-scan/ nog in de oude
   stijl staat, verandert daar niets. Wil je die pagina meenemen, dan is het
   genoeg om class="scan-v3" om het formulier heen te zetten en dit bestand
   daar ook in te laden (functions.php).
   ═══════════════════════════════════════════════════════════ */

/* ── Kaart ── */
.scan-v3 .scan-tool-card {
  background:
    linear-gradient(160deg, rgba(159, 211, 255, .07), rgba(255, 255, 255, 0) 55%),
    var(--v3-card-alt);
  border: 1px solid rgba(159, 211, 255, .14);
  border-radius: 22px; padding: 36px;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .7);
}
.scan-v3 .scan-tool-card::before {
  height: 2px; background: var(--v3-grad); border-radius: 22px 22px 0 0;
}

/* ── Labels en velden ── */
.scan-v3 .scan-field label {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--v3-text-3);
}
.scan-v3 .scan-opt {
  font: 400 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: 0; text-transform: none; color: var(--v3-text-3); opacity: .8;
}
/* 16px is hier geen smaakkeuze: Safari op iOS zoomt automatisch in zodra een
   invoerveld kleiner dan 16px focus krijgt, en dan springt de hele pagina. */
.scan-v3 .scan-input,
.scan-v3 .scan-select {
  background: rgba(2, 12, 27, .5);
  border: 1px solid rgba(159, 211, 255, .14);
  border-radius: 13px;
  font: 400 16px / 1.4 var(--v3-font);
  color: var(--v3-text-1);
  padding: 15px 17px;
}

/* Iets meer lucht tussen de velden, zodat de kaart optisch meeweegt met de
   ruimere tekstkolom ernaast. */
.scan-v3 .scan-field { gap: 9px; margin-bottom: 18px; }
.scan-v3 .scan-form-grid { gap: 18px; margin-bottom: 18px; }
.scan-v3 .scan-input::placeholder { color: var(--v3-text-3); }
.scan-v3 .scan-input:focus,
.scan-v3 .scan-select:focus {
  background: rgba(2, 12, 27, .62);
  border-color: rgba(34, 211, 238, .55);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}
.scan-v3 .scan-select option { background: #0e1e3a; }

/* ── Startknop: gelijk aan de gradiëntknoppen elders op de site ── */
.scan-v3 .scan-start-btn {
  background: var(--v3-grad); color: var(--v3-grad-text);
  border-radius: var(--v3-r-pill);
  font: 600 var(--v3-fs-body) / 1 var(--v3-font); letter-spacing: -.01em;
  padding: 18px 28px;
  box-shadow: 0 12px 30px -10px rgba(34, 211, 238, .5);
  transition: transform .25s cubic-bezier(.16, .8, .3, 1), box-shadow .25s ease;
}
/* De glans uit scan.css is hier te veel: de gradiënt is al licht. */
.scan-v3 .scan-start-btn::after { content: none; }
.scan-v3 .scan-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -12px rgba(34, 211, 238, .62);
}
/* .geo-icon krijgt in style.css een eigen lichtblauwe kleur mee. Op de lichte
   gradiëntknop valt die weg, dus hier terug naar de tekstkleur van de knop. */
.scan-v3 .scan-start-btn .geo-icon { width: 17px; height: 17px; color: inherit; }

.scan-v3 .scan-disclaimer {
  font: 400 var(--v3-fs-label) / 1.55 var(--v3-font); color: var(--v3-text-3); margin-top: 16px;
}
.scan-v3 .scan-field-error {
  font: 500 var(--v3-fs-label) / 1.5 var(--v3-font); letter-spacing: 0;
}

/* ── Bezig met analyseren ── */
.scan-v3 .spinner-ring { border-color: rgba(159, 211, 255, .14); border-top-color: var(--v3-cyan); }
.scan-v3 .spinner-ring-2 { border-color: rgba(43, 127, 255, .14); border-bottom-color: var(--v3-blue); }
.scan-v3 .spinner-dot { background: var(--v3-cyan); box-shadow: 0 0 10px var(--v3-cyan); }
.scan-v3 .scan-loading-titel { font: 600 var(--v3-fs-lead) / 1.25 var(--v3-font); color: var(--v3-text-1); }
.scan-v3 .scan-loading-domain {
  font: 500 var(--v3-fs-label) / 1.4 var(--v3-font); letter-spacing: .02em; color: var(--v3-light);
}
.scan-v3 .scan-stap {
  border-radius: 12px; font: 400 var(--v3-fs-klein) / 1.5 var(--v3-font); color: var(--v3-text-3);
}
.scan-v3 .scan-stap.actief {
  background: rgba(159, 211, 255, .07); border-color: rgba(159, 211, 255, .18);
  color: var(--v3-text-1);
}
.scan-v3 .stap-spinner { border-color: rgba(159, 211, 255, .2); border-top-color: var(--v3-cyan); }
.scan-v3 .scan-progress-wrap { background: rgba(159, 211, 255, .12); }
.scan-v3 .scan-progress-bar {
  background: var(--v3-grad); box-shadow: 0 0 10px rgba(34, 211, 238, .5);
}
.scan-v3 .scan-progress-pct {
  font: 600 var(--v3-fs-label) / 1 var(--v3-font); letter-spacing: .06em; color: var(--v3-text-3); margin-top: 8px;
}

/* ── Resultaten ── */
.scan-v3 .scan-score-rij {
  background: var(--v3-deep); border: 1px solid rgba(159, 211, 255, .12);
  border-radius: 16px; padding: 24px;
}
.scan-v3 .score-ring-tekst { font-family: var(--v3-font); }
.scan-v3 .score-ring-tekst span { color: var(--v3-text-3); }
.scan-v3 .score-label-mono,
.scan-v3 .scan-sectie-label {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font);
  letter-spacing: .09em; text-transform: uppercase; color: var(--v3-text-3);
}
.scan-v3 .scan-sectie-label { margin: 26px 0 12px; }
.scan-v3 .score-verdict { font: 600 var(--v3-fs-kop) / 1.25 var(--v3-font); letter-spacing: -.01em; }
.scan-v3 .score-desc { font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font); color: var(--v3-text-2); }
.scan-v3 .score-pill,
.scan-v3 .sv-status { font: 600 var(--v3-fs-label) / 1 var(--v3-font); border-radius: var(--v3-r-pill); }

.scan-v3 .scan-vraag-item {
  background: rgba(2, 12, 27, .4); border: 1px solid rgba(159, 211, 255, .10);
  border-radius: 13px; padding: 13px 16px;
}
.scan-v3 .sv-tekst { font: 400 var(--v3-fs-klein) / 1.55 var(--v3-font); color: var(--v3-text-2); }

.scan-v3 .scan-inzicht {
  background: rgba(2, 12, 27, .4); border: 1px solid rgba(159, 211, 255, .10);
  border-left-width: 3px; border-radius: 0 13px 13px 0; padding: 14px 16px;
}
.scan-v3 .scan-inzicht.info { border-left-color: var(--v3-cyan); }
.scan-v3 .inzicht-tag {
  font: 700 var(--v3-fs-label) / 1 var(--v3-font); letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 7px;
}
.scan-v3 .inzicht-tag.t-info { color: var(--v3-cyan); }
.scan-v3 .inzicht-tekst { font: 400 var(--v3-fs-klein) / 1.6 var(--v3-font); color: var(--v3-text-2); }
.scan-v3 .scan-scenario-box { border-radius: 13px; font: 400 var(--v3-fs-klein) / 1.65 var(--v3-font); }

.scan-v3 .scan-inzicht-blur-overlay {
  background: linear-gradient(160deg, rgba(14, 30, 58, .86), rgba(7, 17, 36, .92));
  border: 1px solid rgba(159, 211, 255, .18); border-radius: 0 13px 13px 0;
}
.scan-v3 .blur-unlock-tekst { font: 600 var(--v3-fs-klein) / 1.4 var(--v3-font); letter-spacing: -.01em; }
.scan-v3 .blur-pijl { font: 500 var(--v3-fs-label) / 1 var(--v3-font); color: var(--v3-light); letter-spacing: .02em; }

/* ── E-mailkaart onder het resultaat ── */
.scan-v3 .scan-email-kaart {
  background:
    linear-gradient(150deg, rgba(159, 211, 255, .10), rgba(255, 255, 255, 0) 60%),
    var(--v3-deep);
  border: 1px solid rgba(159, 211, 255, .18); border-radius: 16px; padding: 24px 22px;
}
.scan-v3 .scan-email-titel { font: 600 var(--v3-fs-klein) / 1.4 var(--v3-font); letter-spacing: -.01em; }
.scan-v3 .scan-email-btn {
  background: var(--v3-grad); color: var(--v3-grad-text);
  border-radius: var(--v3-r-pill); font: 600 var(--v3-fs-klein) / 1 var(--v3-font);
  padding: 13px 22px; box-shadow: 0 10px 24px -10px rgba(34, 211, 238, .45);
}
.scan-v3 .scan-email-btn:hover {
  transform: translateY(-1px); box-shadow: 0 14px 32px -10px rgba(34, 211, 238, .6);
}
.scan-v3 .scan-email-feedback { font: 500 var(--v3-fs-label) / 1.5 var(--v3-font); }