/* =============================================================
   SM Intake
   Contactformulier in drie stappen. Stap 1 vraagt alleen wat nodig
   is om contact te leggen, stap 2 is aanklikken, stap 3 is bewust
   optioneel: daar vertelt iemand over zijn eigen vak. Versturen kan
   al na stap 2, zodat stap 3 nooit als verplicht voelt.
   Licht en donker via de band-keuze, net als de andere secties.
   ============================================================= */

.sm-in {
  /* licht is de standaard */
  --in-bg: #f4f6f5;
  --in-ink: #0d1512;
  --in-tekst: rgba(13, 21, 18, .75);
  --in-stil: rgba(13, 21, 18, .62);
  --in-rand: rgba(13, 21, 18, .13);
  --in-vlak: rgba(13, 21, 18, .03);
  --in-accent: #0f8f74;
  --in-fout: #d2492f;
  --in-mono: ui-monospace, "SF Mono", "Fira Code", "JetBrains Mono", Menlo, monospace;
  --sm-badge-accent: var(--in-accent);

  box-sizing: border-box;
  background: var(--in-bg);
  color: var(--in-ink);
  padding: var(--sm-sectie-ruimte) var(--sm-sectie-zij);
  transition: background .4s ease, color .4s ease;
  font-family: "Google Sans", "Product Sans", Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sm-in *, .sm-in *::before, .sm-in *::after { box-sizing: inherit; }

.sm-in--donker {
  --in-bg: #0a0909;
  --in-ink: #ffffff;
  --in-tekst: rgba(255, 255, 255, .72);
  --in-stil: rgba(255, 255, 255, .58);
  --in-rand: rgba(255, 255, 255, .10);
  --in-vlak: rgba(255, 255, 255, .04);
  --in-accent: #3DC78F;
  --in-fout: #f0724f;
}

/* ---------- kop ---------- */
.sm-in-top { max-width: 720px; margin: 0 auto 34px; text-align: center; }
.sm-in-kop {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem); font-weight: 600;
  letter-spacing: -.025em; line-height: 1.12; margin: 0 0 14px; color: var(--in-ink);
}
.sm-in-groen {
  background: linear-gradient(96deg, var(--in-accent), color-mix(in srgb, var(--in-accent) 55%, var(--in-ink)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sm-in-groen { background: none; color: var(--in-accent); }
}
.sm-in-sub { color: var(--in-tekst); font-size: 1.02rem; line-height: 1.7; margin: 0; }
/* intro gecentreerd: ~75 tekens per regel, gelijk verdeeld (was 720 px, 95 tekens) */
.sm-in-top .sm-in-sub { max-width: 600px; margin-inline: auto; text-wrap: balance; }

/* ---------- de kaart ---------- */
.sm-in-kaart {
  max-width: 720px; margin: 0 auto;
  background: var(--in-vlak); border: 1px solid var(--in-rand);
  border-radius: 22px; padding: clamp(20px, 3vw, 32px);
}

/* de voortgang: stap + resterende tijd, een balk die meegroeit met wat je invult, en de stapnamen */
.sm-in-balk { margin-bottom: 26px; }
.sm-in-balk-rij { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.sm-in-balk-stap { font-size: .85rem; font-weight: 600; color: var(--in-ink); }
.sm-in-balk-stap b { color: var(--in-accent); font-weight: 700; }
.sm-in-balk-naam { color: var(--in-stil); font-weight: 400; }
.sm-in-balk-tijd { font-size: .85rem; color: var(--in-stil); font-variant-numeric: tabular-nums; }
.sm-in-balk-baan { position: relative; height: 8px; border-radius: 999px; background: var(--in-rand); }
.sm-in-balk-baan i {
  position: absolute; inset: 0 auto 0 0; display: block; border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--in-accent) 70%, var(--in-bg)), var(--in-accent));
  box-shadow: 0 0 14px color-mix(in srgb, var(--in-accent) 55%, transparent);
  /* verende sprong vooruit: schiet een haartje door en veert terug */
  transition: width .8s cubic-bezier(.34,1.56,.64,1);
}
/* elk ingevuld vak: de balk licht op en er springt een vonk van de punt */
.sm-in-balk-vonk {
  position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 999px; pointer-events: none;
  background: var(--in-accent); opacity: 0; transform: translate(-50%, -50%) scale(.4);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--in-accent) 70%, transparent);
  transition: left .8s cubic-bezier(.34,1.56,.64,1);
}
.sm-in-balk-baan.sm-in-stoot .sm-in-balk-vonk { animation: sm-in-vonk .9s ease-out; }
.sm-in-balk-baan.sm-in-stoot i { animation: sm-in-oplicht .9s ease-out; }
@keyframes sm-in-vonk {
  0% { opacity: .95; transform: translate(-50%, -50%) scale(.4); }
  60% { opacity: .5; transform: translate(-50%, -50%) scale(1.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}
@keyframes sm-in-oplicht {
  0%, 100% { filter: none; }
  30% { filter: brightness(1.45); box-shadow: 0 0 22px color-mix(in srgb, var(--in-accent) 80%, transparent); }
}
/* een zacht glimlicht dat over de gevulde balk loopt: laat zien dat het leeft */
.sm-in-balk-baan i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  background-size: 60px 100%; background-repeat: no-repeat;
  animation: sm-in-glim 2.4s ease-in-out infinite;
}
@keyframes sm-in-glim { from { background-position: -60px 0; } to { background-position: calc(100% + 60px) 0; } }
.sm-in-balk-namen { display: flex; justify-content: space-between; margin-top: 8px; }
.sm-in-stapje {
  font-family: var(--in-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--in-stil); transition: color .3s ease;
}
.sm-in-stapje[data-staat="nu"] { color: var(--in-accent); }
.sm-in-stapje[data-staat="klaar"] { color: var(--in-ink); }
.sm-in-stapje[data-staat="klaar"]::before { content: "✓ "; color: var(--in-accent); }

/* de stappen zelf */
.sm-in-stap { display: none; }
.sm-in-stap[data-actief="ja"] { display: block; animation: sm-in-komt-op .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sm-in-komt-op { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.sm-in-staptitel {
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 600;
  letter-spacing: -.02em; color: var(--in-ink); margin: 0 0 6px;
}
.sm-in-stapuitleg { color: var(--in-stil); font-size: var(--sm-tekst, 16px); line-height: 1.6; margin: 0 0 22px; }
.sm-in-stapuitleg b { color: var(--in-ink); font-weight: 600; }

/* ---------- velden ---------- */
.sm-in-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .sm-in-rij { grid-template-columns: 1fr; } }

.sm-in-veld { display: block; margin-bottom: 14px; }
.sm-in-veld > span {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--in-ink); margin-bottom: 7px;
}
.sm-in-veld > span em {
  font-style: normal; font-weight: 400; color: var(--in-stil);
}
.sm-in-veld input,
.sm-in-veld textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--in-ink);
  background: color-mix(in srgb, var(--in-bg) 70%, transparent);
  border: 1px solid var(--in-rand); border-radius: 12px;
  padding: 12px 14px; transition: border-color .2s ease, box-shadow .2s ease;
}
.sm-in-veld textarea { min-height: 96px; resize: none; overflow-y: hidden; line-height: 1.6; }
/* het thema zet invoertekst op zijn eigen (donkere) kleur; hier wint altijd de kleur van de sectie,
   ook bij automatisch invullen door de browser */
