/* ==========================================================================
   MASTERPLAN PAGE STYLES (Side Nav, Map, Hotspots)
   ========================================================================== */

/* SIDE NAV - Unified Design */
.side-nav {
    position: fixed;
    right: 50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    /* REVERTED TO LINE INDICATOR - RIGHT SIDE */
    text-align: right;
}

.nav-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Keep text right-aligned */
    flex-direction: row;
    /* Default: Text left, After right */
    gap: 15px;
    opacity: 0;
    transform: translateX(20px);
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    cursor: pointer;
    position: relative;
}

/* Active State - Scale Up */
.nav-title.active {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    transform: translateX(0) scale(1.05);
}

/* Line indicator on RIGHT */
.nav-title::after {
    content: '';
    display: block;
    width: 0px;
    /* Start hidden */
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.nav-title.active::after {
    width: 60px;
    /* Extend when active */
    background: #fff;
}

.nav-items {
    list-style: none;
    position: relative;
}

.nav-item {
    margin-bottom: 25px;
    /* Increased spacing */
    opacity: 0;
    transform: translateX(20px);
    transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    /* Sync with 1s Page Slide */
}

.nav-item a {
    text-decoration: none;
    color: #FFF !important;
    font-size: 18px;
    /* Bigger base size */
    font-weight: 300;
    transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    /* Sync with 1s Page Slide */
    position: relative;
    padding-right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    gap: 15px;
    /* More gap */
    letter-spacing: 0.5px;
    transform-origin: right center;
}

/* Active State - Scale Up & Value Color */
.nav-item.active a {
    color: #FFF !important;
    font-size: 28px;
    /* Much Bigger Active */
    font-weight: 700;
    transform: scale(1.1);
    letter-spacing: 1.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Line indicator for items */
.nav-item a::after {
    content: '';
    display: block;
    width: 0px;
    height: 3px;
    /* Thicker line */
    background: #FFF !important;
    transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.nav-item a:hover {
    color: #fff;
    transform: scale(1.05);
}

.nav-item.active a::after {
    width: 50px;
    /* Longer line */
}

/* Section-specific Nav Colors */
body.section-shophouse .nav-title {
    color: #FFF !important;
}

body.section-shophouse .nav-title.active {
    color: var(--primary-green);
}

body.section-shophouse .nav-title.active::after {
    background: var(--primary-green);
}

body.section-shophouse .nav-item a {
    color: #FFF !important;
}

body.section-shophouse .nav-item.active a {
    color: var(--primary-green);
}

body.section-shophouse .nav-item.active a::after {
    background: var(--primary-green);
}

/* Floor 4 Section - White Menu */
body.section-floor4 .nav-title {
    color: #FFF !important;
}

body.section-floor4 .nav-title.active {
    color: #fff;
}

body.section-floor4 .nav-title.active::after {
    background: #fff;
}

body.section-floor4 .nav-item a {
    color: #FFF !important;
}

body.section-floor4 .nav-item.active a {
    color: #fff;
}

body.section-floor4 .nav-item.active a::after {
    background: #fff;
}

/* Legend Panel Styles (for nav display) */
.subtitle {
    font-size: 16px;
    font-weight: 300;
    opacity: 0.8;
    margin-bottom: 15px;
    color: inherit;
}

.title-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 15px;
    margin-bottom: 20px;
}

.title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    color: inherit;
}

.line {
    width: 40px;
    height: 2px;
    background: currentColor;
}

.floors {
    font-size: 14px;
    font-weight: 300;
    line-height: 2;
    opacity: 0.7;
    color: inherit;
}

.floors p {
    margin: 0;
}


/* ==========================================================================
           SECTION 1: MASTER PLAN (The Landing Page)
           ========================================================================== */
#section-masterplan {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
    background: url('../assets/bg-green.png') no-repeat center center;
    background-size: cover;
    /* Green gradient background from design */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

/* Masterplan uses the same map-area logic as other sections now */
#section-masterplan .map-area {
    position: absolute;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
}

#section-masterplan .map-image-container {
    width: 120vmin;
    /* Full screen height/width depending on orientation */
    height: auto;
    aspect-ratio: 1160 / 913;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#section-masterplan .map-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}



/* ==========================================================================
           SECTION 2: SHOPHOUSE MAP (The Index Page)
           ========================================================================== */
