/**
 * WP Store Locator 3.0 compatibility for the Locations Finder section.
 *
 * Loaded only on WPSL 3.x, after the plugin's own stylesheet (see
 * includes/wpsl-compat.php). 3.0 renames the map (#wpsl-gmap -> #wpsl-map),
 * loads its stylesheet after the theme's and forces the map height with
 * !important, so several of its rules override the theme's in
 * assets/src/css/components/locations-finder.css. These rules put the 2.x
 * layout back; each comment names the 3.0 rule it undoes. Plain CSS with the
 * theme's resolved values (screens sm 640px, md 768px, lg 1024px; 1rem = 10px).
 */

/* 3.0: #wpsl-wrap { display: flow-root; z-index: 1 }. The theme's overflow: auto
   already contains the floated map, as on 2.x. */
.section-locations-finder #wpsl-wrap {
	display: block;
	z-index: auto;
}

/* The theme's #wpsl-gmap rules, on 3.0's #wpsl-map. 3.0: #wpsl-map { float:
   inline-end; width: 66.5% }, and its inline <style> from the height setting:
   #wpsl-map { height: 350px !important }. */
.section-locations-finder #wpsl-wrap #wpsl-map {
	height: 350px !important;
	float: none;
	width: 100%;
	margin-bottom: 2.5rem;
	overflow: hidden;
	border-radius: 5rem;
	box-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

@media (min-width: 640px) {
	.section-locations-finder #wpsl-wrap #wpsl-map {
		height: 450px !important;
	}
}

@media (min-width: 768px) {
	.section-locations-finder #wpsl-wrap #wpsl-map {
		height: 550px !important;
		float: right;
		width: 70%;
		margin-bottom: 0;
	}
}

@media (min-width: 1024px) {
	.section-locations-finder #wpsl-wrap #wpsl-map {
		height: 650px !important;
	}
}

/* 3.0: #wpsl-result-list { float: inline-start }. On 2.x the list wasn't floated
   and sat beside the floated map. */
.section-locations-finder #wpsl-wrap #wpsl-result-list {
	float: none;
}

/* 3.0: #wpsl-wrap .wpsl-search { margin-bottom: 12px } over the theme's mb-5. */
.section-locations-finder #wpsl-wrap .wpsl-search {
	margin-bottom: 1.25rem;
}

/* 3.0 (max-width: 825px): #wpsl-search-wrap .wpsl-input { margin-bottom: 10px !important }
   over the theme's mb-0. 2.x had no !important here, so the theme won. */
.section-locations-finder #wpsl-search-wrap .wpsl-input {
	margin-bottom: 0 !important;
}

/* 3.0: #wpsl-search-wrap div:not(…) { margin-inline-end: 10px } now outranks its own
   (max-width: 570px) reset, so the full-width search input and button lost 10px. */
@media (max-width: 570px) {
	.section-locations-finder #wpsl-search-wrap .wpsl-input,
	.section-locations-finder #wpsl-search-wrap .wpsl-search-btn-wrap {
		margin-inline-end: 0 !important;
	}
}

/* 3.x (colors.css): #wpsl-wrap .gm-style-iw-d { background: var(--wpsl-popup-content-background);
   color: var(--wpsl-popup-content-text) } paints the map pop-up's content white with dark text
   inside the theme's dark pop-up. 2.x left it transparent, so the theme's colours showed. */
.section-locations-finder #wpsl-wrap .gm-style .gm-style-iw-d {
	background: transparent;
	color: inherit;
}