/* CPM Explorer 1.9.0: project site marker (beacon + site label).
   Shared by the front end and the builder preview. Sizes and colours arrive as custom
   properties set by CPMXStyle.siteMarkerEl() / applySiteMarkerVars(). The defaults
   reproduce the pre-1.9 marker exactly (19px pulsing dot, 72px beam, 10px label). */
.cpmx-sm{
  position:absolute;width:76px;height:calc(var(--sm-h,72px) + 22px);
  pointer-events:none;overflow:visible;z-index:30;
}
.cpmx-sm.is-admin{pointer-events:auto;cursor:grab}
.cpmx-sm.is-admin:active{cursor:grabbing}

/* Beam */
.cpmx-sm .cpmx-sm-beam{
  position:absolute;left:50%;bottom:8px;width:3px;height:var(--sm-h,72px);
  transform:translateX(-50%);
  background:linear-gradient(to top,var(--sm-color,#ff6a00),transparent);
}

/* Pulse (default): dot with a white rim and a breathing glow */
.cpmx-sm .cpmx-sm-dot{
  position:absolute;left:50%;bottom:0;box-sizing:border-box;
  width:var(--sm-size,19px);height:var(--sm-size,19px);border-radius:50%;
  background:var(--sm-color,#ff6a00);border:3px solid #fff;transform:translateX(-50%);
  box-shadow:0 0 0 calc(var(--sm-size,19px) * .47) var(--sm-ring),0 0 calc(var(--sm-size,19px) * 2.2) var(--sm-glow-90);
  animation:cpmxSmPulse var(--sm-speed,2.1s) ease-in-out infinite;
  overflow:hidden;
}
.cpmx-sm .cpmx-sm-dot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.cpmx-sm.sm-has-icon .cpmx-sm-dot{background:#fff}
@keyframes cpmxSmPulse{
  0%,100%{box-shadow:0 0 0 calc(var(--sm-size,19px) * .42) rgba(255,255,255,.10),0 0 calc(var(--sm-size,19px) * 1.37) var(--sm-glow-65)}
  50%{box-shadow:0 0 0 calc(var(--sm-size,19px) * .79) rgba(255,255,255,.03),0 0 calc(var(--sm-size,19px) * 2.37) var(--sm-glow-100)}
}

/* Solid pin: no beam, a teardrop pin whose tip sits on the site */
.cpmx-sm.sm-pin .cpmx-sm-beam{display:none}
.cpmx-sm.sm-pin .cpmx-sm-dot{
  --pin:calc(var(--sm-size,19px) * 1.7);
  width:var(--pin);height:var(--pin);bottom:calc(var(--pin) * .207);
  border-radius:50% 50% 50% 4px;transform:translateX(-50%) rotate(-45deg);
  border-width:3px;animation:none;
  box-shadow:0 0 0 0 transparent,0 6px calc(var(--sm-size,19px) * 1.4) var(--sm-glow-65);
}
.cpmx-sm.sm-pin .cpmx-sm-dot img{transform:rotate(45deg);border-radius:50%;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
.cpmx-sm.sm-pin .cpmx-sm-label{bottom:calc(var(--sm-size,19px) * 2.1 + 6px)}

/* Light column: a wide glowing shaft over a soft ground spot */
.cpmx-sm.sm-column .cpmx-sm-beam{
  width:calc(var(--sm-size,19px) * .55);bottom:calc(var(--sm-size,19px) * .15);
  background:linear-gradient(to top,var(--sm-color,#ff6a00) 0%,var(--sm-glow-65) 45%,transparent 100%);
  border-radius:999px 999px 2px 2px;
  box-shadow:0 0 calc(var(--sm-size,19px) * 1.2) var(--sm-glow-65);
  animation:cpmxSmShimmer var(--sm-speed,2.1s) ease-in-out infinite;
}
.cpmx-sm.sm-column .cpmx-sm-dot{
  width:calc(var(--sm-size,19px) * 1.6);height:calc(var(--sm-size,19px) * .55);bottom:0;
  border:0;border-radius:50%;animation:none;
  box-shadow:0 0 calc(var(--sm-size,19px) * 1.2) var(--sm-glow-90);
}
.cpmx-sm.sm-column .cpmx-sm-dot img{display:none}
@keyframes cpmxSmShimmer{0%,100%{opacity:.85}50%{opacity:1}}

/* Label */
.cpmx-sm .cpmx-sm-label{
  position:absolute;left:50%;bottom:calc(var(--sm-h,72px) + 4px);
  transform:translate(calc(-50% + var(--sm-dx,0px)),calc(var(--sm-dy,0px) - var(--sm-lift,0px)));
  padding:var(--sm-lbl-py,7px) var(--sm-lbl-px,10px);border-radius:var(--sm-lbl-radius,7px);
  background:var(--sm-lbl-bg,rgba(12,15,18,.95));color:var(--sm-lbl-fg,#fff);
  border:1px solid var(--sm-lbl-border,rgba(255,255,255,.14));
  font-family:var(--sm-lbl-font,inherit);font-size:var(--sm-lbl-size,10px);font-weight:var(--sm-lbl-weight,900);
  letter-spacing:var(--sm-lbl-ls,.12em);text-transform:var(--sm-lbl-tt,none);
  line-height:1;white-space:nowrap;text-align:center;box-sizing:border-box;
  transition:opacity .2s ease;
}
.cpmx-sm .cpmx-sm-label b{font-weight:inherit;display:block}
.cpmx-sm .cpmx-sm-label small{display:block;margin-top:4px;font-size:.82em;font-weight:600;letter-spacing:.04em;text-transform:none;opacity:.78}
.cpmx-sm.sm-shadow .cpmx-sm-label{box-shadow:0 9px 28px rgba(0,0,0,.32)}
.cpmx-sm.sm-lbl-pill .cpmx-sm-label{border-radius:999px}
.cpmx-sm.sm-lbl-none .cpmx-sm-label{background:transparent;border-color:transparent;box-shadow:none;
  text-shadow:0 0 3px var(--sm-lbl-bg,#000),0 0 6px var(--sm-lbl-bg,#000),0 1px 2px var(--sm-lbl-bg,#000)}
.cpmx-sm.sm-noborder .cpmx-sm-label{border-color:transparent}
.cpmx-sm.sm-none .cpmx-sm-label{bottom:6px}

/* Show on hover only: the label appears over the beacon or the building (is-hot). */
.cpmx-sm.sm-hover .cpmx-sm-label{opacity:0}
.cpmx-sm.sm-hover.is-hot .cpmx-sm-label,.cpmx-sm.sm-hover .cpmx-sm-dot:hover ~ .cpmx-sm-label{opacity:1}
.cpmx-sm.sm-hover .cpmx-sm-dot{pointer-events:auto}
.cpmx-sm.is-admin.sm-hover .cpmx-sm-label{opacity:.55}

/* Desktop-only / mobile-only labels (phone layout = .cpmx-compact on the explorer). */
.cpmx-explorer.cpmx-compact .cpmx-sm.sm-dev-desktop .cpmx-sm-label,
.cpmx-explorer:not(.cpmx-compact) .cpmx-sm.sm-dev-mobile .cpmx-sm-label{display:none}