/*
 * RF Filters - the always-visible part of the bar.
 *
 * Two layouts, one markup. Under 768px the More filters panel is a bottom sheet;
 * from 768px up it flattens into the column it sits in, which is the existing
 * desktop sidebar. Nothing is duplicated and nothing is hidden per breakpoint, so
 * desktop and mobile cannot drift apart again.
 *
 * Colours are read off the live site and exposed as variables, so the whole thing
 * re-skins from the top of this file. The options themselves live in
 * rf-filters-controls.css, the sheet and the responsive rules in
 * rf-filters-panel.css.
 */

.rf-filters {
	--rf-primary: #1856dd;
	--rf-ink: #1b3f8d;
	/* The site's magenta. Deliberately not used on any control in this bar: next to
	   the blue chips it reads as a second, competing accent. Kept for anything that
	   genuinely needs attention later. */
	--rf-accent: #cc3366;
	--rf-text: #333;
	--rf-muted: #6b7280;
	--rf-line: #e0e0e0;
	--rf-surface: #fff;
	--rf-surface-2: #f6f7f9;
	--rf-chip-on: #1856dd;
	--rf-focus: #1856dd;
	--rf-radius: 8px;
	--rf-radius-sm: 4px;
	--rf-gap: 8px;
	--rf-tap: 44px;
	--rf-z: 9990;
	--rf-ease: cubic-bezier(0.32, 0.72, 0, 1);

	position: relative;
	/* The widget this replaces can be an out-of-flow overlay, so the bar states its
	   own width rather than inheriting one. */
	width: 100%;
	max-width: 100%;
	color: var(--rf-text);
	font-size: 16px;
	line-height: 1.5;
	text-align: left;
	overflow-wrap: break-word;
}

.rf-filters *,
.rf-filters *::before,
.rf-filters *::after {
	box-sizing: border-box;
}

/*
 * The theme paints every button on this site with a pink 1px border, 8px 16px of
 * padding and a 3px radius, and it does it from a selector that beats a bare class
 * of ours. Every rule below is therefore written as `.rf-filters .thing` rather
 * than `.thing`, and the reset here catches anything not styled explicitly.
 */
.rf-filters button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
}

/*
 * And the theme's reset.css goes further:
 *
 *   button:focus, button:hover { background-color: #cc3366; color: #fff }
 *
 * which is why tapping "Topic" turned the whole accordion row magenta. That
 * selector is (0,1,1), so the reset has to be (0,2,1) to beat it. Every state a
 * control of ours actually wants is defined at (0,3,1) further down and still wins.
 */
.rf-filters button:hover,
.rf-filters button:focus,
.rf-filters button:active,
.rf-filters [type="button"]:hover,
.rf-filters [type="button"]:focus,
.rf-filters [type="button"]:active {
	background: none;
	color: inherit;
	text-decoration: none;
}

.rf-filters :focus-visible {
	outline: 2px solid var(--rf-focus);
	outline-offset: 2px;
	border-radius: var(--rf-radius-sm);
}

.rf-filters .rf-icon {
	flex: 0 0 auto;
}

/* display:inline-flex further down would otherwise beat the hidden attribute. */
.rf-filters .rf-more__badge[hidden],
.rf-filters .rf-acc__count[hidden] {
	display: none;
}

/* --------------------------------------------------------------------- intro */

.rf-filters .rf-filters__intro {
	margin-bottom: 14px;
}

.rf-filters .rf-filters__heading {
	margin: 0 0 4px;
	color: var(--rf-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
}

.rf-filters .rf-filters__subheading {
	margin: 0;
	color: var(--rf-muted);
	font-size: 15px;
}

/* ---------------------------------------------------------------- active row */

/*
 * JetSmartFilters builds the inside of this itself, from templates/for-js. The
 * class names below are its, read out of public.js: the widget gets
 * .jet-active-tags__title and .jet-active-tags__list, and each chip is
 * .jet-active-tag with __label, __val and __remove inside.
 *
 * Laid out as the wireframe draws it: the words "Active filters" on the left,
 * "Clear all" on the right, the chips wrapping underneath.
 */

.rf-filters .rf-filters__active {
	display: flex;
	align-items: flex-start;
	gap: var(--rf-gap);
	margin-bottom: 14px;
}

/* rf-filters.js adds this while nothing is applied. */
.rf-filters .rf-filters__active.is-empty {
	display: none;
}

.rf-filters .rf-filters__active .jet-active-tags {
	flex: 1 1 auto;
	min-width: 0;
}

.rf-filters .rf-filters__active .jet-active-tags__title {
	margin-bottom: 6px;
	color: var(--rf-ink);
	font-size: 14px;
	font-weight: 700;
}

.rf-filters .rf-filters__active .jet-active-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.rf-filters .rf-filters__active .jet-active-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 4px 6px 4px 10px;
	border: 1px solid var(--rf-line);
	border-radius: 999px;
	background: var(--rf-surface-2);
	font-size: 14px;
	line-height: 1.2;
}

