/**
 * Woo Filters - Frontend Styles
 *
 * @package Woo_Filters
 * @since   1.0.0
 *
 * BEM naming convention with CSS custom properties for easy theming
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
	--wf-primary-color: #2271b1;
	--wf-primary-color-hover: #135e96;
	--wf-text-color: #1e1e1e;
	--wf-text-color-light: #757575;
	--wf-border-color: #dcdcde;
	--wf-background: #ffffff;
	--wf-background-hover: #f6f7f7;
	--wf-spacing-xs: 4px;
	--wf-spacing-sm: 8px;
	--wf-spacing-md: 16px;
	--wf-spacing-lg: 24px;
	--wf-spacing-xl: 32px;
	--wf-border-radius: 4px;
	--wf-transition: 0.2s ease;
	--wf-font-size-sm: 14px;
	--wf-font-size-md: 16px;
	--wf-font-size-lg: 18px;
}

/* ==========================================================================
   Filter Container
   ========================================================================== */

.wf-filter {
	margin-bottom: var(--wf-spacing-lg);
}

.wf-filter__title {
	margin: 0 0 var(--wf-spacing-md) 0;
	font-size: var(--wf-font-size-lg);
	font-weight: 600;
	color: var(--wf-text-color);
}

.wf-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wf-filter__item {
	margin-bottom: var(--wf-spacing-sm);
}

/* ==========================================================================
   Checkbox Filter
   ========================================================================== */

.wf-filter__checkbox-label {
	display: flex;
	align-items: center;
	gap: var(--wf-spacing-sm);
	padding: var(--wf-spacing-sm);
	cursor: pointer;
	border-radius: var(--wf-border-radius);
	transition: background-color var(--wf-transition);
}

.wf-filter__checkbox-label:hover {
	background-color: var(--wf-background-hover);
}

.wf-filter__checkbox {
	width: 18px;
	height: 18px;
	border: 2px solid var(--wf-border-color);
	border-radius: var(--wf-border-radius);
	cursor: pointer;
	transition: all var(--wf-transition);
}

.wf-filter__checkbox:checked {
	background-color: var(--wf-primary-color);
	border-color: var(--wf-primary-color);
}

.wf-filter__checkbox:focus {
	outline: 2px solid var(--wf-primary-color);
	outline-offset: 2px;
}

.wf-filter__label-text {
	flex: 1;
	color: var(--wf-text-color);
	font-size: var(--wf-font-size-md);
}

.wf-filter__count {
	color: var(--wf-text-color-light);
	font-size: var(--wf-font-size-sm);
}

/* ==========================================================================
   Radio Filter
   ========================================================================== */

.wf-filter__radio-label {
	display: flex;
	align-items: center;
	gap: var(--wf-spacing-sm);
	padding: var(--wf-spacing-sm);
	cursor: pointer;
	border-radius: var(--wf-border-radius);
	transition: background-color var(--wf-transition);
}

.wf-filter__radio-label:hover {
	background-color: var(--wf-background-hover);
}

.wf-filter__radio {
	width: 18px;
	height: 18px;
	border: 2px solid var(--wf-border-color);
	border-radius: 50%;
	cursor: pointer;
	transition: all var(--wf-transition);
}

.wf-filter__radio:checked {
	border-color: var(--wf-primary-color);
	background-color: var(--wf-primary-color);
}

/* ==========================================================================
   Dropdown Filter
   ========================================================================== */

.wf-filter__select {
	width: 100%;
	padding: var(--wf-spacing-sm) var(--wf-spacing-md);
	font-size: var(--wf-font-size-md);
	color: var(--wf-text-color);
	border: 2px solid var(--wf-border-color);
	border-radius: var(--wf-border-radius);
	background-color: var(--wf-background);
	cursor: pointer;
	transition: border-color var(--wf-transition);
}

.wf-filter__select:hover {
	border-color: var(--wf-primary-color);
}

