/* OSM Leaflet Enhancer — frontend visual tweaks */

/* ── Container width override (geosearch defaults to 400px on bar mode) ── */
.leaflet-control-geosearch.leaflet-geosearch-bar {
	width: auto !important;
	max-width: 360px !important;
}

/* ── Form visual styling: applied to bar mode AND to button mode WHEN active ── */
.leaflet-control-geosearch.leaflet-geosearch-bar form,
.leaflet-touch .leaflet-geosearch-bar form,
.leaflet-control-geosearch.leaflet-geosearch-button.active form {
	background: #fff !important;
	border: 1px solid #c3c4c7 !important;
	border-radius: 6px !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .12) !important;
	padding: 0 !important;
	margin: 0 !important;
	height: auto !important;
	overflow: visible !important;
	transition: border-color .15s, box-shadow .15s !important;
}

/* In bar mode, the form is always rendered as a block. */
.leaflet-control-geosearch.leaflet-geosearch-bar form,
.leaflet-touch .leaflet-geosearch-bar form {
	display: block !important;
	position: relative !important;
}

/* In button mode, the form is hidden by default (geosearch.css default), shown when .active */
.leaflet-control-geosearch.leaflet-geosearch-button form {
	display: none;
}
.leaflet-control-geosearch.leaflet-geosearch-button.active form {
	display: block !important;
}

/* Focus indicator at the CONTAINER level so it follows the rounded shape */
.leaflet-control-geosearch.leaflet-geosearch-bar form:focus-within,
.leaflet-control-geosearch.leaflet-geosearch-button.active form:focus-within {
	border-color: #2271b1 !important;
	box-shadow: 0 0 0 3px rgba(34, 113, 177, .18), 0 2px 6px rgba(0, 0, 0, .12) !important;
}

/* ── Input: hard reset, no border, no radius, no own focus outline ── */
.leaflet-control-geosearch form input,
.leaflet-control-geosearch form input.glass,
.leaflet-control-geosearch form input[type="text"] {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none !important;
	width: 100% !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 9px 40px 9px 14px !important;
	font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	color: #222 !important;
	box-sizing: border-box !important;
	text-indent: 0 !important;
}

.leaflet-control-geosearch form input:focus {
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
}

.leaflet-control-geosearch form input::placeholder {
	color: #757575 !important;
	opacity: 1 !important;
}

/* ── Reset button (the "×"): transparent, blends with form ── */
.leaflet-control-geosearch button.reset,
.leaflet-control-geosearch .reset {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 36px !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 6px 6px 0 !important;
	color: #888 !important;
	font: 600 16px/1 system-ui, sans-serif !important;
	padding: 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.leaflet-control-geosearch button.reset:hover {
	background: #f5f5f5 !important;
	color: #222 !important;
}

/* ── Results dropdown ── only visible when populated ── */
.leaflet-control-geosearch .results {
	display: none !important;
}
.leaflet-control-geosearch .results.active {
	display: block !important;
	margin: 4px 0 0 !important;
	padding: 4px 0 !important;
	background: #fff !important;
	border: 1px solid #c3c4c7 !important;
	border-radius: 6px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
	max-height: 280px !important;
	overflow-y: auto !important;
}
.leaflet-control-geosearch .results.active::after {
	display: none !important;
}
.leaflet-control-geosearch .results.active > * {
	padding: 7px 14px !important;
	margin: 0 !important;
	border: 0 !important;
	min-height: 0 !important;
	line-height: 1.4 !important;
	font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	font-weight: 400 !important;
	color: #222 !important;
	cursor: pointer !important;
	background: #fff !important;
	white-space: normal !important;
}
.leaflet-control-geosearch .results.active > *:hover,
.leaflet-control-geosearch .results.active > *.active {
	background: #f0f4f9 !important;
	border-color: transparent !important;
}

/* ── Z-index: keep our controls above JetEngine popups (jet-map-box uses z-index ~700) ── */
.leaflet-top.leaflet-right .leaflet-control-geosearch,
.leaflet-top.leaflet-left  .leaflet-control-locate {
	z-index: 800;
}

/* ── Button-style search: small magnifier icon, expands on click ── */
.leaflet-control-geosearch.leaflet-geosearch-button .leaflet-bar-part {
	background: #fff !important;
	border-radius: 4px !important;
	width: 30px !important;
	height: 30px !important;
}
.leaflet-control-geosearch.leaflet-geosearch-button.active .leaflet-bar-part {
	border-radius: 4px 0 0 4px !important;
}
/* When active in button mode, the form needs an explicit width — otherwise
   our `width: 100%` on the input becomes circular (form sizes to content,
   content sizes to form) and collapses to ~36px showing only the × button. */
.leaflet-control-geosearch.leaflet-geosearch-button.active form {
	width: 260px !important;
	max-width: calc(100vw - 90px) !important;
}
.leaflet-control-geosearch.leaflet-geosearch-button form input {
	padding: 6px 40px 6px 12px !important;
}

/* ── Locate button glyph fallback (themes without Font Awesome) ── */
.leaflet-control-locate a:not([class*="fa-"]):empty::before {
	content: "◉";
	font-size: 18px;
	line-height: 30px;
	display: block;
	text-align: center;
}