/*
 * CatCode Smart Filter — storefront styles (WooCommerce).
 *
 * Written to sit inside any WooCommerce theme sidebar without fighting it:
 * no !important, no resets, no font or colour declarations beyond what the
 * widget itself draws. Sizes are in rem so a theme's own scale carries through.
 */

.ccf { position: relative; }

.ccf__heading { font-weight: 600; }
.ccf__total { font-size: .8125rem; opacity: .7; }

.ccf.is-busy .ccf__panel { opacity: .55; pointer-events: none; }
.ccf-loading { opacity: .5; transition: opacity .15s ease; }

/* --- chips ------------------------------------------------------------- */

.ccf__chips {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	padding: .75rem 1rem 0;
}

.ccf__chip {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .1875rem .5rem;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 1rem;
	font-size: .8125rem;
	line-height: 1.4;
	text-decoration: none;
}

.ccf__chip:hover { border-color: rgba(0, 0, 0, .35); }
.ccf__chip-x { font-style: normal; opacity: .55; }
.ccf__chip--clear { border-style: dashed; }

/* --- facets ------------------------------------------------------------ */

.ccf__facet + .ccf__facet {
	margin-top: .875rem;
	border-top: 1px solid rgba(0, 0, 0, .08);
	padding-top: .875rem;
}

.ccf__facet-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.ccf__caret {
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: .5;
	transition: transform .15s ease;
}

.ccf__facet.is-collapsed .ccf__caret { transform: rotate(-45deg); }
.ccf__facet.is-collapsed .ccf__facet-body,
.ccf__facet.is-collapsed .ccf__hint { display: none; }

.ccf__hint { margin-top: .25rem; font-size: .75rem; opacity: .65; }
.ccf__facet-body { margin-top: .5rem; }
.ccf__search { margin-bottom: .5rem; }

/* --- value lists -------------------------------------------------------- */

.ccf__values {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 22rem;
	overflow-y: auto;
}

.ccf__value--extra { display: none; }
.ccf__facet.is-expanded .ccf__value--extra { display: block; }

.ccf__value-link {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .1875rem 0;
	text-decoration: none;
	color: inherit;
}

.ccf__box {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	border: 1px solid rgba(0, 0, 0, .3);
	border-radius: .1875rem;
	position: relative;
}

.ccf__box--radio { border-radius: 50%; }

.ccf__value.is-selected .ccf__box {
	border-color: currentColor;
	background: currentColor;
}

.ccf__value.is-selected .ccf__box::after {
	content: '';
	position: absolute;
	left: .1875rem;
	top: .0625rem;
	width: .3125rem;
	height: .5625rem;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(40deg);
}

.ccf__label { flex: 1 1 auto; }
.ccf__count { font-size: .75rem; opacity: .55; }

/* A zero-count value stays clickable-looking but reads as unavailable: hiding it
   outright is the other supported mode, chosen in the settings. */
.ccf__value.is-disabled { opacity: .4; }
.ccf__value.is-disabled .ccf__value-link { pointer-events: none; }

.ccf__more { padding-left: 0; }

/* --- swatches ----------------------------------------------------------- */

.ccf__swatches { display: flex; flex-wrap: wrap; gap: .375rem; }

.ccf__swatch {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .1875rem;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: .25rem;
	text-decoration: none;
	color: inherit;
	font-size: .8125rem;
}

.ccf__swatch.is-selected { border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }
.ccf__swatch.is-disabled { opacity: .35; pointer-events: none; }
.ccf__swatch img { width: 1.5rem; height: 1.5rem; object-fit: cover; border-radius: .1875rem; }

.ccf__swatch-color {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: .1875rem;
	display: inline-block;
}

/* --- range -------------------------------------------------------------- */

.ccf__range-inputs { display: flex; gap: .5rem; }

.ccf__range-field { flex: 1 1 0; font-size: .75rem; opacity: .8; }

.ccf__range-field input {
	display: block;
	width: 100%;
	padding: .25rem .5rem;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: .25rem;
	font-size: .875rem;
}

.ccf__slider { position: relative; height: 1.75rem; margin-top: .5rem; }

.ccf__slider-track {
	position: absolute;
	left: 0;
	right: 0;
	top: .75rem;
	height: .25rem;
	border-radius: .125rem;
	background: rgba(0, 0, 0, .12);
}

.ccf__slider-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	background: currentColor;
	opacity: .55;
	border-radius: .125rem;
}

/* Two native range inputs stacked: no slider library, so nothing to conflict
   with the theme's own JS and nothing to load from a CDN. */
.ccf__slider input[type='range'] {
	position: absolute;
	left: 0;
	width: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.ccf__slider input[type='range']::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid currentColor;
	cursor: pointer;
}

.ccf__slider input[type='range']::-moz-range-thumb {
	pointer-events: auto;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: #fff;
	border: 2px solid currentColor;
	cursor: pointer;
}

/* --- mobile drawer ------------------------------------------------------- */

.ccf__toggle { margin-bottom: .5rem; }
.ccf__badge { margin-left: .375rem; }

@media (max-width: 991.98px) {
	.ccf--drawer .ccf__panel { display: none; }
	.ccf--drawer.is-open .ccf__panel { display: block; }
}

@media (min-width: 992px) {
	.ccf__toggle { display: none; }
}