.map {
    width: 100%;
    height: 450px;
    background: var(--grey--grey90, #F7F7F7);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
}
.map-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--azure--azure50, #006BE2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}
.map-badge {
    padding: 2px;
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    background: var(--azure--azure50, #006BE2);
    border-radius: 16px;
    font-size: 11px;
    cursor: pointer;
    position: absolute;
    top: -8px;
    left: 0;
    transform: translate(-50%, -100%);
}
.map-badge::after {
    content: "";
    position: absolute;
    top: 97%;       /* сразу под бейджем */
    left: 50%;
    transform: translateX(-50%);
    width: 20px;   /* ширина ножки */
    height: 8px;  /* высота ножки */
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8' fill='none'><path d='M9.5 7.5C8.46282 3.38142 4.75676 0.452257 0 0H20C15.2432 0.452257 11.5372 3.38142 10.5 7.5C10.5 7.5 10.4141 8 10 8C9.58594 8 9.5 7.5 9.5 7.5Z' fill='%23006BE2'/></svg>") no-repeat center / contain;
}
.badge-left {
    display: flex;
    align-items: center;
    background: var(--white--white100, #FFFFFF);
    color: var(--azure--azure50, #006BE2);
    padding: 2px 7px;
    height: 20px;
    border-radius: 10px;
}
.badge-left span {
    line-height: 20px;
}

/* правая часть */
.badge-right {
    color: var(--white--white100, #FFFFFF);
    white-space: nowrap;
    padding: 4px;
}
.map-badge:has(.badge-left) .badge-right {
    padding: 0 4px 0 0; /* любой нужный отступ */
}
.map-badge.main {
    background: var(--violet--violet40, #B319A1);
}
.map-badge.main::after{
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8' fill='none'><path d='M9.5 7.5C8.46282 3.38142 4.75676 0.452257 0 0H20C15.2432 0.452257 11.5372 3.38142 10.5 7.5C10.5 7.5 10.4141 8 10 8C9.58594 8 9.5 7.5 9.5 7.5Z' fill='%23B319A1'/></svg>") no-repeat center / contain;
}