/* ============================================================
   Contra.expert — Intakeformulier (/intake)
   Bouwt volledig op de tokens uit styles.css: --ink, --bg,
   --accent, --paper, --radius … Themawissels werken dus mee.
   ============================================================ */

.intake { padding-bottom: clamp(48px, 8vw, 96px); }

/* ── voortgangsbalk ─────────────────────────────────────── */
.ik-rail {
  position: sticky; top: 0; z-index: 40;
  height: 3px; background: var(--ink-faint);
  margin-bottom: clamp(20px, 3vw, 32px);
}
.ik-rail__fill {
  height: 100%; width: 0; background: var(--accent);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}

/* ── sectiekaart ────────────────────────────────────────── */
.ik-sec {
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(22px, 3.4vw, 40px);
  margin-bottom: 20px;
}
.ik-sec__head { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 26px; }
.ik-sec__no {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700; letter-spacing: .02em;
}
.ik-sec__title {
  font-family: var(--serif); font-weight: 400;
  font-size: var(--step-3); line-height: 1.15;
  color: var(--ink); margin: 0 0 6px;
}
.ik-sec__sub { margin: 0; color: var(--ink-mute); font-size: 15px; max-width: 64ch; }

/* ── velden ─────────────────────────────────────────────── */
.ik-grid { display: grid; gap: 20px; }
.ik-grid--2 { grid-template-columns: 1fr 1fr; }
.ik-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.ik-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ik-f--wide { grid-column: 1 / -1; }
.ik-span2 { grid-column: span 2; }

.ik-f > label, .ik-lbl, .ik-subother label {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}
.ik-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.ik-hint { font-size: 13.5px; color: var(--ink-mute); line-height: 1.5; margin: 0; }

