/*
 * WPM Filters – frontend.
 * Fonts, sizes and colors come from the website: everything inherits from the
 * surrounding text, and the apply/reset buttons use the theme's button classes.
 * Optional overrides via Algemeen > Kleuren, Elementor, or these variables on .wpmf:
 *   --wpmf-accent  checked state, slider, focus   (default: text color)
 *   --wpmf-border  lines, boxes                   (default: text color at 25%)
 *   --wpmf-radius  corner radius of boxes         (default: 2px)
 *   --wpmf-bg      background of the mobile panel (default: page background)
 */
.wpmf {
	--wpmf-accent-v: var(--wpmf-accent, currentColor);
	--wpmf-border-v: var(--wpmf-border, color-mix(in srgb, currentColor 25%, transparent));
	--wpmf-muted-v: color-mix(in srgb, currentColor 65%, transparent);
	--wpmf-radius-v: var(--wpmf-radius, 2px);
	--wpmf-gap: 0.75rem;
	position: relative;
}
.wpmf *, .wpmf *::before, .wpmf *::after { box-sizing: border-box; }
.wpmf .screen-reader-text, .wpmf-active .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* Plugin UI controls look like the surrounding text, not like theme buttons. */
.wpmf .wpmf-toggle, .wpmf .wpmf-more, .wpmf .wpmf-close, .wpmf .wpmf-open {
	font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit;
	background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; margin: 0; min-height: 0; cursor: pointer;
}
.wpmf .wpmf-toggle:focus-visible, .wpmf .wpmf-more:focus-visible, .wpmf .wpmf-close:focus-visible, .wpmf .wpmf-open:focus-visible {
	outline: 2px solid var(--wpmf-accent-v); outline-offset: 2px;
}

/* Open button (mobile) */
.wpmf .wpmf-open { display: none; align-items: center; gap: .4em; padding: .6em 1.1em; border: 1px solid var(--wpmf-border-v); border-radius: var(--wpmf-radius-v); }
.wpmf .wpmf-close { display: none; width: 2.75rem; height: 2.75rem; font-size: 1.75em; line-height: 1; align-items: center; justify-content: center; }

/* Panel heading: only inside the offcanvas */
.wpmf-head { display: none; }
.wpmf-drawer .wpmf-head { display: block; }
.wpmf-head p { margin: 0; }

/* Groups */
.wpmf-form { margin: 0; }
.wpmf-group { border: 0; border-top: 1px solid var(--wpmf-border-v); margin: 0; padding: 1.1em 0; min-width: 0; }
.wpmf-group:first-of-type { border-top: 0; padding-top: .25em; }
.wpmf-legend { padding: 0; margin: 0 0 .6em; width: 100%; float: left; font: inherit; color: inherit; }
.wpmf-legend + * { clear: both; }
.wpmf .wpmf-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; text-align: left; }
.wpmf .wpmf-toggle::after {
	content: ""; flex: none; width: .45em; height: .45em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-25%); transition: transform .15s;
}
.wpmf .wpmf-toggle[aria-expanded="false"]::after { transform: rotate(-135deg); }
.wpmf-body { clear: both; padding-top: .25em; }
.wpmf-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em 1.5em; }
.wpmf-item { margin: 0; padding: 0; }
.wpmf-item[hidden] { display: none; }
.wpmf-depth-1 { padding-left: 1.4em; }
.wpmf-depth-2 { padding-left: 2.8em; }
.wpmf-depth-3 { padding-left: 4.2em; }

