/* ==========================================================================
   PMC Nederland — intakeformulier (3 stappen)
   Bouwt voort op styles.css: zelfde tokens, knoppen en header.
   Mobiel eerst: elke stap moet op een iPhone zoveel mogelijk in één scherm passen.
   ========================================================================== */

.intake-page{background:var(--paper-2);-webkit-tap-highlight-color:transparent}
.intake-page header{background:rgba(255,255,255,.92)}

/* ---------- header: alleen het logo, in het midden ---------- */
.intake-header .nav{justify-content:center;height:72px}
.intake-header .logo-img{height:44px}

/* ---------- voortgangsbalk bovenin ---------- */
.progress{position:relative;height:6px;background:var(--accent-soft);overflow:hidden}
.progress-fill{
  position:absolute;inset:0 auto 0 0;width:4%;border-radius:0 6px 6px 0;
  background:linear-gradient(90deg,var(--accent-dark),var(--accent) 60%,#5FA5E0);
  box-shadow:0 0 12px rgba(50,123,190,.55);
  transition:width .6s cubic-bezier(.34,1.3,.5,1);
}
/* glans die over de balk loopt, zodat hij 'leeft' */
.progress-fill::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:glans 2.4s ease-in-out infinite;
}
@keyframes glans{to{transform:translateX(100%)}}
.progress.is-done .progress-fill{border-radius:0}
.progress.is-done .progress-fill::after{animation:none}
.intake-page button,.intake-page .btn,.intake-page label{touch-action:manipulation}

/* notch / thuisbalk (viewport-fit=cover) */
.intake-page .wrap{
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}

.intake{padding:clamp(28px,4vw,40px) 0 calc(clamp(56px,8vw,88px) + env(safe-area-inset-bottom))}
.intake-wrap{
  max-width:720px;margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}

.intake-head{text-align:center;margin-bottom:22px}
.intake-head .eyebrow{justify-content:center}
.intake-head h1{font-size:clamp(2rem,4.4vw,2.6rem);margin-top:10px;letter-spacing:-.03em}
.intake-head p{margin-top:8px;font-size:1.08rem}


/* ---------- kaart & panelen ---------- */
.intake-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(26px,4vw,36px) clamp(26px,5vw,44px)}
.panel[hidden]{display:none}
.panel{animation:panelIn .35s var(--ease)}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel h2{font-size:clamp(1.5rem,3.4vw,1.9rem);margin:0 0 20px;outline:none}
.panel-lead{margin:-12px 0 22px;font-size:1.05rem}

.panel-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.panel-actions .btn-accent{margin-left:auto}
.btn-outline:hover svg{transform:none}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}

