/**
 * VNT39 LIVE SEARCH — header autocomplete dropdown (2026-09-29)
 *
 * Styles the existing `.live-search-results` div inc/header.php and
 * inc/header-mobile.php already render inside their `.searchform` (see
 * those files' docblocks) plus the markup assets/js/header-search.js
 * builds inside it (`.vnt39-live-search` and its children) and the one
 * shared overlay that script appends to <body>. Flatsome's own
 * `.live-search-results` CSS never actually matched this markup (its
 * selectors need `.col`/`.header .search-form` (hyphenated)/`.header-block`
 * ancestors this header doesn't have — confirmed by reading
 * flatsome.css), so every rule below is this file's own, not an override.
 */

/* ---- dropdown positioning (the empty div already in the form) ---- */
.vnt39-header__search .live-search-results,
.vnt39-mheader__search .live-search-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 90001;
	margin-top: 8px;
	display: none;
}

.vnt39-header__search .searchform-wrapper,
.vnt39-mheader__search {
	position: relative;
}

.vnt39-live-search.is-open {
	display: block;
}

.vnt39-live-search {
	background: var( --vnt39-surface, #fff );
	border: 1px solid var( --vnt39-border, #e5e7eb );
	border-radius: var( --vnt39-radius-md, 10px );
	box-shadow: 0 16px 40px rgba( 17, 24, 39, 0.14 );
	max-height: 640px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 0;
}

/* ---- shared overlay (assets/js/header-search.js appends one to <body>) ---- */
.vnt39-live-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 90000;
	background: rgba( 30, 8, 8, 0.4 );
	opacity: 0;
	visibility: hidden;
	pointer-events: none; /* closed state MUST NOT intercept clicks — same fix as the mega menu's click-through bug (see header.css's own 2026-09-27 note). */
	transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}

.vnt39-live-search-overlay.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

/* form's own local z-index (matters only for competing against OTHER
   elements inside #header, e.g. the mega menu) — kept, but this alone does
   NOT get the dropdown above the overlay, see the #header rule below. */
.searchform.is-live-search-open {
	position: relative;
	z-index: 90002;
}

/**
 * STACKING-CONTEXT FIX (2026-09-29) — "dropdown visible but not clickable".
 *
 * Root cause, confirmed by reading the real DOM/CSS chain (not guessed):
 * Flatsome's own flatsome.css sets `.header, .header-wrapper { position:
 * relative; z-index:1001 }` — and inc/header.php's markup renders INSIDE
 * that exact <header id="header" class="header"> > .header-wrapper chain
 * (template-parts/header/header-wrapper.php calls vnt39_header_render()
 * from inside Flatsome's own #header markup — confirmed in
 * flatsome/header.php: <header id="header" class="header">
 * <div class="header-wrapper"><?php get_template_part(
 * 'template-parts/header/header','wrapper' ); ?>). #wrapper (the only
 * element between <body> and #header) has position:relative but NO
 * z-index of its own, so it creates no stacking context of its own —
 * #header's z-index:1001 is compared DIRECTLY against any other
 * explicitly-stacked element appended to <body>, including the live-search
 * overlay (assets/js/header-search.js appends it straight to
 * document.body, z-index:90000).
 *
 * 90000 > 1001, so the overlay's OWN stacking context paints/hit-tests
 * above the ENTIRE #header subtree — dropdown included — no matter what
 * z-index is set on elements INSIDE #header (a z-index only ever competes
 * within its own parent stacking context; the dropdown's 90001 and the
 * form's 90002 above are both trapped inside #header's local context and
 * never reach the outer comparison against the overlay). This is exactly
 * why the dropdown still PAINTS on top (paint order inside #header is
 * unaffected) while every click is hit-tested to the overlay instead —
 * "visible but not interactive".
 *
 * Fix: while a `.searchform` inside the header carries
 * `.is-live-search-open` (already toggled by header-search.js's own
 * open()/close() — no JS change needed for this fix), lift #header's OWN
 * z-index above the overlay's, for that moment only. Once #header wins
 * that outer comparison, everything already correctly ordered inside it
 * (dropdown above form above the rest of the header) becomes clickable
 * too — a single, minimal, CSS-only change, no JS touched, no scoring/
 * retrieval/AJAX/grouping/grid file touched.
 */
#header:has( .searchform.is-live-search-open ) {
	position: relative;
	z-index: 90003;
}

