/**
 * arc/query-filter-geo
 *
 * Modelled on FacetWP's proximity facet so the two read as the same control:
 * a soft-filled input with one icon slot on the right, and a plain white
 * suggestion list with a primary name plus muted context on each row.
 *
 * Two rules here are deliberate and easy to undo by accident:
 *
 *   1. Colors are always stated explicitly, never inherited. Dropping into a
 *      section with a dark background otherwise renders the list invisible.
 *   2. There is NO prefers-color-scheme block. A WordPress front end follows
 *      the site's design, not the visitor's operating system — honouring OS
 *      dark mode flipped this panel dark on an otherwise light page.
 *
 * Kadence's global.min.css sets `input[type=text] { padding: .4em .5em }` at
 * specificity (0,0,1,1), and it is the shorthand, so the input rules below are
 * qualified with the element to outrank it rather than using !important.
 */

.arcgeo-hidden {
	display: none !important;
}

/*
 * Applied by view.js to ancestor rows/columns only while the suggestion list
 * is open. Kadence sets `.kt-row-column-wrap { position: relative; z-index: 1 }`
 * and `.wp-block-kadence-column { z-index: 1 }`, so a later row paints over an
 * earlier one no matter how high the dropdown's own z-index climbs — it is
 * trapped in its row's stacking context. !important is warranted here: these
 * are third-party elements we do not own, and the class exists only for as
 * long as the list is open.
 */
.arcgeo-lifted {
	position: relative !important;
	z-index: 200 !important;
}

.arcgeo-filter__wrap {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0; /* fieldsets default to min-content, which breaks flex children */
}

.arcgeo-filter__label {
	display: block;
	padding: 0;
	margin-bottom: 0.4em;
	font-weight: 600;
	font-size: 0.9375rem;
}

.arcgeo-filter__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: stretch;
}

/* Owns the dropdown's positioning context and keeps it above later siblings. */
.arcgeo-filter__input-wrap {
	position: relative;
	z-index: 20;
	flex: 1 1 18rem;
	min-width: 0;
}

.arcgeo-filter .arcgeo-filter__input-wrap input.arcgeo-filter__location {
	width: 100%;
	padding: 7px 34px 7px 10px; /* right gutter clears the icon */
	background: rgba( 0, 0, 0, 0.05 );
	border: 1px solid transparent;
	border-radius: 5px;
	color: inherit;
	min-width: 0;
	/* rem, not em — an em here inherits whatever the surrounding section sets. */
	font-size: 0.9375rem;
	line-height: 1.4;
}

.arcgeo-filter .arcgeo-filter__input-wrap input.arcgeo-filter__location:focus,
.arcgeo-filter .arcgeo-filter__input-wrap input.arcgeo-filter__location:focus-visible {
	border-color: var( --global-palette1, #0073aa );
	outline: none;
}

/* ---------------------------------------------------------------------- */
/* Icon slot — "use my location" when empty, "clear" once there is a value */
/* ---------------------------------------------------------------------- */

.arcgeo-filter__icon {
	position: absolute;
	top: 50%;
	right: 4px;
	transform: translateY( -50% );
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0.55;
	line-height: 1;
}

.arcgeo-filter__icon:hover,
.arcgeo-filter__icon:focus-visible {
	opacity: 1;
}

/* Drawn rather than shipped as images, so there are no asset requests. */
.arcgeo-filter__icon::before,
.arcgeo-filter__icon::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	background: currentColor;
}

.arcgeo-filter__icon.is-clear::before,
.arcgeo-filter__icon.is-clear::after {
	width: 14px;
	height: 1.5px;
	margin: -0.75px 0 0 -7px;
}

.arcgeo-filter__icon.is-clear::before { transform: rotate( 45deg ); }
.arcgeo-filter__icon.is-clear::after  { transform: rotate( -45deg ); }

/* Crosshair ring for "locate me". */
.arcgeo-filter__icon.is-locate::before {
	width: 13px;
	height: 13px;
	margin: -6.5px 0 0 -6.5px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: none;
}

.arcgeo-filter__icon.is-locate::after {
	width: 5px;
	height: 5px;
	margin: -2.5px 0 0 -2.5px;
	border-radius: 50%;
}

.arcgeo-filter__radius {
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------- */
/* Suggestions                                                             */
/* ---------------------------------------------------------------------- */

.arcgeo-filter__results {
	position: absolute;
	z-index: 100;
	top: calc( 100% + 2px );
	left: 0;
	right: 0;
	max-height: 18rem;
	overflow: hidden auto;
	/* Anchors every child below; nothing inherits the section's font size. */
	font-size: 0.8125rem;
	line-height: 1.35;
	background: #fff;                      /* never transparent — it overlays content */
	color: #1a1a1a;                        /* explicit, so a dark section cannot bleed in */
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 );
	text-align: left;
}

.arcgeo-filter__result {
	padding: 6px 10px;
	cursor: pointer;
	color: #1a1a1a;
}

.arcgeo-filter__result:hover,
.arcgeo-filter__result.is-active {
	background: #eef2fb;
}

.arcgeo-filter__result-main {
	color: #1a1a1a;
}

.arcgeo-filter__result-secondary {
	margin-left: 0.35em;
	color: #6b7280;
	font-size: 0.92em;
}

.arcgeo-filter__result--empty {
	cursor: default;
	color: #6b7280;
	font-style: italic;
}

.arcgeo-filter__result--empty:hover {
	background: none;
}

/*
 * Required by Google's Places policy whenever predictions are shown outside a
 * Google map — which is exactly this case.
 */
.arcgeo-filter__attribution {
	padding: 4px 10px;
	text-align: right;
	font-size: 0.6875rem;
	color: #6b7280;
	background: #fff;
	border-top: 1px solid #f0f0f0;
}

/*
 * Sits below the input in normal flow, so the absolutely-positioned dropdown
 * overlays it. Keeping it out of the flow while hidden stops it showing
 * through the list.
 */
.arcgeo-filter__status {
	margin: 0.4em 0 0;
	font-size: 0.75rem;
	opacity: 0.75;
}

.arcgeo-filter__notice {
	margin: 0;
	padding: 0.75em 1em;
	border: 1px dashed rgba( 0, 0, 0, 0.25 );
	border-radius: 3px;
	font-size: 0.9em;
	opacity: 0.8;
}