:root {
    --glass-blue: rgba(18, 40, 63, 0.56);
    --glass-blue-strong: rgba(10, 28, 47, 0.74);
    --glass-blue-soft: rgba(29, 58, 88, 0.42);
    --glass-border: rgba(255,255,255,0.16);
    --glass-border-soft: rgba(255,255,255,0.10);
    --text-soft: rgba(226, 235, 245, 0.78);
    --gold: #b49c6e;
    --shadow-blue: 0 14px 40px rgba(8, 22, 39, 0.28);
}

/* Custom Scrollbar configuration */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: rgba(6, 18, 31, 0.7); }
::-webkit-scrollbar-thumb { background: #4d6883; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #7a98b7; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.glass-panel {
    background: var(--glass-blue);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-blue);
}

.glass-panel-strong {
    background: var(--glass-blue-strong);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-blue);
}

.glass-chip {
    background: rgba(17, 39, 61, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 8px 24px rgba(8, 22, 39, 0.24);
}

.soft-overlay {
    background: linear-gradient(180deg, rgba(8, 21, 36, 0.16) 0%, rgba(10, 26, 44, 0.22) 18%, rgba(10, 27, 45, 0.36) 52%, rgba(8, 22, 38, 0.48) 100%);
}

.title-glow {
    text-shadow: 0 4px 18px rgba(8, 24, 41, 0.28);
}

.top-icon-btn {
    background: rgba(23, 45, 70, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 10px 26px rgba(8, 22, 39, 0.18);
}

.top-icon-btn:hover {
    transform: scale(1.04);
    background: rgba(30, 58, 88, 0.58);
}

#bottomLeftControls .control-btn.active {
    background: rgba(255, 255, 255, 0.96) !important;
    color: #0f2136 !important;
    box-shadow: 0 6px 16px rgba(255, 255, 255, 0.14) !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}
#bottomLeftControls .control-btn.active i,
#bottomLeftControls .control-btn.active span {
    color: #0f2136 !important;
    opacity: 1 !important;
}

.floor-tab {
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    color: rgba(255, 255, 255, 0.55) !important;
}
.floor-tab.active {
    background: #2563eb !important; 
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.35);
}

.desktop-only-badge {
    display: block;
}

/* Target Landscape Mobile screens strictly to eliminate clutter and fix sizing */
@media (max-height: 520px) and (orientation: landscape) {
    #interior {
        padding-top: 36px !important; 
        padding-bottom: 38px !important;
        overflow: hidden !important;
        justify-content: center;
    }
    .hide-on-landscape {
        display: none !important;
    }
    .title-section {
        margin-bottom: 4px !important;
    }
    .title-section h2 {
        font-size: 13px !important;
    }
    
    #interiorsList {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        padding-left: 38px !important; 
        padding-right: 38px !important;
        padding-bottom: 4px !important;
        width: 100vw !important;
        max-width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }
    
    #interiorsList > li {
        flex: 0 0 240px !important;
        width: 240px !important;
        max-width: 240px !important;
        height: auto !important; 
        min-height: 80px !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .mobile-card-header {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .img-box-wrapper {
        width: 54px !important;
        height: 54px !important;
        flex-shrink: 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
    }
    .img-box-wrapper img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .desktop-only-badge,
    .spec-details-grid,
    .mobile-btn-stack {
        display: none !important;
    }

    #interiorsList > li h3 { font-size: 12px !important; line-height: 1.2 !important; margin: 0 !important; font-weight: 500 !important; }
    #interiorsList > li p { font-size: 9.5px !important; line-height: 1.2 !important; }

    /* Responsive Top Left Header Panel Scaledown */
    .top-header-panel {
        top: 4px !important;
        left: 4px !important;
        padding: 4px !important;
        border-radius: 12px !important;
    }
    .top-header-logo { height: 14px !important; width: 14px !important; }
    .top-header-paddco { font-size: 5.5px !important; }
    .top-header-title { font-size: 8.5px !important; }
    .top-header-loc { font-size: 6px !important; }
    .top-header-divider { height: 20px !important; margin: 0 2px !important; }
    .top-header-btn { height: 18px !important; width: 18px !important; border-radius: 6px !important; }
    .top-header-btn svg { height: 8px !important; width: 8px !important; }

    /* Responsive Top Right Action Buttons Scaledown */
    .top-right-group {
        top: 4px !important;
        right: 4px !important;
        gap: 6px !important;
    }
    .top-right-btn {
        height: 18px !important;
        width: 18px !important;
    }
    .top-right-btn i {
        font-size: 9px !important;
        height: auto !important;
        width: auto !important;
    }
    .top-right-btn img {
        height: 9px !important;
        width: 9px !important;
    }

    /* Right Sidebar Features Drawer Menu Microscale Layout */
    #features {
        width: 65px !important;
        padding: 4px !important;
    }
    #features .flex-col {
        gap: 8px !important;
    }
    #featurePanelCloseBtn {
        height: 22px !important;
        width: 22px !important;
    }
    #featurePanelCloseBtn i {
        font-size: 10px !important;
    }
    #featuresList ul {
        gap: 8px !important;
    }
    #featuresList li div {
        height: 24px !important;
        width: 24px !important;
    }
    #featuresList li img {
        height: 12px !important;
        width: 12px !important;
    }
    #featuresList li p {
        font-size: 8px !important;
    }

    /* Bottom layout controls alignment fix */
    #bottomLeftControls {
        bottom: 4px !important;
        left: 4px !important;
        width: auto !important;
    }
    #bottomLeftControls ul {
        padding: 3px !important;
        border-radius: 20px !important;
        display: flex !important;
        align-items: center !important;
    }
    .control-btn {
        height: 22px !important;
        width: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .control-btn i {
        font-size: 10px !important;
        line-height: 1 !important;
    }
    .control-btn.active {
        height: 22px !important;
        width: auto !important; 
        padding: 0 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        border-radius: 12px !important;
    }
    .control-btn.active span {
        font-size: 9.5px !important;
        display: inline !important;
        line-height: 1 !important;
    }
    .control-btn img {
        width: 10px !important;
        height: 10px !important;
    }

    .modal-pill-wrapper {
        left: 12px !important;
        right: auto !important;
        bottom: 12px !important;
        transform: none !important;
        padding: 2px !important;
    }
    .floor-tab {
        padding: 3px 10px !important;
        font-size: 10px !important;
    }

    /* SPIM Logo wrapper correction */
    .spim-logo-wrapper {
        right: max(6px, env(safe-area-inset-right)) !important;
        bottom: max(6px, env(safe-area-inset-bottom)) !important;
        height: 24px !important;
        width: 24px !important;
        border-radius: 6px !important;
    }
    
    .landscape-nav-arrow {
        display: flex !important;
    }
}