/* =========================================================
   Vestil Modern Quick Search Dropdown
   File: FBQuick.css
   Purpose: Search-as-you-type dropdown styling
   Theme: Modern Vestil / Laser Blue Heartbeat
   ========================================================= */

:root {
	--vestil-navy: #0E284E;
	--vestil-navy-dark: #071a34;
	--vestil-blue: #0897ff;
	--vestil-blue-soft: #cde6f3;
	--vestil-yellow: #ffcc33;

	--vestil-laser-blue: #00aaff;
	--vestil-laser-blue-bright: #35c9ff;
	--vestil-laser-blue-deep: #006dff;
	--vestil-laser-glow: rgba(0, 170, 255, 0.55);

	--vestil-dark: #111827;
	--vestil-text: #1f2937;
	--vestil-muted: #5f6f82;
	--vestil-border: rgba(14, 40, 78, 0.14);
	--vestil-card: #ffffff;
	--vestil-bg-soft: #f5f8fb;
	--vestil-shadow: 0 18px 45px rgba(14, 40, 78, 0.22);
}

/* =========================================================
   Main dropdown shell
   ========================================================= */

div.searchlight-balloon {
	opacity: 1;
	z-index: 1001;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 18px;
	background: transparent;
	box-shadow: var(--vestil-shadow);
	filter: drop-shadow(0 18px 32px rgba(14, 40, 78, 0.20));
	overflow: hidden;
}

/* Dropdown wrapper */
div.searchlight-results-wrapper {
	position: relative;
	margin-top: 10px !important;
	color: var(--vestil-text);
	background: var(--vestil-card);
	border: 1px solid rgba(0, 170, 255, 0.22);
	border-radius: 18px;
	overflow: hidden;
}

/* Laser blue top glow bar - heartbeat pulse */
div.searchlight-results-wrapper::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		rgba(0, 109, 255, 0.45),
		var(--vestil-laser-blue-bright),
		#ffffff,
		var(--vestil-laser-blue-bright),
		rgba(0, 109, 255, 0.45)
	);
	box-shadow:
		0 0 6px rgba(0, 170, 255, 0.35),
		0 0 14px rgba(0, 170, 255, 0.22),
		0 0 26px rgba(0, 109, 255, 0.14);
	opacity: 0.72;
	animation: vestilLaserHeartbeat 2.8s ease-in-out infinite;
	z-index: 3;
}

@keyframes vestilLaserHeartbeat {
	0% {
		opacity: 0.48;
		box-shadow:
			0 0 4px rgba(0, 170, 255, 0.25),
			0 0 10px rgba(0, 170, 255, 0.16),
			0 0 18px rgba(0, 109, 255, 0.10);
	}

	14% {
		opacity: 1;
		box-shadow:
			0 0 8px rgba(0, 170, 255, 0.75),
			0 0 20px rgba(0, 170, 255, 0.48),
			0 0 38px rgba(0, 109, 255, 0.30);
	}

	24% {
		opacity: 0.62;
		box-shadow:
			0 0 5px rgba(0, 170, 255, 0.35),
			0 0 12px rgba(0, 170, 255, 0.22),
			0 0 24px rgba(0, 109, 255, 0.14);
	}

	36% {
		opacity: 0.95;
		box-shadow:
			0 0 7px rgba(0, 170, 255, 0.65),
			0 0 18px rgba(0, 170, 255, 0.42),
			0 0 34px rgba(0, 109, 255, 0.25);
	}

	52% {
		opacity: 0.52;
		box-shadow:
			0 0 4px rgba(0, 170, 255, 0.24),
			0 0 10px rgba(0, 170, 255, 0.15),
			0 0 18px rgba(0, 109, 255, 0.09);
	}

	100% {
		opacity: 0.48;
		box-shadow:
			0 0 4px rgba(0, 170, 255, 0.25),
			0 0 10px rgba(0, 170, 255, 0.16),
			0 0 18px rgba(0, 109, 255, 0.10);
	}
}

