/**
 * Belief Store Locator — front-end styles.
 *
 * Scoped under .bsl-store-locator so it stays clear of the Avada theme.
 * The whole palette is driven by CSS custom properties, with a light
 * theme by default and a dark theme via the .bsl-theme-dark class
 * (added from PHP/JS depending on the `theme` shortcode attribute).
 */

.bsl-store-locator {
	/* Light theme — default. */
	--bsl-accent: #b3a18e;
	--bsl-accent-strong: #8a7860;
	--bsl-on-accent: #2b2722;
	--bsl-text: #1f2933;
	--bsl-muted: #6b7280;
	--bsl-border: #e3e0db;
	--bsl-bg: #ffffff;
	--bsl-selected-bg: #f3efe9;
	--bsl-radius: 10px;

	box-sizing: border-box;
	width: 100%;
	color: var(--bsl-text);
	font-size: 15px;
	line-height: 1.5;
}

/* Dark theme — for placement on dark sections/backgrounds. */
.bsl-store-locator.bsl-theme-dark {
	--bsl-accent-strong: #c9b9a3;
	--bsl-text: #f1eee9;
	--bsl-muted: #a39d94;
	--bsl-border: #3a3733;
	--bsl-bg: #232120;
	--bsl-selected-bg: rgba(179, 161, 142, 0.16);
}

.bsl-store-locator *,
.bsl-store-locator *::before,
.bsl-store-locator *::after {
	box-sizing: border-box;
}

/* Controls bar -------------------------------------------------------- */

.bsl-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 14px;
}

/* The search form is transparent to layout: its input and button become
   direct flex items of .bsl-controls so they can be ordered around the
   category filter (input → categories → button). */
.bsl-search {
	display: contents;
}

/* Defensive specificity: themes like Avada style global form inputs and
   buttons aggressively. We re-state the visual identity with !important
   on the few properties that matter so the controls stay readable. */
.bsl-store-locator .bsl-search-input {
	order: 1;
	flex: 1 1 240px;
	min-width: 200px;
	padding: 11px 14px;
	border: 1px solid var(--bsl-border) !important;
	border-radius: var(--bsl-radius);
	font-size: 15px;
	color: var(--bsl-text) !important;
	background: var(--bsl-bg) !important;
}

.bsl-store-locator .bsl-search-input::placeholder {
	color: var(--bsl-muted) !important;
	opacity: 1;
}

.bsl-search-input:focus-visible {
	outline: 2px solid var(--bsl-accent);
	outline-offset: 1px;
}

.bsl-category-filter {
	order: 4;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* "Use my position" — compact icon button next to the search input. */
.bsl-store-locator .bsl-geolocate {
	order: 2;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 0;
	border: 1px solid var(--bsl-border) !important;
	border-radius: var(--bsl-radius);
	background: var(--bsl-bg) !important;
	color: var(--bsl-text) !important;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.bsl-geolocate:hover {
	border-color: var(--bsl-accent);
	color: var(--bsl-accent-strong);
}

.bsl-geolocate:focus-visible {
	outline: 2px solid var(--bsl-accent);
	outline-offset: 1px;
}

.bsl-geolocate:disabled {
	opacity: 0.55;
	cursor: progress;
}

.bsl-geolocate svg {
	display: block;
}

.bsl-store-locator .bsl-search-button {
	order: 3;
	min-height: 42px;
	padding: 0 22px;
	border: 1px solid var(--bsl-accent-strong) !important;
	border-radius: var(--bsl-radius);
	background: var(--bsl-accent-strong) !important;
	color: var(--bsl-on-accent) !important;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.bsl-store-locator .bsl-search-button:hover {
	filter: brightness(0.95);
}

/* Category filter: a pill per store type, with an optional info trigger.
   The pill is a wrapper so the "i" button can sit outside the <label>. */
.bsl-category-option {
	display: flex;
	align-items: center;
	border: 1px solid var(--bsl-border);
	border-radius: var(--bsl-radius);
	background: var(--bsl-bg);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bsl-category-option:hover {
	border-color: var(--bsl-accent);
}

.bsl-category-option:has( input:checked ) {
	border-color: var(--bsl-accent);
	background: var(--bsl-selected-bg);
}

.bsl-category-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	color: var(--bsl-text);
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
}

.bsl-category-label input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--bsl-accent);
	cursor: pointer;
}

/* "i" info trigger — reveals the store-type description on hover/focus. */
.bsl-category-info {
	position: relative;
	flex: none;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	padding: 0;
	border: 1px solid var(--bsl-border);
	border-radius: 50%;
	background: transparent;
	color: var(--bsl-muted);
	font-size: 11px;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
	cursor: help;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.bsl-category-info:hover,
.bsl-category-info:focus-visible {
	border-color: var(--bsl-accent);
	color: var(--bsl-accent-strong);
}

.bsl-tooltip {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 220px;
	padding: 8px 10px;
	border: 1px solid var(--bsl-border);
	border-radius: 8px;
	background: var(--bsl-bg);
	color: var(--bsl-text);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	text-align: left;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
	pointer-events: none;
	z-index: 5;
}

.bsl-category-info:hover .bsl-tooltip,
.bsl-category-info:focus-visible .bsl-tooltip {
	opacity: 1;
	visibility: visible;
}

/* Body: list + map ---------------------------------------------------- */

.bsl-body {
	display: flex;
	gap: 16px;
	align-items: stretch;
}

.bsl-map {
	flex: 1 1 auto;
	height: var(--bsl-map-height, 520px);
	min-height: 280px;
	border-radius: var(--bsl-radius);
	overflow: hidden;
	border: 1px solid var(--bsl-border);
	z-index: 0;
}

.bsl-list {
	flex: 0 0 300px;
	max-height: 520px;
	overflow-y: auto;
	/* Keep the scroll contained to the list so it never chains into the
	   page scroll once it reaches its top/bottom. */
	overscroll-behavior: contain;
	border: 1px solid var(--bsl-border);
	border-radius: var(--bsl-radius);
	background: var(--bsl-bg);
}

.bsl-status {
	margin: 0;
	padding: 16px;
	color: var(--bsl-muted);
	font-style: italic;
}

.bsl-list-count {
	margin: 0;
	padding: 10px 16px;
	border-bottom: 1px solid var(--bsl-border);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bsl-muted);
}

.bsl-list-item {
	display: block;
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--bsl-border);
	background: transparent;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: background-color 0.15s ease;
}

