:root {
            /* DEFAULTS - JavaScript Chameleon Engine Overrides These */
            --theme-blue-main: #005691; 
            --theme-red-accent: #E61E2A;  
            --primary-contrast: #FFFFFF;
            --accent-contrast: #FFFFFF;
            --primary-hover: #004474;
            --accent-hover: #c41924;
            --primary-glow: rgba(0, 86, 145, 0.3);
            --accent-glow: rgba(230, 30, 42, 0.4);
            
            --ui-bar-bg: rgba(0, 0, 0, 0.75); 
            --ui-text-color: #FFFFFF;
            --ui-toast-bg: rgba(15, 15, 15, 0.95);
            --btn-bg: rgba(255, 255, 255, 0.1); 
            --btn-border: rgba(255, 255, 255, 0.15);
            --smart-icon-color: #FFFFFF;
            
            --font-heading: 'Montserrat', sans-serif; --font-body: 'Lato', sans-serif;
            --splash-bg-image: url('https://images.unsplash.com/photo-1523987355523-c7b5b0dd90a7?auto=format&fit=crop&q=80&w=1920');
            --spinner-color: var(--theme-red-accent); 
            
            --social-phone-bg: rgba(0, 0, 0, 0.75); --social-phone-border: rgba(255, 255, 255, 0.2);
            --icon-color: #FFFFFF; --primary-dark: #000000; --accent-color: #FFFFFF;
            --glow-blue: rgba(255, 255, 255, 0.2); --modal-shadow: 0 20px 50px rgba(0,0,0,0.5);
            --bg-overlay: rgba(0, 0, 0, 0.8); --map-overlay-bg: rgba(255, 255, 255, 0.7); 
            --theme-white: #FFFFFF; --theme-blue-dark: #000000;
            --logo-width-desktop: 320px;
            --logo-width-mobile: 220px;
        }

        /* --- BULLETPROOF BUTTON ENGINE (Neon Glass Glow + Brand Hairlines) --- */
        .action-btn {
            background: var(--btn-bg); border: 1px solid color-mix(in srgb, var(--theme-blue-main) 60%, transparent); color: var(--ui-text-color); padding: 12px 18px; cursor: pointer; text-transform: uppercase; letter-spacing: 1.5px; font-size: 0.7em; font-weight: 900; border-radius: 5px; white-space: nowrap; font-family: var(--font-body); display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; z-index: 3;
            text-shadow: 0 1px 2px var(--ui-text-shadow, transparent), 0 0 5px var(--ui-text-shadow, transparent);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }
        
        .action-btn i { 
            color: var(--smart-icon-color); 
            display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
            /* THE FIX: Replaced text-shadow transition with filter */
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); 
            transform-origin: center center; 
            -webkit-font-smoothing: antialiased;
        }
        
        .action-btn:hover { 
            background: color-mix(in srgb, var(--theme-blue-main) 15%, var(--btn-bg)) !important; border-color: var(--theme-blue-main) !important; color: var(--primary-contrast) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 0 15px var(--primary-glow), inset 0 0 15px var(--primary-glow); 
            transform: translateY(-4px); 
        }
        .action-btn:hover i { 
            color: var(--smart-icon-color) !important; 
            /* THE FIX: Hardware-accelerated image shadow instead of text-shadow */
            filter: drop-shadow(0 0 8px var(--smart-icon-color)); 
            transform: scale(1.15); 
        }

        .cta-glow-btn { background: var(--theme-red-accent) !important; color: var(--accent-contrast) !important; border-color: var(--theme-red-accent) !important; animation: gentlePulse 2.5s infinite; }
        .cta-glow-btn i { color: var(--accent-contrast) !important; }
        
        .cta-glow-btn:hover { 
            background: color-mix(in srgb, var(--theme-red-accent) 15%, var(--btn-bg)) !important; border-color: var(--theme-red-accent) !important; color: var(--ui-text-color) !important; animation: none; box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 0 15px var(--accent-glow), inset 0 0 15px var(--accent-glow); 
            transform: translateY(-4px); 
        }
        .cta-glow-btn:hover i {
            color: var(--smart-icon-color) !important;
            filter: drop-shadow(0 0 8px var(--smart-icon-color));
            transform: scale(1.15);
        }

        /* The contact/chat hub trigger — brand-PRIMARY accent (vs ePrice's accent
           color) so it stands out as "talk to us" but stays in the glass vibe. */
        .chat-cta-btn { border-color: var(--theme-blue-main) !important; position: relative; }
        .chat-cta-btn i { color: var(--theme-blue-main) !important; }
        .chat-cta-btn:hover { background: color-mix(in srgb, var(--theme-blue-main) 15%, var(--btn-bg)) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 0 15px var(--primary-glow); }
        .chat-cta-btn:hover i { color: var(--theme-blue-main) !important; filter: drop-shadow(0 0 8px var(--primary-glow)); transform: scale(1.15); }
        .chat-cta-btn::before { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 1.5px var(--btn-bg); z-index: 4; }

        .hide-btn { background: var(--btn-bg) !important; color: var(--ui-text-color) !important; border-color: color-mix(in srgb, var(--theme-blue-main) 60%, transparent) !important; padding: 12px 20px !important; }
        .hide-btn-text { display: inline-block !important; margin-left: 8px; font-size: 1em; } 

        /* 🔥 THE FIX: Force the dark theme variable to flip to white globally */
        :root[data-theme="dark"] { --theme-blue-dark: #ffffff; }
        
        :root[data-theme="dark"] .overlay-content, :root[data-theme="dark"] .feature-card, :root[data-theme="dark"] .mobile-map-options { background: #121212 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,0.1); }
        :root[data-theme="dark"] h3, :root[data-theme="dark"] .map-header-text { color: #ffffff !important; }
        :root[data-theme="dark"] p, :root[data-theme="dark"] .disclaimer-text { color: #aaaaaa !important; }
        :root[data-theme="dark"] .white-glove-input { color: #ffffff !important; border-bottom: 2px solid rgba(255,255,255,0.2) !important; }
        
        /* DARK MODE: FULL-SCREEN OVERLAYS (Map & Brochure) */
        :root[data-theme="dark"] #map-overlay, :root[data-theme="dark"] #brochure-overlay { background: rgba(0, 0, 0, 0.85) !important; }
        :root[data-theme="dark"] .overlay-body { background: #121212 !important; }
        :root[data-theme="dark"] #brochure-iframe { background: #121212 !important; }
        :root[data-theme="dark"] .address-strip { background: #1a1a1a !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; color: #ffffff !important; }
        :root[data-theme="dark"] .mobile-map-options { border-top: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 -5px 15px rgba(0,0,0,0.5); }
        :root[data-theme="dark"] .white-glove-input::placeholder { color: #888888 !important; }
        :root[data-theme="dark"] .feature-close { background: rgba(255,255,255,0.1) !important; color: #ffffff !important; }
        :root[data-theme="dark"] .bottom-sheet-handle { background: rgba(255,255,255,0.3) !important; }
        :root[data-theme="dark"] .spec-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
        :root[data-theme="dark"] .spec-value, :root[data-theme="dark"] #calc-result { color: #fff !important; }
        /* Lead-form muted text (calc labels, disclaimers, payment label) that lived as
           hardcoded inline grays now reads correctly on the dark card. */
        :root[data-theme="dark"] .feature-card label, :root[data-theme="dark"] .feature-card [id^="disc-"], :root[data-theme="dark"] .calc-pay-label { color: #b0b0b0 !important; }
        :root[data-theme="dark"] .calc-result-box { background: rgba(255,255,255,0.06) !important; border-color: rgba(255,255,255,0.08) !important; }
        
        /* DARK MODE DEALER TOOLS */
        :root[data-theme="dark"] .tool-btn { color: #ffffff !important; border-color: color-mix(in srgb, var(--theme-red-accent) 60%, transparent) !important; background: rgba(255,255,255,0.03); }
        :root[data-theme="dark"] .tool-btn:hover { background: color-mix(in srgb, var(--theme-blue-main) 20%, rgba(255,255,255,0.05)); border-color: var(--theme-blue-main) !important; color: #ffffff !important; box-shadow: 0 12px 25px rgba(0,0,0,0.4); }
        :root[data-theme="dark"] .tool-btn:hover i { text-shadow: 0 0 15px var(--theme-blue-main); }

        /* THE MAP INVERTER: Mathematically generates a Dark Mode map without an API key */
        :root[data-theme="dark"] #map-overlay .overlay-frame { filter: invert(90%) hue-rotate(180deg) contrast(1.1) grayscale(0.2); background: transparent; }

        /* Custom fake cursor removed for reliability: it froze on the UI whenever the mouse
           moved over the tour iframe (parent mousemove stops firing there). Real system cursor now shows. */

        body, html { position: fixed; width: 100%; height: 100%; height: 100dvh; margin: 0; padding: 0; font-family: var(--font-body); overflow: hidden; background: var(--primary-dark); touch-action: none; overscroll-behavior: none; color: #333; }
        
        #boot-curtain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.95)), var(--theme-blue-main); z-index: 99999; transition: opacity 0.8s ease; display: flex; align-items: center; justify-content: center; }
        #splash-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1000; transition: opacity 0.8s ease; padding: 20px; box-sizing: border-box; overflow: hidden; background: #000; }
        
        #splash-bg { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7)), var(--splash-bg-image); background-size: cover; background-position: center; animation: kenBurns 25s infinite alternate ease-in-out; z-index: -1; }
        @keyframes kenBurns { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.08) translate(-1%, -1%); } }
        #splash-video { display: none; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); z-index: -1; object-fit: cover; opacity: 0.5; filter: contrast(1.1); }

        .stagger-in { opacity: 0; transform: translateY(40px); transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1); will-change: opacity, transform; }
        .stagger-in.visible { opacity: 1; transform: translateY(0); }

        .luxury-border { width: 100%; max-width: 700px; margin-top: 20px; z-index: 2; }
        .content { text-align: center; background: rgba(0, 0, 0, 0.5); padding: 60px 40px; color: var(--accent-color); border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); box-shadow: 0 30px 60px rgba(0,0,0,0.5); border-radius: 24px; transform: translateZ(0); }
        
        #tour-loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.95)), var(--theme-blue-main); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: 995; display: none; flex-direction: column; justify-content: center; align-items: center; transition: opacity 1.5s ease, backdrop-filter 1.5s ease; pointer-events: none; transform: translateZ(0); }
        .premium-loader-logo { width: 220px; max-width: 80vw; animation: pulse-glow 2.5s infinite ease-in-out; filter: drop-shadow(0 0 20px rgba(255,255,255,0.5)); }
        @keyframes pulse-glow { 0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 10px rgba(255,255,255,0.1)) grayscale(0.7); transform: scale(0.98); } 50% { opacity: 1; filter: drop-shadow(0 0 40px var(--theme-blue-main)) grayscale(0); transform: scale(1.02); } }
        .loading-text { color: #fff; font-family: var(--font-heading); letter-spacing: 5px; font-size: 0.8em; text-transform: uppercase; animation: pulse 2s infinite; margin-top: 30px; opacity: 0.8; }
        @keyframes pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.3; } }

        .course-logo-container { position: absolute; top: 30px; left: 0; width: 100%; display: flex; justify-content: center; z-index: 1002; }
        
        .property-logo { width: var(--logo-width-desktop); height: auto; filter: drop-shadow(0px 0px 15px rgba(255, 255, 255, 0.85)); transition: transform 0.3s ease; }
        .property-logo:hover { transform: scale(1.02); }
        .tour-logo-overlay { position: fixed; top: 40px; left: 0; width: 100%; display: flex; justify-content: center; z-index: 990; display: none; pointer-events: none; }
        /* 🔥 THE FIX: Map the UI logo to the desktop variable */
        .tour-logo-overlay img { width: var(--logo-width-desktop, 250px) !important; max-width: 100%; pointer-events: auto; filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0px 0px 25px rgba(255, 255, 255, 0.9)); transition: transform 0.3s ease; }
        .tour-logo-overlay img:hover { transform: scale(1.03); }

        h1 { font-family: var(--font-heading); margin: 0; font-size: 3.5em; text-transform: uppercase; letter-spacing: 8px; font-weight: 900; color: #fff; line-height: 1.1; text-shadow: 0 4px 10px rgba(0,0,0,0.5); }
        p.sub { margin: 5px 0 40px 0; font-size: 1.2em; text-transform: uppercase; letter-spacing: 6px; color: var(--theme-red-accent); font-weight: 700; }
        
        .start-btn { padding: 18px 50px; font-size: 0.9em; color: #fff; background: transparent; border: 2px solid rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 4px; transition: 0.3s; font-family: var(--font-body); font-weight: 700; border-radius: 50px; }
        .start-btn:hover { background: var(--theme-blue-main); color: var(--accent-color); border-color: var(--theme-blue-main); box-shadow: 0 0 20px var(--glow-blue); transform: scale(1.05); }
        
        .branding { position: absolute; bottom: 10px; right: 40px; width: auto; text-align: center; color: rgba(255, 255, 255, 0.6); z-index: 1001; font-size: 8px; text-transform: uppercase; letter-spacing: 2px; transition: 0.3s ease; font-family: var(--font-body); }
        .branding img { display: block; width: 90px; margin: 5px auto 0 auto; opacity: 0.8; transition: transform 0.3s ease, opacity 0.3s ease; }
        .branding:hover { color: #fff; } .branding:hover img { transform: scale(1.05); opacity: 1; }
        
        @media only screen and (min-width: 801px) { p.sub { font-size: 1.5em; } .property-logo { width: var(--logo-width-desktop); } }

        #tour-frame { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; box-sizing: border-box; border: none; box-shadow: inset 0 0 80px rgba(0,0,0,0.6); pointer-events: none; }
        .active-frame { /* Border removed for maximum immersion */ }
        
        [data-tooltip] { position: relative; }
        [data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(10px); background: var(--theme-blue-main); color: var(--primary-contrast); padding: 8px 14px; border-radius: 6px; font-size: 11px; font-weight: 700; font-family: var(--font-body); white-space: nowrap; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 4px 15px rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); letter-spacing: 1.5px; text-transform: uppercase; z-index: 1000; }
        [data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

        .cinema-fade { opacity: 0.15 !important; transition: opacity 0.8s ease; will-change: opacity; backface-visibility: hidden; }
        .cinema-fade:hover { opacity: 1 !important; }

        /* UPGRADED UI BAR (Detached Glass Layer fixes Tooltip cutoff) */
        /* GLITCH FIXED: Border and Shadow moved to the Glass layer to prevent edge bleed */
        #ui-bar { position: relative; overflow: visible; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; padding: 12px 20px; border-radius: 6px; transform: translateZ(0); align-items: center; justify-content: center; max-width: 95vw; z-index: 10; border: none; box-shadow: none; }
        /* GPU ACCELERATION ADDED: Prevents alpha-channel popping during fades */
        .ui-bar-glass { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--ui-bar-bg); border: 1px solid var(--btn-border); box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 20px rgba(0, 0, 0, 0.2); border-radius: 6px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; z-index: 1; pointer-events: none; box-sizing: border-box; backface-visibility: hidden; transform: translate3d(0, 0, 0); will-change: transform, opacity; }
        .ui-bar-glass::before { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); animation: lightSweep 12s infinite; pointer-events: none; z-index: 2; }
        @keyframes lightSweep { 0%, 80% { left: -150%; } 100% { left: 200%; } }

        #ui-container { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translate3d(0,0,0); z-index: 950; display: none; flex-direction: column; align-items: center; gap: 15px; width: auto; transition: opacity 0.4s ease, transform 0.4s ease; backface-visibility: hidden; will-change: transform, opacity; }
        .ui-hidden { opacity: 0 !important; transform: translateX(-50%) translateY(20px) translate3d(0,0,0) !important; pointer-events: none !important; }
        /* Drag handle for swipe-to-hide the bar — mobile only (see media query). */
        #ui-bar-handle { display: none; }

        /* UPGRADED: Restore UI Pill (Neon Glass Sync) */
        #restore-ui-btn { position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%) translate3d(0,0,0); z-index: 960; display: none; background: var(--ui-toast-bg); border: 1px solid color-mix(in srgb, var(--theme-blue-main) 60%, transparent); color: var(--ui-text-color); padding: 10px 24px; border-radius: 50px; cursor: pointer; font-size: 1em; box-shadow: 0 6px 20px rgba(0,0,0,0.25); backdrop-filter: blur(15px); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; will-change: transform; backface-visibility: hidden; }
        #restore-ui-btn i { color: var(--smart-icon-color); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); font-size: 1.1em; }
        
        #restore-ui-btn:hover { 
            background: color-mix(in srgb, var(--theme-blue-main) 15%, var(--ui-toast-bg)) !important; 
            border-color: var(--theme-blue-main) !important; 
            color: var(--ui-text-color) !important; 
            transform: translateX(-50%) translateY(-4px) translate3d(0,0,0); 
            box-shadow: 0 8px 25px rgba(0,0,0,0.15), 0 0 15px var(--primary-glow), inset 0 0 15px var(--primary-glow); 
        }
        #restore-ui-btn:hover i { 
            color: var(--smart-icon-color) !important; 
            transform: scale(1.15); 
            text-shadow: 0 0 12px var(--smart-icon-color); 
        }

        /* --- SLEEK UTILITY BUTTONS (Phone & Social) --- */
        .phone-display { position: fixed; top: 40px; right: 40px; z-index: 1005; display: flex; align-items: center; justify-content: flex-start; background: var(--ui-toast-bg); border: 1px solid color-mix(in srgb, var(--theme-blue-main) 60%, transparent); color: var(--ui-text-color); border-radius: 50px; height: 42px; width: 42px; box-sizing: border-box; text-decoration: none; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 6px 20px rgba(0,0,0,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
        .phone-display i { min-width: 40px; text-align: center; font-size: 1.1em; color: var(--smart-icon-color); transition: all 0.3s ease; }
        .phone-display .phone-text { font-family: var(--font-body); font-size: 0.95em; font-weight: 700; letter-spacing: 1px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; }

        /* Text Us button — same glass language as the Call button, stacked just below it. Hidden until a dealer sets an SMS number. */
        .sms-display { position: fixed; top: 90px; right: 40px; z-index: 1005; display: flex; opacity: 0; visibility: hidden; pointer-events: none; align-items: center; justify-content: flex-start; background: var(--ui-toast-bg); border: 1px solid color-mix(in srgb, var(--theme-blue-main) 60%, transparent); color: var(--ui-text-color); border-radius: 50px; height: 42px; width: 42px; box-sizing: border-box; text-decoration: none; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 6px 20px rgba(0,0,0,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); overflow: hidden; }
        .sms-display.visible { opacity: 1; visibility: visible; pointer-events: auto; }
        .sms-display i { min-width: 40px; text-align: center; font-size: 1.1em; color: var(--smart-icon-color); transition: all 0.3s ease; }
        .sms-display .sms-text { font-family: var(--font-body); font-size: 0.95em; font-weight: 700; letter-spacing: 1px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; }
        @media (min-width: 801px) {
            .sms-display:hover { width: 150px; box-shadow: 0 8px 25px rgba(0,0,0,0.35); border-color: color-mix(in srgb, var(--theme-blue-main) 50%, transparent); }
            .sms-display:hover i { color: var(--theme-blue-main); text-shadow: 0 0 12px var(--primary-glow); }
            .sms-display:hover .sms-text { opacity: 1; padding-right: 15px; }
        }

        /* Desktop Hover: Expands to reveal number and illuminates icon */
        @media (min-width: 801px) {
            .phone-display:hover { width: 175px; box-shadow: 0 8px 25px rgba(0,0,0,0.35); border-color: color-mix(in srgb, var(--theme-blue-main) 50%, transparent); }
            .phone-display:hover i { color: var(--theme-blue-main); text-shadow: 0 0 12px var(--primary-glow); }
            .phone-display:hover .phone-text { opacity: 1; padding-right: 15px; }
        }

        .social-dropdown-container { position: fixed; top: 40px; left: 40px; z-index: 1005; display: none; flex-direction: row; gap: 12px; transition: opacity 0.4s ease, transform 0.4s ease; }
        .main-social-btn { display: none !important; }
        .social-dropdown-menu { display: flex !important; flex-direction: row !important; gap: 12px !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; position: static !important; transition: all 0.3s ease; }
        
        .social-icon-btn { width: 42px; height: 42px; border-radius: 50%; background: var(--ui-toast-bg); border: 1px solid color-mix(in srgb, var(--theme-blue-main) 60%, transparent); color: var(--smart-icon-color); font-size: 1.1em; text-decoration: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 6px 20px rgba(0,0,0,0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-sizing: border-box; }
        
        /* Desktop Hover: Illuminates icon instead of flooding background */
        .social-icon-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.35); color: var(--theme-blue-main); text-shadow: 0 0 12px var(--primary-glow); border-color: color-mix(in srgb, var(--theme-blue-main) 50%, transparent); }

        .white-glove-input { background: transparent !important; border: none !important; border-bottom: 2px solid rgba(0,0,0,0.1) !important; border-radius: 0 !important; padding: 12px 4px !important; color: #333 !important; transition: all 0.3s ease; box-shadow: none !important; width: 100%; box-sizing: border-box;}
        .white-glove-input:focus { border-bottom: 2px solid var(--theme-blue-main) !important; outline: none !important; }


        .custom-cursor-dot { position: fixed; top: -3px; left: -3px; width: 6px; height: 6px; background: var(--theme-red-accent); border-radius: 50%; pointer-events: none; z-index: 10000; transition: opacity 0.2s ease; display: none; }
        .custom-cursor-ring { position: fixed; top: -15px; left: -15px; width: 30px; height: 30px; border: 1px solid var(--theme-blue-main); border-radius: 50%; pointer-events: none; z-index: 9999; transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease, border-color 0.2s ease; display: none; box-sizing: border-box; }
        /* Fake cursor stays hidden on desktop too (see note above). */

        /* --- UPGRADED CONTROL CENTER (SCALED 25%) --- */
        .tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 35px; width: 100%; }
        
        .tool-btn { 
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: transparent; padding: 32px 15px; border-radius: 20px; color: #333; text-decoration: none; font-weight: 900; font-size: 0.9em; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); border: 1px solid color-mix(in srgb, var(--theme-red-accent) 60%, transparent); cursor: pointer; text-align: center; font-family: var(--font-body); text-transform: uppercase; letter-spacing: 2px; box-shadow: 0 6px 20px rgba(0,0,0,0.03); 
        }
        
        .tool-btn i { 
            display: block; 
            font-size: 2.6em; color: var(--theme-blue-main); margin: 0; 
            /* THE FIX: Replaced text-shadow transition with filter */
            transition: transform 0.3s ease-out, color 0.3s ease-out, filter 0.3s ease-out; 
            transform-origin: center center; 
            -webkit-font-smoothing: antialiased;
        }
        
        .tool-btn:hover { 
            background: color-mix(in srgb, var(--theme-blue-main) 5%, transparent); border-color: color-mix(in srgb, var(--theme-blue-main) 40%, transparent); box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
            transform: translateY(-6px); 
        }
        .tool-btn:hover i { 
            color: var(--theme-blue-main); 
            /* THE FIX: Hardware-accelerated image shadow instead of text-shadow */
            filter: drop-shadow(0 4px 10px var(--primary-glow)); 
            transform: scale(1.15); 
        }

        /* Mobile specific scale-down so it doesn't break small screens */
        @media only screen and (max-width: 800px) { 
            .tools-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 20px; } 
            .tool-btn { padding: 20px 10px; font-size: 0.75em; gap: 10px; border-radius: 14px; letter-spacing: 1px;}
            .tool-btn i { font-size: 1.8em; }
        }

        .short-text { display: none; }
        .long-text { display: inline; }

        /* UPGRADED FLOORPLAN SCALE - CHAMELEON ENGINE SYNCED (Sleek Brand Accents) */
        #sitemap-panel { display: grid; position: fixed; bottom: 120px; right: 50px; width: 40vw; max-width: 900px; height: 40vh; max-height: 600px; min-width: 450px; min-height: 300px; z-index: 981; background: var(--ui-toast-bg); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border: 1px solid color-mix(in srgb, var(--theme-blue-main) 50%, transparent); border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 20px var(--primary-glow); overflow: hidden; touch-action: none; box-sizing: border-box; color: var(--ui-text-color); grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr);
        /* The Ghost State */
        opacity: 0; visibility: hidden; pointer-events: none; transform: translate3d(0, 35px, 0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; will-change: transform, opacity; }
        
        #sitemap-panel.active-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate3d(0,0,0); transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
        
        .drag-handle { background: color-mix(in srgb, var(--theme-blue-main) 8%, transparent); color: var(--ui-text-color); padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; position: relative; border-bottom: 1px solid color-mix(in srgb, var(--theme-blue-main) 30%, transparent); box-sizing: border-box; width: 100%; }
        
        /* DYNAMIC CHAMELEON CONTROLS (+, -, X) */
        .close-panel-icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--btn-bg); border: 1px solid var(--btn-border); line-height: 1; color: var(--ui-text-color); transition: 0.2s; cursor: pointer; box-sizing: border-box;}
        .close-panel-icon:hover { background: var(--theme-red-accent); color: var(--accent-contrast); border-color: var(--theme-red-accent); transform: scale(1.05);}
        .header-zoom-controls { display: flex; align-items: center; gap: 8px; }
        .header-zoom-btn { width: 24px; height: 24px; background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--ui-text-color); font-size: 12px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: 0.2s; cursor: pointer;}
        .header-zoom-btn:hover { background: var(--theme-blue-main); color: var(--primary-contrast); border-color: var(--theme-blue-main); }
        
        .resizer { width: 30px; height: 30px; background: transparent; position: absolute; left: 0; top: 0; clip-path: none; border-bottom-right-radius: 8px; border-top-left-radius: 0; display: flex; align-items: center; justify-content: center; z-index: 100; cursor: se-resize; }
        .resizer::after { content: ''; width: 14px; height: 14px; border-top: 2px solid var(--ui-text-color); border-left: 2px solid var(--ui-text-color); margin-top: -3px; margin-left: -3px; opacity: 0.4; }
        
        /* DEAD SPACE FIX (Forced Seamless White Canvas globally via CSS Grid) */
        #sm-container-wrapper { border-radius: 0; background: #ffffff !important; height: 100%; width: 100%; overflow: hidden; position: relative; }
        #sm-inner-container { width: 100%; height: 100%; position: relative; overflow: hidden; background: #ffffff !important; }
        #sm-transform-layer { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; display: inline-block; }
        #sm-image { display: block; width: auto; height: auto; max-width: none; max-height: none; }
        
        .disclaimer-text { font-size: 0.65em; color: var(--ui-text-color); text-align: center; padding: 5px 10px; border-top: 1px solid var(--btn-border); background: var(--btn-bg); text-transform: uppercase; letter-spacing: 1px; min-height: 34px; height: auto; box-sizing: border-box; display: flex; align-items: center; justify-content: center; line-height: 1.3; white-space: normal; width: 100%;}
        
        .radar-blip { position: absolute; width: 24px; height: 24px; background: var(--theme-red-accent); border: 3px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); z-index: 50; box-shadow: 0 0 15px rgba(0,0,0,0.6); transition: 0.3s background; }
        .radar-blip::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border-radius: 50%; border: 2px solid var(--theme-red-accent); animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite; }
        @keyframes pulse-ring { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(2.5); opacity: 0; } }
        
        .radar-blip.active-blip { background: #fff; border-color: var(--theme-red-accent); }
        .radar-blip.active-blip::before { display: none; }
        /* Cone rotation is driven by --cone-rot (JS): the static hotspot heading, overridden live by the tour's real-time pan (s360-view). No more continuous sweep. */
        .vision-cone { display: none; position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: conic-gradient(from 330deg at 50% 50%, transparent 0deg, rgba(255,255,255,0.45) 30deg, transparent 60deg); border-radius: 50%; transform: translate(-50%, -50%) rotate(var(--cone-rot, 0deg)); pointer-events: none; transition: transform 0.15s linear; }
        .radar-blip.active-blip .vision-cone { display: block; }

        .radar-tooltip { position: absolute; top: -75px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); color: #fff; padding: 12px 20px; border-radius: 6px; font-size: 26px; font-weight: 900; font-family: var(--font-body); white-space: nowrap; pointer-events: none; opacity: 0; transition: 0.2s; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
        .radar-blip:hover .radar-tooltip { opacity: 1; top: -80px; }

        /* 1. PARENT LAYER (Fades in the background blur safely) */
        .custom-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-overlay); z-index: 1100; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); will-change: opacity; }
        .custom-overlay.active-overlay { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.4s ease, visibility 0.4s ease; }
        
        /* 2. MODAL BASE */
        /* 🔥 THE FIX: Removed transform and backface-visibility here to stop the iOS Safari rendering bug */
        .overlay-content { width: 90%; max-width: 1100px; height: auto; text-align: center; position: relative; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; background: var(--theme-white); box-shadow: var(--modal-shadow); cursor: default; box-sizing: border-box !important; }
        
        /* 🔥 ULTRA-PREMIUM ZERO-JANK DESKTOP ANIMATION 🔥 */
        @media (min-width: 801px) {
            .overlay-content {
                opacity: 0;
                transform: translate3d(0, 35px, 0); 
                transition: opacity 0.2s ease, transform 0.2s ease !important; 
                will-change: transform, opacity;
                backface-visibility: hidden; /* Safely applied only to Desktop */
            }
            .custom-overlay.active-overlay .overlay-content {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
            }
        }
        
        .close-btn { width: 34px; height: 34px; background: rgba(0,0,0,0.1); color: inherit; display: flex; align-items: center; justify-content: center; transition: 0.2s; border-radius: 50%; border: none; cursor: pointer; }
        .close-btn i { font-size: 16px; line-height: 0; }
        .close-btn:hover { background: var(--theme-red-accent); color: var(--accent-contrast); transform: scale(1.05); }
        
        /* UNIFIED BACKGROUND: Map & Brochure now inherit the standard dark backdrop in Light Mode */
        #map-overlay .overlay-content, #brochure-overlay .overlay-content { background: transparent !important; box-shadow: none; border-radius: 0; overflow: visible; height: 80vh;}
        
        .overlay-body { flex: 1; position: relative; width: 100%; overflow: hidden; background: #fff; display: flex; flex-direction: column; padding: 0; }
        /* iOS Safari PDF Fix Wrapper */
        .pdf-scroller { width: 100%; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; display: block; position: relative;}
        .overlay-frame { width: 100%; height: 100%; border: none; background: #fff; }
        .desktop-map { filter: grayscale(0.3) contrast(1.1); }
        
        .feature-card { max-width: 420px !important; height: auto !important; padding: 45px 35px 40px 35px !important; border-radius: 24px !important; display: flex; flex-direction: column; align-items: center; background: #fff !important; box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important; border: 1px solid rgba(0,0,0,0.05); box-sizing: border-box !important;}
        .feature-close { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.05); color: var(--theme-blue-dark); z-index: 100;}
        .feature-icon-wrapper { width: 75px; height: 75px; min-height: 75px; min-width: 75px; flex-shrink: 0; background: rgba(0, 0, 0, 0.05); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.05); }
        .feature-icon-wrapper i { font-size: 2.2em; color: var(--theme-blue-main); margin: 0; }
        #feature-popup-title { font-size: 1.4em; font-weight: 900; color: var(--theme-blue-dark); margin-bottom: 12px; letter-spacing: 0.5px; text-transform: none; text-align: center; font-family: var(--font-body); }
        #feature-popup-desc { font-size: 1.05em; color: #666; line-height: 1.6; margin: 0; text-align: center; font-family: var(--font-body); }

        .specs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px; text-align: left; width: 100%; }
        .spec-item { background: rgba(0,0,0,0.05); padding: 15px; border-radius: 8px; border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column;}
        .spec-label { font-size: 0.75em; text-transform: uppercase; color: var(--theme-blue-main); font-weight: 800; letter-spacing: 1px; margin-bottom: 5px;}
        .spec-value { font-size: 1.2em; font-weight: 700; color: #333; font-family: var(--font-body);}
        
        #map-overlay .overlay-content, #brochure-overlay .overlay-content { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); max-width: 900px; }
        
        /* HEADER BAR FOR FULL SCREEN OVERLAYS */
        .address-strip { display:flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: var(--theme-blue-main); color: var(--primary-contrast); box-sizing: border-box; width: 100%;}
        
        #map-overlay .overlay-frame { border-radius: 0 0 16px 16px; }

        .mobile-map-options { display: none; flex-direction: column; gap: 15px; align-items: center; justify-content: center; background: #fff; padding: 20px; width: 100%; box-sizing: border-box; border-top: 1px solid #eee; box-shadow: 0 -5px 15px rgba(0,0,0,0.05); flex-shrink: 0; }
        .map-header-text { font-family: var(--font-body); font-size: 0.8em; letter-spacing: 2px; font-weight: 700; color: var(--theme-blue-dark); margin-bottom: 5px; text-transform: uppercase; }
        .map-btn-row { display: flex; flex-direction: row; gap: 15px; width: 100%; }
        .map-btn { flex: 1; padding: 14px 10px; font-size: 0.85em; border-radius: 5px; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s ease; border: none; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        .apple-map { background: #000; color: #fff; border: 1px solid #000; }
        .google-map { background: #4285F4; color: #fff; border: 1px solid #4285F4; }
        .map-btn:active { transform: scale(0.98); }

        .bottom-sheet-handle { display: none; }
        
        /* 📱 MOBILE OVERRIDES */
        @media only screen and (max-width: 800px) { 
            .custom-overlay { justify-content: flex-end; padding: 0; cursor: auto; }
            /* Sheet is bled 2px past each edge (width 100%+4, flex-centered so it's
               symmetric) to cover the backdrop-filter edge hairline. Safe because body/html
               is position:fixed; overflow:hidden, so nothing can scroll. */
            .overlay-content { border-radius: 30px 30px 0 0 !important; margin: 0 !important; max-width: none !important; width: calc(100% + 4px) !important; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); padding-top: 30px !important; padding-bottom: 30px !important; max-height: 94vh; overflow-y: auto; cursor: auto;}
            .custom-overlay.active-overlay .overlay-content { transform: translateY(0); }
            
            .feature-close { top: 25px !important; right: 25px !important; background: rgba(0,0,0,0.05); }
            
            .bottom-sheet-handle { display: block; width: 45px; height: 5px; background: rgba(0,0,0,0.2); border-radius: 10px; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
            #map-overlay .overlay-content, #brochure-overlay .overlay-content { height: 85vh; padding-top: 20px !important; }
            h1 { font-size: 1.8em; letter-spacing: 5px; } 
            p.sub { font-size: 0.9em; margin: 10px 0 30px 0; }
            .start-btn { padding: 15px 40px; font-size: 0.8em; border: 1px solid rgba(255,255,255,0.4); border-radius: 5px;}
            
            #tour-frame { transition: none !important; box-shadow: none !important; } 
            
            .course-logo-container { top: 30px; }
            .property-logo { width: var(--logo-width-mobile) !important; }
            .luxury-border { margin-top: 0px; }
            .content { padding: 40px 20px; }
            .branding { position: absolute; bottom: 15px; right: auto; margin-top: 15px; text-align: center; width: 100%; font-size: 7px; opacity: 0.8; }
            .branding img { width: 75px; margin: 5px auto 0 auto; }
            
           #ui-container { width: 100%; bottom: 0; left: 0; transform: none; padding: 0; gap: 0; }

            /* Grab handle to swipe the whole bar down. Small visible pill, but a wide
               28px-tall touch target so it's easy to grab and won't fight the buttons. */
            #ui-bar-handle { display: flex; align-items: center; justify-content: center; width: 100%; height: 28px; margin: 0 0 2px; touch-action: none; }
            #ui-bar-handle::before { content: ''; width: 52px; height: 5px; border-radius: 999px; background: var(--ui-text-color, #fff); opacity: .55; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

            /* Hidden state slides the whole bar fully off the bottom (bottom-sheet physics). */
            .ui-hidden { transform: translateY(120%) !important; opacity: 0 !important; pointer-events: none !important; }
            
            #ui-bar { 
                width: 100%; max-width: 100vw; 
                justify-content: space-between; 
                padding: 15px 8px; 
                gap: 8px; box-sizing: border-box; 
                border-radius: 20px 20px 0 0; 
                flex-wrap: nowrap; 
                display: flex; 
            }
            /* Restore the 2px bleed (you confirmed this fixed the bar). Safe: body is
               position:fixed; overflow:hidden. Glass is pointer-events:none behind buttons. */
            .ui-bar-glass { border-radius: 20px 20px 0 0 !important; border-bottom: none !important; left: -2px; right: -2px; }
            .action-btn { 
                flex: 1 1 0; 
                flex-direction: column; 
                align-items: center; 
                justify-content: center; 
                font-size: 0.65em; 
                padding: 8px 4px; 
                height: auto; 
                gap: 6px; 
                border-radius: 12px; 
                white-space: nowrap; 
            }
            .action-btn i { font-size: 1.8em; margin: 0; }
            .hide-btn { display: none !important; } 
            
            .short-text { display: inline; }
            .long-text { display: none; }
            
            .tour-logo-overlay { top: 15px !important; align-items: flex-start; padding-top: 5px;}
            /* 🔥 THE FIX: Map the mobile UI logo to the mobile variable */
            .tour-logo-overlay img { max-width: var(--logo-width-mobile, 180px) !important; width: 100% !important; max-height: 60px !important; height: auto !important; object-fit: contain; }
            /* Sit clear of the very bottom edge so swiping up to restore doesn't fight
               Safari's URL-bar/home-indicator gestures. Tap or swipe up both restore. */
            #restore-ui-btn { padding: 10px 24px; font-size: 0.9em; bottom: calc(26px + env(safe-area-inset-bottom)); touch-action: none; }
            
            .phone-display { top: 15px; right: 15px; bottom: auto; left: auto; transform: none; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; padding: 0 !important; justify-content: center; align-items: center; border-radius: 50%; z-index: 1005; box-sizing: border-box !important; }
            .phone-display .phone-text { display: none; }
            .phone-display i { font-size: 1.1em; margin: 0; }
            .sms-display { top: 60px; right: 15px; width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; padding: 0 !important; justify-content: center; align-items: center; border-radius: 50%; box-sizing: border-box !important; }
            .sms-display .sms-text { display: none; }
            .sms-display i { font-size: 1.1em; margin: 0; }
            
            .social-dropdown-container { top: 15px; left: 15px; flex-direction: column; gap: 10px; }
            .main-social-btn { display: flex !important; }
            .social-dropdown-menu { position: absolute !important; top: 48px !important; left: 0 !important; flex-direction: column !important; gap: 10px !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(-10px) !important; }
            .social-dropdown-menu.active { opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; }
            .social-icon-btn { width: 38px !important; height: 38px !important; min-width: 38px !important; min-height: 38px !important; font-size: 1.1em; }
            
            .social-icon-btn[data-tooltip]::after { left: 100%; transform: translateX(10px) translateY(0); bottom: auto; top: 50%; transform: translateY(-50%) translateX(10px); }
            .social-icon-btn[data-tooltip]:hover::after { transform: translateY(-50%) translateX(5px); }

            .mobile-map-options { display: flex; height: auto; padding-bottom: 25px; } 
            
            #feature-popup-title { font-size: 1.2em; }
            #feature-popup-desc { font-size: 0.95em; }

            #iframe-container {
                transition: height 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important;
            }
            
            /* =========================================
               MOBILE LOCATION MAP FIX
               ========================================= */
            #map-overlay .overlay-content {
                position: absolute !important; bottom: 0 !important; top: auto !important;
                left: -2px !important; margin: 0 !important; padding: 0 !important;
                width: calc(100% + 4px) !important; max-width: none !important; height: 85vh !important;
                border: none !important;
                border-radius: 20px 20px 0 0 !important;
                background: #ffffff !important;
                overflow: hidden !important;
                box-sizing: border-box !important;
                display: flex !important; flex-direction: column !important;
            }
            /* Dark Mode Sync */
            :root[data-theme="dark"] #map-overlay .overlay-content { background: #121212 !important; border-top: 1px solid rgba(255,255,255,0.1) !important; }
            
            /* Forces edge-to-edge flush layout */
            #map-overlay .address-strip { width: 100% !important; box-sizing: border-box !important; }
            #map-overlay .overlay-body { flex-grow: 1 !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; }
            /* Map iframe fills the space between the address header and the Open-in-App
               buttons, so there's no white gap above the buttons. */
            #map-overlay .overlay-frame { flex: 1 1 auto !important; height: auto !important; min-height: 0 !important; }
            .mobile-map-options { width: 100% !important; margin: 0 !important; box-sizing: border-box !important; border-radius: 0 !important; }
            
            /* Re-aligns the close button to the new edge */
            #map-overlay .close-btn { top: 15px !important; right: 15px !important; z-index: 100 !important; }

            /* =========================================
               MOBILE FLOORPLAN FIX (BOTTOM 35% SHEET)
               ========================================= */
            #sitemap-panel { 
                display: grid !important; grid-template-rows: auto 1fr auto !important; grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 35vh !important; max-height: 35vh !important; left: 0 !important; right: 0 !important; top: auto !important; bottom: 0 !important;
                transform: translateY(150%) !important; border-radius: 20px 20px 0 0 !important; border-bottom: none !important;
                transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; box-shadow: 0 -10px 30px rgba(0,0,0,0.8), 0 -5px 20px var(--primary-glow) !important; border-top: 1px solid color-mix(in srgb, var(--theme-blue-main) 60%, transparent) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
            }
            
            #sitemap-panel.active-panel { transform: translateY(0) !important; }
            #sitemap-panel .drag-handle { padding: 10px 15px !important; height: 45px !important; }
            #sitemap-panel::before { display: none !important; }
            
            /* Destroys the desktop resizer bracket on mobile */
            #sitemap-panel .resizer { display: none !important; }
            
            #sm-container-wrapper { height: 100% !important; width: 100% !important; left: 0 !important; margin: 0 !important; padding: 0 !important; }
            #sm-inner-container { left: 0 !important; margin: 0 !important; padding: 0 !important; }

            #sitemap-panel .close-panel-icon { position: relative !important; top: auto !important; right: auto !important; z-index: 99999 !important; width: 26px !important; height: 26px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
            
            #sitemap-panel .header-zoom-controls { padding-right: 0 !important; }
            #sitemap-panel .disclaimer-text { height: 25px !important; min-height: 25px !important; font-size: 0.55em !important; padding: 0 10px !important; }

            :root[data-theme="dark"] #sitemap-panel { border-top: 1px solid color-mix(in srgb, var(--theme-blue-main) 60%, transparent) !important; }
        }
        @media only screen and (min-width: 801px) { .mobile-map-options { display: none; } }
        .hidden { opacity: 0; pointer-events: none; visibility: hidden; }
        
        /* Interaction hint — non-blocking (pointer-events:none) so the first swipe goes
           straight to the pano, and a clean SOLID pill (no backdrop-filter, which Safari
           drops over the moving pano and causes the glassy-then-flat flicker). */
        #interaction-prompt { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 850; display: none; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.6s ease; background: transparent; pointer-events: none; -webkit-tap-highlight-color: transparent; }
        /* Brand-tinted dark pill with a gentle brand-glow breathe — clean but with pop,
           and it picks up each dealer's colors (no hardcoded brand, no backdrop-filter). */
        .prompt-text { color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 0.98em; letter-spacing: 0.4px; background: color-mix(in srgb, var(--theme-blue-main, #005691) 24%, rgba(16, 18, 24, 0.92)); padding: 14px 30px; border-radius: 50px; white-space: nowrap; border: 1px solid color-mix(in srgb, var(--theme-blue-main, #005691) 70%, transparent); box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 22px var(--primary-glow, rgba(0,86,145,0.5)); transform: translateZ(0); animation: promptGlow 2.4s ease-in-out infinite; }
        @keyframes promptGlow { 0%, 100% { box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 16px var(--primary-glow, rgba(0,86,145,0.3)); } 50% { box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 34px var(--primary-glow, rgba(0,86,145,0.7)); } }
        @media (prefers-reduced-motion: reduce) { .prompt-text { animation: none; } }

        /* 🔥 UPGRADED LOADING SCREEN (Cinematic Radial Glow) 🔥 */
        #tour-loading-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.9) 100%), var(--theme-blue-main); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); z-index: 995; display: none; flex-direction: column; justify-content: center; align-items: center; transition: opacity 1.5s ease, backdrop-filter 1.5s ease; pointer-events: none; transform: translateZ(0); overflow: hidden; }
        .premium-loader-logo { width: 220px; max-width: 80vw; animation: pulse-glow 2.5s infinite ease-in-out; filter: drop-shadow(0 0 20px rgba(255,255,255,0.5)); position: relative; z-index: 10; }
        @keyframes pulse-glow { 0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 10px rgba(255,255,255,0.1)) grayscale(0.7); transform: scale(0.98); } 50% { opacity: 1; filter: drop-shadow(0 0 40px var(--theme-blue-main)) grayscale(0); transform: scale(1.02); } }
        .loading-text { color: #fff; font-family: var(--font-heading); letter-spacing: 5px; font-size: 0.8em; text-transform: uppercase; animation: pulse 2s infinite; margin-top: 30px; opacity: 0.8; position: relative; z-index: 10; }
        @keyframes pulse { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.3; } }

        /* 🔥 360 SPHERE LOADING ANIMATION (Responsive Scales) 🔥 */
        .sphere-container { position: absolute; width: 600px; height: 600px; max-width: 150vw; max-height: 150vw; transform-style: preserve-3d; animation: rotateSphere 30s infinite linear; opacity: 0.15; z-index: 0; pointer-events: none; }
        @media (min-width: 801px) { .sphere-container { width: 900px; height: 900px; opacity: 0.1; } } /* 50% larger on Desktop */
        
        .ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid var(--theme-blue-main); border-radius: 50%; box-shadow: 0 0 20px var(--theme-blue-main); opacity: 0.5; }
        .ring:nth-child(1) { transform: rotateY(0deg); }
        .ring:nth-child(2) { transform: rotateY(30deg); }
        .ring:nth-child(3) { transform: rotateY(60deg); }
        .ring:nth-child(4) { transform: rotateY(90deg); }
        .ring:nth-child(5) { transform: rotateY(120deg); }
        .ring:nth-child(6) { transform: rotateY(150deg); }
        .ring:nth-child(7) { transform: rotateX(90deg); border-width: 4px; opacity: 0.8; }
        @keyframes rotateSphere { 0% { transform: rotateX(15deg) rotateY(0deg); } 100% { transform: rotateX(15deg) rotateY(360deg); } }

        /* Let the body handle the lock, let the iframe receive raw touch data */
    #iframe-container { transform: translateZ(0); }
    iframe { width: 100%; height: 100%; border: none; background: #000; cursor: auto; }