/**
 * Eng Site Locator — front-end search.
 *
 * Interim styling: clean and presentable, but intentionally neutral while the
 * final visual design is pending approval. Uses a single accent variable so the
 * brand color can be swapped in one place later.
 */

.esl-locator {
	--esl-accent: #8fc73e; /* brand green — primary buttons, focus, borders */
	--esl-accent-hover: #7ab32f; /* darker green for hover */
	--esl-border: #cdd4da;
	--esl-accent-tint: #f1f7e4; /* light green wash for secondary hovers */
	--esl-text-muted: #5b6770;
	--esl-map-region: #d8dde1; /* no sites — neutral grey */
	--esl-map-region-has: #bcdd80; /* has sites — green tint (lighter than hover) */
	--esl-map-hover: #8fc73e; /* hover — brand green */
	--esl-map-selected: #4e7c1d; /* selected — dark green (white text) */
	margin: 1.5em 0;
	font-size: 16px;
	line-height: 1.5;
	color: #1f2a30;
	text-align: left;
}

/* ---------------------------------------------------------------------------
 * Isolation layer.
 * Themes and other plugins inject broad rules (on svg, button, input, ul, nav,
 * a, [hidden], etc.) that can distort or hide this widget. These defensive
 * resets give every element a predictable baseline.
 *
 * The element resets are wrapped in :where() so they carry the specificity of
 * `.esl-locator` alone (0,1,0). That is high enough to override a theme's bare
 * element selectors (`ul`, `button`, …) yet low enough that our own component
 * classes below always win — so this layer can't break our intended styling.
 * The visually-critical bits themes most often stomp (the spinner) additionally
 * use !important.
 * ------------------------------------------------------------------------- */
.esl-locator,
.esl-locator *,
.esl-locator *::before,
.esl-locator *::after {
	box-sizing: border-box;
}

.esl-locator :where( button, input, select ) {
	margin: 0;
	box-shadow: none;
	border-radius: 0;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	min-width: 0;
	min-height: 0;
	max-width: none;
	float: none;
	line-height: normal;
	background-image: none;
}

.esl-locator :where( button ) {
	-webkit-appearance: none;
	appearance: none;
	text-decoration: none;
}

.esl-locator :where( ul, li ) {
	list-style: none;
	margin: 0;
	padding: 0;
	background: none;
}

.esl-locator :where( a ) {
	box-shadow: none;
}

/* Error message — sits above the form, shown only when something goes wrong. */
.esl-locator__error {
	margin: 0 0 0.75em;
	padding: 0.6em 0.85em;
	background: #fdecea;
	border-left: 3px solid #c0392b;
	color: #8a1f14;
	font-size: 0.95em;
}

.esl-locator__error:empty {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Interactive US/Canada map: fluid SVG + abbreviation pills for the tiny
 * regions + the State/Province dropdown. Ships [hidden] and is unhidden by
 * the script (progressive enhancement).
 * ------------------------------------------------------------------------- */
/* Two columns: the map on one side, the dropdown + form panel on the other.
 * Wraps to a stack on narrower viewports (see the responsive blocks). */
.esl-locator__layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1.5em;
	margin: 0 0 1em;
}

/* The map column. */
.esl-locator__layout .esl-locator__map-wrap {
	flex: 1 1 380px;
}

/* The side panel: dropdown, error, and the search form, stacked. */
.esl-locator__panel {
	flex: 1 1 320px;
	display: flex;
	flex-direction: column;
	gap: 0.85em;
	min-width: 0;
}

.esl-locator__map-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1em;
	margin: 0;
}

/* Theme [hidden]-stomping defense (same rationale as the spinner rules). */
.esl-locator__map-wrap[hidden] {
	display: none !important;
}

.esl-locator__map {
	position: relative;
	/* basis 0 so the map shrinks to share the row with the pills rather than
	 * forcing them to wrap; a non-zero basis breaks the line too early. The
	 * pills only drop to their own row at the 768px breakpoint below. */
	flex: 1 1 0;
	min-width: 0;
}

.esl-locator__map svg {
	display: block;
	width: 100%;
	height: auto;
	outline: none;
}

