/*
 * FacetWP-styling (WoodXL) — nested CSS
 */

/* ---------- Header-zoekbalk (FacetWP search facet "zoeken") ---------- */
.wxl-header-search {
	.facetwp-facet {
		margin: 0;
	}

	.facetwp-input-wrap {
		display: block;
		position: relative;
		width: 100%;
	}

	.facetwp-facet input.facetwp-search {
		width: 100%;
		min-width: 0;
		height: 47px;
		padding: 0 44px 0 14px;
		border: 2px solid var(--e-global-color-wxlgray2);
		border-radius: 8px;
		background: var(--e-global-color-wxlcream);
		color: var(--e-global-color-secondary);
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 13.5px;
		line-height: 1.4;

		&::placeholder {
			font-size: 13px;
			color: var(--e-global-color-wxltaupel);
		}

		&:focus {
			outline: none;
			border-color: var(--e-global-color-primary);
			background: var(--e-global-color-wxlwhite);
		}
	}

	.facetwp-facet .facetwp-icon {
		position: absolute;
		top: 50%;
		right: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 37px;
		height: 37px;
		transform: translateY(-50%);
		border-radius: 6px;
		background: var(--e-global-color-primary);
		opacity: 1;

		/* Zoekicoon uit het ontwerp i.p.v. FacetWP-png, exact gecentreerd */
		&::before {
			display: block;
			width: 17px;
			height: 17px;
			background: url("/wp-content/uploads/woodxl-icons/search-wit.svg") center / 17px 17px no-repeat;
			filter: none;
		}

		&:hover {
			background: var(--e-global-color-accent);
		}
	}
}

/* =========================================================
   Categoriepagina (productenwoodxl.html)
   ========================================================= */

/* FacetWP geeft elke facet 40px ondermarge; spacing regelen we in Elementor. */
.elementor-widget-facetwp-facet .facetwp-facet {
	margin-bottom: 0;
}

/* Tellers: rechts uitgelijnd, klein en licht */
:is(.wxl-filter, .facetwp-flyout) .facetwp-counter {
	margin-left: auto;
	padding-left: 8px;
	font-size: 12px;
	color: var(--e-global-color-wxltaupel);
}

/* ---------- Checkboxes (Houtsoort, Diameter, Beschikbaarheid) ---------- */
:is(.wxl-filter, .facetwp-flyout) .facetwp-type-checkboxes {
	.facetwp-checkbox {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0;
		padding: 6px 0;
		background: none;
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 14px;
		line-height: 1.4;
		color: var(--e-global-color-wxlbrown);
		cursor: pointer;

		&::before {
			content: "";
			flex: none;
			width: 16px;
			height: 16px;
			border: 1.5px solid var(--e-global-color-wxlgray3);
			border-radius: 4px;
			background: var(--e-global-color-wxlwhite) center / 10px no-repeat;
		}

		&.checked::before {
			border-color: var(--e-global-color-primary);
			background-color: var(--e-global-color-primary);
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		}

		&.disabled {
			opacity: 0.45;
			cursor: default;
		}
	}

	.facetwp-display-value {
		padding: 0;
	}

	.facetwp-toggle {
		margin-top: 6px;
		font-size: 13px;
		color: var(--e-global-color-accent);
	}
}

/* ---------- Categorie: hiërarchische checkboxes (meerdere keuzes, OR) ---------- */
:is(.wxl-filter, .facetwp-flyout) .facetwp-facet-categorie {
	/* uitklapknop subcategorieën: "[+]" van FacetWP → ronde +/− in huisstijl */
	.facetwp-expand {
		flex: none;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 20px;
		margin-left: 6px;
		border-radius: 50%;
		background: var(--e-global-color-wxlcream);
		font-size: 0;
		color: var(--e-global-color-primary);
		cursor: pointer;

		&::before {
			content: "+";
			font-size: 15px;
			font-weight: 700;
			line-height: 1;
		}

		&:hover {
			background: var(--e-global-color-wxlorlt);
		}
	}

	.facetwp-checkbox:has(+ .facetwp-depth.visible) .facetwp-expand::before {
		content: "\2212";
	}

	.facetwp-depth {
		margin-left: 8px;
		padding-left: 18px;
		border-left: 1.5px solid var(--e-global-color-wxlgray2);
	}
}

