/**
 * Product Filter — CSS
 *
 * Supports two modes:
 * 1. WOOF compat: .wpaic-filter-sidebar + .wpaic-filter-grid (separate elements)
 * 2. Native: .wpaic-filter (single container with sidebar + grid)
 *
 * Widget types: checkbox (chips), radio, slider, price range.
 * WOOF class aliases for YellowPencil compatibility.
 */

/* ---------------------------------------------------------------
 * 1. CSS CUSTOM PROPERTIES
 * --------------------------------------------------------------- */

:root {
	--filter-sidebar-width: 280px;
	--filter-gap: 20px;
	--filter-chip-bg: #fff;
	--filter-chip-border: #58a8ca36;
	--filter-chip-color: #333;
	--filter-chip-active-bg: #58a8ca;
	--filter-chip-active-color: #fff;
	--filter-chip-radius: 5px;
	--filter-chip-padding: 6px 14px;
	--filter-heading-size: 1rem;
	--filter-heading-weight: 500;
	--filter-btn-bg: #12283c;
	--filter-btn-color: #fff;
	--filter-btn-radius: 5px;
	--filter-reset-border: #bd9d61;
	--filter-loader-color: #58a8ca;
	--filter-overlay-z: 99999;
}

/* ---------------------------------------------------------------
 * 2. LAYOUT — Native mode (single container)
 * --------------------------------------------------------------- */

.wpaic-filter {
	position: relative;
}

.wpaic-filter__sidebar {
	display: none;
}

.wpaic-filter__products {
	width: 100%;
}

@media ( min-width: 768px ) {
	.wpaic-filter {
		display: grid;
		grid-template-columns: var(--filter-sidebar-width) 1fr;
		gap: var(--filter-gap);
		grid-template-rows: auto 1fr;
	}

	.wpaic-filter__sidebar {
		display: block;
		grid-row: 1 / -1;
	}

	.wpaic-filter__products {
		grid-column: 2;
	}

	.wpaic-filter__active-bar {
		grid-column: 2;
		grid-row: 1;
	}
}

/* ---------------------------------------------------------------
 * 3. WOOF COMPAT MODE — separate sidebar + grid
 * --------------------------------------------------------------- */

/* Sidebar in WOOF mode is always visible on desktop (inside VC column). */
.wpaic-filter-sidebar {
	position: relative;
}

/* Grid in WOOF mode fills its VC column. */
.wpaic-filter-grid {
	position: relative;
}

/* ---------------------------------------------------------------
 * 3a. AUTO-LAYOUT — when no WPBakery/Elementor grid wraps sidebar + grid.
 *     JS creates .wpaic-filter-layout wrapper around the pair.
 * --------------------------------------------------------------- */

.wpaic-filter-layout {
	position: relative;
}

@media ( min-width: 768px ) {
	.wpaic-filter-layout {
		display: grid;
		grid-template-columns: var(--filter-sidebar-width) 1fr;
		gap: var(--filter-gap);
		align-items: start;
	}

	/* Sidebar visible on desktop inside layout */
	.wpaic-filter-layout .wpaic-filter-sidebar {
		grid-column: 1;
		grid-row: 1 / -1;
	}

	.wpaic-filter-layout .wpaic-filter-grid {
		grid-column: 2;
	}
}

@media ( max-width: 767px ) {
	.wpaic-filter-layout .wpaic-filter-sidebar {
		display: none; /* Hidden on mobile, shown via overlay */
	}
}

/* ---------------------------------------------------------------
 * 4. MOBILE OVERLAY (both modes)
 * --------------------------------------------------------------- */

.wpaic-filter__mobile-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	background: var(--filter-btn-bg);
	color: var(--filter-btn-color);
	border: none;
	border-radius: var(--filter-btn-radius);
	font-size: 14px;
	cursor: pointer;
	margin-bottom: 12px;
}

.wpaic-filter__mobile-toggle::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v2H3V4zm4 7h14v2H7v-2zm-4 7h18v2H3v-2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v2H3V4zm4 7h14v2H7v-2zm-4 7h18v2H3v-2z'/%3E%3C/svg%3E");
}

