/* =========================================================
   FLOOR PLAN
   ========================================================= */

.floorplan-section {
    width: 100%;
    padding-bottom: 40px;
}


/* =========================================================
   FLOOR SELECTOR
   ========================================================= */

.floor-selector {
    display: flex;
    gap: 8px;

    margin-bottom: 18px;

    padding: 5px;

    background: var(--surface-soft);

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);
}


.floor-selector-item {
    flex: 1;

    min-height: 44px;

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

    padding: 0 12px;

    border-radius: 11px;

    color: var(--text-soft);

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

    transition:
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}


.floor-selector-item:hover {
    background: rgba(255, 255, 255, 0.7);
    color: var(--text);
}


.floor-selector-item-active {
    background: var(--surface);

    color: var(--primary);

    box-shadow: var(--shadow-small);
}


/* =========================================================
   FLOOR PLAN VIEWER
   ========================================================= */

.floorplan-viewer {
    position: relative;
}


/* =========================================================
   ZOOM CONTROLS
   ========================================================= */

.floorplan-controls {
    position: absolute;

    bottom: 12px;
    left: 12px;

    z-index: 5;

    display: flex;
    gap: 6px;

    padding: 5px;

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

    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow: var(--shadow-small);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.floorplan-zoom-button {
    width: 38px;
    height: 38px;

    padding: 0;

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

    border: 0;
    border-radius: 8px;

    background: transparent;

    color: var(--text);

    font-size: 22px;
    font-weight: 400;

    cursor: pointer;
}


.floorplan-zoom-button:hover {
    background: var(--surface-soft);
}


.floorplan-zoom-button[data-zoom-reset] {
    width: 52px;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   FLOOR PLAN IMAGE
   ========================================================= */

.floorplan-image {
    width: 100%;

    height: calc((100vh - 300px) * 0.8);
    height: calc((100dvh - 300px) * 0.8);

    min-height: 300px;

    overflow: auto;

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

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-small);

    touch-action: pan-x pan-y;
}


.floorplan-image img {
    width: 70%;

    max-width: none;
    height: auto;

    flex: 0 0 auto;

    display: block;

    user-select: none;
    -webkit-user-drag: none;
}


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

@media (max-width: 600px) {

    .floorplan-section {
        padding-bottom: 20px;
    }


    .floor-selector {
        margin-bottom: 12px;
    }


    .floor-selector-item {
        min-height: 42px;

        padding: 0 8px;

        font-size: 13px;
    }


    .floorplan-controls {
        bottom: 8px;
        left: 8px;
    }


    .floorplan-image {
        height: calc((100vh - 250px) * 0.8);
        height: calc((100dvh - 250px) * 0.8);

        min-height: 280px;
    }

}