/*
 * RF Filters - the filter controls themselves.
 *
 * How an option looks, in both shapes it takes: a chip in the row that is always on
 * screen, and a row in a list inside the panel. Split out of the other two sheets
 * because this is the part that fights JetSmartFilters' own markup, and it is easier
 * to reason about with the shell out of the way.
 */

/* --------------------------------------------------------------- chip groups */

.rf-filters .rf-filters__primary {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rf-filters .rf-group--chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rf-gap);
}

.rf-filters .rf-group__label {
	flex: 0 0 100%;
	margin: 0;
	color: var(--rf-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/*
 * Flatten everything between the group and the chips so the chips are the flex
 * items and wrap as one run.
 *
 * There are FOUR levels, not three: JetSmartFilters adds `.jet-list-tree` when a
 * taxonomy filter has "group by parent" switched on, which Level does. That block
 * was the reason every chip sat on its own line - the tree collapsed to the width
 * of its widest child and everything wrapped inside it.
 *
 * display:flex first as the fallback; a browser without display:contents drops the
 * second declaration and still gets a wrapping row.
 */
.rf-filters .rf-group--chips .jet-smart-filters-checkboxes,
.rf-filters .rf-group--chips .jet-checkboxes-list,
.rf-filters .rf-group--chips .jet-checkboxes-list-wrapper,
.rf-filters .rf-group--chips .jet-list-tree {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	gap: var(--rf-gap);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.rf-filters .rf-group--chips .jet-smart-filters-checkboxes,
.rf-filters .rf-group--chips .jet-checkboxes-list,
.rf-filters .rf-group--chips .jet-checkboxes-list-wrapper,
.rf-filters .rf-group--chips .jet-list-tree {
	display: contents;
}

.rf-filters .rf-group--chips .jet-filter-row {
	margin: 0;
	padding: 0;
}

.rf-filters .rf-group--chips .jet-checkboxes-list__item {
	display: block;
	margin: 0;
	cursor: pointer;
}

.rf-filters .rf-group--chips .jet-checkboxes-list__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius);
	background: var(--rf-surface);
	color: var(--rf-text);
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out;
}

.rf-filters .rf-group--chips .jet-checkboxes-list__decorator {
	display: none;
}

.rf-filters .rf-group--chips .jet-checkboxes-list__item:hover .jet-checkboxes-list__button {
	border-color: var(--rf-primary);
	color: var(--rf-primary);
}

.rf-filters .rf-group--chips .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button {
	border-color: var(--rf-chip-on);
	background: var(--rf-chip-on);
	color: #fff;
	font-weight: 600;
}

.rf-filters .rf-group--chips .jet-checkboxes-list__input:focus-visible ~ .jet-checkboxes-list__button {
	outline: 2px solid var(--rf-focus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------- list groups */

.rf-filters .rf-group--list .jet-checkboxes-list__row {
	display: block;
}

.rf-filters .rf-group--list .jet-checkboxes-list__item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--rf-tap);
	margin: 0;
	padding: 2px 0;
	cursor: pointer;
}

.rf-filters .rf-group--list .jet-checkboxes-list__button {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.rf-filters .rf-group--list .jet-checkboxes-list__decorator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius-sm);
	background: var(--rf-surface);
	color: transparent;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

/*
 * JetSmartFilters' tick is a FILLED svg, not a stroked one, and it ships without a
 * fill of its own - so it paints solid black and every checkbox looks ticked before
 * anybody has touched it. currentColor hands it back to the decorator above, which
 * is transparent until the input is checked.
 */
.rf-filters .rf-group--list .jet-checkboxes-list__decorator svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	stroke: currentColor;
}

.rf-filters .rf-group--list .jet-checkboxes-list__input:checked ~ .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
	border-color: var(--rf-chip-on);
	background: var(--rf-chip-on);
	color: #fff;
}

.rf-filters .rf-group--list .jet-checkboxes-list__input:focus-visible ~ .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
	outline: 2px solid var(--rf-focus);
	outline-offset: 2px;
}

.rf-filters .rf-group--list .jet-checkboxes-list__label {
	flex: 1 1 auto;
	min-width: 0;
}

