.country-map-container {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: #F5F6F7;
  cursor: pointer;
  z-index: 15;
}

.map-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}

.country-map {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
  transform-origin: center center;
  max-width: 100%;
  background-color: white;
}

.country-map svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

.country-map:hover {
  transform: none;
}

.country-map .region {
  transition: transform 0.2s ease, opacity 0.2s ease, stroke 0.2s ease;
  transform-origin: center center;
  fill: currentColor;
  color: #F5F6F7;
}

@media (max-width: 768px) {
  .country-map-container { padding: 10px 0; max-width: 100vw; }
  .map-wrapper { overflow: hidden; display: flex; justify-content: center; }
  .country-map { min-width: 0; width: 100%; max-width: 100%; transform-origin: center center; }

  .country-map:hover {
    transform: none;
  }
}

.country-map .country:not(.region),
.country-map .country:not(.region) * {
  fill: currentColor;
  transition: fill 150ms ease, opacity 150ms ease, stroke 150ms ease;
  cursor: pointer;
}

.country-map .region.no-data { color: #ffffff; pointer-events: none; cursor: default; }
.country-map .region.office-region { color: #CEE9F5; }
.country-map .region.partner-region { color: #D9F8EA; }

.country-map.nl .region.office-region,
.country-map.nl .region.office-region * { fill: url(#nlOfficeGradient) !important; opacity: 0.5;}
.country-map.nl .region.partner-region,
.country-map.nl .region.partner-region * { fill: url(#nlPartnerGradient) !important; opacity: 0.5;}

.country-map.nl .region.active.office-region,
.country-map.nl .region.active.office-region * { fill: url(#nlOfficeGradient) !important; }
.country-map.nl .region.active.partner-region,
.country-map.nl .region.active.partner-region * { fill: url(#nlPartnerGradient) !important; }

.country-map .hovered {
  opacity: 0.8;
  stroke: #0085d2;
  stroke-width: 1.5;
}

.country-map .active {
  stroke: #1d4ed8;
  stroke-width: 2;
  opacity: 1;
  fill: #b3e5fc !important;
}

.country-map-marker {
  position: absolute;
  transform: translate(-50%, -50%) scale(4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 15;
  display: none;
  will-change: transform, opacity;
}

.country-map-marker.visible {
  opacity: 1;
  display: block;
}

.country-map-marker svg { display: block; }

.country-map-marker.static { z-index: 10; transform: translate(-50%, -50%) scale(3); }

@media (max-width: 768px) {
  .country-map-marker { transform: translate(-50%, -50%) scale(2); }
  .country-map-marker.static { transform: translate(-50%, -50%) scale(1.5); }

  .country-map-marker > div {
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 0 3px rgba(0, 171, 236, 0.3) !important;
  }
}

.country-map-container .map-marker {
  position: absolute;
  transform: translate(-50%, -50%) scale(3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 15;
  display: none;
}

.country-map-container .map-marker.visible {
  opacity: 1;
  display: block;
}

.country-map-container .map-marker > div {
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: #00ABEC !important;
  box-shadow: 0 0 0 6px rgba(0, 171, 236, 0.3) !important;
  border: 2px solid #ffffff !important;
  position: relative;
}

.location-card { position: absolute; transform: translate(-50%, 8px); color: #111; border-radius: 6px; box-shadow: none; padding: 10px 14px; min-width: 140px; display: none; text-align: center; z-index: 13; overflow: visible;
  border: 2px solid transparent;
  border-top-color: #00abec;
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to bottom, #00abec, #0085d2);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
}
.location-card.active { display: block; }
.location-card.hidden { display: none !important; }
.location-card-title { font-weight: 600; font-size: 16px; }

.location-card-arrow { position: absolute; top: 0; left: 0; transform: translate(-50%, -100%); width: 20px; height: 12px; display: none; pointer-events: none; z-index: 14; }
.location-card-arrow.active { display: block; }
.location-card-arrow { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #0a9fea; position: absolute; transform: translate(-50%, -100%); }

.location-card.theme-blue { background: var(--card-bg); color: var(--card-fg); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 16px; border: 3px solid var(--card-bg); min-width: 280px; }
.location-card-grid { display: grid; gap: 16px; align-items: start; }
.manager-card { max-width: 250px; display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: start; }
.manager-card.single { max-width: 450px; grid-template-columns: 200px 1fr; --name-size: 22px; --role-size: 16px; --meta-size: 16px; }
.manager-card.multi { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr; gap: 10px; }
.manager-card.multi .manager-image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 0%; display: block; }
.manager-card.multi .manager-text { gap: 6px; text-align: left; }
.manager-image { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.manager-text { display: flex; flex-direction: column; gap: 8px; }
.manager-card.single .manager-text { gap: 10px; text-align: left;}
.manager-name { font-weight: 700; text-transform: uppercase; font-size: var(--name-size); letter-spacing: var(--name-spacing); line-height: 1.2; }
.manager-card.single .manager-name { letter-spacing: 0.8px; }
.manager-role { opacity: 0.95; font-size: var(--role-size); }
.manager-email, .manager-phone { opacity: 0.95; font-size: var(--meta-size); }
.manager-linkedin { display: inline-block; background: #ffffff; color: var(--card-bg); border-radius: 50%; width: 24px; height: 24px; line-height: 24px; text-align: center; font-weight: 700; }

@media (max-width: 768px) {
  .location-card-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .location-card-grid.cols-3,
  .location-card-grid.cols-2 { grid-template-columns: 1fr !important; }
  .manager-card,
  .manager-card.single,
  .manager-card.multi { grid-template-columns: 120px 1fr; text-align: left; grid-template-rows: none; align-items: start; gap: 12px; }
  .manager-card .manager-image { width: 120px; height: 120px; object-fit: cover; object-position: 50% 0%; }
  .location-card.theme-blue { padding: 12px; }
  .manager-name { font-size: 16px; letter-spacing: 0.4px; }
  .manager-role, .manager-email, .manager-phone { font-size: 14px; }
}
.location-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.location-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
:root {
  --card-bg: #0A9FEA;
  --card-fg: #ffffff;
  --card-radius: 0px;
  --card-shadow: 0 12px 24px rgba(0,0,0,0.12);
  --name-size: 18px;
  --role-size: 15px;
  --meta-size: 15px;
  --name-spacing: 0.5px;
}