/*
 * Mangarama Catalog Filter — frontend styles.
 *
 * Scoped entirely under .mcf so nothing here can bleed into Madara's own
 * catalog card markup (.page-item-detail, .page-content-listing, etc. are
 * never touched — task §3/§46). Colors/radius/font mirror the site's own
 * tokens confirmed in site-custom/style.css (--primary-color: #4267ff,
 * Poppins, dark #000 background, rounded 10–18px controls) rather than
 * inventing a new visual language.
 */

.mcf {
	--mcf-accent: #4267ff;
	--mcf-accent-hover: #5275ff;
	--mcf-bg-panel: rgba(16, 17, 20, 0.96);
	--mcf-bg-field: #17191d;
	--mcf-border: #2b2e34;
	--mcf-text: #ffffff;
	--mcf-muted: #a6a8ad;
	--mcf-radius: 14px;
	--mcf-radius-sm: 10px;
	--mcf-font: Poppins, sans-serif;

	font-family: var(--mcf-font);
	color: var(--mcf-text);
	margin: 18px 0;
}

.mcf * {
	box-sizing: border-box;
}

.mcf a {
	text-decoration: none;
}

.mcf .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---- toolbar ------------------------------------------------------- */

.mcf-toolbar {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 14px;
	margin-bottom: 12px;
}

.mcf-sort-form {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	margin: 0;
}

.mcf-sort-label { display:block; min-width:0; margin:0; }

.mcf-sort-form select {
	background: var(--mcf-bg-field);
	color: var(--mcf-text);
	border: 1px solid var(--mcf-border);
	border-radius: var(--mcf-radius-sm);
	padding: 8px 12px;
	min-height: 42px;
	max-width: min(58vw, 260px);
	font-family: var(--mcf-font);
	font-size: 13px;
}

/* Visible by default (works without JS); frontend.js hides it once it has
   wired up auto-submit-on-change for the sort <select>. */
.mcf-sort-submit[hidden] {
	display: none;
}

.mcf-filters-btn {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	flex: 0 0 auto;
	gap: 8px;
	padding: 9px 18px;
	border: 2px solid var(--mcf-accent);
	border-radius: 18px;
	background: radial-gradient(circle at 30% 20%, #364ce5, #152877 65%, #10173a);
	color: #fff;
	font-family: var(--mcf-font);
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 0 18px rgba(51, 91, 255, 0.42);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.mcf-filters-btn:hover,
.mcf-filters-btn:focus-visible {
	border-color: var(--mcf-accent-hover);
	filter: brightness(1.08);
}

.mcf-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: #fff;
	color: var(--mcf-accent);
	font-size: 11px;
	font-weight: 800;
}

/* ---- chips ----------------------------------------------------------- */

.mcf-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.mcf-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--mcf-bg-field);
	border: 1px solid var(--mcf-border);
	color: var(--mcf-text);
	font-size: 12px;
}

.mcf-chip:hover,
.mcf-chip:focus-visible {
	border-color: var(--mcf-accent);
}

.mcf-chip-x {
	color: var(--mcf-muted);
	font-weight: 700;
}

.mcf-chip-reset {
	color: var(--mcf-muted);
	background: transparent;
	border-style: dashed;
}

/* ---- empty state ------------------------------------------------------ */

.mcf-empty {
	padding: 22px;
	margin-bottom: 16px;
	border-radius: var(--mcf-radius);
	border: 1px solid var(--mcf-border);
	background: var(--mcf-bg-panel);
	text-align: center;
}

.mcf-empty p {
	margin: 0 0 12px;
	color: var(--mcf-text);
}

.mcf-empty-reset {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--mcf-radius-sm);
	background: var(--mcf-accent);
	color: #fff;
	font-weight: 600;
	font-size: 13px;
}

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

.mcf-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 92vw);
	background: var(--mcf-bg-panel);
	border-left: 1px solid var(--mcf-border);
	z-index: 100000;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.25s ease;
	backdrop-filter: blur(6px);
}

.mcf-panel[data-mcf-visible] {
	transform: translateX(0);
}

.mcf-panel[hidden] {
	display: none;
}

/* The panel's header/body/footer are not direct children of .mcf-panel —
   they're wrapped in a plain, unclassed <form data-mcf-panel-form> (the GET
   form that submits every filter field). That form is itself a flex *item*
   inside .mcf-panel, but with no rules of its own it took the same
   min-height: auto default described below on .mcf-panel-body, just one
   level higher: the form grew to fit its full, un-scrolled content height
   instead of being constrained to the panel's actual (viewport) height, so
   .mcf-panel-body's own overflow-y: auto never had a bounded box to scroll
   *within* — content only ever overflowed the fixed-position panel itself,
   which the page has no way to scroll (fixed elements aren't part of
   normal flow), so the mouse wheel fell through to the real page behind
   it instead. This form must be a flex column container in its own right,
   sized to fill the panel exactly, for .mcf-panel-body's scrolling to ever
   engage. */
.mcf-panel > form {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.mcf-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--mcf-border);
}

.mcf-panel-header h2 {
	margin: 0;
	font-size: 16px;
	color: var(--mcf-text);
}

.mcf-panel-close {
	background: transparent;
	border: none;
	color: var(--mcf-muted);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: var(--mcf-radius-sm);
}

.mcf-panel-close:hover,
.mcf-panel-close:focus-visible {
	color: var(--mcf-text);
	background: rgba(255, 255, 255, 0.06);
}

.mcf-panel-body {
	flex: 1 1 auto;
	/* Without this, a flex item defaults to min-height: auto — meaning it
	   grows to fit its content instead of respecting the fixed-height
	   parent (.mcf-panel spans top:0/bottom:0). That silently defeats
	   overflow-y below: the panel's own box overflows the screen instead
	   of this element ever needing to scroll, which is exactly the
	   "doesn't all fit and won't scroll" bug reported on a long panel
	   (many genre terms + every section enabled). */
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 4px 18px 18px;
}