.intake input[type=text],
.intake input[type=email],
.intake input[type=tel],
.intake textarea {
  background: var(--bg); border: 1px solid var(--ink-line); border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font-size: 15px; font-family: inherit;
  outline: none; width: 100%;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.intake textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.intake input:focus, .intake textarea:focus {
  border-color: var(--accent); background: var(--paper);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.intake input::placeholder, .intake textarea::placeholder { color: var(--ink-mute); opacity: .7; }

.ik-err { display: none; font-size: 13px; font-weight: 600; color: #C0392B; margin: 0; }
.ik-err.is-on { display: block; }

/* ── keuzeblokken ───────────────────────────────────────── */
.ik-choices { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.ik-choice {
  position: relative; display: block; cursor: pointer;
  background: var(--bg); border: 1px solid var(--ink-line);
  border-radius: var(--radius); padding: 20px;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.ik-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ik-choice__t { display: block; font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 5px; }
.ik-choice__d { display: block; font-size: 13.5px; color: var(--ink-mute); line-height: 1.55; }
.ik-choice:hover { border-color: var(--accent); background: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ik-choice:has(input:checked) { border-color: var(--accent); background: var(--paper); box-shadow: var(--shadow-md); }
.ik-choice:has(input:checked)::before {
  content: ""; position: absolute; top: 14px; right: 14px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--accent)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 13 13'><path d='M2.5 6.8 5.2 9.5 10.5 3.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center no-repeat;
}
.ik-choice:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 3px; }

/* ── ja / nee ───────────────────────────────────────────── */
.ik-seg {
  display: inline-flex; flex-wrap: wrap; background: var(--bg);
  border: 1px solid var(--ink-line); border-radius: 10px; overflow: hidden;
}
.ik-seg label {
  position: relative; padding: 11px 20px; cursor: pointer;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  border-right: 1px solid var(--ink-line);
  transition: background .15s, color .15s;
}
.ik-seg label:last-child { border-right: 0; }
.ik-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ik-seg label:hover { background: var(--accent-soft); }
.ik-seg label:has(input:checked) { background: var(--ink); color: var(--paper); }
.ik-seg label:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: -3px; }

/* ── meldingen ──────────────────────────────────────────── */
.ik-note {
  display: flex; gap: 13px; align-items: flex-start;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 26px; font-size: 14.5px; color: var(--accent-ink); line-height: 1.6;
}
.ik-note svg { flex: none; margin-top: 3px; }

.ik-advies {
  display: none; margin-top: 20px; background: var(--accent-soft);
  border: 1px solid rgba(184,136,74,.35); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 22px;
}
.ik-advies.is-on { display: block; }
.ik-advies b { display: block; font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.ik-advies p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.65; color: var(--accent-ink); }
.ik-advies p:last-child { margin-bottom: 0; }
.ik-advies__klein { font-size: 13.5px !important; color: var(--ink-mute) !important; }

.ik-spoed {
  display: none; margin-top: 18px; background: rgba(192,57,43,.07);
  border-left: 3px solid #C0392B; padding: 18px 22px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.ik-spoed.is-on { display: block; }
.ik-spoed b { display: block; font-family: var(--serif); font-size: 20px; color: #A03024; margin-bottom: 4px; }
.ik-spoed p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.65; color: var(--ink); }
.ik-tels { display: flex; flex-wrap: wrap; gap: 10px; }
.ik-tels a {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: #A03024; color: #fff; font-weight: 700; font-size: 15px;
  padding: 11px 18px; border-radius: 10px;
  transition: background .16s, box-shadow .16s;
}
.ik-tels a:hover { background: #872619; box-shadow: 0 8px 20px -10px rgba(160,48,36,.9); }

/* ── schadekiezer ───────────────────────────────────────── */
.ik-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ik-type {
  position: relative; display: flex; gap: 14px; align-items: center;
  background: var(--bg); border: 1px solid var(--ink-line);
  border-radius: var(--radius); padding: 16px; cursor: pointer; text-align: left;
  transition: border-color .2s, background .2s, transform .2s, box-shadow .2s;
}
.ik-type input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ik-type__ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink);
  display: grid; place-items: center; transition: background .2s, color .2s;
}
.ik-type__t { display: block; font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); }
.ik-type__n { display: block; font-size: 11.5px; color: var(--ink-mute); letter-spacing: .09em; margin-top: 3px; font-weight: 600; }
.ik-type:hover { border-color: var(--accent); background: var(--paper); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.ik-type:has(input:checked) { background: var(--ink); border-color: var(--ink); box-shadow: var(--shadow-md); }
.ik-type:has(input:checked) .ik-type__t { color: var(--paper); }
.ik-type:has(input:checked) .ik-type__ic { background: var(--accent); color: #fff; }
.ik-type:has(input:checked) .ik-type__n { color: rgba(255,255,255,.6); }
.ik-type:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 3px; }

.ik-subs { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.ik-subpanel {
  border: 1px solid var(--ink-line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--bg);
  padding: 20px 22px;
}
.ik-subpanel__h { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.ik-subpanel__t { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.ik-subpanel__t b { color: var(--ink); }
.ik-subpanel__c { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.ik-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ik-chip {
  position: relative; display: inline-block; cursor: pointer;
  background: var(--paper); border: 1px solid var(--ink-line); border-radius: 100px;
  padding: 8px 16px; font-size: 14px; font-weight: 600; color: var(--ink);
  transition: background .15s, border-color .15s, color .15s;
}
.ik-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ik-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.ik-chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ik-chip:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 3px; }
.ik-subother { margin-top: 16px; display: none; }
.ik-subother.is-on { display: block; }

.ik-empty {
  border: 1px dashed var(--ink-line); border-radius: var(--radius);
  padding: 22px; text-align: center; color: var(--ink-mute);
  font-size: 14px; margin-top: 24px; background: var(--bg);
}

/* ── conditionele blokken ───────────────────────────────── */
.ik-cond { display: none; margin-top: 22px; }
.ik-cond.is-on { display: block; }
.ik-cond--box { background: var(--bg); border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 24px; }

/* ── eigen keuzelijst (vervangt de systeem-dropdown) ─────── */
.ik-select { position: relative; }
.ik-select > select { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; }
.ik-select__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: var(--bg); border: 1px solid var(--ink-line); border-radius: 10px;
  padding: 12px 14px; color: var(--ink); font-size: 15px; font-family: inherit;
  text-align: left; cursor: pointer; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.ik-select__btn[aria-expanded="true"] { border-color: var(--accent); background: var(--paper); box-shadow: 0 0 0 3px var(--accent-soft); }
.ik-select__btn .ph { color: var(--ink-mute); opacity: .8; }
.ik-select__btn .caret { flex: none; transition: transform .22s; }
.ik-select__btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.ik-select:has(select[aria-invalid="true"]) .ik-select__btn { border-color: #C0392B; background: rgba(192,57,43,.06); }

.ik-select__list {
  position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 7px);
  background: var(--paper); border: 1px solid var(--ink-line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 7px; margin: 0; list-style: none;
  max-height: 290px; overflow-y: auto; overscroll-behavior: contain; display: none;
}
.ik-select__list.is-on { display: block; }
.ik-select--up .ik-select__list { top: auto; bottom: calc(100% + 7px); }
.ik-select__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-radius: 9px; cursor: pointer;
  font-size: 15px; line-height: 1.45; color: var(--ink);
  transition: background .13s, color .13s;
}
.ik-select__opt .mark { opacity: 0; flex: none; color: var(--accent); }
.ik-select__opt:hover, .ik-select__opt.is-active { background: var(--accent-soft); }
.ik-select__opt[aria-selected="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.ik-select__opt[aria-selected="true"] .mark { opacity: 1; }
.ik-select__opt[aria-selected="true"]:hover { background: var(--ink-soft); }

/* ── datumveld met eigen kalender ───────────────────────── */
.ik-datum { position: relative; }
.ik-datum > input[type=date] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; padding: 0; margin: 0; border: 0; }
.ik-datum__inp { padding-right: 50px !important; }
.ik-datum__btn {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer;
  transition: background .15s, color .15s;
}
.ik-datum__btn:hover { background: var(--accent-soft); color: var(--accent-ink); }
.ik-datum:has(input[type=date][aria-invalid="true"]) .ik-datum__inp { border-color: #C0392B; background: rgba(192,57,43,.06); }

.ik-datum__pop {
  position: absolute; z-index: 80; left: 0; top: calc(100% + 9px);
  width: 320px; max-width: calc(100vw - 40px);
  background: var(--paper); border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: 16px 16px 14px; display: none;
}
.ik-datum__pop.is-on { display: block; }
.ik-datum--up .ik-datum__pop { top: auto; bottom: calc(100% + 9px); }

.ik-cal__head { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.ik-cal__nav {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--ink-line); border-radius: 9px; background: var(--bg); color: var(--ink);
  transition: background .15s, border-color .15s, color .15s;
}
.ik-cal__nav:hover:not(:disabled) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ik-cal__nav:disabled { opacity: .3; cursor: not-allowed; }
.ik-cal__mnd { flex: 1; text-align: center; font-family: var(--serif); font-size: 19px; color: var(--ink); text-transform: capitalize; }
.ik-cal__wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
.ik-cal__wk span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-ink); padding: 4px 0; }
.ik-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ik-cal__d {
  aspect-ratio: 1; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: 9px; background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
  transition: background .13s, color .13s;
}
.ik-cal__d.is-out { color: var(--ink-mute); opacity: .5; font-weight: 400; }
.ik-cal__d:hover:not(:disabled) { background: var(--accent-soft); }
.ik-cal__d:disabled { color: var(--ink-mute); opacity: .32; cursor: not-allowed; background: transparent; }
.ik-cal__d.is-nu { box-shadow: inset 0 0 0 1.5px var(--accent); color: var(--accent-ink); }
.ik-cal__d.is-gekozen { background: var(--ink); color: var(--paper); }
.ik-cal__d:focus-visible { outline: 2.5px solid var(--accent); outline-offset: -2px; }
.ik-cal__foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ink-line); }
.ik-cal__foot button {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--accent-ink);
  padding: 6px 10px; border-radius: 8px; transition: background .14s;
}
.ik-cal__foot button:hover { background: var(--accent-soft); }
.ik-cal__foot button.wis { color: var(--ink-mute); }

/* ── akkoord & verzenden ────────────────────────────────── */
.ik-sec--send { background: var(--ink); border-color: var(--ink); }
.ik-sec--send .ik-sec__title { color: var(--paper); }
.ik-sec--send .ik-sec__sub { color: rgba(255,255,255,.62); }
.ik-sec--send .ik-sec__no { background: rgba(184,136,74,.22); color: var(--accent); }
.ik-sec--send .ik-consent { color: rgba(255,255,255,.86); }
.ik-sec--send .ik-consent input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.ik-sec--send .ik-consent a { color: var(--accent); }
.ik-sec--send .ik-na { color: rgba(255,255,255,.55); }
.ik-sec--send .ik-na a { color: var(--accent); }

.ik-consent { display: flex; gap: 14px; align-items: flex-start; cursor: pointer; }
.ik-consent input {
  appearance: none; flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1px solid var(--ink-line); border-radius: 6px; background: var(--bg); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ik-consent input:checked {
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 13 13'><path d='M2.5 6.8 5.2 9.5 10.5 3.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center no-repeat;
  border-color: var(--accent);
}
.ik-consent span { font-size: 15px; line-height: 1.6; }
.ik-na { font-size: 13.5px; margin: 18px 0 0; max-width: 56ch; }

.ik-formerr {
  display: none; background: rgba(192,57,43,.14); border-left: 3px solid #E8756A;
  padding: 16px 20px; border-radius: 0 var(--radius) var(--radius) 0;
  color: #FFD9D3; font-size: 14.5px; margin-bottom: 24px;
}
.ik-formerr.is-on { display: block; }

/* ── bevestiging ────────────────────────────────────────── */
.ik-done { display: none; }
.ik-done.is-on { display: block; }
.ik-done__card {
  background: var(--paper); border: 1px solid var(--ink-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: clamp(28px, 4vw, 48px); text-align: center;
}
.ik-done__ic {
  width: 76px; height: 76px; margin: 0 auto 22px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center;
}
.ik-done h2 { font-family: var(--serif); font-weight: 400; font-size: var(--step-4); color: var(--ink); margin: 0 0 12px; line-height: 1.1; }
.ik-done > .ik-done__card > p { max-width: 56ch; margin: 0 auto; color: var(--ink-mute); }
.ik-recap {
  margin-top: 32px; text-align: left; background: var(--bg);
  border: 1px solid var(--ink-line); border-radius: var(--radius); padding: 26px 28px;
}
.ik-recap dl { display: grid; grid-template-columns: minmax(140px, 190px) 1fr; gap: 14px 24px; margin: 0; }
.ik-recap dt { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); padding-top: 3px; }
.ik-recap dd { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.6; }
.ik-kenmerk { font-family: var(--serif); font-size: 21px; color: var(--accent-ink); }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .ik-types { grid-template-columns: repeat(2, 1fr); }
  .ik-choices { grid-template-columns: 1fr; }
  .ik-grid--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .ik-grid--2, .ik-grid--3 { grid-template-columns: 1fr; }
  .ik-span2 { grid-column: auto; }
  .ik-types { grid-template-columns: 1fr; }
  .ik-sec__head { gap: 14px; }
  .ik-sec__no { width: 38px; height: 38px; font-size: 13px; }
  .ik-recap dl { grid-template-columns: 1fr; gap: 4px 0; }
  .ik-recap dd { margin-bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .intake *, .intake *::before, .intake *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* ── zoekveld binnen een lange keuzelijst ───────────────── */
.ik-select__zoek {
  width: 100%; margin: 0 0 6px; padding: 10px 12px;
  background: var(--bg); border: 1px solid var(--ink-line); border-radius: 9px;
  color: var(--ink); font-size: 14.5px; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.ik-select__zoek:focus { border-color: var(--accent); background: var(--paper); }
.ik-select__list:has(.ik-select__zoek) { padding-top: 7px; }

/* ── compacte paginakop ─────────────────────────────────── */
.ik-kop {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 20px; padding-top: clamp(28px, 4vw, 44px);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em; color: var(--accent-ink);
}
.ik-kop > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.ik-kop > span:first-child::before { content: ""; width: 26px; height: 1px; background: var(--accent); }
.ik-kop__tijd { color: var(--ink-mute); letter-spacing: .12em; }
.ik-kop__tijd::before { content: "·"; margin-right: 12px; color: var(--accent); }

/* verzendknop: goud op de donkere sectie */
.ik-sec--send .btn--accent { background: var(--accent); color: #fff; }
.ik-sec--send .btn--accent:hover { background: #A2763D; }
.ik-sec--send .btn--accent .arrow { background: #fff; }
.ik-sec--send .btn--accent .arrow svg { color: var(--accent); }