/*
 * SECTION:  Shop filters built with WordPress and WooCommerce blocks
 * File:     assets/css/pages/sol-shop-blocks.css
 * Used by:  the "Shop filters" widget area (Filter by Price / Attribute / Rating / Stock, Active Filters,
 *           Product Filters, Product Categories List, Categories and Search blocks)
 * To remove: delete this file and its line in inc/assets.php (handle "sol-shop-blocks").
 *
 * Everything is scoped to .sol-widget, so nothing leaks outside the filter sidebar.
 * Colors come from the theme tokens, so dark mode needs no extra rules.
 * The doubled .sol-widget class makes these rules win over the block stylesheets.
 */

/* ==========================================================================
   1. Wrappers and titles
   ========================================================================== */
.sol-widget.sol-widget :is(.wp-block-group, .wp-block-woocommerce-filter-wrapper) {
	margin: 0;
	padding: 0;
}

.sol-widget.sol-widget :is(.wp-block-heading, .wc-block-components-title, .wp-block-search__label) {
	margin: 0 0 12px;
	color: var(--sol-muted);
	font: 700 0.75rem/1.3 var(--sol-font-sans);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sol-widget :is(input, select, button):focus-visible {
	outline: 2px solid var(--sol-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   2. Checkbox lists (attribute, rating and stock filters)
   ========================================================================== */
.sol-widget.sol-widget :is(.wc-block-checkbox-list, .wc-block-components-checkbox-list, .wc-block-product-filter-checkbox-list__list) {
	max-height: 280px;
	margin: 0;
	padding: 0 4px 0 0;
	overflow-y: auto;
	list-style: none;
}

.sol-widget.sol-widget :is(.wc-block-checkbox-list, .wc-block-components-checkbox-list, .wc-block-product-filter-checkbox-list__list) li {
	display: block;
	padding: 4px 0;
}

.sol-widget :is(.wc-block-components-checkbox, .wc-block-product-filter-checkbox-list__label) {
	margin: 0;
}

.sol-widget :is(.wc-block-components-checkbox label, .wc-block-product-filter-checkbox-list__label) {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: var(--sol-text-sm);
	line-height: 1.4;
}

.sol-widget.sol-widget :is(.wc-block-components-checkbox__label, .wc-block-product-filter-checkbox-list__text) {
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

/* The box: drawn here, the block's own tick is hidden and replaced by a background image. */
.sol-widget.sol-widget :is(.wc-block-components-checkbox__input[type="checkbox"], .wc-block-product-filter-checkbox-list__input[type="checkbox"]) {
	appearance: none;
	-webkit-appearance: none;
	position: static;
	flex: none;
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
	margin: 0;
	border: 1.5px solid var(--sol-line);
	border-radius: 5px;
	background: var(--sol-surface) center / 12px no-repeat;
	cursor: pointer;
	transition: background-color var(--sol-fast) ease, border-color var(--sol-fast) ease;
}

.sol-widget :is(.wc-block-components-checkbox__input[type="checkbox"], .wc-block-product-filter-checkbox-list__input[type="checkbox"]):hover {
	border-color: var(--sol-gold-text);
}

.sol-widget.sol-widget :is(.wc-block-components-checkbox__input[type="checkbox"], .wc-block-product-filter-checkbox-list__input[type="checkbox"]):checked {
	border-color: var(--sol-accent);
	background-color: var(--sol-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242522' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.sol-widget :is(.wc-block-components-checkbox__mark, .wc-block-product-filter-checkbox-list__mark) {
	display: none;
}

/* Number of books next to a name. */
.sol-widget.sol-widget :is(.wc-filter-element-label-list-count, .wc-block-attribute-filter-list-count, .wc-block-product-filter-checkbox-list__count, .wc-block-product-categories-list-item-count) {
	margin-inline-start: auto;
	color: var(--sol-muted);
	font-size: 0.8125rem;
}

/* "Show more" and similar text buttons. */
.sol-widget.sol-widget :is(.wc-block-checkbox-list__show-more, .wc-block-components-checkbox-list__show-more, .wc-block-product-filter-checkbox-list__show-more) {
	margin-top: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sol-gold-text);
	font: 600 0.8125rem var(--sol-font-sans);
	cursor: pointer;
}

/* ==========================================================================
   3. Chips (active filters, chip lists)
   ========================================================================== */
.sol-widget.sol-widget :is(.wc-block-components-chip, .wc-block-product-filter-removable-chips__chip) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid var(--sol-line);
	border-radius: var(--sol-radius-pill);
	background: var(--sol-surface-alt);
	color: var(--sol-text);
	font-size: 0.8125rem;
	line-height: 1.3;
}

.sol-widget.sol-widget :is(.wc-block-components-chip__remove, .wc-block-active-filters__list-item-remove, .wc-block-product-filter-removable-chips__remove) {
	display: inline-flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sol-muted);
	cursor: pointer;
}

.sol-widget :is(.wc-block-components-chip__remove, .wc-block-active-filters__list-item-remove, .wc-block-product-filter-removable-chips__remove):hover {
	color: var(--sol-danger);
}

.sol-widget :is(.wc-block-components-chip__remove, .wc-block-active-filters__list-item-remove, .wc-block-product-filter-removable-chips__remove) svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Chip lists where a chip is a choice. */
.sol-widget :is(.wc-block-product-filter-chips__items) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sol-widget :is(.wc-block-product-filter-chips__item) {
	padding: 6px 12px;
	border: 1.5px solid var(--sol-line);
	border-radius: var(--sol-radius-pill);
	background: var(--sol-surface);
	color: var(--sol-text);
	font-size: 0.8125rem;
	cursor: pointer;
}

.sol-widget :is(.wc-block-product-filter-chips__item):hover {
	border-color: var(--sol-gold-text);
}

.sol-widget .wc-block-product-filter-chips__item[aria-checked="true"] {
	border-color: var(--sol-accent);
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
}

.sol-widget .wc-block-product-filter-chips__item:has(input:checked) {
	border-color: var(--sol-accent);
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
}

/* ==========================================================================
   4. Active filters
   ========================================================================== */
.sol-widget .wc-block-active-filters__list,
.sol-widget .wc-block-product-filter-removable-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}

.sol-widget .wc-block-active-filters__list li {
	display: block;
	padding: 0;
}

.sol-widget .wc-block-active-filters__list li > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	list-style: none;
}