/* Every shape starts neutral; CSS on the path itself beats the inherited
 * fill="#d3d3d3" presentation attribute on the SVG's wrapper group.
 * non-scaling-stroke keeps the 1px border crisp on the scaled Alaska inset. */
.esl-locator__map path {
	fill: var( --esl-map-region );
	stroke: #fff;
	stroke-width: 0;
	vector-effect: non-scaling-stroke;
	transition: fill 0.15s ease;
}

/* A region is either a <path> or, for multi-part regions (Alaska), a <g> of
 * paths — so every fill rule targets both the element and its children. */
.esl-locator__map .esl-map__region {
	cursor: pointer;
	outline: none;
}

.esl-locator__map .esl-map__region--has-sites,
.esl-locator__map .esl-map__region--has-sites path {
	fill: var( --esl-map-region-has );
}

.esl-locator__map .esl-map__region:hover,
.esl-locator__map .esl-map__region:hover path,
.esl-locator__map .esl-map__region:focus-visible,
.esl-locator__map .esl-map__region:focus-visible path {
	fill: var( --esl-map-hover );
}

/* Keyboard focus ring: stroke-based — CSS outline is unreliable on SVG. */
.esl-locator__map .esl-map__region:focus-visible,
.esl-locator__map .esl-map__region:focus-visible path {
	stroke: var( --esl-accent-hover );
	stroke-width: 2.5;
}

.esl-locator__map .esl-map__region.is-selected,
.esl-locator__map .esl-map__region.is-selected path {
	fill: var( --esl-map-selected );
}

/* Tooltip: dark chip above the hovered/focused region. Never interactive. */
.esl-locator__map-tooltip {
	position: absolute;
	z-index: 2;
	transform: translate( -50%, calc( -100% - 6px ) );
	padding: 0.35em 0.6em;
	border-radius: 3px;
	background: #1f2a30;
	color: #fff;
	font-size: 0.85em;
	white-space: nowrap;
	pointer-events: none;
}

.esl-locator__map-tooltip[hidden] {
	display: none !important;
}

/* Abbreviation pills for states not drawn on the map (Alaska and the tiny
 * Northeast states). A simple vertical column beside the map. The rules are
 * written as `.esl-locator .esl-locator__map-pill` (0,2,0) and pin every paint
 * property, so a theme's own button styling (e.g. `#content button`) can't
 * repaint them. */
.esl-locator__map-pills {
	flex: 0 0 auto;
	align-self: stretch; /* match the map's height… */
	display: flex;
	flex-direction: column;
	justify-content: center; /* …then sit beside the US, not up by Canada. */
	gap: 0.3em;
}

.esl-locator .esl-locator__map-pill {
	min-width: 30px;
	min-height: 0;
	height: auto;
	/* padding + radius are pinned with !important too, since themes routinely
	 * restyle `button` padding/corners with high specificity. */
	padding: 0.5em 0.5em !important;
	/* Border width/style are pinned with !important because host themes
	 * frequently strip button borders (e.g. `button:hover { border: none }`
	 * with high specificity). Only the colour changes per state below. */
	border-width: 1px !important;
	border-style: solid !important;
	border-color: var( --esl-border ) !important;
	border-radius: 0.25rem !important;
	background: #fff;
	font: inherit;
	font-size: 0.7em;
	font-weight: 600;
	line-height: 1.4;
	color: var( --esl-text-muted );
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease;
}

.esl-locator .esl-locator__map-pill.esl-map__region--has-sites {
	background: var( --esl-map-region-has );
	border-color: var( --esl-map-region-has ) !important;
	color: #1f2a30;
}

.esl-locator .esl-locator__map-pill:hover {
	background: var( --esl-map-hover );
	border-color: var( --esl-map-selected ) !important;
	color: #1f2a30;
}

.esl-locator .esl-locator__map-pill.is-selected {
	background: var( --esl-map-selected );
	border-color: var( --esl-map-selected ) !important;
	color: #fff;
}

.esl-locator .esl-locator__map-pill:focus-visible {
	outline: 2px solid var( --esl-accent );
	outline-offset: 1px;
}

