html,
body {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background: transparent;
}

* {
    box-sizing: border-box;
}

.vg-map-embed {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 360px;
    overflow: hidden;
    border-radius: inherit;
    background: #eef4ea;
    font-family: Arial, Helvetica, sans-serif;
}

.vg-map-embed__canvas {
    width: 100%;
    height: 100%;
    min-height: 360px;
}

.vg-map-embed__gesture-lock {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    border: 0;
    padding: 24px;
    background: rgba(15, 23, 42, 0.08);
    color: #f8fafc;
    cursor: pointer;
    touch-action: pan-y;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.vg-map-embed__gesture-lock-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: min(320px, 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(15, 23, 42, 0.70);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(12px);
    min-height: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}


.vg-map-embed--map-active .vg-map-embed__gesture-lock {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.vg-map-embed__state {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    max-width: min(360px, calc(100% - 28px));
    padding: 10px 12px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.88);
    color: #1f2937;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(10px);
}

.vg-map-embed__state[hidden] {
    display: none;
}

.vg-map-embed-marker {
    --marker-bg: rgba(226, 204, 91, 0.72);
    --marker-glow: rgba(255, 255, 255, 0.28);
    --marker-inner: rgba(2, 6, 23, 0.10);
    --marker-shadow: rgba(2, 6, 23, 0.18);
    --marker-halo-1: rgba(226, 204, 91, 0.14);
    --marker-halo-2: rgba(226, 204, 91, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(248, 250, 252, 0.44);
    border-radius: 999px;
    background:
        radial-gradient(circle at 34% 26%, var(--marker-glow), transparent 32%),
        var(--marker-bg);
    color: #f8fbff;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    text-align: center;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.50);
    box-shadow:
        0 6px 13px var(--marker-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -7px 12px var(--marker-inner);
}

.vg-map-embed-marker--large {
    font-size: 15px;
    font-weight: 680;
}

.vg-map-embed-marker--yellow {
    --marker-bg: rgba(226, 204, 91, 0.72);
    --marker-glow: rgba(255, 255, 255, 0.30);
    --marker-inner: rgba(120, 83, 15, 0.08);
    --marker-shadow: rgba(117, 89, 25, 0.15);
    --marker-halo-1: rgba(226, 204, 91, 0.16);
    --marker-halo-2: rgba(226, 204, 91, 0.08);
    border-color: rgba(250, 224, 121, 0.46);
    color: #182033;
    text-shadow: none;
}

.vg-map-embed-marker--amber {
    --marker-bg: rgba(199, 134, 70, 0.72);
    --marker-glow: rgba(255, 255, 255, 0.22);
    --marker-inner: rgba(71, 39, 12, 0.12);
    --marker-shadow: rgba(126, 73, 28, 0.18);
    --marker-halo-1: rgba(199, 134, 70, 0.15);
    --marker-halo-2: rgba(199, 134, 70, 0.075);
    border-color: rgba(242, 174, 101, 0.48);
}

.vg-map-embed-marker--blue {
    --marker-bg: rgba(58, 113, 143, 0.72);
    --marker-glow: rgba(255, 255, 255, 0.18);
    --marker-inner: rgba(2, 28, 48, 0.14);
    --marker-shadow: rgba(25, 72, 99, 0.20);
    --marker-halo-1: rgba(58, 113, 143, 0.15);
    --marker-halo-2: rgba(58, 113, 143, 0.075);
    border-color: rgba(159, 204, 225, 0.50);
}

.vg-map-embed-marker--green {
    --marker-bg: rgba(49, 126, 84, 0.72);
    --marker-glow: rgba(255, 255, 255, 0.16);
    --marker-inner: rgba(3, 45, 25, 0.14);
    --marker-shadow: rgba(28, 91, 56, 0.20);
    --marker-halo-1: rgba(49, 126, 84, 0.15);
    --marker-halo-2: rgba(49, 126, 84, 0.075);
    border-color: rgba(147, 211, 175, 0.50);
}

.vg-map-embed-marker--red {
    --marker-bg: rgba(154, 74, 72, 0.72);
    --marker-glow: rgba(255, 255, 255, 0.14);
    --marker-inner: rgba(64, 12, 14, 0.15);
    --marker-shadow: rgba(116, 45, 45, 0.22);
    --marker-halo-1: rgba(154, 74, 72, 0.16);
    --marker-halo-2: rgba(154, 74, 72, 0.08);
    border-color: rgba(236, 156, 154, 0.52);
}

.vg-map-embed-marker--compact {
    font-size: 12px;
}

.vg-map-embed-marker--tiny {
    font-size: 10px;
}

.vg-map-embed-marker--halo-single {
    box-shadow:
        0 0 0 8px var(--marker-halo-1),
        0 7px 15px var(--marker-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -7px 12px var(--marker-inner);
}

.vg-map-embed-marker--halo-double {
    box-shadow:
        0 0 0 8px var(--marker-halo-1),
        0 0 0 16px var(--marker-halo-2),
        0 8px 18px var(--marker-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -7px 12px var(--marker-inner);
}

.vg-map-embed-marker--compact.vg-map-embed-marker--halo-single {
    box-shadow:
        0 0 0 6px var(--marker-halo-1),
        0 6px 13px var(--marker-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -6px 10px var(--marker-inner);
}

.vg-map-embed-marker--compact.vg-map-embed-marker--halo-double {
    box-shadow:
        0 0 0 6px var(--marker-halo-1),
        0 0 0 12px var(--marker-halo-2),
        0 7px 15px var(--marker-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -6px 10px var(--marker-inner);
}

.vg-map-embed-marker--tiny.vg-map-embed-marker--halo-single {
    box-shadow:
        0 0 0 4px var(--marker-halo-1),
        0 5px 11px var(--marker-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -5px 8px var(--marker-inner);
}

.vg-map-embed-marker--tiny.vg-map-embed-marker--halo-double {
    box-shadow:
        0 0 0 4px var(--marker-halo-1),
        0 0 0 8px var(--marker-halo-2),
        0 6px 13px var(--marker-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -5px 8px var(--marker-inner);
}

.vg-map-embed-balloon {
    min-width: 160px;
    color: #111827;
    font-family: Arial, Helvetica, sans-serif;
}

.vg-map-embed-balloon h3 {
    margin: 0 0 6px;
    font-size: 18px;
    line-height: 1.2;
}

.vg-map-embed-balloon p {
    margin: 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .vg-map-embed {
        min-height: 320px;
    }

    .vg-map-embed__canvas {
        min-height: 320px;
    }

    .vg-map-embed__state {
        top: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
        font-size: 12px;
    }

    .vg-map-embed__gesture-lock {
        padding: 18px;
    }

    .vg-map-embed__gesture-lock-label {
        min-height: 40px;
        font-size: 13px;
    }

}