/**
 * MLS Genie™ — shared listing map controls
 *
 * The Map / Satellite / Draw strip and the pin legend, shared by Live MLS
 * Search and the Client Alert builder (MLSG_Listing_Map, mlsg-listing-map.js).
 * Moved here unchanged from mls-scout.css so both maps use one set of rules.
 *
 * The strip's sizes, type and greys are Google's own control values on
 * purpose, so it matches the zoom and fullscreen buttons beside it.
 *
 * @package MLS_Genie
 * @since   2.1.758
 */

.sc-map-legend{flex-shrink:0;display:flex;align-items:center;gap:4px;font-size:0.75em;color:var(--mlsg-text-muted, #64748b);padding:6px 14px;flex-wrap:wrap;}

/* ── Draw toolbar ────────────────────────────────────────────────── */
/* ── Map controls ──────────────────────────────────────────────────────────
   Map, Satellite and Draw as one strip, added through the map's own controls
   API. Google's built-in map-type control is switched off in mls-scout-map.js
   because these three have to share a strip, and its markup is not ours to
   append to.

   Sizing, type and shadow are Google's own values, so the strip is
   indistinguishable from the zoom and fullscreen controls beside it. */

.sc-draw-toolbar {
	display: none;
	margin: 10px;
	border-radius: 2px;
	background: #fff;
	box-shadow: rgba( 0, 0, 0, 0.3 ) 0 1px 4px -1px;
}

.sc-draw-toolbar--mounted {
	display: flex;
	align-items: stretch;
	/* The menu positions against this strip. */
	position: relative;
}

/* Shared shape for every button in the strip. */
.sc-maptype-btn,
.sc-draw-trigger {
	height: 40px;
	padding: 0 17px;
	min-width: 36px;
	border: 0;
	background: none;
	color: #565656;
	font-family: Roboto, Arial, sans-serif;
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}

.sc-maptype-btn:hover,
.sc-draw-trigger:hover:not(:disabled) {
	background: #ebebeb;
}

/* The selected map type reads as black; the others sit back. */
.sc-maptype-btn--active {
	color: #000;
}

/* A hairline between buttons, none before the first. */
.sc-maptype-btn + .sc-maptype-btn,
.sc-draw-trigger {
	border-left: 1px solid #e6e6e6;
}

.sc-draw-toolbar > :first-child {
	border-radius: 2px 0 0 2px;
}

.sc-draw-toolbar > :last-child {
	border-radius: 0 2px 2px 0;
}

.sc-draw-trigger {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #000;
}

.sc-draw-trigger:disabled {
	color: #b8b8b8;
	cursor: default;
}

/* While a tool is armed the button names it. */
.sc-draw-trigger--active {
	background: var(--mlsg-teal, #107dbd);
	color: #fff;
}

.sc-draw-trigger__caret {
	font-size: 13px;
	opacity: .7;
}

/* The menu hangs below the strip, aligned to the Draw button. */
.sc-draw-menu {
	display: none;
	position: absolute;
	top: 42px;
	right: 0;
	min-width: 190px;
	background: #fff;
	border-radius: 2px;
	box-shadow: rgba( 0, 0, 0, 0.3 ) 0 1px 4px -1px;
	padding: 6px 0;
	z-index: 2;
}

.sc-draw-menu--open {
	display: block;
}

.sc-draw-item {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	height: 40px;
	padding: 0 17px;
	border: 0;
	background: none;
	color: #000;
	font-family: Roboto, Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	text-align: left;
	cursor: pointer;
}

.sc-draw-item:hover:not(:disabled) {
	background: #ebebeb;
}

.sc-draw-item--active {
	font-weight: 500;
	background: #f0f0f0;
}

.sc-draw-item--clear {
	color: #5f6368;
}

.sc-draw-item:disabled {
	color: #b8b8b8;
	cursor: default;
}

.sc-draw-menu__sep {
	height: 1px;
	background: #e0e0e0;
	margin: 6px 0;
}

.sc-map-dot{display:inline-block;width:10px;height:10px;border-radius:50%;border:1.5px solid var(--mlsg-white, #fff);box-shadow:0 0 0 1px rgba(0,0,0,.15);}

/* Legend swatch colour varies per status, so it arrives as a property. */
.sc-map-dot {
	background: var( --sc-dot-color, var(--mlsg-text-muted) );
}

/* GeoGenie flag in the legend. */
.sc-legend-flag {
	color: var(--mlsg-purple);
	font-size: 0.75em;
	line-height: 1;
}

.sc-legend-flag-label {
	color: var(--mlsg-purple);
}

/* Map type as a dropdown (render_toolbar 'maptype' => 'menu'): the first
   control in the strip, its menu hanging from its own left edge. */
.sc-maptype-wrap {
	position: relative;
	display: flex;
}
.sc-draw-trigger.sc-maptype-trigger {
	border-left: 0;
	color: #000;
}
.sc-maptype-menu {
	left: 0;
	right: auto;
	min-width: 160px;
}
.sc-maptype-menu .sc-maptype-btn {
	border-left: 0;
}
.sc-maptype-menu .sc-maptype-btn--active {
	font-weight: 500;
}