/* =============================================================
   GLOBAL RESET & LAYOUT
   ============================================================= */
body {
    margin: 0; padding: 0;
    overflow: hidden; /* Prevent scrolling */
    background: #000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

#pano {
    position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
}

/* =============================================================
   GLOBAL RESET & LAYOUT
   ============================================================= */
body { margin: 0; padding: 0; overflow: hidden; background: #111; font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; user-select: none; }
#pano { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; }
/* =============================================================
   BRANDING LOGOS
   ============================================================= */

.brand-logo {
    position: absolute;
    top: 20px;
    z-index: 50; /* Above the viewer (0), but below the Sidebar (100) */
    
    /* Maximum limits to keep it looking professional */
    height: 120px; 
    width: auto; /* Maintain aspect ratio */
    max-width: 200px;
    
    /* Drop shadow for visibility on bright skies */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    
    /* Optional: Make clickable */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.brand-logo:hover {
    transform: scale(1.05);
}

/* Position Left Logo */
.logo-left {
    left: 20px;
}

/* Position Right Logo */
.logo-right {
    right: 20px;
}
/* =============================================================
   SIDEBAR MENU
   ============================================================= */
.sidebar { position: absolute; top: 0; left: 0; width: 280px; height: 100%; background: rgba(15, 15, 15, 0.85); backdrop-filter: blur(12px); border-right: 1px solid rgba(255, 255, 255, 0.1); z-index: 100; transition: transform 0.4s ease; display: flex; flex-direction: column; }
.sidebar.closed { transform: translateX(-100%); }
.toggle-btn { position: absolute; right: -45px; top: 50%; transform: translateY(-50%); width: 45px; height: 60px; background: rgba(15, 15, 15, 0.9); border-radius: 0 8px 8px 0; border: 1px solid rgba(255, 255, 255, 0.1); border-left: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; }
.menu-header { color: white; padding: 24px; font-size: 16px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,0.1); text-transform: uppercase; letter-spacing: 1px; }
.menu-option { padding: 16px 24px; color: rgba(255, 255, 255, 0.6); cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.05); transition: 0.2s; font-size: 14px; }
.menu-option:hover { background: rgba(255, 255, 255, 0.1); color: white; padding-left: 28px; }
.menu-option.active { background: rgba(255, 255, 255, 0.15); border-left: 4px solid #00a8ff; color: white; }

/* =============================================================
   PROFESSIONAL INFO-CARD MARKERS
   ============================================================= */

/* 1. Wrapper */
.pro-hotspot { width: 0; height: 0; position: absolute; z-index: 10; cursor: pointer; }
.pro-hotspot:hover { z-index: 9999 !important; }

/* 2. Anchor Dot */
.hotspot-dot {
    width: 14px; height: 14px; background: white; border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.3);
    position: absolute; top: 0; left: 0; transform: translate(-50%, -50%);
    z-index: 2; transition: all 0.2s ease; animation: pulse 2s infinite;
}
.hotspot-dot::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:6px; height:6px; background:#00a8ff; border-radius:50%; }

/* 3. Lines */
.hotspot-slant {
    position: absolute; bottom: 0; left: 0; width: 2px; height: 40px; background: white;
    transform-origin: bottom center; transform: rotate(45deg); z-index: 1;
}
.hotspot-horizontal {
    position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: white;
    transform-origin: top left; transform: rotate(-45deg); display: flex; align-items: center;
}

/* 4. THE CARD */
.hotspot-card {
    position: absolute; 
    left: 100%; top: 50%;
    transform: translateY(-50%) translateX(-2px);
    
    display: flex; align-items: center; gap: 12px;
    background: rgba(16, 18, 27, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-left: 3px solid #00a8ff;
    padding: 10px 16px 10px 12px;
    border-radius: 6px;
    
    /* FIX: Allow width to grow automatically, never wrap */
    width: max-content; 
    min-width: 140px;
    max-width: 400px; /* Optional safety cap */
    
    opacity: 1; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover Effect on Card */
.pro-hotspot:hover .hotspot-card {
    transform: translateY(-50%) translateX(0px) scale(1.02);
    box-shadow: 0 8px 30px rgba(0,168,255,0.2);
    border-color: rgba(255,255,255,0.3);
}

/* 5. Icon Container */
.card-icon {
    width: 32px; height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; /* Prevents icon from squishing */
}
.card-icon svg { width: 18px; height: 18px; fill: #00a8ff; }

/* 6. Text Content */
.card-text { display: flex; flex-direction: column; }

.card-title {
    color: white; font-size: 13px; font-weight: 700; line-height: 1.2;
    text-transform: uppercase; letter-spacing: 0.5px;
    
    /* FIX: Force single line */
    white-space: nowrap; 
}

.card-desc {
    color: #a0a0a0; font-size: 11px; font-weight: 500; margin-top: 3px;
    display: flex; align-items: center; gap: 4px;
    
    /* FIX: Force single line */
    white-space: nowrap;
}
.card-desc svg { width: 10px; height: 10px; fill: #a0a0a0; }

/* --- LEFT ORIENTATION --- */
/* The slant flips to the left */
.pro-hotspot.left-side .hotspot-slant { 
    transform: rotate(-45deg); 
}

/* The card attaches to the LEFT end of the horizontal line */
.pro-hotspot.left-side .hotspot-card { 
    left: auto; right: 100%; 
    transform: translateY(-50%) translateX(2px);
    
    /* Swap the accent border to the Right side */
    border-left: 1px solid rgba(255,255,255,0.15); 
    border-right: 3px solid #00a8ff; 
    
    /* Note: We do NOT use row-reverse anymore. Icon stays on Left. */
}

/* =============================================================
   COLLAPSED STATE (Show/Hide Logic)
   ============================================================= */

/* When .collapsed class is added to the wrapper: */

/* 1. Hide the Slant Line */
.pro-hotspot.collapsed .hotspot-slant {
    height: 0 !important;
    opacity: 0;
    transition-delay: 0.2s; /* Wait for horizontal to close */
}

/* 2. Hide the Horizontal Line */
.pro-hotspot.collapsed .hotspot-horizontal {
    width: 0 !important;
    opacity: 0;
    transition-delay: 0s; /* Close immediately */
}

/* 3. Hide the Card */
.pro-hotspot.collapsed .hotspot-card {
    opacity: 0;
    transform: translateY(-50%) scale(0.8); /* Shrink slightly */
    pointer-events: none; /* Prevent clicking while hidden */
    transition: opacity 0.2s, transform 0.2s;
}

/* 4. Optional: Change Dot color to indicate it's closed */
.pro-hotspot.collapsed .hotspot-dot {
    background-color: #ff4757; /* Red when closed? Or keep white */
    box-shadow: 0 0 0 0 rgba(255,255,255,0); /* Pulse effect stops */
    animation: pulse 2s infinite; /* Keep pulsing to say "Click me" */
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); }
}

/* Mobile Tweak */
@media (max-width: 768px) {
    .sidebar { width: 100%; }
    .hotspot-card { padding: 8px 12px; min-width: 120px; }
    .card-title { font-size: 12px; }
        .sidebar { width: 100%; }
    
    /* Adjust Toggle Button */
    .toggle-btn { 
        top: auto; bottom: 30px; right: 20px; 
        border-radius: 50%; width: 56px; height: 56px; 
    }
    
    /* Resize Logos for Mobile */
    .brand-logo {
        height: 80px; /* Smaller on phone */
        top: 15px;
    }
    .logo-left { left: 15px; }
    .logo-right { right: 15px; }
}