/* Zoekblok "Vind jouw auto" – homepage */
.alj-zb{
	/* Kleuren uit style.css */
	--zb-green:#87c514;
	--zb-purple:#33194C;
	--zb-ink:#000;
	--zb-muted:#4A4A4A;
	--zb-line:#D5D9D0;
	--zb-line-soft:#DDE2D6;
	width:100%;
	float:left;
	font-family:'Roboto Condensed', sans-serif;
	color:var(--zb-ink);
}
.alj-zb *,.alj-zb *::before,.alj-zb *::after{box-sizing:border-box}
.alj-zb [hidden]{display:none !important}

.alj-zb__card{
	background:#fff;
	border-radius:16px;
	box-shadow:0 12px 40px rgba(51,25,76,.12);
	padding:40px 48px 28px;
}

/* Kop */
.alj-zb__head{display:flex;align-items:flex-end;justify-content:center;gap:16px;margin:0 0 26px}
.alj-zb__title{margin:0;font-size:48px;font-weight:800;letter-spacing:.5px;line-height:1;text-transform:uppercase;color:var(--zb-ink)}
.alj-zb__title b{color:var(--zb-green);font-weight:inherit}
.alj-zb__arrow{flex:0 0 auto;width:52px;height:52px;transform:rotate(135deg);margin:0 0 -6px}

/* Stappen */
.alj-zb__form{margin:0;display:flex;flex-direction:column;gap:26px}
.alj-zb__step{display:flex;flex-direction:column;gap:12px}
.alj-zb__label{display:flex;align-items:center;gap:10px;margin:0;font-size:20px;font-weight:700;line-height:1.2}
.alj-zb__num{width:26px;height:26px;border-radius:50%;background:var(--zb-purple);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}

/* Kop stap 1 + veeg-hint (hint alleen mobiel) */
.alj-zb__label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.alj-zb__swipe,.alj-zb__progress{display:none}
.alj-zb__tiles-wrap{position:relative}