.rf-filters .jet-filter-items-search {
	position: relative;
	margin: 4px 0 10px;
}

.rf-filters .jet-filter-items-search__input {
	width: 100%;
	height: 40px;
	padding: 0 34px 0 12px;
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius-sm);
	background: var(--rf-surface-2);
	font-size: 16px;
}

.rf-filters .jet-filter-items-search__clear {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	cursor: pointer;
	color: var(--rf-muted);
}

/* Same filled-svg story as the tick: without a size and a fill it draws huge and
   black over the search box. */
.rf-filters .jet-filter-items-search__clear svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
}

/*
 * type="search" makes the browser draw a clear button of its own, so the field ends
 * up with two crosses side by side. The browser's one empties the value without
 * telling JetSmartFilters, which leaves the list filtered down to nothing. Only
 * JetSmartFilters' cross survives.
 */
.rf-filters .jet-filter-items-search__input::-webkit-search-cancel-button,
.rf-filters .jet-filter-items-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.rf-filters .jet-filter-items-moreless {
	margin-top: 4px;
}

.rf-filters .jet-filter-items-moreless__toggle {
	display: inline-flex;
	align-items: center;
	min-height: var(--rf-tap);
	color: var(--rf-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

/*
 * Trap 3 in the masterplan, one more time, and this one was live for an hour.
 *
 * JetSmartFilters marks a dead option by adding .jet-filter-row-hide to the row. The
 * row in a list group already carries .jet-checkboxes-list__row, and the rule that
 * lays those out is .rf-filters .rf-group--list .jet-checkboxes-list__row at (0,3,0)
 * - which beats a bare (0,2,0) hide and paints the row back in. The chips escaped it
 * because their rules target the item, not the row, so Level looked right on screen
 * while Grammar quietly showed 101 options reading (0).
 *
 * The second selector is (0,4,0) and cannot lose to it.
 */
.rf-filters .jet-filter-row-hide,
.rf-filters .rf-group--list .jet-checkboxes-list__row.jet-filter-row-hide {
	display: none;
}

/* ------------------------------------------------------------ scrolling lists */

/*
 * A group that scrolls instead of carrying a Show more link. The height is the
 * number of rows the group was configured for, so it takes the same room it took
 * when it was eight items and a link, and --rf-rows is printed on the group.
 *
 * The scroller is the list, not the group, so the in-list search box stays put at
 * the top while the options move under it.
 */
.rf-filters .rf-group--scroll .jet-checkboxes-list-wrapper {
	max-height: calc(var(--rf-rows, 8) * var(--rf-tap));
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.rf-filters .rf-group--scroll .jet-checkboxes-list-wrapper::-webkit-scrollbar {
	width: 6px;
}

.rf-filters .rf-group--scroll .jet-checkboxes-list-wrapper::-webkit-scrollbar-thumb {
	background: var(--rf-line);
	border-radius: 3px;
}

/* Nothing to scroll to when Show more is gone as well. */
.rf-filters .rf-group--scroll .jet-filter-items-moreless {
	display: none;
}

/* ------------------------------------------------- counts that cannot be honest */

/*
 * rf-filters.js marks a group that already has something chosen in it. Inside one
 * filter the terms are OR'd, so a second choice widens the result - but the indexer
 * counts every option against the choice already made and returns (0) for all of
 * them. Showing no number beats showing a wrong one, and the dimming has to go with
 * it or the options look dead.
 *
 * Not in a group that hides dead options: there the only rows left are the ones that
 * do occur with the choice, so their number is the true "how many of these results
 * are also A1", and it is the number the client's own site prints beside a ticked
 * box. Deleting it there would be deleting what he asked for.
 */
.rf-filters .rf-group--chosen:not(.rf-group--hides) .jet-filters-counter {
	display: none;
}

.rf-filters .rf-group--chosen .rf-row--empty {
	opacity: 1;
}
@media (max-width: 399px) {
    .rf-filters .rf-group--level {
        --rf-gap: 6px;
    }

    .rf-filters .rf-group--level .jet-checkboxes-list__button {
        padding-inline: 9px;
    }
}