/* Option row: real input, visually hidden, with a mark in the text color */
.wpmf-opt { display: flex; align-items: center; gap: .7em; cursor: pointer; position: relative; margin: 0; font: inherit; color: inherit; }
.wpmf-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wpmf-mark {
	flex: none; width: 1.05em; height: 1.05em; border: 1px solid var(--wpmf-muted-v); border-radius: var(--wpmf-radius-v);
	display: inline-grid; place-items: center;
}
.wpmf-mark::after { content: ""; width: 70%; height: 70%; background: var(--wpmf-accent-v); transform: scale(0); transition: transform .12s; border-radius: inherit; }
.wpmf-opt input[type="radio"] + .wpmf-mark { border-radius: 50%; }
.wpmf-opt input:checked + .wpmf-mark { border-color: var(--wpmf-accent-v); }
.wpmf-opt input:checked + .wpmf-mark::after { transform: scale(1); }
.wpmf-opt input:focus-visible + .wpmf-mark,
.wpmf-opt input:focus-visible ~ .wpmf-img,
.wpmf-switch input:focus-visible + .wpmf-switch-ui { outline: 2px solid var(--wpmf-accent-v); outline-offset: 2px; }
.wpmf-opt.is-disabled { opacity: .45; cursor: not-allowed; }
.wpmf-count { color: var(--wpmf-muted-v); font-size: .9em; }

/* Swatch */
.wpmf-swatch { flex: none; width: 1.5em; height: 1.5em; border-radius: 50%; border: 1px solid var(--wpmf-border-v); background: color-mix(in srgb, currentColor 10%, transparent); }
.wpmf-opt input:checked ~ .wpmf-swatch { outline: 2px solid var(--wpmf-accent-v); outline-offset: 2px; }

/* Buttons. Optional: --wpmf-btn-bg (background), --wpmf-btn-on (text on the active button). */
.wpmf-type-buttons .wpmf-options { display: flex; flex-wrap: wrap; gap: .75em; }
.wpmf-type-buttons .wpmf-mark { display: none; }
.wpmf-type-buttons .wpmf-opt {
	justify-content: center; gap: .4em; min-height: 2.75em; padding: .6em 1.2em; border: 1px solid transparent; border-radius: var(--wpmf-radius-v);
	background: var(--wpmf-btn-bg, color-mix(in srgb, currentColor 6%, transparent)); transition: background .15s, color .15s, border-color .15s;
}
.wpmf-type-buttons .wpmf-opt:hover { border-color: var(--wpmf-border-v); }
.wpmf-type-buttons .wpmf-opt:is(.is-selected, :has(input:checked)) { background: var(--wpmf-accent-v); border-color: var(--wpmf-accent-v); }
.wpmf-type-buttons .wpmf-opt:is(.is-selected, :has(input:checked)) > :is(.wpmf-label, .wpmf-count) { color: var(--wpmf-btn-on, var(--wpmf-bg, Canvas)); }
.wpmf-type-buttons .wpmf-opt:has(input:focus-visible) { outline: 2px solid var(--wpmf-accent-v); outline-offset: 2px; }
.wpmf-type-buttons .wpmf-opt.is-disabled:hover { border-color: transparent; }

/* Image options */
.wpmf-img { flex: none; width: var(--wpmf-img-size, 56px); height: var(--wpmf-img-size, 56px); display: inline-grid; place-items: center; overflow: hidden; background: color-mix(in srgb, currentColor 8%, transparent); position: relative; }
.wpmf-img img, .wpmf-img-el { width: 100%; height: 100%; object-fit: cover; display: block; }
.wpmf-img-fallback { font-size: .8em; color: var(--wpmf-muted-v); }
.wpmf-img-rounded .wpmf-img { border-radius: 8px; }
.wpmf-img-circle .wpmf-img { border-radius: 50%; }
.wpmf-type-image .wpmf-opt input:checked ~ .wpmf-img { outline: 2px solid var(--wpmf-accent-v); outline-offset: 2px; }
/* Label below / tooltip / hidden: tiles in a grid, the mark becomes a corner check */
.wpmf-imglabel-below .wpmf-options, .wpmf-imglabel-tooltip .wpmf-options, .wpmf-imglabel-hidden .wpmf-options {
	grid-template-columns: repeat(auto-fill, minmax(4.5em, 1fr));
}
.wpmf-imglabel-below .wpmf-opt, .wpmf-imglabel-tooltip .wpmf-opt, .wpmf-imglabel-hidden .wpmf-opt { flex-direction: column; gap: .35em; text-align: center; }
.wpmf-imglabel-below .wpmf-mark, .wpmf-imglabel-tooltip .wpmf-mark, .wpmf-imglabel-hidden .wpmf-mark {
	position: absolute; top: .3em; right: .3em; z-index: 1; background: var(--wpmf-bg, Canvas); width: 1.1em; height: 1.1em; opacity: 0;
}
.wpmf-imglabel-below .wpmf-opt input:checked + .wpmf-mark,
.wpmf-imglabel-tooltip .wpmf-opt input:checked + .wpmf-mark,
.wpmf-imglabel-hidden .wpmf-opt input:checked + .wpmf-mark { opacity: 1; }
.wpmf-imglabel-below .wpmf-count { display: block; }

