/* E-mailverhuistool — 1-op-1 uit de ontwerp-handoff (emailverhuizen.tpl),
   volledig gescoped onder .wok-emailverhuizen met lokale design-tokens.
   Vervangt de eerdere compacte ev-*-opmaak. */
/* ============================================================
   WebOké e-mailverhuistool — gescoped onder .wok-emailverhuizen
   Design tokens lokaal gedefinieerd (kopie van tokens.css)
   ============================================================ */
.wok-emailverhuizen {
  /* ---- tokens ---- */
  --brand-primary:         #1062fe;
  --brand-primary-lighter: #009aff;
  --brand-primary-darker:  #003cb2;
  --brand-secondary:       #083fbf;
  --grad-start:            #152a80;
  --grad-end:              #1d65af;
  --hero-gradient:         linear-gradient(90deg, #152a80, #1d65af);
  --cta-gradient:          linear-gradient(135deg, #1062fe 0%, #083fbf 100%);
  --chip-gradient:         linear-gradient(135deg, #152a80, #1d65af);
  --brand-success:         #36c055;
  --brand-success-dark:    #1b7d34;
  --brand-warning:         #ffaa00;
  --brand-warning-dark:    #9c6a00;
  --brand-danger:          #d92632;
  --accent-yellow:         #ffd166;
  --gray-darker:           #17191c;
  --gray-base:             #5e636e;
  --gray-lighter:          #979ba4;
  --gray-lighter-4:        #e9eaec;
  --body-bg:               #f7f8fa;
  --surface:               #ffffff;
  --radius-sm:             8px;
  --radius-md:             12px;
  --radius-lg:             18px;
  --radius-xl:             24px;
  --radius-pill:           50px;
  --shadow-card:   0 1px 3px rgba(23,25,28,.04), 0 8px 24px rgba(23,25,28,.06);
  --shadow-lift:   0 2px 8px rgba(23,25,28,.06), 0 24px 48px rgba(23,25,28,.12);
  --shadow-primary:0 8px 30px rgba(16,98,254,.25);
  --shadow-badge:  0 2px 4px rgba(10,15,30,.08), 0 14px 28px -6px rgba(10,15,30,.3);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  font-family: var(--font-sans);
  color: var(--gray-darker);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.wok-emailverhuizen *, .wok-emailverhuizen *::before, .wok-emailverhuizen *::after { box-sizing: border-box; }
.wok-emailverhuizen [hidden] { display: none !important; }
.wok-emailverhuizen input::placeholder { color: var(--gray-lighter); }
.wok-emailverhuizen a { color: var(--brand-primary); text-decoration: none; }
.wok-emailverhuizen a:hover { text-decoration: underline; }
/* Knoppen die als <a> gerenderd worden: de generieke linkkleur hierboven
   wint anders op specificiteit (blauwe tekst op de blauwe CTA) */
.wok-emailverhuizen a.wok-ev-btn-primary,
.wok-emailverhuizen a.wok-ev-btn-primary:hover { color: #fff; text-decoration: none; }
.wok-emailverhuizen a.wok-ev-btn-ghost,
.wok-emailverhuizen a.wok-ev-btn-ghost:hover { color: var(--gray-darker); text-decoration: none; }
.wok-ev-mono { font-family: var(--font-mono); }
/* Voorkom een horizontale scrollbalk door de 100vw-hero-breakout op systemen
   met klassieke scrollbars (breakout mag niet op de wrapper zelf geclipt worden) */
html:has(.wok-emailverhuizen) { overflow-x: clip; }
/* Hard tegen Lagom2-theme-regels op headings/knoppen in: eigen font en geen transform */
.wok-emailverhuizen h1, .wok-emailverhuizen h2,
.wok-ev-paneltitle, .wok-ev-h2, .wok-ev-proctitle, .wok-ev-procerr-title, .wok-ev-donetitle {
  font-family: var(--font-sans); text-transform: none;
}

@keyframes wokPulse { 0% { box-shadow: 0 0 0 0 rgba(54,192,85,.6); } 70% { box-shadow: 0 0 0 8px rgba(54,192,85,0); } 100% { box-shadow: 0 0 0 0 rgba(54,192,85,0); } }
@keyframes wokSpin { to { transform: rotate(360deg); } }
@keyframes wokShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(240%); } }

/* ---------------- HERO (full-bleed breakout) ---------------- */
/* Lagom2 geeft de contentzone ruimte boven de pagina; hier moet de hero
   direct op de header aansluiten (JS trimt het restant exact weg) */
.app-main .main-body { padding-top: 0 !important; }
.wok-ev-hero {
  /* Fallback vóór JS; fitHero() lijnt daarna exact uit op .app-main.
     Let op: GEEN expliciete width — een brede width rekt de main-content-
     gridkolom op en duwt de hele pagina uit het midden. Negatieve marges
     aan beide kanten tellen niet mee in de kolombreedte. */
  /* Portaal: de wrapper doet de kolom-bleed al; geen viewport-breakout
     (die centreert de tekst op het scherm i.p.v. op de contentkolom). */
  background: linear-gradient(90deg, #152a80, #1d65af);
  color: #fff;
  padding: 56px 0 130px;
  position: relative;
  overflow: hidden;
}
.wok-ev-hero-noise {
  position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wok-ev-hero-glow {
  position: absolute; top: -120px; right: -80px; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255,255,255,.1), transparent 65%);
  border-radius: 50%; pointer-events: none;
}
.wok-ev-hero-inner { max-width: 1288px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; text-align: center; }
.wok-ev-hero-tag {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 50px; padding: 7px 16px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; font-weight: 600; margin-bottom: 20px;
}
.wok-ev-hero-tag-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-success); animation: wokPulse 2s infinite; }
.wok-ev-hero h1 {
  font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.06; margin: 0 auto 14px; max-width: 760px; text-wrap: balance; color: #fff;
}
.wok-ev-hero-accent { color: var(--accent-yellow); }
.wok-ev-lede { font-size: 17px; color: rgba(255,255,255,.85); line-height: 1.6; max-width: 620px; margin: 0 auto; }

/* Paginakop (gewone portaalpagina; de hero is vervallen). */
.wok-ev-paginakop { margin-bottom: 18px; }
.wok-ev-paginalede { color: var(--gray-base); font-size: 13.5px; line-height: 1.55; margin: 6px 0 0; max-width: 640px; }

/* ---------------- MAIN / KAART ---------------- */
.wok-ev-main { max-width: 980px; margin: 0 auto; padding: 0 0 48px; position: relative; }
.wok-ev-card {
  background: #fff; border-radius: 24px; border: 1px solid var(--gray-lighter-4);
  box-shadow: 0 2px 8px rgba(23,25,28,.06), 0 24px 48px rgba(23,25,28,.12);
  padding: 36px 40px 40px;
}

/* ---------------- STEPPER ---------------- */
.wok-ev-steps { display: flex; margin: 0 0 34px; }
.wok-ev-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; }
.wok-ev-step-line { position: absolute; top: 19px; right: 50%; width: 100%; height: 2px; background: var(--gray-lighter-4); z-index: 1; }
.wok-ev-step.is-line-on .wok-ev-step-line { background: var(--brand-success); }
.wok-ev-step-circle {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 15px; font-weight: 700;
  position: relative; z-index: 2;
  background: #fff; color: var(--gray-lighter); border: 2px solid var(--gray-lighter-4);
  transition: all .25s;
}
.wok-ev-step.is-active .wok-ev-step-circle {
  background: linear-gradient(135deg, #152a80, #1d65af); color: #fff; border: none;
  box-shadow: var(--shadow-primary);
}
.wok-ev-step.is-done .wok-ev-step-circle { background: var(--brand-success); color: #fff; border: none; }
.wok-ev-step-label { font-size: 12.5px; font-weight: 500; color: var(--gray-lighter); text-align: center; }
.wok-ev-step.is-active .wok-ev-step-label { font-weight: 700; color: var(--gray-darker); }

/* ---------------- FORMULIER-PANELEN ---------------- */
.wok-ev-formgrid { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 560px; margin: 0 auto; }
.wok-ev-panelhead { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.wok-ev-stepnum {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, #152a80, #1d65af); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; flex-shrink: 0;
  box-shadow: var(--shadow-badge);
}
.wok-ev-paneltitle { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--gray-darker); }
.wok-ev-panelsub { font-size: 14px; color: var(--gray-base); line-height: 1.55; margin: 0 0 18px; }

.wok-ev-providers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.wok-ev-provider {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-radius: 50px; border: 1px solid var(--gray-lighter-4); background: #fff;
  font-size: 13.5px; font-weight: 600; color: var(--gray-darker);
  font-family: var(--font-sans); cursor: pointer; transition: all .15s;
}
.wok-ev-provider.is-selected {
  border: 1.5px solid var(--brand-primary); padding: 8px 14px;
  background: rgba(16,98,254,.06); color: var(--brand-primary-darker);
}
.wok-ev-provider-img { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; display: block; }
.wok-ev-provider-letter {
  width: 18px; height: 18px; border-radius: 5px; color: #fff;
  align-items: center; justify-content: center; display: inline-flex;
  font-size: 10.5px; font-weight: 800; font-family: var(--font-mono); flex-shrink: 0;
}

.wok-ev-fields { display: grid; gap: 14px; }
.wok-ev-field { display: grid; gap: 6px; }
.wok-ev-label { font-size: 13px; font-weight: 600; color: var(--gray-darker); }
.wok-ev-label-opt { color: var(--gray-lighter); font-weight: 400; }
.wok-ev-input {
  padding: 12px 14px; border: 1px solid var(--gray-lighter-4); border-radius: 12px;
  font-size: 15px; font-family: var(--font-sans); color: var(--gray-darker);
  background: #fff; outline: none; width: 100%;
}
.wok-ev-input:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(16,98,254,.12); }
.wok-ev-input--mono { font-family: var(--font-mono); }
.wok-ev-input.is-auto { background: var(--body-bg); }
.wok-ev-help { font-size: 12px; color: var(--gray-lighter); }

/* status-regels (verbindingstest) */
.wok-ev-busyline { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13.5px; color: var(--gray-base); }
.wok-ev-spinner {
  width: 14px; height: 14px; border: 2px solid var(--gray-lighter-4);
  border-top-color: var(--brand-primary); border-radius: 50%;
  animation: wokSpin .7s linear infinite; flex-shrink: 0;
}
.wok-ev-spinner--sm { width: 12px; height: 12px; }
.wok-ev-okline { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--brand-success-dark); font-weight: 600; }
.wok-ev-okicon { padding: 3px; border-radius: 50%; background: rgba(54,192,85,.18); fill: var(--brand-success); flex-shrink: 0; }
.wok-ev-oknote { margin: 4px 0 0 31px; font-size: 12.5px; line-height: 1.5; color: var(--gray-base); overflow-wrap: anywhere; }

