.eu-map {
  --eu-fill: #9b9b9b;
  --eu-fill-hover: #7f7f7f;
  --eu-pin: #ff4bd8;
  width: 100%;
}

.eu-map__wrap {
  position: relative;
  width: 100%;
  height: var(--eu-height, 420px);
	height:calc(100% - 50px);
  background: transparent;
}

.eu-map__wrap svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Force override: SVG heeft vaak inline fill="" */
.eu-map__wrap svg path {
  fill: var(--eu-fill) !important;
  transition: fill .18s ease;
  cursor: pointer;
}

.eu-map__wrap svg path:hover,
.eu-map__wrap svg path.is-hover {
  fill: var(--eu-fill-hover) !important;
}

/* Pins overlay */
.eu-map__pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Pin always visible */
.eu-pin {
  position: absolute;
  width: var(--pin-size, 14px);
  height: var(--pin-size, 14px);
  border-radius: 999px;
  background: var(--eu-pin);
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Pulse ring (only on hover) */
.eu-pin::after {
  content: "";
  position: absolute;
  inset: calc(var(--pin-size, 14px) * -0.75);
  border-radius: 999px;
  border: 2px solid var(--eu-pin);
  opacity: 0;
  transform: scale(.6);
}

.eu-pin.is-pulsing::after {
  opacity: .9;
  animation: euPulse 1.2s ease-out infinite;
}

@keyframes euPulse {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(1.6); opacity: 0; }
}


/* Modal */
.eu-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999;
}

.eu-modal.is-open { display: block; }

.eu-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.eu-modal__panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(520px, calc(100vw - 40px));
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px 0 10px 10px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.eu-modal__media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.eu-modal__body {
  padding: 16px 18px 18px;
}

.eu-modal__title {
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 8px;
}

.eu-modal__meta {
  font-size: 14px;
  opacity: .8;
  margin: 0 0 14px;
}

.eu-modal__cta {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  text-decoration: none;
}

.eu-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.9);
  cursor: pointer;
  font-size: 18px;
  line-height: 36px;
}

/* Pins: default (oranje/whatever je nu gebruikt) */
.eu-pin { background: var(--eu-pin); }
.eu-pin::after { border-color: var(--eu-pin); }

/* Pins: geen vestiging -> groen */
.eu-pin.is-no-office {
  background: #22c55e; /* groen */
}
.eu-pin.is-no-office::after {
  border-color: #22c55e;
}

.eu-modal__empty {
  margin: 0 0 10px;
  font-size: 14px;
  opacity: .85;
}

.eu-modal__join {
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 700;
}

.eu-modal__cta--primary {
  display: inline-flex;
  justify-content: center;
  padding: 13px 29px;
  border-radius: 10px 0 10px 10px;
  background: #e88b1c;
  color: #fff;
  text-decoration: none;
}

.eu-modal__cta--primary:hover{background:#b97118;color:#fff;}
.eu-modal__cta--primary:after{
content: "\f061";    font-family: "Font Awesome 5 Free";
    font-weight: 900; color:#fff;
}