:root {
	--bar-bg: #0C2C36; /* bar background */
	--bar-ring: rgba(255,255,255,.08);
	--pill: #1e607a; /* filter button bg */
	--pill-text: #eaf1f5;
	--input-bg: #0d3641; /* search input bg */
	--input-ring: rgba(255,255,255,.12);
	--placeholder: #9fb1ba;
	--ink: #e8eef2;
	--accent: #9D296B;
	--shadow-1: 0 10px 24px rgba(0,0,0,.25);
}

/* ====== BAR ====== */
.filterbar {
	display: flex;
	grid-template-columns: auto 1fr;
	/* gap: 18px;   */
	align-items: center;
	background: var(--sb-bg);
	border: 0px;
	margin-bottom: 16px;
}

	.filterbar input {
		flex: 1;
		background: transparent;
		border: 0;
		outline: none;
		color: var(--sb-text);
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
		line-height: 120%; /* 24px */
		width: 100%;
	}

		.filterbar input::placeholder {
			color: var(--sb-text);
			opacity: .95;
		}

/* Filter button */
.filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px;
	border-radius: 4px;
	background: #025773;
	color: #D2D2D2;

	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow-1);
	margin-left: 15px;

	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%; /* 16.8px */
}

	.filter-btn svg {
		width: 20px;
		height: 20px;
	}

/* Search */
.search {
	display: grid;
	grid-template-columns: 28px 1fr;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	/* background: var(--input-bg);
  border: 0px solid var(--input-ring);
  border-radius: 0px; */
	color: var(--ink);
}

.search__icon {
	width: 20px;
	height: 20px;
	color: #9fb1ba;
}

.search input {
	appearance: none;
	background: transparent;
	border: 0;
	outline: none;
	color: var(--ink);
	font-size: 16px;
	width: 100%;
}

	.search input::placeholder {
		color: var(--placeholder);
	}

/* Show/hide filter button per breakpoint (show on mobile, hide on desktop) */
@media (min-width: 992px) {
	.filter-btn {
		display: none;
	}
}

/* ====== DRAWER ====== */
.drawer {
	position: fixed;
	inset: 0 auto 0 0; /* left side */
	width: min(88vw, 340px);
	max-width: 100%;
	height: 100vh;
	background: #062D3A;
	border-right: 1px solid var(--bar-ring);
	transform: translateX(-100%);
	transition: transform .28s ease;
	z-index: 1050;
	box-shadow: var(--shadow-1);
	display: grid;
	grid-template-rows: auto 1fr;
}

	.drawer.open {
		transform: translateX(0);
	}

	.drawer[aria-hidden="false"] {
		transform: translateX(0);
	}

.drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid var(--bar-ring);
	color: var(--ink);
}

	.drawer__head h3 {
		margin: 0;
		font-size: 18px;
		font-weight: 700;
	}

.drawer__close {
	background: transparent;
	border: 0;
	color: var(--ink);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.drawer__body {
	/* padding: 14px 16px 18px; */
	overflow: auto;
	color: var(--ink);
	background-color: #001F2A;
}

.filter-group {
	margin-bottom: 18px;
}

.group-title {
	font-weight: 800;
	color: #dfe8ed;
	margin-bottom: 10px;
}

.chk {
	display: block;
	margin: 8px 0;
	color: #c7d3da;
}

	.chk input {
		margin-right: 8px;
	}

.filter-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.btn-primary {
	background: var(--accent);
	color: #fff;
	border: 0;
	padding: 10px 14px;
	border-radius: 8px;
	cursor: pointer;
}

.btn-ghost {
	background: transparent;
	color: #e7eef3;
	border: 1px solid var(--bar-ring);
	padding: 10px 14px;
	border-radius: 8px;
	cursor: pointer;
}

/* Backdrop */
.drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.45);
	z-index: 1040;
	opacity: 0;
	transition: opacity .25s ease;
}

	.drawer-backdrop.show {
		opacity: 1;
	}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
	.drawer, .drawer-backdrop {
		transition: none;
	}
}