/* MX-regels */
.wok-ev-mxline-busy { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-base); margin-top: 2px; }
.wok-ev-mxline-ok { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--brand-success-dark); font-weight: 600; margin-top: 2px; }
.wok-ev-mxline-ok .wok-ev-okicon { padding: 2px; }

/* fout-/statuskaarten */
.wok-ev-errcard { margin-top: 14px; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 12px; overflow: hidden; }
.wok-ev-errcard--mx { margin-top: 4px; }
.wok-ev-errhead { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--gray-lighter-4); background: var(--body-bg); }
.wok-ev-errdot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-danger); flex-shrink: 0; }
.wok-ev-errdot--warn { background: var(--brand-warning); }
.wok-ev-errcode { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--brand-danger); font-weight: 700; }
.wok-ev-errcode--warn { color: var(--brand-warning-dark); }
.wok-ev-errserver { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--gray-lighter); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wok-ev-errbody { padding: 12px 14px; }
.wok-ev-errtitle { font-size: 14px; font-weight: 600; color: var(--gray-darker); margin-bottom: 3px; }
.wok-ev-errtext { font-size: 13px; color: var(--gray-base); line-height: 1.6; }

/* inline formulier-warning */
.wok-ev-formerror { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--brand-warning-dark); font-weight: 600; }