#section-shophouse {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 0;
    background: linear-gradient(55deg, #FFF1CE 0%, #CEB472 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    visibility: hidden;
    /* HIDDEN until GSAP shows it */
}

/* IMPORTANT: This makes child absolute elements position relative to section, not viewport */
#section-shophouse .design-container,
#section-floor4 .design-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Inherit styles from index.html for map */
.map-area {
    position: absolute;
    left: 5vw;
    top: 4vh;
    width: 55vw;
    height: 92vh;
}

.map-image-container {
    position: absolute;
    left: 20vw;
    top: 12vh;
    /* Increased from 6vh to ensure tooltip headroom */
    width: 50vw;
    height: 80vh;
    /* Reduced from 85vh to fit */
}

.map-image {
    height: 100%;
    object-fit: contain;
    object-position: top left;
}

.map-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* SVG Unit Styles */
.unit-group {
    cursor: pointer;
}

.unit-path {
    fill: transparent;
    stroke: transparent;
    stroke-width: 1px;
    transition: 0.2s;
}

.unit-label {
    fill: #21362C;
    font-size: 6px;
    font-weight: 600;
    pointer-events: none;
    transition: 0.2s;
}

.unit-group:hover .unit-path {
    fill: rgba(206, 180, 114, 0.7);
    /* #CEB472 with opacity */
    stroke: #21362C;
    stroke-width: 2px;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
    /* Golden Glow */
}

.unit-group:hover .unit-label {
    opacity: 0;
}

/* Master Plan Labels Interaction */
.master-label {
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy pop */
    transform-box: fill-box;
    transform-origin: center bottom;
}

.master-label:hover {
    transform: translateY(-10px) scale(1.1);
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
}

.master-label rect {
    transition: fill 0.3s ease;
}

.master-label:hover rect {
    fill: #FFF1CE;
    /* Lighter gold/cream on hover */
}

/* Responsive: phóng to label Master Plan trên mobile */
@media (max-width: 768px) {
    svg .master-label rect {
        /* to hơn khá rõ trên mobile */
        transform-box: fill-box;
        transform-origin: center;
        transform: scale(2) !important;
    }

    svg .master-label text {
        font-size: 18px;
    }
}

@media (max-width: 1025px) {
    svg .master-label rect {
        /* to hơn khá rõ trên mobile */
        transform-box: fill-box;
        transform-origin: center;
        transform: scale(2) !important;
    }

    svg .master-label text {
        font-size: 18px;
    }
}

/* Hover Effect for Shophouse (Custom Gradient) */
body.section-shophouse .unit-group:hover .unit-path,
body.section-floor21 .unit-group:hover .unit-path {
    fill: url(#grad-shophouse);
    /* Custom Gradient #03742B -> #26362C */
    fill-opacity: 0.9;
    /* Slight transparency for texture */
    stroke-width: 0px;
    /* Thinner stroke for elegance */
    filter: drop-shadow(0 0 5px rgba(3, 116, 43, 0.8));
    /* Matching Green Glow */
}



/* Tower Labels (Shophouse specific) */
.tower-wrapper {
    position: absolute;
    z-index: 50;
}

.tower-label {
    width: 6.1vw;
    height: 3.2vh;
    padding: 0.9vh 0.8vw;
    background: #21362C;
    border-radius: 100px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.tower-label span {
    color: #fff;
    font-size: 0.63vw;
    font-weight: 300;
    font-family: 'Poppins', sans-serif;
}

.tower-arrow {
    position: absolute;
    width: 2.3vw;
    height: 0.7vh;
}

/* ============================
   Responsive override (Mobile)
   Làm label & arrow to hơn trên màn hình nhỏ
   ============================ */
@media (max-width: 768px) {
    .tower-label {
        width: auto;
        min-width: 70px;
        padding: 6px 12px;
        border-radius: 999px;
    }

    .tower-label span {
        font-size: 3.2vw;
        /* khoảng 12–14px trên mobile */
        font-weight: 500;
    }
    .label-thap2 {
        left: 5% !important;
    }

}

/* Floor 4 Label Overrides */
#section-floor4 .tower-label {
    background: #CEB472;
    /* Gold Background */
}

#section-floor4 .tower-label span {
    color: #21362C;
    /* Green Text */
    font-weight: 500;
}

