/* Basics */
.maplibregl-ctrl-geocoder,
.maplibregl-ctrl-geocoder *,
.maplibregl-ctrl-geocoder *:after,
.maplibregl-ctrl-geocoder *:before {
	box-sizing: border-box !important;
}

/* -------------------------------------------------------------------------- */
/*                                Control Groups                              */
/* -------------------------------------------------------------------------- */

/* Standardize Control Groups (Zoom, Geolocate, Custom Controls) */
.maplibregl-ctrl-group {
	border-radius: 12px !important;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 2px 4px rgba(0, 0, 0, 0.02) !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	overflow: hidden !important;
	/* Ensure child buttons don't overflow radius */
}

/* Buttons inside Control Groups */
.maplibregl-ctrl-group > button {
	width: 44px !important;
	height: 44px !important;
	box-sizing: border-box !important;
	background-color: transparent !important;
	border: none !important;
	border-bottom: 1px solid #e2e8f0 !important;
	cursor: pointer !important;
	color: #475569 !important;
	/* Slate 600 */
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 !important;
}

.maplibregl-ctrl-group > button:last-child {
	border-bottom: none !important;
}

.maplibregl-ctrl-group > button:hover {
	background-color: #f8fafc !important;
	/* Slate 50 */
	color: #0f172a !important;
	/* Slate 900 */
}

.maplibregl-ctrl-group > button[aria-disabled='true'],
.maplibregl-ctrl-group > button:disabled {
	background-color: #ffffffcc !important;
	/* keep glassy white */
	color: #cbd5e1 !important;
	cursor: not-allowed !important;
	box-shadow: none !important;
	transition: opacity 0.2s ease !important;
}

.maplibregl-ctrl-group > button[aria-disabled='true']:hover,
.maplibregl-ctrl-group > button:disabled:hover {
	background-color: #ffffffcc !important;
	color: #cbd5e1 !important;
}

.maplibregl-ctrl-group > button.station-disabled {
	background-color: #ffffffcc !important;
	color: #cbd5e1 !important;
	box-shadow: none !important;
}

.maplibregl-ctrl-group > button:active {
	background-color: #f1f5f9 !important;
	/* Slate 100 */
}

.maplibregl-ctrl-group > button:focus-visible {
	z-index: 3 !important;
	outline: 2px solid #2563eb !important;
	/* Blue 600 */
	outline-offset: -2px !important;
}

/* Active State for Custom Toggle Buttons (Filters, Favorites, Checkins) */
.maplibregl-ctrl-group > button.active-filter-button {
	color: #2563eb !important;
	/* Blue 600 */
	background-color: #eff6ff !important;
	/* Blue 50 */
}

.maplibregl-ctrl-group > button.active-filter-button:hover {
	background-color: #dbeafe !important;
	/* Blue 100 */
}

.maplibregl-ctrl-group.station-disabled {
	background: transparent !important;
	box-shadow: none !important;
	border-color: #e2e8f0 !important;
}

/* Geolocate Active State */
.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active,
.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background {
	color: #2563eb !important;
}

/* -------------------------------------------------------------------------- */
/*                            Route Planner Button                            */
/* -------------------------------------------------------------------------- */

.maplibregl-ctrl-route-planner {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	padding: 0 16px !important;
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	/* Slightly bolder */
	color: #1e293b !important;
	/* Slate 800 */
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 2px 4px rgba(0, 0, 0, 0.02) !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	height: 44px !important;
	/* Increased height for better touch/click */
	margin-top: 0 !important;
	font-family: 'Inter 18pt', 'Inter 18pt Fallback', sans-serif !important;
	box-sizing: border-box !important;
	-webkit-tap-highlight-color: transparent !important;
	/* Remove iOS tap highlight */
	position: relative !important;
	overflow: visible !important;
}

