/**
 * Shared "pin" chrome — geometry for map hotspots and timeline markers.
 *
 * A consumer adds .dd-pin to its wrapper and .dd-pin-anchor / .dd-pin-bubble /
 * .dd-pin-stick to the inner elements, and keeps its own classes for behaviour
 * (actions, colours, icons, sublabels, entry animation). The wrapper's position
 * is the planted point; the bubble is centered on it via translate(-50%,-50%),
 * so a left-top-origin scale reads as centered and stays anchored when zoomed.
 */

.dd-pin {
    position: absolute;
}

.dd-pin-anchor {
    position: absolute;
    display: block;
    top: -100%;
    transform-origin: left top;
    scale: var(--dd-counter-scale, 1); /* counter the zoomable surface's scale */
}
.dd-pin.stick-top .dd-pin-anchor,
.dd-reverse-stick .dd-pin-anchor {
    top: 100%;
}
.dd-pin.no-stick .dd-pin-anchor {
    top: 0;
}

.dd-pin-bubble {
    --dd-hotspot-font-factor: 0.45;
    --dd-hotspot-font-size: calc(var(--dd-hotspot-font-factor) * var(--dd-hotspot-height, 36px));
    min-height: var(--dd-hotspot-height); /*VAR*/ /* min- so marker text can wrap to multiple lines */
    font-size: var(--dd-hotspot-font-size, 16px);
    position: absolute;
    transform: translate(-50%, -50%);
    background: var(--dd-hotspot-background-color);
    border-radius: var(--dd-hotspot-radius-text);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dd-hotspot-text-color);
    padding: 0 1em;
    gap: 0.5em;
}

@media screen and (max-width: 767px) {
    .dd-pin-bubble {
        --dd-hotspot-font-factor: 0.7;
    }
}

.dd-pin-stick {
    display: block;
    background: var(--dd-hotspot-background-color);
    width: 2px;
    translate: -50% -100%;
    scale: var(--dd-counter-scale, 1) 1; /* counter X only — stick keeps relative height */
}
.dd-pin.stick-top .dd-pin-stick,
.dd-reverse-stick .dd-pin-stick {
    translate: -50% 0%;
}
.dd-pin.no-stick .dd-pin-stick {
    display: none;
}

/* Entry animation — bouncy scale + fade. Scoped to each consumer's active
   container so a standalone pin (no active toggle) stays visible. */
.dd-hotspots-container .dd-pin-anchor,
.dd-timeline-marker .dd-pin-anchor {
    opacity: 0;
    transform: scale(0.7);
    transition:
        opacity var(--dd-bouncy-fade-time) var(--dd-animation-easing),
        transform var(--dd-bouncy-fade-time) var(--dd-bouncy-fade-easing);
}
.dd-hotspots-container.dd-active .dd-pin-anchor,
.dd-timeline-marker.dd-active .dd-pin-anchor {
    opacity: 1;
    transform: scale(1);
}

.dd-hotspots-container .dd-pin-stick,
.dd-timeline-marker .dd-pin-stick {
    transform: scaleY(0);
    transform-origin: bottom center;
    transition: transform var(--dd-bouncy-fade-time) var(--dd-animation-easing);
    transition-delay: var(--dd-bouncy-fade-stick-delay);
}
.dd-hotspots-container.dd-active .dd-pin-stick,
.dd-timeline-marker.dd-active .dd-pin-stick {
    transform: scaleY(1);
}
.dd-hotspots-container .dd-pin.stick-top .dd-pin-stick,
.dd-hotspots-container .dd-reverse-stick .dd-pin-stick,
.dd-timeline-marker.stick-top .dd-pin-stick {
    transform-origin: top center;
}