/* Specific label positions (REMOVED - Handled by JS shophouse-map.js) */
/* Parent styles (.label-thap...) are handled by JS to match SVG coordinates. 
   We only keep the internal Arrow styling here. */
/* Vì dùng thẻ <img> nên không thể fill trực tiếp. Dùng filter để đổi màu sang #D3B367 */
.arrow-floor4 {
    /* Chuyển sang màu vàng #D3B367 */
    filter: brightness(0) saturate(100%) invert(86%) sepia(26%) saturate(786%) hue-rotate(345deg) brightness(87%) contrast(87%) !important;
}

.label-thap3a .arrow-down {
    left: 50%;
    top: 100%;
    transform: translateX(-50%) rotate(90deg);
    margin-top: 2.8vh;
}

.label-thap3b .arrow-down {
    left: 50%;
    top: 100%;
    transform: translateX(-50%) rotate(90deg);
    margin-top: 2.8vh;
}

.label-thap2 .arrow-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: -0.26vw;
}

.label-thap1 .arrow-up {
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%) rotate(90deg);
    margin-bottom: 2.8vh;
}

/* Compass & Legend (Shophouse specific) */
.compass {
    position: absolute;
    top: 10vh;
    right: 18vw;
    width: 3.5vw;
    height: 3.5vw;
}

.legend-panel {
    position: absolute;
    right: 5vw;
    top: 25vh;
    text-align: right;
    color: #21362C;
    z-index: 50;
}

.legend-panel .subtitle {
    font-size: 1vw;
    font-weight: 300;
    opacity: 0.8;
    margin-bottom: 1vh;
}

.legend-panel .title-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.2vw;
}

.legend-panel .title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.5vw;
    font-weight: 500;
}

.legend-panel .line {
    width: 2.5vw;
    height: 2px;
    background: #21362C;
}

.legend-panel .floors {
    margin-top: 2vh;
    font-size: 0.9vw;
    font-weight: 300;
    line-height: 2;
    opacity: 0.7;
}

/* Tooltip */
.tooltip {
    position: absolute;
    width: 6.8vw;
    background: #D3B367;
    border-radius: 0.78vw;
    box-shadow: 0px 0.37vh 0.37vh rgba(0, 0, 0, 0.25);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.2s;
}

.tooltip::after {
    content: '';
    position: absolute;
    bottom: -0.74vh;
    left: 50%;
    transform: translateX(-50%);
    border-left: 0.52vw solid transparent;
    border-right: 0.52vw solid transparent;
    border-top: 0.93vh solid #D3B367;
}

.tooltip.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tooltip-header {
    width: 100%;
    height: 2.2vh;
    background: linear-gradient(90deg, #21362C 0%, #5F9C7F 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.52vw;
    font-weight: 500;
    border-top-left-radius: 0.78vw;
    border-top-right-radius: 0.78vw;
}

.tooltip-body {
    padding: 0.93vh 0.57vw;
    font-size: 0.42vw;
    color: #21362C;
    font-weight: 400;
    line-height: 1.5;
}

.tooltip-body p {
    margin: 0 0 0.28vh 0;
}

.tooltip-body strong {
    font-weight: 500;
    display: block;
}

.tooltip-btn {
    display: block;
    width: 4.5vw;
    height: 1.8vh;
    margin: 1.2vh auto 1vh;
    border: 1px solid #21362C;
    border-radius: 30px;
    background: transparent;
    color: #21362C;
    font-size: 0.45vw;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.6vh;
    cursor: pointer;
}

.tooltip-btn:hover {
    background: rgba(33, 54, 44, 0.1);
}

/* Section Floor 4 - same as shophouse but hidden initially */
#section-floor4 {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 0;
    background: url('../assets/bg-floor4.png') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* HIDDEN until GSAP shows it */
}

/* Section Floor 21-39 - Yellow background theme */
#section-floor21 {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 0;
    background: url('../assets/background-yellow.png') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    visibility: hidden;
    /* HIDDEN until GSAP shows it */
}

/* Floor 21 Label Overrides (Same as Floor 4) */
#section-floor21 .tower-label {
    background: #21362C;
    /* Gold Background */
}

#section-floor21 .tower-label span {
    color: #CEB472;
    /* Green Text */
    font-weight: 500;
}


/* ==========================================================================
           SHOPHOUSE POPUP
           ========================================================================== */
#shophouse-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    display: none;
    /* Flex when active */
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}