.maplibregl-ctrl-route-planner:focus,
.maplibregl-ctrl-route-planner:focus-visible,
.maplibregl-ctrl button.maplibregl-ctrl-route-planner:focus,
.maplibregl-ctrl button.maplibregl-ctrl-route-planner:focus-visible {
	outline: none !important;
	/* Keep the normal shadow (avoid "blink" when focus changes). */
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.maplibregl-ctrl-route-planner:hover {
	background-color: #f8fafc !important;
	border-color: #cbd5e1 !important;
	color: #0f172a !important;
	transform: translateY(-1px) !important;
	box-shadow:
		0 6px 16px rgba(0, 0, 0, 0.1),
		0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.maplibregl-ctrl-route-planner[aria-disabled='true'],
.maplibregl-ctrl-route-planner:disabled,
.maplibregl-ctrl-route-planner.station-disabled {
	background-color: #ffffffcc !important;
	border-color: #e2e8f0 !important;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.05),
		0 2px 4px rgba(0, 0, 0, 0.01) !important;
	color: #cbd5e1 !important;
	transition: opacity 0.2s ease !important;
}

.maplibregl-ctrl-route-planner[aria-disabled='true'] svg,
.maplibregl-ctrl-route-planner:disabled svg,
.maplibregl-ctrl-route-planner.station-disabled svg {
	color: #cbd5e1 !important;
}

.maplibregl-ctrl-route-planner[aria-disabled='true'] .route-planner-v3-badge,
.maplibregl-ctrl-route-planner:disabled .route-planner-v3-badge,
.maplibregl-ctrl-route-planner.station-disabled .route-planner-v3-badge {
	opacity: 0.55 !important;
}

.maplibregl-ctrl-route-planner:active {
	transform: translateY(0) !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
	background-color: #f1f5f9 !important;
}

.maplibregl-ctrl-route-planner svg {
	width: 18px !important;
	height: 18px !important;
	color: #64748b !important;
	/* Slate 500 */
	transition: color 0.2s ease !important;
}

.maplibregl-ctrl-route-planner .route-planner-v3-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 27px !important;
	height: 18px !important;
	padding: 0 6px !important;
	border-radius: 5px 5px 5px 2px !important;
	background: linear-gradient(145deg, #2563eb 0%, #4338ca 100%) !important;
	border: 1px solid rgba(255, 255, 255, 0.72) !important;
	color: #ffffff !important;
	font-size: 9px !important;
	font-weight: 900 !important;
	letter-spacing: 0.1em !important;
	line-height: 1 !important;
	text-transform: uppercase !important;
	box-shadow:
		0 3px 8px rgba(37, 99, 235, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
	position: absolute !important;
	top: -4px !important;
	right: -9px !important;
	transform: rotate(7deg) !important;
}

.maplibregl-ctrl-route-planner:hover svg {
	color: #2563eb !important;
	/* Blue 600 */
}

/* -------------------------------------------------------------------------- */
/*                  Mobile: remove hover/active visual effects                 */
/* -------------------------------------------------------------------------- */

/* `mapaplanejador.jsx` adds `.no-hover-active` when `isMobileViewport` is true */
.maplibregl-ctrl-route-planner.no-hover-active:hover,
.maplibregl-ctrl-route-planner.no-hover-active:active {
	background-color: #ffffff !important;
	border-color: #e2e8f0 !important;
	color: #1e293b !important;
	transform: none !important;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.maplibregl-ctrl-route-planner.no-hover-active:hover svg,
.maplibregl-ctrl-route-planner.no-hover-active:active svg {
	color: #64748b !important;
	/* Slate 500 */
}

/* Location Consent Effect (Pulse) */
.location-consent-effect {
	animation: locationPulse 1.5s ease-in-out !important;
}

@keyframes locationPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
		border-color: #2563eb;
	}

	70% {
		box-shadow: 0 0 0 10px rgba(37, 99, 235, 0);
		border-color: #2563eb;
	}

	100% {
		box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
	}
}

/* -------------------------------------------------------------------------- */
/*                                  Geocoder                                  */
/* -------------------------------------------------------------------------- */

.maplibregl-ctrl-geocoder {
	font-size: 14px !important;
	line-height: 18px !important;
	position: relative !important;
	background-color: transparent !important;
	/* Remove default library styles that might cause the square border */
	box-shadow: none !important;
	border: none !important;
	width: 100% !important;
	min-width: 240px !important;
	max-width: 320px !important;
	z-index: 1 !important;
	transition: all 0.25s ease !important;
	margin-top: 10px !important;
	margin-left: 10px !important;
}

.maplibregl-ctrl-geocoder--input {
	font: inherit !important;
	width: 100% !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	background-color: #ffffff !important;
	margin: 0 !important;
	height: 44px !important;
	/* Increased height */
	color: #1e293b !important;
	padding: 0 40px 0 44px !important;
	/* Adjusted padding */
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	font-size: 16px !important;
	/* Prevent iOS Safari from zooming the page on input focus */
	font-weight: 500 !important;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 2px 4px rgba(0, 0, 0, 0.02) !important;
	transition: all 0.2s ease !important;
	font-family: 'Inter 18pt', 'Inter 18pt Fallback', sans-serif !important;
	box-sizing: border-box !important;
}

.maplibregl-ctrl-geocoder--input::placeholder {
	color: #64748b !important;
	opacity: 1 !important;
	font-weight: 400 !important;
}

.maplibregl-ctrl-geocoder--input:focus {
	color: #0f172a !important;
	outline: none !important;
	border-color: #2563eb !important;
	box-shadow:
		0 0 0 3px rgba(37, 99, 235, 0.15),
		0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Search Icon Position */
.maplibregl-ctrl-geocoder--icon-search {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	left: 14px !important;
	width: 20px !important;
	height: 20px !important;
	fill: #64748b !important;
	transition: fill 0.2s ease !important;
	z-index: 2 !important;
}

.maplibregl-ctrl-geocoder--input:focus
	~ .maplibregl-ctrl-geocoder--icon-search {
	fill: #2563eb !important;
}

/* Close Button (Clear) */
.maplibregl-ctrl-geocoder--button {
	position: absolute !important;
	right: 8px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 30px !important;
	height: 30px !important;
	cursor: pointer !important;
	z-index: 2 !important;
}

.maplibregl-ctrl-geocoder--icon-close {
	width: 18px !important;
	height: 18px !important;
	margin: 0 !important;
	/* Reset margin as flex handles alignment */
	fill: #94a3b8 !important;
	transition: fill 0.2s ease !important;
}

.maplibregl-ctrl-geocoder--button:hover .maplibregl-ctrl-geocoder--icon-close {
	fill: #475569 !important;
}

/* Loading Icon */
.maplibregl-ctrl-geocoder--icon-loading {
	position: absolute !important;
	right: 12px !important;
	top: 50% !important;
	margin: 0 !important;
	/* Reset margin */
	margin-top: -10px !important;
	width: 20px !important;
	height: 20px !important;
	animation: geocoder-spin 0.9s linear infinite !important;
	transform-origin: 50% 50% !important;
	z-index: 3 !important;
}

.maplibregl-ctrl-geocoder .maplibregl-ctrl-geocoder--pin-right > * {
	display: none;
}

.maplibregl-ctrl-geocoder--loading .maplibregl-ctrl-geocoder--icon-loading {
	display: block !important;
}

.maplibregl-ctrl-geocoder--loading .maplibregl-ctrl-geocoder--button {
	opacity: 0;
	pointer-events: none;
}

/* Rotate Animation */
@keyframes geocoder-spin {
	to {
		transform: rotate(360deg);
	}
}

/* -------------------------------------------------------------------------- */
/*                                Power Filters                               */
/* -------------------------------------------------------------------------- */

/* Match filters wrapper to geocoder sizing by default */
.maplibregl-ctrl.mapa-filters-component-wrapper {
	width: 100% !important;
	min-width: 240px !important;
	max-width: 320px !important;
	margin-top: 10px !important;
	margin-left: 10px !important;
	box-sizing: border-box !important;
}

.power-filter-container {
	position: relative !important;
	width: 100% !important;
	background-color: transparent !important;
	font-family: 'Inter 18pt', 'Inter 18pt Fallback', sans-serif !important;
}

.power-filter-header {
	width: 100% !important;
	height: 44px !important;
	/* Match Input Height */
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	color: #1e293b !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 2px 4px rgba(0, 0, 0, 0.02) !important;
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	cursor: pointer !important;
	position: relative !important;
	padding: 0 14px !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box !important;
}

.power-filter-header:hover {
	background-color: #f8fafc !important;
	border-color: #cbd5e1 !important;
	color: #0f172a !important;
}

.power-filter-icon-left {
	width: 20px !important;
	height: 20px !important;
	color: #64748b !important;
	flex-shrink: 0;
	transition: color 0.2s ease !important;
}

.power-filter-header:hover .power-filter-icon-left {
	color: #2563eb !important;
}

.power-filter-icon-right {
	width: 16px !important;
	height: 16px !important;
	color: #94a3b8 !important;
	flex-shrink: 0;
}

.power-filter-title {
	flex: 1 !important;
	text-align: left !important;
	color: inherit !important;
	font-size: 15px !important;
	font-weight: 500 !important;
}

/* Expanded Filter Form */
.power-filter-form {
	background-color: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 16px !important;
	/* Slightly larger radius for the panel */
	padding: 16px !important;
	margin-top: 8px !important;
	box-shadow:
		0 10px 25px -5px rgba(0, 0, 0, 0.1),
		0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
	width: 100% !important;
	max-height: calc(100vh - 180px) !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.power-filter-form.power-filter-form-radio {
	padding: 10px !important;
	gap: 8px !important;
	margin-top: 10px !important;
	border-radius: 12px !important;
	max-height: none !important;
	overflow: visible !important;
}

.power-filter-option {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.power-filter-radio {
	width: 16px !important;
	height: 16px !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	accent-color: #2563eb !important;
	cursor: pointer !important;
}

.power-filter-label {
	flex: 1 !important;
	display: block !important;
	padding: 10px 12px !important;
	border-radius: 10px !important;
	border: 1px solid #e2e8f0 !important;
	background: #f8fafc !important;
	color: #0f172a !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	cursor: pointer !important;
	transition: all 0.18s ease !important;
}

.power-filter-option:hover .power-filter-label {
	background: #f1f5f9 !important;
	border-color: #cbd5e1 !important;
}

.power-filter-radio:checked + .power-filter-label {
	background: #eff6ff !important;
	border-color: #60a5fa !important;
	color: #1e3a8a !important;
	box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.2) !important;
}

.power-filter-radio:focus-visible + .power-filter-label {
	outline: 2px solid #93c5fd !important;
	outline-offset: 2px !important;
}

/* Compact variant */
.maplibregl-ctrl.mapa-filters-component-wrapper.mapa-filters-compact
	.power-filter-form {
	max-height: 320px !important;
}

/* Filter Sections */
.power-filter-slider-container {
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
	width: 100% !important;
	padding-bottom: 20px !important;
	border-bottom: 1px solid #f1f5f9 !important;
}

.power-filter-slider-container:last-child {
	border-bottom: none !important;
	padding-bottom: 0 !important;
}

.power-filter-slider-container.power-filter-card {
	border: none !important;
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	gap: 8px !important;
}

.power-filter-slider-container.power-filter-card
	+ .power-filter-slider-container.power-filter-card {
	border-top: 1px solid #f1f5f9 !important;
	padding-top: 12px !important;
	margin-top: 12px !important;
}

.power-filter-slider-container.power-filter-card:last-child {
	padding-bottom: 0 !important;
}

.filter-section-header {
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	border-bottom: none !important;
}

.power-filter-slider-container.power-filter-card .filter-section-header + * {
	margin-top: 8px !important;
}

.filter-section-title {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	color: #0f172a !important;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.filter-section-icon {
	width: 14px !important;
	height: 14px !important;
	color: #64748b !important;
}

.filter-section-icon-wrap {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 26px !important;
	height: 26px !important;
	border-radius: 8px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
}

.filter-section-value {
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	padding: 2px 8px !important;
	border-radius: 9999px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #475569 !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	white-space: nowrap !important;
}

/* Slider Customization */
.power-filter-slider-wrapper {
	padding: 0 4px !important;
}

.power-filter-slider [data-radix-slider-track] {
	background-color: #e2e8f0 !important;
	height: 6px !important;
	/* Slightly thicker track */
}

.power-filter-slider [data-radix-slider-range] {
	background-color: #2563eb !important;
	/* Blue 600 */
}

.power-filter-slider [data-radix-slider-thumb] {
	width: 22px !important;
	height: 22px !important;
	background-color: #ffffff !important;
	border: 2px solid #2563eb !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.power-filter-slider [data-radix-slider-thumb]:hover {
	background-color: #eff6ff !important;
	transform: scale(1.1) !important;
}

.power-filter-slider [data-radix-slider-thumb]:focus-visible {
	outline: 2px solid #93c5fd !important;
	/* Blue 300 focus ring */
	outline-offset: 2px !important;
}

/* Range Labels */
.power-filter-range-label {
	font-size: 11px !important;
	color: #64748b !important;
	font-weight: 500 !important;
}

/* Clear Button */
.power-filter-clear-button {
	width: 100% !important;
	padding: 10px !important;
	margin-top: 8px !important;
	background-color: #f1f5f9 !important;
	color: #475569 !important;
	border: none !important;
	border-radius: 10px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	text-align: center !important;
	text-decoration: none !important;
}

.power-filter-clear-button:hover {
	background-color: #e2e8f0 !important;
	color: #0f172a !important;
}

/* -------------------------------------------------------------------------- */
/*                                Suggestions                                 */
/* -------------------------------------------------------------------------- */

.maplibregl-ctrl-geocoder .suggestions {
	background-color: #ffffff !important;
	border-radius: 12px !important;
	left: 0 !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 4px !important;
	position: absolute !important;
	width: 100% !important;
	top: calc(100% + 8px) !important;
	z-index: 1000 !important;
	box-shadow:
		0 10px 25px -5px rgba(0, 0, 0, 0.1),
		0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
	border: 1px solid #e2e8f0 !important;
	max-height: 400px !important;
	overflow-y: auto !important;
}

.maplibregl-ctrl-geocoder .suggestions > li > a {
	cursor: pointer !important;
	display: block !important;
	padding: 6px 8px !important;
	color: #475569 !important;
	border-radius: 8px !important;
	transition: all 0.15s ease !important;
	line-height: 1.2 !important;
	font-size: 13px !important;
}

.maplibregl-ctrl-geocoder .suggestions > .active > a,
.maplibregl-ctrl-geocoder .suggestions > li > a:hover {
	color: #2563eb !important;
	/* Blue text */
	background-color: #eff6ff !important;
	/* Blue 50 background */
	text-decoration: none !important;
	font-weight: 500 !important;
}

.maplibregl-ctrl-geocoder--suggestion,
.maplibregl-ctrl-geocoder--result {
	gap: 8px !important;
	align-items: flex-start !important;
}

.geocoder-result-text,
.maplibregl-ctrl-geocoder--suggestion-info {
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.geocoder-result-icon,
.maplibregl-ctrl-geocoder--suggestion-icon,
.maplibregl-ctrl-geocoder--result-icon {
	min-width: 18px !important;
	min-height: 18px !important;
	max-width: 18px !important;
	max-height: 18px !important;
	padding-right: 0 !important;
	margin-top: 1px !important;
	color: #64748b !important;
}

.geocoder-result-icon svg {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.maplibregl-ctrl-geocoder--suggestion-icon,
.maplibregl-ctrl-geocoder--result-icon {
	display: block !important;
}

.geocoder-result-icon--station {
	color: #0ea5e9 !important;
}

.geocoder-result-icon--mapbox {
	color: #64748b !important;
}

.geocoder-result-icon--suggestion {
	color: #64748b !important;
}

.maplibregl-ctrl-geocoder--result-title,
.maplibregl-ctrl-geocoder--result-address,
.maplibregl-ctrl-geocoder--suggestion-title,
.maplibregl-ctrl-geocoder--suggestion-address {
	white-space: normal !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
}

.maplibregl-ctrl-geocoder--result-title,
.maplibregl-ctrl-geocoder--suggestion-title {
	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
	-webkit-line-clamp: 1 !important;
}

.maplibregl-ctrl-geocoder--result-address,
.maplibregl-ctrl-geocoder--suggestion-address {
	font-size: 11px !important;
	line-height: 1.2 !important;
	color: #64748b !important;
	-webkit-line-clamp: 2 !important;
}

/* -------------------------------------------------------------------------- */
/*                                  Tooltips                                  */
/* -------------------------------------------------------------------------- */

/* Station Tooltip Styles */
.station-tooltip .maplibregl-popup-content {
	background-color: #ffffff !important;
	color: #1e293b !important;
	padding: 0 !important;
	border-radius: 12px !important;
	box-shadow:
		0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05),
		0 0 0 1px rgba(0, 0, 0, 0.05) !important;
	font-family:
		var(
			--carregados-font-sans,
			'Inter 18pt',
			'Inter 18pt Fallback',
			sans-serif
		) !important;
	font-size: 0.8rem !important;
	text-align: left !important;
	overflow: hidden !important;
	user-select: none !important;
	transition:
		opacity 160ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 160ms cubic-bezier(0.16, 1, 0.3, 1) !important;
	max-width: 280px !important;
	width: max-content !important;
	min-width: 216px !important;
	border: none !important;
}

.station-tooltip-content {
	padding: 0 !important;
	pointer-events: none;
}

.station-tooltip .maplibregl-popup-tip {
	pointer-events: none !important;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05));
	border-color: transparent !important;
	border-width: 8px !important;
}

.station-tooltip.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.station-tooltip.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.station-tooltip.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
	border-top-width: 0 !important;
	border-right-width: 8px !important;
	border-bottom-width: 8px !important;
	border-left-width: 8px !important;
	border-bottom-color: #f1f5f9 !important;
}

.station-tooltip.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.station-tooltip.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.station-tooltip.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
	border-top-width: 8px !important;
	border-right-width: 8px !important;
	border-bottom-width: 0 !important;
	border-left-width: 8px !important;
	border-top-color: #ffffff !important;
}

.station-tooltip.maplibregl-popup-anchor-left .maplibregl-popup-tip {
	border-top-width: 8px !important;
	border-right-width: 8px !important;
	border-bottom-width: 8px !important;
	border-left-width: 0 !important;
	border-right-color: #ffffff !important;
}

.station-tooltip.maplibregl-popup-anchor-right .maplibregl-popup-tip {
	border-top-width: 8px !important;
	border-right-width: 0 !important;
	border-bottom-width: 8px !important;
	border-left-width: 8px !important;
	border-left-color: #ffffff !important;
}

/* Apply pointer-events: none to the main popup container and content */
.maplibregl-popup.station-tooltip,
.maplibregl-popup.station-tooltip .maplibregl-popup-content {
	pointer-events: none !important;
	z-index: 0;
}

/* Station name and badges container */
.station-tooltip-header {
	position: relative !important;
	background-color: #f1f5f9 !important;
	padding: 7px 12px !important;
	border-bottom: 1px solid #e2e8f0 !important;
	margin-bottom: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 3px !important;
}

.station-tooltip-title-row {
	display: block !important;
	min-width: 0 !important;
	padding-right: 50px !important;
}

.station-tooltip-title-row .station-tooltip-name {
	padding-right: 0 !important;
}

.station-tooltip-name {
	font-weight: 700 !important;
	font-size: 0.9rem !important;
	color: #0f172a !important;
	line-height: 1.2 !important;
	letter-spacing: -0.01em !important;
	margin: 0 !important;
	overflow-wrap: anywhere !important;
}

.station-tooltip-name-link {
	color: inherit !important;
	text-decoration: none !important;
	pointer-events: auto !important;
	cursor: pointer !important;
	border-radius: 4px !important;
}

.station-tooltip-name-link:hover {
	color: #1d4ed8 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px !important;
}

.station-tooltip-name-link:focus-visible {
	outline: 2px solid #2563eb !important;
	outline-offset: 2px !important;
}

/* Network and premium badges */
.station-tooltip-badges {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Base badge styles for consistent layout */
.station-badge {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	height: 18px !important;
	padding: 0 6px !important;
	border-radius: 9999px !important;
	font-size: 0.6rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
	line-height: 1 !important;
	white-space: nowrap !important;
	border: none !important;
	text-align: center !important;
	box-sizing: border-box !important;
	max-width: 100% !important;
}

.station-badge svg {
	display: block !important;
	margin-right: 0 !important;
	width: 11px !important;
	height: 11px !important;
}

/* Network badge - light theme */
.network-badge {
	min-width: 0 !important;
	max-width: min(100%, 180px) !important;
	color: #475569 !important;
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	overflow: hidden !important;
	vertical-align: top !important;
}

.station-badge-label {
	display: block !important;
	min-width: 0 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	line-height: 1 !important;
}

.station-id-badge {
	color: #64748b !important;
	background-color: transparent !important;
	border: 1px solid transparent !important;
	font-weight: 500 !important;
	letter-spacing: 0.03em !important;
	padding-inline: 2px !important;
}

.station-tooltip-photo-count {
	display: inline-flex !important;
	position: absolute !important;
	top: 7px !important;
	right: 12px !important;
	align-items: center !important;
	gap: 4px !important;
	color: #5f6368 !important;
	background-color: #f1f3f4 !important;
	border: 1px solid #e8eaed !important;
	border-radius: 9999px !important;
	padding: 2px 6px !important;
	font-size: 0.68rem !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	letter-spacing: 0.01em !important;
}

.station-tooltip-photo-count .tooltip-icon.lucide-image {
	width: 11px !important;
	height: 11px !important;
	margin-top: 0 !important;
	color: #5f6368 !important;
	fill: none !important;
	stroke-width: 2px !important;
}

.station-tooltip-photo-count-value {
	color: inherit !important;
	font-variant-numeric: tabular-nums !important;
}

/* Premium/Verified badge - golden theme */
.premium-badge {
	color: #ffffff !important;
	background: linear-gradient(
		90deg,
		rgba(217, 119, 6, 0.98) 0%,
		rgba(245, 158, 11, 0.98) 58%,
		rgba(234, 179, 8, 0.98) 100%
	) !important;
	box-shadow: 0 10px 24px -18px rgba(180, 83, 9, 0.85) !important;
	border: 1px solid rgba(250, 204, 21, 0.38) !important;
	align-items: center !important;
	justify-content: center !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18) !important;
}

.premium-badge svg {
	width: 12px !important;
	height: 12px !important;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)) !important;
}

