/* Directory Filter – basisopmaak. Kleuren via variabelen, per site te overschrijven. */
.ydf{
	--ydf-accent:#2563eb; --ydf-accent-soft:rgba(37,99,235,.08); --ydf-ink:#1f2328; --ydf-muted:#6b7280;
	--ydf-line:#e5e7eb; --ydf-bg:#fff; --ydf-radius:12px; --ydf-gap:24px; --ydf-sidebar:280px;
	display:grid; grid-template-columns:var(--ydf-sidebar) minmax(0,1fr); gap:var(--ydf-gap); align-items:start; color:var(--ydf-ink);
}
.ydf *{box-sizing:border-box}
.ydf-layout-top{grid-template-columns:minmax(0,1fr)}
.ydf-layout-top .ydf-form{display:flex; flex-wrap:wrap; gap:12px 20px; position:static}
.ydf-layout-top .ydf-facet{flex:1 1 200px; border:0; padding:0}

/* Formulier */
.ydf-form{background:var(--ydf-bg); border:1px solid var(--ydf-line); border-radius:var(--ydf-radius); padding:6px 18px 16px; position:sticky; top:20px; max-height:calc(100vh - 40px); overflow:auto}
.ydf-facet{border:0; border-bottom:1px solid var(--ydf-line); margin:0; padding:14px 0; min-width:0}
.ydf-facet:last-of-type{border-bottom:0}
.ydf-label{font-size:13px; font-weight:700;   color:var(--ydf-muted); padding:0; margin:0 0 8px; float:left; width:100%}
.ydf-label + *{clear:both}
.ydf input[type=search],.ydf input[type=text],.ydf select{width:100%; min-height:42px; padding:8px 12px; border:1px solid var(--ydf-line); border-radius:8px; background:#fff; font:inherit; font-size:15px; color:var(--ydf-ink)}
.ydf input:focus,.ydf select:focus{outline:2px solid var(--ydf-accent); outline-offset:0; border-color:transparent}
.ydf-loc{display:grid; grid-template-columns:1fr; gap:6px}
.ydf-layout-top .ydf-loc{grid-template-columns:1fr 130px}
.ydf-mylocation{margin-top:8px; background:none; border:0; padding:0; color:var(--ydf-accent); font:inherit; font-size:14px; cursor:pointer}
.ydf-mylocation:hover{text-decoration:underline}

/* Opties (checkboxes / knoppen) */
.ydf-options{display:flex; flex-direction:column; gap:2px}
.ydf-opt{display:flex; align-items:center; gap:8px; padding:5px 6px; margin:0 -6px; border-radius:6px; cursor:pointer; font-size:15px; line-height:1.3}
.ydf-opt:hover{background:var(--ydf-accent-soft)}
.ydf-opt input{accent-color:var(--ydf-accent); width:16px; height:16px; margin:0; flex:none}
.ydf-opt span{flex:1}
.ydf-opt em{font-style:normal; font-size:12px; color:var(--ydf-muted); background:#f3f4f6; border-radius:99px; padding:1px 8px; min-width:28px; text-align:center}
.ydf-opt.is-empty{opacity:.45}
.ydf-more-item{display:none}
.show-more .ydf-more-item{display:flex}
.ydf-more{background:none; border:0; padding:6px 0 0; color:var(--ydf-accent); font:inherit; font-size:14px; cursor:pointer; text-align:left}

/* Knoppen-weergave (pills) */
.ydf-ui-buttons .ydf-options{flex-direction:row; flex-wrap:wrap; gap:6px}
.ydf-ui-buttons .ydf-opt{margin:0; padding:6px 12px; border:1px solid var(--ydf-line); border-radius:99px; font-size:14px; background:#fff}
.ydf-ui-buttons .ydf-opt input{position:absolute; opacity:0; pointer-events:none}
.ydf-ui-buttons .ydf-opt em{background:none; padding:0; min-width:0}
.ydf-ui-buttons .ydf-opt.is-on{background:var(--ydf-accent); border-color:var(--ydf-accent); color:#fff}
.ydf-ui-buttons .ydf-opt.is-on em{color:rgba(255,255,255,.85)}
.ydf-ui-buttons .ydf-opt:focus-within{outline:2px solid var(--ydf-accent); outline-offset:2px}

/* Schakelaar */
.ydf-switch{display:flex; align-items:center; gap:10px; cursor:pointer; font-size:15px}
.ydf-switch input{position:absolute; opacity:0; pointer-events:none}
.ydf-switch-ui{position:relative; width:40px; height:22px; border-radius:99px; background:#d1d5db; flex:none; transition:background .15s}
.ydf-switch-ui::after{content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s}
.ydf-switch input:checked + .ydf-switch-ui{background:var(--ydf-accent)}
.ydf-switch input:checked + .ydf-switch-ui::after{transform:translateX(18px)}
.ydf-switch input:focus-visible + .ydf-switch-ui{outline:2px solid var(--ydf-accent); outline-offset:2px}
.ydf-facet-meta_exists,.ydf-facet-open_now{padding:10px 0}
.ydf-facet-meta_exists .ydf-label,.ydf-facet-open_now .ydf-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

.ydf-reset{display:inline-block; margin-top:12px; font-size:14px; color:var(--ydf-accent)}
.ydf-submit{margin-top:12px; width:100%}

/* Resultaten */
.ydf-main{min-width:0}
.ydf-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; flex-wrap:wrap}
.ydf-summary{font-weight:600}
.ydf-sort{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ydf-muted); margin:0}
.ydf-sort select{width:auto; min-height:38px}
.ydf-results{transition:opacity .15s}
.ydf.is-loading .ydf-results{opacity:.45; pointer-events:none}
.ydf-grid{display:grid; gap:18px; grid-template-columns:repeat(3,minmax(0,1fr))}
.ydf-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ydf-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ydf-card-wrap{position:relative; display:flex; flex-direction:column}
.ydf-card-wrap > *{flex:1}
.ydf-dist{position:absolute; z-index:3; top:10px; right:10px; background:rgba(255,255,255,.95); color:var(--ydf-ink); font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; box-shadow:0 1px 4px rgba(0,0,0,.12); flex:none}
.ydf-empty{padding:40px 20px; text-align:center; color:var(--ydf-muted); border:1px dashed var(--ydf-line); border-radius:var(--ydf-radius)}

/* Paginering */
.ydf-pages{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:32px}
.ydf-page,.ydf-dots{display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px; border-radius:8px; font-weight:600; text-decoration:none}
.ydf-page{border:1px solid var(--ydf-line); color:var(--ydf-ink); background:#fff}
.ydf-page:hover{border-color:var(--ydf-accent); color:var(--ydf-accent)}
.ydf-page.is-current{background:var(--ydf-accent); border-color:var(--ydf-accent); color:#fff}
.ydf-dots{color:var(--ydf-muted)}

/* Mobiel: filters in- en uitklappen */
.ydf-toggle{display:none}
@media (max-width:1024px){
	.ydf-grid,.ydf-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
	.ydf{grid-template-columns:minmax(0,1fr)}
	.ydf-toggle{display:inline-flex; align-items:center; gap:8px; justify-self:start; padding:10px 16px; border:1px solid var(--ydf-line); border-radius:99px; background:#fff; color:var(--ydf-ink); font:inherit; font-weight:600; cursor:pointer}
	.ydf-toggle-n:not(:empty){background:var(--ydf-accent); color:#fff; border-radius:99px; font-size:12px; padding:1px 7px}
	.ydf-form{display:none; position:static; max-height:none}
	.ydf.is-open .ydf-form{display:block}
}
@media (max-width:560px){
	.ydf-grid,.ydf-cols-2,.ydf-cols-4{grid-template-columns:minmax(0,1fr)}
	.ydf-bar{align-items:flex-start; flex-direction:column}
}
