* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;

    font-family: Arial, sans-serif;
}

body {
    padding: 20px;
    background: #ffffff;
}

/* =========================
   ОСНОВНОЙ КОНТЕЙНЕР
   ========================= */

.map-wrapper {
    position: relative;

    width: 100%;
    height: calc(100vh - 40px);
    overflow: hidden;
    background: #ffffff;
    border-radius: 12px;
}

/* =========================
   VIEWPORT КАРТЫ
   ========================= */

.map-viewport {
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: grab;

    /*
     * В стандартном масштабе
     * разрешаем вертикальный scroll страницы.
     */
    touch-action: pan-y;

    user-select: none;
}

.map-viewport.dragging {
    cursor: grabbing;
}

/*
 * После увеличения карты
 * все touch-жесты забирает карта.
 */
.map-viewport.is-zoomed {
    touch-action: none;
}


/* =========================
   SVG
   ========================= */

#svgContainer {
    width: 100%;
    height: 100%;
}

#svgContainer svg {
    display: block;

    width: 100%;
    height: 100%;

    user-select: none;
}


/* =========================
   ПАНЕЛЬ УПРАВЛЕНИЯ
   ========================= */

.map-toolbar {
    position: absolute;

    z-index: 100;

    top: 16px;
    right: 16px;

    display: flex;
    flex-direction: column;

    gap: 8px;
}

.map-toolbar button {
    width: 44px;
    height: 44px;

    padding: 0;

    border: none;
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.92);

    font-size: 22px;

    cursor: pointer;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.20);

    transition:
        background 0.25s ease,
        transform 0.2s ease;
}

.map-toolbar button:hover {
    background: rgba(255, 255, 255, 1);
}

.map-toolbar button:active {
    transform: scale(0.95);
}


/* =========================
   HOTSPOTS
   ========================= */

.map-hotspot {
    fill: transparent;
    stroke: none;

    pointer-events: all;
    cursor: pointer;
}


/* =========================
   TOOLTIP
   ========================= */

.map-tooltip {
    position: absolute;

    z-index: 200;

    opacity: 0;
    visibility: hidden;

    padding: 10px 14px;

    background: rgba(25, 25, 25, 0.35);
    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius: 12px;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    white-space: nowrap;

    pointer-events: none;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.18);

    transform: translateY(4px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        visibility 0.35s ease;
}

.map-tooltip.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* =========================
   КАТЕГОРИИ
   ========================= */

.map-categories {
    position: absolute;

    z-index: 100;

    right: 16px;
    bottom: 16px;

    display: flex;
    flex-direction: column;

    gap: 8px;

    max-width: calc(100% - 32px);
}


/* =========================
   КНОПКИ КАТЕГОРИЙ
   ========================= */

.category-btn {
    min-width: 150px;
    height: 44px;

    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.25);

    border-radius: 10px;

    background: rgba(25, 25, 25, 0.30);
    color: #ffffff;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 14px;
    font-weight: 600;

    text-align: center;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.category-btn:hover {
    background: rgba(25, 25, 25, 0.45);
}

.category-btn.active {
    background: rgba(25, 25, 25, 0.65);

    transform: translateX(-3px);
}

.category-btn:active {
    transform: scale(0.97);
}


/* =========================
   SELECT ЛОДЖЕЙ
   ========================= */

.lodge-select {
    min-width: 150px;
    height: 44px;

    padding: 0 34px 0 14px;

    border:
        1px solid rgba(255, 255, 255, 0.25);

    border-radius: 10px;

    background-color:
        rgba(25, 25, 25, 0.30);

    color: #ffffff;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    font-size: 14px;
    font-weight: 600;

    text-align: center;
    text-align-last: center;

    cursor: pointer;

    outline: none;

    appearance: none;
    -webkit-appearance: none;

    background-image:
        linear-gradient(45deg,
            transparent 50%,
            #ffffff 50%),
        linear-gradient(135deg,
            #ffffff 50%,
            transparent 50%);

    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 13px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.lodge-select:hover {
    background-color:
        rgba(25, 25, 25, 0.45);
}


/* =========================
   МАРКЕР КАТЕГОРИИ
   ========================= */

.category-marker {
    pointer-events: none;
    overflow: visible;
}


/* =========================
   FULLSCREEN
   ========================= */

.map-wrapper:fullscreen {
    width: 100vw;
    height: 100dvh;

    border-radius: 0;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 959px) {

    body {
        padding: 0;
    }

    .map-wrapper {
        width: 100%;
        height: 100dvh;

        border-radius: 0;
    }

    .map-toolbar {
        top: 10px;
        right: 10px;
    }

    .map-toolbar button {
        width: 42px;
        height: 42px;

        border-radius: 9px;
    }

    .map-categories {
        right: 16px;
        bottom: 16px;

        max-width: calc(100% - 32px);
    }

    .category-btn,
    .lodge-select {
        min-width: 170px;
        height: 42px;

        font-size: 13px;
    }

    .map-tooltip {
        max-width: 220px;

        font-size: 13px;

        white-space: normal;
    }
}