/* ============================================================
   AskPerTask map markers — shared by the live /map/ page and the
   Map Manager editor (MAP-FINAL-CLOSURE-1A).

   Canonical visual reference: docs/design/askpertask-map-marker-reference-v1.html
   Dimensions, gradients, selected ring/halo, small-icon, current-location
   and cluster styling below are ported 1:1 from that file. Category colours
   come from the PHP registry (APT_Map_Marker_Registry) as --apt-mk-* custom
   properties on each element — never hard-coded here.
   ============================================================ */

.apt-mk-pin,
.apt-mk-icon,
.apt-mk-loc,
.apt-mk-cluster {
	box-sizing: border-box;
}

/* ── Map pin (default 54×66, selected 64×78) ─────────────── */
.apt-mk-leaflet {
	background: transparent;
	border: 0;
}

.apt-mk-pin {
	--apt-mk-base:  #1479F8;
	--apt-mk-light: #39A1FF;
	--apt-mk-dark:  #0B57D0;
	width: 54px;
	height: 66px;
	position: relative;
	filter: drop-shadow( 0 8px 9px rgba( 18, 39, 70, 0.20 ) );
}

.apt-mk-pin svg {
	width: 100%;
	height: 100%;
	display: block;
	max-width: none;
	overflow: visible;
}

.apt-mk-pin .apt-mk-pin__glyph {
	fill: #fff;
}

.apt-mk-pin--selected {
	width: 64px;
	height: 78px;
	filter:
		drop-shadow( 0 0 0 rgba( 0, 0, 0, 0 ) )
		drop-shadow( 0 10px 12px rgba( 18, 39, 70, 0.22 ) );
}

.apt-mk-pin--selected::before {
	content: "";
	position: absolute;
	inset: -5px;
	border: 4px solid #fff;
	border-radius: 44% 44% 48% 48% / 35% 35% 60% 60%;
	filter: drop-shadow( 0 0 0 transparent );
	opacity: 0.98;
	pointer-events: none;
}

.apt-mk-pin--selected::after {
	content: "";
	position: absolute;
	inset: -11px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.08 );
	background: color-mix( in srgb, var( --apt-mk-base ) 18%, transparent );
	z-index: -1;
	filter: blur( 1px );
}

/* Paid Map Boost placement marker — neutral "Featured" dot only; the pin
   silhouette itself stays exactly the reference shape. */
.apt-mk-pin__badge {
	position: absolute;
	top: -3px;
	right: -3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #F5A623;
	border: 2px solid #fff;
	color: #fff;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
	box-shadow: 0 2px 5px rgba( 18, 39, 70, 0.25 );
}

/* FEATURED-MAP-1A: a genuinely Featured pin reads differently without relying on colour alone — a gold outline
   around the same pin shape, a larger star badge (shape cue) and a soft gold glow; it also sits above ordinary pins
   (zIndexOffset) and is never folded into a cluster. */
