/*
 * Restaurant lookup (homepage filter bar).
 *
 * Desktop Figma: design-refs/figma/filter-{empty,province,city,no-location,
 * no-results}/ - black bar, hairline #4D4D4D border + soft shadow, three
 * 50px selects with caret + floating label chip, ghost buttons, warning row.
 *
 * Mobile Figma: filter-{closed,open,filled,no-location,no-results}/
 * mobile.png (372px artboard; raw.json/spec are stale instances - the
 * RENDERS are ground truth):
 *   closed - compact select-lookalike (dark, white border) + pin button
 *   open   - heading + the dark select panel + centred Clear/divider/Locate
 *   filled - compact select inverts to white fill + floating label;
 *            "City > Suburb" breadcrumb under the bar
 *   alerts - heading + compact bar + warning row (Dismiss / Nominate)
 * Heading shows only while the panel is open or an alert is visible.
 */

.nge-lookup {
	display: block;
	width: 100%;
	background: var(--ng-color-surface, #1A1714); /* FB23: dark surface, not pure black */
	border-top: 1px solid #4D4D4D;
	border-bottom: 1px solid #4D4D4D;
	box-shadow: 0 1px 11px rgba(0, 0, 0, .1);
}

.nge-lookup--sticky {
	position: sticky;
	top: 0;
	z-index: 90;
}

/* position:sticky only works within the element's own parent, and the
   widget's wrapping Elementor container is exactly as tall as the bar.
   Promote stickiness to that container so the bar pins for the whole
   page scroll. (:has() is supported by all evergreen browsers; without
   it the bar simply scrolls away - graceful.) */
.e-con:has(.nge-lookup--sticky),
.elementor-section:has(.nge-lookup--sticky) {
	position: sticky;
	top: 0;
	z-index: 90;
}

/* On mobile the filter bar stays put: not sticky, no auto-hide transform, no
   movement. It scrolls away with the page like any other section (client
   request to remove the prior mobile auto-hide). The desktop sticky pin defined
   above is unaffected. The scroll handler that drove the auto-hide is removed
   from restaurant-lookup.js, so nothing toggles .is-hidden; the override below
   is belt-and-braces in case the class is ever re-applied. */
@media (max-width: 899px) {
	.nge-lookup--sticky,
	.e-con:has(.nge-lookup--sticky),
	.elementor-section:has(.nge-lookup--sticky),
	.e-con.is-hidden:has(.nge-lookup--sticky),
	.elementor-section.is-hidden:has(.nge-lookup--sticky) {
		position: static;
		top: auto;
		z-index: auto;
		transform: none;
		transition: none;
		will-change: auto;
	}
}

.nge-lookup .nge-lookup__inner {
	/* Unified band gutter: consistent 32px side gutter at EVERY breakpoint
	   (was 16px below 900, 0 in the 900-1376 band, 32px only past 1376),
	   matching the newsletter + nominate card via min(100% - 64px, 1376px).
	   The bar's full-bleed top/bottom border stays; only the inputs inset. */
	width: min(100% - 64px, 1376px);
	max-width: none;
	margin: 0 auto;
	padding: 16px 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Heading: hidden in the quiet collapsed state on mobile; visible while
   the panel is open or a message is showing (all four mobile frames). */
.nge-lookup .nge-lookup__eyebrow {
	display: none;
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #FFFFFF; /* FB7: white filter eyebrow (client override of the grey design) */
	text-align: center;
}

.nge-lookup.nge-lookup--open .nge-lookup__eyebrow,
.nge-lookup .nge-lookup__inner:has(.nge-lookup__message:not([hidden])) .nge-lookup__eyebrow {
	display: block;
}

/* ── Mobile compact bar (Figma filter-closed / filter-filled) ── */

.nge-lookup .nge-lookup__compact {
	display: flex;
	gap: 8px;
	align-items: stretch;
}

.nge-lookup.nge-lookup--open .nge-lookup__compact {
	display: none;
}

.nge-lookup .nge-lookup__compact-field {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

.nge-lookup .nge-lookup__compact-select {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	height: 50px;
	padding: 6px 12px;
	background: transparent;
	border: 1px solid #FFFFFF;
	border-radius: 8px;
	color: #FFFFFF;
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.nge-lookup .nge-lookup__compact-select:hover,
.nge-lookup .nge-lookup__compact-select:focus {
	background: transparent; /* shield: theme reset paints button states pink */
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	outline: none;
}

.nge-lookup .nge-lookup__compact-select:focus-visible {
	background: transparent;
	border-color: #E7B040;
	color: #FFFFFF;
	outline: none;
}

/* Filled value inverts the field (white fill, black text) */
.nge-lookup .nge-lookup__compact.is-filled .nge-lookup__compact-select,
.nge-lookup .nge-lookup__compact.is-filled .nge-lookup__compact-select:hover,
.nge-lookup .nge-lookup__compact.is-filled .nge-lookup__compact-select:focus {
	background: #FFFFFF;
	border-color: #FFFFFF;
	color: #1A1A1A;
}

.nge-lookup .nge-lookup__compact.is-filled .nge-lookup__compact-select:focus-visible {
	border-color: #E7B040;
}

.nge-lookup .nge-lookup__compact-caret {
	display: inline-flex;
	flex: 0 0 auto;
	color: currentColor;
}

.nge-lookup .nge-lookup__compact-caret svg {
	width: 14px;
	height: 14px;
}

.nge-lookup .nge-lookup__compact-label[hidden] {
	display: none;
}

.nge-lookup .nge-lookup__compact-locate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 50px;
	height: 50px;
	background: transparent;
	border: 1px solid #FFFFFF;
	border-radius: 8px;
	color: #FFFFFF;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

.nge-lookup .nge-lookup__compact-locate:hover,
.nge-lookup .nge-lookup__compact-locate:focus {
	background: transparent; /* shield: theme reset paints button states pink */
	border: 1px solid #FFFFFF;
	color: #FFFFFF;
	outline: none;
}

.nge-lookup .nge-lookup__compact-locate:focus-visible {
	background: transparent;
	border-color: #E7B040;
	color: #E7B040;
	outline: none;
}

.nge-lookup .nge-lookup__compact-locate[aria-busy='true'] {
	opacity: .6;
	cursor: progress;
}

.nge-lookup .nge-lookup__compact-locate svg {
	width: 24px;
	height: 24px;
}

/* Breadcrumb under the collapsed bar - "City > Suburb" */
.nge-lookup .nge-lookup__crumb {
	margin: 0;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.6;
	color: #A6A6A6;
}

.nge-lookup .nge-lookup__crumb[hidden] {
	display: none;
}

/* ── Panel (always-on desktop form; mobile expanded state) ── */

.nge-lookup .nge-lookup__panel {
	display: none;
}

.nge-lookup.nge-lookup--open .nge-lookup__panel {
	display: block;
}

.nge-lookup .nge-lookup__row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
}

/* ── Select fields ── */

.nge-lookup .nge-lookup__field {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

.nge-lookup .nge-lookup__select {
	width: 100%;
	height: 50px;
	padding: 6px 40px 5px 12px;
	background: transparent;
	border: 1px solid #4D4D4D;
	border-radius: 4px;
	color: #FFFFFF; /* FB7: white empty-state select text (filled/disabled keep their colours below) */
	font-family: Open Sans, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	transition: border-color .2s ease, color .2s ease;
}

.nge-lookup .nge-lookup__field.is-filled .nge-lookup__select {
	color: #FFFFFF;
	border-color: #A6A6A6;
}

.nge-lookup .nge-lookup__field.is-disabled .nge-lookup__select {
	background: #1A1A1A;
	color: #4D4D4D;
	cursor: not-allowed;
}

.nge-lookup .nge-lookup__select:focus-visible {
	outline: none;
	border-color: #E7B040;
}

.nge-lookup .nge-lookup__select option {
	background: #1A1A1A;
	color: #FFFFFF;
}

/* Caret - sits over the select, never intercepts clicks */

.nge-lookup .nge-lookup__caret {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: #A6A6A6;
	display: inline-flex;
}

.nge-lookup .nge-lookup__field.is-disabled .nge-lookup__caret {
	color: #4D4D4D;
}

.nge-lookup .nge-lookup__caret svg {
	width: 14px;
	height: 14px;
}

/* Floating label chip - black bg cuts the border line (Figma Frame 7).
   Shared by the panel fields and the filled compact select. */

.nge-lookup .nge-lookup__label {
	position: absolute;
	top: -10px;
	left: 9px;
	z-index: 1;
	padding: 0 4px;
	background: #000000;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.6;
	color: #808080;
}

/* ── "Clear filters" ──
   Mobile (Figma filter-open): centred, white, undo-arrow icon.
   Desktop (not in Figma - agreed addition): muted ghost, x icon, until
   hovered so the primary action keeps visual priority. */

.nge-lookup .nge-lookup__clear {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.6;
	cursor: pointer;
	white-space: nowrap;
	transition: color .2s ease;
	align-self: center;
}

.nge-lookup .nge-lookup__clear[hidden] {
	display: none;
}

.nge-lookup .nge-lookup__clear:hover,
.nge-lookup .nge-lookup__clear:focus,
.nge-lookup .nge-lookup__clear:focus-visible {
	background: transparent; /* shield: theme reset paints button states pink */
	border: 0;
	color: #E7B040;
	outline: none;
}

.nge-lookup .nge-lookup__clear-ic {
	display: inline-flex;
	flex: 0 0 auto;
}

.nge-lookup .nge-lookup__clear-ic--x {
	display: none;
}

.nge-lookup .nge-lookup__clear-ic--x svg {
	width: 16px;
	height: 16px;
}

.nge-lookup .nge-lookup__clear-ic--undo svg {
	width: 24px;
	height: 24px;
}

/* ── "Use my location" ghost button ──
   Mobile: centred under a full-width divider (Figma Frame 24). */

.nge-lookup .nge-lookup__locate {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 20px 12px 4px;
	border: 0;
	background: transparent;
	color: #FFFFFF;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.6;
	cursor: pointer;
	white-space: nowrap;
	transition: color .2s ease;
	align-self: stretch;
}

.nge-lookup .nge-lookup__locate::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: #808080;
}

.nge-lookup .nge-lookup__locate:hover,
.nge-lookup .nge-lookup__locate:focus,
.nge-lookup .nge-lookup__locate:focus-visible {
	background: transparent; /* shield: theme reset paints button states pink */
	border: 0;
	color: #E7B040;
	outline: none;
}

.nge-lookup .nge-lookup__locate[aria-busy='true'] {
	opacity: .6;
	cursor: progress;
}

.nge-lookup .nge-lookup__locate svg {
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
}

/* ── Filtered-out directory items ──
   The index sets display on letter sections (flex), which would override
   the UA [hidden] rule - enforce hiding for everything the filter toggles. */

.nge-index .nge-index__letter[hidden],
.nge-index [data-nge-card][hidden] {
	display: none !important;
}

/* ── Message row (location failed / no results) ──
   Mobile: icon + text wrap; the action (Dismiss / Nominate) drops to its
   own line indented to the text edge (Figma filter-no-location /
   filter-no-results). */

.nge-lookup .nge-lookup__message[hidden] {
	display: none; /* display:flex below would defeat the hidden attribute */
}

.nge-lookup .nge-lookup__message {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #A6A6A6;
}

.nge-lookup .nge-lookup__message > [data-nge-lookup-message-text] {
	flex: 1 1 0;
	min-width: 0;
}

.nge-lookup .nge-lookup__message-icon {
	display: inline-flex;
	color: #A6A6A6;
	flex: 0 0 auto;
}

.nge-lookup .nge-lookup__message-icon svg {
	width: 24px;
	height: 24px;
}

.nge-lookup .nge-lookup__message-link,
.nge-lookup .nge-lookup__message-dismiss {
	flex: 0 0 calc(100% - 32px);
	margin-left: 32px; /* aligns under the text, past the 24px icon + 8px gap */
	padding: 0;
	border: 0;
	background: transparent;
	text-align: left;
	font-family: Open Sans, system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1.6;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
}

.nge-lookup .nge-lookup__message-link[hidden],
.nge-lookup .nge-lookup__message-dismiss[hidden] {
	display: none;
}

.nge-lookup .nge-lookup__message-link:hover,
.nge-lookup .nge-lookup__message-link:focus-visible,
.nge-lookup .nge-lookup__message-dismiss:hover,
.nge-lookup .nge-lookup__message-dismiss:focus,
.nge-lookup .nge-lookup__message-dismiss:focus-visible {
	background: transparent; /* shield: theme reset paints button states pink */
	border: 0;
	color: #E7B040;
	outline: none;
}

/* ── Desktop ── */

@media (min-width: 900px) {
	.nge-lookup .nge-lookup__inner {
		padding: 16px 0 24px;
	}


	/* No compact state on desktop - the panel is the bar */
	.nge-lookup .nge-lookup__compact,
	.nge-lookup .nge-lookup__crumb,
	.nge-lookup .nge-lookup__message-dismiss {
		display: none !important;
	}

	.nge-lookup .nge-lookup__panel {
		display: block;
	}

	.nge-lookup .nge-lookup__eyebrow {
		display: block;
		text-align: left;
	}

	.nge-lookup .nge-lookup__row {
		flex-direction: row;
		align-items: center;
	}

	.nge-lookup .nge-lookup__clear {
		color: #A6A6A6;
	}

	.nge-lookup .nge-lookup__clear:hover,
	.nge-lookup .nge-lookup__clear:focus,
	.nge-lookup .nge-lookup__clear:focus-visible {
		color: #E7B040;
	}

	.nge-lookup .nge-lookup__clear-ic--x {
		display: inline-flex;
	}

	.nge-lookup .nge-lookup__clear-ic--undo {
		display: none;
	}

	.nge-lookup .nge-lookup__locate {
		align-self: center;
		padding: 4px 12px;
	}

	.nge-lookup .nge-lookup__locate::before {
		display: none;
	}

	/* Message back to a single inline row */
	.nge-lookup .nge-lookup__message {
		flex-wrap: nowrap;
		align-items: center;
	}

	.nge-lookup .nge-lookup__message > [data-nge-lookup-message-text] {
		flex: 0 1 auto;
	}

	.nge-lookup .nge-lookup__message-link {
		flex: 0 0 auto;
		margin-left: 0;
	}
}