.mcf-section {
	padding: 14px 0;
	border-bottom: 1px solid var(--mcf-border);
}

.mcf-section:last-child {
	border-bottom: none;
}

.mcf-section h3 {
	margin: 0 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mcf-muted);
}

.mcf-section input[type="search"],
.mcf-section input[type="text"],
.mcf-section input[type="number"] {
	width: 100%;
	background: var(--mcf-bg-field);
	border: 1px solid var(--mcf-border);
	border-radius: var(--mcf-radius-sm);
	color: var(--mcf-text);
	padding: 9px 12px;
	font-family: var(--mcf-font);
	font-size: 13px;
}

.mcf-check-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mcf-check,
.mcf-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--mcf-text);
	cursor: pointer;
}

.mcf-check input,
.mcf-radio input {
	accent-color: var(--mcf-accent);
	width: 16px;
	height: 16px;
}

.mcf-genre-search {
	margin-bottom: 10px;
}

.mcf-genre-fieldset {
	display: flex;
	gap: 16px;
	border: none;
	padding: 0;
	margin: 0 0 10px;
}

.mcf-genre-legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

.mcf-genre-scroll {
	max-height: 260px;
	overflow-y: auto;
	padding-right: 4px;
	border: 1px solid var(--mcf-border);
	border-radius: var(--mcf-radius-sm);
	padding: 8px;
}

.mcf-genre-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 4px;
}

.mcf-genre-item[hidden] {
	display: none;
}

.mcf-genre-exclude {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--mcf-muted);
	cursor: pointer;
}

.mcf-genre-exclude input {
	accent-color: #ff5a5a;
}

.mcf-year-range {
	display: flex;
	gap: 12px;
	margin-bottom: 10px;
}

.mcf-year-range label {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 12px;
	color: var(--mcf-muted);
}

.mcf-year-slider {
	width: 100%;
	accent-color: var(--mcf-accent);
}

.mcf-team-select {
	width: 100%;
	background: var(--mcf-bg-field);
	border: 1px solid var(--mcf-border);
	border-radius: var(--mcf-radius-sm);
	color: var(--mcf-text);
	padding: 9px 12px;
	font-family: var(--mcf-font);
	font-size: 13px;
}

.mcf-hint {
	margin: 0;
	font-size: 12px;
	color: var(--mcf-muted);
}

.mcf-panel-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 18px;
	border-top: 1px solid var(--mcf-border);
	position: sticky;
	bottom: 0;
	background: var(--mcf-bg-panel);
}

.mcf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 18px;
	border-radius: 18px;
	font-family: var(--mcf-font);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	border: 2px solid transparent;
}

.mcf-btn-primary {
	flex: 1 1 auto;
	border-color: var(--mcf-accent);
	background: radial-gradient(circle at 30% 20%, #364ce5, #152877 65%, #10173a);
	color: #fff;
	box-shadow: 0 0 18px rgba(51, 91, 255, 0.42);
}

.mcf-btn-primary:hover,
.mcf-btn-primary:focus-visible {
	border-color: var(--mcf-accent-hover);
	filter: brightness(1.08);
}

.mcf-btn-ghost {
	border-color: var(--mcf-border);
	color: var(--mcf-muted);
	background: transparent;
}

.mcf-btn-ghost:hover,
.mcf-btn-ghost:focus-visible {
	color: var(--mcf-text);
	border-color: var(--mcf-text);
}

/* ---- backdrop (added by JS only when the panel opens) ----------------- */

.mcf-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 99999;
}

/* ---- desktop: side panel (default) ------------------------------------ */

@media (min-width: 783px) {
	.mcf-panel {
		max-width: 380px;
	}
}

/* ---- mobile: fullscreen / bottom sheet / drawer ----------------------- */

@media (max-width: 782px) {
	.mcf-panel {
		width: 100%;
		max-width: 100%;
	}

	.mcf[data-mcf-mobile-mode="fullscreen"] .mcf-panel {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-left: none;
		transform: translateY(100%);
	}

	.mcf[data-mcf-mobile-mode="fullscreen"] .mcf-panel[data-mcf-visible] {
		transform: translateY(0);
	}

	.mcf[data-mcf-mobile-mode="bottom_sheet"] .mcf-panel {
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 85vh;
		border-left: none;
		border-top: 1px solid var(--mcf-border);
		border-radius: 18px 18px 0 0;
		transform: translateY(100%);
	}

	.mcf[data-mcf-mobile-mode="bottom_sheet"] .mcf-panel[data-mcf-visible] {
		transform: translateY(0);
	}

	.mcf[data-mcf-mobile-mode="drawer"] .mcf-panel {
		top: 0;
		left: 0;
		right: auto;
		bottom: 0;
		width: min(320px, 88vw);
		border-left: none;
		border-right: 1px solid var(--mcf-border);
		transform: translateX(-100%);
	}

	.mcf[data-mcf-mobile-mode="drawer"] .mcf-panel[data-mcf-visible] {
		transform: translateX(0);
	}

	.mcf-filters-btn {
		width: auto;
		justify-content: center;
		margin-left: auto;
		padding-right: 14px;
		padding-left: 14px;
	}

	.mcf-toolbar {
		flex-direction: row;
		align-items: center;
		gap: 8px;
	}
}

/* focus visibility, keyboard users */
.mcf a:focus-visible,
.mcf button:focus-visible,
.mcf input:focus-visible,
.mcf select:focus-visible {
	outline: 2px solid var(--mcf-accent-hover);
	outline-offset: 2px;
}