/* The wireframe shows bare values - B1, Teens, Video - not "Level: B1". */
.rf-filters .rf-filters__active .jet-active-tag__label {
	display: none;
}

.rf-filters .rf-filters__active .jet-active-tag__val {
	overflow-wrap: anywhere;
}

.rf-filters .rf-filters__active .jet-active-tag__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	color: var(--rf-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.rf-filters .rf-filters__active .jet-active-tag__remove:hover {
	background: rgba(0, 0, 0, 0.08);
	color: var(--rf-text);
}

.rf-filters .jet-remove-all-filters.hide {
	display: none;
}

.rf-filters .jet-remove-all-filters__button {
	flex: 0 0 auto;
	min-height: 32px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--rf-primary);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
	cursor: pointer;
}

.rf-filters .jet-remove-all-filters__button:hover {
	color: #1247bb;
}

/* -------------------------------------------------------------------- search */

.rf-filters .rf-filters__search {
	margin-bottom: 14px;
}

.rf-filters .jet-search-filter {
	position: relative;
	display: block;
}

.rf-filters .jet-search-filter__input-wrapper {
	display: block;
}

.rf-filters .jet-search-filter__input {
	width: 100%;
	height: 48px;
	padding: 0 14px 0 44px;
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius);
	background: var(--rf-surface);
	font-size: 16px; /* under 16px iOS zooms the page on focus */
	color: var(--rf-text);
}

.rf-filters .jet-search-filter__input::placeholder {
	color: var(--rf-muted);
}

.rf-filters .jet-search-filter__submit {
	position: absolute;
	top: 0;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--rf-muted);
	cursor: pointer;
}

.rf-filters .jet-search-filter__submit:hover {
	color: var(--rf-primary);
}

.rf-filters .jet-search-filter__submit-text {
	display: none;
}

/* ------------------------------------------------------------ groups: shared */

.rf-filters .jet-checkboxes-list-wrapper {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

/*
 * The tick box itself is hidden and still focusable - that is what makes a row work
 * from the keyboard - and the input below is taken out of flow to do it.
 *
 * Out of flow it needs something to be positioned against, and the only positioned
 * ancestor was .rf-filters, the whole bar. So the input did not move when a list
 * scrolled: the rows slid up under the mouse and the input stayed where it had been.
 * Clicking a row thirty down the Grammar list focused an input 859px further down the
 * page, and the browser scrolled the page to it - the client filmed it and drew a
 * circle round the row he had clicked.
 *
 * One line fixes it: the row is the thing the input is positioned against, so the two
 * can never come apart, in the group's own scroller, in the sheet, or on the page.
 */
.rf-filters .jet-checkboxes-list__item {
	position: relative;
}

.rf-filters .jet-checkboxes-list__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rf-filters .jet-filters-counter {
	margin-left: 6px;
	color: var(--rf-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.rf-filters .rf-row--empty {
	opacity: 0.45;
}

/* --------------------------------------------------------- more filters button */

.rf-filters .rf-filters__actions {
	margin-top: 12px;
}

.rf-filters .rf-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--rf-line);
	border-radius: var(--rf-radius);
	background: var(--rf-surface);
	color: var(--rf-text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease-out, color 0.15s ease-out;
}

/* Same reason as the Apply button: spell the states out so the neutralising reset
   cannot strip the white background off. */
.rf-filters .rf-more:focus,
.rf-filters .rf-more:active {
	background: var(--rf-surface);
	color: var(--rf-text);
}

.rf-filters .rf-more:hover {
	border-color: var(--rf-primary);
	background: var(--rf-surface);
	color: var(--rf-primary);
}

.rf-filters .rf-more .rf-icon {
	width: 18px;
	height: 18px;
}

.rf-filters .rf-more__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--rf-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- count row */

.rf-filters .rf-filters__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rf-gap);
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--rf-line);
}

.rf-filters .rf-count {
	margin: 0;
	color: var(--rf-ink);
	font-size: 15px;
}

.rf-filters .rf-count__value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/*
 * The bar is printed before the listing has run its query, so the number is usually
 * not known yet and rf-filters.js fills it in. visibility rather than display, so
 * the row still takes its space and nothing below it jumps when the number lands.
 */
.rf-filters .rf-count.is-pending {
	visibility: hidden;
}


/* The panel, the accordion and the responsive rules live in rf-filters-panel.css. */