/* Topline Automotive · afspraakpagina: keuzekaarten, stapsgewijze aanvraag met live samenvatting. */

/* ── opening met twee keuzekaarten ── */
.af-opening .hfd-in{ padding-block:56px 48px !important; }
.af-kop{ display:grid; gap:28px; }
.af-kop h1{ margin-bottom:12px; }
.af-kop .intro{ max-width:52ch; }
.af-keuze{ display:grid; gap:16px; }
@media (min-width:760px){ .af-keuze{ grid-template-columns:1fr 1fr; } }
.af-kaart{ border-radius:var(--r); padding:26px 26px 24px; display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden; }
.af-kaart h2{ font-size:1.375rem !important; margin:0 !important; }
.af-kaart ul{ display:grid; gap:6px; font-size:.9375rem; }
.af-kaart li{ display:flex; align-items:center; gap:10px; }
.af-kaart li::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.7; flex:none; }
.af-kaart .af-status{ font-size:.8125rem; font-weight:600; margin:4px 0 0; }
.af-kaart .knop{ align-self:flex-start; margin-top:auto; }
.af-kaart-ico{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; }
.af-kaart-ico .ico{ font-size:22px; }
.af-kaart-zonder{ background:var(--inkt); color:var(--papier); }
.af-kaart-zonder .af-kaart-ico{ background:var(--geel); color:var(--inkt); }
.af-kaart-zonder h2{ color:var(--wit) !important; }
.af-kaart-zonder .af-status{ color:var(--geel); }
.af-kaart-zonder .af-status[data-open="dicht"], .af-kaart-zonder .af-status[data-open="straks"]{ color:rgba(244,244,241,.7); }
.af-kaart-met{ background:var(--geel); color:var(--inkt); }
.af-kaart-met .af-kaart-ico{ background:var(--inkt); color:var(--geel); }
.af-kaart-met .af-status{ color:rgba(17,27,46,.7); }
.af-kaart .knop-inkt{ background:var(--inkt); color:var(--papier); --knop-hover:var(--inkt-2); }
.af-kaart .knop-wit{ background:var(--wit); color:var(--inkt); --knop-hover:var(--papier-2); }

/* ── aanvraag: formulier links, samenvatting rechts ── */
.af-sectie .hfd-in{ padding-block:56px 72px !important; }
.af-raster{ display:grid; gap:20px; align-items:start; }
@media (min-width:960px){ .af-raster{ grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); gap:28px; } }
.af-form{ background:var(--wit); border:1px solid var(--lijn); border-radius:var(--r); padding:24px; box-shadow:var(--sch-kaart); display:grid; gap:28px; }
@media (min-width:700px){ .af-form{ padding:32px; } }
.af-form fieldset{ border:0; padding:0; margin:0; min-width:0; display:grid; gap:14px; }
.af-form .veld{ margin:0; }
.af-stap-kop{ display:flex; align-items:center; gap:12px; font-size:1.125rem; font-weight:700; margin:0 0 4px; padding:0; }
.af-nr{ width:30px; height:30px; border-radius:50%; background:var(--geel); color:var(--inkt); display:inline-grid; place-items:center; font-size:.875rem; font-weight:700; flex:none; }
.af-hint{ color:var(--inkt-zacht-2); font-size:.9375rem; margin:0; }
.af-klein{ color:var(--inkt-zacht); font-size:.8125rem; margin:0; text-align:center; }
.af-optioneel{ font-weight:400 !important; color:var(--inkt-zacht); }