/* Detail sections with better spacing */
.station-tooltip-details {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	padding: 9px 12px 10px !important;
	border-top: none !important;
}

.tooltip-detail-row {
	display: flex !important;
	align-items: flex-start !important;
	gap: 6px !important;
	font-size: 0.75rem !important;
	color: #475569 !important;
	line-height: 1.3 !important;
	font-weight: 500 !important;
	min-height: 14px;
}

.tooltip-detail-row + .tooltip-detail-row {
	margin-top: 0 !important;
}

.tooltip-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 13px !important;
	height: 13px !important;
	margin-top: 1px !important;
	opacity: 1 !important;
	stroke-width: 2px !important;
}

/* Specific icon color overrides - Clean & Google-like design */
.tooltip-icon.lucide-star {
	color: #e37400 !important;
	fill: #e37400 !important;
	fill-opacity: 1 !important;
}

.tooltip-icon.lucide-zap {
	color: #1a73e8 !important;
	fill: none !important;
}

.tooltip-icon.lucide-map-pin {
	color: #70757a !important;
}

.tooltip-icon.lucide-plug {
	color: #1a73e8 !important;
}

.tooltip-icon path {
	stroke-width: 2;
}

.tooltip-icon.lucide-users {
	color: #70757a !important;
}

.tooltip-capacity-values {
	display: flex !important;
	min-width: 0 !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	column-gap: 4px !important;
	row-gap: 1px !important;
}

