/* JobLaunchr Wervingscheck – opmaak van invoervelden en resultaten */
.jl-cd-hero-text > .w-embed, .jl-cd-hero-text > .jl-vc-embed { width: 100%; }
.jl-vc-form { width: 100%; max-width: 620px; margin: 8px 0 0; }
.jl-vc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jl-vc-field { display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: #fff; box-shadow: 0 18px 40px -20px rgba(0,0,0,.35); }
.jl-vc-field input { flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 16px; color: #000; outline: none; }
.jl-vc-field input::placeholder { color: rgba(0,0,0,.45); }
.jl-vc-field button { flex: none; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; background: #000; color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.jl-vc-field button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
.jl-vc-field button[disabled] { opacity: .7; cursor: progress; transform: none; }
.jl-vc-field:focus-within { box-shadow: 0 0 0 3px #000, 0 18px 40px -20px rgba(0,0,0,.35); }
.jl-vc-extra { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 0 8px; }
.jl-vc-extra label { flex: none; font-size: 14px; font-weight: 600; }
.jl-vc-extra input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.75); font: inherit; font-size: 15px; color: #000; outline: none; }
.jl-vc-extra input:focus { background: #fff; box-shadow: 0 0 0 2px #000; }
.jl-vc-hint { margin: 12px 0 0 12px; font-size: 14px; color: rgba(0,0,0,.7); }
.jl-vc-err { margin: 12px 0 0; padding: 12px 16px; border-radius: 14px; background: #fff; color: #b3261e; font-size: 15px; font-weight: 600; }
@media (max-width: 479px) {
  .jl-vc-field { flex-direction: column; border-radius: 22px; }
  .jl-vc-field button { width: 100%; }
  .jl-vc-extra { flex-direction: column; align-items: stretch; gap: 6px; padding: 0; }
}

#resultaat { display: none; }
#resultaat.is-on { display: block; }
#jl-vc-lead { display: none; }
#jl-vc-lead.is-ready { display: block; }

.jl-vc-loading { display: flex; align-items: center; gap: 16px; padding: 28px; border-radius: 28px; background: #f7f2e4; }
.jl-vc-loading[hidden] { display: none; }
.jl-vc-spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(0,0,0,.12); border-top-color: #000; animation: jlSpin .8s linear infinite; flex: none; }
@keyframes jlSpin { to { transform: rotate(360deg); } }
.jl-vc-step { margin: 0; font-size: 17px; font-weight: 600; }

#jl-vc-out:not(:empty), #jl-vc-full:not(:empty) { padding: 32px; border-radius: 32px; background: #fff; box-shadow: 0 30px 60px -40px rgba(0,0,0,.35); border: 1px solid rgba(0,0,0,.06); }
#jl-vc-full:not(:empty) { margin-top: 24px; }
.jl-vc-top { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; }
.jl-vc-score { display: flex; align-items: center; justify-content: center; gap: 2px; flex: none; width: 132px; height: 132px; border-radius: 50%; background: #f7f2e4; box-shadow: inset 0 0 0 8px currentColor; box-sizing: border-box; }
.jl-vc-score.is-good { color: #2e7d32; } .jl-vc-score.is-mid { color: #e7a600; } .jl-vc-score.is-bad { color: #d64545; }
.jl-vc-score-num { font-size: 52px; line-height: 1; font-weight: 800; color: #000; letter-spacing: -.03em; }
.jl-vc-score-of { font-size: 16px; font-weight: 600; color: rgba(0,0,0,.45); }
.jl-vc-grade { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.jl-vc-job { margin: 0; font-size: 15px; color: rgba(0,0,0,.6); word-break: break-word; }
.jl-vc-summary { margin: 10px 0 0; font-size: 15px; line-height: 1.5; }
.jl-vc-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin-bottom: 28px; }
.jl-vc-bar-head { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 15px; font-weight: 600; }
.jl-vc-bar-pct { color: rgba(0,0,0,.55); }
.jl-vc-bar-track { height: 10px; border-radius: 10px; background: #f3ecd9; overflow: hidden; }
.jl-vc-bar-fill { height: 100%; border-radius: 10px; transition: width 1s ease; }
.jl-vc-bar-fill.is-good { background: #2e7d32; } .jl-vc-bar-fill.is-mid { background: #e7a600; } .jl-vc-bar-fill.is-bad { background: #d64545; }
.jl-vc-notes { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.5; color: rgba(0,0,0,.7); }
.jl-vc-h { margin: 8px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(0,0,0,.55); }
.jl-vc-action { display: flex; gap: 14px; margin-bottom: 10px; padding: 18px; border-radius: 18px; background: #fff0c9; }
.jl-vc-action-num { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #000; color: #fff; font-size: 14px; font-weight: 700; }
.jl-vc-action-t { margin: 3px 0 4px; font-size: 16px; font-weight: 700; }
.jl-vc-action-p { margin: 0; font-size: 15px; line-height: 1.5; }
.jl-vc-locked { position: relative; filter: blur(5px); opacity: .55; pointer-events: none; user-select: none; }
.jl-vc-locked-note { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.jl-vc-warn { margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; background: #f7f2e4; font-size: 14px; line-height: 1.5; color: #5e4a12; }
.jl-vc-crit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.jl-vc-crit-item { padding: 14px 16px; border-radius: 16px; background: #f7f2e4; }
.jl-vc-crit-head { display: flex; justify-content: space-between; gap: 8px; font-size: 15px; font-weight: 700; }
.jl-vc-crit-score.is-good { color: #2e7d32; } .jl-vc-crit-score.is-mid { color: #a87800; } .jl-vc-crit-score.is-bad { color: #c03a3a; }
.jl-vc-crit-p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: rgba(0,0,0,.7); }
.jl-vc-better { margin-top: 18px; padding: 18px; border-radius: 18px; background: #dbecff; }
.jl-vc-better-l { margin: 0 0 4px; font-size: 14px; color: rgba(0,0,0,.6); }
.jl-vc-better-t { margin: 0; font-size: 18px; font-weight: 800; }
.jl-vc-better-p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; white-space: pre-line; }
.jl-vc-lib { display: inline-block; margin: -8px 0 22px; font-size: 14px; font-weight: 600; color: #000; text-decoration: underline; }
.jl-vc-cta { margin-top: 24px; padding: 28px; border-radius: 24px; background: #000; color: #fff; }
.jl-vc-cta-t { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.jl-vc-cta-p { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.8); }
.jl-vc-cta-btn { display: inline-block; padding: 16px 24px; border-radius: 999px; background: #e7a600; color: #000 !important; font-weight: 700; text-decoration: none; }
@media (max-width: 767px) {
  #jl-vc-out:not(:empty), #jl-vc-full:not(:empty) { padding: 22px; border-radius: 24px; }
  .jl-vc-top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .jl-vc-bars, .jl-vc-crit { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .jl-vc-bar-fill { transition: none; }
  .jl-vc-spinner { animation-duration: 2s; }
}