/* =========================================================================
   WPPF Product Filter — Frontend Styles
   All selectors are prefixed with `.wppf-` to stay collision-free with
   themes and other plugins.
   ========================================================================= */

.wppf-filter-widget { --wppf-accent: #1a5f5a;
	--wppf-accent-contrast: #ffffff;
	--wppf-border: #e5e7eb;
	--wppf-text: #1f2937;
	--wppf-muted: #6b7280;
	--wppf-bg: #ffffff;
	--wppf-radius: 12px;
	font-family: inherit;
	color: var( --wppf-text );
	position: relative;
	max-width: 100%;
	overflow-x: hidden;
}

.wppf-filter-widget.wppf-preset-sharp { --wppf-radius: 2px; }
.wppf-filter-widget.wppf-preset-pill  { --wppf-radius: 999px; }

.wppf-filter-widget * { box-sizing: border-box; }

/* ---------- Mobile toggle button ---------- */
.wppf-mobile-toggle {
	display: none !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px;
	background: var( --wppf-bg ) !important;
	border: none !important;
	box-shadow: 0 1px 3px rgba( 16, 24, 40, .07 );
	border-radius: var( --wppf-radius );
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: .08em;
	cursor: pointer;
	color: var( --wppf-text ) !important;
	text-transform: uppercase;
}
.wppf-mobile-toggle:hover,
.wppf-mobile-toggle:focus,
.wppf-mobile-toggle:active {
	outline: none;
	box-shadow: 0 1px 3px rgba( 16, 24, 40, .07 );
}
.wppf-mobile-toggle svg { flex: none; color: var( --wppf-accent ); }

.wppf-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba( 17, 24, 39, .5 );
	z-index: 100000;
}

/* ---------- Panel ---------- */
.wppf-panel {
	background: #f7f6f2;
	border-radius: calc( var( --wppf-radius ) + 4px );
	padding: 16px;
}

.wppf-panel-header { display: none; }

.wppf-panel-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var( --wppf-bg );
	border-radius: var( --wppf-radius );
	box-shadow: 0 1px 3px rgba( 16, 24, 40, .07 );
	padding: 14px;
	margin-bottom: 12px;
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --wppf-text );
}
.wppf-panel-label svg { color: var( --wppf-accent ); }

.wppf-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}
.wppf-active-chips[hidden] { display: none; }

.wppf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #f2f7f6 !important;
	background: color-mix( in srgb, var( --wppf-accent ) 10%, white ) !important;
	color: var( --wppf-accent ) !important;
	border-style: solid;
	border-width: 1px;
	border-color: #cfe3e0 !important;
	border-color: color-mix( in srgb, var( --wppf-accent ) 35%, white ) !important;
	border-radius: 999px;
	padding: 5px 10px 5px 12px;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.4;
}
.wppf-chip span { font-size: 15px; line-height: 1; opacity: .7; }
.wppf-chip:hover span { opacity: 1; }

/* ---------- Accordion sections (individual cards) ---------- */
.wppf-sections { display: flex; flex-direction: column; gap: 12px; }

.wppf-section {
	background: var( --wppf-bg );
	border-radius: var( --wppf-radius );
	box-shadow: 0 1px 3px rgba( 16, 24, 40, .07 );
	padding: 4px 18px;
}

.wppf-section-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 16px 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var( --wppf-text ) !important;
	cursor: pointer;
	text-align: left;
	direction: ltr;
	appearance: none;
	-webkit-appearance: none;
}
.wppf-section-toggle:hover,
.wppf-section-toggle:focus,
.wppf-section-toggle:active,
.wppf-section-toggle:focus-visible {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	color: var( --wppf-text );
}
.wppf-chevron {
	transition: transform .2s ease;
	color: var( --wppf-muted );
	flex: none;
	margin-left: auto;
	order: 2;
}
.wppf-section-toggle span:first-child { order: 1; }
.wppf-section-toggle[aria-expanded="true"] .wppf-chevron { transform: rotate( 180deg ); color: var( --wppf-accent ); }

.wppf-section-body { padding: 2px 0 18px; animation: wppf-fade .15s ease; }
@keyframes wppf-fade { from { opacity: 0; } to { opacity: 1; } }