/* navigatie */
.wok-ev-nav { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--gray-lighter-4); }
.wok-ev-navhint { font-size: 13px; color: var(--gray-lighter); margin-left: auto; }
/* Knoppen volgens docs/knoppen-bestelflow.md: client area radius 8px, effen knopblauw, drie
   maten; tertiair grijs vlak; uitgeschakeld vast grijs met grijze pijl. */
.wok-ev-btn-ghost {
  padding: 11px 20px; border: none; border-radius: 8px;
  background: #f0f2f6; font-size: 14px; font-weight: 700; color: #5e636e;
  font-family: var(--font-sans); white-space: nowrap; cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none;
}
.wok-ev-btn-ghost:hover { color: var(--gray-darker); text-decoration: none; }
.wok-ev-btn-primary {
  padding: 11px 20px; border: none; border-radius: 8px;
  background: var(--btn-primary, #1d65af); color: #fff;
  font-size: 14px; font-weight: 700; font-family: var(--font-sans); white-space: nowrap;
  box-shadow: 0 1px 3px rgba(29,101,175,.35); display: inline-flex; align-items: center; gap: 9px;
  cursor: pointer; text-decoration: none;
}
.wok-ev-btn-primary:hover { background: #1a5a9c; color: #fff; text-decoration: none; }
.wok-ev-btn-primary:disabled { background: #eceef2; color: #9aa0aa; box-shadow: none; cursor: not-allowed; }
.wok-ev-btn-primary:disabled svg { stroke: #b3b7bf; }
.wok-ev-btn-primary--lg { padding: 15px 28px; font-size: 15px; box-shadow: 0 4px 12px rgba(29,101,175,.35); margin-left: auto; }
.wok-ev-btn-primary--sm { padding: 11px 20px; font-size: 14px; }
.wok-ev-btn-ghost--sm { padding: 11px 20px; font-size: 14px; }

/* ---------------- CONTROLE ---------------- */
.wok-ev-h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 6px; color: var(--gray-darker); }
.wok-ev-ctrlsub { font-size: 14.5px; color: var(--gray-base); margin: 0 0 24px; }
.wok-ev-vn { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.wok-ev-vn-card { flex: 1; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 12px; padding: 16px; min-width: 0; }
.wok-ev-vn-card--naar { background: linear-gradient(135deg, rgba(16,98,254,.08), rgba(16,98,254,.16)); border: 1px solid rgba(16,98,254,.25); }
.wok-ev-vn-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--gray-lighter); letter-spacing: 1px; margin-bottom: 4px; }
.wok-ev-vn-card--naar .wok-ev-vn-label { color: var(--brand-primary); }
.wok-ev-vn-email { font-family: var(--font-mono); font-size: 14px; color: var(--gray-darker); font-weight: 600; overflow-wrap: anywhere; }
.wok-ev-vn-card--naar .wok-ev-vn-email { color: var(--brand-primary-darker); }
.wok-ev-vn-server { font-family: var(--font-mono); font-size: 11.5px; color: var(--gray-base); margin-top: 4px; overflow-wrap: anywhere; }
.wok-ev-vn-arrow { flex-shrink: 0; }
.wok-ev-checks { display: grid; gap: 10px; margin-bottom: 24px; }
.wok-ev-checkrow { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--gray-darker); line-height: 1.5; }
.wok-ev-checkicon { padding: 3px; border-radius: 50%; background: rgba(54,192,85,.15); fill: var(--brand-success); flex-shrink: 0; margin-top: 1px; }
.wok-ev-notifyblok { background: var(--body-bg); border-radius: 12px; padding: 18px; margin-bottom: 26px; }
.wok-ev-notifyblok .wok-ev-label { display: block; margin-bottom: 6px; }
.wok-ev-notifyblok .wok-ev-input { max-width: 380px; }
.wok-ev-notifyerror { display: block; font-size: 12px; color: var(--brand-danger); margin-top: 6px; }
.wok-ev-ctrlnav { display: flex; align-items: center; gap: 14px; padding-top: 24px; border-top: 1px solid var(--gray-lighter-4); }

/* ---------------- VERHUIZEN (proc) ---------------- */
.wok-ev-prochead { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.wok-ev-pulsedot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-success); animation: wokPulse 2s infinite; flex-shrink: 0; }
.wok-ev-proctitle { font-size: 21px; font-weight: 800; letter-spacing: -.01em; margin: 0; color: var(--gray-darker); }
.wok-ev-pct { margin-left: auto; font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--brand-primary); }
.wok-ev-procsub { font-size: 14px; color: var(--gray-base); margin: 0 0 18px; }
.wok-ev-bar { height: 10px; background: var(--gray-lighter-4); border-radius: 5px; overflow: hidden; position: relative; margin-bottom: 22px; }
.wok-ev-barfill { height: 100%; width: 0%; background: linear-gradient(90deg, #152a80, #1d65af); border-radius: 5px; position: relative; overflow: hidden; transition: width .25s; }
.wok-ev-barshimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); width: 40%; animation: wokShimmer 1.6s linear infinite; }
.wok-ev-folders { display: grid; gap: 8px; margin-bottom: 20px; }
.wok-ev-folderrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 12px; }
.wok-ev-folderrow.is-active { background: rgba(16,98,254,.04); }
.wok-ev-folderrow.is-queued { opacity: .6; }
.wok-ev-foldericon {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  background: var(--body-bg); color: var(--gray-lighter);
}
.wok-ev-folderrow.is-done .wok-ev-foldericon { background: rgba(54,192,85,.15); color: var(--brand-success); }
.wok-ev-folderrow.is-active .wok-ev-foldericon {
  border: 2px solid var(--brand-primary); border-top-color: rgba(16,98,254,.25);
  animation: wokSpin .8s linear infinite;
}
.wok-ev-folderinfo { min-width: 0; }
.wok-ev-foldername { font-size: 14px; font-weight: 600; color: var(--gray-darker); }
.wok-ev-foldermeta { font-size: 12px; color: var(--gray-base); }
.wok-ev-folderbar { flex: 1; height: 6px; background: var(--gray-lighter-4); border-radius: 3px; overflow: hidden; margin: 0 4px; }
.wok-ev-folderfill { height: 100%; width: 0%; background: linear-gradient(90deg, #152a80, #1d65af); border-radius: 3px; transition: width .25s; }
.wok-ev-folderrow.is-done .wok-ev-folderfill { background: var(--brand-success); }
.wok-ev-folderpct { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; color: var(--gray-base); width: 44px; text-align: right; }
.wok-ev-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.wok-ev-stat { text-align: center; padding: 12px 8px; background: var(--body-bg); border-radius: 8px; }
.wok-ev-statnum { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--gray-darker); }
.wok-ev-statlabel { font-size: 10.5px; color: var(--gray-lighter); text-transform: uppercase; letter-spacing: .8px; }
.wok-ev-closenote {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: rgba(16,98,254,.05); border: 1px solid rgba(16,98,254,.15);
  border-radius: 12px; font-size: 13.5px; color: var(--gray-base); line-height: 1.5;
}
.wok-ev-closenote svg { flex-shrink: 0; }

/* proc-foutkaart */
.wok-ev-procerr { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 12px; overflow: hidden; margin-top: 0; }
.wok-ev-procerr .wok-ev-errhead { padding: 10px 18px; }
.wok-ev-procerr-body { padding: 20px 22px; }
.wok-ev-procerr-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--gray-darker); margin: 0 0 6px; }
.wok-ev-procerr-text { font-size: 14px; color: var(--gray-darker); line-height: 1.6; margin: 0 0 6px; }
.wok-ev-procerr-hint { font-size: 13px; color: var(--gray-base); line-height: 1.6; margin: 0 0 18px; }
.wok-ev-procerr-btns { display: flex; gap: 12px; }