/* ---------- velden ---------- */
.field{margin-bottom:16px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.field label{display:block;font-weight:600;color:var(--ink);margin-bottom:7px;font-size:1rem}
.field input{
  width:100%;font:inherit;font-size:17px;           /* ≥16px: iOS zoomt dan niet in bij focus */
  color:var(--ink);background:#fff;-webkit-appearance:none;appearance:none;
  border:2px solid var(--line);border-radius:12px;padding:13px 16px;transition:border-color .18s,box-shadow .18s;
}
.field input::placeholder{color:#A6AEB8}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.field input[aria-invalid="true"]{border-color:#C8432F}
.field input[aria-invalid="true"]:focus{box-shadow:0 0 0 4px #FBE9E6}
.err{color:#B53A28;font-size:.92rem;font-weight:600;margin-top:6px}
.err:empty{display:none}

/* ---------- datum & tijd ---------- */
.pick{border:0;margin:0 0 22px;min-width:0;padding:0}
.pick legend{font-family:var(--display);font-weight:700;color:var(--ink);font-size:1.05rem;margin-bottom:12px;padding:0}
.pick-sub{font-family:var(--font);font-weight:500;color:var(--body);font-size:.98rem;margin-left:4px}

.weekdays,.dates{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.weekdays{margin-bottom:6px}
.weekdays span{text-align:center;font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--body-soft)}

.date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px;min-height:56px;
  background:var(--paper-2);border:2px solid transparent;border-radius:12px;cursor:pointer;font:inherit;color:var(--ink);
  transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease);
}
.date .d{font-family:var(--display);font-weight:800;font-size:1.3rem;line-height:1.1}
.date .m{font-size:.78rem;color:var(--body-soft);text-transform:lowercase;line-height:1.3}
.date[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px);box-shadow:0 12px 22px -14px rgba(50,123,190,.9)}
.date[aria-pressed="true"] .m{color:rgba(255,255,255,.85)}
.date-empty{visibility:hidden}

.time-group{margin-bottom:14px}
.time-group:last-child{margin-bottom:0}
.time-group h3{font-family:var(--font);font-weight:600;font-size:.88rem;color:var(--body-soft);letter-spacing:0;margin-bottom:8px}
.time-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.time{
  font:inherit;font-weight:600;font-size:1rem;color:var(--ink);background:#fff;border:2px solid var(--line);
  border-radius:10px;padding:10px 4px;min-height:44px;cursor:pointer;transition:border-color .18s,background .18s,color .18s;
}
.time[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.time[disabled]{background:var(--paper-2);border-color:transparent;color:#B4BBC4;text-decoration:line-through;cursor:not-allowed}

/* ---------- samenvatting ---------- */
.summary{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sum-row{display:grid;grid-template-columns:130px 1fr auto;gap:14px;align-items:start;padding:18px 20px;border-bottom:1px solid var(--line)}
.sum-row:last-child{border-bottom:0}
.sum-row dt{font-family:var(--display);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--body-soft);padding-top:3px}
.sum-row dd{color:var(--ink);font-size:1.02rem;line-height:1.5;word-break:break-word}
.sum-row dd b{font-weight:700}
.sum-edit{background:none;border:0;cursor:pointer;font:inherit;font-weight:600;color:var(--accent);padding:10px 0 10px 10px;margin:-10px 0;border-bottom:1px solid transparent}

/* ---------- klaar ---------- */
.panel-done{text-align:center}
.panel-done h2{margin-top:18px}
.panel-done .panel-lead{margin:-8px auto 26px;max-width:46ch;color:var(--body)}
.panel-done .panel-lead b{color:var(--ink)}
.done-ic{width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px var(--accent-soft)}
.done-ic svg{width:34px;height:34px}
.done-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.done-fine{margin:26px auto 0;max-width:52ch;font-size:.94rem;color:var(--body-soft)}
.done-fine a{color:var(--accent);font-weight:600}

.intake-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;margin-top:26px;font-weight:600;color:var(--ink);font-size:.95rem}
.intake-trust li{display:inline-flex;align-items:center;gap:8px}
.intake-trust svg{width:17px;height:17px;color:var(--accent)}

/* ---------- herinnering (dialog) ---------- */
html.is-locked,html.is-locked body{overflow:hidden}
.remind{
  border:0;padding:0;border-radius:var(--r-lg);width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);
  margin:auto;background:#fff;color:var(--body);box-shadow:var(--shadow-lg);overscroll-behavior:contain;
}
.remind::backdrop{background:rgba(27,29,30,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.remind[open]{animation:remindIn .3s var(--ease)}
@keyframes remindIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.remind-inner{padding:clamp(24px,5vw,36px)}
.remind-ic{width:52px;height:52px;border-radius:14px;background:#FFF4DA;color:#B77F00;display:flex;align-items:center;justify-content:center}
.remind-ic svg{width:28px;height:28px}
.remind h2{font-size:clamp(1.35rem,3.4vw,1.7rem);margin:18px 0 12px}
.remind p{font-size:1.02rem}
.remind p b{color:var(--ink)}

.commit{
  position:relative;display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:16px 18px;cursor:pointer;
  background:var(--accent-soft);border:2px solid var(--accent-tint);border-radius:14px;color:var(--ink);font-weight:600;font-size:1.02rem;line-height:1.45;
  transition:border-color .18s,background .18s;
}
.commit input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.commit .box{width:28px;height:28px;border-radius:8px;border:2px solid var(--accent);background:#fff;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .18s}
.commit .box svg{width:17px;height:17px;opacity:0;transform:scale(.6);transition:.18s var(--ease)}
.commit input:checked + .box{background:var(--accent)}
.commit input:checked + .box svg{opacity:1;transform:none}
.commit input:focus-visible + .box{outline:3px solid var(--accent);outline-offset:3px}
.commit:has(input:checked){border-color:var(--accent);background:#fff}

.remind-actions{display:flex;justify-content:space-between;gap:12px;margin-top:24px;flex-wrap:wrap}
.remind-actions .btn-accent{margin-left:auto}
.btn.is-busy{pointer-events:none;opacity:.7}

/* ---------- hover alleen waar een muis is (geen 'plakkende' hover na tikken op iPhone) ---------- */
@media(hover:hover){
  .field input:hover:not(:focus){border-color:#CDD4DC}
  .date:not([aria-pressed="true"]):hover{border-color:var(--accent-tint);background:var(--accent-soft)}
  .time:not([aria-pressed="true"]):hover{border-color:var(--accent);color:var(--accent)}
  .sum-edit:hover{border-bottom-color:currentColor}
  .commit:hover{border-color:var(--accent)}
}
@media(hover:none){
  .intake-page .btn:hover{transform:none}
  .intake-page .btn:hover svg{transform:none}
  .date:active,.time:active,.intake-page .btn:active{transform:scale(.97)}
}

/* ==========================================================================
   MOBIEL — compact, zodat elke stap in beeld blijft
   ========================================================================== */
@media(max-width:620px){
  .intake-header .nav{height:60px}
  .intake-header .logo-img{height:36px}
  .progress{height:5px}

  .intake{padding-top:16px}
  .intake-wrap{padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}

  .intake-head{margin-bottom:14px}
  .intake-head .eyebrow,.intake-head p{display:none}
  .intake-head h1{font-size:1.6rem;margin-top:0}

  .intake-card{padding:20px 18px 22px;border-radius:18px}
  .panel h2{font-size:1.3rem;margin:0 0 16px}
  .panel-lead{margin:-8px 0 14px;font-size:.98rem}

  .field-row{grid-template-columns:1fr}
  .field{margin-bottom:12px}
  .field label{margin-bottom:5px;font-size:.95rem}
  .field input{padding:12px 14px}

  .panel-actions{margin-top:18px;gap:10px}
  .panel-actions .btn,.remind-actions .btn,.done-actions .btn{flex:1 1 100%;justify-content:center;padding:15px 20px}
  .panel-actions .btn-accent,.remind-actions .btn-accent{order:-1}
  .panel-actions .btn-outline,.remind-actions .btn-outline{border:0;padding:8px 20px;color:var(--body)}

  /* datums: 5 kolommen blijven, maar lager */
  .pick{margin-bottom:14px}
  .pick legend{font-size:.98rem;margin-bottom:8px}
  .weekdays,.dates{gap:6px}
  .weekdays{margin-bottom:4px}
  .date{padding:6px 2px;min-height:50px;border-radius:10px}
  .date .d{font-size:1.12rem}
  .date .m{font-size:.7rem}

  /* tijden: 5 per rij */
  .time-group{margin-bottom:10px}
  .time-group h3{margin-bottom:6px;font-size:.82rem}
  .time-list{grid-template-columns:repeat(5,1fr);gap:6px}
  .time{font-size:.98rem;padding:8px 2px}

  /* samenvatting compact */
  .sum-row{grid-template-columns:1fr auto;gap:2px 12px;padding:12px 14px}
  .sum-row dt{grid-column:1 / -1;font-size:.7rem}
  .sum-row dd{font-size:.98rem;line-height:1.45}

  .panel-done h2{margin-top:14px}
  .done-ic{width:60px;height:60px;box-shadow:0 0 0 8px var(--accent-soft)}
  .done-ic svg{width:28px;height:28px}
  .done-fine{margin-top:18px}

  .intake-trust{margin-top:18px;gap:6px 16px;font-size:.86rem}

  /* herinnering als bottom sheet, zoals een iOS-sheet */
  .remind{
    width:100%;max-width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;
    max-height:calc(100dvh - 24px);
  }
  .remind[open]{animation:sheetIn .32s var(--ease)}
  .remind-inner{padding:22px 18px calc(18px + env(safe-area-inset-bottom))}
  .remind-inner::before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:var(--line);margin:-8px auto 16px}
  .remind-ic{width:44px;height:44px;border-radius:12px}
  .remind-ic svg{width:24px;height:24px}
  .remind h2{font-size:1.3rem;margin:14px 0 8px}
  .remind p{font-size:.98rem}
  .commit{margin-top:16px;padding:14px;font-size:.98rem}
  .remind-actions{margin-top:16px;gap:6px}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}

/* lage schermen (iPhone SE, liggend): nog iets strakker */
@media(max-width:620px) and (max-height:640px){
  .intake{padding-top:12px}
  .intake-head{margin-bottom:10px}
  .intake-head h1{font-size:1.4rem}
  .field{margin-bottom:10px}
  .field input{padding:11px 14px}
  [data-panel="3"] .panel-lead{display:none}
  .sum-row{padding:10px 14px}
}
/* heel lage schermen (iPhone SE) */
@media(max-width:620px) and (max-height:580px){
  .intake-header .nav{height:54px}
  .intake-header .logo-img{height:32px}
  .intake{padding-top:10px}
  .intake-card{padding-top:16px;padding-bottom:18px}
  .panel h2{margin-bottom:12px}
  .sum-row{padding:8px 14px}
  .panel-actions{margin-top:14px}
}

@media(prefers-reduced-motion:reduce){
  .panel,.remind[open]{animation:none}
  .progress-fill::after{animation:none}
}