.sol-widget.sol-widget .wc-block-active-filters__list-item-type {
	display: block;
	margin-bottom: 4px;
	color: var(--sol-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sol-widget.sol-widget :is(.wc-block-active-filters__clear-all, .wc-block-product-filter-clear-button .wp-block-button__link, .wc-block-components-filter-reset-button) {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sol-gold-text);
	font: 600 0.8125rem var(--sol-font-sans);
	text-decoration: none;
	cursor: pointer;
}

/* ==========================================================================
   5. Price slider
   ========================================================================== */
.sol-widget :is(.wc-block-price-filter, .wc-block-product-filter-price-slider) {
	margin: 0;
}

.sol-widget .wc-block-price-filter__range-input-wrapper,
.sol-widget .wc-block-components-price-slider__range-input-wrapper {
	position: relative;
	height: 6px;
	margin: 14px 10px 22px;
	border: 0;
	border-radius: var(--sol-radius-pill);
	background: var(--sol-line);
}

.sol-widget :is(.wc-block-price-filter__range-input-progress, .wc-block-components-price-slider__range-input-progress) {
	--range-color: var(--sol-accent);
	--track-background: linear-gradient(to right, transparent var(--low), var(--range-color) var(--low), var(--range-color) var(--high), transparent var(--high)) no-repeat 0 0;
	border-radius: var(--sol-radius-pill);
}

.sol-widget :is(.wc-block-price-filter__range-input, .wc-block-components-price-slider__range-input)::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	border: 3px solid var(--sol-surface);
	border-radius: 50%;
	background: var(--sol-accent);
	box-shadow: 0 0 0 1px var(--sol-line), 0 4px 10px -4px var(--sol-shadow);
	cursor: grab;
}

.sol-widget :is(.wc-block-price-filter__range-input, .wc-block-components-price-slider__range-input)::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid var(--sol-surface);
	border-radius: 50%;
	background: var(--sol-accent);
	box-shadow: 0 0 0 1px var(--sol-line), 0 4px 10px -4px var(--sol-shadow);
	cursor: grab;
}

