/**
 * ECM Store Locator Styles
 *
 * Hero / buttons / chips use the original gold-accent design.
 * Only the map background style (in PHP) is purple-only.
 */

/* ============================================
   WRAPPER
   ============================================ */
.ecm-locator-wrapper {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.ecm-locator-wrapper button,
.ecm-locator-wrapper input,
.ecm-locator-wrapper select {
	font-family: inherit;
	box-sizing: border-box;
}

/* ============================================
   HERO SEARCH BAR
   ============================================ */
.ecm-locator-wrapper .ecm-hero-search {
	background: linear-gradient(135deg, var(--ecm-primary-darker) 0%, var(--ecm-primary-dark) 60%, var(--ecm-primary) 100%) !important;
	border-radius: 20px 20px 0 0;
	padding: 36px 40px;
	position: relative;
	overflow: hidden;
}

.ecm-locator-wrapper .ecm-hero-bg-glow {
	position: absolute;
	pointer-events: none;
	border-radius: 50%;
}
.ecm-locator-wrapper .ecm-glow-1 {
	top: -80px;
	right: -80px;
	width: 280px;
	height: 280px;
	background: radial-gradient(circle, var(--ecm-secondary-glow) 0%, transparent 70%);
}
.ecm-locator-wrapper .ecm-glow-2 {
	bottom: -120px;
	left: 30%;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(139, 77, 184, 0.4) 0%, transparent 70%);
}

.ecm-locator-wrapper .ecm-hero-title {
	color: #fff !important;
	margin: 0 0 6px 0 !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em;
	position: relative;
	line-height: 1.2;
}
.ecm-locator-wrapper .ecm-hero-title .ecm-accent {
	color: var(--ecm-secondary) !important;
}
.ecm-locator-wrapper .ecm-hero-tagline {
	color: #d4c0e0 !important;
	margin: 0 0 24px 0 !important;
	font-size: 14px !important;
	position: relative;
}

/* ============================================
   SEARCH ROW
   ============================================ */
.ecm-locator-wrapper .ecm-search-row {
	display: flex !important;
	gap: 12px !important;
	align-items: center !important;
	flex-wrap: wrap;
	position: relative;
}

.ecm-locator-wrapper .ecm-input-wrap {
	flex: 1 1 280px !important;
	min-width: 260px;
	position: relative;
}
.ecm-locator-wrapper .ecm-pin-icon {
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 2;
}
.ecm-locator-wrapper #ecm-hero-input {
	width: 100% !important;
	padding: 16px 16px 16px 50px !important;
	border: 2px solid transparent !important;
	border-radius: 12px !important;
	background: #fff !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	color: #1a0f1f !important;
	outline: none !important;
	box-shadow: 0 4px 20px rgba(0,0,0,0.25) !important;
	transition: all 0.2s !important;
	height: auto !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}
.ecm-locator-wrapper #ecm-hero-input:focus {
	border-color: var(--ecm-secondary) !important;
	box-shadow: 0 4px 20px var(--ecm-secondary-glow) !important;
}

/* Use my location — gold-outlined pill */
.ecm-locator-wrapper .ecm-geo-btn {
	flex: 0 0 auto !important;
	padding: 16px 22px !important;
	border: 2px solid var(--ecm-secondary) !important;
	border-radius: 999px !important;
	background: rgba(231, 176, 36, 0.15) !important;
	color: var(--ecm-secondary) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	transition: all 0.2s !important;
	height: auto !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
}
.ecm-locator-wrapper .ecm-geo-btn:hover,
.ecm-locator-wrapper .ecm-geo-btn:focus {
	background: var(--ecm-secondary) !important;
	color: var(--ecm-primary-darker) !important;
}
.ecm-locator-wrapper .ecm-geo-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}
.ecm-locator-wrapper .ecm-geo-btn svg { flex-shrink: 0; }

/* Radius dropdown */
.ecm-locator-wrapper .ecm-radius-select {
	flex: 0 0 auto !important;
	width: auto !important;
	padding: 16px 36px 16px 18px !important;
	border: none !important;
	border-radius: 12px !important;
	background: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1a0f1f !important;
	cursor: pointer !important;
	outline: none !important;
	height: auto !important;
	line-height: 1.2 !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23662F8E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	margin: 0 !important;
}

