/*
 * Univer Search — Frontend
 * Premium, dark-first capable, zero-deps.
 */

.us-search,
.us-search * {
	box-sizing: border-box;
}

.us-search .us-search__form,
.us-search .us-search__bar,
.us-search input.us-search__input,
.us-search button.us-search__clear,
.us-search button.us-search__submit {
	margin: 0;
	box-shadow: none;
}

.us-search input.us-search__input,
.us-search input[type="search"].us-search__input {
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	min-height: 0 !important;
	height: 100% !important;
	border-radius: 0 !important;
	padding: 0 56px 0 50px !important;
	margin: 0 !important;
	max-width: 100% !important;
	flex: 1 1 0% !important;
	width: 100% !important;
}

.us-search.us-tpl-pill input.us-search__input,
.us-search.us-tpl-pill input[type="search"].us-search__input {
	padding-right: 110px !important;
}

.us-search button.us-search__clear,
.us-search button.us-search__submit {
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.us-search .us-search__form {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.us-search {
	--us-accent: #10B981;
	--us-accent-soft: color-mix(in srgb, var(--us-accent) 12%, transparent);
	--us-accent-glow: color-mix(in srgb, var(--us-accent) 28%, transparent);
	--us-viewall: #10B981;
	--us-viewall-soft: color-mix(in srgb, var(--us-viewall) 10%, transparent);
	--us-viewall-strong: color-mix(in srgb, var(--us-viewall) 20%, transparent);
	--us-radius: 14px;
	--us-height: 56px;

	--us-bg: #f5f5f7;
	--us-bg-elev: #ffffff;
	--us-fg: #0a0a0a;
	--us-fg-muted: #6b6b6b;
	--us-border: rgba(0,0,0,.08);
	--us-border-strong: rgba(0,0,0,.14);
	--us-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
	--us-shadow-elev: 0 4px 12px rgba(0,0,0,.06), 0 24px 48px rgba(0,0,0,.10);
	--us-hover: rgba(0,0,0,.04);

	position: relative;
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: var(--us-fg);
	z-index: 100;
}

.us-search.us-tone-dark {
	--us-bg: #0b0b0c;
	--us-bg-elev: #131316;
	--us-fg: #f4f4f5;
	--us-fg-muted: #9b9ba1;
	--us-border: rgba(255,255,255,.08);
	--us-border-strong: rgba(255,255,255,.14);
	--us-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5);
	--us-shadow-elev: 0 8px 16px rgba(0,0,0,.4), 0 32px 64px rgba(0,0,0,.55);
	--us-hover: rgba(255,255,255,.06);
}

.us-search__form {
	position: relative;
	margin: 0;
	padding: 0;
	width: 100%;
}

.us-search__bar {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: var(--us-height);
	background-color: var(--us-bg);
	border-radius: var(--us-radius);
	transition: box-shadow .2s ease, border-color .2s ease;
}

.us-search__icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 20px;
	height: 20px;
	min-width: 20px;
	min-height: 20px;
	flex-shrink: 0;
	color: var(--us-fg-muted);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}

.us-search__icon * {
	fill: none;
	stroke: currentColor;
}

.us-search__input {
	flex: 1;
	width: 100%;
	height: 100%;
	padding: 0 56px 0 50px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--us-fg);
	font: inherit;
	font-size: 15px;
	letter-spacing: -.005em;
	-webkit-appearance: none;
	appearance: none;
}

.us-search__input::placeholder {
	color: var(--us-fg-muted);
	opacity: 1;
}

.us-search__input::-webkit-search-cancel-button,
.us-search__input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.us-search__input:focus { outline: 0; }

.us-search__clear {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%) scale(.85);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--us-hover);
	color: var(--us-fg-muted);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease;
}

.us-search__clear:hover {
	color: var(--us-fg);
	background: var(--us-border);
}

.us-search.is-filled .us-search__clear {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) scale(1);
}

.us-search__spinner {
	position: absolute;
	right: 22px;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border: 2px solid var(--us-border);
	border-top-color: var(--us-accent);
	border-radius: 50%;
	opacity: 0;
	transition: opacity .15s ease;
}

.us-search.is-loading .us-search__spinner {
	opacity: 1;
	animation: us-spin .7s linear infinite;
}

.us-search.is-loading .us-search__clear { opacity: 0; pointer-events: none; }

@keyframes us-spin { to { transform: rotate(360deg); } }

/* Panel */
.us-search__panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background: var(--us-bg-elev);
	border-radius: calc(var(--us-radius) - 2px);
	box-shadow: var(--us-shadow-elev);
	max-height: min(70vh, 540px);
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: opacity .18s ease, transform .18s ease;
	z-index: 999;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.us-search.is-open .us-search__panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.us-result {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	text-decoration: none;
	color: var(--us-fg);
	background: transparent;
	transition: background .12s ease;
	border-bottom: 1px solid var(--us-border);
}

.us-result:last-of-type { border-bottom: 0; }

.us-result:hover,
.us-result.is-active {
	background: var(--us-hover);
}

.us-result__thumb {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 10px;
	background: var(--us-hover);
	object-fit: cover;
	overflow: hidden;
}

.us-result__body {
	flex: 1;
	min-width: 0;
}