/* Min and max boxes. */
.sol-widget :is(.wc-block-price-filter__controls, .wc-block-components-price-slider__controls) {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sol-widget.sol-widget :is(.wc-block-price-filter__amount, .wc-block-components-price-slider__amount, .wc-block-product-filter-price-slider input[type="text"]) {
	width: 100%;
	min-width: 0;
	min-height: 44px;
	padding: 0 12px;
	border: 1.5px solid var(--sol-line);
	border-radius: 10px;
	background: var(--sol-surface);
	color: var(--sol-text);
	font: inherit;
	font-size: var(--sol-text-sm);
	text-align: center;
}

.sol-widget.sol-widget :is(.wc-block-price-filter__text, .wc-block-product-filter-price-slider__range-text) {
	color: var(--sol-muted);
	font-size: var(--sol-text-sm);
}

/* ==========================================================================
   6. Buttons: apply and reset
   ========================================================================== */
.sol-widget :is(.wc-block-price-filter__actions, .wc-block-components-price-slider__actions, .wc-block-attribute-filter__actions, .wc-block-rating-filter__actions, .wc-block-stock-filter__actions) {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
}

.sol-widget.sol-widget :is(.wc-block-components-filter-submit-button, .wc-block-price-filter__button) {
	min-height: 40px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
	font: 600 var(--sol-text-sm) var(--sol-font-sans);
	cursor: pointer;
}

.sol-widget.sol-widget :is(.wc-block-components-filter-submit-button, .wc-block-price-filter__button):hover {
	filter: brightness(0.95);
}

.sol-widget.sol-widget :is(.wc-block-components-filter-submit-button, .wc-block-price-filter__button):disabled {
	opacity: 0.5;
	cursor: default;
}

/* ==========================================================================
   7. Dropdown filters
   ========================================================================== */
.sol-widget.sol-widget :is(.wc-blocks-components-select__select, .wc-block-components-combobox .components-combobox-control__input, .wc-block-components-dropdown-selector__input-wrapper, .wc-block-dropdown-selector .wc-block-dropdown-selector__input-wrapper) {
	min-height: 44px;
	border: 1.5px solid var(--sol-line);
	border-radius: 10px;
	background: var(--sol-surface);
	color: var(--sol-text);
	font: inherit;
	font-size: var(--sol-text-sm);
}

.sol-widget.sol-widget :is(.wc-blocks-components-select__label, .wc-block-components-combobox label) {
	color: var(--sol-muted);
}

.sol-widget.sol-widget :is(.wc-block-dropdown-selector__list, .wc-block-components-dropdown-selector__list) {
	margin: 4px 0 0;
	padding: 4px;
	border: 1.5px solid var(--sol-line);
	border-radius: 10px;
	background: var(--sol-surface);
	box-shadow: 0 14px 28px -16px var(--sol-shadow);
	list-style: none;
}

.sol-widget :is(.wc-block-dropdown-selector__list, .wc-block-components-dropdown-selector__list) li {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
}

.sol-widget :is(.wc-block-dropdown-selector__list, .wc-block-components-dropdown-selector__list) li:hover {
	background: var(--sol-surface-alt);
}

/* ==========================================================================
   8. Rating filter stars
   ========================================================================== */
.sol-widget .wc-block-components-product-rating__stars::before {
	color: var(--sol-line);
}

.sol-widget .wc-block-components-product-rating__stars span::before {
	color: var(--sol-gold-text);
}

/* ==========================================================================
   9. Category lists and the search block
   ========================================================================== */
.sol-widget :is(.wp-block-categories-list, .wp-block-categories, .wc-block-product-categories-list) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sol-widget .wp-block-search__inside-wrapper {
	display: flex;
	gap: 8px;
	padding: 0;
	border: 0;
}

.sol-widget .wp-block-search__input {
	flex: 1;
	min-width: 0;
}

.sol-widget.sol-widget .wp-block-search__button {
	min-height: 44px;
	margin: 0;
	padding: 0 16px;
	border: 0;
	border-radius: 10px;
	background: var(--sol-accent);
	color: var(--sol-accent-ink);
	font: 600 var(--sol-text-sm) var(--sol-font-sans);
	cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
	.sol-widget :is(.wc-block-components-checkbox__input[type="checkbox"], .wc-block-product-filter-checkbox-list__input[type="checkbox"]) {
		transition: none;
	}
}

/* ==========================================================================
   10. Text colors in light and dark mode
   WordPress and WooCommerce give their widgets and blocks dark text colors of their own.
   The widget sets the theme color, and what is inside follows it.
   ========================================================================== */
.sol-widget.sol-widget {
	color: var(--sol-text);
}

.sol-widget.sol-widget :where(small, em, bdi, dt, dd, h1, h5, h6, th, td, legend, option) {
	color: inherit;
}

.sol-widget.sol-widget :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"]), select, textarea) {
	background-color: var(--sol-surface);
	color: var(--sol-text);
}

.sol-widget.sol-widget ::placeholder {
	color: var(--sol-muted);
	opacity: 1;
}

.sol-widget.sol-widget svg {
	fill: currentColor;
}