/* Intentionally scoped to the search surface. */
.search-section {
	--search-glass-border: rgba(255, 255, 255, 0.84);
	--search-glass-ink: #15223d;
	position: sticky;
	isolation: isolate;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.24);
	border: 1px solid var(--search-glass-border);
	border-top: 0;
	border-radius: 0 0 20px 20px;
	box-shadow: 0 16px 40px rgba(143, 24, 52, 0.14), 0 2px 8px rgba(23, 24, 31, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 rgba(255, 255, 255, 0.32);
	backdrop-filter: blur(42px) saturate(155%);
	-webkit-backdrop-filter: blur(42px) saturate(155%);
}

.search-section.collapsed {
	background: rgba(255, 255, 255, 0.24);
	border-color: var(--search-glass-border);
	box-shadow: 0 12px 30px rgba(143, 24, 52, 0.12), 0 2px 8px rgba(23, 24, 31, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(42px) saturate(155%);
	-webkit-backdrop-filter: blur(42px) saturate(155%);
}

.search-section.collapsed .mini-search-bar {
	background-color: transparent;
	border-color: transparent;
	box-shadow: none;
}

.search-section input,
.search-section select,
.search-section .filter-toggle,
.search-section #searchBtn,
.search-section .mini-search-bar {
	background-color: rgba(255, 255, 255, 0.26);
	border-color: rgba(255, 255, 255, 0.84);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 12px rgba(43, 58, 96, 0.1);
	backdrop-filter: blur(18px) saturate(135%);
	-webkit-backdrop-filter: blur(18px) saturate(135%);
	color: var(--search-glass-ink);
}

.search-section #query {
	background-color: rgba(255, 255, 255, 0.62);
	border-color: rgba(255, 255, 255, 0.92);
	color: #1d1d1f;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.96), 0 3px 10px rgba(51, 40, 45, 0.1);
}

.search-section #query::placeholder {
	color: #6e6e73;
	opacity: 1;
}

.search-section input:focus,
.search-section select:focus {
	border-color: rgba(255, 255, 255, 0.96);
	box-shadow: 0 0 0 3px rgba(250, 45, 72, 0.16), 0 7px 18px rgba(167, 37, 67, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.search-section #searchBtn,
.search-section .filter-toggle,
.search-section .mini-bar-btn {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
	box-shadow: 0 7px 18px rgba(214, 30, 56, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.search-section #searchBtn:hover,
.search-section .filter-toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(181, 30, 61, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.search-section .filter-summary,
.search-section .mini-bar-text { color: var(--search-glass-ink); }

.search-section .suggest {
	border-top-color: rgba(250, 45, 72, 0.16);
	padding-top: 8px;
}

.search-section .suggest-items {
	align-items: center;
	padding: 2px 0 4px;
}

.search-section .suggest-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0 12px;
	background: #fff1f3;
	border: 1px solid #f4c5ce;
	border-radius: 10px;
	color: #c51e3a;
	font-weight: 600;
	line-height: 1;
	position: relative;
	z-index: 1;
	box-shadow: 0 2px 5px rgba(177, 31, 58, 0.08);
}

.search-section .suggest-item:hover {
	background: #ffe4e9;
	border-color: #ed9cab;
	color: #a9152e;
	transform: none;
}

@media (max-width: 768px) {
	.search-section #query {
		background-color: rgba(255, 255, 255, 0.86);
		border-color: rgba(255, 255, 255, 0.98);
		color: #17171a;
		box-shadow: inset 0 1px 0 #fff;
	}

	.search-section #query::placeholder { color: #5f5f66; }
}