.shophouse-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #EAE0C8 0%, #D3B367 100%);
    /* Premium Gold/Beige */
    z-index: 1;
}

.shophouse-popup-container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1200px;
    height: 85vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Close Button */
.shophouse-popup-close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 20;
    /* Higher than content */
    transition: transform 0.3s ease;
}

.shophouse-popup-close:hover {
    transform: rotate(90deg);
}

.shophouse-popup-close svg {
    width: 100%;
    height: 100%;
    stroke: #21362C;
}

/* Left Content: Info */
.shophouse-popup-info {
    width: 35%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    color: #21362C;
}

.popup-site-logo {
    width: 60px;
    margin-bottom: 20px;
}

.popup-title {
    font-family: 'Cormorant Garamond', serif;
    /* SVN-Audrey substitution */
    font-size: 56px;
    font-weight: 400;
    letter-spacing: 2px;
    border-bottom: 1px solid #21362C;
    padding-bottom: 20px;
}

.popup-details {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.popup-detail-row {
    font-size: 18px;
    font-weight: 500;
}

.popup-detail-row sup {
    font-size: 0.7em;
}

.popup-divider {
    width: 100%;
    height: 1px;
    background: #21362C;
    margin: 10px 0;
}

/* Right Content: Image */
.shophouse-popup-image {
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.shophouse-popup-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

.popup-dimension-arrow {
    position: absolute;
    bottom: 20px;
    right: 100px;
    width: 100px;
    opacity: 0.6;
}

/* Responsive for Popup */
@media (max-width: 1024px) {
    .shophouse-popup-container {
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 20px;
        height: 95vh;
        padding: 40px 0;
        overflow-y: auto;
    }

    .shophouse-popup-info {
        width: 100%;
        text-align: center;
        padding-bottom: 20px;
        flex-shrink: 0;
    }

    .popup-title {
        font-size: 32px;
        text-align: center;
    }

    .shophouse-popup-image {
        width: 100%;
        height: 40vh;
        /* Constrain height */
        flex: 0 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .shophouse-popup-image img {
        width: auto;
        /* Let height dictate width */
        height: 100%;
        max-width: 80%;
        object-fit: contain;
    }

    .shophouse-popup-close {
        top: 20px;
        right: 20px;
    }
}


/* ==========================================================================
           RESPONSIVE STYLES (Mobile < 768px)
           ========================================================================== */
@media (max-width: 1025px) {

    /* 1. SCENE CONTAINER (Masterplan) - Mobile Fix */
    header {
        top: 20px !important;
        left: 20px !important;
        width: calc(100% - 40px) !important;
    }

    .logo img {
        height: 40px;
        /* Smaller Logo on Mobile */
    }

    /* Side Nav - Smaller on Tablet */
    .side-nav {
        right: 20px;
    }

    .nav-title {
        font-size: 16px;
        margin-bottom: 15px;
        gap: 10px;
    }

    .nav-title.active {
        font-size: 20px;
    }

    .nav-title.active::after {
        width: 40px;
    }

    .nav-item {
        margin-bottom: 12px;
    }

    .nav-item a {
        font-size: 14px;
        gap: 10px;
    }

    .nav-item.active a {
        font-size: 18px;
    }

    .nav-item.active a::after {
        width: 30px;
    }

    /* Masterplan Map Container - Tablet */
    #section-masterplan .map-image-container {
        width: 85vw;
        max-width: 100%;
        left: 45%;
    }

    .scene-wrapper {
        width: 100vw;
        height: 100vh;
        background-position: center;
        /* Use flex to center the content */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .scene-inner {
        /* Force Aspect Ratio to match Image (1440/1024 ~ 1.4) to keep hotspots aligned */
        /* On mobile, we might want to fit width or height */
        width: 100%;
        height: auto;
        aspect-ratio: 1440 / 1024;
        position: relative;
    }

    .bg-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        /* Ensure image fits w/o cropping */
    }

    /* Scale down hotspots/labels on mobile */
    .hotspot {
        transform: scale(0.6);
    }

    .street-label {
        font-size: 8px;
    }


    /* 2. MAP AREA (Stacked Layout) - Mobile Fix */
    .map-area {
        width: 100vw !important;
        height: auto !important;
        /* Let height be defined by aspect ratio */
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        /* Center on screen */
        position: absolute !important;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .map-image-container {
        /* Define specific mobile size or max-width to fit screen */
        width: 200vmin !important;
        height: auto !important;
        aspect-ratio: 827 / 877;
        /* Approx Aspect Ratio of Shophouse Map */
        position: relative;
        top: auto;
        left: 10px;
    }

    .map-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .map-svg {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }

    /* 3. INFO / COMPASS */
}

/* ==========================================================================
           FLOOR POPUP
           ========================================================================== */
#floor-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    display: none;
    justify-content: center;
    align-items: center;
    font-family: 'Poppins', sans-serif;
}

.floor-popup-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #EAE0C8 0%, #D3B367 100%);
    z-index: 1;
}

.floor-popup-container {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1400px;
    height: 85vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
}

/* Close Button (Direct Child of Popup similar to Shophouse) */
.floor-popup-close-btn {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 20;
    transition: transform 0.3s ease;
}

.floor-popup-close-btn:hover {
    transform: rotate(90deg);
}

.floor-popup-close-btn svg {
    width: 100%;
    height: 100%;
    stroke: #21362C;
}

/* Left Info: User Specifics */
.floor-popup-info {
    width: 462px;
    /* Fixed width from user */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    color: #21362C;
}

.floor-popup-title {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #21362C;
    font-size: 36px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    word-wrap: break-word;
    /* height: 31px; User specified hard height, usually safer to be auto but ok */
}

.floor-popup-divider {
    width: 350px;
    height: 0px;
    border-top: 1px solid #21362C;
    /* outline was specified, border safer */
}

.floor-popup-detail-row {
    align-self: stretch;
    /* height: 17px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #21362C;
    font-size: 22px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    word-wrap: break-word;
}

.floor-popup-small-map {
    margin-top: 20px;
}

.floor-popup-small-map img {
    max-width: 100%;
    height: auto;
}

/* Right Image */
.floor-popup-image {
    flex: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.floor-popup-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.15));
}

