/* ============================================
   Shop Sidebar & Filters
   ============================================ */

.multitrade-shop-sidebar .multitrade-filter-panel {
	padding: var(--wp--preset--spacing--30);
}

.multitrade-shop-sidebar .wp-block-woocommerce-filter-wrapper {
	background: var(--wp--preset--color--secondary-background);
	border-radius: 8px;
	padding: var(--wp--preset--spacing--30);
}

/* Hide filter wrappers whose inner block is hidden or empty */
.multitrade-shop-sidebar .wp-block-woocommerce-filter-wrapper:has(> [hidden]),
.multitrade-shop-sidebar .wp-block-woocommerce-filter-wrapper:has(> :only-child:empty) {
    display: none;
}

/* Also hide the spacer immediately before a now-hidden wrapper */
.multitrade-shop-sidebar .wp-block-spacer:has(+ .wp-block-woocommerce-filter-wrapper:has(> [hidden])),
.multitrade-shop-sidebar .wp-block-spacer:has(+ .wp-block-woocommerce-filter-wrapper:has(> :only-child:empty)) {
    display: none;
}

/* Collapse adjacent spacers left behind by empty shortcodes */
.multitrade-shop-sidebar .wp-block-spacer + .wp-block-spacer {
    display: none;
}

.multitrade-shop-sidebar .wp-block-woocommerce-product-categories-block ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.multitrade-shop-sidebar .wp-block-woocommerce-product-categories-block ul li {
	border-bottom: 1px solid var(--wp--custom--divider-subtle);
	padding: 0.4rem 0;
}

.multitrade-shop-sidebar .wp-block-woocommerce-product-categories-block ul li:last-child {
	border-bottom: none;
}

.multitrade-shop-sidebar .wp-block-woocommerce-product-categories-block ul li a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-size: 0.875rem;
	font-family: var(--wp--preset--font-family--inter);
	transition: color var(--wp--custom--transition-speed) ease;
}

.multitrade-shop-sidebar .wp-block-woocommerce-product-categories-block ul li a:hover {
	color: var(--wp--preset--color--tertiary);
}

.multitrade-shop-sidebar .wc-block-product-categories-list-item-count {
	color: var(--wp--custom--secondary-text);
	font-size: 0.8rem;
}

.multitrade-shop-sidebar .wc-block-price-filter__range-input-wrapper {
	margin-top: var(--wp--preset--spacing--30);
}

.multitrade-shop-sidebar .wc-block-components-price-slider__range-input-progress {
	background: var(--wp--preset--color--tertiary);
}

/* ============================================
   WooCommerce Filter Panel Headings
   ============================================ */

.multitrade-shop-sidebar .wp-block-woocommerce-filter-wrapper h3,
.multitrade-shop-sidebar .wp-block-heading {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-family: var(--wp--preset--font-family--montserrat);
}

/* Accordion toggle for filter section headings */
.multitrade-filter-toggle {
	cursor: pointer;
	user-select: none;
	position: relative;
	padding-right: 1.5rem;
}

.multitrade-filter-toggle::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	border-right: 2px solid var(--wp--custom--muted-text);
	border-bottom: 2px solid var(--wp--custom--muted-text);
	transform: translateY(-50%) rotate(45deg);
	transition: transform var(--wp--custom--transition-speed);
}

.multitrade-filter-toggle[aria-expanded="false"]::after {
	transform: translateY(-50%) rotate(-45deg);
}

.multitrade-filter-content {
	overflow: hidden;
	transition: max-height 0.3s ease, opacity 0.2s ease;
	max-height: 1000px;
	opacity: 1;
}

.multitrade-filter-content--collapsed {
	max-height: 0;
	opacity: 0;
	margin: 0;
	padding: 0;
}

/* Hide duplicate internal filter label when section heading already exists */
.multitrade-shop-sidebar .wp-block-woocommerce-price-filter .wc-block-price-filter__title,
.multitrade-shop-sidebar .wc-block-filter-wrapper .wc-block-filter-title-placeholder {
	display: none;
}

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

.multitrade-mobile-filter-toggle {
	display: none; /* Hidden on desktop */
}

@media (max-width: 781px) {
	.multitrade-mobile-filter-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		padding: 0.5rem 1rem;
		background: var(--wp--preset--color--secondary-background);
		border: 1px solid var(--wp--custom--input-border-color, #ddd);
		border-radius: 6px;
		font-size: 0.85rem;
		font-family: var(--wp--preset--font-family--inter);
		font-weight: 600;
		color: var(--wp--preset--color--contrast);
		cursor: pointer;
		margin-bottom: var(--wp--preset--spacing--40);
		transition: border-color var(--wp--custom--transition-speed, 0.2s) ease,
			background var(--wp--custom--transition-speed, 0.2s) ease;
	}

	.multitrade-mobile-filter-toggle:hover,
	.multitrade-mobile-filter-toggle--active {
		border-color: var(--wp--preset--color--tertiary);
		background: var(--wp--preset--color--base);
	}

	.multitrade-mobile-filter-toggle svg {
		flex-shrink: 0;
	}

	/* Sidebar: hidden by default on mobile, shown when toggled */
	.wp-block-column.multitrade-shop-sidebar {
		display: none !important;
		order: -1; /* Move above products when visible */
	}

	.wp-block-column.multitrade-shop-sidebar.multitrade-sidebar--open {
		display: block !important;
	}
}

