/* Public /map/ - 2D map viewport aligned with kiosk.php visual/runtime. */

.mapCont--kiosk-map .publicMap__svgFilters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

.mapCont--kiosk-map .mapContainer {
    position: relative;
}

/*
 * The public page keeps its existing sidebar, buttons and modal.
 * Only the SVG viewport is rebuilt so it occupies the same visual proportions
 * as the 2D map on kiosk.php instead of the old fixed 650/520px canvas.
 */
.mapCont--kiosk-map .mapContent {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/*
 * mapContent is the real interaction viewport and covers the whole map row.
 * mapControls only defines the visual area where the map is fitted on load;
 * its empty space must not block mouse/touch events aimed at the SVG below.
 */
.mapCont--kiosk-map .mapControls {
    position: relative;
    z-index: 4;
    pointer-events: none;
}

.mapCont--kiosk-map .mapZoom,
.mapCont--kiosk-map .mapFloor,
.mapCont--kiosk-map .mapModal {
    pointer-events: auto;
}

.mapCont--kiosk-map #floors,
.mapCont--kiosk-map #floors.floorRender,
.mapCont--kiosk-map #floors .floor {
    width: 100%;
    height: 100%;
    padding-left: 0;
}

.mapCont--kiosk-map #floors {
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: none;
}

.mapCont--kiosk-map #floors .floor {
    display: none;
}

.mapCont--kiosk-map #floors .floor.active {
    display: block;
}

.mapCont--kiosk-map #floors svg {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: grab;
}

.mapCont--kiosk-map #floors svg.public-map--dragging {
    cursor: grabbing;
}

/* The SVG look is intentionally kept in sync with /map/kiosk.php. */
.mapCont--kiosk-map #floors svg text {
    line-height: 1.6;
    font-family: Montserrat, Arial, sans-serif;
    fill: #676768;
    font-weight: 500;
    text-anchor: middle;
    dominant-baseline: middle;
    stroke: none;
    pointer-events: none;
}

.mapCont--kiosk-map #floors svg .map_g_item,
.mapCont--kiosk-map #floors svg [data-editor-group],
.mapCont--kiosk-map #floors svg [data-grow-group] {
    cursor: pointer;
    pointer-events: all;
}

.mapCont--kiosk-map #floors svg [data-map_id] > path {
    pointer-events: all;
    transition: fill .2s ease, stroke .2s ease;
    fill: #f6f6f7;
    stroke: #c5c6c6;
    stroke-width: 2.5px;
}

.mapCont--kiosk-map #floors svg:not(.mapHid) .notMark path {
    fill: #f6f6f7;
    stroke: #c5c6c6;
    stroke-width: 1.2px;
}

.mapCont--kiosk-map #floors svg [data-map_id].active > path {
    fill: #e33114;
    stroke: #c5c6c6;
}

.mapCont--kiosk-map #floors svg [data-map_id].active > text {
    fill: #fff;
}

.mapCont--kiosk-map #floors svg [data-map_id] .map-object-logo {
    transition: filter .2s ease;
}

.mapCont--kiosk-map #floors svg [data-map_id].active .map-object-logo {
    filter: url(#mapAppActiveLogoWhite);
}

.mapCont--kiosk-map #floors svg [data-map_id]:active > path {
    fill: #e33114;
}

.mapCont--kiosk-map #floors svg [data-map_id]:active > text {
    fill: #fff;
}

.mapCont--kiosk-map #floors svg .map-svg-object--interactive {
    cursor: pointer;
    transition: opacity .2s ease, filter .2s ease;
}

.mapCont--kiosk-map #floors svg .map-svg-object--interactive.active,
.mapCont--kiosk-map #floors svg .map-svg-object--interactive:active {
    opacity: .78;
    filter: brightness(1.06);
}

.mapCont--kiosk-map #floors svg .map-svg-object--decorative {
    pointer-events: none;
}

.mapCont--kiosk-map #floors svg .map-svg-object__hitbox {
    pointer-events: all;
}

.mapCont--kiosk-map #floors svg image.icon_active {
    display: none;
}

.mapCont--kiosk-map #floors svg g.active image {
    display: none;
}

.mapCont--kiosk-map #floors svg g.active image.icon_active {
    display: block;
}

.mapCont--kiosk-map #floors .notMark {
    pointer-events: none;
}

.mapCont--kiosk-map #floors .notMark[data-service-figure="1"],
.mapCont--kiosk-map #floors .notMark[data-service-figure="1"] image {
    pointer-events: all;
    cursor: pointer;
}

.mapCont--kiosk-map .mapContent .navigation,
.mapCont--kiosk-map .mapContent .startPoint,
.mapCont--kiosk-map .mapContent .icon_startPoint,
.mapCont--kiosk-map .mapContent [data-route-start] {
    display: none !important;
}

.mapCont--kiosk-map .mapModal.open {
    z-index: 100;
}

@media (hover: hover) and (pointer: fine) {
    .mapCont--kiosk-map #floors svg .map-svg-object--interactive:hover {
        opacity: .78;
        filter: brightness(1.06);
    }

    .mapCont--kiosk-map #floors svg [data-map_id]:hover > path,
    .mapCont--kiosk-map #floors svg [data-map_id].map-logical-hover > path {
        fill: #e33114;
        stroke: #c5c6c6;
    }

    .mapCont--kiosk-map #floors svg [data-map_id]:hover > text,
    .mapCont--kiosk-map #floors svg [data-map_id].map-logical-hover > text {
        fill: #fff;
    }

    .mapCont--kiosk-map #floors svg [data-map_id].map-logical-hover .map-object-logo {
        filter: url(#mapAppActiveLogoWhite);
    }
}

/* Tablet/touch layout: map first, existing controls directly below it. */
@media (max-width: 991px) {
    .mapCont--kiosk-map {
        padding-top: 55px;
    }

    .mapCont--kiosk-map .mapContainer {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .mapCont--kiosk-map .mapContent {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 11 / 4;
        order: 1;
        overflow: hidden;
    }

    .mapCont--kiosk-map .mapControls {
        order: 2;
        width: 100%;
        height: 62px;
        min-height: 62px;
    }

    .mapCont--kiosk-map .mapSidebar {
        order: 3;
    }

    .mapCont--kiosk-map .mapFloor,
    .mapCont--kiosk-map .mapZoom {
        top: 0;
        bottom: auto;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {
    .mapCont--kiosk-map {
        padding-top: 35px;
    }
}

@media (max-width: 575px) {
    .mapCont--kiosk-map {
        margin-top: 0 !important;
        margin-bottom: 40px;
        padding-top: 30px;
    }

    .mapCont--kiosk-map .mapContainer {
        gap: 12px;
    }

    .mapCont--kiosk-map .mapContent {
        min-height: 120px;
    }

    .mapCont--kiosk-map .mapControls {
        height: 50px;
        min-height: 50px;
    }
}