@media ( min-width: 768px ) {
	.wpaic-filter__mobile-toggle {
		display: none !important;
	}
	.wpaic-filter__mobile-close {
		display: none !important;
	}
}

/* WOOF sidebar mobile overlay */
.wpaic-filter-sidebar--mobile-open {
	display: block !important;
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--filter-overlay-z);
	background: #fff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 60px 16px 80px;
}

/* Native sidebar mobile overlay */
.wpaic-filter--mobile-open .wpaic-filter__sidebar {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--filter-overlay-z);
	background: #fff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 60px 16px 80px;
}

.wpaic-filter__mobile-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px;
	height: 36px;
	border: none;
	background: #f0f0f0;
	border-radius: 50%;
	font-size: 22px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

body.wpaic-filter-overlay-open {
	overflow: hidden;
}

/* ---------------------------------------------------------------
 * 5. FACET SECTIONS — with WOOF class aliases
 * --------------------------------------------------------------- */

.wpaic-filter__section,
.woof_container {
	margin-bottom: 20px;
}

.wpaic-filter__section-title,
.woof_container h4 {
	font-size: var(--filter-heading-size);
	font-weight: var(--filter-heading-weight);
	margin: 0 0 10px;
	padding: 0;
	color: #333;
}

.wpaic-filter__list,
.woof_list,
.woof_list_checkbox {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wpaic-filter__item,
.woof_list_li {
	display: inline-flex;
}

/* ---------------------------------------------------------------
 * 6. CHECKBOX CHIPS — YellowPencil targets .woof_checkbox_label
 * --------------------------------------------------------------- */

.wpaic-filter__chip,
.woof_checkbox_label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: var(--filter-chip-padding);
	background: var(--filter-chip-bg);
	color: var(--filter-chip-color);
	border: 1px solid var(--filter-chip-border);
	border-radius: var(--filter-chip-radius);
	cursor: pointer;
	font-size: 13px;
	line-height: 1.3;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	user-select: none;
}

.wpaic-filter__chip:hover,
.woof_checkbox_label:hover {
	border-color: var(--filter-chip-active-bg);
}

.wpaic-filter__chip--active,
.woof_checkbox_label.woof_checkbox_label_selected {
	background: var(--filter-chip-active-bg);
	color: var(--filter-chip-active-color);
	border-color: var(--filter-chip-active-bg);
}

.wpaic-filter__count,
.woof_count {
	font-size: 11px;
	opacity: 0.7;
}

/* Hide counts container (WOOF compat) */
.woof_list_checkbox li div {
	display: none;
}

/* ---------------------------------------------------------------
 * 7. RADIO BUTTONS
 * --------------------------------------------------------------- */

.wpaic-filter__list--radio {
	flex-direction: column;
	gap: 4px;
}

.wpaic-filter__list--radio .wpaic-filter__item {
	display: flex;
	width: 100%;
}

.wpaic-filter__radio-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	cursor: pointer;
	font-size: 13px;
	color: #333;
	user-select: none;
	width: 100%;
}

.wpaic-filter__radio-item:hover {
	color: var(--filter-chip-active-bg);
}

.wpaic-filter__radio-item--active {
	font-weight: 500;
}

.wpaic-filter__radio-circle {
	width: 16px;
	height: 16px;
	min-width: 16px;
	border: 2px solid #ccc;
	border-radius: 50%;
	position: relative;
	transition: border-color 0.15s;
}

.wpaic-filter__radio-circle.is-checked {
	border-color: var(--filter-chip-active-bg);
}

.wpaic-filter__radio-circle.is-checked::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--filter-chip-active-bg);
}

.wpaic-filter__radio-label {
	flex: 1;
}

/* ---------------------------------------------------------------
 * 8. SLIDER / RANGE INPUTS
 * --------------------------------------------------------------- */

.wpaic-filter__slider-inputs,
.wpaic-filter__price-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpaic-filter__slider-min,
.wpaic-filter__slider-max,
.wpaic-filter__price-min,
.wpaic-filter__price-max {
	width: 80px;
	padding: 6px 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
}

.wpaic-filter__slider-sep,
.wpaic-filter__price-sep {
	color: #999;
}