/* Regions with no Sites: the pill is disabled (and the matching map shape /
 * dropdown option are inert too). Greyed and non-interactive — pointer-events
 * is pinned so a theme can't restore hover/click on a disabled button. */
.esl-locator .esl-locator__map-pill--empty {
	background: #fff;
	color: var( --esl-text-muted );
	opacity: 0.5;
	cursor: default !important;
	pointer-events: none !important;
}

/* The State/Province dropdown sits in the side panel above the form; the
 * shared .esl-locator__field rules style its label and select. It ships hidden
 * (JS-only) — the [hidden] rule is pinned so a theme can't reveal it early. */
.esl-locator__field--region {
	flex: 0 0 auto;
	width: 100%;
}

.esl-locator__field--region[hidden] {
	display: none !important;
}

/* Two label wordings swapped by the responsive block: "Or choose…" on
 * desktop (it complements the map), "Choose…" on mobile (the map is hidden,
 * so the dropdown stands alone). */
.esl-locator__region-label--mobile {
	display: none;
}

/* While a request is in flight the map greys out and swallows no clicks
 * (same hard guarantee as the disabled form controls). */
.esl-locator__map-wrap.is-busy {
	opacity: 0.85;
	cursor: progress;
}

.esl-locator__map-wrap.is-busy .esl-map__region {
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
 * Results modal — region (map / pill / dropdown) selections list all their
 * Sites here. Fixed overlay + centered dialog, scrollable body.
 * ------------------------------------------------------------------------- */
.esl-locator__modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
}

.esl-locator__modal[hidden] {
	display: none !important;
}

.esl-locator__modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba( 16, 26, 31, 0.55 );
}

.esl-locator__modal-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 600px;
	max-height: 85vh;
	background: #fff;
	border-radius: 8px;
	overflow: hidden; /* clip header/body to the rounded corners */
	box-shadow: 0 16px 48px rgba( 16, 26, 31, 0.35 );
	outline: none;
}

.esl-locator__modal-header {
	display: flex;
	align-items: flex-start;
	gap: 0.75em;
	padding: 1.1em 1.35em;
	background: #fff;
	border-bottom: 3px solid var(--esl-map-hover); /* brand-green accent */
}

.esl-locator__modal-title {
	margin: 0;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
	color: #1f2a30;
	flex: 1 1 auto;
}