/* ---------------- KLAAR (done) ---------------- */
.wok-ev-done { text-align: center; }
.wok-ev-donecircle {
  width: 64px; height: 64px; border-radius: 50%; background: rgba(54,192,85,.12);
  display: flex; align-items: center; justify-content: center; margin: 4px auto 16px;
}
.wok-ev-donetitle { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; color: var(--gray-darker); }
.wok-ev-donetext { font-size: 15px; color: var(--gray-base); line-height: 1.6; max-width: 480px; margin: 0 auto 26px; }
.wok-ev-donetext strong { color: var(--gray-darker); overflow-wrap: anywhere; }
.wok-ev-donestats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 640px; margin: 0 auto 28px; text-align: center; }
.wok-ev-donestat { padding: 14px 8px; background: var(--body-bg); border-radius: 12px; }
.wok-ev-donestat .wok-ev-statnum { font-size: 19px; }
.wok-ev-donenotify { font-size: 13.5px; color: var(--brand-success-dark); margin: -14px 0 24px; }
.wok-ev-donebtns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.wok-ev-btn-primary--done { padding: 11px 20px; }
.wok-ev-btn-ghost--done { padding: 11px 20px; font-size: 14px; }
.wok-ev-loglinks { display: flex; justify-content: center; gap: 16px; font-size: 13px; }
.wok-ev-loglinks--start { justify-content: flex-start; margin-top: 20px; }
.wok-ev-loglink { color: var(--gray-base); font-size: 13px; font-family: var(--font-sans); text-decoration: underline; background: none; border: none; cursor: pointer; padding: 0; }
.wok-ev-console {
  background: #17191c; border-radius: 12px; padding: 16px 18px; margin-top: 16px;
  max-height: 240px; overflow-y: auto; font-family: var(--font-mono);
  font-size: 12px; line-height: 1.7; text-align: left;
}
.wok-ev-console div { color: rgba(255,255,255,.75); overflow-wrap: anywhere; }