.wpaic-filter__slider-apply,
.wpaic-filter__price-apply {
	padding: 6px 12px;
	background: var(--filter-btn-bg);
	color: var(--filter-btn-color);
	border: none;
	border-radius: var(--filter-btn-radius);
	cursor: pointer;
	font-size: 13px;
}

/* ---------------------------------------------------------------
 * 9. BUTTONS — WOOF compat
 * --------------------------------------------------------------- */

.wpaic-filter__submit,
.woof_submit_search_form {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	background: var(--filter-btn-bg);
	color: var(--filter-btn-color);
	border: none;
	border-radius: var(--filter-btn-radius);
	font-size: 14px;
	cursor: pointer;
	margin-top: 12px;
	width: 100%;
}

.wpaic-filter__reset,
.woof_reset_button_2 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	background: transparent;
	color: #666;
	border: 1px solid var(--filter-reset-border);
	border-radius: var(--filter-btn-radius);
	font-size: 13px;
	cursor: pointer;
	margin-top: 8px;
	width: 100%;
}

.wpaic-filter__reset:hover,
.woof_reset_button_2:hover {
	background: #f5f5f5;
}

/* ---------------------------------------------------------------
 * 10. ACTIVE FILTERS BAR
 * --------------------------------------------------------------- */

.wpaic-filter__active-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.wpaic-filter__active-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	background: #f0f6f9;
	border: 1px solid #d0e4ed;
	border-radius: 20px;
	font-size: 12px;
	color: #333;
}

.wpaic-filter__active-remove {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	padding: 0 0 0 4px;
	color: #999;
}

.wpaic-filter__active-remove:hover {
	color: #e44;
}

/* ---------------------------------------------------------------
 * 11. LOADER
 * --------------------------------------------------------------- */

.wpaic-filter__loader {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 0;
}

.wpaic-filter__spinner {
	width: 32px;
	height: 32px;
	border: 3px solid #eee;
	border-top-color: var(--filter-loader-color);
	border-radius: 50%;
	animation: wpaic-filter-spin 0.7s linear infinite;
}

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

/* ---------------------------------------------------------------
 * 12. NO RESULTS
 * --------------------------------------------------------------- */

.wpaic-filter__no-results {
	text-align: center;
	padding: 40px 20px;
	color: #666;
	font-size: 14px;
}

/* ---------------------------------------------------------------
 * 13. PAGINATION
 * --------------------------------------------------------------- */

.wpaic-filter__pager .page-numbers {
	display: flex;
	gap: 4px;
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
	justify-content: center;
}

.wpaic-filter__pager .page-numbers li {
	display: inline-flex;
}

.wpaic-filter__pager a.page-numbers,
.wpaic-filter__pager span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
	color: #333;
	text-decoration: none;
	cursor: pointer;
}

.wpaic-filter__pager a.page-numbers:hover {
	background: #f5f5f5;
	border-color: #bbb;
}

.wpaic-filter__pager span.page-numbers.current {
	background: var(--filter-btn-bg);
	color: var(--filter-btn-color);
	border-color: var(--filter-btn-bg);
}

/* Load More button (replaces numbered pagination) */
.wpaic-filter__pagination .wpaic-load-more-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 40px 0 20px;
	width: 100%;
}

.wpaic-filter__pagination .wpaic-load-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 400px;
	padding: 16px 40px;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #fff;
	background: var(--filter-btn-bg, #333);
	border: none;
	border-radius: var(--filter-btn-radius, 6px);
	cursor: pointer;
	transition: background 0.2s, opacity 0.2s, transform 0.1s;
}

.wpaic-filter__pagination .wpaic-load-more-btn:hover {
	background: #555;
	transform: translateY(-1px);
}

.wpaic-filter__pagination .wpaic-load-more-btn:active {
	transform: translateY(0);
}

.wpaic-filter__pagination .wpaic-load-more-btn--loading {
	opacity: 0.7;
	pointer-events: none;
}