/* =========================================================
   Results table
   ========================================================= */

table.searchlight-results {
	width: min(560px, calc(100vw - 32px)) !important;
	margin: 0 !important;
	border-collapse: separate;
	border-spacing: 0;
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	background: var(--vestil-card);
}

/* Cell reset */
table.searchlight-results td,
table.searchlight-results th {
	padding: 0;
	text-shadow: none;
	background: transparent;
}

/* Result row */
table.searchlight-results tr {
	cursor: pointer;
	transition:
		background-color 0.18s ease,
		transform 0.18s ease;
}

/* Result cell */
table.searchlight-results td {
	position: relative;
	width: 100%;
	padding: 14px 16px !important;
	border-bottom: 1px solid rgba(14, 40, 78, 0.09);
	background: #ffffff;
}

/* Last item cleanup */
table.searchlight-results tr:last-child td {
	border-bottom: 0;
}

/* Hover/keyboard selected state */
table.searchlight-results tr.searchlight-selected th,
table.searchlight-results tr.searchlight-selected td,
table.searchlight-results tr:hover td {
	background:
		linear-gradient(90deg, rgba(0, 170, 255, 0.18), rgba(255, 255, 255, 0.98)),
		linear-gradient(135deg, rgba(0, 109, 255, 0.10), transparent 44%) !important;
	box-shadow:
		inset 4px 0 0 var(--vestil-laser-blue),
		inset 0 0 22px rgba(0, 170, 255, 0.08);
	text-decoration: none;
	text-shadow: none;
}

/* Result item wrapper */
table.searchlight-results td .searchlight-result-item {
	position: relative;
	display: block;
	min-height: 96px !important;
	padding: 0;
}

/* =========================================================
   Thumbnail image
   ========================================================= */

table.searchlight-results .searchlight-result-icon {
	float: left;
	width: 96px !important;
	height: 96px !important;
	max-width: 96px !important;
	min-height: 96px !important;
	max-height: 96px !important;
	margin: 0 16px 0 0 !important;
	padding: 8px;
	object-fit: contain;
	background: #ffffff;
	border: 1px solid rgba(14, 40, 78, 0.12);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(14, 40, 78, 0.08);
	vertical-align: top;
	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease,
		border-color 0.18s ease;
}

/* Thumbnail hover glow */
table.searchlight-results tr:hover .searchlight-result-icon,
table.searchlight-results tr.searchlight-selected .searchlight-result-icon {
	transform: scale(1.055);
	border-color: rgba(0, 170, 255, 0.55);
	box-shadow:
		0 0 0 1px rgba(0, 170, 255, 0.18),
		0 10px 25px rgba(0, 170, 255, 0.22),
		0 0 24px rgba(0, 170, 255, 0.20);
}

/* =========================================================
   Result text
   ========================================================= */

.searchlight-result-text {
	display: block;
	min-height: 96px !important;
	padding-top: 2px;
	color: var(--vestil-text);
	line-height: 1.35;
	transition: transform 0.18s ease;
}

/* Subtle text movement on hover */
table.searchlight-results tr:hover .searchlight-result-text,
table.searchlight-results tr.searchlight-selected .searchlight-result-text {
	transform: translateX(2px);
}

