.acf-europe-map-container {
position: relative;
width: 100%;
max-width: 1000px; margin: 20px auto; overflow: visible;  }
.acf-europe-map-display {
position: relative;
width: 100%;
height: 960px;  } .acf-europe-map-display .map-container {
position: relative;
width: 100%;
height: 100%;
background-image: url(//www.smart-systems-integration.org/app/plugins/acf-europe-map/assets/images/eposs-europe-map.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
opacity: 1;
} .acf-europe-map-display .map-marker {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid white;
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
cursor: pointer;
z-index: 10;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease; --marker-scale-base: 1;
--marker-scale-hover: 1.4;
--marker-scale-pulse: 2; opacity: 0;
} .acf-europe-map-display .map-marker.density-no {
--marker-scale-base: 1;
--marker-scale-hover: 1.4; --marker-scale-pulse: 2; }
.acf-europe-map-display .map-marker.density-low {
--marker-scale-base: 0.75;
--marker-scale-hover: 1.12; --marker-scale-pulse: 1.6; }
.acf-europe-map-display .map-marker.density-high {
--marker-scale-base: 0.55;
--marker-scale-hover: 0.84; --marker-scale-pulse: 1.2; } .acf-europe-map-display .map-marker.animate:hover {
transform: translate(-50%, -50%) scale(var(--marker-scale-hover)) !important;
z-index: 20;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
} .acf-europe-map-display .map-marker.shape-square {
border-radius: 0;
} .acf-europe-map-display .map-marker.color-red {
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4);
}
.acf-europe-map-display .map-marker.color-green {
background: linear-gradient(135deg, #10b981, #059669);
box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
}
.acf-europe-map-display .map-marker.color-blue {
background: linear-gradient(135deg, #3b82f6, #2563eb);
box-shadow: 0 3px 8px rgba(59, 130, 246, 0.4);
}
.acf-europe-map-display .map-marker.color-purple {
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
box-shadow: 0 3px 8px rgba(139, 92, 246, 0.4);
}
.acf-europe-map-display .map-marker.color-yellow {
background: linear-gradient(135deg, #eab308, #ca8a04);
box-shadow: 0 3px 8px rgba(234, 179, 8, 0.4);
}
.acf-europe-map-display .map-marker.color-orange {
background: linear-gradient(135deg, #f97316, #ea580c);
box-shadow: 0 3px 8px rgba(249, 115, 22, 0.4);
}
.acf-europe-map-display .map-marker.color-pink {
background: linear-gradient(135deg, #ec4899, #db2777);
box-shadow: 0 3px 8px rgba(236, 72, 153, 0.4);
}
.acf-europe-map-display .map-marker.color-teal {
background: linear-gradient(135deg, #02B7BA, #236465);
box-shadow: 0 0 5px rgba(20, 184, 166, 0.4);
} .acf-europe-map-display .map-marker.color-red:hover {
box-shadow: 0 6px 15px rgba(239, 68, 68, 0.6);
}
.acf-europe-map-display .map-marker.color-green:hover {
box-shadow: 0 6px 15px rgba(16, 185, 129, 0.6);
}
.acf-europe-map-display .map-marker.color-blue:hover {
box-shadow: 0 6px 15px rgba(59, 130, 246, 0.6);
}
.acf-europe-map-display .map-marker.color-purple:hover {
box-shadow: 0 6px 15px rgba(139, 92, 246, 0.6);
}
.acf-europe-map-display .map-marker.color-yellow:hover {
box-shadow: 0 6px 15px rgba(234, 179, 8, 0.6);
}
.acf-europe-map-display .map-marker.color-orange:hover {
box-shadow: 0 6px 15px rgba(249, 115, 22, 0.6);
}
.acf-europe-map-display .map-marker.color-pink:hover {
box-shadow: 0 6px 15px rgba(236, 72, 153, 0.6);
}
.acf-europe-map-display .map-marker.color-teal:hover {
box-shadow: 0 6px 15px rgba(20, 184, 166, 0.6);
} .acf-europe-map-display .map-marker.animate {
animation: markerAppear 0.8s ease-out forwards;
}
@keyframes markerAppear {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
30% {
opacity: 1;
}
60% {
transform: translate(-50%, -50%) scale(calc(var(--marker-scale-base) * 2.5));
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
opacity: 1;
}
} .acf-europe-map-display .map-marker.pulse {
animation: markerPulse 0.8s ease-in-out;
}
@keyframes markerPulse {
0% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
50% {
transform: translate(-50%, -50%) scale(var(--marker-scale-pulse));
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
100% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
} .acf-europe-map-display .map-marker.color-red.pulse {
animation: markerPulseRed 0.8s ease-in-out;
}
.acf-europe-map-display .map-marker.color-green.pulse {
animation: markerPulseGreen 0.8s ease-in-out;
}
.acf-europe-map-display .map-marker.color-blue.pulse {
animation: markerPulseBlue 0.8s ease-in-out;
}
@keyframes markerPulseRed {
0% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4);
}
50% {
transform: translate(-50%, -50%) scale(var(--marker-scale-pulse));
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.8);
}
100% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4);
}
}
@keyframes markerPulseGreen {
0% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
}
50% {
transform: translate(-50%, -50%) scale(var(--marker-scale-pulse));
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.8);
}
100% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
}
}
@keyframes markerPulseBlue {
0% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
box-shadow: 0 3px 8px rgba(59, 130, 246, 0.4);
}
50% {
transform: translate(-50%, -50%) scale(var(--marker-scale-pulse));
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.8);
}
100% {
transform: translate(-50%, -50%) scale(var(--marker-scale-base));
box-shadow: 0 3px 8px rgba(59, 130, 246, 0.4);
}
} .acf-europe-map-display .map-legend {
position: absolute;
bottom: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
font-size: 14px;
line-height: 1.4;
}
.acf-europe-map-display .legend-item {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.acf-europe-map-display .legend-item:last-child {
margin-bottom: 0;
}
.acf-europe-map-display .legend-marker {
width: 14px;
height: 14px;
border: 2px solid white;
border-radius: 50%;
flex-shrink: 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.acf-europe-map-display .legend-marker.red {
background: linear-gradient(135deg, #ef4444, #dc2626);
}
.acf-europe-map-display .legend-marker.green {
background: linear-gradient(135deg, #10b981, #059669);
} .acf-europe-map-display .map-status {
position: absolute;
bottom: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
font-size: 14px;
}
.acf-europe-map-display .member-count {
font-size: 24px;
font-weight: bold;
color: #0073aa;
margin-bottom: 4px;
}
.acf-europe-map-display .status-text {
color: #666;
font-size: 12px;
} .acf-europe-map-display .animation-status {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 10px 15px;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 12px;
font-weight: 500;
color: #666;
}
.acf-europe-map-display .animation-status.building {
color: #f59e0b;
background: rgba(251, 191, 36, 0.1);
}
.acf-europe-map-display .animation-status.pulsing {
color: #10b981;
background: rgba(16, 185, 129, 0.1);
}  .acf-europe-map-display .map-marker::after {
content: attr(data-tooltip);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.9);
color: white;
padding: 6px 10px;
border-radius: 4px;
font-size: 10px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000;  text-align: center;
}
.acf-europe-map-display .map-marker::before {
content: '';
position: absolute;
bottom: 105%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: rgba(0, 0, 0, 0.9);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
z-index: 1000; } .acf-europe-map-display .map-marker.tooltip-left::after {
left: 0;
transform: translateX(0);
}
.acf-europe-map-display .map-marker.tooltip-left::before {
left: 20px;
transform: translateX(0);
} .acf-europe-map-display .map-marker.tooltip-right::after {
left: auto;
right: 0;
transform: translateX(0);
}
.acf-europe-map-display .map-marker.tooltip-right::before {
left: auto;
right: 20px;
transform: translateX(0);
} .acf-europe-map-display .map-marker.tooltip-below::after {
bottom: auto;
top: 120%;
}
.acf-europe-map-display .map-marker.tooltip-below::before {
bottom: auto;
top: 105%;
border-top-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.9);
} .acf-europe-map-display .map-marker.tooltip-below.tooltip-left::after {
top: 120%;
left: 0;
transform: translateX(0);
}
.acf-europe-map-display .map-marker.tooltip-below.tooltip-left::before {
top: 105%;
left: 20px;
transform: translateX(0);
border-top-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.9);
}
.acf-europe-map-display .map-marker.tooltip-below.tooltip-right::after {
top: 120%;
left: auto;
right: 0;
transform: translateX(0);
}
.acf-europe-map-display .map-marker.tooltip-below.tooltip-right::before {
top: 105%;
left: auto;
right: 20px;
transform: translateX(0);
border-top-color: transparent;
border-bottom-color: rgba(0, 0, 0, 0.9);
} .acf-europe-map-display .map-marker:hover::after,
.acf-europe-map-display .map-marker:hover::before {
opacity: 1;
} @media (max-width: 1200px) {
.acf-europe-map-container {
max-width: 900px;
}
.acf-europe-map-display {
height: 864px; }
}
@media (max-width: 992px) {
.acf-europe-map-container {
max-width: 800px;
}
.acf-europe-map-display {
height: 768px; }
}
@media (max-width: 850px) {
.acf-europe-map-container {
max-width: 700px;
}
.acf-europe-map-display {
height: 672px; }
}
@media (max-width: 768px) {
.acf-europe-map-display .map-legend,
.acf-europe-map-display .map-status,
.acf-europe-map-display .animation-status {
padding: 8px 10px;
font-size: 12px;
}
.acf-europe-map-display .member-count {
font-size: 18px;
}
.acf-europe-map-display .map-marker {
width: 10px;
height: 10px;
}
.acf-europe-map-container {
max-width: 600px;
}
.acf-europe-map-display {
height: 576px; } .acf-europe-map-display .map-marker::after {
font-size: 11px;
padding: 4px 8px; }
}
@media (max-width: 640px) {
.acf-europe-map-container {
max-width: 500px;
}
.acf-europe-map-display {
height: 480px; }
}
@media (max-width: 540px) {
.acf-europe-map-container {
max-width: 400px;
}
.acf-europe-map-display {
height: 384px; }
}
@media (max-width: 480px) {
.acf-europe-map-display .map-legend,
.acf-europe-map-display .map-status {
position: static;
margin: 10px;
display: inline-block;
}
.acf-europe-map-container {
max-width: 320px;
}
.acf-europe-map-display {
height: 307px; }
.acf-europe-map-display .map-marker {
width: 8px;
height: 8px;
} .acf-europe-map-display .map-marker::after {
font-size: 10px;
padding: 3px 6px;
transform: translateX(-50%) scale(1);  }
} .acf-europe-map-display .map-marker::after {
transform: translateX(-50%) scale(1); } .acf-europe-map-display .map-marker.density-high::after {
transform: translateX(-50%) scale(1.67); } .acf-europe-map-display .map-marker.density-low::after {
transform: translateX(-50%) scale(1.25); }
@media (max-width: 768px) { .acf-europe-map-display .map-marker::after,
.acf-europe-map-display .map-marker::before {
display: none !important;
}
}
@media (max-width: 480px) { .acf-europe-map-display .map-marker::after,
.acf-europe-map-display .map-marker::before {
display: none !important;
}
}