/* ---------------- INFO-KAARTJES ---------------- */
.wok-ev-infocards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 0; }
.wok-ev-infocard { background: #fff; border: 1px solid var(--gray-lighter-4); border-radius: 18px; padding: 20px 22px; box-shadow: var(--shadow-card); }
.wok-ev-infotitle { font-size: 14.5px; font-weight: 700; color: var(--gray-darker); margin-bottom: 4px; }
.wok-ev-infobody { font-size: 13px; color: var(--gray-base); line-height: 1.55; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
  .wok-ev-card { padding: 26px 20px 30px; }
  .wok-ev-vn { flex-direction: column; align-items: stretch; gap: 10px; }
  .wok-ev-vn-arrow { transform: rotate(90deg); margin: 0 auto; }
  .wok-ev-infocards { grid-template-columns: 1fr; }
  .wok-ev-donestats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .wok-ev-hero { padding: 40px 0 110px; }
  .wok-ev-main { padding-left: 16px; padding-right: 16px; }
  .wok-ev-step-label { display: none; }
  .wok-ev-step.is-active .wok-ev-step-label { display: block; }
  .wok-ev-nav, .wok-ev-ctrlnav { flex-wrap: wrap; }
}

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion: reduce) {
  .wok-ev-hero-tag-dot, .wok-ev-pulsedot { animation: none; }
  .wok-ev-barshimmer { animation: none; display: none; }
  .wok-ev-spinner, .wok-ev-spinner--sm, .wok-ev-folderrow.is-active .wok-ev-foldericon { animation: none; }
  .wok-ev-step-circle, .wok-ev-barfill, .wok-ev-folderfill, .wok-ev-btn-primary, .wok-ev-provider { transition: none; }
}