.wf-filter__select:focus {
	outline: none;
	border-color: var(--wf-primary-color);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1);
}

/* ==========================================================================
   Search Filter
   ========================================================================== */

.wf-filter__search-wrapper {
	position: relative;
}

.wf-filter__search {
	width: 100%;
	padding: var(--wf-spacing-sm) var(--wf-spacing-md);
	font-size: var(--wf-font-size-md);
	color: var(--wf-text-color);
	border: 2px solid var(--wf-border-color);
	border-radius: var(--wf-border-radius);
	background-color: var(--wf-background);
	transition: border-color var(--wf-transition);
}

.wf-filter__search:focus {
	outline: none;
	border-color: var(--wf-primary-color);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1);
}

.wf-filter__search::placeholder {
	color: var(--wf-text-color-light);
}

/* ==========================================================================
   Price Filter
   ========================================================================== */

.wf-filter__price-container {
	padding: var(--wf-spacing-sm) 0;
}

.wf-filter__price-inputs {
	display: flex;
	align-items: flex-end;
	gap: var(--wf-spacing-sm);
}

.wf-filter__price-input-wrapper {
	flex: 1;
}

.wf-filter__price-label {
	display: block;
	margin-bottom: var(--wf-spacing-xs);
	font-size: var(--wf-font-size-sm);
	color: var(--wf-text-color-light);
}

.wf-filter__price-input-field {
	display: flex;
	align-items: center;
	border: 1px solid var(--wf-border-color);
	border-radius: var(--wf-border-radius);
	background: var(--wf-bg-color);
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.wf-filter__price-input-field:focus-within {
	border-color: var(--wf-primary-color);
}

.wf-filter__price-currency {
	padding: var(--wf-spacing-sm);
	padding-right: 0;
	color: var(--wf-text-color-light);
	font-size: var(--wf-font-size-sm);
}

.wf-filter__price-input {
	width: 100%;
	padding: var(--wf-spacing-sm);
	border: none;
	background: transparent;
	font-size: var(--wf-font-size-base);
	color: var(--wf-text-color);
	outline: none;
	-moz-appearance: textfield;
}

.wf-filter__price-input::-webkit-outer-spin-button,
.wf-filter__price-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.wf-filter__price-input::placeholder {
	color: var(--wf-text-color-light);
}

.wf-filter__price-separator {
	color: var(--wf-text-color-light);
	font-size: var(--wf-font-size-sm);
	padding-bottom: var(--wf-spacing-sm);
}

/* ==========================================================================
   Filter Button (Apply/Search)
   ========================================================================== */

.wf-filter__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: var(--wf-spacing-sm) var(--wf-spacing-md);
	margin-top: var(--wf-spacing-md);
	font-size: var(--wf-font-size-md);
	font-weight: 500;
	color: #ffffff;
	background-color: var(--wf-primary-color);
	border: none;
	border-radius: var(--wf-border-radius);
	cursor: pointer;
	transition: background-color var(--wf-transition), transform var(--wf-transition);
}

.wf-filter__button:hover {
	background-color: var(--wf-primary-color-hover);
}

.wf-filter__button:focus {
	outline: 2px solid var(--wf-primary-color);
	outline-offset: 2px;
}

.wf-filter__button:active {
	transform: scale(0.98);
}

/* ==========================================================================
   Toggle Filter
   ========================================================================== */

.wf-filter__toggle-wrapper {
	display: flex;
	align-items: center;
	gap: var(--wf-spacing-md);
	padding: var(--wf-spacing-sm);
}

.wf-filter__toggle-label {
	flex: 1;
	color: var(--wf-text-color);
	font-size: var(--wf-font-size-md);
	cursor: pointer;
}

.wf-filter__toggle {
	position: relative;
	width: 48px;
	height: 24px;
	-webkit-appearance: none;
	appearance: none;
	background-color: var(--wf-border-color);
	border-radius: 12px;
	cursor: pointer;
	transition: background-color var(--wf-transition);
}

