.idhlm{
  --idhlm-accent:#3160F6;
  --idhlm-pill-bg:#FFFFFF;
  --idhlm-pill-color:#0B0D1F;
  --idhlm-dot:14px;
  --idhlm-scale:1;
  --idhlm-gap:calc(26px * var(--idhlm-scale));
  --idhlm-gap-v:calc(10px * var(--idhlm-scale));

  position:relative;
  display:block;
  width:100%;
  margin-inline:auto;
  line-height:0;
}

.idhlm__map{
  display:block;
  width:100%;
  height:auto;
}

/* Markøren ER prikken — så x/y rammer præcis det punkt du sætter. */
.idhlm__marker{
  position:absolute;
  width:var(--idhlm-dot);
  height:var(--idhlm-dot);
  transform:translate(-50%,-50%);
  line-height:normal;
  z-index:2;
}

.idhlm__dot{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:#fff;
  border:calc(var(--idhlm-dot) * 0.22) solid var(--idhlm-accent);
  box-sizing:border-box;
}

.idhlm__dot--pulse::before{
  content:"";
  position:absolute;
  inset:calc(var(--idhlm-dot) * -0.3);
  border-radius:50%;
  background:var(--idhlm-accent);
  opacity:.28;
  animation:idhlm-pulse 2.4s ease-out infinite;
}
@keyframes idhlm-pulse{
  0%{transform:scale(.6);opacity:.4}
  70%,100%{transform:scale(1.8);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .idhlm__dot--pulse::before{animation:none;opacity:.2}
}

.idhlm__pill{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:calc(8px * var(--idhlm-scale));
  padding:calc(6px * var(--idhlm-scale)) calc(14px * var(--idhlm-scale))
          calc(6px * var(--idhlm-scale)) calc(7px * var(--idhlm-scale));
  border-radius:999px;
  background:var(--idhlm-pill-bg);
  color:var(--idhlm-pill-color);
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(11,13,31,.16);
}

.idhlm__label{
  font-size:calc(14px * var(--idhlm-scale));
  font-weight:600;
  line-height:1.2;
  color:inherit;
}

.idhlm__flag{
  flex:none;
  width:calc(20px * var(--idhlm-scale));
  height:calc(20px * var(--idhlm-scale));
  border-radius:50%;
  object-fit:cover;
  display:block;
}

/* ---------- hvor pillen sidder ---------- */
.idhlm__marker--left .idhlm__pill{
  right:calc(100% + var(--idhlm-gap));
  top:50%;
  transform:translateY(-50%);
}
.idhlm__marker--right .idhlm__pill{
  left:calc(100% + var(--idhlm-gap));
  top:50%;
  transform:translateY(-50%);
}
.idhlm__marker--above .idhlm__pill{
  left:50%;
  bottom:calc(100% + var(--idhlm-gap-v));
  transform:translateX(-50%);
}

/* ---------- forbindelseslinje ---------- */
.idhlm--line .idhlm__marker--left::after,
.idhlm--line .idhlm__marker--right::after{
  content:"";
  position:absolute;
  top:50%;
  margin-top:-1px;
  width:var(--idhlm-gap);
  height:2px;
  background:var(--idhlm-accent);
}
.idhlm--line .idhlm__marker--left::after{right:100%}
.idhlm--line .idhlm__marker--right::after{left:100%}

.idhlm--line .idhlm__marker--above::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;
  margin-left:-1px;
  width:2px;
  height:var(--idhlm-gap-v);
  background:var(--idhlm-accent);
}

@media (max-width:767px){
  .idhlm{--idhlm-scale:.7;--idhlm-dot:11px}
}

@media (max-width:767px){
  .idhlm--compact .idhlm__pill{display:none}
  .idhlm--compact .idhlm__marker::after{display:none}
}