/**
 * BGV Store Locator -- front end styles.
 *
 * Colors are pulled from Neve's theme Customizer palette via its CSS
 * custom properties (--nv-primary-accent, --nv-secondary-accent,
 * --nv-site-bg, --nv-light-bg, --nv-text-color, --nv-dark-bg) so the
 * locator re-colors itself automatically if the site's color palette
 * changes in Appearance > Customize > Global > Colors. Each var() call
 * includes a fallback in case an older Neve version doesn't expose it.
 * Typography and container width are intentionally left alone here so
 * the block inherits whatever font/size the page template around it
 * (Neve + the theme's content area) already sets.
 */

.bgv-sl-locator {
	width: 100%;
	margin: 2em 0;
}

.bgv-sl-admin-notice {
	padding: 1em;
	background: #fef3f2;
	border: 1px solid #f0b4ac;
	border-radius: 4px;
}

/* Search bar */
.bgv-sl-search-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
	margin-bottom: 0.5em;
}

.bgv-sl-search-row input[type='text'],
.bgv-sl-search-row select {
	padding: 0.6em 0.8em;
	border: 1px solid var(--nv-dark-bg, #d5d5d5);
	border-radius: 4px;
	font-size: 1em;
	background: var(--nv-site-bg, #fff);
	color: var(--nv-text-color, #1d1d1d);
}

.bgv-sl-search-row input[type='text'] {
	flex: 1 1 180px;
	min-width: 140px;
}

.bgv-sl-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.65em 1.2em;
	border-radius: 4px;
	border: 1px solid transparent;
	font-size: 0.95em;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.15s ease-in-out;
}

.bgv-sl-btn:hover {
	opacity: 0.88;
}

.bgv-sl-btn-primary {
	background: var(--nv-primary-accent, #7a1f2b);
	color: #fff;
}

.bgv-sl-btn-secondary {
	background: var(--nv-light-bg, #f2f2f2);
	color: var(--nv-text-color, #1d1d1d);
	border-color: var(--nv-dark-bg, #d5d5d5);
}

.bgv-sl-btn-link {
	background: transparent;
	border: none;
	color: var(--nv-primary-accent, #7a1f2b);
	padding: 0.4em 0;
	text-decoration: underline;
	font-weight: 600;
	margin-bottom: 0.75em;
}

.bgv-sl-search-message {
	min-height: 1.2em;
	font-size: 0.9em;
	color: var(--nv-secondary-accent, #7a1f2b);
	margin: 0.25em 0 0;
}

/* Layout: map + results */
.bgv-sl-layout {
	display: flex;
	flex-direction: column-reverse;
	gap: 1em;
}

.bgv-sl-map-wrap {
	width: 100%;
}

#bgv-sl-map {
	width: 100%;
	height: 420px;
	border-radius: 6px;
	border: 1px solid var(--nv-dark-bg, #e0e0e0);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--nv-light-bg, #f5f5f5);
}

.bgv-sl-map-loading {
	color: var(--nv-text-color, #666);
	font-size: 0.95em;
	margin: 0;
}

.bgv-sl-map-error {
	max-width: 360px;
	text-align: center;
	padding: 1.5em;
	color: var(--nv-text-color, #444);
}

.bgv-sl-map-error p {
	margin: 0 0 0.6em;
}

.bgv-sl-map-error-detail {
	font-size: 0.85em;
	color: #8a1c1c;
}

.bgv-sl-results {
	width: 100%;
	max-height: 420px;
	overflow-y: auto;
	border: 1px solid var(--nv-dark-bg, #e0e0e0);
	border-radius: 6px;
	padding: 0.75em 1em;
	background: var(--nv-site-bg, #fff);
}

.bgv-sl-results-empty {
	color: var(--nv-text-color, #555);
	font-size: 0.95em;
}

.bgv-sl-results-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bgv-sl-result {
	padding: 0.75em 0;
	border-bottom: 1px solid var(--nv-light-bg, #ececec);
	cursor: pointer;
}

.bgv-sl-result:last-child {
	border-bottom: none;
}

.bgv-sl-result:hover {
	background: var(--nv-light-bg, #f7f7f7);
}

.bgv-sl-result-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5em;
}

.bgv-sl-result-name {
	font-weight: 700;
	color: var(--nv-text-color, #1d1d1d);
}

.bgv-sl-result-distance {
	flex-shrink: 0;
	font-size: 0.85em;
	color: var(--nv-secondary-accent, #7a1f2b);
	font-weight: 600;
}

.bgv-sl-result-address {
	margin: 0.35em 0 0;
	font-size: 0.9em;
	color: var(--nv-text-color, #555);
}

.bgv-sl-badge {
	display: inline-block;
	margin-top: 0.35em;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--nv-light-bg, #f0f0f0);
	color: var(--nv-primary-accent, #7a1f2b);
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Info window content (rendered inside Google's own container, so keep it minimal) */
.bgv-sl-infowindow {
	font-size: 0.95em;
	max-width: 240px;
}

.bgv-sl-infowindow p {
	margin: 0.4em 0;
}

/* Google's own close button (standard chrome, just sized down a little).
 * Undocumented internal class name but stable for years; worst case if a
 * future Maps update renames it, the button just renders at its normal
 * default size again. */
.gm-style-iw button.gm-ui-hover-effect {
	transform: scale( 0.82 );
}

/* Google moves focus into the info window when it opens -- onto its close
 * button, or onto the first link (e.g. the phone number) if the button
 * isn't in that browser's tab order -- so screen reader users know it
 * opened. That's correct for accessibility, but it also draws a focus
 * ring after an ordinary mouse click, which is what was reported here.
 * :focus-visible only matches when the browser judges focus came from
 * keyboard navigation, so this hides the ring for the click-triggered
 * case while still showing it for a real keyboard user tabbing in. */
.gm-style-iw button:focus:not( :focus-visible ),
.gm-style-iw a:focus:not( :focus-visible ) {
	outline: none;
}

/* Desktop: side-by-side layout */
@media ( min-width: 900px ) {
	.bgv-sl-layout {
		flex-direction: row;
		align-items: stretch;
	}

	.bgv-sl-results {
		width: 34%;
		max-height: 480px;
	}

	.bgv-sl-map-wrap {
		width: 66%;
	}

	#bgv-sl-map {
		height: 480px;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	white-space: nowrap;
}