.sm-in .sm-in-veld input,
.sm-in .sm-in-veld textarea { color: var(--in-ink); -webkit-text-fill-color: var(--in-ink); caret-color: var(--in-accent); }
.sm-in .sm-in-veld input:-webkit-autofill,
.sm-in .sm-in-veld input:-webkit-autofill:hover,
.sm-in .sm-in-veld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--in-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--in-bg) inset;
  transition: background-color 9999s ease 0s;
}
.sm-in-veld input::placeholder,
.sm-in-veld textarea::placeholder { color: var(--in-stil); opacity: .75; }
.sm-in-veld input:focus,
.sm-in-veld textarea:focus {
  outline: none; border-color: var(--in-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--in-accent) 18%, transparent);
}
.sm-in-veld[data-fout="ja"] input,
.sm-in-veld[data-fout="ja"] textarea { border-color: var(--in-fout); }
.sm-in-melding { display: none; color: var(--in-fout); font-size: .8rem; margin-top: 6px; }
.sm-in-veld > .sm-in-melding { display: none; font-weight: 500; color: var(--in-fout); }
.sm-in-veld[data-fout="ja"] > .sm-in-melding { display: block; }
/* goed ingevuld: klein groen vinkje in het veld */
.sm-in-veld { position: relative; }
.sm-in-veld[data-goed="ja"] input { border-color: color-mix(in srgb, var(--in-accent) 55%, var(--in-rand)); }