/* Search button — gold gradient with glow */
.ecm-locator-wrapper .ecm-search-btn {
	flex: 0 0 auto !important;
	padding: 16px 36px !important;
	border: none !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, var(--ecm-secondary) 0%, var(--ecm-secondary-light) 100%) !important;
	color: var(--ecm-primary-darker) !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 20px var(--ecm-secondary-glow) !important;
	letter-spacing: 0.02em !important;
	transition: transform 0.15s, box-shadow 0.15s !important;
	height: auto !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
}
.ecm-locator-wrapper .ecm-search-btn:hover,
.ecm-locator-wrapper .ecm-search-btn:focus {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px var(--ecm-secondary-glow) !important;
	background: linear-gradient(135deg, var(--ecm-secondary-light) 0%, var(--ecm-secondary) 100%) !important;
	color: var(--ecm-primary-darker) !important;
}

/* ============================================
   REGION CHIPS (gold active state)
   ============================================ */
.ecm-locator-wrapper .ecm-chips {
	display: flex !important;
	gap: 8px !important;
	margin-top: 20px !important;
	flex-wrap: wrap;
	position: relative;
}
.ecm-locator-wrapper .ecm-chip {
	padding: 7px 14px !important;
	border-radius: 999px !important;
	background: rgba(255,255,255,0.08) !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
	height: auto !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
}
.ecm-locator-wrapper .ecm-chip:hover {
	background: rgba(255,255,255,0.15) !important;
}
.ecm-locator-wrapper .ecm-chip.ecm-chip-active {
	background: rgba(231, 176, 36, 0.2) !important;
	border-color: var(--ecm-secondary) !important;
	color: var(--ecm-secondary) !important;
}

/* ============================================
   MAP FRAME (purple-only gradient — no gold bleed behind list)
   Top padding removed so frame doesn't show as a bar between hero+map
   ============================================ */
.ecm-locator-wrapper .ecm-locator-mapwrap {
	position: relative;
	padding: 0 4px 4px 4px;
	margin: 0 !important;
	background: linear-gradient(135deg, var(--ecm-primary-dark) 0%, var(--ecm-primary) 50%, var(--ecm-primary-dark) 100%);
	border-radius: 0 0 20px 20px;
	box-shadow: 0 20px 60px rgba(102, 47, 142, 0.3), 0 8px 24px rgba(0,0,0,0.15);
}
.ecm-locator-wrapper .ecm-locator-mapwrap #wpsl-gmap {
	border-radius: 0 0 17px 17px !important;
	overflow: hidden;
}

/* Eliminate ANY whitespace between the hero search and the map area.
   This is defensive — covers margin-bottom on hero, margin-top on mapwrap,
   margin from any WPSL elements rendering between them, and accidental
   line breaks in the HTML output. */
.ecm-locator-wrapper .ecm-hero-search {
	margin-bottom: 0 !important;
}
.ecm-locator-wrapper .ecm-hero-search + * {
	margin-top: 0 !important;
}
.ecm-locator-wrapper .ecm-locator-mapwrap > *:first-child,
.ecm-locator-wrapper #wpsl-gmap-wrap,
.ecm-locator-wrapper #wpsl-gmap {
	margin-top: 0 !important;
}
/* If WPSL injects any wrapper divs that take height, force them to zero.
   The outer .wpsl-search wrapper is the real source of the "white bar"
   between hero and map — it has WPSL's default background. */
.ecm-locator-wrapper .wpsl-search,
.ecm-locator-wrapper #wpsl-search-wrap,
.ecm-locator-wrapper #wpsl-result-info,
.ecm-locator-wrapper #wpsl-result-info-wrap {
	display: none !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: transparent !important;
}

/* Partner list (left column) — clean dark purple background + custom scrollbar */
.ecm-locator-wrapper #wpsl-result-list,
.ecm-locator-wrapper #wpsl-stores {
	background: var(--ecm-primary-darker) !important;
	color: #fff !important;
	/* Firefox scrollbar */
	scrollbar-width: thin;
	scrollbar-color: var(--ecm-secondary) var(--ecm-primary-darker);
}

/* WebKit scrollbar styling (Chrome, Safari, Edge) */
.ecm-locator-wrapper #wpsl-result-list::-webkit-scrollbar,
.ecm-locator-wrapper #wpsl-stores::-webkit-scrollbar,
.ecm-locator-wrapper #wpsl-result-list *::-webkit-scrollbar,
.ecm-locator-wrapper #wpsl-stores *::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}
.ecm-locator-wrapper #wpsl-result-list::-webkit-scrollbar-track,
.ecm-locator-wrapper #wpsl-stores::-webkit-scrollbar-track,
.ecm-locator-wrapper #wpsl-result-list *::-webkit-scrollbar-track,
.ecm-locator-wrapper #wpsl-stores *::-webkit-scrollbar-track {
	background: var(--ecm-primary-darker);
	border-radius: 10px;
}
.ecm-locator-wrapper #wpsl-result-list::-webkit-scrollbar-thumb,
.ecm-locator-wrapper #wpsl-stores::-webkit-scrollbar-thumb,
.ecm-locator-wrapper #wpsl-result-list *::-webkit-scrollbar-thumb,
.ecm-locator-wrapper #wpsl-stores *::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--ecm-secondary) 0%, var(--ecm-secondary-light) 100%);
	border-radius: 10px;
	border: 2px solid var(--ecm-primary-darker);
}
.ecm-locator-wrapper #wpsl-result-list::-webkit-scrollbar-thumb:hover,
.ecm-locator-wrapper #wpsl-stores::-webkit-scrollbar-thumb:hover,
.ecm-locator-wrapper #wpsl-result-list *::-webkit-scrollbar-thumb:hover,
.ecm-locator-wrapper #wpsl-stores *::-webkit-scrollbar-thumb:hover {
	background: var(--ecm-secondary-light);
}