.tooltip-capacity-item {
	white-space: nowrap !important;
}

.tooltip-capacity-number {
	color: inherit !important;
}

.tooltip-power-values {
	display: flex !important;
	min-width: 0 !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	column-gap: 4px !important;
	row-gap: 1px !important;
}

.tooltip-power-item {
	white-space: nowrap !important;
}

.tooltip-power-label {
	color: inherit !important;
}

.tooltip-power-value {
	color: inherit !important;
}

.tooltip-icon.lucide-image {
	color: #70757a !important;
}

.tooltip-icon.lucide-dollar,
.tooltip-icon.lucide-dollar-sign {
	color: #1e8e3e !important;
}

/* Responsive tooltip styles */
@media screen and (max-width: 640px) {
	.station-tooltip .maplibregl-popup-content {
		max-width: 220px !important;
		min-width: 180px !important;
	}

	.station-tooltip-content {
		padding: 0 !important;
	}

	.station-tooltip-header,
	.station-tooltip-details {
		padding: 8px 12px !important;
	}

	.station-tooltip-name {
		font-size: 0.85rem !important;
	}

	.network-badge {
		font-size: 0.55rem !important;
		padding: 2px 5px !important;
	}

	.tooltip-detail-row {
		font-size: 0.7rem !important;
		gap: 5px !important;
	}
}