.esl-locator .esl-locator__modal-close {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: var( --esl-text-muted );
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.esl-locator .esl-locator__modal-close:hover {
	background: #eef1f3;
	color: #1f2a30;
}

.esl-locator .esl-locator__modal-close:focus-visible {
	outline: 2px solid var( --esl-accent );
	outline-offset: 1px;
}

.esl-locator__modal-body {
	padding: 1.25em 1.35em;
	background: #f4f6f7; /* light backdrop so the white cards stand out */
	overflow-y: auto;
}

.esl-locator__modal-results {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Lock the page behind the modal so only the dialog scrolls. */
body.esl-modal-open {
	overflow: hidden;
}

/* Form row: [Use my location] [input] [radius] [Search]. White card to match
 * the site's product/CTA cards. */
.esl-locator__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.6em;
	padding: 1.25em;
	background: #fff;
	border: 1px solid #e3e7ea;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba( 16, 26, 31, 0.06 );
}

.esl-locator__field {
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}

.esl-locator__field--location {
	/* Grows to fill the row; min-width:0 lets it shrink so the radius and
	 * Search button stay on the same line instead of wrapping. */
	flex: 1 1 140px;
	min-width: 0;
}

.esl-locator__field--radius {
	flex: 0 0 120px;
}

.esl-locator__field label {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--esl-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.esl-locator__field input,
.esl-locator__field select {
	height: 44px;
	padding: 0 0.7em;
	border: 1px solid var(--esl-border);
	border-radius: 4px;
	background: #fff;
	font: inherit;
	color: inherit;
	width: 100%;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.esl-locator__field input:focus,
.esl-locator__field select:focus,
.esl-locator__form button:focus-visible {
	outline: 2px solid var(--esl-accent);
	outline-offset: 1px;
	border-color: var(--esl-accent);
}

/* Buttons share the input height so the row lines up cleanly. */
.esl-locator__form button {
	height: 44px;
	padding: 0 1.25em;
	font: inherit;
	font-weight: 700;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, opacity 0.15s ease;
}

/* "Use my location" — secondary: dark text, neutral border that greens on
 * hover (bright-green text on white would be unreadable). */
.esl-locator__geo {
	/* Its own full-width row above the inputs, so location + radius + Search
	 * share one line in the narrower side panel. */
	flex: 1 1 100%;
	border: 1px solid var(--esl-border);
	background: #fff;
	color: #1f2a30;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
}

.esl-locator__geo:hover {
	border-color: var(--esl-accent);
	background: var(--esl-accent-tint);
	color: var(--esl-map-selected);
}

/* Location-target icon. Forced display (like the spinner) so a theme's `svg`
 * rules can't hide it; it gives way to the spinner while a lookup runs. */
.esl-locator .esl-locator__geo-icon {
	display: inline-block !important;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	vertical-align: middle;
}

.esl-locator .esl-locator__spinner:not( [hidden] ) ~ .esl-locator__geo-icon {
	display: none !important;
}

/* Spinner — SVG so it stays round without any border-radius. The visibility and
 * animation are forced with !important because host themes frequently target
 * `svg`, `button svg`, or `[hidden]` and would otherwise hide or freeze it. */
.esl-locator .esl-locator__spinner {
	display: inline-block !important;
	width: 16px !important;
	height: 16px !important;
	flex: 0 0 auto !important;
	vertical-align: middle;
	visibility: visible !important;
	opacity: 1 !important;
	animation: esl-spin 0.7s linear infinite !important;
}

.esl-locator .esl-locator__spinner[hidden] {
	display: none !important;
	animation: none !important;
}

@keyframes esl-spin {
	to {
		transform: rotate( 360deg );
	}
}

/* Disabled / busy state: grey out and block interaction during a search. */
.esl-locator__form.is-busy {
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.esl-locator__form input:disabled,
.esl-locator__form select:disabled,
.esl-locator__form button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hard guarantee: a disabled control swallows no clicks (anti spam-click). */
.esl-locator button:disabled,
.esl-locator input:disabled,
.esl-locator select:disabled {
	pointer-events: none;
}

.esl-locator__search {
	border: 1px solid var(--esl-accent);
	background: var(--esl-accent);
	color: #fff;
}

.esl-locator__search:hover {
	background: var(--esl-accent-hover);
	border-color: var(--esl-accent-hover);
}

/* Results list. */
.esl-locator__results {
	list-style: none;
	margin: 1.25em 0 0;
	padding: 0;
}

.esl-locator__empty {
	padding: 1.25em;
	border: 1px dashed var(--esl-border);
	background: #f7f9fa;
	color: var(--esl-text-muted);
	text-align: center;
}

/* Result card — white card, rounded corners, soft shadow (brand look). */
.esl-locator__result {
	padding: 1.15em 1.35em;
	margin: 0 0 0.85em;
	background: #fff;
	border: 1px solid #e3e7ea;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba( 16, 26, 31, 0.06 );
}

.esl-locator__result:last-child {
	margin-bottom: 0;
}

.esl-locator__result-title {
	margin: 0 0 0.45em;
	font-size: 1.18em;
	font-weight: 700;
	line-height: 1.25;
	color: #1f2a30;
}

/* Address lines (Address1, Address2, "City, State zip") stack as block rows. */
.esl-locator__result-address {
	margin: 0;
	color: var(--esl-text-muted);
	line-height: 1.5;
}

.esl-locator__result-distance {
	margin: 0.5em 0 0;
	font-weight: 700;
	color: var(--esl-map-selected);
}

/* Action row: Directions (secondary) + Contact Distributor (primary). */
.esl-locator__result-actions {
	margin: 0.95em 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6em;
}

/* Shared button shape. Written at .esl-locator depth so theme link/button
 * rules can't repaint them. */
.esl-locator .esl-locator__result-directions,
.esl-locator .esl-locator__result-contact {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.55em 1.15em;
	border-radius: 4px;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease;
}

/* Primary — bright brand green with white text. */
.esl-locator .esl-locator__result-contact {
	background: var(--esl-map-hover);
	border: 1px solid var(--esl-map-hover);
	color: #fff;
}

.esl-locator .esl-locator__result-contact:hover {
	background: #7ab32f;
	border-color: #7ab32f;
	color: #fff;
	text-decoration: none;
}

/* Secondary — outlined, fills toward the brand green on hover. */
.esl-locator .esl-locator__result-directions {
	background: #fff;
	border: 1px solid var(--esl-border);
	color: #1f2a30;
}

.esl-locator .esl-locator__result-directions:hover {
	border-color: var(--esl-map-hover);
	color: var(--esl-map-selected);
	text-decoration: none;
}

/* Load more. */
.esl-locator__loadmore {
	margin-top: 1.25em;
	text-align: center;
}

.esl-locator__loadmore-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	height: 44px;
	padding: 0 1.5em;
	border: 1px solid var(--esl-border);
	border-radius: 4px;
	background: #fff;
	color: #1f2a30;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		color 0.15s ease, opacity 0.15s ease;
}

.esl-locator__loadmore-btn:hover:not( :disabled ) {
	border-color: var(--esl-accent);
	background: var(--esl-accent-tint);
	color: var(--esl-map-selected);
}

.esl-locator__loadmore-btn:disabled {
	cursor: default;
	opacity: 0.7;
}

.esl-locator__loadmore-btn[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Responsive: degrade the single row in graceful steps rather than one abrupt
 * jump. `order` keeps a sensible reading order as items reflow.
 *
 *  wide   : [Use my location] [input .......] [radius] [Search]
 *  medium : [input ........................................]
 *           [radius .......................................]
 *           [Use my location ........] [Search ...........]
 *  narrow : each control stacked full width
 * ------------------------------------------------------------------------- */
/* Tablet: the map is no longer tall enough to anchor the pills to their
 * countries without the longer (US) group spilling past the map bottom and
 * overlapping the dropdown. Drop the absolute side column and let the pills
 * flow as a wrapping row beneath the full-width map instead. */
@media ( max-width: 768px ) {
	/* Stack the two columns: map on top, the dropdown + form panel below. */
	.esl-locator__layout .esl-locator__map-wrap,
	.esl-locator__panel {
		flex: 1 1 100%;
	}

	.esl-locator__map {
		flex: 1 1 100%;
	}

	.esl-locator__map-pills {
		flex: 1 1 100%;
		flex-direction: row;
		flex-wrap: wrap;
	}

	/* Comfortable tap targets on touch screens. */
	.esl-locator .esl-locator__map-pill {
		min-height: 40px;
	}
}

@media ( max-width: 640px ) {
	/* The map and its tiny-region pills are too small to use on a phone, so
	 * hide the whole map column — the dropdown in the panel (whose label
	 * switches to the standalone "Choose a State") becomes the region picker. */
	.esl-locator__map-wrap {
		display: none;
	}

	/* The dropdown label swaps to its standalone wording (see markup). */
	.esl-locator__region-label--desktop {
		display: none;
	}

	.esl-locator__region-label--mobile {
		display: inline;
	}

	.esl-locator__form {
		align-items: stretch;
	}

	.esl-locator__field--location {
		order: 1;
		flex: 1 1 100%;
	}

	.esl-locator__field--radius {
		order: 2;
		flex: 1 1 100%;
	}

	/* Two equal-height buttons share the last row — clean, aligned edges. */
	.esl-locator__geo {
		order: 3;
		flex: 1 1 0;
	}

	.esl-locator__search {
		order: 4;
		flex: 1 1 0;
	}
}

@media ( max-width: 420px ) {
	.esl-locator__geo,
	.esl-locator__search {
		flex: 1 1 100%;
	}
}

/* Respect users who prefer reduced motion: drop transitions (the loading
 * spinner stays — it communicates state, it isn't decorative). */
@media ( prefers-reduced-motion: reduce ) {
	.esl-locator *,
	.esl-locator *::before,
	.esl-locator *::after {
		transition: none !important;
	}
}