/* Afspraak, klantdossier en afmelden */
.yf{--yf-line:rgba(255,255,255,.1);--yf-card:#0f2a3d;--yf-card2:#0b2232;--yf-ink:#eef6fa;--yf-muted:#94adbb;--yf-mint:#35e4bc;--yf-lime:#a6f78c;padding:clamp(28px,6vw,72px) 0 90px}
.yf .wrap{max-width:1080px}
.yf-kop{display:grid;gap:12px;max-width:720px;margin-bottom:34px}
.yf-kop .eyebrow{color:var(--yf-mint)}
.yf-kop h1{margin:0;font-size:clamp(30px,4.6vw,52px);line-height:1.05;letter-spacing:-.02em}
.yf-kop p{margin:0;color:var(--yf-muted);font-size:clamp(16px,1.6vw,19px);line-height:1.6}
.yf-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
.yf-kaart{background:linear-gradient(160deg,var(--yf-card),var(--yf-card2));border:1px solid var(--yf-line);border-radius:22px;padding:clamp(18px,3vw,28px);box-shadow:0 30px 70px -40px #000}
.yf-kaart h2{font-size:18px;margin:0 0 4px}
.yf-kaart .yf-sub{color:var(--yf-muted);font-size:14px;margin:0 0 18px}
.yf-dagen{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:thin}
.yf-dag{flex:0 0 auto;scroll-snap-align:start;min-width:74px;border:1px solid var(--yf-line);background:#0a1f2e;color:var(--yf-ink);border-radius:14px;padding:10px 8px;display:grid;gap:2px;text-align:center;cursor:pointer;transition:.2s}
.yf-dag small{color:var(--yf-muted);text-transform:uppercase;font-size:11px;letter-spacing:.08em}
.yf-dag b{font-size:22px;line-height:1.1}
.yf-dag span{font-size:12px;color:var(--yf-muted)}
.yf-dag em{font-style:normal;font-size:11px;color:var(--yf-lime)}
.yf-dag[aria-pressed=true]{border-color:var(--yf-mint);background:#0f3a3a;box-shadow:0 0 0 3px rgba(53,228,188,.18)}
.yf-tijden{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:14px}
.yf-tijd{border:1px solid var(--yf-line);background:#0a1f2e;color:var(--yf-ink);border-radius:12px;padding:13px 10px;font-weight:700;cursor:pointer;transition:.2s}
.yf-tijd:hover{border-color:var(--yf-mint)}
.yf-tijd[aria-pressed=true]{background:linear-gradient(115deg,#37eac4,#a0f18e);color:#05231f;border-color:transparent}
.yf-bezet{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-top:10px}
.yf-bezet i{font-style:normal;border:1px dashed rgba(255,255,255,.08);border-radius:12px;padding:12px 10px;text-align:center;color:#55707f;font-size:13px;text-decoration:line-through}
.yf-schaars{display:flex;gap:8px;align-items:center;color:var(--yf-lime);font-size:13px;margin-top:14px}
.yf-schaars:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yf-lime);box-shadow:0 0 0 4px rgba(166,247,140,.15)}
.yf-form{display:grid;gap:12px}
.yf-velden{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.yf-veld{display:grid;gap:6px;font-size:13px;color:var(--yf-muted)}
.yf-veld.vol{grid-column:1/-1}
.yf-veld input,.yf-veld textarea,.yf-veld select{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:#081a26;color:var(--yf-ink);padding:13px 14px;font:inherit;font-size:15px}
.yf-veld textarea{min-height:96px;resize:vertical}
.yf-veld input:focus,.yf-veld textarea:focus,.yf-veld select:focus{outline:2px solid var(--yf-mint);outline-offset:1px}
.yf-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--yf-muted);line-height:1.5}
.yf-check input{margin-top:3px;width:18px;height:18px;accent-color:#35e4bc;flex:none}
.yf-check a{color:var(--yf-mint)}
.yf-knop{border:0;border-radius:14px;padding:16px 18px;font-weight:800;font-size:16px;color:#05231f;background:linear-gradient(115deg,#37eac4,#a0f18e);cursor:pointer;transition:.2s}
.yf-knop:hover{filter:brightness(1.06);transform:translateY(-1px)}
.yf-knop[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.yf-gekozen{border:1px solid rgba(53,228,188,.4);background:rgba(53,228,188,.08);border-radius:12px;padding:12px 14px;font-size:14px}
.yf-fout{color:#ffb4b4;font-size:14px;min-height:1px}
.yf-lijst{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.yf-lijst li{display:flex;gap:10px;color:var(--yf-ink);font-size:15px;line-height:1.5}
.yf-lijst li:before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;background:rgba(53,228,188,.16);color:var(--yf-mint)}
.yf-klaar{text-align:center;padding:clamp(26px,5vw,48px)}
.yf-klaar .yf-vink{width:74px;height:74px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;font-size:34px;background:linear-gradient(115deg,#37eac4,#a0f18e);color:#05231f;animation:yfpop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes yfpop{from{transform:scale(.4);opacity:0}}
.yf-stap{display:flex;gap:10px;align-items:center;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--yf-mint);margin:22px 0 10px}
.yf-stap:first-child{margin-top:0}
.yf-logo{display:flex;gap:14px;align-items:center;border:1px dashed rgba(255,255,255,.2);border-radius:14px;padding:14px;cursor:pointer}
.yf-logo img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:#fff}
.yf-logo .yf-leeg{width:64px;height:64px;border-radius:10px;display:grid;place-items:center;background:#0a1f2e;font-size:26px}
.yf-chips{display:flex;flex-wrap:wrap;gap:8px}
.yf-chips label{cursor:pointer}
.yf-chips input{position:absolute;opacity:0;pointer-events:none}
.yf-chips span{display:inline-block;border:1px solid var(--yf-line);border-radius:999px;padding:9px 14px;font-size:14px;background:#0a1f2e;transition:.15s}
.yf-chips input:checked+span{background:#0f3a3a;border-color:var(--yf-mint);color:#c9fff1}
.yf-chips input:focus-visible+span{outline:2px solid var(--yf-mint)}
.yf-voorwaarden{border:1px solid rgba(255,205,123,.35);background:rgba(255,205,123,.06);border-radius:14px;padding:16px;font-size:14px;line-height:1.6;color:#e9dcc2}
.yf-voorwaarden b{color:#ffd48a}
@media (max-width:860px){.yf-grid{grid-template-columns:1fr}.yf-velden{grid-template-columns:1fr}.yf-veld.vol{grid-column:auto}}
.yf-tijd.yf-vol{font-style:normal;text-align:center;border-style:dashed;border-color:rgba(255,255,255,.07);background:transparent;color:#4f6a79;text-decoration:line-through;cursor:default;font-weight:600}
body:has(.yf) .fab,body:has(.yf) .fab-enkel,body:has(.yf) [class*="fab"]{display:none!important}
