/**
 * UT Filter — stylesheet 0.3.0, viết lại TỪ ĐẦU (30/08).
 *
 * Thay bản 0.1.x trích 26KB từ CSS Filter Everything + gom các rule wpc-*
 * từng nằm rải trong theme style.css/layout.css về đây (owner: "gom CSS về
 * filter core"). Ở lại theme: .few placement/popup (.ut-fpop), nút
 * .ut-loop-filter, toolbar sort (.sortw/.ut-dd/.ut-sort-*).
 *
 * Slider redesign theo mock owner 30/08: track mảnh bo tròn, range màu accent,
 * handle tròn trắng đổ bóng, biên min/max mờ hai đầu + GIÁ TRỊ ĐẬM bám theo
 * handle (JS đặt left %). Giao diện cũ (viền dày, values một dòng) là dàn xếp
 * với cách FE dựng handler — không còn lý do tồn tại.
 *
 * Accent: --ut-filter-accent — mặc định bám token thương hiệu của theme
 * --color-brand (#0088b0, teal 2 đĩa logo — xem .ut-discs trong style.css).
 */

/* ── jQuery UI slider: khung structural (WP core không chở CSS ui) ───── */
.wpc-filter-range-form .ui-slider { position: relative; }
.wpc-filter-range-form .ui-slider-handle { position: absolute; z-index: 2; touch-action: none; }
.wpc-filter-range-form .ui-slider-range { position: absolute; top: 0; height: 100%; z-index: 1; }
.wpc-filter-range-form .ui-helper-hidden-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── widget layout (gom từ theme) ────────────────────────────────────── */
.widget_wpc_filters_widget, .few .widget_wpc_filters_widget { padding: 0; margin: 0; border: 0; background: #fff; border-radius: 10px;}
.wpc-filters-widget-wrapper { display: flex; flex-wrap: wrap; }
.wpc-filters-widget-wrapper > * { padding: 10px 20px; width: 33.33%; box-sizing: border-box; }
.wpc-filters-widget-content .wpc-filters-section { margin-bottom: 20px; }
@media screen and (max-width: 1000px) { .wpc-filters-widget-wrapper > * { padding: 15px; width: 50%; } }
@media screen and (max-width: 450px)  { .wpc-filters-widget-wrapper > * { width: 100%; } }

/* Input số + nút clear của khuôn FE: dữ liệu cho form GET/ut-loop, không
   phải UI — design ẩn hẳn (như từ thời theme override). */
.wpc-filters-range-wrapper { display: none; }

/* posts-found: data-carrier cho ut-loop swap, không hiển thị. */
.wpc-posts-found { display: none; }

/* ── section header: caret + title, click để collapse ────────────────── */
.wpc-filter-header { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.wpc-filter-header .wpc-filter-title { border: 0; padding: 0; margin: 0; }
.ut-filter-caret { width: 8px; height: 8px; flex: 0 0 8px; border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.ut-collapsed .ut-filter-caret { transform: rotate(-45deg); }
.ut-collapsed .wpc-filter-content { display: none; }

/* ── slider ──────────────────────────────────────────────────────────── */
.wpc-filter-range-form {
	--ut-filter-accent: var(--color-brand, #0088b0);
	/* halo mờ quanh handle — color-mix bám accent; dòng rgba trước làm
	   fallback cho browser cổ */
	--ut-filter-halo: rgba(0, 136, 176, .18);
	--ut-filter-halo: color-mix(in srgb, var(--ut-filter-accent) 18%, transparent);
}
.few .wpc-filters-range-slider-wrapper { margin: 18px 12px 2px; }
.wpc-filters-range-slider-control {
	height: 8px; border: 0; border-radius: 999px; background: #d9d9e0;
}
.wpc-filters-range-slider-control .ui-slider-range {
	background: var(--ut-filter-accent); border-radius: 999px;
}
/* Handle: lõi trắng + VÒNG teal (border) + halo mờ toả quanh (mock owner 30/08). */
.wpc-filters-range-slider-control .ui-slider-handle {
	width: 26px; height: 26px; top: 50%; margin-top: -13px; margin-left: -15px;
	background: #fff; border: 5px solid var(--ut-filter-accent); border-radius: 50%;
	box-sizing: border-box;
	box-shadow: 0 0 0 4px var(--ut-filter-halo), 0 1px 4px rgba(0, 0, 0, .22);
	cursor: grab; outline: none;
}
/* Hai handle chồng giá trị vẫn chạm được từng cái: lệch nhẹ 4px (thay margin
   hack ±15px thời ut-range.css). */
.wpc-filters-range-slider-control .ui-slider-handle:last-of-type { margin-left: -11px; }
.wpc-filters-range-slider-control .ui-slider-handle.ui-state-active {
	cursor: grabbing;
	box-shadow: 0 0 0 6px var(--ut-filter-halo), 0 2px 8px rgba(0, 0, 0, .3);
}
.wpc-filters-range-slider-control .ui-slider-handle:focus-visible {
	box-shadow: 0 0 0 4px var(--ut-filter-halo), 0 0 0 7px rgba(0, 136, 176, .35);
}
/* Kéo ngang mượt trong popup, vẫn cuộn dọc được (gom từ theme). */
.wpc-filters-widget-content .ui-slider { touch-action: pan-y; }
.wpc-filters-widget-content .ui-slider-handle { pointer-events: auto; z-index: 3; touch-action: pan-y; }

/* ── nhãn dưới slider: biên mờ 2 đầu + giá trị đậm bám handle ────────── */
.ut-fe-range__labels { position: relative; height: 22px; margin: 10px 12px 0; }
.ut-fe-range__bound { position: absolute; top: 3px; font-size: 11px; color: #a0a4ad; transition: opacity .15s; }
.ut-fe-range__bound--min { left: 0; }
.ut-fe-range__bound--max { right: 0; }
.ut-fe-range__bound.is-hidden { opacity: 0; }
.ut-fe-range__value {
	position: absolute; top: 0; transform: translateX(-50%);
	font-size: 13px; font-weight: 700; color: #1f2933; white-space: nowrap;
}

/* ── chips (pill — gom từ theme, icon × thuần chữ thay ảnh close.png) ── */
.wpc-custom-selected-terms { display: flex; }
.wpc-custom-selected-terms ul.wpc-filter-chips-list { display: flex; padding: 0; margin: 5px 0; flex-wrap: wrap; overflow: hidden; }
.wpc-filter-chips-list { list-style: none; align-items: stretch; gap: 6px; display: flex; padding: 10px; white-space: nowrap; overflow: auto;}
.wpc-empty-chips-container { margin: 0; }
.wpc-filter-chips-list li { height: auto; margin: 0; }
.wpc-filter-chips-list li a,
.wpc-filter-chips-list li span[data-wpc-span-link] {
	height: 100%; padding: 4px 6px 4px 12px; border-radius: 999px;
	background: #e7eff6; color: var(--color-darker-blue, #123c69);
	display: flex; align-items: center; gap: 6px; transition: all .3s;
	cursor: pointer; text-decoration: none; font-size: 13px; white-space: nowrap;
}
.wpc-filter-chips-list .wpc-chip-reset-all a { padding: 4px 12px; background: #ffecec; color: #720000; }
.wpc-filter-chips-list li.wpc-filter-chip:not(.wpc-chip-reset-all) a:hover,
.wpc-filter-chips-list li.wpc-filter-chip span[data-wpc-span-link]:hover { background: #d5e3ef; color: #000;}
.wpc-filter-chips-list li.wpc-chip-reset-all a:hover { background: #ffdcdc; }
.wpc-chip-content { display: flex; align-items: center; gap: 6px; }
.wpc-chip-content .wpc-chip-remove-icon {
	line-height: 1; border-radius: 50%; width: 18px; height: 18px;
	display: flex; justify-content: center; align-items: center;
	background: #ff7962; color: #fff; font-size: 13px;
}
.wpc-chip-reset-all .wpc-chip-remove-icon { display: none; }

/* ── terms filter (type=terms, generic taxonomy — 0.5.0) ─────────────── */
.ut-filter-terms { list-style: none; margin: 6px 0 0; padding: 0 4px; max-height: 230px; overflow: auto; }
.ut-filter-terms .ut-filter-term { margin: 0; }
.ut-filter-term-inner {
	display: flex; align-items: center; gap: 9px; padding: 5px 4px;
	cursor: pointer; border-radius: 6px; user-select: none;
}
.ut-filter-term-inner:hover { background: #f2f4f6; }
.ut-filter-term.is-disabled .ut-filter-term-inner { cursor: default; opacity: .45; }
.ut-filter-term.is-disabled .ut-filter-term-inner:hover { background: none; }
.ut-filter-checkbox {
	flex: 0 0 18px; width: 18px; height: 18px; box-sizing: border-box;
	border: 2px solid #c3c7cf; border-radius: 5px; background: #fff; position: relative;
}
.ut-filter-term.is-checked .ut-filter-checkbox {
	border-color: var(--color-brand, #0088b0); background: var(--color-brand, #0088b0);
}
.ut-filter-term.is-checked .ut-filter-checkbox::after {
	content: ''; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.ut-filter-term-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ut-filter-term.is-checked .ut-filter-term-name { font-weight: 600; }
.ut-filter-term-count { font-style: normal; font-size: 11px; color: #a0a4ad; }