/* ---------- Prijs (number range) ---------- */
:is(.wxl-filter, .facetwp-flyout) .facetwp-type-number_range {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	.facetwp-number {
		flex: 1 1 0;
		min-width: 0;
		height: 35px;
		margin: 0;
		padding: 0 10px;
		border: 1.5px solid var(--e-global-color-wxlgray2);
		border-radius: 6px;
		background: var(--e-global-color-wxlwhite);
		font-family: var(--e-global-typography-text-font-family), sans-serif;
		font-size: 13px;
		color: var(--e-global-color-secondary);

		&:focus {
			outline: none;
			border-color: var(--e-global-color-primary);
		}
	}

	/* Min/max: tekst + placeholder iets kleiner. "input." erbij, anders wint de Elementor-kit-regel
	   (.elementor-kit-7 input:not(…):not(…) = 16px). */
	input.facetwp-number {
		font-size: 13px;

		&::placeholder {
			font-size: 13px;
			color: var(--e-global-color-wxltaupel);
			opacity: 1;
		}
	}

	.facetwp-submit {
		flex: 1 1 100%;
		margin: 4px 0 0;
		padding: 7px 16px; /* ≈ 37px hoog, in lijn met de min/max-velden */
		line-height: 1.4;
		border: 2px solid var(--e-global-color-wxlgray3);
		border-radius: 6px;
		background: var(--e-global-color-wxlwhite);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-size: 12.5px;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
		color: var(--e-global-color-wxlbrown);
		cursor: pointer;

		&:hover,
		&:focus {
			border-color: var(--e-global-color-primary);
			background: var(--e-global-color-wxlwhite);
			color: var(--e-global-color-primary);
		}
	}
}

/* ---------- Sorteren (select) ---------- */
.wxl-sort .facetwp-type-sort select {
	width: 100%;
	min-width: 190px;
	margin: 0;
	padding: 10px 36px 10px 14px;
	border: 1.5px solid var(--e-global-color-wxlgray2);
	border-radius: 8px;
	background: var(--e-global-color-wxlwhite) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23332B28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 16px no-repeat;
	appearance: none;
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 13.5px;
	color: var(--e-global-color-secondary);
	cursor: pointer;

	&:focus {
		outline: none;
		border-color: var(--e-global-color-primary);
	}
}

/* ---------- Tellers ---------- */
.wxl-result-count .facetwp-type-pager {
	font-family: var(--e-global-typography-text-font-family), sans-serif;
	font-size: 14px;
	color: var(--e-global-color-text);

	b {
		color: var(--e-global-color-secondary);
	}
}

.wxl-banner-count .facetwp-type-pager {
	font-family: var(--e-global-typography-wxlcrumb-font-family), sans-serif;
	font-size: 12.5px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--e-global-color-wxltaupel);
}

/* ---------- Paginering ---------- */
.wxl-pager .facetwp-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;

	.facetwp-page {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 38px;
		height: 38px;
		margin: 0;
		padding: 0 12px;
		border: 1.5px solid var(--e-global-color-wxlgray2);
		border-radius: 8px;
		background: var(--e-global-color-wxlwhite);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-size: 13px;
		font-weight: 600;
		color: var(--e-global-color-wxlbrown);

		&:hover {
			border-color: var(--e-global-color-primary);
		}

		&.active {
			border-color: var(--e-global-color-secondary);
			background: var(--e-global-color-secondary);
			color: var(--e-global-color-wxlwhite);
		}

		&.next,
		&.prev {
			padding: 0 18px;
		}

		&.dots {
			border: 0;
			background: none;
		}
	}
}