.apt-mk-pin--featured svg > path { stroke: #F5A623; stroke-width: 3.5px; paint-order: stroke; }
.apt-mk-pin--featured svg { filter: drop-shadow( 0 0 5px rgba( 245, 166, 35, 0.8 ) ); }
.apt-mk-pin--featured .apt-mk-pin__badge {
	top: -7px;
	right: -7px;
	width: 24px;
	height: 24px;
	background: #FFC94A;
	color: #5A3B00;
	font-size: 14px;
	line-height: 20px;
	box-shadow: 0 0 0 2px #F5A623, 0 2px 6px rgba( 18, 39, 70, 0.3 );
}

/* ── Category pins + title labels (MAP-FIRST-MOBILE-1A) ──────
   The fill/glyph come from the public category (--apt-mk-*), the thin ring
   from the object family (--apt-mk-family), so a Request about the garden and
   a Service about the garden share a colour but never a family. */
.apt-mk-pin--pcat svg > .apt-mk-pin__body {
	stroke: var( --apt-mk-family, #fff );
	stroke-width: 2.5px;
	paint-order: stroke;
}
.apt-mk-pin--compact {
	filter: drop-shadow( 0 5px 6px rgba( 18, 39, 70, 0.22 ) );
}
.apt-mk-pin--compact .apt-mk-pin__badge {
	top: -4px;
	right: -5px;
}

/* A short real title beside the pin head. Shown only where it does not
   collide (apt-map.js toggles .apt-mk-leaflet--label-off on the icon). */
.apt-mk-pin__label {
	position: absolute;
	top: 38%;
	left: calc( 100% - 2px );
	max-width: 132px;
	padding: 3px 8px 3px 7px;
	transform: translateY( -50% );
	border-left: 3px solid var( --apt-mk-family, var( --apt-mk-base ) );
	border-radius: 0 999px 999px 0;
	background: rgba( 255, 255, 255, 0.97 );
	box-shadow: 0 2px 6px rgba( 18, 39, 70, 0.18 );
	color: #0F172A;
	font: 700 12px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: auto;
}
.apt-mk-pin--selected .apt-mk-pin__label {
	max-width: 168px;
	font-size: 13px;
	background: #0F172A;
	color: #fff;
	border-left-color: var( --apt-mk-base );
}
.apt-mk-pin--featured .apt-mk-pin__label {
	border-left-color: #F5A623;
}
.apt-mk-leaflet--label-off .apt-mk-pin__label {
	visibility: hidden;
}

/* ── Small circular category icon (default 50×50) ────────── */
.apt-mk-icon {
	--apt-mk-base:  #1479F8;
	--apt-mk-light: #39A1FF;
	--apt-mk-dark:  #0B57D0;
	--apt-mk-icon-size: 50px;
	width: var( --apt-mk-icon-size );
	height: var( --apt-mk-icon-size );
	border-radius: 50%;
	display: inline-grid;
	place-items: center;
	flex-shrink: 0;
	background: linear-gradient( 145deg, var( --apt-mk-light ), var( --apt-mk-base ) 52%, var( --apt-mk-dark ) );
	box-shadow: 0 calc( var( --apt-mk-icon-size ) * 0.12 ) calc( var( --apt-mk-icon-size ) * 0.28 ) rgba( 18, 39, 70, 0.16 );
}

.apt-mk-icon svg {
	width: 54%;
	height: 54%;
	fill: #fff;
	display: block;
	max-width: none;
}

.apt-mk-icon.is-muted {
	--apt-mk-base:  #9CA3AF;
	--apt-mk-light: #B4BAC4;
	--apt-mk-dark:  #7C8592;
	box-shadow: none;
}

/* ── Current location (user position) ────────────────────── */
/* MAP-FIRST-MOBILE-1A: blue device dot + soft halo (registry CURRENT_LOCATION). */
.apt-mk-loc {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	position: relative;
	pointer-events: none;
}

.apt-mk-loc::before {
	content: "";
	position: absolute;
	inset: 1px;
	border-radius: 50%;
	background: rgba( 26, 115, 232, 0.18 );
	animation: apt-mk-pulse 2.4s ease-out infinite;
}

.apt-mk-loc::after {
	content: "";
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #1A73E8;
	border: 3px solid #fff;
	box-shadow: 0 1px 6px rgba( 26, 115, 232, 0.45 ), 0 0 0 1px rgba( 15, 23, 42, 0.08 );
	position: relative;
}

@keyframes apt-mk-pulse {
	0%        { transform: scale( 0.65 ); opacity: 0.75; }
	75%, 100% { transform: scale( 1.2 );  opacity: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.apt-mk-loc::before { animation: none; opacity: 0.6; }
}

/* ── Cluster / count shell (3–9 / 10–99 / 100+) ──────────── */
.apt-mk-cluster {
	display: grid;
	place-items: center;
	border-radius: 50%;
	font-weight: 800;
	color: #fff;
	/* Reference neutral slate by default; a marker type's --apt-mk-* colours
	   (set inline on the badge) tint it so a cluster keeps its category identity. */
	background: linear-gradient( 145deg, var( --apt-mk-light, #8EA0B2 ), var( --apt-mk-base, #708399 ) 55%, var( --apt-mk-dark, #526477 ) );
	border: 4px solid #fff;
	cursor: pointer;
	box-shadow: 0 5px 14px rgba( 18, 39, 70, 0.20 );
}
.apt-mk-cluster { position: relative; }
.apt-mk-cluster__dots {
	position: absolute;
	left: 50%;
	bottom: -7px;
	display: flex;
	gap: 2px;
	padding: 2px 3px;
	transform: translateX( -50% );
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba( 18, 39, 70, 0.2 );
}
.apt-mk-cluster__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
}
.apt-mk-cluster--sm { width: 46px; height: 46px; font-size: 15px; }
.apt-mk-cluster--md { width: 58px; height: 58px; font-size: 17px; }
.apt-mk-cluster--lg { width: 72px; height: 72px; font-size: 20px; }