/* ============================================================================
   masterE — shared category selector (Onboarding + My Profile)
   Cards (parents) → search → chips stage (sub-categories) → requested interests.
   Every visual is driven by a --mcm-cat-* variable; the Elementor "Categories"
   Style sections (one trait, both widgets) write them to {{WRAPPER}} .mcm-cat.
   Defaults reproduce the intended look: borderless + shadowless cards/chips,
   gold (#f0b429) search guide + active-card ring, teal search button.
   ========================================================================== */

.mcm-cat { display: flex; flex-direction: column; gap: 1em; }

/* ── Parent cards ─────────────────────────────────────────────────────────── */
.mcm-cat-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--mcm-cat-cards-align, flex-start);
	/* v3.2.8 — column-gap = "gap between cards"; row-gap defaults to the same but is
	   independently overridable via the "Space between card rows" control. */
	column-gap: var(--mcm-cat-card-gap, 0.6em);
	row-gap: var(--mcm-cat-card-gap, 0.6em);
}
.mcm-cat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	box-sizing: border-box;
	inline-size: var(--mcm-cat-card-width, 9em);
	block-size: var(--mcm-cat-card-height, 7em);
	padding: var(--mcm-cat-card-pad, 0.8em);
	/* Frame derives from the category hue by default (lighten→white, then darken→black);
	   width 0 = borderless (the shipped look). Longhand + !important block the theme
	   button{} border bleed and let :hover re-tint the colour. */
	border-width: var(--mcm-cat-card-border-width, 0) !important;
	border-style: solid !important;
	border-color: var(--mcm-cat-card-border-color, color-mix(in srgb, color-mix(in srgb, var(--mcm-cat-color, #007c79), #fff var(--mcm-cat-card-border-lighten, 0%)), #000 var(--mcm-cat-card-border-darken, 0%))) !important;
	border-radius: var(--mcm-cat-card-radius, 0.75em);
	cursor: pointer;
	font: inherit;
	text-align: center;
	/* !important theme-proofs the fill/ink against the site theme / Elementor-kit
	   button{} bleed (same lesson as the profile buttons). Controls still win — the
	   tokens carry their values. Default fill 15% = a light hue tint; the name + icon
	   default to the hue darkened for contrast (mirrors the sub-chip "float" design). */
	background: color-mix(in srgb, color-mix(in srgb, var(--mcm-cat-color, #007c79) var(--mcm-cat-card-fill, 15%), #fff), #000 var(--mcm-cat-card-darken, 0%)) !important;
	color: var(--mcm-cat-card-text, color-mix(in srgb, var(--mcm-cat-color, #007c79) 80%, #000)) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, outline-color 0.15s ease, border-color 0.15s ease;
}
.mcm-cat-card:hover,
.mcm-cat-card:focus-visible,
.mcm-cat-card.is-active {
	/* v3.2.5 — hover carries its OWN lightness (fill-h) + darkness (darken-h), independent
	   of Normal; each falls back to the Normal value, so hover == resting until tuned.
	   v3.2.7 — .is-active (selected = its chip drawer is open) now wears the SAME hover
	   look (fill/text/border), mirroring how a selected sub-chip locks in the hover/darken
	   shade. The gold ring rule below still marks "this one's open" on top of it. */
	background: color-mix(in srgb, color-mix(in srgb, var(--mcm-cat-color, #007c79) var(--mcm-cat-card-fill-h, var(--mcm-cat-card-fill, 15%)), #fff), #000 var(--mcm-cat-card-darken-h, var(--mcm-cat-card-darken, 0%))) !important;
	color: var(--mcm-cat-card-text-hover, var(--mcm-cat-card-text, color-mix(in srgb, var(--mcm-cat-color, #007c79) 80%, #000))) !important;
	border-color: var(--mcm-cat-card-border-color-h, var(--mcm-cat-card-border-color, color-mix(in srgb, color-mix(in srgb, var(--mcm-cat-color, #007c79), #fff var(--mcm-cat-card-border-lighten, 0%)), #000 var(--mcm-cat-card-border-darken, 0%)))) !important;
}
.mcm-cat-card:focus-visible { outline: 2px solid var(--mcm-cat-card-active-ring, #f0b429); outline-offset: 2px; }
/* Active = its chip drawer is open. Gold ring (outline so it won't clash with a
   box-shadow set via the Style control). */
.mcm-cat-card.is-active { outline: 2px solid var(--mcm-cat-card-active-ring, #f0b429); outline-offset: 2px; }
.mcm-cat-card-icon { display: inline-flex; align-items: center; justify-content: center; }
.mcm-cat-card-icon .mcm-cat-icon-svg,
.mcm-cat-card-icon .mcm-cat-icon-img {
	inline-size: var(--mcm-cat-icon-size, 1.8em);
	block-size: var(--mcm-cat-icon-size, 1.8em);
}
.mcm-cat-card-icon .mcm-cat-icon-svg { color: inherit; }
.mcm-cat-card-label { font-weight: 600; line-height: 1.2; }
.mcm-cat-card-badge {
	position: absolute;
	inset-block-start: 0.4em;
	inset-inline-end: 0.4em;
	min-inline-size: 1.5em;
	padding: 0 0.35em;
	block-size: 1.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--mcm-cat-card-active-ring, #f0b429);
	color: #1d2327;
	border-radius: 9999px;
	font-size: 0.7em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.mcm-cat-card-badge[hidden] { display: none; }

/* ── Search ───────────────────────────────────────────────────────────────── */
/* v3.2.2 — the search is a self-contained PANEL ("rectangle"): a sizeable, framed box
   (controls in the trait's "Categories — Search" section) with an editable caption above
   the field. Default = a full-width 1px-framed box; set a Box width + alignment to constrain
   it. `.mcm-cat` is a flex column, so `align-self` positions the box when its width < full. */
.mcm-cat-search {
	/* v3.2.3 — flow order: search box on top, then cards → sub-chips → requested
	   interests. `.mcm-cat` is a flex column; `order: -1` floats the search above the
	   order-0 items (cards/chips/wishes keep their DOM order). The cards stay first in
	   the DOM, so the focus/reading order remains logical. */
	order: -1;
	position: relative;
	box-sizing: border-box;
	inline-size: var(--mcm-cat-search-box-width, auto);
	align-self: var(--mcm-cat-search-box-align, stretch);
	min-block-size: var(--mcm-cat-search-box-minh, auto);
	margin-block-start: var(--mcm-cat-search-box-space-above, 0);
	margin-block-end: var(--mcm-cat-search-box-space-below, 0);
	padding: var(--mcm-cat-search-box-pad, 0.9em);
	background: var(--mcm-cat-search-box-bg, transparent);
	border: var(--mcm-cat-search-box-border-width, 1px) solid var(--mcm-cat-search-box-border, #dcdcde);
	border-radius: var(--mcm-cat-search-box-radius, 0.625em);
}
.mcm-cat-search-intro {
	margin: 0 0 0.5em;
	font-size: 0.92em;
	line-height: 1.4;
	color: var(--mcm-cat-search-intro-color, #50575e);
}
/* v3.3.4 — the caption→field gap is controllable ("Categories — Search → Caption → field — space").
   The caption is a <p> (a generic element the theme styles), so scope under .mcm-cat + !important so the
   control wins over a theme p / .elementor p margin (the divider <hr> lesson, v3.3.3). Fallback 0.5em =
   the shipped gap; unchanged until the control is touched. */
.mcm-cat .mcm-cat-search-intro { margin-block-end: var(--mcm-cat-search-intro-space, 0.5em) !important; }
.mcm-cat-search-bar { display: flex; gap: 0.4em; align-items: center; }
.mcm-cat-search-input {
	flex: 1;
	min-inline-size: 0;
	/* !important theme-proofs the field against the theme/kit input{} bleed (the circle +
	   frame controls were being out-cascaded). Border is longhand so :focus can re-tint it
	   and a width token (--mcm-cat-search-border-width) makes the frame thickness editable. */
	background: var(--mcm-cat-search-bg, #ffffff) !important;
	color: var(--mcm-cat-search-text, var(--mcm-w-body-color, #1d2327)) !important;
	border-width: var(--mcm-cat-search-border-width, 1px) !important;
	border-style: solid !important;
	border-color: var(--mcm-cat-search-border, #dcdcde) !important;
	border-radius: var(--mcm-cat-search-radius, 9999px) !important;
	padding: var(--mcm-cat-search-pad, 0.6em 1em) !important;
	font: inherit;
}
.mcm-cat-search-input:focus {
	outline: none;
	border-color: var(--mcm-w-accent, #007c79) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--mcm-w-accent, #007c79) 18%, transparent);
}
.mcm-cat-search-btn {
	flex: 0 0 auto;
	/* !important + aspect-ratio keep the button square against a theme button{} min-height /
	   padding (which was squashing it to a rectangle → the magnifying glass distorted on resize). */
	inline-size: var(--mcm-cat-search-btn-size, 2.4em) !important;
	block-size: var(--mcm-cat-search-btn-size, 2.4em) !important;
	min-block-size: 0 !important;
	aspect-ratio: 1 / 1;
	padding: 0 !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--mcm-cat-search-btn-bg, var(--mcm-w-accent, #007c79)) !important;
	color: var(--mcm-cat-search-btn-icon, #ffffff) !important;
	transition: background 0.15s ease;
}
.mcm-cat-search-btn svg { inline-size: 55%; block-size: 55%; }
.mcm-cat-search-btn:hover,
.mcm-cat-search-btn:focus-visible {
	background: var(--mcm-cat-search-btn-bg-h, color-mix(in srgb, var(--mcm-cat-search-btn-bg, var(--mcm-w-accent, #007c79)) 85%, #000)) !important;
}
.mcm-cat-search-results {
	position: absolute;
	z-index: 20;
	inset-inline: 0;
	inset-block-start: calc(100% + 0.25em);
	margin: 0;
	padding: 0.3em;
	list-style: none;
	background: #fff;
	border: 1px solid #dcdcde;
	border-radius: 0.5em;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	max-block-size: 16em;
	overflow: auto;
}
.mcm-cat-search-results[hidden] { display: none; }
.mcm-cat-search-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
	padding: 0.4em 0.6em;
	border-radius: 0.35em;
	cursor: pointer;
}
.mcm-cat-search-option:hover,
.mcm-cat-search-option.is-active { background: color-mix(in srgb, var(--mcm-w-accent, #007c79) 10%, #fff); }
.mcm-cat-search-option-meta { color: #6c7781; font-size: 0.85em; }
.mcm-cat-search-option.is-add { color: var(--mcm-w-accent, #007c79); font-weight: 600; }

/* Not-found feedback strip (gold tint) — the search's wish-entry affordance. */
.mcm-cat-search-feedback:empty { display: none; }
.mcm-cat-search-feedback { margin-block-start: 0.5em; }
.mcm-cat-feedback-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
	background: #fffbf2;
	border: 1px solid #f0e6c8;
	border-radius: 0.5em;
	padding: 0.6em 0.8em;
	color: #8a5a00;
	font-size: 0.92em;
}
.mcm-cat-feedback-add {
	appearance: none;
	border: 1px solid var(--mcm-cat-highlight, #f0b429);
	background: #fff8e6;
	color: #8a5a00;
	border-radius: 9999px;
	padding: 0.3em 0.8em;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.mcm-cat-feedback-add:hover { background: #f7eccb; }
.mcm-cat-feedback-note { color: #6c7781; }

/* ── Chips stage (sub-categories) ─────────────────────────────────────────── */
.mcm-cat-chips-region { min-block-size: 1em; }
.mcm-cat-stage-hint { margin: 0; color: #6c7781; font-size: 0.92em; }
.mcm-cat-stage-hint[hidden] { display: none; }
.mcm-cat-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--mcm-cat-chips-align, flex-start);
	gap: var(--mcm-cat-chip-gap, 0.4em);
	transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mcm-cat-chips[hidden] { display: none; }
/* Conveyor: new group enters from the inline-end; old leaves toward inline-start. */
.mcm-cat-chips.is-entering { opacity: 0; transform: translateX(0.8em); }
.mcm-cat-chips.is-leaving {
	opacity: 0;
	transform: translateX(-0.6em);
	transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), transform 160ms cubic-bezier(0.4, 0, 0.2, 1);
}
[dir="rtl"] .mcm-cat-chips.is-entering { transform: translateX(-0.8em); }
[dir="rtl"] .mcm-cat-chips.is-leaving { transform: translateX(0.6em); }

.mcm-cat-chip {
	appearance: none;
	cursor: pointer;
	font: inherit;
	border-radius: 9999px;
	padding: var(--mcm-cat-chip-pad, 0.35em 0.8em);
	border: 0;
	/* !important theme-proofs the per-term hue against the theme button{} bleed. */
	background: color-mix(in srgb, var(--mcm-cat-color, #007c79) var(--mcm-cat-chip-fill, 10%), #fff) !important;
	color: var(--mcm-cat-chip-text, color-mix(in srgb, var(--mcm-cat-color, #007c79) 80%, #000)) !important;
	transition: background 0.12s ease, color 0.12s ease;
}
.mcm-cat-chip-all { font-weight: 600; }
.mcm-cat-chip:hover,
.mcm-cat-chip.is-selected {
	background: color-mix(in srgb, var(--mcm-cat-color, #007c79), #000 var(--mcm-cat-chip-hover-darken, 25%)) !important;
	color: var(--mcm-cat-chip-selected-text, #ffffff) !important;
}
.mcm-cat-chip:focus-visible { outline: 2px solid var(--mcm-cat-color, #007c79); outline-offset: 2px; }

/* ── Gold-line "guide" highlight (search hit) ─────────────────────────────── */
.mcm-cat-guided { position: relative; }
.mcm-cat-guided::before,
.mcm-cat-guided::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	block-size: var(--mcm-cat-highlight-thickness, 2px);
	background: var(--mcm-cat-highlight, #f0b429);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--mcm-cat-highlight-time, 600ms) cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
	border-radius: 2px;
}
[dir="rtl"] .mcm-cat-guided::before,
[dir="rtl"] .mcm-cat-guided::after { transform-origin: right center; }
.mcm-cat-guided::before { inset-block-start: calc((var(--mcm-cat-highlight-gap, 4px) + var(--mcm-cat-highlight-thickness, 2px)) * -1); }
.mcm-cat-guided::after { inset-block-end: calc((var(--mcm-cat-highlight-gap, 4px) + var(--mcm-cat-highlight-thickness, 2px)) * -1); }
.mcm-cat-guided.is-building::before { transform: scaleX(1); }
.mcm-cat-guided.is-building::after { transform: scaleX(1); transition-delay: 80ms; }

/* ── Requested interests (the old "category wishes", now via search) ──────────
   v3.3.0 (item D) — every part is driven by a --mcm-cat-wish-* token from the
   trait's "Categories — Requested interests" Style section; each fallback equals
   the prior gold look, so an untouched selector is visually unchanged (and the
   live shortcode, which can't reach the controls, keeps that look via the
   fallback). The box can be width-constrained + aligned (mirrors the search box);
   the chip is fully button-styleable; the remove "×" is flex-centred with an
   optional/controllable circle. */
.mcm-cat-wishes {
	box-sizing: border-box;
	margin-block-start: 0.4em;
	inline-size: var(--mcm-cat-wish-box-width, auto);
	align-self: var(--mcm-cat-wish-box-align, stretch);
	background: var(--mcm-cat-wish-box-bg, #fffbf2);
	border-width: var(--mcm-cat-wish-box-border-width, 1px);
	border-style: var(--mcm-cat-wish-box-border-style, solid);
	border-color: var(--mcm-cat-wish-box-border-color, #f0e6c8);
	border-radius: var(--mcm-cat-wish-box-radius, 0.5em);
	padding: var(--mcm-cat-wish-box-pad, 0.8em);
}
.mcm-cat-wishes[hidden] { display: none; }
/* v3.3.1 (Fix 1) — !important on the COLOUR only, so the control (and the gold default)
   beat the Elementor global-kit `body.elementor-kit-N h4` bleed (0,1,1 > the plain class).
   font-size/weight stay un-!important so the cat_wish_head_typo group control still wins. */
.mcm-cat-wishes-head { margin: 0 0 0.5em; font-size: 0.95em; font-weight: 600; color: var(--mcm-cat-wish-head-color, #8a5a00) !important; }
.mcm-cat-wishes-list { display: flex; flex-wrap: wrap; gap: 0.4em; }
.mcm-cat-wish-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	border-width: var(--mcm-cat-wish-chip-border-width, 1px);
	border-style: var(--mcm-cat-wish-chip-border-style, dashed);
	border-color: var(--mcm-cat-wish-chip-border-color, var(--mcm-cat-highlight, #f0b429));
	background: var(--mcm-cat-wish-chip-bg, #fff8e6);
	border-radius: var(--mcm-cat-wish-chip-radius, 9999px);
	padding: var(--mcm-cat-wish-chip-pad, 0.25em 0.3em 0.25em 0.7em);
	font-size: 0.88em;
	color: var(--mcm-cat-wish-chip-text, #8a5a00);
}
.mcm-cat-wish-remove {
	appearance: none;
	border: 0;
	/* Flex-centre the "×" glyph in its (optional) circle, vertically + horizontally,
	   at the chip's trailing edge. padding:0 removes the UA button padding that
	   pushed the glyph off-centre; the background is a token (set transparent = no disc). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0;
	background: var(--mcm-cat-wish-remove-bg, #f0e6c8);
	color: var(--mcm-cat-wish-remove-color, #6e4f00);
	border-radius: 50%;
	/* v3.3.1 (Fix 3) — !important + min-*:0 theme-proof the disc size against the theme/kit
	   button{} width/min-width bleed (mirrors .mcm-cat-search-btn); the "×" GLYPH is now its
	   own controllable, theme-proofed font-size. */
	inline-size: var(--mcm-cat-wish-remove-size, 1.4em) !important;
	block-size: var(--mcm-cat-wish-remove-size, 1.4em) !important;
	min-inline-size: 0 !important;
	min-block-size: 0 !important;
	line-height: 1;
	cursor: pointer;
	font-size: var(--mcm-cat-wish-remove-icon-size, 1em) !important;
}
.mcm-cat-wish-remove:hover { background: var(--mcm-cat-wish-remove-bg-h, color-mix(in srgb, var(--mcm-cat-wish-remove-bg, #f0e6c8), #000 10%)); }

.mcm-cat-empty { margin: 0; color: #6c7781; }

/* ── Inline reveal mode (v3.2.8) ──────────────────────────────────────────
   Opt-in alternative to the stage. The JS relocates the ACTIVE parent's chip
   band into the cards grid, right under the clicked card's row (a full-width
   flex item), opening a space between the rows; the selected card grows, the
   others shrink + dim. Stage mode (no [data-mcm-cat-display="inline"]) is
   untouched. */

/* In inline mode the shared stage below the cards isn't used — collapse it and
   hide the "pick a category" hint (the cards invite the click directly). */
.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-chips-region { min-block-size: 0; }
.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-stage-hint { display: none; }

/* The relocated band: full-width, hue-washed, rounded; opens via max-height +
   opacity (the JS measures the height). border-box so max-height:0 collapses it
   fully (padding included). */
.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-cards > .mcm-cat-chips {
	flex: 0 0 100%;
	box-sizing: border-box;
	position: relative;
	margin: 0;
	padding: var(--mcm-cat-band-pad, 0.9em);
	border-radius: var(--mcm-cat-band-radius, 0.75em);
	background: var(--mcm-cat-band-bg, color-mix(in srgb, var(--mcm-cat-color, #007c79) 8%, #fff));
	overflow: hidden;
	transition: max-height 240ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Connector notch — a small triangle pointing up to the open card. Hidden by
   default; the "Connector notch" control turns it on. The JS sets --mcm-cat-notch-x
   to the card's centre as a PHYSICAL px offset from the band's start, so `left`
   is correct in both LTR and RTL (intentionally physical, not a logical property). */
.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-cards > .mcm-cat-chips::before {
	content: "";
	display: none;
	position: absolute;
	inset-block-start: -7px;
	left: var(--mcm-cat-notch-x, 50%);
	width: 16px;
	height: 8px;
	transform: translateX(-50%);
	background: var(--mcm-cat-band-notch-color, var(--mcm-cat-band-bg, color-mix(in srgb, var(--mcm-cat-color, #007c79) 8%, #fff)));
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
	pointer-events: none;
}

/* Spotlight: the selected card grows, the others shrink + dim. Transform-only, so
   the grid layout (and the JS row maths) is unaffected. */
.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-cards.has-active .mcm-cat-card {
	transition: transform 0.18s ease, opacity 0.18s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, outline-color 0.15s ease;
}
.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-cards.has-active .mcm-cat-card:not(.is-active) {
	transform: scale(calc(1 - var(--mcm-cat-card-shrink, 4) / 100));
	opacity: var(--mcm-cat-card-dim, 0.7);
}
.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-cards.has-active .mcm-cat-card.is-active {
	transform: scale(calc(1 + var(--mcm-cat-card-grow, 6) / 100));
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-cards > .mcm-cat-chips { transition: none !important; }
	.mcm-cat[data-mcm-cat-display="inline"] .mcm-cat-cards.has-active .mcm-cat-card {
		transition: none !important;
		transform: none !important;
	}
}

/* ── Reduced motion — collapse every animation to its end state ───────────── */
@media (prefers-reduced-motion: reduce) {
	.mcm-cat-card,
	.mcm-cat-chip,
	.mcm-cat-chips { transition: none !important; }
	.mcm-cat-chips.is-entering,
	.mcm-cat-chips.is-leaving { opacity: 1; transform: none; }
	.mcm-cat-guided::before,
	.mcm-cat-guided::after { transition: none !important; }
	.mcm-cat-guided.is-building::before,
	.mcm-cat-guided.is-building::after { transform: scaleX(1); }
}