/* het honeypot-veld: onzichtbaar, alleen bots vullen dit in */
.sm-in-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- keuze-kaarten ---------- */
.sm-in-keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px; }
@media (max-width: 640px) { .sm-in-keuzes { grid-template-columns: 1fr; } }

.sm-in-keuze { position: relative; display: block; cursor: pointer; }
.sm-in-keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.sm-in-keuze span {
  display: flex; align-items: center; gap: 10px; min-height: 52px;
  padding: 12px 14px; border: 1px solid var(--in-rand); border-radius: 14px;
  font-size: .92rem; font-weight: 600; color: var(--in-tekst);
  background: color-mix(in srgb, var(--in-bg) 70%, transparent);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.sm-in-keuze span::before {
  content: ""; width: 18px; height: 18px; flex: 0 0 auto; border-radius: 6px;
  border: 1px solid var(--in-rand); transition: all .2s ease;
}
.sm-in-keuze:hover span { border-color: color-mix(in srgb, var(--in-accent) 45%, transparent); color: var(--in-ink); }
.sm-in-keuze input:checked + span {
  border-color: var(--in-accent); color: var(--in-ink);
  background: color-mix(in srgb, var(--in-accent) 10%, transparent);
}
.sm-in-keuze input:checked + span::before {
  background: var(--in-accent); border-color: var(--in-accent);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--in-bg) 90%, transparent);
}
.sm-in-keuze input:focus-visible + span {
  outline: 2px solid var(--in-accent); outline-offset: 2px;
}

/* pillen voor korte keuzes (wanneer) */
.sm-in-pillen { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.sm-in-pil { position: relative; }
.sm-in-pil input { position: absolute; opacity: 0; width: 0; height: 0; }
.sm-in-pil span {
  display: inline-block; cursor: pointer; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--in-rand); font-size: .86rem; font-weight: 600; color: var(--in-tekst);
  transition: all .2s ease;
}
.sm-in-pil input:checked + span {
  border-color: var(--in-accent); color: var(--in-ink);
  background: color-mix(in srgb, var(--in-accent) 12%, transparent);
}

