/* MxM v4.1.0 — Community Pulse world-map widget.
 *
 * Loaded site-wide via container.phtml (not inline in the partial) so the
 * styles remain available across SPA-style ajax navigation even when the
 * partial isn't rendered. The card lives in:
 *   themes/wondertag/layout/sidebar/mxm-community-pulse.phtml
 * and is included by sidebar/content.phtml and home/before-posts.phtml.
 */

/* Self-contained dark dashboard panel — same look in day and night modes
   so the brand-blue silhouette reads consistently. */
.mxm-member-map-card {
	padding: 0 !important;
	overflow: hidden;
	background: linear-gradient(180deg, #0e1130 0%, #06091e 100%) !important;
	border: 1px solid rgba(47, 56, 255, 0.22) !important;
	box-shadow:
		0 8px 26px rgba(0, 0, 0, 0.22),
		0 0 0 1px rgba(47, 56, 255, 0.08) inset !important;
}
/* Day-mode override — vendor light styles bleed text color/shadow onto
   children; lock our internal text + background. */
body:not(.dark) .mxm-member-map-card {
	background: linear-gradient(180deg, #0e1130 0%, #06091e 100%) !important;
	color: #c8d0ff !important;
}
body:not(.dark) .mxm-member-map-title { color: #c8d0ff !important; }
body:not(.dark) .mxm-member-map-header {
	background: linear-gradient(90deg, rgba(47, 56, 255, 0.18) 0%, rgba(10, 12, 32, 0) 70%) !important;
}
.mxm-member-map-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 14px 9px;
	background: linear-gradient(90deg, rgba(47, 56, 255, 0.12) 0%, rgba(10, 12, 32, 0) 70%);
	border-bottom: 1px solid rgba(47, 56, 255, 0.18);
}
.mxm-member-map-globe {
	color: #6b7cff;
	filter: drop-shadow(0 0 4px rgba(47, 56, 255, 0.55));
	animation: mxm-globe-spin 24s linear infinite;
	transform-origin: 50% 50%;
	flex: 0 0 auto;
}
.mxm-member-map-title {
	font: 800 11px/1 'Carrois Gothic', 'Helvetica Neue', sans-serif;
	letter-spacing: 0.22em;
	color: #c8d0ff;
	text-shadow: 0 0 8px rgba(47, 56, 255, 0.55);
}
.mxm-member-map-approx {
	display: inline-block;
	margin-left: 4px;
	font-weight: 600;
	letter-spacing: 0.18em;
	color: rgba(200, 208, 255, 0.45);
	text-shadow: none;
}
@keyframes mxm-globe-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.mxm-member-map-globe { animation: none !important; }
}
.mxm-member-map {
	position: relative;
	width: 100%;
	aspect-ratio: 950 / 620;
	background:
		repeating-linear-gradient(0deg,  rgba(107, 124, 255, 0.045) 0 1px, transparent 1px 12.5%),
		repeating-linear-gradient(90deg, rgba(107, 124, 255, 0.045) 0 1px, transparent 1px 8.33%),
		radial-gradient(ellipse at 50% 55%, rgba(47, 56, 255, 0.18) 0%, rgba(10, 12, 32, 0) 65%),
		linear-gradient(180deg, rgba(15, 17, 40, 0.40) 0%, rgba(10, 12, 32, 0.78) 100%);
}
.mxm-member-map-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter:
		brightness(0)
		invert(0.42) sepia(1) hue-rotate(218deg) saturate(2.1) brightness(0.85)
		contrast(1.05);
	opacity: 0.38;
	mix-blend-mode: screen;
	pointer-events: none;
}
.mxm-member-map-dots { position: absolute; inset: 0; pointer-events: none; }
.mxm-member-map-dot {
	position: absolute;
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	background: #c8d0ff;
	box-shadow:
		0 0 0 1px rgba(47, 56, 255, 0.45),
		0 0 5px 1px rgba(47, 56, 255, 0.85),
		0 0 10px 2px rgba(107, 124, 255, 0.55);
	animation: mxm-map-pulse 2400ms ease-in-out infinite;
}
.mxm-member-map-dot--lg { width: 6px; height: 6px; margin: -3px 0 0 -3px; }
.mxm-member-map-dot::after {
	content: '';
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	border: 1px solid rgba(47, 56, 255, 0.40);
	animation: mxm-map-ring 2400ms ease-out infinite;
}
@keyframes mxm-map-pulse {
	0%, 100% { box-shadow: 0 0 0 1px rgba(47, 56, 255, 0.45), 0 0 5px 1px rgba(47, 56, 255, 0.85), 0 0 10px 2px rgba(107, 124, 255, 0.55); }
	50%      { box-shadow: 0 0 0 1px rgba(47, 56, 255, 0.65), 0 0 9px 2px rgba(47, 56, 255, 1),    0 0 18px 5px rgba(107, 124, 255, 0.75); }
}
@keyframes mxm-map-ring {
	0%   { transform: scale(0.5); opacity: 0.85; }
	100% { transform: scale(3.2); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mxm-member-map-dot, .mxm-member-map-dot::after { animation: none !important; }
}

/* Mobile-only wrapper used in home/before-posts.phtml. Hidden on desktop
   (where the sidebar already carries the card). Adds breathing room above
   AND below so it doesn't crowd the Global Feed header that follows. */
.mxm-pulse-mobile-only { display: block; margin: 14px 0 28px; }
@media (min-width: 992px) { .mxm-pulse-mobile-only { display: none !important; } }