/* =====================================================
   LEAFLET MARKER CLUSTER — MASTER STABLE VERSION
   ===================================================== */

/* =========================
   OUTER LEAFLET ICON
   (DO NOT BREAK THIS)
   ========================= */

.leaflet-marker-icon.marker-cluster {
	background: transparent !important;
	border: none !important;

	/* Leaflet controls positioning here */
}

/* =========================
   CORE CLUSTER WRAPPER
   ========================= */

.marker-cluster {
	width: 40px;
	height: 40px;

	position: relative;

	background-clip: padding-box;
}

/* =========================
   INNER VISUAL CIRCLE
   ========================= */

.marker-cluster > div {
	width: 100%;
	height: 100%;

	border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	margin: 0 !important;

	font: 600 12px var(--font-family-sans-serif);
	line-height: 1;

	color: var(--dark);

	/* smooth + professional */
	box-shadow:
			0 2px 6px rgba(0,0,0,0.18),
			inset 0 1px 2px rgba(255,255,255,0.25),
			inset 0 -1px 2px rgba(0,0,0,0.12);

	transition: transform 0.15s ease, filter 0.15s ease;
}

/* =========================
   TEXT FIX
   ========================= */

.marker-cluster span {
	display: block;
	line-height: 1;
}

/* =====================================================
   SIZE SYSTEM (controlled ONLY here)
   ===================================================== */

.marker-cluster-small {
	width: 36px;
	height: 36px;
}

.marker-cluster-medium {
	width: 44px;
	height: 44px;
}

.marker-cluster-large {
	width: 52px;
	height: 52px;
}

/* ensure inner always fills outer */
.marker-cluster-small > div,
.marker-cluster-medium > div,
.marker-cluster-large > div {
	width: 100%;
	height: 100%;
}

/* =====================================================
   COLORS (FROM YOUR ROOT THEME)
   ===================================================== */

/* SMALL → success */
.marker-cluster-small > div {
	background: var(--success);
}

/* MEDIUM → warning */
.marker-cluster-medium > div {
	background: var(--warning);
}

/* LARGE → danger */
.marker-cluster-large > div {
	background: var(--danger);
}

/* =====================================================
   INTERACTION (SAFE + CLEAN)
   ===================================================== */

.marker-cluster:hover > div {
	transform: scale(1.06);
	filter: brightness(1.05);
}

.marker-cluster:active > div {
	transform: scale(0.96);
}

/* =====================================================
   DARK MODE SUPPORT
   ===================================================== */

@media (prefers-color-scheme: dark) {
	.marker-cluster > div {
		color: var(--white);
		box-shadow:
				0 2px 6px rgba(0,0,0,0.35),
				inset 0 1px 2px rgba(255,255,255,0.12),
				inset 0 -1px 2px rgba(0,0,0,0.35);
	}
}



/* =========================
   INNER CIRCLE (ALL SIZES)
   ========================= */

.marker-cluster-small > div,
.marker-cluster-medium > div,
.marker-cluster-large > div {
	background: var(--success); /* default, overridden below */

	border-radius: 50%;

	/* FIX: proper centering */
	display: flex;
	align-items: center;
	justify-content: center;

	text-align: center;

	width: 100%;
	height: 100%;
}

/* =========================
   SIZE COLORS (theme driven)
   ========================= */

.marker-cluster-small > div {
	background: var(--success);
}

.marker-cluster-medium > div {
	background: var(--warning);
}

.marker-cluster-large > div {
	background: var(--danger);
}

/* =========================
   TEXT FIX (optional safety)
   ========================= */

.marker-cluster span {
	display: block;
	line-height: 1;
}

.marker-cluster span {
	font-weight: 600;
	font-size: 12px;
}