/* /afspraak/ — afsprakenplanner in ontwerpsysteem v2.
   Alleen tokens uit site.css. Opbouw: keuze (IT-check of probleem) → soort gesprek
   → vrije tijden als chips per dag → gegevens. Zijbalk met bellen en tarieven. */

/* Op deze pagina is de plakbalk overbodig: de planner is de actie zelf. */
.plakbalk { display: none !important; }

.plan-sectie .section__head { margin-bottom: var(--sp-lg); }
.plan-sectie .antwoord { margin: 0 0 clamp(32px, 4vw, 56px); }

.plan-opzet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .plan-opzet { grid-template-columns: minmax(0, 1fr); } }

/* ---------- De planner ---------- */
.plan { padding: clamp(20px, 3.4vw, 40px); }
.plan__blok + .plan__blok, .plan__fout + .plan__blok { margin-top: clamp(28px, 3.4vw, 40px); padding-top: clamp(28px, 3.4vw, 40px); border-top: 1px dashed var(--rule-2); }
.plan [hidden] { display: none !important; }

.plan fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.plan legend, .plan__kop { display: flex; align-items: center; gap: .7rem; padding: 0; margin: 0 0 var(--sp-md); font: 700 1.2rem/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.plan__stap { font: 500 .74rem/1 var(--mono); letter-spacing: .1em; color: var(--oranje-tekst); border: 1px solid currentColor; border-radius: 3px; padding: .3rem .4rem; }
.plan__typen { margin-top: var(--sp-xl) !important; }

/* Stap 1: twee keuzekaarten */
.plan__doelen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-sm); }
@media (max-width: 560px) { .plan__doelen { grid-template-columns: 1fr; } }
.plan__kaart {
  position: relative; display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem 1.1rem 1.1rem 3rem; min-height: 44px; cursor: pointer;
  background: #fff; border: 1px solid var(--rule-2); border-radius: var(--r);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.plan__kaart input { position: absolute; left: 1.05rem; top: 1.2rem; width: 20px; height: 20px; margin: 0; accent-color: var(--oranje-tekst); }
.plan__kaart-kop { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.plan__kaart-sub { font-size: .92rem; line-height: 1.45; color: var(--muted); }
.plan__kaart:hover { border-color: var(--ink); }
.plan__kaart:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: var(--paper); }
.plan__kaart:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Stap 2 en werkvorm: keuzes als chips */
.plan__chips { display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.plan__optie { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.plan__optie input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan__optie span {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1rem;
  background: #fff; border: 1px solid var(--rule-2); border-radius: var(--r); font-weight: 600; font-size: .95rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.plan__optie span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--rule-2); transition: background-color .2s, border-color .2s; }
.plan__optie:hover span { border-color: var(--ink); }
.plan__optie input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan__optie input:checked + span::before { background: var(--oranje); border-color: var(--oranje); }
.plan__optie input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

.plan__uitleg { color: var(--muted); font-size: .95rem; margin: var(--sp-md) 0 var(--sp-lg); }

/* Foutmelding van de planner */
.plan__fout { margin: var(--sp-lg) 0 0; padding: .9rem 1.1rem; border: 1px solid rgba(179, 38, 30, .35); border-left: 3px solid #B3261E; border-radius: var(--r); background: #FBEFEC; color: #7F1D17; font-weight: 600; font-size: .95rem; }

/* Stap 3: vrije tijden */
.plan__regel { color: var(--muted); margin: 0 0 var(--sp-lg); }
.plan__let { font: 400 .85rem/1.5 var(--mono); color: var(--ink-2); background: var(--paper); border: 1px dashed var(--rule-2); border-radius: var(--r); padding: .7rem .9rem; margin: 0 0 var(--sp-lg); }
.plan__dagen { display: grid; gap: var(--sp-lg); }
.plan__dag { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: var(--sp-sm) var(--sp-lg); align-items: start; }
@media (max-width: 640px) { .plan__dag { grid-template-columns: minmax(0, 1fr); } }
.plan__dagkop { font: 500 .8rem/1.3 var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); padding: .9rem 0 .5rem; border-bottom: 1px solid var(--rule-2); }
.plan__tijden { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-xs); }
.plan__tijden li { margin: 0; }
.plan__tijd {
  min-height: 44px; min-width: 5.2rem; padding: .6rem 1rem;
  font: 500 1rem/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  background: #fff; color: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--r); cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.plan__tijd:hover { border-color: var(--oranje); }
.plan__tijd:active { transform: scale(.97); }
.plan__tijd[aria-pressed="true"] { background: var(--nacht); color: var(--goud); border-color: var(--nacht); }

/* Laadtoestand: vaste vormen, zodat niets verspringt */
.plan__dag--laad > span { display: block; height: 1rem; margin-top: 1rem; width: 70%; }
.plan__dag--laad > span, .plan__dag--laad li { border-radius: var(--r); background: linear-gradient(90deg, var(--paper-2), var(--kaart), var(--paper-2)); background-size: 200% 100%; animation: plan-glans 1.2s linear infinite; }
.plan__dag--laad li { width: 5.2rem; height: 44px; }
@keyframes plan-glans { to { background-position: -200% 0; } }
.plan[data-bezig] #plan-zoek { cursor: progress; }

/* Stap 4: gegevens */
.plan__gekozen-bon { position: relative; background: var(--nacht); color: var(--op-nacht); border-radius: var(--r); padding: 1rem 1.2rem; margin: 0 0 var(--sp-lg); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: center; }
.plan__gekozen-kop { grid-column: 1; font: 500 .72rem/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--op-nacht-2); margin: 0; }
.plan__gekozen { grid-column: 1; font: 500 1.02rem/1.4 var(--mono); color: var(--goud); margin: 0; }
.plan__gekozen::first-letter { text-transform: uppercase; }
.plan__ander { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; padding: 0 .9rem; background: transparent; color: var(--op-nacht); border: 1px solid var(--rule-nacht); border-radius: var(--r); font: 600 .88rem var(--sans); cursor: pointer; }
.plan__ander:hover { border-color: var(--goud); color: var(--goud); }
@media (max-width: 520px) { .plan__gekozen-bon { grid-template-columns: 1fr; } .plan__ander { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .6rem; } }

.plan__werkvorm legend { font: 600 .95rem/1.4 var(--sans); letter-spacing: 0; margin-bottom: .4rem; }
.plan__optioneel { font-weight: 400; color: var(--muted); }
.plan .veld-fout, .veld-fout { color: #B3261E; font-weight: 600; font-size: .88rem; }
.plan .field input[aria-invalid="true"], .plan .field textarea[aria-invalid="true"] { box-shadow: 0 0 0 1px #B3261E; }
.plan .btn--block { margin-top: var(--sp-md); }
.plan .veld-privacy { margin-top: var(--sp-sm); }
.plan .sent { padding: .5rem 0 0; }
.plan .sent p:not(.sent__stamp) { font-size: 1.05rem; }
.plan .sent__tekst { font-weight: 600; font-size: 1.15rem !important; max-width: 52ch; }

/* ---------- Zijbalk ---------- */
.plan-zij { position: sticky; top: 104px; display: grid; gap: var(--sp-md); }
@media (max-width: 960px) { .plan-zij { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.plan-zij__blok { border-top: 1px solid var(--ink); padding-top: var(--sp-sm); }
.plan-zij__blok p { font-size: .95rem; color: var(--ink-2); }
.plan-zij__kop { font: 500 .74rem/1.2 var(--mono) !important; text-transform: uppercase; letter-spacing: .12em; color: var(--muted) !important; margin: 0 0 var(--sp-sm); }
.plan-zij__tel { display: block; font: 500 clamp(1.5rem, 1.2rem + 1vw, 1.9rem)/1.1 var(--mono); letter-spacing: -.03em; color: var(--ink); text-decoration: none; margin-bottom: .5rem; }
.plan-zij__tel:hover { color: var(--oranje-tekst); }
.plan-zij .specs li { font-size: .95rem; padding: .6rem 0; }
.plan-zij__noot { font-size: .85rem !important; color: var(--muted) !important; margin-top: var(--sp-sm); }

/* ---------- Meldingen na versturen zonder JavaScript (via #verstuurd) ---------- */
.plan-melding { display: none; margin-top: var(--sp-lg); padding: 1.2rem 1.3rem; background: var(--kaart); border: 1px solid var(--rule-2); border-radius: var(--r); }
.plan-melding:target { display: block; }
.plan-melding--fout { border-left: 3px solid #B3261E; }
.plan-melding p:last-child { margin-bottom: 0; }

.plan-verder { margin-top: var(--sp-xl); color: var(--muted); }
.plan__form.is-sent:focus { outline: none; }