/* ==========================================================================
   Rise With Teagan — recipe library filter toolbar

   Design: Figma 1437-5874 (dropdowns + search) and 1437-5613 (active chips).

   Styles JetSmartFilters' own markup — nothing here changes behaviour, only
   how it looks. Class names come from the plugin:
     .jet-filter-items-dropdown__label   the pill
     .jet-filter-items-dropdown__body    the panel (shown by .jet-dropdown-open)
     .jet-checkboxes-list__item          a row inside the panel
     .jet-search-filter__input           the search box
     .jet-active-tag                     a chip  (--clear = the "Clear all" one)

   Everything is scoped under the widget class so it beats JetSmartFilters'
   single-class rules on specificity rather than on load order.
   ========================================================================== */

/* Scoped to body, NOT :root — Elementor defines its --e-global-* vars on
   body.elementor-kit-8, so a var() resolved at :root falls back to the hex and
   stops tracking the kit. */
body {
	--rwt-terracotta: var(--e-global-color-primary,   #BC5F50);
	--rwt-sienna:     var(--e-global-color-f220437,   #A14A3A);
	--rwt-espresso:   var(--e-global-color-text,      #3D322B);
	--rwt-taupe:      var(--e-global-color-c2248c7,   #887D78);
	--rwt-warm-cream: var(--e-global-color-accent,    #F5E9E2);
	--rwt-warm-white: var(--e-global-color-secondary, #FFFBF8);
	--rwt-tint:       var(--e-global-color-ec00e88,   #F0D5CF);
}

/* ------------------------------------------------------- the three pills -- */

.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	box-sizing: border-box;
	min-height: 48px;
	/* The design runs all three at ~240 so the row reads as one control set
	   rather than three differently-sized pills. min-width, not width, so a
	   long "N selected" counter can still push it wider. Dropped on mobile. */
	min-width: 240px;
	padding: 0 20px;
	border: 1px solid var(--rwt-terracotta);
	border-radius: 999px;
	background: transparent;
	color: var(--rwt-terracotta);
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	font-weight: var( --e-global-typography-primary-font-weight );
	line-height: var( --e-global-typography-primary-line-height );
	cursor: pointer;
	overflow: hidden;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Same hover language as the Save button — the tint fill. */
.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label:hover,
.jet-smart-filters-checkboxes .jet-dropdown-open .jet-filter-items-dropdown__label {
	background: var(--rwt-tint);
	border-color: transparent;
	color: var(--rwt-terracotta);
}

/* Drawn as a mask rather than a rotated bordered square. The square's ink sits
   in one corner of its own box, so its optical centre never matches the box
   centre — which is what left the arrow looking low and off to one side. A mask
   is centred by the flex row with no nudging, and the open state is a clean
   180 flip instead of a second rotation fighting a translate. */
.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label::after {
	content: "";
	/* ⚠️ JetSmartFilters positions this arrow `position:absolute; top:50%;
	   right:5px` and centres it with `transform: translateY(-50%)`. Any
	   transform of ours REPLACES that translate — which is why adding
	   rotate(180deg) made the arrow drop 7.5px instead of spinning on the spot.
	   Taking it out of absolute positioning makes it an ordinary flex item that
	   the row centres itself, so rotation is a pure spin with nothing to
	   preserve. It also sits on the label's 20px padding rather than the
	   plugin's 5px, which is why it looked jammed against the edge. */
	position: static;
	top: auto;
	right: auto;
	transform: none;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	border: 0;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.2s ease;
}

.jet-smart-filters-checkboxes .jet-dropdown-open .jet-filter-items-dropdown__label::after {
	transform: rotate(180deg);
}

/* Once something is ticked, JetSmartFilters REPLACES the label's contents with
   a summary of the selection — the placeholder text is gone from the DOM, not
   merely covered. So this can't be hidden without leaving an empty pill; it's
   styled to sit neatly instead, and truncated so a long selection can't blow
   the pill past its width.
   (The design keeps the pill reading "Meal Type" with the detail only in the
   chips below. That needs the label re-injected — see the note to Steve.) */
.jet-smart-filters-checkboxes .jet-filter-items-dropdown__active {
	min-width: 0;   /* lets a flex child actually shrink so ellipsis applies */
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.jet-smart-filters-checkboxes .jet-filter-items-dropdown__n-selected {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: var(--rwt-terracotta);
}

/* ------------------------------------------------------------ the panel -- */

.jet-smart-filters-checkboxes .jet-filter-items-dropdown__body {
	min-width: 100%;
	margin-top: 8px;
	padding: 8px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(61, 50, 43, 0.14);
}

.jet-smart-filters-checkboxes .jet-checkboxes-list-wrapper {
	margin: 0;
	padding: 0;
	border: 0;
}

.jet-smart-filters-checkboxes .jet-checkboxes-list__row {
	margin: 0;
}

.jet-smart-filters-checkboxes .jet-checkboxes-list__item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--rwt-espresso);
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	line-height: var( --e-global-typography-primary-line-height );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.jet-smart-filters-checkboxes .jet-checkboxes-list__item:hover {
	background: var(--rwt-warm-cream);
}

.jet-smart-filters-checkboxes .jet-checkboxes-list__input {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--rwt-terracotta);
}

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

.jet-smart-filters-search .jet-search-filter__input-wrapper {
	position: relative;
}

/* Magnifier drawn as a mask so it inherits the brand colour rather than being
   a fixed-colour image — the design has no icon element in the markup. */
.jet-smart-filters-search .jet-search-filter__input-wrapper::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background: var(--rwt-taupe);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}

.jet-smart-filters-search .jet-search-filter__input {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	/* left room for the magnifier, right room for the clear button */
	padding: 0 44px 0 46px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #fff;
	color: var(--rwt-espresso);
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	line-height: var( --e-global-typography-primary-line-height );
}

.jet-smart-filters-search .jet-search-filter__input::placeholder {
	color: var(--rwt-taupe);
	opacity: 1;   /* Firefox dims placeholders by default */
}

.jet-smart-filters-search .jet-search-filter__input:focus {
	border-color: var(--rwt-terracotta);
	outline: none;
}

.jet-smart-filters-search .jet-search-filter__input-clear {
	right: 16px;
	color: var(--rwt-taupe);
	cursor: pointer;
}

.jet-smart-filters-search .jet-search-filter__input-clear:hover {
	color: var(--rwt-terracotta);
}

/* ------------------------------------------------------- the chips row -- */

/* Three classes deep on purpose. JetSmartFilters styles these as
   `.jet-smart-filters-active-tags .jet-active-tag…` — also (0,2,0) — so a
   two-class selector here only wins if this stylesheet happens to load later.
   Going one deeper settles it on specificity instead of luck. */

.jet-smart-filters-active-tags .jet-active-tags__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--rwt-tint);
	color: var(--rwt-terracotta);
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	line-height: var( --e-global-typography-primary-line-height );
}

/* The taxonomy prefix ("Meal Type: Breakfast") isn't in the design — the chip
   carries the term alone. */
.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag__label,
.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag__label-separator {
	display: none;
}

/* ⚠️ The plugin pins this `position: absolute; top: 0; right: 0`, which parks
   the × in the chip's top-right corner like a superscript — 12px above centre.
   Putting it back in the flex row is what actually fixes the alignment; the
   size and colour below are cosmetic on top of that. */
.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag__remove {
	position: static;
	top: auto;
	right: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: currentColor;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}

.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag__remove:hover {
	opacity: 1;
	color: var(--rwt-sienna);
}

/* "Clear all" — outlined rather than filled, and pushed to the far end.
   It's the FIRST child in the markup, so `order` is what moves it visually
   last; `margin-left: auto` alone would shove the whole row right. */
.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag--clear {
	order: 99;
	margin-left: auto;
	background: transparent;
	border-color: var(--rwt-terracotta);
}

.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag--clear:hover {
	background: var(--rwt-tint);
	border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label,
	.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label::after,
	.jet-smart-filters-checkboxes .jet-checkboxes-list__item {
		transition: none;
	}
}

/* ------------------------------------------------------------ responsive -- */

/* Breakpoints follow the kit, which uses a CUSTOM mobile value:
   mobile <= 800, tablet 801-1200, desktop >= 1201. */

/* TABLET AND BELOW.
   The three pills sit in an Elementor container that is flex/nowrap, so the
   widgets shrink — but a fixed min-width on the control doesn't, and the pill
   then overflows its own widget and lands on top of the next one. Letting the
   control track its widget is what stops the overlap. */
@media (max-width: 1200px) {
	.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label {
		min-width: 0;
		width: 100%;
	}

	/* Without a min-width the widgets fall back to content width, so the three
	   pills come out uneven (Meal Type wide, Time narrow). Sharing the row
	   equally keeps the set reading as one control group, as it does on
	   desktop. `min-width: 0` is required — flex items refuse to shrink past
	   their content otherwise, which is the same thing that caused the
	   overlap. */
	.elementor-widget-jet-smart-filters-checkboxes {
		flex: 1 1 0;
		min-width: 0;
	}

	/* And the container holding them has to claim the leftover room, or it
	   shrinks to its own content and the pills end up cramped with a gap
	   sitting between them and the search box. */
	.e-con:has(> .elementor-widget-jet-smart-filters-checkboxes) {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* The panel is positioned against the dropdown, so it inherits the narrower
	   width — but a squeezed pill shouldn't squeeze the option list too. */
	.jet-smart-filters-checkboxes .jet-filter-items-dropdown__body {
		min-width: 220px;
	}

	/* Once the pill is narrow the label has to give way rather than push the
	   chevron out of the pill. */
	.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

/* Tighter horizontal padding once the pills are narrow, so the label keeps as
   much room as possible before it truncates. */
@media (max-width: 1000px) {
	.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label {
		gap: 8px;
		padding: 0 14px;
	}
}

/* MOBILE.
   Three pills plus a search box cannot share a 390px row — they'd compress to
   about 80px each. The containers are set to nowrap in Elementor, so they're
   allowed to wrap here and each control takes a full row.

   `:has()` is used because these are Elementor containers with generated class
   names and no stable hook of their own. It can also be done in the builder —
   Container > Layout > Wrap on the tablet/mobile breakpoint — which would be
   the tidier home for it if you'd rather own it there. */
@media (max-width: 800px) {
	.e-con:has(> .elementor-widget-jet-smart-filters-checkboxes),
	.e-con-inner:has(.jet-smart-filters-search) {
		flex-wrap: wrap;
	}

	.elementor-widget-jet-smart-filters-checkboxes,
	.elementor-widget-jet-smart-filters-search {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.jet-smart-filters-checkboxes .jet-filter-items-dropdown__label {
		padding: 0 18px;
	}

	/* Full-width pills make a full-width panel the natural match. */
	.jet-smart-filters-checkboxes .jet-filter-items-dropdown__body {
		min-width: 100%;
	}

	.jet-smart-filters-search .jet-search-filter__input {
		padding: 0 40px 0 44px;
	}
}

/* ==========================================================================
   The active-tag bar

   Steve moved this widget into the grid section, positioned it absolutely and
   gave it .rwt-recipe-tags, so the row can appear without shoving the grid
   down the page.
   ========================================================================== */

.rwt-recipe-tags .jet-smart-filters-active-tags.jet-active-tags.jet-filter {
	align-items: center;
	justify-content: center;
	padding: 16px 40px 12px 40px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
	/* Opaque on purpose — the bar floats over the top of the grid, so without a
	   fill the cards would read straight through it while it slides. */
	background: var(--rwt-warm-white);
}

.rwt-recipe-tags .jet-active-tags__list {
	max-width: 1300px;
	width: 100%;
}

/* --- the slide ---------------------------------------------------------
   The bar sits at top:0 of the grid section, and the filter section directly
   above it is position:relative with z-index 3 and a cream fill. So moving the
   bar up by its own height parks it entirely inside that section's area, behind
   it — and bringing it back to 0 reads as sliding out from underneath.

   `hide-widget` is Elementor's own display:none, applied by JetSmartFilters when
   nothing is selected. display:none can't be transitioned, so it's overridden —
   which needs to out-specify
   `body:not(.elementor-editor-active) .elementor-widget.hide-widget` (0,3,1). */

.rwt-recipe-tags {
	width: 100%;
	transform: translateY(0);
	opacity: 1;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

body:not(.elementor-editor-active) .elementor-widget.rwt-recipe-tags.hide-widget {
	display: block;   /* kept in the render tree so it has something to animate from */
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.rwt-recipe-tags {
		transition: none;
	}
}

/* ⚠️ The × glyph size is ALSO a widget control — Elementor > Style > Tags >
   Remove > Size — and Elementor emits it at
   `.elementor-{page} .elementor-element.elementor-element-{id} .jet-active-tag__remove`,
   which is (0,4,0) and beat the structural rule above. It's currently set to
   12px there, which is why the × looked tiny inside its 20px box.

   Overridden here so it's right now, but that does make the widget control
   inert: changing the size in Elementor will appear to do nothing until this
   rule is removed. Say the word and I'll drop it and you can own it in the
   builder instead. */
.rwt-recipe-tags .jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag .jet-active-tag__remove {
	font-size: 21px;
}

@media (max-width: 1000px) {
	.rwt-recipe-tags .jet-smart-filters-active-tags.jet-active-tags.jet-filter {
		padding: 14px 24px 10px 24px;
	}
}

@media (max-width: 800px) {
	.rwt-recipe-tags .jet-smart-filters-active-tags.jet-active-tags.jet-filter {
		padding: 12px 16px 10px 16px;
	}

	/* The row wraps on a phone, so a right-pushed Clear all would strand itself
	   alone on the last line. */
	.rwt-recipe-tags .jet-active-tags__list .jet-active-tag--clear {
		order: 99;
		margin-left: 0;
	}

	.rwt-recipe-tags .jet-active-tags__list {
		gap: 10px;
	}
}

/* ==========================================================================
   Empty state

   Two layers: `.jet-listing-not-found` is JetEngine's own wrapper, so even the
   stock "No data was found" text lands on brand. `.rwt-empty` is the richer
   version from [rwt_no_recipes].
   ========================================================================== */

.jet-listing-not-found {
	margin: 0 auto;
	padding: 48px 24px;
	max-width: 560px;
	color: var(--rwt-taupe);
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	line-height: var( --e-global-typography-primary-line-height );
	text-align: center;
}

.rwt-empty {
	margin: 0 auto;
	max-width: 460px;
	text-align: center;
}

/* Drawn as a mask because JetEngine passes the message through wp_kses_post(),
   which strips inline SVG. */
.rwt-empty .rwt-empty__icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 18px;
	background: var(--rwt-tint);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M8.5 11h5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M8.5 11h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rwt-empty .rwt-empty__title {
	margin: 0 0 10px;
	font-family: var( --e-global-typography-5193019-font-family ), Sans-serif;
	font-size: 26px;
	font-weight: var( --e-global-typography-5193019-font-weight );
	font-style: var( --e-global-typography-5193019-font-style );
	line-height: 1.25;
	color: var(--rwt-terracotta);
}

.rwt-empty .rwt-empty__text {
	margin: 0 0 24px;
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	line-height: 1.45;
	color: var(--rwt-taupe);
}

.rwt-empty .rwt-empty__action {
	margin: 0;
}

.rwt-empty .rwt-empty__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 26px;
	border: 1px solid var(--rwt-terracotta);
	border-radius: 999px;
	background: transparent;
	color: var(--rwt-terracotta);
	font-family: var( --e-global-typography-bf13d5f-font-family ), Sans-serif;
	font-size: var( --e-global-typography-bf13d5f-font-size );
	font-weight: var( --e-global-typography-bf13d5f-font-weight );
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.rwt-empty .rwt-empty__reset:hover,
.rwt-empty .rwt-empty__reset:focus-visible {
	background: var(--rwt-tint);
	border-color: transparent;
	color: var(--rwt-terracotta);
}

@media (max-width: 800px) {
	.jet-listing-not-found {
		padding: 36px 16px;
	}

	.rwt-empty .rwt-empty__title {
		font-size: 22px;
	}
}

/* --- mobile: the tag bar rejoins the flow ------------------------------
   Absolute positioning keeps the desktop grid from jumping, but on a phone the
   bar wraps to two rows (~126px) against only 60px of section padding, so it
   sat on top of the first card. In one column the reflow after tapping a filter
   is unremarkable — the grid is reloading anyway — whereas covering a card is
   not. `body` prefix out-specifies Elementor's `.elementor-absolute`. */
@media (max-width: 800px) {
	/* Needs `.elementor-absolute` in the chain: Elementor sets the absolute
	   positioning from a rule carrying that class plus the widget id, so two
	   classes and a `body` prefix still lose to it. Verified empirically —
	   three classes wins, two doesn't. */
	body .elementor-element.elementor-absolute.rwt-recipe-tags {
		position: static;
		transform: none;
		transition: none;
	}

	/* And with it back in the flow, hidden must mean gone rather than
	   transparent-but-occupying-space. No slide on mobile. */
	body:not(.elementor-editor-active) .elementor-widget.rwt-recipe-tags.hide-widget {
		display: none;
		transform: none;
	}
}