/* Google Maps version — popup wrapper + avatar marker.
   Card-internal classes (.branded-map-card__*) come from map.css. */

:root {
	--bm-pea:      #BAEAA0;
	--bm-stallion: #061D1B;
	--bm-white:    #FFFFFF;
	--bm-olive:    #6B8D0C;
	--bm-boltgun:  #3A3939;
}

/* ─── Pin marker (HTML overlay, custom OverlayView) ──────────────────
   Teardrop pin shape (SVG) with a circular attorney photo inside. */

.branded-avatar-marker,
.branded-avatar-marker * {
	cursor: pointer !important;
}

.branded-avatar-marker {
	position: absolute;
	transform: translate(-50%, -100%);
	width: 62px;
	height: 78px;
	padding: 0;
	border: 0;
	background: transparent;
	z-index: 1;
	font-family: inherit;
}

.branded-avatar-marker:focus-visible {
	outline: none;
}

/* Inner wrapper — pin + photo scale together from the tip. */
.branded-avatar-marker__inner {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transform-origin: 50% 100%;
	transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
	filter: drop-shadow(0 4px 8px rgba(6, 29, 27, 0.4));
}

.branded-avatar-marker__pin {
	display: block;
	width: 100%;
	height: 100%;
	fill: var(--bm-stallion);
	stroke: var(--bm-pea);
	stroke-width: 3;
	transition: fill 220ms ease, stroke 220ms ease;
	/* Visual only — let the parent button catch all events on its full
	   bounding rect, so the SVG's transparent corners don't leak the
	   cursor through to the map underneath. */
	pointer-events: none;
}

/* Circular photo inside the round head of the pin. */
.branded-avatar-marker__photo {
	position: absolute;
	top: 8px;
	left: 8px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--bm-stallion);
	pointer-events: none;
}

.branded-avatar-marker__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 2;
}

/* Initials fallback — behind the image, shows if image fails or is missing. */
.branded-avatar-marker__initials {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bm-pea);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.02em;
	z-index: 1;
}

/* Hover / focus — whole pin scales up from the tip. */
.branded-avatar-marker:hover .branded-avatar-marker__inner,
.branded-avatar-marker:focus-visible .branded-avatar-marker__inner {
	transform: scale(1.12);
}

.branded-avatar-marker:hover .branded-avatar-marker__pin,
.branded-avatar-marker:focus-visible .branded-avatar-marker__pin {
	stroke: var(--bm-olive);
}

/* Active (popup locked open) — sustained slightly larger + pulsing ring. */
.branded-avatar-marker.is-active {
	z-index: 3;
}

.branded-avatar-marker.is-active .branded-avatar-marker__inner {
	transform: scale(1.1);
	animation: branded-marker-pulse 2.4s ease-out infinite;
}

.branded-avatar-marker.is-active .branded-avatar-marker__pin {
	stroke: var(--bm-olive);
}

@keyframes branded-marker-pulse {
	0%   { filter: drop-shadow(0 4px 8px rgba(6, 29, 27, 0.4)) drop-shadow(0 0 0 rgba(107, 141, 12, 0.5)); }
	70%  { filter: drop-shadow(0 4px 8px rgba(6, 29, 27, 0.4)) drop-shadow(0 0 14px rgba(107, 141, 12, 0)); }
	100% { filter: drop-shadow(0 4px 8px rgba(6, 29, 27, 0.4)) drop-shadow(0 0 0 rgba(107, 141, 12, 0)); }
}

/* ─── Popup (custom OverlayView) ───────────────────────────────────── */

.branded-map-popup-google {
	position: absolute;
	width: 270px;
	max-width: calc(100vw - 32px);
	background: var(--bm-white);
	color: var(--bm-stallion);
	border-radius: 14px;
	box-shadow:
		0 24px 60px -18px rgba(6, 29, 27, 0.45),
		0 6px 18px -6px rgba(6, 29, 27, 0.15);
	padding: 16px;
	font-family: inherit;
	line-height: 1.4;
	z-index: 9999;

	/* Initial state: anchored above the pin marker, scaled down for entrance. */
	transform: translate(-50%, calc(-100% - 56px)) scale(0.85);
	transform-origin: 50% calc(100% + 88px);
	opacity: 0;
	transition:
		opacity 200ms ease,
		transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.branded-map-popup-google.is-visible {
	transform: translate(-50%, calc(-100% - 88px)) scale(1);
	opacity: 1;
}

/* Triangle tip pointing down at the marker. pointer-events:none so cursor
   passes through to the marker behind it without triggering mouseleave. */
.branded-map-popup-google::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid var(--bm-white);
	filter: drop-shadow(0 4px 6px rgba(6, 29, 27, 0.18));
	pointer-events: none;
}

.branded-map-popup-close {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--bm-boltgun);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	transition: background 160ms ease, color 160ms ease;
}

.branded-map-popup-close:hover {
	background: rgba(6, 29, 27, 0.08);
	color: var(--bm-stallion);
}

.branded-map-popup-close:focus-visible {
	outline: 2px solid var(--bm-olive);
	outline-offset: -2px;
}