.bsl-list-item:hover,
.bsl-list-item:focus-visible {
	background: var(--bsl-selected-bg);
	outline: none;
}

.bsl-list-name {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-weight: 600;
}

.bsl-list-distance {
	flex: none;
	font-weight: 400;
	font-size: 13px;
	color: var(--bsl-accent-strong);
}

.bsl-list-address {
	display: block;
	margin-top: 2px;
	font-size: 13px;
	color: var(--bsl-muted);
}

/* Popups --------------------------------------------------------------
   Rules are prefixed with .bsl-store-locator and set font/colour
   explicitly so the host theme (Avada) can't restyle the popup. */

.bsl-store-locator .bsl-popup {
	font-size: 14px;
	line-height: 1.5;
	color: var(--bsl-text);
}

.bsl-store-locator .bsl-popup-title {
	margin: 0 0 6px;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bsl-text);
}

.bsl-store-locator .bsl-popup p {
	margin: 0 0 6px;
	padding: 0;
	font-family: inherit;
	color: var(--bsl-text);
}

.bsl-store-locator .bsl-popup-address,
.bsl-store-locator .bsl-popup-hours,
.bsl-store-locator .bsl-popup-products {
	color: var(--bsl-muted);
}

.bsl-store-locator .bsl-popup-phone a {
	color: var(--bsl-text);
	text-decoration: none;
}

.bsl-store-locator .bsl-popup-actions {
	margin-top: 8px;
}

.bsl-store-locator .bsl-popup-link {
	display: inline-block;
	margin-right: 10px;
	color: var(--bsl-accent-strong);
	font-weight: 600;
	text-decoration: none;
}

.bsl-store-locator .bsl-popup-link:hover {
	text-decoration: underline;
}

/* Leaflet chrome — themed to match the widget -------------------------- */

.bsl-store-locator .leaflet-popup-content-wrapper,
.bsl-store-locator .leaflet-popup-tip {
	background: var(--bsl-bg);
	color: var(--bsl-text);
}

.bsl-store-locator .leaflet-bar a {
	background: var(--bsl-bg);
	color: var(--bsl-text);
	border-bottom-color: var(--bsl-border);
}

.bsl-store-locator .leaflet-bar a:hover {
	background: var(--bsl-selected-bg);
}

.bsl-theme-dark .leaflet-popup-close-button {
	color: var(--bsl-muted);
}

.bsl-theme-dark .leaflet-control-attribution {
	background: rgba(20, 19, 18, 0.78);
	color: var(--bsl-muted);
}

.bsl-theme-dark .leaflet-control-attribution a {
	color: var(--bsl-accent-strong);
}

/* Marker clusters ----------------------------------------------------- */

.bsl-store-locator .bsl-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--bsl-accent);
	color: var(--bsl-on-accent);
	font-family: inherit;
	font-weight: 700;
	font-size: 14px;
	border: 3px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
}

.bsl-store-locator .bsl-cluster span {
	line-height: 1;
}

/* Responsive ---------------------------------------------------------- */

@media (max-width: 782px) {
	.bsl-store-locator {
		--bsl-map-height: 400px;
	}

	/* Controls in two compact rows: the search input, the "use my position"
	   button and the search button share the first row, the category pills
	   wrap onto the second. This keeps the map from being pushed far down. */
	.bsl-controls {
		gap: 8px;
		margin-bottom: 12px;
	}

	.bsl-search-input {
		order: 1;
		/* flex-basis 0 so the input claims only the space left after the
		   geolocate and search buttons are placed — keeps all three on the
		   first row instead of letting the input's intrinsic width wrap them. */
		flex: 1 1 0%;
		min-width: 0;
	}

	.bsl-search-button {
		order: 3;
		flex: 0 0 auto;
		min-height: 44px;
		padding: 0 18px;
		font-size: 16px;
	}

	/* flex-basis 100% forces the filter onto its own row below the search. */
	.bsl-category-filter {
		order: 4;
		flex: 1 1 100%;
		gap: 6px;
	}

	/* Content-width pills that wrap, instead of one full-width row each. */
	.bsl-category-option {
		flex: 0 1 auto;
	}

	.bsl-category-label {
		padding: 6px 10px;
		font-size: 13px;
	}

	/* Map first, scrollable list below. */
	.bsl-body {
		flex-direction: column;
	}

	.bsl-map {
		order: 1;
	}

	.bsl-list {
		flex: 1 1 auto;
		/* Tall enough to show several stores at once; the contained scroll
		   (see base rule) keeps it from hijacking the page scroll. */
		max-height: 60vh;
		order: 2;
	}
}