@media (max-width: 1200px) {
    .floor-popup-info {
        width: 40%;
    }
}

@media (max-width: 1024px) {

    /* Floor Popup Responsive */
    .floor-popup-container {
        flex-direction: column-reverse;
        justify-content: flex-end;
        /* Push content to top if needed or center */
        height: 95vh;
        /* Constrain height */
        padding: 40px 0;
        overflow-y: auto;
        /* Allow scrolling if content is too tall */
    }

    .floor-popup-info {
        width: 100%;
        align-items: center;
        text-align: center;
        padding-bottom: 20px;
        flex-shrink: 0;
        /* Prevent shrinking */
    }

    .floor-popup-divider {
        width: 200px;
    }

    .floor-popup-image {
        width: 100%;
        height: 40vh;
        /* Constrain image height */
        flex: 0 0 auto;
        /* Do not flex grow */
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    .floor-popup-image img {
        width: auto;
        height: 100%;
        max-width: 80%;
        object-fit: contain;
    }
}

/* Extra Mobile Refinements */
@media (max-width: 768px) {
    .floor-popup-container {
        padding: 20px 0;
        width: 95%;
        gap: 20px;
    }

    .floor-popup-title {
        font-size: 28px;
    }

    .floor-popup-detail-row {
        font-size: 16px;
    }

    .floor-popup-close-btn {
        top: 15px;
        right: 15px;
        width: 32px;
        height: 32px;
    }

    .floor-popup-divider {
        width: 150px;
    }
}


.compass {
    width: 12vw;
    height: 12vw;
    right: 5vw;
    top: 80px;
    z-index: 50;
}

.legend-panel {
    top: auto;
    bottom: 10px;
    right: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.95);
    padding: 8px;
}

.legend-panel .title {
    font-size: 20px;
}

.legend-panel .subtitle {
    font-size: 12px;
}

/* 4. TOOLTIPS */
.tooltip {
    width: 140px;
}

.tooltip-header {
    font-size: 10px;
    height: 22px;
}

.tooltip-body {
    font-size: 9px;
    padding: 8px;
}

.tooltip-btn {
    width: 90%;
    font-size: 9px;
}

/* Fix Tower Labels Position & Size */
.tower-wrapper .tower-label {
    font-size: 14px;
    padding: 1px 6px;
    white-space: nowrap;
}

.tower-arrow {
    width: 15px;
}

/* Re-adjust positions for mobile if necessary, or rely on % being correct due to aspect-ratio fix */