/**
 * Altus — filter-sidebar voor "gewone" archiefpagina's (mu-plugin
 * altus-steiger-filters.php), gestart bij Kamersteigers.
 *
 * Visuele stijl overgenomen uit Sylvies eigen mockup
 * (~/Desktop/Claude/steigernavigatie/mockup_kamersteigers_verbeterd.html), maar met
 * Altus' eigen kleurvariabelen (--altus-navy/--altus-oranje, zie altus-product.css)
 * i.p.v. de placeholder-kleuren uit de mockup.
 */

.altus-steigerfilter {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.altus-steigerfilter__reset-alles {
	background: var(--altus-navy, #223a80);
	border-radius: 4px;
	color: #fff;
	display: block;
	font-size: 13px;
	font-weight: 600;
	padding: 10px 14px;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.altus-steigerfilter__reset-alles:hover {
	color: #fff;
	opacity: 0.85;
}

.altus-steigerfilter__groep-titel {
	align-items: center;
	border-bottom: 2px solid var(--altus-oranje, #ff6a00);
	color: var(--altus-navy, #223a80);
	display: flex;
	font-size: 14px;
	font-weight: 700;
	justify-content: space-between;
	margin-bottom: 10px;
	padding-bottom: 6px;
}

.altus-steigerfilter__wis {
	color: var(--altus-oranje, #ff6a00);
	font-size: 11px;
	font-weight: 400;
	text-decoration: none;
}

.altus-steigerfilter__wis:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- tegels --
   Breedte steiger / Platform uitvoering: enkelvoudige keuze. Onder elkaar op
   volledige blokbreedte (i.p.v. naast elkaar) — bij 3+ opties liepen de tegels
   anders buiten het filterblok, over de productenkolom heen. */

.altus-steigerfilter__tegels {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.altus-steigerfilter__tegel {
	background: #fff;
	border: 1px solid #dde;
	border-radius: 6px;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	width: 100%;
	flex: 1;
	font-size: 12px;
	font-weight: 600;
	padding: 9px 12px;
	/* Links uitlijnen, zelfde als de Werkhoogte-banden en de vinkjes-groepen
	   ernaast/eronder — voordien centraal, waardoor de tekst per filtergroep
	   soms links en soms centraal stond. */
	text-align: left;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.altus-steigerfilter__tegel input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.altus-steigerfilter__tegel:hover {
	border-color: var(--altus-navy, #223a80);
}

.altus-steigerfilter__tegel--actief {
	background: #fff4ef;
	border-color: var(--altus-oranje, #ff6a00);
	color: var(--altus-oranje, #ff6a00);
}

/* Niet-klikbaar "je bevindt je hier"-label (bv. Type op een Trapladders-
   subcategoriepagina) — zelfde uiterlijk als een actieve tegel, maar zonder
   pointer-cursor of hover-effect, want er valt hier niets te kiezen. */
.altus-steigerfilter__tegel--label {
	cursor: default;
}

.altus-steigerfilter__tegel--label:hover {
	border-color: var(--altus-oranje, #ff6a00);
}

/* Merk: logo-tegels (meervoudige keuze) i.p.v. tekst — breder/hoger dan de gewone
   tegels zodat een logo goed leesbaar blijft, en in een grid (meer dan 3 merken
   passen niet altijd naast elkaar op 1 rij zoals bij breedte/platform). */
.altus-steigerfilter__tegels--merk {
	display: grid;
	flex-wrap: unset;
	grid-template-columns: repeat(2, 1fr);
}

.altus-steigerfilter__tegel--merk {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 56px;
	padding: 8px;
}

.altus-steigerfilter__merk-logo {
	display: block;
	height: auto;
	max-height: 36px;
	max-width: 100%;
	width: auto;
}

.altus-steigerfilter__merk-naam {
	font-size: 12px;
	font-weight: 600;
}

/* ------------------------------------------------------------------ banden --
   Werkhoogte: enkelvoudige keuze, met korte uitleg per band. */

.altus-steigerfilter__banden {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.altus-steigerfilter__band {
	align-items: center;
	background: #fff;
	border: 1px solid #dde;
	/* Zelfde afronding als .altus-steigerfilter__tegel hierboven — stond
	   voordien op 4px i.p.v. 6px, een klein maar zichtbaar verschil tussen
	   filtergroepen die verder identiek ogen. */
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	padding: 8px 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.altus-steigerfilter__band input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.altus-steigerfilter__band:hover {
	border-color: var(--altus-navy, #223a80);
}

.altus-steigerfilter__band--actief {
	background: #fff4ef;
	border-color: var(--altus-oranje, #ff6a00);
}

.altus-steigerfilter__band--actief .altus-steigerfilter__band-tekst strong {
	color: var(--altus-oranje, #ff6a00);
}

.altus-steigerfilter__band-tekst {
	display: flex;
	flex-direction: column;
	font-size: 13px;
}

.altus-steigerfilter__band-tekst strong {
	color: var(--altus-navy, #223a80);
}

.altus-steigerfilter__band-beschrijving {
	color: #888;
	font-size: 11px;
}

/* ----------------------------------------------------------------- vinkjes --
   Gebruik / Type opbouw: meervoudige keuze. */

.altus-steigerfilter__vinkjes {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.altus-steigerfilter__vinkje {
	align-items: center;
	color: #333;
	cursor: pointer;
	display: flex;
	font-size: 13px;
	gap: 8px;
}

.altus-steigerfilter__vinkje input {
	accent-color: var(--altus-oranje, #ff6a00);
	height: 14px;
	width: 14px;
}

/* Kleurstaaltje bij "Kleur/afwerking" (Molenaarstrappen) — altus-molenaarstrap-
   filters.php: een vaste, lichte rand zodat ook een wit staaltje nog zichtbaar
   afgebakend blijft tegen de witte zijbalk. */
.altus-steigerfilter__kleur-staaltje {
	border: 1px solid #d0d5dd;
	border-radius: 3px;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: 14px;
	width: 14px;
}

/* ------------------------------------------------------------ sorteren op --
   [altus_steiger_sortering]: eigen, apart blokje BOVEN het productenraster (op
   verzoek van Sylvie), los van de filter-zijbalk hierboven. */

/* De Shortcode-container die zowel [altus_*_specifieke_werkhoogtes/treden] als
   [altus_*_sortering] bevat (op verzoek van Sylvie samen in 1 Bricks-element
   geplaatst) wordt hier tot een flexrij gemaakt, zodat "Sorteren op" via
   margin-left: auto hieronder altijd uiterst rechts kan uitlijnen — ook wanneer
   het de ENIGE inhoud is (bv. nog geen werkhoogte gekozen): met margin-left:
   auto op een flex-item duwt de vrije ruimte het item dan alsnog naar rechts. */
.brxe-shortcode:has(> .altus-steiger-sortering) {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}

.altus-steiger-sortering {
	/* inline-flex i.p.v. flex: anders trekt Bricks' eigen <form>-standaard (100%
	   breed) dit blokje over de volle breedte van de pagina, terwijl label + veld
	   net compact naast elkaar (op 1 lijn) moeten staan. */
	align-items: center;
	display: inline-flex;
	gap: 10px;
	margin-bottom: 16px;
	margin-left: auto;
	white-space: nowrap;
	width: auto;
}

.altus-steiger-sortering__label {
	color: var(--altus-navy, #223a80);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.altus-steiger-sortering__select {
	/* Bricks zet standaard appearance: none op <select> (voor een eigen pijltje dat
	   hier nooit toegevoegd was) — vandaar het ontbrekende pijltje; hier een eigen
	   pijltje terug toevoegen i.p.v. gewoon terugvallen op de kale browserstijl. */
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23223a80' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	background-size: 10px;
	border: 1px solid #dde;
	border-radius: 4px;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	/* Zonder expliciete line-height erft dit veld ergens een regelhoogte van 40px
	   (vermoedelijk een generieke form-veld-stijl elders in het thema) — een
	   select met appearance: none centreert zijn waarde niet betrouwbaar binnen
	   zo'n overdreven regelhoogte, waardoor "Standaard" lager stond dan het
	   "Sorteren op"-label ernaast. Concreet gemeten (DevTools) en hersteld naar
	   een regelhoogte die bij de tekstgrootte past. */
	line-height: 20px;
	padding: 8px 32px 8px 12px;
	width: auto;
}

.altus-steiger-sortering__select:hover {
	border-color: var(--altus-navy, #223a80);
}

/* ------------------------------------------------ specifieke werkhoogte --
   [altus_steiger_specifieke_werkhoogtes]: verschijnt naast "Sorteren op" zodra
   links in de zijbalk een werkhoogte-BAND gekozen is, en laat toe binnen die band
   te verfijnen naar specifieke waarden (bv. "3.80 m") — vinkjes als compacte
   pilletjes, zelfde taal als de "Sorteren op"-balk ernaast. */

.altus-steiger-specifieke-werkhoogte {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	margin-left: 16px;
}

.altus-steiger-specifieke-werkhoogte__label {
	color: var(--altus-navy, #223a80);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.altus-steiger-specifieke-werkhoogte__vinkje {
	background: #fff;
	border: 1px solid #dde;
	border-radius: 16px;
	color: var(--altus-navy, #223a80);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.altus-steiger-specifieke-werkhoogte__vinkje input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.altus-steiger-specifieke-werkhoogte__vinkje:hover {
	border-color: var(--altus-navy, #223a80);
}

.altus-steiger-specifieke-werkhoogte__vinkje:has(input:checked) {
	background: #fff4ef;
	border-color: var(--altus-oranje, #ff6a00);
	color: var(--altus-oranje, #ff6a00);
}

/* -------------------------------------------------------- laadindicator --
   Elke filter/sortering/paginaklik is een volledige pagina-navigatie (geen
   AJAX) — dit ladder-icoontje (wit → oranje, van onder naar boven) geeft
   meteen een signaal dat er iets aan het laden is, i.p.v. dat de bezoeker
   even niets zag gebeuren. */

.altus-steiger-laadindicator {
	align-items: center;
	background: rgba(255, 255, 255, 0.85);
	display: none;
	inset: 0;
	justify-content: center;
	position: fixed;
	z-index: 9999;
}

.altus-steiger-laadindicator--actief {
	display: flex;
}

.altus-steiger-laadindicator__ladder {
	height: 96px;
	width: 60px;
}

.altus-steiger-laadindicator__laag--wit {
	fill: #e3e6ef;
}

.altus-steiger-laadindicator__laag--oranje {
	fill: var(--altus-oranje, #ff6a00);
}

/* De animatie staat bewust ENKEL op de actieve-toestand, niet los op de laag
   zelf: als het icoontje verborgen is (display: none) blijft de animatieklok
   ondertussen soms toch lopen, waardoor ze de 2de/3de keer niet meer vanaf 0%
   herstart — vandaar dat het de eerste keer wél, maar daarna niet meer vlot
   liep. Zo start de animatie elke keer opnieuw écht bij nul. */
.altus-steiger-laadindicator--actief .altus-steiger-laadindicator__laag--oranje {
	animation: altus-steiger-laadindicator-vullen 0.6s linear infinite;
}

/* Kort genoeg (0,6s) om, ongeacht hoe snel de pagina daadwerkelijk laadt, minstens
   1 volledige cyclus (leeg → helemaal vol) te tonen vóór de browser de pagina
   ombouwt — anders lijkt het icoontje halverwege af te breken, en bij een snellere
   herlaadbeurt (bv. door browsercache) elke keer een beetje vroeger, wat aanvoelt
   alsof de pagina vasthangt. `linear` i.p.v. `ease-in-out`: geen vertraging tegen
   het einde, dus het voelt ook niet aan alsof ze "blijft haperen" net voor vol. */
@keyframes altus-steiger-laadindicator-vullen {
	0% {
		clip-path: inset(100% 0 0 0);
	}

	100% {
		clip-path: inset(0 0 0 0);
	}
}

/* --------------------------------------------------- tablet/mobiel --------
   De filter-kolom naast de producten staat in elk archiefsjabloon vast op
   15% breedte (bedoeld voor desktop, naast een brede productenkolom) — zonder
   mobiele/tablet-instelling. Bij een smallere rij (bv. 560px na de
   sectiepadding op een tablet) is 15% maar ~84px: te smal voor zelfs één
   woord, en de filtertegels + merklogo's persen zich daar krom in
   (gevonden tijdens de tablet-controle van de hele site, 29/09/2026: "De
   filters op de archiefpagina zijn niet mobielvriendelijk"). width:100%
   dwingt de kolom naar een eigen volle rij (de rij zelf staat al op
   flex-wrap), zodat filters bovenaan en producten eronder komen te staan —
   in plaats van allebei krom naast elkaar.
   Elk archief-categorie heeft zijn eigen shortcode-element-ID (geen
   gedeelde klasse beschikbaar op die buitenste Bricks-container), vandaar
   deze lijst: Steigers, Dakrandbeveiliging, Bordestrappen, Trapladders +
   Ladders (delen hetzelfde sjabloon/ID), Zoldertrappen, Molenaarstrappen. */
@media (max-width: 991px) {
	#brxe-axrnuv,
	#brxe-ba173b,
	#brxe-btad00,
	#brxe-edbfee,
	#brxe-9d2d39,
	#brxe-fadd5d {
		width: 100% !important;
		min-width: 100% !important;
		max-width: 100% !important;
		margin-right: 0 !important;
	}
}

/* Tablet (en kleiner): de rij "filters + producten" van elk archiefsjabloon
   staat in Bricks op rij zonder tabletinstelling, waardoor de producten naast
   de volle-breedte-zijbalk buiten beeld vielen (pagina 1300 px breed op een
   scherm van 768 px). Hier onder elkaar zetten: filters boven, producten eronder.
   Rij-containers per sjabloon: Steigers, Trapladders + Ladders, Zoldertrappen,
   Dakrandbeveiliging, Bordestrappen, Molenaarstrappen + Brandladders. */
@media (max-width: 991px) {
	#brxe-dxdaxu,
	#brxe-0b4672,
	#brxe-44fe42,
	#brxe-2ff86f,
	#brxe-bt2c17,
	#brxe-4cc2c2 {
		flex-direction: column !important;
		align-items: stretch !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
		box-sizing: border-box;
	}

	#brxe-dxdaxu > *,
	#brxe-0b4672 > *,
	#brxe-44fe42 > *,
	#brxe-2ff86f > *,
	#brxe-bt2c17 > *,
	#brxe-4cc2c2 > * {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}
}

/* Tablet: twee producten naast elkaar (met de zijbalk nu boven het raster is
   er ruimte voor 4 smalle kaartjes, maar die zijn onleesbaar klein). */
@media (min-width: 600px) and (max-width: 991px) {
	#brxe-dxdaxu ul.products,
	#brxe-0b4672 ul.products,
	#brxe-44fe42 ul.products,
	#brxe-2ff86f ul.products,
	#brxe-bt2c17 ul.products,
	#brxe-4cc2c2 ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}