/*
 * Anan Map Style - one marker language across every map on the site.
 *
 * The area guide maps already draw a bronze teardrop with a Font Awesome glyph
 * in it. The property maps drew a small white rectangle with 13px Roboto in it.
 * This brings the second in line with the first, and fixes a popup that the
 * theme renders with no background at all.
 */

/* ------------------------------------------------- area guide popups --- */

/*
 * main.css does this, unscoped:
 *
 *   .leaflet-popup-content-wrapper, .leaflet-popup-tip {
 *       background: transparent !important;
 *       box-shadow:  none        !important;
 *   }
 *
 * It is there because the theme's own property popups carry a fully styled
 * infobox inside them and would otherwise sit on a second white card. But the
 * area guide maps use plain Leaflet popups, which have nothing of their own -
 * so their content was landing directly on the map with no ground behind it.
 *
 * Restored for the area guide maps only, and with !important because that is
 * what it is competing against.
 */
.anan-map .leaflet-popup-content-wrapper {
	background: #ffffff !important;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.22 ) !important;
	border-radius: 10px !important;
	color: #252a2c;
}

.anan-map .leaflet-popup-tip {
	background: #ffffff !important;
	box-shadow: none !important;
}

.anan-map .leaflet-popup-content {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: #252a2c;
	margin: 12px 16px;
}

.anan-map .leaflet-popup-content strong,
.anan-map .leaflet-popup-content b {
	color: #252a2c;
	font-weight: 600;
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-map .leaflet-popup-content-wrapper,
html[data-anan-theme="dark"]:not(.anan-invert) .anan-map .leaflet-popup-tip {
	background: #2a2620 !important;
	color: #ece7dd;
}

html[data-anan-theme="dark"]:not(.anan-invert) .anan-map .leaflet-popup-content,
html[data-anan-theme="dark"]:not(.anan-invert) .anan-map .leaflet-popup-content strong,
html[data-anan-theme="dark"]:not(.anan-invert) .anan-map .leaflet-popup-content b {
	color: #ece7dd;
}

/* ---------------------------------------------- property map markers --- */

/*
 * The marker keeps the theme's markup - control.js and the map scripts own it -
 * and is redrawn here as an icon plus a price, in the area guide's palette.
 * The glyph is injected by map-style.js as a real <i> element rather than a CSS
 * content string, so it uses exactly the same Font Awesome classes the area
 * guide pins use and cannot drift from them.
 */
.wpestate_marker.openstreet_price_marker,
.wpestate_marker.bvbbv {
	align-items: center;
	background-color: #ffffff;
	border-radius: 999px;
	box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.32 );
	color: #252a2c;
	display: inline-flex;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	gap: 7px;
	padding: 4px 12px 4px 4px;
	white-space: nowrap;
}

/* The glyph, in the same bronze disc the area guide uses. */
.wpestate_marker .anan-mappin__icon {
	align-items: center;
	background: #9a7748;
	border-radius: 50%;
	color: #ffffff;
	display: inline-flex;
	flex: 0 0 auto;
	height: 24px;
	justify-content: center;
	width: 24px;
}

.wpestate_marker .anan-mappin__icon i {
	font-size: 12px;
	line-height: 1;
}

/* The price. Was 13px Roboto 500; the brief was simply that it is too small. */
.wpestate_marker .interior_pin_price,
.wpestate_marker span {
	color: inherit;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* The theme draws the little pointer with a border triangle; it has to follow
   the new pill colour, and move to the new bottom edge. */
.wpestate_marker.openstreet_price_marker::before {
	border-top-color: #ffffff;
}

/* Hover and the open state both go bronze, matching the area guide's hover. */
.wpestate_marker.openstreet_price_marker:hover,
.openstreet_price_marker_on_click_parent .wpestate_marker {
	background-color: #9a7748 !important;
	color: #ffffff !important;
}

.wpestate_marker.openstreet_price_marker:hover .interior_pin_price,
.wpestate_marker.openstreet_price_marker:hover span,
.openstreet_price_marker_on_click_parent .wpestate_marker span {
	color: #ffffff !important;
}

.wpestate_marker.openstreet_price_marker:hover::before {
	border-top-color: #9a7748 !important;
}

/* On hover the disc inverts so the glyph stays visible against the bronze. */
.wpestate_marker.openstreet_price_marker:hover .anan-mappin__icon {
	background: #ffffff;
	color: #9a7748;
}

/* Clusters: the theme's default is a flat blue circle. Bronze, to match. */
.marker-cluster div,
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
	background-color: #9a7748 !important;
	color: #ffffff !important;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}

.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
	background-color: rgba( 154, 119, 72, 0.35 ) !important;
}