/* =========================================================
   STL FORGE SMART FILTERS — v0.2.0
   Cache-friendly, no filter AJAX
   ========================================================= */

body.stlf-smart-filters-enabled {
	--stlf-sf-bg: #151517;
	--stlf-sf-panel: #19191d;
	--stlf-sf-panel-2: #1e1e23;
	--stlf-sf-border: rgba(255,255,255,.08);
	--stlf-sf-border-strong: rgba(139,108,255,.26);
	--stlf-sf-text: #f6f5fa;
	--stlf-sf-muted: #9593a0;
	--stlf-sf-violet: #6241ed;
	--stlf-sf-violet-2: #8b6cff;
}

/* Disable XStore legacy filter controls only while this plugin is active. */
body.stlf-smart-filters-enabled .et-toggle-mob-sidebars-wrapper,
body.stlf-smart-filters-enabled .et-toggle-mob-sidebar.et-off-canvas,
body.stlf-smart-filters-enabled .open-filters-btn,
body.stlf-smart-filters-enabled .sidebar-off_canvas.et-mini-content {
	display: none !important;
}

.stlf-filter-trigger {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 40px;
	padding: 0 13px;
	border: 1px solid var(--stlf-sf-border);
	border-radius: 10px;
	background: #18181c;
	color: #d7d3e5;
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.stlf-filter-trigger:hover {
	background: #1d1d22;
	border-color: var(--stlf-sf-border-strong);
	color: #fff;
}

.stlf-filter-trigger__icon { display: inline-flex; color: #a792ff; }

.stlf-filter-trigger__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--stlf-sf-violet);
	color: #fff;
	font-size: 10px;
}
.stlf-filter-trigger__count[hidden] { display: none !important; }

.stlf-filter-backdrop {
	position: fixed;
	inset: 0;
	z-index: 999998;
	background: rgba(0,0,0,.63);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .22s ease;
}
.stlf-filter-backdrop.is-open { opacity: 1; }