.us-result__title {
	display: block;
	font-weight: 500;
	font-size: 14px;
	color: var(--us-fg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -.005em;
}

.us-result__title mark {
	background: var(--us-accent-soft);
	color: var(--us-accent);
	padding: 1px 3px;
	border-radius: 4px;
	font-weight: 600;
}

.us-tone-dark .us-result__title mark {
	color: var(--us-fg);
}

.us-result__price {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--us-accent);
	letter-spacing: -.005em;
}

.us-result__price del {
	color: var(--us-fg-muted);
	font-weight: 400;
	margin-right: 6px;
}

.us-result__price ins {
	background: transparent;
	text-decoration: none;
}

.us-result__price-locked {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
	font-size: 12px;
	color: var(--us-fg-muted);
	letter-spacing: .005em;
}

.us-result__price-locked::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--us-fg-muted);
	opacity: .5;
}

.us-state {
	padding: 28px 20px;
	text-align: center;
	color: var(--us-fg-muted);
	font-size: 14px;
}

.us-state strong {
	display: block;
	color: var(--us-fg);
	font-size: 15px;
	margin-bottom: 4px;
	font-weight: 500;
}

.us-viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--us-viewall);
	background: var(--us-viewall-soft);
	border-top: 1px solid var(--us-border);
	text-decoration: none;
	letter-spacing: .005em;
	transition: background .15s ease;
}

.us-viewall:hover {
	background: var(--us-viewall-strong);
}

.us-viewall svg {
	transition: transform .15s ease;
}

.us-viewall:hover svg {
	transform: translateX(3px);
}

/* ============================================================
 * Template: MINIMAL
 * ============================================================ */
.us-tpl-minimal .us-search__bar {
	background: var(--us-bg);
	border: 1.5px solid var(--us-border);
	box-shadow: none;
}

.us-tpl-minimal .us-search__bar:hover {
	border-color: var(--us-border-strong);
}

.us-tpl-minimal:focus-within .us-search__bar {
	border-color: var(--us-accent);
	box-shadow: 0 0 0 4px var(--us-accent-soft);
}

.us-tpl-minimal:focus-within .us-search__icon {
	color: var(--us-accent);
}

/* ============================================================
 * Template: PILL
 * ============================================================ */
.us-tpl-pill .us-search__bar {
	background: var(--us-bg);
	border-radius: calc(var(--us-height) / 2);
	box-shadow: var(--us-shadow);
	border: 1px solid var(--us-border);
}

.us-tpl-pill .us-search__panel {
	border-radius: 18px;
}

.us-tpl-pill .us-search__input {
	padding-right: 110px;
}

.us-tpl-pill .us-search__clear {
	right: 64px;
}

.us-tpl-pill .us-search__spinner {
	right: 68px;
}

.us-tpl-pill .us-search__submit {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: calc(var(--us-height) - 12px);
	height: calc(var(--us-height) - 12px);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--us-accent);
	color: #fff;
	border: 0;
	border-radius: calc((var(--us-height) - 12px) / 2);
	cursor: pointer;
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
	box-shadow: 0 4px 12px var(--us-accent-glow);
}

.us-tpl-pill .us-search__submit:hover {
	transform: translateY(-50%) scale(1.04);
}

.us-tpl-pill .us-search__submit:active {
	transform: translateY(-50%) scale(.98);
}

.us-tpl-pill:focus-within .us-search__bar {
	border-color: var(--us-border-strong);
	box-shadow: 0 4px 16px var(--us-accent-glow), 0 1px 2px rgba(0,0,0,.05);
}

/* ============================================================
 * Template: GLASS
 * ============================================================ */
.us-tpl-glass .us-search__bar {
	background: color-mix(in srgb, var(--us-bg) 70%, transparent);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border: 1px solid var(--us-border);
	box-shadow: var(--us-shadow);
}

.us-tpl-glass.us-tone-dark .us-search__bar {
	background: rgba(20,20,22,.55);
}

.us-tpl-glass .us-search__panel {
	background: color-mix(in srgb, var(--us-bg-elev) 85%, transparent);
	backdrop-filter: blur(24px) saturate(200%);
	-webkit-backdrop-filter: blur(24px) saturate(200%);
	border: 1px solid var(--us-border);
}

.us-tpl-glass.us-tone-dark .us-search__panel {
	background: rgba(20,20,22,.75);
}

.us-tpl-glass:focus-within .us-search__bar {
	border-color: var(--us-accent);
	box-shadow: 0 0 0 4px var(--us-accent-soft), var(--us-shadow);
}

.us-tpl-glass:focus-within .us-search__icon {
	color: var(--us-accent);
}

/* ============================================================
 * Scrollbar
 * ============================================================ */
.us-search__panel::-webkit-scrollbar {
	width: 8px;
}

.us-search__panel::-webkit-scrollbar-track {
	background: transparent;
}

.us-search__panel::-webkit-scrollbar-thumb {
	background: var(--us-border-strong);
	border-radius: 8px;
}

.us-search__panel::-webkit-scrollbar-thumb:hover {
	background: var(--us-fg-muted);
}

/* ============================================================
 * Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.us-search *,
	.us-search *::before,
	.us-search *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
 * Mobile
 * ============================================================ */
@media (max-width: 540px) {
	.us-search__panel { max-height: 60vh; }
	.us-result { padding: 10px 14px; }
	.us-result__thumb { width: 44px; height: 44px; }
	.us-result__title { font-size: 14px; }
	.us-tpl-pill .us-search__submit { width: calc(var(--us-height) - 14px); height: calc(var(--us-height) - 14px); }
}