/* ============================================
   Shop Sidebar — Compact Input Overrides
   ============================================
   The YITH Wonder parent theme applies input[type=text] styles
   with specificity 0,0,1,1 that override our class selectors.
   Scope overrides to .multitrade-shop-sidebar (0,0,2,1) to win.
   ============================================ */

.multitrade-shop-sidebar input[type="text"],
.multitrade-shop-sidebar input[type="number"],
.multitrade-shop-sidebar input[type="search"] {
	min-height: 0;
	padding: 0.2rem 0.4rem;
	font-size: 0.75rem;
	line-height: 1.4;
	box-sizing: border-box;
}

.multitrade-shop-sidebar select {
	min-height: 0;
	padding: 0.2rem 0.4rem;
	font-size: 0.75rem;
	line-height: 1.4;
}

/* Price filter — make min/max inputs compact and centered */
.multitrade-shop-sidebar .wc-block-price-filter__controls {
	gap: 0.5rem;
}

.multitrade-shop-sidebar .wc-block-formatted-money-amount {
	text-align: center;
	max-width: 80px;
	padding: 0.15rem 0.25rem;
	font-size: 0.72rem;
}

/* Brand filter dropdown — reduce wrapper height */
.multitrade-shop-sidebar .wc-blocks-components-form-token-field-wrapper {
	min-height: 0;
}

.multitrade-shop-sidebar .wc-blocks-components-form-token-field-wrapper .components-form-token-field__input-container {
	padding: 0.15rem 0.4rem;
	min-height: 0;
	font-size: 0.75rem;
}

/* ============================================
   Category Attribute Filters
   ============================================ */

.multitrade-category-filters {
    background: var(--wp--preset--color--secondary-background);
    border-radius: 8px;
    padding: var(--wp--preset--spacing--30);
}

.multitrade-filter-heading {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--wp--preset--font-family--montserrat);
    margin: 0 0 0.5rem;
}

.mt-filter-group:first-of-type {
    border-top: 1px solid var(--wp--custom--input-border-color, #eee);
    padding-top: 0.5rem;
}

.mt-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--wp--preset--spacing--40);
    align-items: center;
}

.mt-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-family: var(--wp--preset--font-family--inter);
    background: var(--wp--preset--color--tertiary, #e67e22);
    color: #fff;
    border-radius: 999px;
    line-height: 1.3;
}

.mt-filter-chip__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-radius: 50%;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.mt-filter-chip__remove:hover {
    background: rgba(255, 255, 255, 0.45);
}

.mt-filter-chips__clear-all {
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-family: var(--wp--preset--font-family--inter);
    color: var(--wp--preset--color--contrast);
    background: none;
    border: 1px solid var(--wp--custom--input-border-color, #ddd);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.mt-filter-chips__clear-all:hover {
    border-color: var(--wp--preset--color--contrast);
}

.mt-filter-group {
    border-bottom: 1px solid var(--wp--custom--input-border-color, #eee);
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.mt-filter-group:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Hide empty paragraphs injected by WordPress block rendering */
.mt-filter-group > p {
    display: none;
}

.mt-filter-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: var(--wp--preset--font-family--inter);
    color: var(--wp--preset--color--contrast);
    text-align: left;
    margin-bottom: 0.3rem;
}

.mt-filter-group__toggle:hover {
    color: var(--wp--preset--color--tertiary, #e67e22);
}

.mt-filter-group__chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.mt-filter-group__toggle[aria-expanded="false"] .mt-filter-group__chevron {
    transform: rotate(-90deg);
}

.mt-filter-group__search {
    width: 100%;
    padding: 0.25rem 0.4rem;
    margin-bottom: 0.3rem;
    border: 1px solid var(--wp--custom--input-border-color, #ddd);
    border-radius: var(--wp--custom--input-border-radius, 4px);
    font-size: 0.72rem;
    font-family: var(--wp--preset--font-family--inter);
    color: var(--wp--preset--color--contrast);
    background: var(--wp--preset--color--base);
}

.mt-filter-group__search:focus {
    border-color: var(--wp--preset--color--tertiary);
    outline: none;
}

.mt-filter-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

.mt-filter-group__item {
    margin: 0;
    padding: 0;
}

.mt-filter-group__item--hidden {
    display: none;
}

.mt-filter-group__option {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0;
    font-size: 0.76rem;
    font-family: var(--wp--preset--font-family--inter);
    color: var(--wp--preset--color--contrast);
    cursor: pointer;
    transition: color 0.15s ease;
}

.mt-filter-group__option:hover {
    color: var(--wp--preset--color--tertiary, #e67e22);
}

.mt-filter-group__option input[type="checkbox"] {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
}

.mt-filter-group__name {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}

.mt-filter-group__count {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--wp--preset--color--secondary, #999);
    min-width: 1.5rem;
    text-align: right;
}

.mt-filter-group__show-more {
    display: block;
    width: 100%;
    padding: 0.15rem 0;
    margin-top: 0.2rem;
    border: none;
    background: none;
    color: var(--wp--preset--color--tertiary, #e67e22);
    font-size: 0.75rem;
    font-family: var(--wp--preset--font-family--inter);
    font-weight: 600;
    cursor: pointer;
    text-align: left;
}

.mt-filter-group__show-more:hover {
    text-decoration: underline;
}

@media (max-width: 781px) {
    .multitrade-category-filters {
        max-height: 400px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mt-filter-group__list {
        max-height: 180px;
    }
}