.wppf-empty-notice { color: var( --wppf-muted ); font-size: 13px; }

/* ---------- Checkbox list ---------- */
.wppf-terms-checkbox { display: flex; flex-direction: column; gap: 10px; }

.wppf-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.wppf-checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.wppf-checkbox-box {
	width: 18px; height: 18px; flex: none;
	border: 1.5px solid var( --wppf-border );
	border-radius: 5px;
	position: relative;
	transition: all .15s ease;
}
.wppf-checkbox input:checked + .wppf-checkbox-box {
	background: var( --wppf-accent );
	border-color: var( --wppf-accent );
}
.wppf-checkbox input:checked + .wppf-checkbox-box::after {
	content: "";
	position: absolute;
	left: 5px; top: 1px;
	width: 5px; height: 9px;
	border: solid var( --wppf-accent-contrast );
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}
.wppf-checkbox-label { flex: 1; }
.wppf-checkbox .wppf-count { color: var( --wppf-muted ); font-size: 12.5px; margin-left: auto; }
.wppf-checkbox.is-disabled { opacity: .4; pointer-events: none; }

/* ---------- Pills / buttons ---------- */
.wppf-terms-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.wppf-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 14px;
	border: 1.5px solid var( --wppf-border );
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all .15s ease;
	background: var( --wppf-bg );
}
.wppf-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.wppf-pill:hover { border-color: var( --wppf-accent ); }
.wppf-pill.is-active { background: var( --wppf-accent ); border-color: var( --wppf-accent ); color: var( --wppf-accent-contrast ); }
.wppf-pill .wppf-count { opacity: .7; font-weight: 500; font-size: 11.5px; }
.wppf-pill.is-disabled { opacity: .35; pointer-events: none; }

/* ---------- Color swatches ---------- */
.wppf-terms-color { display: flex; flex-wrap: wrap; gap: 12px; }
.wppf-swatch { position: relative; cursor: pointer; }
.wppf-swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.wppf-swatch-color {
	display: block;
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 2px solid #fff;
	outline: 1.5px solid var( --wppf-border );
	transition: outline-color .15s ease, transform .15s ease;
}
.wppf-swatch:hover .wppf-swatch-color { transform: scale( 1.08 ); }
.wppf-swatch.is-active .wppf-swatch-color { outline: 2.5px solid var( --wppf-accent ); }
.wppf-swatch.is-active::after {
	content: "";
	position: absolute; inset: 0;
	margin: auto;
	width: 8px; height: 8px;
}
.wppf-swatch.is-disabled { opacity: .3; pointer-events: none; }

/* ---------- Dropdown ---------- */
.wppf-dropdown {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var( --wppf-border );
	border-radius: 8px;
	font-size: 14px;
	background: var( --wppf-bg );
}

/* ---------- Price range ---------- */
.wppf-price-inputs { display: flex; align-items: end; gap: 8px; margin-bottom: 22px; max-width: 100%; }
.wppf-price-field { flex: 1 1 0; min-width: 0; }
.wppf-price-field span { display: block; font-size: 11.5px; color: var( --wppf-muted ); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .04em; }
.wppf-price-field input {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	padding: 8px 8px;
	border: 1.5px solid var( --wppf-border );
	border-radius: 8px;
	font-size: 13.5px;
}
.wppf-price-sep { flex: none; color: var( --wppf-muted ); padding-bottom: 8px; }

.wppf-price-range { width: 100%; max-width: 100%; overflow: visible; --wppf-handle-size: 18px; }
.wppf-slider-wrap { width: 100%; max-width: 100%; padding: 0 calc( var( --wppf-handle-size ) / 2 ); box-sizing: border-box; }
.wppf-slider { position: relative; height: 4px; width: 100%; margin: 0 0 8px; }
.wppf-slider-track { position: absolute; inset: 0; background: var( --wppf-border ); border-radius: 4px; }
.wppf-slider-range { position: absolute; top: 0; bottom: 0; background: var( --wppf-accent ); border-radius: 4px; }
.wppf-slider-handle {
	position: absolute; top: 50%;
	width: var( --wppf-handle-size, 18px ) !important;
	height: var( --wppf-handle-size, 18px ) !important;
	min-width: 0 !important;
	max-width: none !important;
	background: #fff !important;
	border-style: solid;
	border-width: 2.5px;
	border-color: var( --wppf-accent ) !important;
	border-radius: 50% !important;
	transform: translate( -50%, -50% );
	cursor: grab;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: 0 1px 3px rgba( 0,0,0,.2 );
	appearance: none;
	-webkit-appearance: none;
}
.wppf-slider-handle:active { cursor: grabbing; }

