/**
 * Blossom - Custom Filter Styling FacetWP
 * Custom styling for FacetWP facets: checkboxes, selections, toggle links.
 */

/* facets */
.facetwp-facet,
.facetwp-overflow {
	margin-bottom: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.facetwp-checkbox {
	background: url('/wp-content/uploads/2026/07/checkbox-background.png') 0 50% no-repeat !important;
	display: flex;
	justify-content: space-between;
	gap: 5px;
}

.facetwp-checkbox.checked {
	background-image: url('/wp-content/uploads/2026/07/checkbox-checked-background.png') !important;
}

.facetwp-checkbox .facetwp-display-value {
	padding-left: 17px;
	color: #111;
}

.facetwp-checkbox .facetwp-display-value,
.facetwp-counter {
	font-size: 13px;
	word-break: normal;
}

.facetwp-counter {
	color: rgba(11, 24, 41, 0.50);
}

.facetwp-checkbox.checked .facetwp-display-value {
	font-weight: 700;
}

.facetwp-facet .facetwp-toggle {
	font-size: 12px;
	text-decoration: none;
}

.facetwp-selection-label {
	display: none;
}

.facetwp-selections .facetwp-selection-value {
	background-image: url('/wp-content/uploads/2026/07/close-icon.svg') !important;
	background-size: 14px 14px !important;
	background-position: right 10px center !important;
	background-color: #fff;
	filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.04));
	backdrop-filter: blur(2px);
	padding-top: 12px !important;
	padding-right: 30px !important;
	padding-bottom: 10px !important;
	padding-left: 10px !important;
	border-radius: 37px;
	font-size: 12px;
	font-weight: 700;
	color: #5C3D2E;
}

.facetwp-selections ul {
	padding: 0;
}

.facetwp-selections li {
	display: flex !important;
	flex-wrap: wrap;
	gap: 5px;
}

/*
 * FacetWP maakt per facet één <li> aan. De gap hierboven werkt alleen tussen
 * meerdere waarden binnen dezelfde facet; deze marge zet ruimte tussen de
 * pills van verschillende facets (bijv. thema + auteur).
 */
.facetwp-selections li:not(:last-child) {
	margin-bottom: 8px !important;
}

.facetwp-reset {
	font-size: 12px;
}

/* load more */
.facetwp-facet.facetwp-facet-laad_meer.facetwp-type-pager {
	display: flex;
	justify-content: center;
	align-items: center;
}

.facetwp-load-more {
	width: fit-content;
	border: 1px solid #5C3D2E;
	padding: 8px 22px;
	border-radius: 100px;
	background-color: transparent;
	color: #5C3D2E;
	font-size: 15px;
}

.facetwp-load-more:hover {
	background-color: #6c4033;
	color: #fff;
}

/* flyout */
.facetwp-flyout-close {
	background-color: #DDE4E2;
	background-image: url('/wp-content/uploads/2026/07/flyout-close-icon.svg');
	background-repeat: no-repeat;
	background-position: right;
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	padding-left: 20px;
	box-sizing: border-box;
}

.facetwp-flyout-close .flyout-label {
	font-family: 'Bungee', sans-serif;
	font-size: 18px;
	color: #3D6459;
}

button.facetwp-flyout-open {
	margin: 0;
	border-radius: 54px;
	background: var(--Brown-500, #B46A55);
	box-shadow: 0 14px 20px 0 rgba(11, 24, 41, 0.05);
	width: 100%;
	padding: 15px 22px;
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	color: #fff;
}

.facetwp-flyout {
	width: 100% !important;
}

.facetwp-flyout h2,
.facetwp-flyout h3,
.facetwp-flyout h4,
.facetwp-flyout h5,
.facetwp-flyout h6 {
	font-size: 18px !important;
}

.facetwp-flyout-wrap {
	padding: 0 20px;
}

.flyout-row.name-reset_all {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.facetwp-flyout .facetwp-reset {
	border-radius: 54px;
	background: var(--Brown-500, #B46A55) !important;
	box-shadow: 0 14px 20px 0 rgba(11, 24, 41, 0.05);
	width: 200px;
	padding: 15px 22px;
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
	text-align: center;
}

@media (max-width: 782px) {
	body.admin-bar .facetwp-flyout {
		top: 0 !important;
	}
}

/* sort order
 * The icon sits at a fixed spot left of the text (padding-left), and the
 * select itself is pushed to the right edge of the facet. No text-align
 * tricks: iOS Safari ignores text-align on <select>, which made the
 * icon overlap the text on mobile.
 */
.facetwp-facet-sort_order {
	align-items: flex-end;
}

.facetwp-facet-sort_order select {
	-webkit-appearance: none;
	appearance: none;
	field-sizing: content; /* fit width to the selected option where supported */
	width: auto !important;
	/* +14px: the select hangs 14px outside the facet (negative margin-right
	   below). A plain 100% would cap it at the facet width, which in a
	   shrink-wrapped parent is 14px too narrow and cuts off the text. */
	max-width: calc(100% + 14px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13' fill='none'%3E%3Cpath d='M0.75 0.75H8.25' stroke='%2368707A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.75 6.22235H6.58333' stroke='%2368707A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M0.75 11.6947H6.58333' stroke='%2368707A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.91797 8.95853L12.418 11.694L14.918 8.95853' stroke='%2368707A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.418 0.75V11.6947' stroke='%2368707A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left 14px center;
	background-size: 15px 13px;
	background-color: transparent;
	/* inner space for the hover pill; negative margin keeps the
	   text aligned to the column edge when not hovered */
	padding-left: 37px !important;
	padding-right: 14px !important;
	margin-right: -14px !important;
	text-align: left;
	box-shadow: none !important;
	border: none;
	color: #0B1829;
	/* A <select> does not inherit font-size from the page. Without a fixed
	   value it follows whatever the theme sets per template (archive vs.
	   regular page), so the text looked bigger on the products archive. */
	font-size: 15px !important;
	cursor: pointer;
}

@media (max-width: 854px) {
	.flyout-row.name-sort_order {
		display: none;
	}
}