/**
 * Search box and show-more toggle injected around the longer product filter lists.
 *
 * @package cisjoe
 */

.cisjoe-hidden {
	display: none !important;
}

.cisjoe-filter-search {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-bottom: 12px;
	box-sizing: border-box;
}

.cisjoe-filter-search *,
.cisjoe-filter-search *::before,
.cisjoe-filter-search *::after {
	box-sizing: border-box;
}

/* Doubled class: the theme styles .widget input[type="search"], which outranks a single class. */
.cisjoe-filter-search .cisjoe-filter-search__input,
.cisjoe-filter-search input.cisjoe-filter-search__input[type="search"] {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	/* Logical properties keep the clear button clear of the text in both LTR and RTL. */
	margin: 0;
	padding-block: 9px;
	padding-inline: 12px 32px;
	font-size: 13px;
	font-family: inherit;
	line-height: 1.4;
	color: inherit;
	background-color: var(--wd-form-bg, transparent);
	border: 1px solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.12));
	border-radius: var(--wd-form-brd-radius, 4px);
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cisjoe-filter-search .cisjoe-filter-search__input::placeholder {
	color: inherit;
	opacity: 0.5;
}

.cisjoe-filter-search .cisjoe-filter-search__input:focus {
	outline: none;
	border-color: var(--wd-primary-color, #333);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* The custom clear button replaces the browser's, which sits in the wrong place in RTL. */
.cisjoe-filter-search .cisjoe-filter-search__input::-webkit-search-cancel-button {
	display: none;
}

.cisjoe-filter-search .cisjoe-filter-search__clear {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-end: 4px;
	transform: translateY(-50%);
	display: none;
	width: 24px;
	height: 24px;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.cisjoe-filter-search .cisjoe-filter-search__clear.is-visible {
	display: block;
}

.cisjoe-filter-search .cisjoe-filter-search__clear:hover,
.cisjoe-filter-search .cisjoe-filter-search__clear:focus-visible {
	opacity: 1;
	background-color: rgba(0, 0, 0, 0.06);
}

.cisjoe-filter-search__status {
	margin: 8px 0 0;
	font-size: 12px;
	opacity: 0.6;
}

.cisjoe-filter-search__status:empty {
	display: none;
}

/* The theme styles every button through :is(.btn,.button,button,...), which ties a single class and
   wins on source order. Qualify with the element to outrank it. */
.widget button.cisjoe-filter-toggle {
	display: inline-block;
	margin-top: 10px;
	padding: 7px 14px;
	font-size: 13px;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.4;
	color: inherit;
	background: none;
	border: 1px solid var(--wd-form-brd-color, rgba(0, 0, 0, 0.12));
	/* Matches the search box above it. The theme's --btn-*-brd-radius vars are declared on button
	   classes rather than :root, so a plain <button> cannot inherit them. */
	border-radius: var(--wd-form-brd-radius, 4px);
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.widget button.cisjoe-filter-toggle:hover,
.widget button.cisjoe-filter-toggle:focus-visible {
	border-color: currentColor;
	background-color: rgba(0, 0, 0, 0.03);
}

/* WooCommerce's price slider is left-to-right only. Mirror it so the minimum sits on the right.
   The matching pointer maths lives in filter-search.js - without it, dragging would run backwards. */
.rtl .widget[id^="cisjoe-filter-"] .price_slider {
	transform: scaleX(-1);
}

/* The theme's --btn-brd-radius is 0px, so match the form radius instead and keep both buttons alike. */
.widget[id^="cisjoe-filter-"] button.button,
.widget[id^="cisjoe-filter-"] button[type="submit"] {
	border-radius: var(--wd-form-brd-radius, 4px);
}

/* The theme strips the spacing off .widget:last-child; keep it so the final filter breathes like the rest. */
.widget[id^="cisjoe-filter-"]:last-child {
	padding-bottom: 30px;
}

/* Keep long lists from pushing the rest of the sidebar off-screen once expanded. */
.cisjoe-filter-search ~ .woocommerce-widget-layered-nav-list {
	max-height: 420px;
	overflow-y: auto;
	scrollbar-width: thin;
}