/* voortgang */
.af-stappen{ display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; padding:0 0 8px; border-bottom:1px solid var(--lijn); }
.af-stappen li{ display:flex; align-items:center; gap:8px; font-size:.8125rem; font-weight:600; color:var(--inkt-zacht); position:relative; }
.af-stap-nr{ width:26px; height:26px; border-radius:50%; border:1.5px solid var(--lijn-s); display:inline-grid; place-items:center; font-size:.75rem; flex:none; transition:background-color .2s, border-color .2s, color .2s; }
.af-stappen li.actief{ color:var(--inkt); }
.af-stappen li.actief .af-stap-nr{ border-color:var(--inkt); }
.af-stappen li.klaar{ color:var(--inkt); }
.af-stappen li.klaar .af-stap-nr{ background:var(--groen); border-color:var(--groen); color:#fff; font-size:0; }
.af-stappen li.klaar .af-stap-nr::before{ content:""; width:12px; height:12px; background:#fff; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%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'%3E%3Cpath fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat; }
@media (max-width:480px){ .af-stappen li span:last-child{ display:none; } .af-stappen{ grid-template-columns:repeat(4, auto); justify-content:space-between; } }

/* diensttegels */
.dienst-tegels{ display:grid; gap:10px; grid-template-columns:repeat(2, 1fr); }
@media (min-width:640px){ .dienst-tegels{ grid-template-columns:repeat(3, 1fr); } }
.dienst-tegel{ position:relative; display:flex; flex-direction:column; gap:4px; padding:16px 14px 14px; border:1.5px solid var(--lijn-s); border-radius:var(--r-k); cursor:pointer; background:var(--wit); transition:border-color .15s, box-shadow .15s, transform .15s; min-height:44px; }
.dienst-tegel:hover{ border-color:var(--inkt); }
.dienst-tegel input{ position:absolute; opacity:0; width:1px; height:1px; }
.dienst-tegel svg{ width:32px; height:32px; fill:none; stroke:var(--inkt); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-bottom:6px; }
.dienst-tegel svg .ac{ stroke:var(--geel); stroke-width:2.2; }
.dienst-tegel b{ font-size:.9375rem; }
.dienst-tegel small{ font-size:.75rem; color:var(--inkt-zacht); line-height:1.3; }
.dienst-tegel::after{ content:""; position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; background:var(--geel); opacity:0; transform:scale(.6); transition:opacity .15s, transform .15s; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='black'/%3E%3C/svg%3E") center/contain no-repeat; mask:none; }
.dienst-tegel:has(input:checked){ border-color:var(--inkt); box-shadow:inset 0 0 0 1px var(--inkt), 0 8px 20px rgba(17,27,46,.10); }
.dienst-tegel:has(input:checked)::after{ opacity:1; transform:scale(1); background:var(--geel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23111B2E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.dienst-tegel:has(input:focus-visible){ outline:2px solid var(--inkt); outline-offset:2px; }

/* auto */
.af-auto{ display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.af-auto .plaat{ flex:1 1 220px; max-width:300px !important; height:52px !important; }
.af-auto .plaat input{ font-size:1.5rem; }
.af-auto .knop-rand{ height:52px; min-height:52px; }
.af-auto-uit{ margin:0; font-size:.9375rem; color:var(--inkt-zacht-2); display:flex; align-items:flex-start; gap:10px; }
.af-auto-uit::before{ content:""; width:10px; height:10px; border-radius:50%; margin-top:.45em; flex:none; background:var(--raster); }
.af-auto-uit[data-staat="ok"]{ color:var(--inkt); font-weight:500; }
.af-auto-uit[data-staat="ok"]::before{ background:var(--groen); }
.af-auto-uit[data-staat="bezig"]::before{ background:var(--geel); }
.af-auto-uit[data-staat="fout"]::before, .af-auto-uit[data-staat="onbekend"]::before{ background:var(--rood); }
.af-auto-uit b{ font-weight:700; }

/* wanneer */
.af-snel{ display:flex; align-items:center; gap:10px; font-weight:600; min-height:44px; cursor:pointer; padding:0 2px; }
.af-snel input{ width:20px; height:20px; accent-color:var(--inkt); }
.af-wanneer{ display:grid; gap:14px; transition:opacity .2s; }
.af-wanneer.gedimd{ opacity:.4; pointer-events:none; }
.af-sublabel{ font-size:.875rem; font-weight:600; margin:0 0 8px; }
.af-hint-za{ font-size:.8125rem; }

/* samenvatting */
.af-samenvatting{ display:grid; gap:14px; }
@media (min-width:960px){ .af-samenvatting{ position:sticky; top:calc(var(--boven) + 16px); } }
.af-sam-kaart{ background:var(--inkt); color:var(--papier); border-radius:var(--r); padding:24px; box-shadow:0 18px 40px rgba(17,27,46,.18); }
.af-sam-kop{ font-size:1.125rem; font-weight:700; margin:0 0 14px; color:var(--wit); }
.af-sam-lijst{ display:grid; gap:0; margin:0; }
.af-sam-lijst > div{ display:grid; grid-template-columns:76px 1fr; gap:12px; padding:11px 0; border-top:1px solid rgba(244,244,241,.14); }
.af-sam-lijst dt{ font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(244,244,241,.6); padding-top:3px; }
.af-sam-lijst dd{ margin:0; font-size:.9375rem; font-weight:600; color:var(--wit); line-height:1.4; }
.af-sam-lijst dd small{ display:block; font-weight:400; color:rgba(244,244,241,.7); font-size:.8125rem; }
.af-sam-leeg{ font-weight:400; color:rgba(244,244,241,.5); }
.af-sam-voet{ margin-top:16px; padding-top:16px; border-top:1px solid rgba(244,244,241,.14); display:grid; gap:10px; }
.af-sam-voet-kop{ margin:0; font-size:.875rem; color:rgba(244,244,241,.75); }
.af-sam-voet .knop{ justify-self:start; gap:8px; }
.af-sam-voet .knop .ico{ font-size:14px; }
.af-sam-status{ margin:0; font-size:.8125rem; font-weight:600; color:rgba(244,244,241,.7); }
.af-sam-status[data-open="open"]{ color:#8FE0B1; }
.af-zeker{ display:grid; gap:8px; padding:4px 6px; font-size:.9375rem; font-weight:500; }
.af-zeker li{ display:flex; align-items:center; gap:10px; }
.af-zeker .ico{ font-size:15px; color:var(--inkt); }

/* zo gaat het verder */
.af-verder{ display:grid; gap:12px; }
@media (min-width:760px){ .af-verder{ grid-template-columns:repeat(3, 1fr); } }
.af-verder li{ background:var(--grijs); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:4px; position:relative; }
.af-verder-nr{ width:32px; height:32px; border-radius:50%; background:var(--inkt); color:var(--geel); display:inline-grid; place-items:center; font-weight:700; font-size:.875rem; margin-bottom:8px; }
.af-verder b{ font-size:1.0625rem; }
.af-verder small{ font-size:.9375rem; color:var(--inkt-zacht-2); line-height:1.45; }
@media (min-width:760px){ .af-verder li:not(:last-child)::after{ content:""; position:absolute; right:-9px; top:30px; width:8px; height:8px; border-top:2px solid var(--geel); border-right:2px solid var(--geel); transform:rotate(45deg); } }

/* melding van site.js onder het formulier */
.af-form .formulier-melding{ grid-column:1 / -1; }

.af-auto .plaat{ max-width:320px !important; }

.af-tijden .pil span{ min-width:64px; padding:0 12px; font-variant-numeric:tabular-nums; }

/* Stap 3 · datumtegels, halfuur-tijden en wacht/achterlaten (klant, 10 okt) */
.af-datums{ display:flex; gap:10px; overflow-x:auto; padding:4px 2px 10px; margin:0 0 18px; scroll-snap-type:x mandatory; scrollbar-width:thin; }
.af-datum{ flex:0 0 auto; scroll-snap-align:start; cursor:pointer; }
.af-datum input, .af-tijd input, .af-wacht-keuze input{ position:absolute; opacity:0; pointer-events:none; }
.af-datum span{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:76px; height:88px; border:1.5px solid var(--lijn); border-radius:14px; background:var(--wit); transition:border-color .15s, background .15s, color .15s, transform .15s; }
.af-datum small{ font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(17,27,46,.6); }
.af-datum b{ font-size:1.6rem; line-height:1.1; font-weight:700; font-variant-numeric:tabular-nums; }
.af-datum em{ font-style:normal; font-size:.85rem; color:rgba(17,27,46,.6); }
.af-datum:hover span{ border-color:var(--inkt); }
.af-datum input:checked + span{ background:var(--inkt); border-color:var(--inkt); color:var(--wit); transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(17,27,46,.55); }
.af-datum input:checked + span small, .af-datum input:checked + span em{ color:rgba(255,255,255,.75); }
.af-datum input:checked + span b{ color:var(--geel); }
.af-datum input:focus-visible + span, .af-tijd input:focus-visible + span, .af-wacht-keuze input:focus-visible + span{ outline:3px solid var(--geel); outline-offset:2px; }
.af-tijdraster{ display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); gap:10px; margin:0 0 20px; }
.af-tijd{ cursor:pointer; }
.af-tijd span{ display:flex; align-items:center; justify-content:center; height:50px; border:1.5px solid var(--lijn); border-radius:12px; background:var(--wit); font-weight:600; font-size:1rem; font-variant-numeric:tabular-nums; transition:border-color .15s, background .15s, color .15s; }
.af-tijd:hover span{ border-color:var(--inkt); }
.af-tijd input:checked + span{ background:var(--inkt); border-color:var(--inkt); color:var(--wit); }
.af-tijd.is-weg{ cursor:not-allowed; }
.af-tijd.is-weg span{ opacity:.35; text-decoration:line-through; }
.af-wacht{ display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px; }
.af-wacht-keuze{ cursor:pointer; }
.af-wacht-keuze span{ display:inline-flex; align-items:center; height:52px; padding:0 22px; border:1.5px solid var(--lijn); border-radius:999px; background:var(--wit); font-weight:600; transition:border-color .15s, background .15s, color .15s; }
.af-wacht-keuze:hover span{ border-color:var(--inkt); }
.af-wacht-keuze input:checked + span{ background:var(--inkt); border-color:var(--inkt); color:var(--wit); }
@media (max-width:520px){ .af-tijdraster{ grid-template-columns:repeat(4, 1fr); gap:8px; } .af-tijd span{ height:46px; font-size:.9rem; } .af-wacht-keuze{ flex:1 1 100%; } .af-wacht-keuze span{ width:100%; justify-content:center; } }