/* =============================================================================
   ngf-destination-suggest.css — the DESTINATIONS-ONLY typeahead dropdown for the
   next-gen Destinations listing. Companion to common/js/ngf-destination-suggest.js.

   Visually mirrors the booking-engine smart-search panel (bookengine-smartsearch.css
   .lvss-*), but every colour is a .ngf design token (--bg / --ink / --line / --blue …)
   so it flips automatically under the storefront dark mode (zz-darkmode.css remaps
   those tokens on :root[data-theme="dark"] .ngf — no override needed here).

   Page-scoped: loaded by a <link> in location/list.php only, so it never ships on
   pages that don't render the destinations index. All rules are under .ngf.
   ============================================================================= */

.ngf .ngf-sug-panel {
	position: absolute;
	z-index: 60;
	left: 0; right: 0;
	top: calc(100% + 6px);
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--sh-md);
	overflow: hidden auto;
	max-height: 360px;
	font-size: 14px;
	color: var(--ink);
	-webkit-overflow-scrolling: touch;
}
.ngf .ngf-sug-panel[hidden] { display: none; }

.ngf .ngf-sug-grouplabel {
	display: flex; align-items: center; gap: 6px;
	padding: 8px 14px 5px;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--ink-3);
	background: var(--bg-2);
	position: sticky; top: 0;
}
.ngf .ngf-sug-grouplabel .fa { font-size: 11px; opacity: .8; }

.ngf .ngf-sug-opt {
	display: flex; align-items: flex-start; gap: 11px;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--line);
}
.ngf .ngf-sug-opt:last-child { border-bottom: 0; }
.ngf .ngf-sug-opt:hover,
.ngf .ngf-sug-opt.is-active { background: rgba(0, 137, 207, .10); }

.ngf .ngf-sug-ico {
	flex: 0 0 34px;
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 9px;
	background: rgba(0, 137, 207, .12);
	color: var(--blue-text);
	font-size: 15px; margin-top: 1px;
}

.ngf .ngf-sug-body { flex: 1 1 auto; min-width: 0; }
.ngf .ngf-sug-title {
	font-weight: 700; color: var(--ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ngf .ngf-sug-title mark {
	background: transparent; color: var(--blue-d); font-weight: 800;
	padding: 0; margin: 0;
}
.ngf .ngf-sug-sub {
	display: block;
	font-size: 12px; color: var(--ink-3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	margin-top: 1px;
}
.ngf .ngf-sug-meta {
	display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
	margin-top: 5px;
}
.ngf .ngf-sug-type {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 1px 9px; border-radius: 999px;
	background: var(--bg-2); border: 1px solid var(--line);
	color: var(--ink-3); font-size: 11px; font-weight: 600;
}
.ngf .ngf-sug-type .fa { font-size: 10px; opacity: .85; }

.ngf .ngf-sug-empty {
	padding: 16px 14px; color: var(--ink-3); font-size: 13px; text-align: center;
}

/* Mobile: roomier rows + a taller panel for touch. */
@media (max-width: 560px) {
	.ngf .ngf-sug-panel { max-height: 60vh; font-size: 15px; }
	.ngf .ngf-sug-opt { padding: 12px 14px; }
}