/* ---------- Footer / clear ---------- */
.wppf-panel-footer { display: flex; gap: 10px; margin-top: 8px; }
.wppf-clear-all, .wppf-apply-mobile {
	flex: 1;
	padding: 11px 14px;
	border-radius: var( --wppf-radius );
	font-weight: 700;
	font-size: 13.5px;
	cursor: pointer;
	border-style: solid;
	border-width: 1.5px;
	border-color: var( --wppf-border ) !important;
	background: var( --wppf-bg ) !important;
	color: var( --wppf-text ) !important;
}
.wppf-apply-mobile { display: none; background: var( --wppf-accent ) !important; border-color: var( --wppf-accent ) !important; color: var( --wppf-accent-contrast ) !important; }
.wppf-clear-all:hover { border-color: var( --wppf-accent ) !important; color: var( --wppf-accent ) !important; }

/* =========================================================================
   PRODUCT GRID
   ========================================================================= */

.wppf-grid-wrap { position: relative; }
.wppf-grid-wrap.is-loading .wppf-grid-body { opacity: .35; pointer-events: none; transition: opacity .2s ease; }
.wppf-grid-wrap.is-loading::after {
	content: "";
	position: absolute;
	top: 100px; left: 50%;
	width: 34px; height: 34px;
	margin-left: -17px;
	border: 3px solid rgba( 0,0,0,.1 );
	border-top-color: var( --wppf-accent, #1a5f5a );
	border-radius: 50%;
	animation: wppf-spin .7s linear infinite;
	z-index: 5;
}
@keyframes wppf-spin { to { transform: rotate( 360deg ); } }

.wppf-grid-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: none;
}
.wppf-result-count { font-size: 13.5px; color: #6b7280; }
.wppf-sort-by { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.wppf-sort-by select {
	padding: 7px 10px;
	border-radius: 8px;
	border: 1.5px solid #e5e7eb;
	font-size: 13.5px;
}

ul.wppf-products-grid {
	display: grid !important;
	grid-template-columns: repeat( var( --wppf-cols-d, 4 ), 1fr );
	gap: 24px;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}
.wppf-grid-body, .wppf-grid-body * { box-sizing: border-box; }
ul.wppf-products-grid li.product {
	width: 100% !important;
	max-width: 100% !important;
	float: none !important;
	margin: 0 !important;
	background: #fff;
	border: 1px solid #eef0f2;
	transition: box-shadow .2s ease, transform .2s ease;
}
ul.wppf-products-grid li.product:hover {
	box-shadow: 0 10px 24px rgba( 16, 24, 40, .08 );
	transform: translateY( -3px );
}
ul.wppf-products-grid li.product a img { width: 100%; height: auto; display: block; }
ul.wppf-products-grid li.product .woocommerce-loop-product__title,
ul.wppf-products-grid li.product h2,
ul.wppf-products-grid li.product .price,
ul.wppf-products-grid li.product .button {
	margin-left: 12px; margin-right: 12px;
}
ul.wppf-products-grid li.product .button { margin-bottom: 14px; }

.wppf-no-products { padding: 60px 20px; text-align: center; color: #6b7280; }

.wppf-pagination { display: flex; justify-content: center; gap: 6px; list-style: none; margin: 32px 0 0; padding: 0; }
.wppf-pagination li a,
.wppf-pagination li span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px;
	border-radius: 8px;
	border: 1.5px solid #e5e7eb;
	font-size: 13.5px;
	color: #1f2937;
	text-decoration: none;
	padding: 0 6px;
}
.wppf-pagination li span.current,
.wppf-pagination li a:hover { background: var( --wppf-accent, #1a5f5a ); border-color: var( --wppf-accent, #1a5f5a ); color: #fff; }

/* ---------- Load More pagination style ---------- */
.wppf-load-more-wrap { text-align: center; margin-top: 32px; }
.wppf-load-more-text { font-size: 13.5px; color: #6b7280; margin: 0 0 10px; }
.wppf-load-more-progress {
	width: 100%;
	max-width: 320px;
	height: 6px;
	background: #e5e7eb;
	border-radius: 999px;
	margin: 0 auto 18px;
	overflow: hidden;
}
.wppf-load-more-progress-bar {
	height: 100%;
	background: var( --wppf-accent, #1a5f5a );
	border-radius: 999px;
	transition: width .3s ease;
}
.wppf-load-more-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	border-radius: 8px;
	border: 1.5px solid var( --wppf-accent, #1a5f5a ) !important;
	background: transparent !important;
	color: var( --wppf-accent, #1a5f5a ) !important;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.wppf-load-more-btn:hover {
	background: var( --wppf-accent, #1a5f5a ) !important;
	color: #fff !important;
}
.wppf-load-more-btn:disabled { opacity: .6; cursor: default; }
.wppf-load-more-done { font-size: 13.5px; color: #6b7280; margin: 0; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media ( max-width: 1024px ) {
	ul.wppf-products-grid { grid-template-columns: repeat( var( --wppf-cols-t, 3 ), 1fr ); gap: 18px; }
}

@media ( max-width: 782px ) {
	ul.wppf-products-grid { grid-template-columns: repeat( var( --wppf-cols-m, 2 ), 1fr ); gap: 12px; }

	.wppf-mobile-toggle { display: inline-flex !important; margin-bottom: 12px; }

	.wppf-filter-widget .wppf-panel {
		position: fixed;
		top: 0; left: 0; bottom: 0;
		right: auto;
		width: min( 86vw, 360px );
		max-width: 360px;
		height: 100%;
		border-radius: 0;
		transform: translateX( -100% );
		transition: transform .3s ease;
		z-index: 100001;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}
	.wppf-filter-widget.is-drawer-open .wppf-panel { transform: translateX( 0 ); }
	.wppf-filter-widget.is-drawer-open .wppf-overlay { display: block; }

	.wppf-panel-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 14px;
		margin-bottom: 6px;
		border-bottom: 1px solid var( --wppf-border );
	}
	.wppf-panel-title { font-weight: 800; font-size: 16px; text-transform: uppercase; letter-spacing: .03em; }
	.wppf-panel-close { background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; color: var( --wppf-muted ); }
	.wppf-panel-label { display: none !important; }

	.wppf-sections { flex: 1; overflow-y: auto; }
	.wppf-panel-footer { position: sticky; bottom: 0; background: #f7f6f2; padding-top: 12px; margin-top: 4px; }
	.wppf-apply-mobile { display: block; }

	.wppf-grid-toolbar { flex-direction: row; }
	.wppf-result-count { order: 2; }
	.wppf-sort-by { order: 1; flex: 1; }
	.wppf-sort-by select { width: 100%; }
}

/* =========================================================================
   COMBINED "Product Filter + Grid" widget
   ========================================================================= */

.wppf-combo-toolbar {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
	padding-bottom: 0;
	border-bottom: none;
}
.wppf-combo-toolbar .wppf-mobile-toggle { display: none !important; width: auto; }
.wppf-combo-count { margin-right: auto; font-size: 13.5px; color: #6b7280; }
.wppf-combo-sort { margin-left: auto; }

.wppf-combo-row {
	display: grid;
	grid-template-columns: var( --wppf-sidebar-w, 270px ) 1fr;
	gap: 32px;
	align-items: start;
}
.wppf-combo-aside { position: sticky; top: 20px; }

@media ( max-width: 1024px ) {
	.wppf-combo-row { grid-template-columns: 1fr; }
	.wppf-combo-aside { position: static; }
}

@media ( max-width: 782px ) {
	.wppf-combo-toolbar .wppf-mobile-toggle { display: inline-flex !important; margin-bottom: 0; width: auto; }
	.wppf-combo-count { order: 3; flex: 0 0 100%; }
	.wppf-combo-sort { margin-left: 0; }
}

html.wppf-no-scroll { overflow: hidden; }