/* Aanmeldformulier */
.signup{background:var(--bg-soft);padding:56px 0 96px}
.signup-grid{display:grid;grid-template-columns:380px 1fr;gap:32px;align-items:stretch}
.signup-info{position:relative;background:var(--navy);color:#cfdbe8;border-radius:28px;padding:40px 36px;overflow:hidden}
.signup-info::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:var(--coral);opacity:.14;right:-110px;bottom:-110px}
.signup-info .eyebrow{color:#f3a597}
.signup-info h1{color:#fff;font-size:2.1rem}
.how{list-style:none;padding:0;margin:28px 0;counter-reset:s;display:grid;gap:18px}
.how li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;column-gap:14px}
.how li::before{content:counter(s);grid-row:span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;font-weight:800}
.how b{color:#fff}
.how span{font-size:.93rem;line-height:1.5}
.info-note{display:flex;gap:12px;background:rgba(255,255,255,.06);border-radius:var(--radius-sm);padding:14px 16px;font-size:.88rem;line-height:1.5}
.info-note svg{flex:none;width:20px;height:20px;color:var(--sage);margin-top:2px}
.info-note p{margin:0}
.info-note a{color:#fff}
.info-contact{margin-top:24px;position:relative;z-index:1}
.info-contact span{display:block;font-size:.88rem}
.info-contact a{color:#fff;font-weight:800;font-size:1.35rem;text-decoration:none}

.form-card{background:#fff;border-radius:28px;padding:40px 48px 44px;box-shadow:var(--shadow);border:1px solid var(--line)}
.stepper ol{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:0;margin:10px 0 0;font-size:.85rem;font-weight:700;color:#a5b0bb}
.stepper li{transition:color .3s}
.stepper li.on{color:var(--navy)}
.stepper-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.stepper-bar span{display:block;height:100%;width:25%;background:linear-gradient(90deg,var(--coral),#ef8f7b);border-radius:6px;transition:width .5s cubic-bezier(.2,.7,.2,1)}
.step-count{display:none;font-size:.85rem;color:var(--muted);margin:10px 0 0}

fieldset{border:0;padding:0;margin:0;min-width:0}
.step{display:none}
.step.is-active{display:block;animation:stepIn .45s cubic-bezier(.2,.7,.2,1)}
.step.back.is-active{animation-name:stepInBack}
@keyframes stepIn{from{opacity:0;transform:translateX(24px)}}
@keyframes stepInBack{from{opacity:0;transform:translateX(-24px)}}
legend{padding:36px 0 0;margin:0 0 24px;width:100%}
legend h2:focus{outline:none}
legend h2{font-size:1.9rem;margin-bottom:.3rem}
legend p{margin:0;color:var(--muted)}

.choices{display:grid;gap:12px}
.choice{position:relative;display:flex;gap:16px;align-items:center;padding:18px 20px;border:2px solid var(--line);border-radius:16px;cursor:pointer;transition:border-color .2s,background .2s}
.choice:hover{border-color:#cbd4dc}
.choice input,.chip input,.seg input{position:absolute;opacity:0;pointer-events:none}
.choice-ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg-soft);color:var(--navy);font-weight:800;transition:background .2s,color .2s}
.choice b{display:block;color:var(--navy)}
.choice small{color:var(--muted);font-size:.9rem}
.choice:has(input:checked){border-color:var(--coral);background:var(--coral-soft)}
.choice:has(input:checked) .choice-ico{background:var(--coral);color:#fff}
.choice:has(input:focus-visible),.chip:has(input:focus-visible),.seg label:has(input:focus-visible) span{outline:3px solid rgba(229,106,84,.35);outline-offset:2px}

.callout{margin-top:16px;border-radius:14px;padding:16px 18px;font-size:.95rem;line-height:1.55}
.callout-info{background:var(--sky-soft);color:#24566a}
.callout-warn{background:#fff6e8;color:#7a5414;border:1px solid #f4dfb8}
.callout b{display:block;margin-bottom:.2rem}
.callout-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:12px}
.callout-actions .btn{padding:.6rem 1.1rem;font-size:.92rem}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;padding:.7rem 1.1rem;border:2px solid var(--line);border-radius:999px;cursor:pointer;font-weight:600;color:var(--navy);transition:.2s;user-select:none}
.chip:hover{border-color:#cbd4dc}
.chip:has(input:checked){border-color:var(--coral);background:var(--coral);color:#fff}

.field{margin-top:20px;position:relative}
.field label,.label{display:block;font-weight:700;color:var(--navy);font-size:.95rem;margin-bottom:.45rem}
.field em{font-style:normal;font-weight:500;color:var(--muted);font-size:.85rem;margin-left:.3rem}
input:not([type=radio]):not([type=checkbox]),select,textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:12px;padding:.8rem 1rem;transition:border-color .2s,box-shadow .2s;min-height:52px}
textarea{resize:vertical;min-height:120px}
select{appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23193356' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 1rem center/16px no-repeat;padding-right:2.8rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--coral);box-shadow:0 0 0 4px rgba(229,106,84,.15)}
[aria-invalid=true]{border-color:#d64545 !important}
.hint{display:block;text-align:right;color:var(--muted);font-size:.8rem;margin-top:.3rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.err{display:none;color:#c23b3b;font-size:.86rem;font-weight:600;margin:.4rem 0 0}
.err.show,[aria-invalid=true]~.err{display:block}

.seg{display:inline-flex;flex-wrap:wrap;background:var(--bg-soft);border-radius:999px;padding:4px;gap:2px}
.seg label{position:relative;cursor:pointer}
.seg span{display:block;padding:.55rem 1.1rem;border-radius:999px;font-weight:600;font-size:.93rem;color:var(--muted);transition:.2s}
.seg input:checked+span{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(25,51,86,.12)}

.toggle{display:flex;gap:14px;align-items:center;margin-top:24px;cursor:pointer;font-weight:600;color:var(--navy);font-size:.95rem;line-height:1.45}
.toggle input{position:absolute;opacity:0}
.switch{flex:none;width:46px;height:26px;border-radius:26px;background:#d3dbe2;position:relative;transition:background .2s}
.switch::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .25s cubic-bezier(.3,1.4,.5,1);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle input:checked+.switch{background:var(--coral)}
.toggle input:checked+.switch::after{transform:translateX(20px)}
.toggle input:focus-visible+.switch{outline:3px solid rgba(229,106,84,.35);outline-offset:2px}
.aside-link{margin:28px 0 0;font-size:.9rem;color:var(--muted)}
.aside-link a{color:var(--navy);font-weight:700}

.summary{display:grid;grid-template-columns:200px 1fr;margin:0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.summary dt,.summary dd{margin:0;padding:12px 16px;border-bottom:1px solid var(--line);font-size:.95rem}
.summary dt{color:var(--muted);font-weight:600;background:var(--bg-soft)}
.summary dd{color:var(--ink);font-weight:600}
.summary dd button{float:right;background:none;border:0;color:var(--coral);font:inherit;font-size:.85rem;font-weight:700;cursor:pointer;padding:0}
.summary dt:nth-last-of-type(1),.summary dd:last-child{border-bottom:0}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-size:.93rem;line-height:1.5;cursor:pointer}
.consent input{width:22px;height:22px;accent-color:var(--coral);flex:none;margin-top:1px}

.form-nav{display:flex;justify-content:space-between;align-items:center;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.form-nav [data-next]{margin-left:auto}
.btn-back{background:none;color:var(--muted);padding-left:0}
.btn-back:hover{color:var(--navy)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn.loading{pointer-events:none}
.btn.loading .arrow{display:inline-block;animation:spin 1s linear infinite}

.done{text-align:center;padding:40px 0 10px;outline:none}
.done-check{width:88px;height:88px;margin:0 auto 20px}
.done-check circle{fill:var(--sage-soft);stroke:var(--sage);stroke-width:3;stroke-dasharray:227;stroke-dashoffset:227;animation:draw .7s ease-out forwards}
.done-check path{fill:none;stroke:#5f7a4a;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:50;animation:draw .45s .55s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done .lead{max-width:44ch;margin:0 auto}
.how-light{max-width:420px;margin:32px auto;text-align:left}
.how-light li::before{background:var(--coral-soft);color:var(--coral)}
.how-light b{color:var(--navy)}
.how-light span{color:var(--muted)}

@media (max-width:980px){
  .signup-grid{grid-template-columns:1fr}
  .signup-info{position:relative;top:0;order:2}
}
@media (max-width:640px){
  .signup{padding:24px 0 64px}
  .form-card{padding:28px 20px 28px;border-radius:22px}
  .stepper ol{display:none}
  .step-count{display:block}
  legend{padding-top:24px;margin-bottom:20px}
  legend h2{font-size:1.55rem}
  .row{grid-template-columns:1fr}
  .summary{grid-template-columns:1fr}
  .summary dt{border-bottom:0;padding-bottom:2px}
  .summary dd{padding-top:2px}
  .signup-info{padding:32px 24px}
}
@media (prefers-reduced-motion:reduce){.step.is-active{animation:none}}

/* ---------- WordPress-aanpassingen ---------- */
.signup { background: var(--bg-soft); }
.signup-grid > * { margin: 0 !important; }
.signup-info > * { position: relative; z-index: 1; margin-block: 0 1rem; }
.signup-info .is-style-eyebrow { color: #f3a597; }
.signup-info h1 { color: #fff; font-size: 2.1rem; }
.signup-info ol.how { margin: 28px 0 !important; }
.signup-info .how li { display: block; position: relative; padding-left: 50px; min-height: 36px; font-size: .93rem; line-height: 1.5; }
.signup-info .how li::before { position: absolute; left: 0; top: 0; }
.signup-info .how li strong { display: block; color: #fff; font-size: 1rem; }
.info-note { position: relative; padding-left: 46px !important; }
.info-note::before { content: ""; position: absolute; left: 16px; top: 16px; width: 20px; height: 20px; background: var(--sage); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.info-contact { font-size: .88rem; }
.info-contact a { color: #fff; font-weight: 800; font-size: 1.35rem; text-decoration: none; }
.signup-info a { color: #fff; }
.form-card .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send-error { margin: 1rem 0 0; padding: .9rem 1.1rem; border-radius: var(--radius-sm); background: #fdecea; color: #8a1f11; font-weight: 600; }
.send-error a { color: inherit; }
/* Knoppen uit het prototype */
.form-card .btn { white-space: nowrap; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.5rem; border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; font-size: 1rem; transition: background .2s, transform .2s; border: 2px solid transparent; cursor: pointer; }
.form-card .btn-primary { background: var(--coral); color: #fff; }
.form-card .btn-primary:hover { background: var(--coral-dark); }
.form-card .btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.form-card .btn-ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.form-card .btn-ghost:hover { background: var(--navy); color: #fff; }

.form-card [hidden] { display: none !important; }
.signup-info .info-note { display: block; }

/* Professionalomgeving: geen zalmroze accenten, maar lichtblauw */
.pro .stepper-bar span { background: linear-gradient(90deg, var(--coral), #7fb0e0); }
.pro .signup-info .is-style-eyebrow { color: #a9c8ee; }
.pro .signup-info::after { background: #7fb0e0; }

/* WAIS-IV: tabbladen, vragen en de koppen in de donkere kaart */
.form-card .stepper ol { grid-template-columns: repeat(var(--stappen, 4), 1fr); }
.wais-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 28px; border-radius: 999px; background: var(--bg-soft); }
.wais-tabs[hidden] { display: none; }
.wais-tabs button { padding: .7rem 1rem; border: 0; border-radius: 999px; background: none; font: inherit; font-weight: 700; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.wais-tabs button:hover { color: var(--navy); }
.wais-tabs button[aria-selected="true"] { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(25, 51, 86, .12); }
.wais-tabs button:focus-visible { outline: 3px solid rgba(229, 106, 84, .35); outline-offset: 2px; }
.wais-panel { scroll-margin-top: 110px; }
.wais-card { scroll-margin-top: 100px; min-width: 0; }
.signup-info h3 { color: #fff; }
.wais-aanmelden .signup-grid { align-items: start; }

.wais-vragen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wais-vragen li { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-family: var(--wp--preset--font-family--heading, inherit); font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--navy); }
.wais-hero h1 { max-width: 16ch; overflow-wrap: anywhere; hyphens: manual; }
@media (max-width: 860px) {
	.wais-vragen { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.wais-tabs button { padding: .65rem .5rem; font-size: .92rem; }
}
.wais-waarom .section-head h2, .wais-aanmelden .section-head h2 { text-wrap: balance; }
.wais-waarom .section-head, .wais-aanmelden .section-head { margin-bottom: 48px !important; }
.wais-waarom { padding-bottom: 72px; }
.wais-hero + * + * .split-media img { object-position: 78% center; }