/* ---- sections ---- */
.vnt39-live-search__section + .vnt39-live-search__section {
	border-top: 1px solid var( --vnt39-border, #e5e7eb );
	margin-top: 4px;
	padding-top: 4px;
}

/* Visual polish (2026-09-29): black/bold heading with a small red icon
   before the text — was gray/uppercase/weak, per real-browser feedback
   against the CellphoneS reference. Icon markup itself comes from
   assets/js/header-search.js's buildHeading() (fixed, trusted SVG strings,
   same icon family as inc/search/results-ui.php's vnt39_search_results_icon()
   on the full Search Results page); this file only styles it. */
.vnt39-live-search__heading {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px 6px;
	font-size: 13px;
	font-weight: 700;
	color: var( --vnt39-text, #17191f );
}

.vnt39-live-search__heading-icon {
	flex: 0 0 auto;
	color: var( --vnt39-brand, #8f0b18 );
}

/* ---- "Gợi ý tìm kiếm" chips ---- */
.vnt39-live-search__suggest-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 14px 8px;
}

.vnt39-live-search__suggest-item {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --vnt39-surface-soft, #f8f9fb );
	border: 1px solid var( --vnt39-border, #e5e7eb );
	color: var( --vnt39-text, #17191f );
	font-size: 13px;
	text-decoration: none;
	line-height: 1.3;
}

.vnt39-live-search__suggest-item:hover,
.vnt39-live-search__suggest-item.is-active {
	border-color: var( --vnt39-brand, #8f0b18 );
	background: var( --vnt39-brand-soft, #fff5f5 );
	color: var( --vnt39-brand, #8f0b18 );
}

/* ---- product / repair / part / article rows ---- */
.vnt39-live-search__rows {
	display: flex;
	flex-direction: column;
}

.vnt39-live-search__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	text-decoration: none;
	color: inherit;
}

.vnt39-live-search__row:hover,
.vnt39-live-search__row.is-active {
	background: var( --vnt39-surface-soft, #f8f9fb );
}

.vnt39-live-search__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var( --vnt39-radius-sm, 4px );
	overflow: hidden;
	background: var( --vnt39-surface-soft, #f8f9fb );
	border: 1px solid var( --vnt39-border, #e5e7eb );
}

.vnt39-live-search__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vnt39-live-search__info {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vnt39-live-search__title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var( --vnt39-text, #17191f );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.15s ease;
}

/* Hover reacts on the TITLE only (task: "Do NOT underline price... entire
   card/row") — the row itself stays the same clickable target/background
   hover already set on .vnt39-live-search__row above; this adds the
   red + underline specifically to the title text inside it. */
.vnt39-live-search__row:hover .vnt39-live-search__title,
.vnt39-live-search__row.is-active .vnt39-live-search__title {
	color: var( --vnt39-brand, #8f0b18 );
	text-decoration: underline;
	text-decoration-color: var( --vnt39-brand, #8f0b18 );
}

.vnt39-live-search__price {
	font-size: 13px;
	font-weight: 700;
	color: var( --vnt39-brand, #8f0b18 );
}

/* WooCommerce/theme price markup actually rendered here (confirmed live —
   see inc/search/live-search.php's priceHtml, e.g.
   .vnt39-archive-price > .vnt39-archive-price__unit (current) +
   del.vnt39-archive-price__was (old) + .vnt39-archive-price__saving /
   .vnt39-countdown (discount %/countdown) — not WooCommerce's default
   bare <ins>/<del> pair). Current price inherits red+bold from the
   .vnt39-live-search__price wrapper above by design (task: "current price
   ... red, bold"); only the two pieces below need their own override. */
.vnt39-live-search__price del {
	margin-left: 6px;
	font-weight: 400;
	font-size: 12px;
	color: var( --vnt39-muted, #667085 );
	text-decoration: line-through;
}

.vnt39-live-search__price ins {
	text-decoration: none;
}

/* Discount %/countdown — "can remain as currently styled" (task rule 3):
   kept out of the red+bold cascade above so it reads the same, understated
   way it already does on the full Search Results product cards, not
   accidentally over-emphasized just because it's nested inside the price
   wrapper here. */
.vnt39-live-search__price .vnt39-archive-price__saving,
.vnt39-live-search__price .vnt39-countdown {
	color: var( --vnt39-muted, #667085 );
	font-weight: 400;
}

/* ---- footer "view all" ---- */
.vnt39-live-search__viewall {
	display: block;
	margin-top: 4px;
	padding: 10px 14px;
	border-top: 1px solid var( --vnt39-border, #e5e7eb );
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var( --vnt39-brand, #8f0b18 );
	text-decoration: none;
}

.vnt39-live-search__viewall:hover,
.vnt39-live-search__viewall.is-active {
	background: var( --vnt39-brand-soft, #fff5f5 );
}

/* ---- loading / empty / error states (fixed-shape so swapping to real
   results doesn't visibly jump the dropdown's height) ---- */
.vnt39-live-search__state {
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
}

.vnt39-live-search__state--loading {
	gap: 10px;
}

.vnt39-live-search__spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var( --vnt39-border, #e5e7eb );
	border-top-color: var( --vnt39-brand, #8f0b18 );
	animation: vnt39-live-search-spin 0.7s linear infinite;
}

@keyframes vnt39-live-search-spin {
	to {
		transform: rotate( 360deg );
	}
}

.vnt39-live-search__state--empty {
	flex-direction: column;
	gap: 8px;
}

.vnt39-live-search__state--empty p {
	margin: 0;
	color: var( --vnt39-muted, #667085 );
	font-size: 13.5px;
}

.vnt39-live-search__empty-link {
	color: var( --vnt39-brand, #8f0b18 );
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.vnt39-live-search__state--error {
	color: var( --vnt39-muted, #667085 );
	font-size: 13.5px;
}

/* ---- mobile: viewport-based height, no horizontal overflow ---- */
@media ( max-width: 1023px ) {
	.vnt39-mheader__search .live-search-results {
		left: 0;
		right: 0;
		margin-top: 6px;
	}
	.vnt39-live-search {
		max-height: calc( 100vh - 140px );
	}
	.vnt39-live-search__thumb {
		width: 40px;
		height: 40px;
	}
}

/* query resolver hint line (inc/search/resolver.php) */
.vnt39-live-search__hint { padding: 8px 14px; background: #fff7e6; border-bottom: 1px solid #f5d9a8; color: #5c3b00; font-size: 12.5px; line-height: 1.4; }