/* ════════════════════════════════════════════════════════════════════════
   Typeahead Search — shared styles
   Used by the navbar live-search box (includes/javascripts/typeahead-search.js)
   and the admin "Typeahead Search Parameters" live-test widget. Ported from
   dev-ingram-live-search.php (the .ls-* class set), scoped for reuse.
   ════════════════════════════════════════════════════════════════════════ */

/* Positioning context for the absolutely-positioned results dropdown. */
.ls-wrap { position: relative; }

/* Navbar wrapper: give the input a sensible width on large screens; it goes
   full-width inside the collapsed mobile menu. */
.nav-typeahead { min-width: 240px; }
@media (max-width: 991.98px) {
	.nav-typeahead { width: 100%; min-width: 0; margin-bottom: .5rem; }
}

#navTypeaheadInput { border-radius: 1rem; padding-left: 2rem; }

/* Zoom-in icon pinned inside the input, in front of the placeholder text. */
.ls-search-icon {
	position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
	color: #6c757d; font-size: 14px; pointer-events: none;
}

/* Results dropdown. Dark navbar background means we must force dark text here. */
.ls-dropdown {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
	min-width: 300px; max-height: 70vh; overflow-y: auto;
	background: #fff; color: #212529;
	border: 1px solid #dee2e6; border-top: 0; border-radius: 0 0 .375rem .375rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
	opacity: 0; visibility: hidden; transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.ls-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }

.ls-item {
	display: flex; align-items: center; gap: 10px; padding: 8px 12px;
	cursor: pointer; border-bottom: 1px solid #f0f0f0; font-size: 14px;
	color: #212529; text-decoration: none;
}
.ls-item:last-child { border-bottom: 0; }
.ls-item:hover, .ls-item.active { background: #e9ecef; }
.ls-item img {
	width: 44px; height: 66px; object-fit: cover; border-radius: 3px;
	flex-shrink: 0; background: #f0f0f0;
}
.ls-item .ls-noimg {
	width: 44px; height: 66px; background: #dee2e6; border-radius: 3px;
	display: flex; align-items: center; justify-content: center;
	font-size: 10px; color: #6c757d; flex-shrink: 0;
}
.ls-item-info { min-width: 0; }
.ls-item-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-item-author { color: #6c757d; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-item-extra { color: #6c757d; font-size: 11px; }

.ls-status { padding: 10px 12px; color: #6c757d; font-size: 13px; }
.ls-status .ls-spinner {
	display: inline-block; width: 14px; height: 14px;
	border: 2px solid #dee2e6; border-top-color: #0d6efd; border-radius: 50%;
	animation: ls-spin .6s linear infinite; vertical-align: middle; margin-right: 6px;
}
@keyframes ls-spin { to { transform: rotate(360deg); } }

.ls-footer {
	padding: 6px 12px; font-size: 11px; color: #6c757d; background: #f8f9fa;
	border-top: 1px solid #dee2e6; text-align: right;
}
.ls-highlight { background: #fff3cd; border-radius: 2px; padding: 0 1px; }

/* Clear (×) button pinned inside the input. */
.ls-clear-btn {
	position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
	background: none; border: none; font-size: 18px; color: #6c757d;
	cursor: pointer; line-height: 1; padding: 0 4px;
}
.ls-clear-btn:hover { color: #212529; }