/* Engel Store Locator — minimal defaults for the four elements.
 *
 * Kept intentionally light so Bricks' own style controls (applied per-element
 * in the builder) can take over border, padding, font, colour, etc.
 */

/* ── Search ──────────────────────────────────────────────────────────────── */

.engel-sl-search {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.engel-sl-search__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 0 8px;
	background: transparent;
}

.engel-sl-search__icon {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	opacity: 0.6;
	pointer-events: none;
}

/* Custom-icon glyph (font-icon <i> or SVG <img>) inside .engel-sl-search__icon. */
.engel-sl-search__icon-glyph {
	font-size: 1rem;
	width: auto;
	height: auto;
}
img.engel-sl-search__icon-glyph,
img.engel-sl-search__clear-glyph,
.engel-sl-icon-mask.engel-sl-search__icon-glyph,
.engel-sl-icon-mask.engel-sl-search__clear-glyph {
	width: 18px;
	height: 18px;
}

/* Recolour-able SVG icons rendered via CSS mask. The element's color cascades
 * into background-color: currentColor, and the SVG file masks the shape out of
 * that coloured rectangle. Set width/height directly with the icon-size control
 * (Bricks generates higher-specificity rules that override these defaults). */
.engel-sl-icon-mask {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: currentColor;
	-webkit-mask-image: var( --engel-sl-icon-url );
	        mask-image: var( --engel-sl-icon-url );
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
}

.engel-sl-search__input {
	flex: 1;
	min-width: 0;
	padding: 8px 0;
	border: none;
	background: transparent;
	font-size: 1rem;
	line-height: 1.4;
	color: inherit;
	outline: none;
}

.engel-sl-search__input::placeholder {
	opacity: 0.5;
}

.engel-sl-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	padding: 4px;
	background: none;
	border: none;
	cursor: pointer;
	opacity: 0.6;
	color: inherit;
	transition: opacity 0.15s;
}

.engel-sl-search__clear:hover { opacity: 1; }

/* Guard against CSS frameworks or themes that override the HTML `hidden`
 * attribute without !important, which would make the clear button visible
 * even when the input is empty. */
.engel-sl-search__clear[hidden],
.engel-sl-search__dropdown[hidden] { display: none !important; }

.engel-sl-search__dropdown {
	position: absolute;
	top: calc( 100% + 4px );
	left: 0;
	right: 0;
	z-index: 9999;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.12 );
	max-height: 280px;
	overflow-y: auto;
}

/* (hidden state handled above with !important) */

.engel-sl-search__dropdown li {
	padding: 10px 14px;
	cursor: pointer;
	font-size: 0.95rem;
	color: #333;
	transition: background 0.1s;
}

.engel-sl-search__dropdown li:hover,
.engel-sl-search__dropdown li[aria-selected="true"] {
	background: #f0f0f0;
}

/* Help text shown below the input. */
.engel-sl-search__help {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	opacity: 0.7;
	color: inherit;
}

/* ── Floating-label mode ──────────────────────────────────────────────────
 * The label sits over the input by default and slides up when the input is
 * focused or contains text. CSS-only — no JS required. The render method
 * sets the input's placeholder to a single space so :placeholder-shown
 * correctly matches the empty state.
 */
/* Balanced padding so the user-typed text stays vertically centred in the
 * field. The floating <label> is absolutely positioned so it doesn't depend
 * on this padding for its at-rest position. */
.engel-sl-search--floating .engel-sl-search__field {
	padding-top: 6px;
	padding-bottom: 6px;
}

.engel-sl-search--floating .engel-sl-search__input {
	padding-top: 8px;
	padding-bottom: 8px;
}

.engel-sl-search--floating .engel-sl-search__input::placeholder {
	opacity: 0; /* hide the space we use as the floating-label trigger */
}

.engel-sl-search__label {
	position: absolute;
	left: 12px;
	/* Stay within the field — the right boundary prevents the label text from
	 * extending over the clear button on narrow screens. */
	right: 36px;
	top: 50%;
	transform: translateY( -50% );
	pointer-events: none;
	font-size: 1rem;
	line-height: 1;
	color: inherit;
	opacity: 0.55;
	padding: 0 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: top 0.18s ease, font-size 0.18s ease, opacity 0.18s ease;
}

/* When the search icon is present, push the label past it. */
.engel-sl-search__icon ~ .engel-sl-search__label {
	left: 34px;
}

/* Float up when the input has focus OR contains text. */
.engel-sl-search--floating .engel-sl-search__input:focus ~ .engel-sl-search__label,
.engel-sl-search--floating .engel-sl-search__input:not(:placeholder-shown) ~ .engel-sl-search__label {
	top: 0;
	right: auto; /* release the right constraint once the label is small and at the top */
	font-size: 0.75rem;
	opacity: 1;
	/* Mask the field border behind the label text. Default white; override via
	 * the "Floating label background" control in the Bricks element panel. */
	background: var( --engel-sl-label-bg, #fff );
}

/* ── Geolocation button ──────────────────────────────────────────────────── */

.engel-sl-geolocation {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	background: none;
	border: 1px solid currentColor;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.95rem;
	color: inherit;
	line-height: 1.4;
	transition: opacity 0.15s;
	white-space: nowrap;
}

.engel-sl-geolocation:hover   { opacity: 0.75; }
.engel-sl-geolocation:disabled{ opacity: 0.4; cursor: not-allowed; }

.engel-sl-geolocation__icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.engel-sl-geolocation.is-loading {
	animation: engel-sl-pulse 1s infinite;
}

.engel-sl-geolocation.is-error {
	color: #b91c1c;
	border-color: #b91c1c;
	animation: engel-sl-shake 0.4s ease-out 1;
}

@keyframes engel-sl-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}

@keyframes engel-sl-shake {
	0%, 100%   { transform: translateX(0); }
	25%        { transform: translateX(-3px); }
	75%        { transform: translateX(3px); }
}

/* ── Radius select ───────────────────────────────────────────────────────── */

.engel-sl-radius__select {
	border: 1px solid currentColor;
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 0.95rem;
	background: transparent;
	color: inherit;
	cursor: pointer;
	line-height: 1.4;
}

.engel-sl-radius__select:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ── Results counter ─────────────────────────────────────────────────────── */

.engel-sl-results__text:empty {
	display: none;
}

/* ── Distance pill ───────────────────────────────────────────────────────── */

/* Hide the styled distance element entirely when no result is present, so an
   empty pill / chip doesn't show. The .engel-sl-distance--empty class is added
   by store-locator.js when there's no active search or no coords to compute. */
.engel-sl-distance--empty {
	display: none !important;
}