/* ---------- knoppen onderin ---------- */
.sm-in-voet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.sm-in-terug {
  background: none; border: 0; padding: 10px 4px; cursor: pointer;
  color: var(--in-stil); font: inherit; font-size: .88rem; font-weight: 600;
}
.sm-in-terug:hover { color: var(--in-ink); }
.sm-in-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sm-in-overslaan {
  background: none; border: 0; cursor: pointer; font: inherit; font-size: .88rem;
  font-weight: 600; color: var(--in-stil); padding: 10px 4px;
}
.sm-in-overslaan:hover { color: var(--in-ink); }
/* mobiel: hoofdknop over de volle breedte in de duimzone, overslaan en terug eronder */
@media (max-width: 640px) {
  .sm-in-voet { flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .sm-in-rechts { margin-left: 0; flex-direction: column-reverse; align-items: stretch; gap: 4px; }
  .sm-in-rechts .sm-btn { width: 100%; }
  .sm-in-terug, .sm-in-overslaan { align-self: center; min-height: 44px; }
  .sm-in-balk-rij { flex-wrap: nowrap; }
}

.sm-in-slot { margin-top: 18px; font-size: .82rem; color: var(--in-stil); line-height: 1.6; max-width: 56ch; }

/* ---------- klaar-scherm ---------- */
.sm-in-klaar { display: none; text-align: center; padding: 20px 0; }
.sm-in-klaar[data-actief="ja"] { display: block; animation: sm-in-komt-op .4s cubic-bezier(.2,.7,.2,1) both; }
.sm-in-vink {
  width: 54px; height: 54px; border-radius: 999px; margin: 0 auto 18px;
  display: grid; place-items: center; color: var(--in-accent);
  background: color-mix(in srgb, var(--in-accent) 14%, transparent);
}
.sm-in-vink svg { width: 26px; height: 26px; fill: currentColor; }
.sm-in-klaar h3 { font-size: 1.3rem; font-weight: 600; color: var(--in-ink); margin: 0 0 8px; letter-spacing: -.02em; }
.sm-in-klaar p { color: var(--in-tekst); font-size: .98rem; line-height: 1.7; margin: 0 auto; max-width: 46ch; }

/* de verstuur-knop terwijl hij bezig is */
.sm-in-bezig { opacity: .65; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html:not(.sm-rustig):not(.sm-beweeg) .sm-in-stap[data-actief="ja"], html:not(.sm-rustig):not(.sm-beweeg) .sm-in-klaar[data-actief="ja"] { animation: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-in-balk-baan i, html:not(.sm-rustig):not(.sm-beweeg) .sm-in-balk-vonk { transition: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-in-balk-baan.sm-in-stoot i, html:not(.sm-rustig):not(.sm-beweeg) .sm-in-balk-baan.sm-in-stoot .sm-in-balk-vonk { animation: none; }
  html:not(.sm-rustig):not(.sm-beweeg) .sm-in-balk-baan i::after { animation: none; display: none; }
}

/* de gedeelde kopmaat; twee klassen zodat hij wint van de regel hierboven */
.sm-in .sm-in-kop{
  font-family: var(--sm-kop-font);
  font-size: var(--sm-kop);
  line-height: var(--sm-kop-regel);
  letter-spacing: var(--sm-kop-sp);
  text-wrap: balance;
}

/* mobiel: balance verdeelt alleen het stuk vóór een break-mobile, pretty houdt ook het stuk erna vrij van een los woord */
@media (max-width: 767px) { .sm-in-top .sm-in-sub { text-wrap: pretty; } }

/* korte tekst van twee of drie regels: gelijk verdelen, geen staartje van twee woorden */
.sm-in-slot { text-wrap: balance; }

/* invulvelden 16px: kleiner en iOS zoomt in bij aantikken. Het thema (UiCore) zet
   .uicore-body-content input op 14px met hetzelfde gewicht en laadt later, daarom .sm-in ervoor. */
.sm-in .sm-in-veld input,
.sm-in .sm-in-veld textarea { font-size: 1rem; }

/* verstuurknop: vaste kleuren in de plugin, anders geeft het thema (UiCore) hem een paarse hover. Ring en gloed blijven. */
.sm-in .sm-in-form button[type=submit].sm-btn { background-color: #00c49a; color: #fff; }
.sm-in .sm-in-form button[type=submit].sm-btn:hover,
.sm-in .sm-in-form button[type=submit].sm-btn:focus-visible { background: linear-gradient(90deg, #4FD1C5, #FFA45B); color: #fff; }