.wf-filter__toggle::before {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background-color: white;
	border-radius: 50%;
	transition: transform var(--wf-transition);
}

.wf-filter__toggle:checked {
	background-color: var(--wf-primary-color);
}

.wf-filter__toggle:checked::before {
	transform: translateX(24px);
}

.wf-filter__toggle:focus {
	outline: 2px solid var(--wf-primary-color);
	outline-offset: 2px;
}

/* ==========================================================================
   Color Swatch Filter
   ========================================================================== */

.wf-filter__color-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wf-spacing-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.wf-filter__color-item {
	margin: 0;
}

.wf-filter__color-label {
	display: block;
	cursor: pointer;
}

.wf-filter__color-swatch {
	width: 40px;
	height: 40px;
	border: 2px solid var(--wf-border-color);
	border-radius: var(--wf-border-radius);
	cursor: pointer;
	transition: all var(--wf-transition);
}

.wf-filter__color-input:checked + .wf-filter__color-swatch {
	border-color: var(--wf-primary-color);
	box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.2);
	transform: scale(1.1);
}

.wf-filter__color-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* ==========================================================================
   Rating Filter
   ========================================================================== */

.wf-filter__rating-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wf-filter__rating-item {
	margin-bottom: var(--wf-spacing-sm);
}

.wf-filter__rating-label {
	display: flex;
	align-items: center;
	gap: var(--wf-spacing-sm);
	padding: var(--wf-spacing-sm);
	cursor: pointer;
	border-radius: var(--wf-border-radius);
	transition: background-color var(--wf-transition);
}

.wf-filter__rating-label:hover {
	background-color: var(--wf-background-hover);
}

.wf-filter__rating-input {
	width: 18px;
	height: 18px;
}

.wf-filter__rating-stars {
	color: #ffa500;
	font-size: var(--wf-font-size-md);
}

/* ==========================================================================
   Active Filters
   ========================================================================== */

.wf-active-filters {
	margin-bottom: var(--wf-spacing-lg);
	padding: var(--wf-spacing-md);
	background-color: var(--wf-background-hover);
	border-radius: var(--wf-border-radius);
}

.wf-active-filters__title {
	margin: 0 0 var(--wf-spacing-md) 0;
	font-size: var(--wf-font-size-lg);
	font-weight: 600;
	color: var(--wf-text-color);
}

.wf-active-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wf-spacing-sm);
	margin: 0 0 var(--wf-spacing-md) 0;
	padding: 0;
	list-style: none;
}

.wf-active-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--wf-spacing-sm);
	padding: var(--wf-spacing-xs) var(--wf-spacing-md);
	background-color: var(--wf-primary-color);
	color: white;
	border-radius: var(--wf-border-radius);
	font-size: var(--wf-font-size-sm);
}

.wf-active-filter__label {
	margin: 0;
}

.wf-active-filter__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: rgba(255, 255, 255, 0.2);
	border: none;
	border-radius: 50%;
	color: white;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	margin: 0;
	transition: all var(--wf-transition);
}

.wf-active-filter__remove:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: scale(1.1);
}

.wf-clear-all {
	display: inline-block;
	padding: var(--wf-spacing-sm) var(--wf-spacing-md);
	background-color: var(--wf-primary-color);
	border: none;
	color: white;
	border-radius: var(--wf-border-radius);
	font-size: var(--wf-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--wf-transition);
}