.wpaic-filter__pagination .wpaic-load-more-btn--loading::after {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-left: 10px;
	border: 2px solid rgba(255,255,255,0.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: wpaic-lm-spin 0.6s linear infinite;
}

.wpaic-filter__pagination .wpaic-load-more-btn--done {
	opacity: 0.5;
	cursor: default;
	background: #999;
}

.wpaic-filter__pagination .wpaic-load-more-count {
	font-size: 14px;
	color: #888;
}

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

/* ---------------------------------------------------------------
 * 14. GRID / LIST VIEWS (WOOF product grid)
 * --------------------------------------------------------------- */

/* Grid on .products wrapper (if present) and .wpaic-filter__grid directly (JS injects articles here). */
.wpaic-filter-grid .products,
.wpaic-filter__products .products,
.wpaic-filter__grid {
	display: grid;
	gap: var(--filter-gap);
}

.wpaic-filter-grid[data-columns="2"] .products,
.wpaic-filter__products[data-columns="2"] .products,
.wpaic-filter-grid[data-columns="2"] .wpaic-filter__grid { grid-template-columns: repeat( 2, 1fr ); }
.wpaic-filter-grid[data-columns="3"] .products,
.wpaic-filter__products[data-columns="3"] .products,
.wpaic-filter-grid[data-columns="3"] .wpaic-filter__grid { grid-template-columns: repeat( 3, 1fr ); }
.wpaic-filter-grid[data-columns="4"] .products,
.wpaic-filter__products[data-columns="4"] .products,
.wpaic-filter-grid[data-columns="4"] .wpaic-filter__grid { grid-template-columns: repeat( 4, 1fr ); }

/* Default 4 columns when no data-columns specified. */
.wpaic-filter__grid { grid-template-columns: repeat( 4, 1fr ); }

@media ( max-width: 767px ) {
	.wpaic-filter-grid .products,
	.wpaic-filter__products .products,
	.wpaic-filter__grid {
		grid-template-columns: repeat( 2, 1fr ) !important;
		gap: 10px;
	}
}

@media ( max-width: 480px ) {
	.wpaic-filter-grid .products,
	.wpaic-filter__products .products,
	.wpaic-filter__grid {
		grid-template-columns: 1fr !important;
	}
}

/* Product card sizing inside grid. */
.wpaic-filter__grid article {
	overflow: hidden;
}

.wpaic-filter__grid article .woo-buttons-on-img {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 4;
}

.wpaic-filter__grid article .woo-buttons-on-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.wpaic-filter__grid article figcaption {
	padding: 8px 4px;
}

.wpaic-filter__grid article h4 {
	font-size: 0.85rem;
	line-height: 1.3;
	margin: 0 0 4px;
}

.wpaic-filter__grid article h4 a {
	color: inherit;
	text-decoration: none;
}

.wpaic-filter__grid article .price {
	font-size: 0.9rem;
	font-weight: 600;
}

.wpaic-filter__grid article .woo-buttons-on-img-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 8px;
	background: rgba(255,255,255,0.9);
	text-align: center;
	opacity: 0;
	transition: opacity 0.2s;
}

.wpaic-filter__grid article:hover .woo-buttons-on-img-overlay {
	opacity: 1;
}

/* ---------------------------------------------------------------
 * 15. LOCKED PREFILTER CHIPS
 * --------------------------------------------------------------- */

.wpaic-filter__chip--locked {
	cursor: default;
	opacity: 0.85;
}

.wpaic-filter__section--prefilter .wpaic-filter__section-title {
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * 16. THEME COMPAT — dt-the7 description-on-hover
 * --------------------------------------------------------------- */

/* Force product info visible in filter grid (theme hides on hover). */
.wpaic-filter-grid .product .woocom-project .woo-list-container,
.wpaic-filter-grid .product .woocom-project figcaption,
.wpaic-filter-grid .product.description-off .woo-list-container,
.wpaic-filter__grid .product .woocom-project .woo-list-container,
.wpaic-filter__grid .product .woocom-project figcaption,
.wpaic-filter__grid .product.description-off .woo-list-container {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	transform: none !important;
}

/* Ensure product images are visible after AJAX lazy-load fix. */
.wpaic-filter-grid .product img,
.wpaic-filter__grid .product img {
	max-width: 100%;
	height: auto;
}