/**
 * Intimacy Insight — Advanced Live Search Styles
 * ------------------------------------------------------------------
 * Premium, stylish search bar: larger touch target, animated focus
 * ring, clear button, and a rich results dropdown with thumbnails,
 * category badges, and keyboard-navigable active states. Consumes
 * design-tokens.css exclusively (locked brand palette only).
 */

/* ====================================================================
   1. SEARCH BAR — ENHANCED BASE
   ==================================================================== */

.ii-advanced-search {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
}

.ii-advanced-search .ii-hero__search {
	position: relative;
	max-width: none;
	margin: 0;
}

.ii-hero__search-clear {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: none;
	background: none;
	color: var(--ii-color-text-muted);
	border-radius: var(--ii-radius-full);
	cursor: pointer;
	transition: color var(--ii-transition-fast), background-color var(--ii-transition-fast);
}

.ii-hero__search-clear:hover {
	color: var(--ii-color-text-primary);
	background-color: var(--ii-color-bg-alt);
}

.ii-hero__search-clear .ii-icon {
	width: 16px;
	height: 16px;
}

/* Submit button: icon-only on very small screens, full label from sm up */
.ii-hero__search-submit-icon {
	display: none;
}

@media (max-width: 479px) {
	.ii-hero__search-submit {
		padding: 10px 14px;
	}

	.ii-hero__search-submit-text {
		display: none;
	}

	.ii-hero__search-submit-icon {
		display: flex;
	}

	.ii-hero__search-submit-icon .ii-icon {
		width: 18px;
		height: 18px;
	}
}

/* ====================================================================
   2. RESULTS DROPDOWN PANEL
   ==================================================================== */

.ii-live-search-panel {
	position: absolute;
	top: calc(100% + var(--ii-space-2));
	left: 0;
	right: 0;
	background-color: var(--ii-color-bg);
	border: 1px solid var(--ii-color-border);
	border-radius: var(--ii-radius-lg);
	box-shadow: var(--ii-shadow-xl);
	overflow: hidden;
	z-index: var(--ii-z-mega-menu);
	text-align: left;
	animation: ii-search-panel-in var(--ii-transition-base) ease both;
}

@keyframes ii-search-panel-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ii-live-search-panel {
		animation: none;
	}
}

.ii-live-search-panel__message {
	padding: var(--ii-space-5);
	font-size: var(--ii-text-sm);
	color: var(--ii-color-text-secondary);
	text-align: center;
}

.ii-live-search-panel__list {
	list-style: none;
	margin: 0;
	padding: var(--ii-space-2);
	max-height: 60vh;
	overflow-y: auto;
}

.ii-live-search-panel__item {
	border-radius: var(--ii-radius-md);
}

.ii-live-search-panel__link {
	display: flex;
	align-items: center;
	gap: var(--ii-space-3);
	padding: var(--ii-space-2) var(--ii-space-3);
	text-decoration: none;
	border-radius: var(--ii-radius-md);
	transition: background-color var(--ii-transition-fast);
}

.ii-live-search-panel__item.is-active .ii-live-search-panel__link,
.ii-live-search-panel__link:hover {
	background-color: var(--ii-color-primary-light);
}

.ii-live-search-panel__thumb {
	flex-shrink: 0;
	display: block;
	width: 44px;
	height: 44px;
	border-radius: var(--ii-radius-md);
	overflow: hidden;
	background-color: var(--ii-color-bg-alt);
}

.ii-live-search-panel__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ii-live-search-panel__thumb--empty {
	background: linear-gradient(135deg, var(--ii-color-bg-alt), var(--ii-color-border));
}

.ii-live-search-panel__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ii-live-search-panel__badge {
	font-size: var(--ii-text-xs);
	font-weight: var(--ii-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ii-color-primary-dark);
}

.ii-live-search-panel__title {
	font-size: var(--ii-text-sm);
	font-weight: var(--ii-weight-medium);
	color: var(--ii-color-text-primary);
	line-height: var(--ii-leading-tight);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ii-live-search-panel__meta {
	font-size: var(--ii-text-xs);
	color: var(--ii-color-text-secondary);
}

.ii-live-search-panel__view-all {
	display: block;
	text-align: center;
	padding: var(--ii-space-3);
	font-size: var(--ii-text-sm);
	font-weight: var(--ii-weight-semibold);
	color: var(--ii-color-primary-dark);
	text-decoration: none;
	border-top: 1px solid var(--ii-color-border);
	background-color: var(--ii-color-bg-alt);
	transition: background-color var(--ii-transition-fast);
}

.ii-live-search-panel__view-all:hover {
	background-color: var(--ii-color-primary-light);
}

/* ====================================================================
   2b. POPULAR SEARCHES (shown on focus before typing)
   ==================================================================== */

.ii-live-search-panel__popular {
	padding: var(--ii-space-4) var(--ii-space-5);
}

.ii-live-search-panel__popular-label {
	display: block;
	font-size: var(--ii-text-xs);
	font-weight: var(--ii-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ii-color-text-muted);
	margin-bottom: var(--ii-space-3);
}

.ii-live-search-panel__popular-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ii-space-2);
}

.ii-live-search-panel__popular-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px var(--ii-space-4);
	font-size: var(--ii-text-sm);
	font-weight: var(--ii-weight-medium);
	color: var(--ii-color-primary-dark);
	background-color: var(--ii-color-primary-light);
	border-radius: var(--ii-radius-full);
	text-decoration: none;
	transition: background-color var(--ii-transition-fast), transform var(--ii-transition-fast);
}

.ii-live-search-panel__popular-tag:hover {
	background-color: var(--ii-color-primary);
	color: #fff;
	transform: translateY(-1px);
}

/* ====================================================================
   3. DARK MODE
   ==================================================================== */

[data-theme="dark"] .ii-live-search-panel {
	background-color: var(--ii-color-bg);
	border-color: var(--ii-color-border);
}

[data-theme="dark"] .ii-live-search-panel__view-all {
	background-color: var(--ii-color-bg-alt);
}

/* ====================================================================
   4. RESPONSIVE
   ==================================================================== */

@media (max-width: 479px) {
	.ii-live-search-panel__thumb {
		width: 36px;
		height: 36px;
	}

	.ii-live-search-panel__list {
		max-height: 50vh;
	}
}