.wf-clear-all:hover {
	opacity: 0.9;
	transform: translateY(-1px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Results Count
   ========================================================================== */

.wf-results-count {
	margin-bottom: var(--wf-spacing-md);
	color: var(--wf-text-color-light);
	font-size: var(--wf-font-size-md);
}

/* ==========================================================================
   Filter Group
   ========================================================================== */

.wf-filter-group {
	padding: var(--wf-spacing-lg);
	background-color: var(--wf-background);
	border: 1px solid var(--wf-border-color);
	border-radius: var(--wf-border-radius);
}

.wf-filter-group__title {
	margin: 0 0 var(--wf-spacing-lg) 0;
	font-size: var(--wf-font-size-lg);
	font-weight: 600;
	color: var(--wf-text-color);
}

.wf-filter-group__content {
	/* Content wrapper */
}

/* ==========================================================================
   Loading State
   ========================================================================== */

.wf-loading {
	position: relative;
	pointer-events: none;
	opacity: 0.6;
	transition: opacity var(--wf-transition);
}

.wf-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border: 4px solid var(--wf-border-color);
	border-top-color: var(--wf-primary-color);
	border-radius: 50%;
	animation: wf-spin 0.8s linear infinite;
}

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

/* ==========================================================================
   Products Container
   ========================================================================== */

.wf-products-container {
	transition: opacity var(--wf-transition);
}

/* ==========================================================================
   Error State
   ========================================================================== */

.wf-error {
	padding: var(--wf-spacing-md);
	background-color: #f8d7da;
	color: #721c24;
	border: 1px solid #f5c6cb;
	border-radius: var(--wf-border-radius);
	text-align: center;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
	.wf-filter {
		margin-bottom: var(--wf-spacing-md);
	}

	.wf-filter__price-inputs {
		flex-direction: column;
	}

	.wf-filter__price-separator {
		display: none;
	}

	.wf-filter-group {
		padding: var(--wf-spacing-md);
	}
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.wf-filter__checkbox:focus-visible,
.wf-filter__radio:focus-visible,
.wf-filter__select:focus-visible,
.wf-filter__search:focus-visible,
.wf-filter__toggle:focus-visible {
	outline: 2px solid var(--wf-primary-color);
	outline-offset: 2px;
}

/* Screen reader only text */
.wf-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border-width: 0;
}

/* ==========================================================================
   Search Button Widget
   ========================================================================== */

.wf-search-button-wrapper {
	margin-bottom: var(--wf-spacing-lg);
}

.wf-search-button {
	display: inline-flex;
	align-items: center;
	gap: var(--wf-spacing-sm);
	padding: var(--wf-spacing-sm) var(--wf-spacing-lg);
	background-color: var(--wf-primary-color);
	color: white;
	border: none;
	border-radius: var(--wf-border-radius);
	font-size: var(--wf-font-size-md);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
	transition: all var(--wf-transition);
}

.wf-search-button:hover {
	background-color: var(--wf-primary-color-hover);
}

.wf-search-button:focus-visible {
	outline: 2px solid var(--wf-primary-color);
	outline-offset: 2px;
}

.wf-search-button.wf-button-block {
	display: flex;
	width: 100%;
	justify-content: center;
}

.wf-button-icon {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.wf-button-text {
	line-height: 1;
}

/* ==========================================================================
   Reset Filters Button
   ========================================================================== */

.wf-reset-filters-wrapper {
	margin-bottom: var(--wf-spacing-lg);
}

.wf-reset-filters-wrapper.wf-hidden {
	display: none;
}

.wf-reset-filters {
	display: inline-flex;
	align-items: center;
	gap: var(--wf-spacing-xs);
	padding: var(--wf-spacing-sm) var(--wf-spacing-md);
	background-color: transparent;
	border: 2px solid var(--wf-primary-color);
	color: var(--wf-primary-color);
	border-radius: var(--wf-border-radius);
	font-size: var(--wf-font-size-sm);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: all var(--wf-transition);
}

.wf-reset-filters:hover {
	background-color: var(--wf-primary-color);
	color: white;
}

.wf-reset-filters:focus-visible {
	outline: 2px solid var(--wf-primary-color);
	outline-offset: 2px;
}

.wf-reset-icon {
	font-size: 20px;
	line-height: 1;
	font-weight: 700;
}