.ecm-locator-wrapper #wpsl-result-list ul li,
.ecm-locator-wrapper #wpsl-stores li {
	border-bottom: 1px solid rgba(255,255,255,0.1) !important;
	padding: 16px 18px !important;
	transition: background 0.2s !important;
}
.ecm-locator-wrapper #wpsl-result-list ul li:hover,
.ecm-locator-wrapper #wpsl-stores li:hover {
	background: rgba(231, 176, 36, 0.08) !important;
}
.ecm-locator-wrapper #wpsl-result-list .wpsl-title,
.ecm-locator-wrapper #wpsl-stores .wpsl-title {
	color: var(--ecm-secondary) !important;
	font-weight: 700 !important;
	font-size: 15px !important;
}
.ecm-locator-wrapper #wpsl-result-list a,
.ecm-locator-wrapper #wpsl-stores a {
	color: var(--ecm-secondary-light) !important;
}
.ecm-locator-wrapper #wpsl-result-list,
.ecm-locator-wrapper #wpsl-stores,
.ecm-locator-wrapper #wpsl-result-list * {
	color: #d4c0e0;
}
.ecm-locator-wrapper #wpsl-result-list .wpsl-title {
	color: var(--ecm-secondary) !important;
}

/* ============================================
   STORE THUMBNAILS (partner logos in list)
   The list column keeps its WPSL default width. The image fills
   whatever width the column gives it, scaling the full logo down
   to fit (so wide horizontal logos may appear small but are never clipped).
   ============================================ */

/* Kill overflow:hidden on list items so logos aren't clipped */
.ecm-locator-wrapper #wpsl-result-list ul li,
.ecm-locator-wrapper #wpsl-stores li,
.ecm-locator-wrapper #wpsl-wrap #wpsl-result-list li {
	overflow: visible !important;
}

/* Image fills available width, full logo always visible via object-fit */
.ecm-locator-wrapper .wpsl-store-thumb,
.ecm-locator-wrapper #wpsl-wrap .wpsl-store-thumb,
.ecm-locator-wrapper #wpsl-stores .wpsl-store-thumb,
.ecm-locator-wrapper #wpsl-result-list .wpsl-store-thumb,
.ecm-locator-wrapper #wpsl-wrap #wpsl-stores li img.wpsl-store-thumb,
.ecm-locator-wrapper #wpsl-wrap #wpsl-result-list li img.wpsl-store-thumb {
	width: 100% !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	object-fit: contain !important;
	float: none !important;
	margin: 0 0 10px 0 !important;
	padding: 8px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	border-radius: 6px !important;
	border: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	display: block !important;
	aspect-ratio: auto !important;
}

/* ============================================
   PULSE ANIMATION (gold glow)
   ============================================ */
@keyframes ecm-pulse {
	0%, 100% { opacity: 0.7; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.15); }
}
.ecm-pulse-ring {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--ecm-secondary-glow) 0%, transparent 70%);
	animation: ecm-pulse 2s ease-in-out infinite;
	pointer-events: none;
	transform-origin: center;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
	.ecm-locator-wrapper .ecm-hero-search {
		padding: 24px 20px;
		border-radius: 12px 12px 0 0;
	}
	.ecm-locator-wrapper .ecm-hero-title { font-size: 22px !important; }
	.ecm-locator-wrapper .ecm-search-row { gap: 10px !important; }
	.ecm-locator-wrapper .ecm-input-wrap,
	.ecm-locator-wrapper .ecm-geo-btn,
	.ecm-locator-wrapper .ecm-radius-select,
	.ecm-locator-wrapper .ecm-search-btn {
		flex: 1 1 100% !important;
		justify-content: center !important;
	}
	.ecm-locator-wrapper .ecm-locator-mapwrap {
		border-radius: 0 0 12px 12px;
	}
}