/**
 * CodeBold Smart Filters.
 *
 * Every rule is inside .codebold-filters, because this lands in a theme nobody has
 * tested against and a stray rule on ul or a would rearrange somebody's shop.
 *
 * Colours come from custom properties with sensible fallbacks, so a theme can restyle
 * the panel by setting three variables rather than fighting specificity.
 */

.codebold-filters {
	--cbf-ink: var( --codebold-filters-ink, #1b2733 );
	--cbf-soft: var( --codebold-filters-soft, #5c6b79 );
	--cbf-faint: var( --codebold-filters-faint, #93a0ac );
	--cbf-line: var( --codebold-filters-line, #e2e7ec );
	--cbf-accent: var( --codebold-filters-accent, #2f6fed );
	--cbf-surface: var( --codebold-filters-surface, #fff );
	--cbf-radius: var( --codebold-filters-radius, 9px );

	margin: 0 0 26px;
	font-size: 14px;
	line-height: 1.5;
	color: var( --cbf-ink );
}

.codebold-filters * {
	box-sizing: border-box;
}

.codebold-filters-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 10px;
}

.codebold-filters-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var( --cbf-faint );
}

.codebold-filters-clear {
	font-size: 13px;
	font-weight: 600;
	color: var( --cbf-accent );
	text-decoration: none;
}

.codebold-filters-clear:hover {
	text-decoration: underline;
}

/* Groups sit side by side above a product grid and stack in a sidebar, without the
   panel needing to know which it is in. */
.codebold-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 30px;
}

.codebold-filters-head {
	flex: 1 0 100%;
	margin-bottom: 0;
}

.codebold-filter-group {
	min-width: 150px;
}

.codebold-filter-legend {
	margin: 0 0 7px;
	padding: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var( --cbf-faint );
	border: 0;
}

.codebold-filter-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.codebold-filter-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.codebold-filter {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 5px 8px 5px 4px;
	border-radius: var( --cbf-radius );
	text-decoration: none;
	color: var( --cbf-ink );
	transition: background .12s ease;
}

.codebold-filter:hover {
	background: rgba( 47, 111, 237, .06 );
	color: var( --cbf-ink );
}

.codebold-filter-box {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	border: 1.5px solid var( --cbf-line );
	border-radius: 5px;
	background: var( --cbf-surface );
	position: relative;
}

.codebold-filter.is-chosen .codebold-filter-box {
	border-color: var( --cbf-accent );
	background: var( --cbf-accent );
}

.codebold-filter.is-chosen .codebold-filter-box::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate( 45deg );
}

.codebold-filter-name {
	flex: 1;
}

.codebold-filter.is-chosen .codebold-filter-name {
	font-weight: 600;
}

.codebold-filter-count {
	font-size: 12px;
	color: var( --cbf-faint );
	font-variant-numeric: tabular-nums;
}

/* Shown, not hidden. An option that disappears as you click makes the panel feel
   unstable, and a shopper cannot learn that there are no red jeans if "red" vanishes. */
.codebold-filter.is-empty {
	opacity: .42;
	pointer-events: none;
}

/* While the script is fetching the next set of results.

   The dimming is on the contents and never on the panel itself. opacity applies to an
   element's own background as well as its children, and on a phone this panel is the
   whole screen — so dimming the panel made the entire page behind it show through for as
   long as the request took. On a desktop sidebar that reads as a subtle grey; on a phone
   over a slow connection it reads as completely broken, and it is what was reported. */
.codebold-filters.is-busy {
	pointer-events: none;
}

.codebold-filters.is-busy .codebold-filters-head,
.codebold-filters.is-busy .codebold-pills,
.codebold-filters.is-busy .codebold-filter-group {
	opacity: .5;
	transition: opacity .12s ease;
}

@media screen and ( max-width: 600px ) {
	.codebold-filters {
		gap: 14px 20px;
	}

	.codebold-filter-group {
		flex: 1 0 45%;
	}
}

/* Layout, when the panel is placed deliberately rather than inserted above the grid.
   The default stays "fit the space", because a panel that guesses wrong in a sidebar is
   more annoying than one that simply wraps. */

.codebold-filters.is-stacked {
	display: block;
}

.codebold-filters.is-stacked .codebold-filter-group {
	margin-bottom: 22px;
}

.codebold-filters.is-stacked .codebold-filter-group:last-child {
	margin-bottom: 0;
}

.codebold-filters.is-stacked .codebold-filters-head {
	margin-bottom: 14px;
}

.codebold-filters.is-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

.codebold-filters.is-inline .codebold-filter-group {
	flex: 0 1 auto;
}

/* Only ever seen inside the Elementor editor, where there is no shop query to filter
   and an empty widget would read as a broken one. */
.codebold-filters-placeholder {
	padding: 18px 20px;
	border: 1px dashed #c3c9d0;
	border-radius: 9px;
	background: #f7f8fa;
	color: #5c6b79;
	font-size: 13px;
	line-height: 1.55;
}