@media screen and (max-width: 480px) {
	.station-tooltip .maplibregl-popup-content {
		max-width: 200px !important;
		min-width: 150px !important;
	}

	.station-tooltip-content {
		padding: 0 !important;
	}

	.station-tooltip-header,
	.station-tooltip-details {
		padding: 8px 10px !important;
	}

	.station-tooltip-header {
		margin-bottom: 0 !important;
	}

	.station-tooltip-name {
		font-size: 0.8rem !important;
	}

	.station-tooltip-badges {
		gap: 3px !important;
	}

	.network-badge {
		font-size: 0.5rem !important;
		padding: 2px 4px !important;
	}

	.tooltip-detail-row {
		font-size: 0.65rem !important;
		gap: 4px !important;
	}

	.station-badge {
		font-size: 0.55rem !important;
		padding: 2px 4px !important;
	}
}

/* Footer CTA (Call to Action) */
.station-tooltip-footer {
	padding: 8px 12px !important;
	background-color: #f8fafc !important;
	/* Slate 50 */
	border-top: 1px solid #e2e8f0 !important;
	color: #2563eb !important;
	/* Blue 600 */
	font-size: 0.75rem !important;
	font-weight: 600 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	/* Ensure it rounds the bottom corners of the card */
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
	transition:
		background-color 0.2s ease,
		color 0.2s ease !important;
}

