/* Desktop header search: icon-only, expand + frosted glass. Mobile (≤768px) stays in app.css. */
@media (min-width: 769px) {
	.header-box .header-tools > .icon-search {
		display: none !important;
	}

	.header-box .header .search-box {
		position: relative;
		z-index: 20;
		align-items: center;
		display: flex;
		flex-shrink: 0;
		height: 100%;
		width: 42px;
	}

	.header-box .header .search-box .search {
		position: absolute;
		inset-inline-end: 0;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		overflow: hidden;
		width: 42px;
		height: 42px;
		border: 1px solid transparent;
		border-radius: 30px;
		background: transparent;
		transition: width .28s ease, background .28s ease, box-shadow .28s ease, border-color .28s ease;
	}

	.header-box .header .search-box .search .input {
		width: 0;
		padding-left: 0;
		opacity: 0;
		pointer-events: none;
		background: none;
		border: none;
		outline: none;
	}

	.header-box .header .search-box .search .icon {
		flex-shrink: 0;
		cursor: pointer;
		width: 42px;
	}

	.header-box .header .search-box .search:hover {
		background: transparent;
	}

	.header-box .header .search-box .search:hover .icon {
		color: var(--jq_primary);
	}

	.header-box .header .search-box.active .search {
		width: min(520px, 80vw);
		border-color: rgba(255, 255, 255, .45);
		background: rgba(255, 255, 255, .55);
		-webkit-backdrop-filter: blur(16px) saturate(180%);
		backdrop-filter: blur(16px) saturate(180%);
		box-shadow: 0 8px 32px rgba(0, 0, 0, .12);
	}

	.header-box .header .search-box.active .search:hover {
		background: rgba(255, 255, 255, .65);
	}

	.header-box .header .search-box.active .search .input {
		width: calc(100% - 42px);
		padding-left: 20px;
		opacity: 1;
		pointer-events: auto;
	}
}