/* =========================================================================
   Interactive map — Leaflet container + custom price-pill markers (comp style).
   ========================================================================= */

.ots-map { width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #dfe7e0; z-index: 0; }
.ots-map .leaflet-container { font-family: var(--font-sans); background: #e8eee9; }

/* Price-pill marker — red pills per the comp ($62K, $88K …) */
.ots-pin-wrap, .ots-cluster-wrap { background: none; border: 0; }
.ots-pin {
	display: inline-block; transform: translate(-50%, -50%);
	background: var(--color-accent); color: #fff;
	font-size: var(--text-xs); font-weight: var(--weight-semibold);
	font-variant-numeric: tabular-nums;
	padding: 3px 9px; border-radius: var(--radius-pill);
	box-shadow: var(--shadow-md); white-space: nowrap;
	border: 2px solid #fff; cursor: pointer;
}
.leaflet-marker-icon:hover .ots-pin, .ots-pin:hover { background: var(--pin-dark); }

/* Cluster — solid red circle with white count (the comp's "12") */
.ots-cluster {
	display: grid; place-items: center; transform: translate(-50%, -50%);
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--color-accent); color: #fff; border: 3px solid #fff;
	font-size: var(--text-sm); font-weight: var(--weight-bold);
	box-shadow: var(--shadow-md);
}

/* Popup card */
.leaflet-popup-content-wrapper { border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.leaflet-popup-content { margin: var(--space-3) var(--space-4); }
.ots-pin-popup { display: grid; gap: 2px; min-width: 160px; }
.ots-pin-popup .badge { justify-self: start; margin-bottom: 2px; }
.ots-pin-popup__loc { margin-bottom: 0; }
.ots-pin-popup strong { font-size: var(--text-base); color: var(--color-text); }
.ots-pin-popup__price { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.ots-pin-popup a { font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-top: var(--space-1); }

.leaflet-container a.leaflet-popup-close-button { color: var(--color-text-muted); }