.stlf-filter-panel {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	width: min(420px, 92vw);
	height: 100dvh;
	transform: translateX(-102%);
	background:
		radial-gradient(circle at 0 0, rgba(98,65,237,.10), transparent 30%),
		var(--stlf-sf-bg);
	border-right: 1px solid rgba(139,108,255,.18);
	box-shadow: 25px 0 70px rgba(0,0,0,.35);
	color: var(--stlf-sf-text);
	transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.stlf-filter-panel.is-open { transform: translateX(0); }
.stlf-filter-form { display: grid; grid-template-rows: auto minmax(0,1fr) auto; height: 100%; }

.stlf-filter-panel__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	padding: 26px 24px 22px;
	border-bottom: 1px solid var(--stlf-sf-border);
}
.stlf-filter-panel__eyebrow { margin-bottom: 7px; color: #9178ff; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.stlf-filter-panel__header h2 { margin: 0 0 5px; color: #fff; font-size: 20px; line-height: 1.1; font-weight: 750; letter-spacing: .015em; }
.stlf-filter-panel__header p { margin: 0; color: var(--stlf-sf-muted); font-size: 11px; transition: color .18s ease; }
.stlf-filter-panel.has-pending-changes .stlf-filter-panel__header p { color: #b5a9eb; }

.stlf-filter-panel__close {
	width: 38px;
	height: 38px;
	flex: 0 0 38px;
	padding: 0;
	border: 1px solid var(--stlf-sf-border);
	border-radius: 10px;
	background: transparent;
	color: #b9b6c2;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}
.stlf-filter-panel__close:hover { border-color: var(--stlf-sf-border-strong); color: #fff; }

.stlf-filter-panel__scroll {
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #3d3a48 transparent;
	padding: 4px 24px 28px;
}

.stlf-filter-section { padding: 22px 0; border-bottom: 1px solid var(--stlf-sf-border); }
.stlf-filter-section:last-child { border-bottom: 0; }
.stlf-filter-section--active.is-empty { display: none; }

.stlf-filter-section__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 13px;
}
.stlf-filter-section__head h3 { margin: 0; color: #f3f1f8; font-size: 10px; line-height: 1; font-weight: 800; letter-spacing: .12em; }
.stlf-filter-section__hint { color: #6f6d78; font-size: 9px; }
.stlf-sf-clear-all { padding: 0; border: 0; background: transparent; color: #9783f6; font-size: 9px; font-weight: 700; cursor: pointer; }

/* Active chips now mirror pending selections before Apply. */
.stlf-active-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.stlf-active-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 32px;
	padding: 0 9px 0 10px;
	border: 1px solid rgba(139,108,255,.25);
	border-radius: 8px;
	background: rgba(98,65,237,.08);
	color: #c2b8f6;
	font-size: 10px;
	font-weight: 650;
	cursor: pointer;
}
.stlf-active-chip:hover { border-color: rgba(139,108,255,.48); color: #e4deff; }
.stlf-active-chip__x { color: #817d8b; font-size: 14px; line-height: 1; }

/* Quick Filters */
.stlf-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stlf-quick-filter {
	position: relative;
	display: grid;
	grid-template-columns: 32px minmax(0,1fr);
	align-items: center;
	gap: 10px;
	min-height: 60px;
	padding: 9px 11px;
	border: 1px solid var(--stlf-sf-border);
	border-radius: 11px;
	background: #18181c;
	cursor: pointer;
	transition: .18s ease;
}
.stlf-quick-filter input { position: absolute; opacity: 0; pointer-events: none; }
.stlf-quick-filter__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	background: #202026;
	color: #9a83ff;
	font-size: 15px;
	font-weight: 800;
}
.stlf-quick-filter__text { min-width: 0; display: grid; gap: 2px; }
.stlf-quick-filter__text strong { color: #c7c4cd; font-size: 10px; font-weight: 700; }
.stlf-quick-filter__text small { color: #66636d; font-size: 8px; }
.stlf-quick-filter:hover { border-color: rgba(139,108,255,.28); }
.stlf-quick-filter:has(input:checked) { border-color: rgba(139,108,255,.46); background: rgba(98,65,237,.10); }
.stlf-quick-filter:has(input:checked) .stlf-quick-filter__icon { background: #6241ed; color: #fff; }
.stlf-quick-filter:has(input:checked) .stlf-quick-filter__text strong { color: #fff; }

/* Segmented controls */
.stlf-sf-segments { display: flex; flex-wrap: wrap; gap: 7px; }
.stlf-sf-segment { position: relative; }
.stlf-sf-segment input { position: absolute; opacity: 0; pointer-events: none; }
.stlf-sf-segment span {
	display: inline-flex;
	align-items: center;
	min-height: 35px;
	padding: 0 11px;
	border: 1px solid var(--stlf-sf-border);
	border-radius: 9px;
	background: #18181c;
	color: #9e9ca7;
	font-size: 10px;
	font-weight: 650;
	cursor: pointer;
	transition: .18s ease;
}
.stlf-sf-segment:hover span { border-color: rgba(139,108,255,.30); color: #fff; }
.stlf-sf-segment.is-active span,
.stlf-sf-segment input:checked + span { border-color: rgba(139,108,255,.46); background: rgba(98,65,237,.12); color: #c8bcff; }

/* Universe search */
.stlf-universe-search {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 42px;
	padding: 0 12px;
	margin-bottom: 10px;
	border: 1px solid var(--stlf-sf-border);
	border-radius: 10px;
	background: #111114;
	color: #777380;
}
.stlf-universe-search:focus-within { border-color: rgba(139,108,255,.44); }
.stlf-universe-search input { width: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: #fff !important; font-size: 11px !important; }
.stlf-universe-search input::placeholder { color: #64616c; }
.stlf-universe-list { display: grid; gap: 5px; max-height: 330px; overflow-y: auto; padding-right: 3px; }
.stlf-universe-option {
	display: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 36px;
	padding: 0 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #a6a3ae;
	text-align: left;
	font-size: 11px;
	cursor: pointer;
}
.stlf-universe-option.is-visible { display: flex; }
.stlf-universe-option:hover { background: #1b1b20; color: #fff; }
.stlf-universe-option.is-selected { border-color: rgba(139,108,255,.30); background: rgba(98,65,237,.09); color: #c9beff; }
.stlf-universe-option small { color: #65626d; font-size: 9px; }
.stlf-universe-show-all { margin-top: 8px; padding: 0; border: 0; background: transparent; color: #8f7be9; font-size: 9px; font-weight: 700; cursor: pointer; }

/* Features */
.stlf-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stlf-feature-check {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	padding: 0 10px;
	border: 1px solid var(--stlf-sf-border);
	border-radius: 9px;
	background: #18181c;
	color: #aaa7b2;
	font-size: 10px;
	cursor: pointer;
}
.stlf-feature-check input { position: absolute; opacity: 0; pointer-events: none; }
.stlf-feature-check__box { position: relative; width: 15px; height: 15px; flex: 0 0 15px; border: 1px solid #55515f; border-radius: 4px; }
.stlf-feature-check input:checked ~ .stlf-feature-check__box { border-color: #8c72ff; background: #6241ed; }
.stlf-feature-check input:checked ~ .stlf-feature-check__box::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.stlf-feature-check:has(input:checked) { border-color: rgba(139,108,255,.30); color: #fff; }

/* Footer */
.stlf-filter-panel__footer {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 10px;
	padding: 16px 20px;
	border-top: 1px solid var(--stlf-sf-border);
	background: rgba(21,21,23,.96);
}
.stlf-filter-reset,
.stlf-filter-apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .05em;
	text-decoration: none !important;
}
.stlf-filter-reset { border: 1px solid var(--stlf-sf-border); background: #18181c; color: #aaa5b7 !important; }
.stlf-filter-apply {
	flex-direction: column;
	gap: 2px;
	border: 0;
	background: linear-gradient(135deg, #6241ed, #7c58f7);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(98,65,237,.18);
}
.stlf-filter-apply strong { font-size: 10px; line-height: 1; letter-spacing: .05em; }
.stlf-filter-apply small { color: rgba(255,255,255,.67); font-size: 7px; line-height: 1; font-weight: 600; letter-spacing: .02em; }
.stlf-filter-panel.has-pending-changes .stlf-filter-apply { box-shadow: 0 8px 28px rgba(98,65,237,.28); }

body.stlf-filter-open { overflow: hidden; }

@media (max-width: 767px) {
	.stlf-filter-panel { width: 100%; }
	.stlf-filter-panel__header { padding: 22px 18px 18px; }
	.stlf-filter-panel__scroll { padding-left: 18px; padding-right: 18px; }
	.stlf-feature-grid { grid-template-columns: 1fr; }
	.stlf-quick-grid { grid-template-columns: 1fr 1fr; }
	.stlf-filter-panel__footer { padding: 13px 14px max(13px, env(safe-area-inset-bottom)); }
}


/* =========================================================
   STL FORGE SMART FILTERS — v0.2.1 CACHE-BUST SAFETY
   Brand-new asset filename + strong Quick Filter reset.
   ========================================================= */

#stlf-filter-panel .stlf-quick-filter {
	position: relative;
}

#stlf-filter-panel .stlf-quick-filter > input[type="checkbox"] {
	position: absolute !important;
	left: 0 !important;
	top: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	appearance: none !important;
	-webkit-appearance: none !important;
}

#stlf-filter-panel .stlf-quick-filter > input[type="checkbox"]::before,
#stlf-filter-panel .stlf-quick-filter > input[type="checkbox"]::after {
	display: none !important;
	content: none !important;
}


/* =========================================================
   STL FORGE SMART FILTERS — v0.2.2 LIVE MATCH COUNT
   ========================================================= */
#stlf-filter-panel .stlf-quick-filter__text small { color: #77737f; font-size: 8px; }
#stlf-filter-panel .stlf-filter-apply small { min-height: 8px; text-transform: uppercase; letter-spacing: .04em; }
