/*
 * INR Onboarding — stappenplan-stijl, los van de mappenboom.
 *
 * Elementor-padding-aanpak: de root (.inr-onb) geeft EIGEN zij-padding en
 * forceert box-sizing, zodat de content nooit tegen de rand plakt, ongeacht hoe
 * Elementor de container opmaakt. Elke regel !important om themingconflicten te
 * vermijden, conform de huisstijl van de plugin.
 */

.inr-onb { width: 100% !important; max-width: 760px !important; margin: 0 auto !important; padding: 8px 20px 48px !important; box-sizing: border-box !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; color: #0F172A !important; }
.inr-onb *, .inr-onb *::before, .inr-onb *::after { box-sizing: border-box !important; }

.inr-onb-laden, .inr-onb-leeg { font-size: 14.5px !important; color: #64748B !important; padding: 18px 0 !important; }

/* Kop */
.inr-onb-kop { margin-bottom: 26px !important; }
.inr-onb-kop h1 { font-size: 26px !important; font-weight: 800 !important; letter-spacing: -.02em !important; margin: 6px 0 8px !important; color: #0F172A !important; }
.inr-onb-oms { font-size: 14.5px !important; color: #64748B !important; line-height: 1.55 !important; margin: 0 0 14px !important; }
.inr-onb-terug { background: none !important; border: none !important; color: #007BFF !important; font-size: 13.5px !important; font-weight: 600 !important; cursor: pointer !important; padding: 0 !important; margin-bottom: 4px !important; }
.inr-onb-terug:hover { text-decoration: underline !important; }
.inr-onb-allesopen-melding { font-size: 13px !important; color: #B45309 !important; background: #FEF3C7 !important; border-radius: 8px !important; padding: 8px 12px !important; margin: 0 0 12px !important; }

/* Voortgangsbalk */
.inr-onb-voortgangbalk { height: 8px !important; border-radius: 999px !important; background: rgba(15,23,42,.08) !important; overflow: hidden !important; margin-top: 8px !important; }
.inr-onb-voortgangbalk-vol { height: 100% !important; background: linear-gradient(90deg, #007BFF, #00C2A8) !important; border-radius: 999px !important; transition: width .4s ease !important; }
.inr-onb-voortgangtekst { font-size: 12.5px !important; color: #94A3B8 !important; margin-top: 6px !important; font-weight: 600 !important; }

/* Het stappenplan: een verticale lijn met bolletjes. */
.inr-onb-stappen { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.inr-onb-stap { display: flex !important; gap: 16px !important; align-items: stretch !important; }
.inr-onb-stap-spoor { display: flex !important; flex-direction: column !important; align-items: center !important; flex: 0 0 auto !important; }
.inr-onb-stap-bol { width: 38px !important; height: 38px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: 15px !important; flex: 0 0 auto !important; border: 2px solid rgba(15,23,42,.14) !important; background: #fff !important; color: #94A3B8 !important; transition: all .2s ease !important; }
.inr-onb-stap-bol svg { width: 18px !important; height: 18px !important; }
.inr-onb-stap-lijn { width: 2px !important; flex: 1 1 auto !important; min-height: 16px !important; background: rgba(15,23,42,.12) !important; margin: 4px 0 !important; }
.inr-onb-stap-body { flex: 1 1 auto !important; padding-bottom: 22px !important; min-width: 0 !important; }
.inr-onb-stap-kop { display: flex !important; flex-direction: column !important; gap: 2px !important; margin-bottom: 8px !important; }
.inr-onb-stap-nr { font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .05em !important; color: #94A3B8 !important; }
.inr-onb-stap-titel { font-size: 16.5px !important; font-weight: 700 !important; color: #0F172A !important; line-height: 1.3 !important; }

/* States */
.inr-onb-stap.is-voltooid .inr-onb-stap-bol { background: #00C2A8 !important; border-color: #00C2A8 !important; color: #fff !important; }
.inr-onb-stap.is-voltooid .inr-onb-stap-lijn { background: #00C2A8 !important; }
.inr-onb-stap.is-open .inr-onb-stap-bol { border-color: #007BFF !important; color: #007BFF !important; box-shadow: 0 0 0 4px rgba(0,123,255,.12) !important; }
.inr-onb-stap.is-vergrendeld .inr-onb-stap-bol { background: #F1F5F9 !important; color: #CBD5E1 !important; }
.inr-onb-stap.is-vergrendeld .inr-onb-stap-titel { color: #94A3B8 !important; }

.inr-onb-stap-slot { font-size: 13px !important; color: #94A3B8 !important; font-style: italic !important; }
.inr-onb-stap-klaar { font-size: 13px !important; color: #00A38C !important; font-weight: 600 !important; margin-bottom: 6px !important; }

/* Detail (video/tekst/quiz) */
.inr-onb-stap-detail { margin-top: 14px !important; padding: 16px !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 14px !important; background: #FBFBFD !important; }
.inr-onb-video { position: relative !important; width: 100% !important; padding-top: 56.25% !important; border-radius: 12px !important; overflow: hidden !important; background: #0B0B12 !important; margin-bottom: 14px !important; }
.inr-onb-video iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: 0 !important; }
.inr-onb-tekst { font-size: 14.5px !important; line-height: 1.6 !important; color: #1E293B !important; margin-bottom: 14px !important; }
.inr-onb-tekst p { margin: 0 0 10px !important; }

/* Quiz (deelnemer) */
.inr-onb-quiz { border-top: 1px dashed rgba(15,23,42,.12) !important; padding-top: 14px !important; margin-top: 4px !important; }
.inr-onb-quiz-kop { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #64748B !important; margin-bottom: 12px !important; }
.inr-onb-vraag { margin-bottom: 16px !important; }
.inr-onb-vraag-tekst { font-size: 14.5px !important; font-weight: 600 !important; color: #0F172A !important; margin-bottom: 8px !important; }
.inr-onb-opties { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.inr-onb-optie { display: flex !important; align-items: center !important; gap: 10px !important; font-size: 14px !important; color: #1E293B !important; cursor: pointer !important; padding: 9px 12px !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 10px !important; transition: background .14s ease !important; }
.inr-onb-optie:hover { background: rgba(0,123,255,.05) !important; }
.inr-onb-optie input { width: 16px !important; height: 16px !important; accent-color: #007BFF !important; cursor: pointer !important; flex: 0 0 auto !important; }
.inr-onb-vraag-fb { font-size: 12.5px !important; font-weight: 600 !important; margin-top: 6px !important; }
.inr-onb-vraag-fb.is-goed { color: #00A38C !important; }
.inr-onb-vraag-fb.is-fout { color: #DC2626 !important; }

/* Voltooi-zone — bewust uitnodigend, want de cooldown start hier. */
.inr-onb-voltooi-zone { margin-top: 16px !important; padding-top: 14px !important; border-top: 1px dashed rgba(15,23,42,.12) !important; }
.inr-onb-voltooi-uitleg { font-size: 13.5px !important; color: #475569 !important; line-height: 1.5 !important; margin: 0 0 12px !important; }

/* Knoppen */
.inr-onb-knop { display: inline-flex !important; align-items: center !important; gap: 8px !important; background: #007BFF !important; color: #fff !important; border: none !important; border-radius: 11px !important; padding: 11px 20px !important; font-size: 14.5px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; transition: background .15s ease, transform .1s ease !important; }
.inr-onb-knop:hover { background: #0067D6 !important; }
.inr-onb-knop:active { transform: translateY(1px) !important; }
.inr-onb-knop-voltooi { background: #00C2A8 !important; }
.inr-onb-knop-voltooi:hover { background: #00A38C !important; }
.inr-onb-knop-voltooi:disabled, .inr-onb-knop:disabled { background: rgba(15,23,42,.12) !important; color: #94A3B8 !important; cursor: not-allowed !important; }
.inr-onb-knop-voltooi:disabled:hover { background: rgba(15,23,42,.12) !important; }

/* Wachttijd-timer (deelnemer) */
.inr-onb-timer { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important; padding: 11px 14px !important; background: rgba(0,123,255,.06) !important; border: 1px solid rgba(0,123,255,.16) !important; border-radius: 11px !important; font-size: 13.5px !important; color: #334155 !important; }
.inr-onb-timer-label { color: #64748B !important; }
.inr-onb-timer-klok { font-variant-numeric: tabular-nums !important; font-weight: 700 !important; font-size: 16px !important; color: #007BFF !important; letter-spacing: .02em !important; }

/* Hint onder een editor-veld */
.inr-onb-veld-hint { display: block !important; font-size: 12px !important; color: #94A3B8 !important; margin-top: 4px !important; }
.inr-onb-knop-licht { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: rgba(15,23,42,.05) !important; color: #0F172A !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 10px !important; padding: 9px 16px !important; font-size: 13.5px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; margin-top: 4px !important; }
.inr-onb-knop-licht:hover { background: rgba(15,23,42,.09) !important; }
.inr-onb-knop-mini { background: rgba(15,23,42,.05) !important; color: #334155 !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 8px !important; padding: 5px 11px !important; font-size: 12.5px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; margin: 6px 6px 0 0 !important; }
.inr-onb-knop-mini:hover { background: rgba(15,23,42,.09) !important; }
.inr-onb-knop-mini.gevaar { color: #DC2626 !important; border-color: rgba(220,38,38,.25) !important; }
.inr-onb-knop-mini.gevaar:hover { background: rgba(220,38,38,.08) !important; }

/* Deelnemer-keuzelijst (meerdere onboardings) */
.inr-onb-keuze { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.inr-onb-keuze-kaart { display: flex !important; flex-direction: column !important; gap: 3px !important; text-align: left !important; padding: 16px 18px !important; border: 1px solid rgba(15,23,42,.12) !important; border-radius: 14px !important; background: #fff !important; cursor: pointer !important; }
.inr-onb-keuze-kaart:hover { border-color: #007BFF !important; box-shadow: 0 4px 16px -8px rgba(0,123,255,.4) !important; }
.inr-onb-keuze-titel { font-size: 16px !important; font-weight: 700 !important; color: #0F172A !important; }
.inr-onb-keuze-oms { font-size: 13.5px !important; color: #64748B !important; }
.inr-onb-keuze-meta { font-size: 12.5px !important; color: #94A3B8 !important; font-weight: 600 !important; margin-top: 2px !important; }

/* Beheerbalk onder stappenplan */
.inr-onb-beheerbalk { margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid rgba(15,23,42,.10) !important; }
.inr-onb-schakel { display: inline-flex !important; align-items: center !important; gap: 9px !important; font-size: 14px !important; color: #334155 !important; cursor: pointer !important; }
.inr-onb-schakel input { width: 17px !important; height: 17px !important; accent-color: #007BFF !important; cursor: pointer !important; }

/* Beheer-overzicht */
.inr-onb-sectie { margin-bottom: 30px !important; }
.inr-onb-sectie-kop { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #64748B !important; margin: 0 0 12px !important; }
.inr-onb-templatelijst, .inr-onb-toewlijst { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-bottom: 14px !important; }
.inr-onb-templaterij, .inr-onb-toewrij { display: flex !important; align-items: center !important; gap: 12px !important; flex-wrap: wrap !important; padding: 12px 14px !important; border: 1px solid rgba(15,23,42,.10) !important; border-radius: 11px !important; background: #fff !important; }
.inr-onb-templaterij-titel, .inr-onb-toewrij-naam { font-weight: 700 !important; font-size: 14.5px !important; color: #0F172A !important; flex: 1 1 auto !important; }
.inr-onb-templaterij-meta, .inr-onb-toewrij-tpl, .inr-onb-toewrij-voortgang { font-size: 12.5px !important; color: #64748B !important; }
.inr-onb-toewrij-tpl { background: #F1F5F9 !important; border-radius: 999px !important; padding: 3px 10px !important; }
.inr-onb-templaterij-acties, .inr-onb-toewrij-acties { display: flex !important; gap: 4px !important; flex: 0 0 auto !important; }
.inr-onb-toewvorm { display: flex !important; gap: 10px !important; flex-wrap: wrap !important; align-items: center !important; margin-top: 8px !important; }

/* Klantkiezer in beheer */
.inr-onb-klantkiezer { display: flex !important; flex-direction: column !important; gap: 5px !important; max-width: 360px !important; margin-bottom: 16px !important; }

/* Statustabel: wie heeft de onboarding (af)gerond */
.inr-onb-statustabel-wrap { overflow-x: auto !important; margin-bottom: 14px !important; }
.inr-onb-statustabel { width: 100% !important; border-collapse: collapse !important; font-size: 13.5px !important; }
.inr-onb-statustabel th { text-align: left !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #94A3B8 !important; padding: 8px 12px !important; border-bottom: 1px solid rgba(15,23,42,.10) !important; }
.inr-onb-statustabel td { padding: 11px 12px !important; border-bottom: 1px solid rgba(15,23,42,.07) !important; color: #1E293B !important; vertical-align: middle !important; }
.inr-onb-statustabel tbody tr:hover { background: rgba(15,23,42,.02) !important; }
.inr-onb-statustabel-acties { white-space: nowrap !important; }
.inr-onb-status-badge { display: inline-block !important; font-size: 12px !important; font-weight: 700 !important; border-radius: 999px !important; padding: 3px 11px !important; }
.inr-onb-status-badge.is-klaar { background: rgba(0,194,168,.14) !important; color: #00876F !important; }
.inr-onb-status-badge.is-bezig { background: rgba(0,123,255,.12) !important; color: #0067D6 !important; }
.inr-onb-status-badge.is-nieuw { background: rgba(15,23,42,.06) !important; color: #64748B !important; }

/* Editor */
.inr-onb-veldrij { display: flex !important; flex-direction: column !important; gap: 5px !important; margin-bottom: 14px !important; }
.inr-onb-veldrij-dubbel { flex-direction: row !important; gap: 16px !important; flex-wrap: wrap !important; }
.inr-onb-veldrij-dubbel > div { flex: 1 1 200px !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
.inr-onb-label { font-size: 12.5px !important; font-weight: 600 !important; color: #475569 !important; }
.inr-onb-input, .inr-onb-textarea, .inr-onb-select { width: 100% !important; padding: 10px 13px !important; font-size: 14px !important; font-family: inherit !important; border: 1.5px solid rgba(15,23,42,.14) !important; border-radius: 10px !important; background: #fff !important; color: #0F172A !important; outline: none !important; box-sizing: border-box !important; }
.inr-onb-input:focus, .inr-onb-textarea:focus, .inr-onb-select:focus { border-color: #007BFF !important; box-shadow: 0 0 0 3px rgba(0,123,255,.10) !important; }
.inr-onb-input-smal { max-width: 140px !important; }
.inr-onb-textarea { resize: vertical !important; line-height: 1.5 !important; }
.inr-onb-select { cursor: pointer !important; min-width: 180px !important; }

.inr-onb-modules { display: flex !important; flex-direction: column !important; gap: 16px !important; margin-bottom: 16px !important; }
.inr-onb-module-edit { border: 1px solid rgba(15,23,42,.12) !important; border-radius: 14px !important; padding: 18px !important; background: #fff !important; }
.inr-onb-module-edit-kop { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 14px !important; }
.inr-onb-module-edit-nr { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; color: #007BFF !important; }
.inr-onb-module-edit-acties { display: flex !important; gap: 4px !important; }

.inr-onb-quiz-edit { margin-top: 12px !important; padding-top: 14px !important; border-top: 1px dashed rgba(15,23,42,.14) !important; }
.inr-onb-vragen-edit { display: flex !important; flex-direction: column !important; gap: 14px !important; margin: 12px 0 !important; }
.inr-onb-vraag-edit { border-left: 3px solid rgba(0,123,255,.3) !important; padding-left: 12px !important; }
.inr-onb-opties-edit { display: flex !important; flex-direction: column !important; gap: 7px !important; }
.inr-onb-optie-edit { display: flex !important; align-items: center !important; gap: 9px !important; }
.inr-onb-optie-edit input[type="radio"] { width: 16px !important; height: 16px !important; accent-color: #00C2A8 !important; flex: 0 0 auto !important; cursor: pointer !important; }
.inr-onb-editor-acties { margin-top: 18px !important; }

/* Smal scherm */
@media (max-width: 600px) {
  .inr-onb { padding: 8px 14px 40px !important; }
  .inr-onb-veldrij-dubbel { flex-direction: column !important; gap: 14px !important; }
}