:root {
	--faro-primary: #102a43;
	--faro-secondary: #243b53;
	--faro-accent: #2b6cb0;
	--faro-marker-color: #3b82f6;
	--faro-marker-glow: rgba(59, 130, 246, 0.4);
	--faro-bg: #f8fafc;
	--faro-card-bg: #ffffff;
	--faro-text: #334155;
	--faro-text-muted: #64748b;
}

.faro-map-wrapper {
	position: relative; /* Required: tooltip uses position:absolute relative to this */
	width: 100%;
	max-width: 1200px;
	margin: 2rem auto;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background: var(--faro-bg);
	border-radius: 20px;
	padding: 2rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	overflow: visible;
}

.faro-map-title {
	font-size: 2.5rem;
	color: var(--faro-primary);
	margin-bottom: 3rem;
	font-weight: 700;
	text-align: left;
}

.faro-map-svg-container {
	position: relative;
	width: 100%;
	overflow: visible;
}

#faro-map-canvas {
	position: relative;
	width: 100%;
	/* Height is set by JS to match the rendered SVG height,
	   so absolute-positioned markers use the correct reference */
}

/* SVG scales to full width, height follows its own aspect ratio automatically */
#faro-map-canvas svg {
	width: 100%;
	height: auto;
	display: block;
}

/* The actual markers */
.faro-marker {
	position: absolute;
	width: 16px;
	height: 16px;
	background: var(--faro-marker-color);
	border: 3px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	transform: translate(-50%, -50%);
	z-index: 10;
	transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.faro-marker:hover {
	transform: translate(-50%, -50%) scale(1.4);
}

.faro-marker::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--faro-marker-glow);
	transform: translate(-50%, -50%);
	animation: faro-pulse 2s infinite;
}

@keyframes faro-pulse {
	0% {
		width: 100%;
		height: 100%;
		opacity: 0.6;
	}
	100% {
		width: 250%;
		height: 250%;
		opacity: 0;
	}
}

/* Tooltip Styling — positioned absolute inside .faro-map-wrapper */
.faro-tooltip {
	position: absolute;
	background: #fff;
	border-radius: 12px;
	padding: 16px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12), 0 5px 15px rgba(0, 0, 0, 0.05);
	min-width: 180px;
	z-index: 100;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -100%) translateY(-22px);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.faro-tooltip.active {
	opacity: 1;
	transform: translate(-50%, -100%) translateY(-12px);
}

.faro-tooltip-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 8px;
}

.faro-tooltip-flag {
	width: 24px;
	height: 16px;
	object-fit: cover;
	border-radius: 2px;
}

.faro-tooltip-country {
	font-weight: 600;
	color: var(--faro-primary);
	font-size: 0.9rem;
}

.faro-tooltip-logo {
	max-width: 140px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.faro-tooltip-arrow {
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #fff;
}