/* Native overlay coordinates: the SDK keeps the layer aligned during zooming. */
.bike-bubble-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 10;
    overflow: visible;
    pointer-events: none;
    --bubble-surface: rgba(255, 255, 252, .96);
    --bubble-ink: #25382f;
    --bubble-muted: #65776c;
    --bubble-track: #e0e9e2;
    --bubble-green: #32a673;
    --bubble-border: rgba(255, 255, 255, .95);
}
.bike-bubble-anchor { position: absolute; top: 0; left: 0; }
.bike-bubble, .bike-dot {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    font-family: inherit;
    transform-origin: center;
    will-change: opacity;
    transition: box-shadow 160ms ease;
}
.bike-bubble {
    width: var(--bubble-size);
    height: var(--bubble-size);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border-radius: 50%;
    border: 1px solid var(--bubble-border);
    background: var(--bubble-surface);
    color: var(--bubble-ink);
    box-shadow: 0 3px 9px rgba(28, 54, 38, .13), 0 9px 24px rgba(28, 54, 38, .09);
    transition: box-shadow 160ms ease;
}
.bike-bubble-ring {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: conic-gradient(var(--bubble-green) var(--available-angle), var(--bubble-track) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    pointer-events: none;
}
.bike-bubble-count {
    font-size: 21px;
    font-weight: 750;
    line-height: 1.05;
    letter-spacing: -.7px;
    font-variant-numeric: tabular-nums;
}
.bike-bubble-label { color: var(--bubble-muted); font-size: 10px; font-weight: 600; line-height: 1.4; }
.bike-bubble.is-unavailable { --bubble-green: #92a098; }
.bike-bubble.is-unavailable .bike-bubble-count { color: var(--bubble-muted); }
.bike-dot { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; }
/* BMap injects .bmap-container button { border-radius: 0 } after page CSS. */
.bike-bubble-layer .bike-bubble,
.bike-bubble-layer .bike-dot { border-radius: 50%; }
.bike-dot img { display: block; width: 100%; height: 100%; pointer-events: none; }
.bike-bubble:focus-visible, .bike-dot:focus-visible { outline: 3px solid var(--bubble-green); outline-offset: 4px; }
.bike-bubble:active { box-shadow: 0 1px 4px rgba(28, 54, 38, .2); }
@media (hover: hover) {
    .bike-bubble:hover { box-shadow: 0 4px 12px rgba(28, 54, 38, .2), 0 12px 28px rgba(28, 54, 38, .12); }
}
@media (prefers-color-scheme: dark) {
    .bike-bubble-layer {
        --bubble-surface: rgba(34, 43, 39, .97);
        --bubble-ink: #f2f5f0;
        --bubble-muted: #b0c1b4;
        --bubble-track: #435149;
        --bubble-green: #6bd5a2;
        --bubble-border: rgba(207, 230, 215, .24);
    }
}
@media (prefers-reduced-motion: reduce) {
    .bike-bubble { transition: none; }
}