.ecwash-locator {
	--ecwash-brand: #0a7cff;
	--ecwash-map-height: 520px;
	--ecwash-wa: #25d366;
	font-family: inherit;
	color: #1f2733;
	max-width: 100%;
	margin: 0 auto;
}

.ecwash-locator * { box-sizing: border-box; }

/* ---- Kontrol atas ---- */
.ecwash-controls {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.ecwash-nearest-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--ecwash-brand);
	color: #fff;
	border: 0;
	border-radius: 10px;
	padding: 11px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s ease;
	white-space: nowrap;
}
.ecwash-nearest-btn:hover { filter: brightness(1.05); }
.ecwash-nearest-btn:disabled { opacity: .6; cursor: default; }
.ecwash-search,
.ecwash-region-filter {
	border: 1px solid #d4dae2;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	background: #fff;
	color: #1f2733;
}
.ecwash-search { flex: 1 1 220px; min-width: 180px; }
.ecwash-region-filter { flex: 0 0 auto; }

/* ---- Body: list + map ---- */
.ecwash-body {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: 16px;
	align-items: stretch;
}
.ecwash-list {
	height: var(--ecwash-map-height);
	overflow-y: auto;
	padding-right: 4px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ecwash-map {
	height: var(--ecwash-map-height);
	border-radius: 14px;
	overflow: hidden;
	z-index: 0;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* ---- Kartu outlet ---- */
.ecwash-card {
	border: 1px solid #e6eaf0;
	border-radius: 12px;
	padding: 14px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ecwash-card:hover { border-color: var(--ecwash-brand); }
.ecwash-card.is-active {
	border-color: var(--ecwash-brand);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ecwash-brand) 25%, transparent);
}
.ecwash-card-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 4px;
}
.ecwash-card-top h4 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.ecwash-badge {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 600;
	color: var(--ecwash-brand);
	background: color-mix(in srgb, var(--ecwash-brand) 12%, #fff);
	padding: 2px 8px;
	border-radius: 999px;
}
.ecwash-addr { margin: 0 0 6px; font-size: 13px; color: #55606e; line-height: 1.4; }
.ecwash-meta { margin: 0 0 10px; font-size: 12px; color: #6b7480; display: flex; gap: 12px; flex-wrap: wrap; }
.ecwash-distance { font-weight: 600; color: var(--ecwash-brand); }

/* ---- Tombol aksi ---- */
.ecwash-actions { display: flex; gap: 8px; }
.ecwash-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 10px;
	border-radius: 9px;
	transition: filter .15s ease;
}
.ecwash-btn:hover { filter: brightness(1.05); }
.ecwash-btn-map { background: color-mix(in srgb, var(--ecwash-brand) 12%, #fff); color: var(--ecwash-brand); }
.ecwash-btn-wa { background: var(--ecwash-wa); color: #fff; }

/* ---- Popup peta ---- */
.ecwash-popup .leaflet-popup-content { margin: 12px 14px; }
.ecwash-popup-title { display: block; font-size: 14px; margin-bottom: 4px; }
.ecwash-popup-addr { font-size: 12px; color: #55606e; margin-bottom: 8px; line-height: 1.4; }
.ecwash-popup-choose { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8a94a1; margin-bottom: 6px; }
.ecwash-popup .ecwash-actions { flex-direction: column; }
.ecwash-popup .ecwash-btn { flex: none; }

/* ---- Marker kustom ---- */
.ecwash-pin span {
	display: block;
	width: 20px; height: 20px;
	background: var(--ecwash-brand, #0a7cff);
	border: 3px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	margin: 3px;
	box-shadow: 0 2px 5px rgba(0,0,0,.3);
}
.ecwash-pin.is-active span {
	background: #ff5722;
	width: 24px; height: 24px;
	margin: 1px;
}

.ecwash-empty { color: #8a94a1; font-size: 14px; padding: 20px 4px; }
.ecwash-status { margin-top: 10px; font-size: 13px; color: #6b7480; min-height: 18px; }

/* ---- Responsif ---- */
@media (max-width: 782px) {
	.ecwash-body { grid-template-columns: 1fr; }
	.ecwash-map { height: 340px; order: -1; }
	.ecwash-list { height: auto; max-height: 420px; }
	.ecwash-nearest-btn { flex: 1 1 100%; justify-content: center; }
}