/* Dropdown and number fields: the theme's form styles apply; only width is set. */
.wpmf-select { width: 100%; max-width: 100%; }
.wpmf-select[multiple] { min-height: 8em; }

/* Toggle */
.wpmf-switch { display: flex; align-items: center; gap: .7em; cursor: pointer; position: relative; margin: 0; font: inherit; color: inherit; }
.wpmf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wpmf-switch-ui { flex: none; width: 2.3em; height: 1.3em; border-radius: 1em; background: var(--wpmf-border-v); position: relative; transition: background .15s; }
.wpmf-switch-ui::after { content: ""; position: absolute; top: .15em; left: .15em; width: 1em; height: 1em; border-radius: 50%; background: var(--wpmf-bg, Canvas); transition: transform .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.wpmf-switch input:checked + .wpmf-switch-ui { background: var(--wpmf-accent-v); }
.wpmf-switch input:checked + .wpmf-switch-ui::after { transform: translateX(1em); }

/* Range */
.wpmf-slider { position: relative; height: 1.5em; margin: .25em .5em .75em; }
.wpmf-slider::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--wpmf-border-v); border-radius: 2px; }
.wpmf-slider-fill { position: absolute; top: 50%; height: 3px; margin-top: -1.5px; background: var(--wpmf-accent-v); left: 0; right: 0; }
.wpmf-slider input[type="range"] {
	position: absolute; left: -.5em; width: calc(100% + 1em); top: 0; height: 100%; margin: 0; padding: 0; border: 0; background: none;
	pointer-events: none; -webkit-appearance: none; appearance: none; color: var(--wpmf-accent-v);
}
.wpmf-slider input[type="range"]::-webkit-slider-thumb {
	pointer-events: auto; -webkit-appearance: none; width: 1.1em; height: 1.1em; border-radius: 50%;
	background: var(--wpmf-bg, Canvas); border: 2px solid currentColor; cursor: grab;
}
.wpmf-slider input[type="range"]::-moz-range-thumb {
	pointer-events: auto; width: 1em; height: 1em; border-radius: 50%; background: var(--wpmf-bg, Canvas); border: 2px solid currentColor; cursor: grab;
}
.wpmf-slider input[type="range"]::-webkit-slider-runnable-track { background: none; }
.wpmf-slider input[type="range"]::-moz-range-track { background: none; }
.wpmf-range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--wpmf-gap); }
.wpmf-range-inputs label { display: grid; gap: .25em; margin: 0; }
.wpmf-range-label { color: var(--wpmf-muted-v); font-size: .9em; }
.wpmf-range-inputs input { width: 100%; max-width: 100%; }

