/**
 * Ultimate Content Filter — frontend styles.
 *
 * Deliberately small: anything a site owner is likely to change lives in the
 * widget's Style tab, not here. What remains are the structural rules and the
 * accessibility defaults (focus ring, hit area, reduced motion).
 *
 * Every selector appears exactly once. An earlier version had grown three
 * duplicate blocks through successive edits, and the later copy of
 * .ucf-options-box silently won over the newer one — same specificity, later
 * in the sheet — which is what kept the collapsed panel permanently open.
 */

/* Before everything else: the browser's own [hidden] rule is weaker than any
   class selector here, so .ucf-active { display: flex } would keep a hidden
   element on screen. */
.ucf-filter[hidden],
.ucf-active[hidden],
.ucf-apply-wrap[hidden],
.e-loop__load-more[hidden] {
	display: none !important;
}

/* ------------------------------------------------------------- structure */

/* Label position and visibility come from custom properties rather than a
   class: a class is written once at render time and cannot differ per
   breakpoint, while Elementor emits these properties inside its own media
   queries. The defaults are the "label above" case. */
.ucf-fieldset,
.ucf-filter--select,
.ucf-filter--search,
.ucf-filter--sort {
	display: flex;
	flex-direction: var(--ucf-label-dir, column);
	align-items: var(--ucf-label-items, stretch);
	flex-wrap: wrap;
	gap: 0 0.75em;
}

.ucf-fieldset {
	position: relative;
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.ucf-legend {
	padding: 0;
	font-weight: 600;
	flex: var(--ucf-label-flex, 0 0 auto);
	position: var(--ucf-lbl-pos, static);
	width: var(--ucf-lbl-w, auto);
	height: var(--ucf-lbl-h, auto);
	overflow: var(--ucf-lbl-ovf, visible);
	clip-path: var(--ucf-lbl-clip, none);
	white-space: var(--ucf-lbl-ws, normal);
	margin: var(--ucf-lbl-m, 0 0 0.5em);
}

/* In a column the flex BASIS is a height, so the growing value belongs to
   the row case only — hence the property rather than a fixed value. */
.ucf-fieldset .ucf-options-box,
.ucf-filter--select .ucf-select,
.ucf-filter--sort .ucf-select,
.ucf-filter--search .ucf-search-field {
	flex: var(--ucf-field-flex, 0 1 auto);
	min-width: 0;
}

.ucf-options-box {
	min-width: 0;
}

.ucf-options {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 0.35em 1em;
}

/* Options running on and wrapping, instead of a fixed grid. */
.ucf-filter--flow .ucf-options {
	display: flex;
	flex-wrap: wrap;
}

.ucf-option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	min-height: 24px;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.ucf-option input {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	margin: 0;
}

/* ------------------------------------------------- collapsed presentation */

/* One class on the wrapper decides the mode, set once when the widget
   renders. No CSS custom properties and no JavaScript in the switch, so the
   editor preview and the site cannot drift apart. The panel holds the REAL
   checkboxes; nothing is mirrored, so the filter state lives in one place. */
/* Looks like the sort dropdown next to it. The element is a <button>, and the
   Elementor kit styles every button (accent background, heading font, its own
   hover colour), with rules like `.elementor-kit-N button` (0,1,1) and
   `.elementor-kit-N button:hover` (0,2,1). These selectors are one step
   stronger in each state. The widget's "Field" style controls are stronger
   still, so a value set there always wins. */
.ucf-filter .ucf-disclosure,
.ucf-filter .ucf-disclosure:hover,
.ucf-filter .ucf-disclosure:focus {
	background-color: transparent;
	background-image: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	font-style: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	border: 1px solid currentColor;
	border-radius: 2px;
}

.ucf-filter .ucf-disclosure {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	width: 100%;
	min-height: 2.5em;
	padding: 0.4em 0.6em;
	text-align: left;
	cursor: pointer;
}

.ucf-disclosure-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ucf-disclosure-arrow {
	flex: 0 0 auto;
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-0.15em) rotate(45deg);
}

.ucf-disclosure[aria-expanded="true"] .ucf-disclosure-arrow {
	transform: translateY(0.1em) rotate(-135deg);
}

/* Collapsed: hidden until the button opens it, then floating above the page
   instead of pushing everything below it down. */
.ucf-filter--collapsed .ucf-options-box {
	display: none;
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 18em;
	overflow-y: auto;
	padding: 0.75em;
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 2px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

.ucf-filter--collapsed .ucf-fieldset.ucf-open .ucf-options-box {
	display: block;
}

/* ------------------------------------------------------- fields and search */

.ucf-select,
.ucf-search-input {
	width: 100%;
	max-width: 100%;
	min-height: 2.5em;
	padding: 0.4em 0.6em;
	font: inherit;
	color: inherit;
	background-color: transparent;
	border: 1px solid currentColor;
	border-radius: 2px;
	box-sizing: border-box;
}

/* "Inside" overlays the button on the field's own padding, "next to" makes
   both flex items of one row. */
.ucf-search-field {
	display: flex;
	align-items: stretch;
	gap: 0.5em;
	min-width: 0;
}

.ucf-search-field--inside {
	position: relative;
	gap: 0;
}

/* Inside the wrapper the input is the growing part; width:100% from the
   shared field rule would push the button out of the row. */
.ucf-search-field .ucf-search-input {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
}

.ucf-search-field--inside .ucf-search-input {
	padding-right: 2.75em;
}

.ucf-search-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5em;
	min-width: 24px;
	min-height: 24px;
	padding: 0 0.5em;
	font: inherit;
	line-height: 1;
	color: inherit;
	background-color: transparent;
	border: 1px solid currentColor;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ucf-search-field--inside .ucf-search-button {
	position: absolute;
	top: 2px;
	right: 2px;
	bottom: 2px;
	border: 0;
	background-color: transparent;
}

.ucf-search-button svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ----------------------------------------------------- chips and buttons */

.ucf-active {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75em;
}

.ucf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.ucf-chip,
.ucf-reset,
.ucf-apply {
	font: inherit;
	cursor: pointer;
	min-height: 24px;
	padding: 0.35em 0.75em;
	border: 1px solid currentColor;
	border-radius: 2px;
	background-color: transparent;
	color: inherit;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ucf-chip::after {
	content: " ×";
	font-weight: 700;
}

.ucf-reset {
	border-style: dashed;
}

/* --------------------------------------------------------- accessibility */

/* A theme's accent colour rarely has enough contrast on a dark panel, so the
   focus ring is drawn in the current text colour with an offset. */
.ucf-filter .ucf-disclosure:focus-visible,
.ucf-option input:focus-visible,
.ucf-select:focus-visible,
.ucf-search-input:focus-visible,
.ucf-search-button:focus-visible,
.ucf-chip:focus-visible,
.ucf-reset:focus-visible,
.ucf-apply:focus-visible {
	outline: 2px solid var(--ucf-focus, currentColor);
	outline-offset: 2px;
}

.ucf-visually-hidden,
.ucf-status {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* After the rule above, same reason as the panel: same specificity, later
   wins. */
.ucf-status--visible {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	font-size: 0.875em;
}

.ucf-notice {
	padding: 0.75em 1em;
	border: 1px dashed currentColor;
	font-size: 0.875em;
	opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
	.ucf-chip,
	.ucf-reset,
	.ucf-apply,
	.ucf-search-button {
		transition: none;
	}
}