/**
 * Loop Grid AJAX Filters — filter bar, loading state, and the utility class
 * used to hide an entire Loop Grid's section (heading included) when it has
 * no matching products for the current filter selection.
 */

.lgaf-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5em 2em;
	margin: 0 0 2em;
	padding: 0;
	border: 0;
}

/* .lgaf-filters__group is a <div role="group">, not a <fieldset> — plain
   divs carry no special browser rendering rules, unlike <legend> inside
   <fieldset>, which is specified to straddle the fieldset's top border and
   keeps doing so in most browsers even when reset via CSS (display, margin,
   position, etc. don't override that browser-level layout behaviour). The
   `!important` on box-model properties here is a defensive measure against
   WooCommerce's own CSS, which applies generic `border`/`padding` rules to
   several plain elements inside its `.woocommerce` content wrapper (which
   this filter bar normally sits inside). */
.lgaf-filters__group {
	display: flex !important;
	flex-direction: column !important;
	gap: 0.4em;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	min-width: 10em;
}

.lgaf-filters__label {
	display: block;
	margin: 0 0 0.3em;
	font-weight: 600;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.lgaf-filters__option {
	display: flex;
	align-items: center;
	gap: 0.5em;
	cursor: pointer;
	font-size: 0.95em;
}

.lgaf-filters__checkbox {
	margin: 0;
}

.lgaf-filters__clear {
	align-self: flex-end;
	background: none;
	border: 1px solid currentColor;
	border-radius: 3px;
	padding: 0.5em 1em;
	cursor: pointer;
	font-size: 0.9em;
}

.lgaf-filters__clear:hover,
.lgaf-filters__clear:focus-visible {
	opacity: 0.75;
}

/* An option that can't return any product alongside the current selection.
   The input is also set to disabled in JS — this is purely the visual cue. */
.lgaf-filters__option--unavailable {
	opacity: 0.35;
	cursor: not-allowed;
}

.lgaf-filters__option--unavailable input {
	cursor: not-allowed;
}

/* The status line stays in the DOM as an aria-live region so screen readers
   are still told when results update, but it's visually hidden: the loading
   state is now shown as a spinner over the products themselves, which is
   where people are actually looking. */
.lgaf-filters__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Applied to a Loop Grid's scope element while a request for it is in
   flight. The content is washed out by a separate overlay element rather
   than by `opacity` on the section itself, because opacity would fade the
   spinner along with everything else. */
.lgaf-loading {
	position: relative;
	pointer-events: none;
	min-height: 8em;
}

.lgaf-loading__overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 5;
	background: rgba( 255, 255, 255, 0.7 );
	text-align: center;
}

/* `sticky` is doing the important work here. A Loop Grid showing a full
   catalogue can be thousands of pixels tall, and a spinner centred on the
   grid (top: 50%) then renders far below the fold — invisible to someone
   sitting at the top of the page where the filters are. Sticky keeps the
   spinner parked in the viewport for as long as any part of the grid is
   on screen, whatever the grid's height. */
.lgaf-loading__spinner {
	position: sticky;
	top: 35vh;
	display: inline-block;
	width: 2.75em;
	height: 2.75em;
	margin: 2.5em 0;
	border: 3px solid rgba( 0, 0, 0, 0.15 );
	border-top-color: currentColor;
	border-radius: 50%;
	animation: lgaf-spin 0.8s linear infinite;
}

@keyframes lgaf-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Users who've asked for reduced motion get a static ring rather than a
   spinning one — the dimmed overlay still signals that work is happening. */
@media ( prefers-reduced-motion: reduce ) {
	.lgaf-loading__spinner {
		animation: none;
	}
}

/* Applied to a Loop Grid's scope element when it has zero matching products
   for the current filter selection — hides the heading and the grid together. */
.lgaf-hidden {
	display: none !important;
}

/* Applied to an individual product card that doesn't match the current
   filters, when filtering happens in the browser rather than via a server
   re-render. `!important` because Elementor's own grid CSS sets `display`
   on loop items. */
.lgaf-item-hidden {
	display: none !important;
}

@media ( max-width: 767px ) {
	.lgaf-filters {
		flex-direction: column;
		gap: 1em;
	}

	.lgaf-filters__clear {
		align-self: flex-start;
	}
}