.station-tooltip-footer svg {
	width: 14px !important;
	height: 14px !important;
	transition: transform 0.2s ease !important;
}

/* Since the whole card is a link, handle the hover effect on the footer */
a:hover .station-tooltip-footer {
	background-color: #eff6ff !important;
	/* Blue 50 */
	color: #1d4ed8 !important;
	/* Blue 700 */
}

a:hover .station-tooltip-footer svg {
	transform: translateX(3px) !important;
	/* Slide arrow slightly */
}

/* Use the base dynamic max-height for filter panel in maps as well */
/* (No override here so it inherits calc(100vh - 170px)) */

/* Modern Popup Styles for Mapa.jsx */
.station-popup-modern .maplibregl-popup-content {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
}

.station-popup-modern .maplibregl-popup-tip {
	display: none !important;
}

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

@media screen and (min-width: 640px) {
	.maplibregl-ctrl-geocoder {
		min-width: 280px !important;
		max-width: 360px !important;
	}

	.maplibregl-ctrl.mapa-filters-component-wrapper {
		min-width: 280px !important;
		max-width: 360px !important;
	}
}

/* -------------------------------------------------------------------------- */
/*                                Close Button                                */
/* -------------------------------------------------------------------------- */

.station-tooltip .maplibregl-popup-close-button {
	font-size: 20px !important;
	line-height: 1 !important;
	color: #94a3b8 !important;
	/* Slate 400 */
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	right: 6px !important;
	top: 6px !important;
	border-radius: 50% !important;
	background: transparent !important;
	border: none !important;
	z-index: 20 !important;
	/* Ensure it is above the link */
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.2s ease !important;
}