/* ---------- Mobiele flyout: paneel van rechts, kop + vaste resultatenknop (zie functions.php #6) ---------- */
.facetwp-flyout.wxl-flyout {
	display: flex;
	flex-direction: column;
	right: 0;
	left: auto;
	bottom: 0;
	width: 86%;
	max-width: 360px;
	height: auto;
	border-right: 0;
	box-shadow: -20px 0 40px rgba(0, 0, 0, 0.2);
	transform: translateX(calc(100% + 40px));
	transition: transform 0.25s ease;

	&.active {
		transform: translateX(0);
	}

	.wxl-flyout-head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		padding: 16px 20px;
		border-bottom: 1px solid var(--e-global-color-wxlgray2);
	}

	.wxl-flyout-title {
		font-family: var(--e-global-typography-wxlh4-font-family), sans-serif;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.2;
		text-transform: uppercase;
		color: var(--e-global-color-secondary);
	}

	.wxl-flyout-head .facetwp-flyout-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-radius: 8px;
		background: var(--e-global-color-wxlcream);
		color: var(--e-global-color-secondary);
		line-height: 1;

		svg {
			width: 18px;
			height: 18px;
		}
	}

	.facetwp-flyout-wrap {
		position: static;
		flex: 1 1 auto;
		height: auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.facetwp-flyout-content {
		padding: 16px 20px;
	}

	.wxl-flyout-foot {
		flex: none;
		padding: 14px 20px;
		border-top: 1px solid var(--e-global-color-wxlgray2);
		background: var(--e-global-color-wxlwhite);
	}

	.wxl-flyout-show {
		display: block;
		width: 100%;
		margin: 0;
		padding: 14px 20px;
		border: 0;
		border-radius: 6px;
		background: var(--e-global-color-primary);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.03em;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		color: var(--e-global-color-wxlwhite);
		cursor: pointer;

		&:hover,
		&:focus {
			background: var(--e-global-color-accent);
		}
	}
}

body .facetwp-flyout-fog {
	background-color: rgb(35, 26, 20);
}

/* ---------- Mobiele flyout ---------- */
.facetwp-flyout {
	.flyout-row h3 {
		font-family: var(--e-global-typography-wxlh4-font-family), sans-serif;
		font-size: 13px;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--e-global-color-secondary);
	}
}

.facetwp-flyout {
	.flyout-row {
		padding: 0 0 18px;
		margin-bottom: 18px;
		border-bottom: 1px solid var(--e-global-color-wxlgray2);

		&:last-child {
			border-bottom: 0;
		}
	}

	.facetwp-facet {
		margin-bottom: 0;
	}
}

/* ---------- Reset-knop ("Filters wissen"), alleen zichtbaar met actief filter ---------- */
.wxl-reset .facetwp-type-reset,
.facetwp-flyout .facetwp-type-reset {
	.facetwp-reset {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin: 0;
		padding: 14px 20px;
		border: 2px solid var(--e-global-color-secondary);
		border-radius: 6px;
		background: var(--e-global-color-secondary);
		font-family: var(--e-global-typography-accent-font-family), sans-serif;
		font-size: 13px;
		font-weight: 600;
		letter-spacing: 0.03em;
		line-height: 1;
		text-transform: uppercase;
		color: var(--e-global-color-wxlwhite);
		cursor: pointer;
		transition: background 0.16s ease, border-color 0.16s ease;

		&:hover,
		&:focus {
			border-color: var(--e-global-color-primary);
			background: var(--e-global-color-primary);
			color: var(--e-global-color-wxlwhite);
		}
	}
}

/* Filtergroep zonder keuzes (zie functions.php #8) */
.wxl-facet-empty {
	display: none !important;
}

/* ---------- Tablet/mobiel: compacter filterpaneel + sorteerveld even hoog als de filterknop ---------- */
@media (max-width: 1024px) {
	.wxl-sort .facetwp-type-sort select {
		height: 37px;
		min-height: 0;
		padding: 0 34px 0 12px;
		font-size: 13px;
		line-height: 1;
	}

	.facetwp-flyout {
		.flyout-row {
			padding-bottom: 12px;
			margin-bottom: 12px;
		}

		.flyout-row h3 {
			margin: 0 0 4px;
			font-size: 12px;
		}

		.facetwp-checkbox,
		.facetwp-link {
			padding-top: 4px !important;
			padding-bottom: 4px !important;
			font-size: 13px !important;
		}

		.facetwp-counter {
			font-size: 11px;
		}

		.facetwp-type-number_range {
			gap: 6px;

			.facetwp-number {
				height: 32px;
				font-size: 12.5px;
			}

			.facetwp-submit {
				margin-top: 2px;
				padding: 7px 14px;
				font-size: 12px;
				line-height: 1.4;
			}
		}

		.facetwp-type-reset .facetwp-reset {
			padding: 11px 18px;
			font-size: 12.5px;
		}
	}
}