/* Afspraak maken (/afspraak/) – aanvulling op style.css. Geen inline styles (strikte CSP op PHP-pagina's). */
.agd-layout{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; align-items:start }
.agd-main > * + *{ margin-top:22px }
.agd-aside > * + *{ margin-top:18px }
.agd-aside h2{ font-size:1.1rem }
.agd-list{ margin:0; padding-left:1.1em }
.agd-list li + li{ margin-top:6px }
.agd-step h2{ font-size:1.3rem; display:flex; align-items:center; gap:10px; margin-top:0 }
.agd-step h2 + *{ margin-top:4px }
.agd-step h2:not(:first-of-type){ margin-top:28px }
.agd-num{ display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--teal-d); color:#fff; font-size:.95rem; flex:none }
.agd-group{ border:0; margin:0; padding:0; min-width:0 }
.agd-group + .agd-group{ margin-top:16px }
.agd-group > legend{ font-weight:600; font-family:var(--display); color:var(--heading); margin-bottom:8px; padding:0 }
.agd-options{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px }
.agd-option{ position:relative; display:flex; gap:12px; align-items:flex-start; border:2px solid var(--line); border-radius:var(--radius-s); padding:14px 16px; cursor:pointer; background:var(--surface); transition:border-color .15s, background .15s }
.agd-option:hover{ border-color:var(--teal-d) }
.agd-option input{ margin-top:4px; accent-color:var(--teal-d); width:18px; height:18px; flex:none }
.agd-option > span{ display:flex; flex-direction:column; gap:2px }
.agd-option:has(input:checked){ border-color:var(--teal-d); background:var(--mint) }
.agd-option:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:2px }
.agd-option.is-disabled{ opacity:.55; cursor:not-allowed }
.agd-meta{ color:var(--teal-t); font-weight:600; font-size:.9rem }
.agd-desc{ color:var(--grey); font-size:.92rem; line-height:1.45 }
.agd-refresh{ margin-top:16px }
.js .agd-refresh{ display:none }
.agd-chosen{ color:var(--grey); font-size:.95rem; margin:0 0 12px }

.agd-weeknav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 14px; flex-wrap:wrap }
.agd-weeklabel{ font-weight:700; font-family:var(--display); color:var(--heading) }
.btn--sm{ padding:8px 14px; font-size:.9rem }
.agd-days{ display:grid; gap:14px }
.agd-day{ border:1px solid var(--line); border-radius:var(--radius-s); padding:12px 14px 14px; margin:0; min-width:0 }
.agd-day > legend{ font-weight:600; padding:0 6px; color:var(--heading) }
.agd-times{ display:flex; flex-wrap:wrap; gap:8px }
.agd-time{ position:relative }
.agd-time input{ position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer }
.agd-time span{ display:inline-block; min-width:74px; text-align:center; padding:9px 12px; border:2px solid var(--line); border-radius:999px; font-weight:600; font-variant-numeric:tabular-nums; background:var(--surface) }
.agd-time input:hover + span{ border-color:var(--teal-d) }
.agd-time input:checked + span{ background:var(--teal-d); border-color:var(--teal-d); color:#fff }
.agd-time input:focus-visible + span{ outline:3px solid var(--focus); outline-offset:2px }

/* Met JavaScript: dagkeuze als tabs */
.agd-daytabs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:12px; scrollbar-width:thin }
.agd-daytab{ flex:none; border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; padding:8px 12px; font:600 .92rem var(--text); cursor:pointer; text-align:center; line-height:1.25 }
.agd-daytab small{ display:block; font-weight:500; color:var(--grey); font-size:.8rem }
.agd-daytab[aria-pressed="true"]{ border-color:var(--teal-d); background:var(--mint); color:var(--heading) }
.agd-daytab:focus-visible{ outline:3px solid var(--focus); outline-offset:2px }
.agd-days.is-tabbed .agd-day{ display:none; border:0; padding:0 }
.agd-days.is-tabbed .agd-day.is-active{ display:block }
.agd-days.is-tabbed .agd-day > legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }

.agd-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px }
.agd-field{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.agd-field--full{ grid-column:1 / -1 }
.agd-field label{ font-weight:600 }
.agd-field input:not([type=checkbox]), .agd-field textarea{ font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 12px; width:100% }
.agd-field input:focus, .agd-field textarea:focus{ outline:3px solid var(--focus); outline-offset:1px; border-color:var(--teal-d) }
.agd-field [aria-invalid="true"]{ border-color:#B83232 }
.agd-opt, .agd-hint{ color:var(--grey); font-weight:400; font-size:.9rem }
.agd-hint{ margin:0 }
.agd-check{ display:flex; gap:10px; align-items:flex-start; font-weight:400 !important }
.agd-check input{ width:20px; height:20px; margin-top:2px; accent-color:var(--teal-d); flex:none }
.field-err{ color:#B83232; font-weight:600; font-size:.92rem; margin:0 }
.agd-hp{ position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden }
.agd-submit{ margin-top:22px; display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.agd-danger{ color:#B83232; border-color:#E4B4B4 }
.agd-danger:hover{ color:#fff; background:#B83232; border-color:#B83232 }

.agd-confirm .agd-ok{ font-family:var(--display); font-weight:700; font-size:1.25rem; color:var(--good); margin-top:0 }
.agd-dl{ display:grid; grid-template-columns:max-content minmax(0,1fr); gap:8px 18px; margin:0 0 18px }
.agd-dl dt{ font-weight:600; color:var(--grey) }
.agd-dl dd{ margin:0 }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px }

@media (max-width: 980px){
  .agd-layout{ grid-template-columns:minmax(0,1fr) }
}
@media (max-width: 620px){
  .agd-options, .agd-fields{ grid-template-columns:minmax(0,1fr) }
  .agd-step{ padding:20px 16px }
  .agd-time span{ min-width:68px; padding:9px 10px }
  .agd-dl{ grid-template-columns:minmax(0,1fr) }
  .agd-dl dt{ margin-top:6px }
  .agd-weeknav > span:empty{ display:none }
  .agd-weeklabel{ order:-1; flex-basis:100% }
}

/* Toegankelijkheid (WCAG 1.4.11): de rand van een invoerveld moet minstens 3:1 contrast hebben met de achtergrond */
:root{ --veldrand:#768795 }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --veldrand:#6F89A6 } }
:root[data-theme="dark"]{ --veldrand:#6F89A6 }
.agd-field input:not([type=checkbox]), .agd-field textarea, .agd-field select{ border-color:var(--veldrand) }
.agd-field input:focus, .agd-field textarea:focus, .agd-field select:focus{ border-color:var(--teal-d) }
.agd-field [aria-invalid="true"]{ border-color:#B83232 }