.station-tooltip .maplibregl-popup-close-button:hover {
	background-color: #e2e8f0 !important;
	/* Slate 200 */
	color: #0f172a !important;
	/* Slate 900 */
}

.station-tooltip .maplibregl-popup-close-button:focus {
	outline: none !important;
}

/* Add some padding-right to the name so it doesn't hit the X button */
.station-tooltip-name {
	padding-right: 18px !important;
}

/* Ensure the pointer events work for the X button despite parent link */
.station-tooltip .maplibregl-popup-content {
	pointer-events: auto !important;
}

/* -------------------------------------------------------------------------- */
/*                  Desktop: add breathing room from the header               */
/* -------------------------------------------------------------------------- */

.planner-map-instance {
	--planner-map-control-top-offset: 8px;
}

.planner-map-instance .maplibregl-ctrl-top-left,
.planner-map-instance .maplibregl-ctrl-top-right {
	box-sizing: border-box !important;
	padding-top: var(--planner-map-control-top-offset) !important;
}

@media screen and (min-width: 768px) {
	.planner-map-instance {
		--planner-map-control-top-offset: 4px;
	}

	/* “Ir para…” (geocoder) */
	.maplibregl-ctrl-geocoder {
		margin-top: 15px !important;
	}

	/* Keep filters aligned with geocoder vertically */
	.maplibregl-ctrl.mapa-filters-component-wrapper {
		margin-top: 10px !important;
	}

	/* “Planejar Viagem” */
	.maplibregl-ctrl-route-planner {
		margin-top: 5px !important;
	}
}

