/**
 * PetBoardings - OpenStreetMap replacement styles.
 *
 * Deliberately small: the Listable theme already styles .leaflet-* for the
 * listing maps. This covers the county landing page maps and the proximity
 * autocomplete, which previously had no styles of their own because Google
 * supplied both the iframe and the Places dropdown.
 */

/* ---------- County landing page maps ---------- */

.pb-map-wrap {
	margin: 0 0 1.5em;
}

.pb-map {
	width: 100%;
	height: 480px;
	max-height: 70vh;
	border-radius: 3px;
	background: #e8e6e1; /* tile-coloured, so loading looks intentional */
	z-index: 0; /* keep Leaflet panes under the theme's sticky header */
}

@media (max-width: 600px) {
	.pb-map {
		height: 320px;
	}
}

/* A CSS-only teardrop pin - avoids shipping marker images. */
.pb-map-pin {
	background: none;
	border: 0;
}

.pb-map-pin span {
	display: block;
	width: 22px;
	height: 22px;
	background: #f0533c;
	border: 2px solid #fff;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Cluster badge. Scoped class of its own so the theme's .marker-cluster
   rules - which expect Listable's own pin sprite - never apply here. */
.pb-cluster-icon {
	background: none;
	border: 0;
}

.pb-cluster {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(240, 83, 60, 0.9);
	border: 3px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
}

/* leaflet.markercluster's spiderfy/zoom animation hooks. */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}

/* ---------- Proximity autocomplete ---------- */

.facetwp-facet {
	position: relative;
}

.pb-location-results {
	position: absolute;
	z-index: 1000;
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 3px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pb-location-results.pb-hidden {
	display: none;
}

.pb-location-result {
	padding: 8px 12px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
	color: #3d3d3d;
}

.pb-location-result:hover,
.pb-location-result:focus {
	background: #f4f4f4;
}

.pb-location-empty {
	padding: 8px 12px;
	font-size: 14px;
	color: #8a8a8a;
}

/* Attribution is a licence requirement for OSM and CARTO - keep it legible. */
.leaflet-control-attribution {
	font-size: 10px;
	background: rgba(255, 255, 255, 0.8);
}