/* Tegels */
.alj-zb__tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.alj-zb__tile{
	position:relative;height:128px;padding:0 8px;
	border:1.5px solid var(--zb-line-soft);border-radius:12px;background:#fff;
	display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
	font-family:inherit;color:var(--zb-ink);cursor:pointer;text-align:center;
	transition:border-color .15s, background-color .15s, box-shadow .15s;
}
.alj-zb__tile:hover{border-color:var(--zb-green)}
.alj-zb__tile:focus-visible{outline:2px solid var(--zb-purple);outline-offset:2px}
.alj-zb__tile[aria-pressed="true"]{border-color:var(--zb-green);box-shadow:inset 0 0 0 1px var(--zb-green);background:rgba(135,197,20,.09)}
.alj-zb__tile:disabled{cursor:not-allowed;opacity:.45}
.alj-zb__tile:disabled:hover{border-color:var(--zb-line-soft)}
.alj-zb__car{color:var(--zb-purple);margin-bottom:6px}
.alj-zb__tile-t{font-size:17px;font-weight:700;line-height:1.15}
.alj-zb__tile-s{font-size:14px;color:#5A5A5A;line-height:1.2}
.alj-zb__check{
	position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
	background:var(--zb-green);display:none;align-items:center;justify-content:center;
}
.alj-zb__tile[aria-pressed="true"] .alj-zb__check{display:flex}

/* Velden */
.alj-zb__row{display:grid;grid-template-columns:1fr 1fr 1fr 280px;gap:16px;align-items:end}
.alj-zb__more{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:4px}
.alj-zb__field{display:flex;flex-direction:column;gap:6px;margin:0;font-size:14px;font-weight:500;color:var(--zb-muted)}
.alj-zb__select{position:relative;display:block}
.alj-zb__select select{
	-webkit-appearance:none;appearance:none;
	width:100%;height:54px;margin:0;padding:0 42px 0 16px;
	border:1.5px solid var(--zb-line);border-radius:10px;background:#fff;
	font-family:inherit;font-size:17px;color:var(--zb-ink);cursor:pointer;
}
.alj-zb__more .alj-zb__select select{height:48px;font-size:16px;padding:0 38px 0 14px}
.alj-zb__select select:hover{border-color:#9BA592}
.alj-zb__select select:focus{outline:none;border-color:var(--zb-green);box-shadow:0 0 0 3px rgba(135,197,20,.28)}
.alj-zb__select select:disabled{background:#F7F8F5;color:#6B6B6B;cursor:not-allowed}
.alj-zb__select select:disabled:hover{border-color:var(--zb-line)}
.alj-zb__chev{position:absolute;right:16px;top:50%;margin-top:-7px;color:var(--zb-purple);pointer-events:none}

/* Knop */
/* Kleur, hover, hoeken en letters komen van .btn.l_btn.green uit style.css */
.alj-zb__cta.btn{
	width:100%;height:54px;min-height:54px;padding:0 20px;gap:12px;
	font-family:inherit;font-size:18px;cursor:pointer;
	transition:background-color .15s, opacity .15s;
}
.alj-zb__cta:focus-visible{outline:3px solid var(--zb-purple);outline-offset:2px}
.alj-zb__cta[aria-disabled="true"],.alj-zb__cta[aria-disabled="true"]:hover{opacity:.55;cursor:not-allowed;background:var(--zb-green)}
.alj-zb.is-loading .alj-zb__cta-text{opacity:.6}
.alj-zb__cta-wrap--mobile{display:none}

/* Voet */
.alj-zb__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:4px}
.alj-zb__toggle,.alj-zb__reset{
	border:0;background:none;padding:10px 0;min-height:44px;margin:0;
	font-family:inherit;font-size:17px;font-weight:700;color:var(--zb-purple);
	display:flex;align-items:center;gap:8px;cursor:pointer;
}
.alj-zb__reset{font-weight:500;font-size:16px;text-decoration:underline;text-underline-offset:3px}
.alj-zb__toggle-icon{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--zb-purple);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1}
.alj-zb__toggle:hover,.alj-zb__reset:hover{color:var(--zb-green)}
.alj-zb__toggle:hover .alj-zb__toggle-icon{border-color:var(--zb-green)}

.alj-zb__sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* Plaatsing onder de slider (bestaande #front_filter-wrapper) */
#front_filter .alj-zb{margin:0}

/* Tablet */
@media (max-width:1023px){
	.alj-zb__card{padding:32px 28px 20px}
	.alj-zb__title{font-size:40px}
	.alj-zb__tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
	.alj-zb__row{grid-template-columns:repeat(3,minmax(0,1fr))}
	.alj-zb__cta-wrap--desktop{grid-column:1 / -1}
	.alj-zb__more{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Mobiel */
@media (max-width:767px){
	.alj-zb__card{padding:24px 0 0;border-radius:16px;box-shadow:0 10px 30px rgba(51,25,76,.12)}
	.alj-zb__head{margin:0 0 20px;padding:0 20px}
	.alj-zb__title{font-size:34px;text-align:center}
	.alj-zb__arrow{display:none}
	.alj-zb__form{gap:20px}
	.alj-zb__label{font-size:18px}
	.alj-zb__label-row,.alj-zb__step > .alj-zb__label{padding:0 20px}
	.alj-zb__swipe{
		display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
		font-size:14px;font-weight:700;color:var(--zb-purple);
		transition:opacity .3s;
	}
	.alj-zb__swipe svg{animation:alj-zb-nudge 1.4s ease-in-out infinite}
	.alj-zb.is-swiped .alj-zb__swipe{opacity:0}
	/* Vervaagde randen: laten zien dat er meer tegels zijn */
	.alj-zb__tiles-wrap::before,.alj-zb__tiles-wrap::after{
		content:'';position:absolute;top:0;bottom:12px;width:48px;z-index:2;
		pointer-events:none;transition:opacity .2s;
	}
	.alj-zb__tiles-wrap::before{left:0;background:linear-gradient(to right,#fff,rgba(255,255,255,0));opacity:0}
	.alj-zb__tiles-wrap::after{right:0;background:linear-gradient(to left,#fff 10%,rgba(255,255,255,0))}
	.alj-zb__tiles-wrap.is-scrolled::before{opacity:1}
	.alj-zb__tiles-wrap.is-end::after{opacity:0}
	/* Voortgangsbalk onder de tegels */
	.alj-zb__progress{display:block;position:relative;height:4px;margin:6px 20px 0;border-radius:2px;background:#E6E9E1;overflow:hidden}
	.alj-zb__progress-bar{position:absolute;top:0;left:0;height:100%;width:40%;border-radius:2px;background:var(--zb-green)}
	.alj-zb__num{display:none}
	.alj-zb__tiles{
		display:flex;gap:10px;overflow-x:auto;padding:2px 20px 6px;
		scroll-snap-type:x proximity;scroll-padding-inline:20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
	}
	.alj-zb__tiles::-webkit-scrollbar{display:none}
	.alj-zb__tile{flex:0 0 124px;height:112px;padding:0 6px;scroll-snap-align:start}
	.alj-zb__car{width:64px;height:32px;margin-bottom:4px}
	.alj-zb__tile-t{font-size:15px}
	.alj-zb__tile-s{font-size:13px}
	.alj-zb__row,.alj-zb__more{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px}
	.alj-zb__field--merk{grid-column:1 / -1}
	.alj-zb__select select{height:52px;font-size:16px;padding:0 36px 0 14px}
	.alj-zb__chev{right:14px}
	.alj-zb__foot{padding:0 20px}
	.alj-zb__toggle{font-size:16px}
	.alj-zb__toggle-icon{width:22px;height:22px;font-size:15px}
	/* Knop blijft onderin beeld zolang het blok zichtbaar is */
	.alj-zb__cta-wrap--desktop{display:none}
	.alj-zb__cta-wrap--mobile{
		display:block;position:sticky;bottom:0;z-index:3;
		margin-top:-8px;padding:12px 16px 16px;
		background:#fff;border-radius:0 0 16px 16px;
		box-shadow:0 -6px 20px rgba(51,25,76,.10);
	}
	.alj-zb__cta.btn{height:52px;min-height:52px;font-size:17px}
}

@keyframes alj-zb-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}

@media (prefers-reduced-motion:reduce){
	.alj-zb *{transition:none !important;animation:none !important}
}