/* More link, footer buttons (styled by the theme) */
.wpmf .wpmf-more { margin-top: .6em; text-decoration: underline; }
.wpmf-foot { display: grid; gap: .5em; margin-top: 1em; }
.wpmf .wpmf-reset, .wpmf .wpmf-apply { display: block; width: 100%; text-align: center; margin: 0; }
.wpmf .wpmf-reset[hidden] { display: none; }
.wpmf.wpmf-js.wpmf-mode-instant .wpmf-apply { display: none; }
.wpmf-empty { color: var(--wpmf-muted-v); margin: 1em 0 0; }
.wpmf-busy .wpmf-form { opacity: .6; transition: opacity .15s; }

/* Horizontal layout (not inside an offcanvas panel) */
.wpmf-layout-horizontal:not(.wpmf-drawer) .wpmf-form { display: flex; flex-wrap: wrap; gap: 0 2em; align-items: flex-start; }
.wpmf-layout-horizontal:not(.wpmf-drawer) .wpmf-group { border-top: 0; flex: 1 1 12em; padding: .25em 0; }
.wpmf-layout-horizontal:not(.wpmf-drawer) .wpmf-foot { display: flex; justify-content: flex-start; }
.wpmf-layout-horizontal:not(.wpmf-drawer) .wpmf-reset, .wpmf-layout-horizontal:not(.wpmf-drawer) .wpmf-apply { width: auto; }

/* Offcanvas: JS sets .wpmf-drawer per block (offcanvas="mobile|always|never"). */
.wpmf.wpmf-drawer .wpmf-open { display: inline-flex; }
.wpmf-drawer .wpmf-panel {
	position: fixed; inset: 0 0 0 auto; width: min(26rem, 100%); z-index: 99999; background: var(--wpmf-bg, Canvas);
	display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden;
	padding: max(3.5rem, calc(env(safe-area-inset-top) + 3rem)) 1.5rem 0;
}
.wpmf-drawer.wpmf-anim .wpmf-panel { transition: transform .25s ease, visibility 0s .25s; }
.wpmf-drawer.is-open .wpmf-panel { transform: none; visibility: visible; }
.wpmf-drawer.wpmf-anim.is-open .wpmf-panel { transition: transform .25s ease; }
.wpmf.wpmf-drawer .wpmf-close { display: inline-flex; position: absolute; top: max(.5rem, env(safe-area-inset-top)); right: .75rem; }
.wpmf-drawer .wpmf-form { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.wpmf-drawer .wpmf-foot { padding: 1rem 0 max(1rem, env(safe-area-inset-bottom)); margin: 0; background: var(--wpmf-bg, Canvas); }
.wpmf.wpmf-drawer.wpmf-mode-instant .wpmf-apply { display: block; }
.wpmf-drawer .wpmf-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 99998; }
.wpmf-drawer .wpmf-backdrop[hidden], .wpmf:not(.wpmf-drawer) .wpmf-backdrop { display: none; }
html.wpmf-lock, html.wpmf-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.wpmf-drawer .wpmf-panel, .wpmf-mark::after, .wpmf-switch-ui, .wpmf-switch-ui::after, .wpmf .wpmf-toggle::after { transition: none !important; }
}

/* Grid loading state */
.wpmf-loading { opacity: .5; transition: opacity .15s; pointer-events: none; }

/* Active chips */
.wpmf-active { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin: 0 0 1em; }
.wpmf-active[hidden] { display: none; }
.wpmf-chips { display: flex; flex-wrap: wrap; gap: .5em; list-style: none; margin: 0; padding: 0; }
.wpmf-chips li { margin: 0; }
.wpmf-chip {
	display: inline-flex; align-items: center; gap: .45em; padding: .3em .75em; text-decoration: none; color: inherit; font-size: .9em;
	border: 1px solid var(--wpmf-border, color-mix(in srgb, currentColor 25%, transparent)); border-radius: 2em;
}
.wpmf-chip:hover, .wpmf-chip:focus-visible { border-color: currentColor; }
.wpmf-chip-x { font-size: 1.15em; line-height: 1; }
.wpmf-chip-reset { font-size: .9em; color: inherit; }