.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.png);
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%;
cursor: pointer;
z-index: 10;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease; transform: translate(-50%, -50%) scale(0);
opacity: 0;
} .acf-europe-map-display .map-marker.density-low {
width: 7.5px;
height: 7.5px;
}
.acf-europe-map-display .map-marker.density-high {
width: 5.5px;
height: 5.5px;
} .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.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(2.5);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
} .acf-europe-map-display .map-marker.animate:hover {
transform: translate(-50%, -50%) scale(1.4) !important;
z-index: 20;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
} .acf-europe-map-display .map-marker.pulse {
animation: markerPulse 0.8s ease-in-out;
}
@keyframes markerPulse {
0% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
50% {
transform: translate(-50%, -50%) scale(2);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
100% {
transform: translate(-50%, -50%) scale(1);
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(1);
box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4);
}
50% {
transform: translate(-50%, -50%) scale(2);
box-shadow: 0 8px 25px rgba(239, 68, 68, 0.8);
}
100% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 3px 8px rgba(239, 68, 68, 0.4);
}
}
@keyframes markerPulseGreen {
0% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
}
50% {
transform: translate(-50%, -50%) scale(2);
box-shadow: 0 8px 25px rgba(16, 185, 129, 0.8);
}
100% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4);
}
}
@keyframes markerPulseBlue {
0% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 3px 8px rgba(59, 130, 246, 0.4);
}
50% {
transform: translate(-50%, -50%) scale(2);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.8);
}
100% {
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 3px 8px rgba(59, 130, 246, 0.4);
}
} @media (max-width: 768px) {
.acf-europe-map-display .map-marker { width: 5px !important;
height: 5px !important;
border-width: 0.25px !important; transform: translate(-50%, -50%) scale(1) !important;
opacity: 1 !important; transition: none !important;
animation: none !important;
} .acf-europe-map-display .map-marker.density-low {
width: 4.5px !important;
height: 4.5px !important;
}
.acf-europe-map-display .map-marker.density-high {
width: 3.3px !important;
height: 3.3px !important;
} .acf-europe-map-display .map-marker.animate {
animation: none !important;
}
.acf-europe-map-display .map-marker.pulse {
animation: none !important;
} .acf-europe-map-display .map-marker.animate:hover {
transform: translate(-50%, -50%) scale(1) !important;
z-index: 10 !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
} .acf-europe-map-display .map-marker::after,
.acf-europe-map-display .map-marker::before {
display: none !important;
}
} .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:hover::after,
.acf-europe-map-display .map-marker:hover::before {
opacity: 1;
} .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-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 .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 .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-container,
.acf-europe-map-display,
.acf-europe-map-display .map-container {
pointer-events: none;
z-index: 1;
}
.acf-europe-map-display .map-marker {
pointer-events: auto;
} @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: 768px) {
.acf-europe-map-container {
max-width: 600px;
}
.acf-europe-map-display {
height: 576px;
}
.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;
}
}
@media (max-width: 640px) {
.acf-europe-map-container {
max-width: 500px;
}
.acf-europe-map-display {
height: 480px;
}
}
@media (max-width: 480px) {
.acf-europe-map-container {
max-width: 320px;
}
.acf-europe-map-display {
height: 307px;
}
.acf-europe-map-display .map-legend,
.acf-europe-map-display .map-status {
position: static;
margin: 10px;
display: inline-block;
}
}