/*
 * Carr & Day & Martin — facet styling for crm-wp-client-filters.
 *
 * Ported from the theme's filter-everything-pro rules in ui/stylesheet/custom.css
 * and custom-home.css so the panel keeps its existing look. Every selector is
 * scoped under .fe-instance because the plugin prints its own base CSS inline in
 * the body, which would otherwise win on source order at equal specificity.
 *
 * The category bar colour comes from --fe-term-color, set per <li> in
 * cdm/fe-filters.php from the term's pcb_content_color meta.
 */

/* ---- panel ------------------------------------------------------------- */
.fe-instance .fe-group {
	background-color: #fff;
	border-radius: 0;
	margin-bottom: 0;
	position: relative;
}

.fe-instance .fe-group-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	cursor: pointer;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 21px;
	margin-bottom: 0;
	padding: 15px 20px;
	text-transform: uppercase;
}

/* The old header was 65px tall: 15 padding + a 21px title line + a 14px margin
   below the title + 15 padding. Reproduce it with that same margin — NOT with a
   border-bottom, which draws a line the original never had. */
.fe-instance .fe-group-head > span:first-child {
	margin-bottom: 14px;
}

/* +/- affordance: an 18px circle carrying the theme's own plus/minus svg,
   as .wpc-filter-header:after did. Paths are relative to this stylesheet. */
.fe-instance .fe-group-head .fe-toggle {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
	position: absolute;
	right: 10px;
	top: 50%;
	margin-top: -9px;
	border-radius: 50%;
	background-image: url(../media/images/plus-gray.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
}

.fe-instance .fe-group.open .fe-group-head .fe-toggle {
	background-image: url(../media/images/minus-gray.svg);
}

/* the plugin draws its toggle with pseudo-element bars; the svg replaces them */
.fe-instance .fe-group-head .fe-toggle::before,
.fe-instance .fe-group-head .fe-toggle::after {
	content: none;
}

/* ---- term list --------------------------------------------------------- */
.fe-instance .fe-group-body {
	padding: 0 20px 14px;
}

.fe-instance .fe-group-body > ul > .fe-term {
	margin: 0;
	padding-bottom: 10px;
}

.fe-instance .fe-term-row {
	position: relative;
}

.fe-instance .fe-group-body label {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 500;
	line-height: 21px; /* 10 + 21 + 10 = 41px bar, matching the old label box */
	margin: 0;
	color: #1b1c20;
	position: relative;
	padding: 4px 30px 4px 0;
	width: 100%;
	transition: ease all 0.5s;
}

.fe-instance .fe-box {
	width: 18px;
	height: 18px;
	border: 1px solid #707070;
	border-radius: 3px;
	background: transparent;
	margin: 0 10px 0 0;
}

.fe-instance .fe-filter:checked + .fe-box {
	border-color: #000;
	background: #000;
}

.fe-instance .fe-filter:checked + .fe-box::after {
	border-color: #fff;
}

/* ---- top-level category bars ------------------------------------------ *
 * Only terms carrying a colour get the bar treatment, so children stay plain.
 * Matches the old  li#wpc-term-taxonomy-product-category-<id> label  rules:
 * background + padding 10px 15px 10px 40px, white text, white checkbox border
 * at left:15px/top:11px, white expander at right:15px/top:7px.
 */
.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row {
	background-color: var(--fe-term-color);
	padding: 10px 15px 10px 40px;
}

.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row label {
	padding: 0;
	color: #fff;
	font-weight: 500;
}

/* The coloured bar lives on .fe-term-row, so the checkbox must position against
   the row, not the label — otherwise it inherits the row's 10px top padding and
   drops out of the shorter bars. Mirrors the old
   label::before { left:15px; top:11px }. */
.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row label {
	position: static;
}

.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row .fe-box {
	position: absolute;
	left: 15px;
	top: 11px;
	margin: 0;
	border-color: #fff;
	background: transparent;
}

.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row .fe-filter:checked + .fe-box {
	background: #fff;
	border-color: #fff;
}

.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row .fe-filter:checked + .fe-box::after {
	border-color: var(--fe-term-color);
}

/* the old  label + i  expander: a 24x34 box at right:15px/top:7px drawing a
   white +, collapsing to a - when the term is open */
.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row .fe-child-toggle {
	width: 24px;
	height: 34px;
	right: 15px;
	top: 7px;
	margin-top: 0;
}

.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row .fe-child-toggle::before {
	top: 16px;
	left: 6px;
	width: 12px;
	height: 2px;
	background-color: #fff;
}

.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-term-row .fe-child-toggle::after {
	top: 11px;
	left: 11px;
	width: 2px;
	height: 12px;
	background-color: #fff;
}

/* ---- expanded children -------------------------------------------------- *
 * Deliberately NOT the old design. The original carried the parent's colour
 * down onto each child as its own filled bar; that was tried and rejected
 * (2026-08-02) in favour of plain text in the parent's colour, which reads
 * more clearly against the filled parent above it. Do not "restore" the fill.
 */
.fe-instance .fe-group-body > ul > .fe-term[style*="--fe-term-color"] > .fe-children label {
	color: var(--fe-term-color);
	font-size: 13px;
}

/* indent the child list so its checkboxes sit nested under the parent bar,
   matching the 20px inset the old design used on ul.children */
.fe-instance .fe-group-body ul.fe-children {
	padding-left: 0;
	margin: 10px 0 0 20px;
}

.fe-instance .fe-group-body ul.fe-children > .fe-term {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* ---- chips ------------------------------------------------------------- */
.fe-instance .fe-chips {
	margin-bottom: 1.25rem;
}

/* square corners, not the plugin's default 50px pill — covers the term chips
   and "Reset all" alike, both of which carry .fe-chip */
.fe-instance .fe-chip {
	border-radius: 0;
}