/* ---------------- PROVIDER-LETTER MERKKLEUREN + FORMERROR-ICON ---------------- */
/* Merkkleur per provider-fallbackletter (voorheen inline background) */
.wok-ev-provider-letter--gmail   { background: #EA4335; }
.wok-ev-provider-letter--ms      { background: #0F6CBD; }
.wok-ev-provider-letter--ziggo   { background: #F48C00; }
.wok-ev-provider-letter--kpn     { background: #009900; }
.wok-ev-provider-letter--transip { background: #0B5394; }
.wok-ev-provider-letter--strato  { background: #003D8F; }
.wok-ev-provider-letter--anders  { background: #5e636e; }
.wok-ev-formerror svg { flex-shrink: 0; }

/* Microsoft-inlog met een code (13 okt 2026) */
.wok-ev-ms-uitleg { margin: 0 0 10px; font-size: 14px; color: #475569; line-height: 1.5; }
.wok-ev-ms-stappen { margin-top: 12px; padding: 12px 14px; border: 1px solid #dbe4f3; border-radius: 10px; background: #f7f9fd; }
.wok-ev-ms-stappen ol { margin: 0 0 10px; padding-left: 20px; font-size: 14px; line-height: 1.8; }
.wok-ev-ms-code { display: inline-block; padding: 2px 10px; border-radius: 6px; background: #fff; border: 1px solid #c9d6ee; font-size: 18px; letter-spacing: 2px; }
.wok-ev-ms .wok-ev-okline, .wok-ev-ms .wok-ev-formerror { margin-top: 10px; }