@media screen and (max-width: 639px) {
	.maplibregl-ctrl-geocoder,
	.maplibregl-ctrl.mapa-filters-component-wrapper {
		min-width: 150px !important;
		max-width: min(250px, calc(100vw - 150px)) !important;
		overflow: visible !important;
		/* Allow dropdown to extend beyond wrapper */
	}

	/* Make the expanded filter dropdown panel wider on mobile */
	.maplibregl-ctrl.mapa-filters-component-wrapper .power-filter-form {
		max-width: min(300px, calc(100vw - 120px)) !important;
		width: min(300px, calc(100vw - 120px)) !important;
		margin-left: 0 !important;
		/* Align to left edge of wrapper */
	}

	.maplibregl-ctrl.maplibregl-ctrl-zoom {
		display: none !important;
	}

	/* Keep map control buttons at a reliable touch target. */
	.maplibregl-ctrl-geocoder--input,
	.power-filter-header,
	.maplibregl-ctrl-route-planner {
		height: 40px !important;
	}

	.maplibregl-ctrl-group > button {
		width: 44px !important;
		height: 44px !important;
	}

	.maplibregl-ctrl-route-planner .route-planner-v3-badge {
		min-width: 24px !important;
		height: 16px !important;
		padding: 0 5px !important;
		font-size: 8px !important;
		top: -3px !important;
		right: -7px !important;
	}

	.maplibregl-ctrl-geocoder--input {
		padding-left: 36px !important;
	}

	.maplibregl-ctrl-geocoder--icon-search {
		left: 10px !important;
	}
}

/* Scoped styles for embed map containers only */
.embed-map-container .maplibregl-popup {
	pointer-events: auto !important;
}

/* Ensure the content inside is interactive */
.embed-map-container .maplibregl-popup-content,
.embed-map-container .station-tooltip {
	pointer-events: auto !important;
}

/* Ensure the close button is on top and clickable */
.embed-map-container .maplibregl-popup-close-button {
	pointer-events: auto !important;
	z-index: 999;
	cursor: pointer;
}

/* OVERRIDE: Allow interactions with the tooltip */
.embed-map-container .maplibregl-popup.station-tooltip,
.embed-map-container
	.maplibregl-popup.station-tooltip
	.maplibregl-popup-content {
	pointer-events: auto !important;
	z-index: 50 !important;
	/* Ensure it sits above markers */
}

/* Ensure the link inside is clickable */
.embed-map-container .station-tooltip-content {
	pointer-events: auto !important;
}

/* Ensure Close Button works */
.embed-map-container .station-tooltip .maplibregl-popup-close-button {
	pointer-events: auto !important;
	cursor: pointer !important;
}

/* Update Footer Hover to work on the element itself */
.embed-map-container a.station-tooltip-footer:hover {
	background-color: #eff6ff !important;
	/* Blue 50 */
	color: #1d4ed8 !important;
	/* Blue 700 */
}

.embed-map-container a.station-tooltip-footer:hover svg {
	transform: translateX(3px) !important;
}

/* Ensure the main content doesn't show a pointer cursor anymore */
.embed-map-container .station-tooltip-content {
	cursor: default !important;
}

.embed-map-container .station-tooltip-title-row {
	padding-right: 72px !important;
}

.embed-map-container .station-tooltip-photo-count {
	right: 38px !important;
}

/* Ensure the footer DOES show a pointer */
.embed-map-container .station-tooltip-footer {
	cursor: pointer !important;
}