/* Title */
.sl_title {
	display: block;
	max-height: none;
	margin: 0 0 6px 0;
	overflow: hidden;
	color: var(--vestil-navy);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

/* Laser title hover */
table.searchlight-results tr:hover .sl_title,
table.searchlight-results tr.searchlight-selected .sl_title {
	color: var(--vestil-laser-blue-deep);
	text-shadow:
		0 0 12px rgba(0, 170, 255, 0.16),
		0 0 22px rgba(0, 170, 255, 0.10);
}

/* Description */
.sl_descr {
	display: block;
	color: var(--vestil-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

/* Make nested text readable if FusionBot injects spans/font tags */
.searchlight-result-text *,
.sl_title *,
.sl_descr * {
	opacity: 1 !important;
}

/* Optional price styling */
.searchlight-result-text .sale-price {
	display: inline-block;
	float: none;
	margin-top: 6px;
	padding: 3px 8px;
	color: #8a0303;
	background: rgba(172, 4, 4, 0.08);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
}

/* Header text if FusionBot outputs it */
table.searchlight-results .searchlight-header-text {
	display: block;
	padding: 11px 14px 9px 14px;
	color: #ffffff;
	background: linear-gradient(135deg, var(--vestil-navy), #123d73);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Spacer rows hidden */
.searchlight-spacer-row,
table.searchlight-results tr.searchlight-spacer-row td {
	display: none !important;
	height: 0;
	padding: 0;
	border: 0;
}

/* Legacy alignment cleanup */
.searchlight-not-selected,
.searchlight-selected {
	text-align: left;
}

/* Clear floats safely */
table.searchlight-results td::after {
	content: "";
	display: table;
	clear: both;
}

/* =========================================================
   Footer / Search all results area
   ========================================================= */

#searchlight-footer {
	height: auto;
	padding: 0;
	color: #ffffff;
	background:
		linear-gradient(135deg, var(--vestil-navy), var(--vestil-navy-dark));
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-weight: 900;
	text-align: center;
}

#searchlight-footer td {
	position: relative;
	overflow: hidden;
	padding: 13px 14px !important;
	color: #ffffff;
	background: transparent !important;
	border-bottom: 0;
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.01em;
}

/* Footer shine */
#searchlight-footer td::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		120deg,
		transparent,
		rgba(255, 255, 255, 0.18),
		transparent
	);
	transform: skewX(-18deg);
	pointer-events: none;
}

#searchlight-footer:hover td::after {
	animation: vestilQuickFooterShine 0.75s ease;
}

@keyframes vestilQuickFooterShine {
	0% {
		left: -120%;
	}

	100% {
		left: 140%;
	}
}

#searchlight-footer a {
	color: #ffffff;
	text-decoration: none;
}

#searchlight-footer:hover td,
#searchlight-footer a:hover {
	color: #dff7ff !important;
	text-shadow:
		0 0 10px rgba(0, 170, 255, 0.55),
		0 0 22px rgba(0, 170, 255, 0.32);
}

/* =========================================================
   Mobile
   ========================================================= */

@media screen and (max-width: 640px) {
	div.searchlight-balloon {
		left: 12px !important;
		right: 12px !important;
		width: auto !important;
		border-radius: 16px;
	}

	div.searchlight-results-wrapper {
		border-radius: 16px;
	}

	table.searchlight-results {
		width: 100% !important;
		font-size: 13px;
	}

	table.searchlight-results td {
		padding: 12px !important;
	}

	table.searchlight-results .searchlight-result-icon {
		width: 78px !important;
		height: 78px !important;
		max-width: 78px !important;
		min-height: 78px !important;
		max-height: 78px !important;
		margin-right: 12px !important;
		padding: 7px;
		border-radius: 14px;
	}

	table.searchlight-results td .searchlight-result-item,
	.searchlight-result-text {
		min-height: 78px !important;
	}

	.sl_title {
		font-size: 13px;
	}

	.sl_descr {
		font-size: 12px;
		line-height: 1.35;
	}
}

/* =========================================================
   Reduced motion accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	div.searchlight-results-wrapper::before,
	#searchlight-footer:hover td::after {
		animation: none;
		opacity: 0.75;
	}

	table.searchlight-results tr:hover .searchlight-result-icon,
	table.searchlight-results tr.searchlight-selected .searchlight-result-icon,
	table.searchlight-results tr:hover .searchlight-result-text,
	table.searchlight-results tr.searchlight-selected .searchlight-result-text {
		transform: none;
	}
}