/* Front-end styles with navigation controls and hotspot panel */
.vt360-container{position:relative;background:#000;overflow:hidden}
.vt360-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px}

/* Navigation Controls (Generic Layout) */
.vt360-controls{
    position:relative; /* Will be overwritten by JS to absolute in Fullscreen */
    margin-top:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 8px; /* Space between buttons */
    padding:10px;
    background:#f5f5f5;
    border-radius:8px;
    flex-wrap: wrap; /* Allows wrapping on tiny screens */
}

/* BUTTON REORDERING: Display as Left | Up | Down | Right | Hotspot */
.vt360-nav-btn.vt360-left { order: 1; }
.vt360-nav-btn.vt360-up   { order: 2; margin: 0; transform: none; }
.vt360-nav-btn.vt360-down { order: 3; margin: 0; transform: none; }
.vt360-nav-btn.vt360-right{ order: 4; }
.vt360-hotspot-list-btn   { order: 5; margin-left: 5px; }


.vt360-nav-btn{width:40px;height:40px;border:none;background:#0073aa;color:#fff;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all 0.3s}
.vt360-nav-btn:hover{background:#005a87;transform:scale(1.1)}

.vt360-hotspot-list-btn{padding:8px 16px;background:#28a745;color:#fff;border:none;border-radius:20px;cursor:pointer;font-size:14px;font-weight:bold;transition:all 0.3s}
.vt360-hotspot-list-btn:hover{background:#218838;transform:scale(1.05)}

/* Hotspot Panel */
.vt360-hotspot-panel{position:fixed;right:20px;top:50%;transform:translateY(-50%);width:300px;max-height:70vh;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,0.2);z-index:9999;overflow:hidden}
.vt360-panel-header{background:#0073aa;color:#fff;padding:15px;display:flex;justify-content:space-between;align-items:center}
.vt360-panel-header h3{margin:0;font-size:16px}
.vt360-panel-close{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.vt360-panel-close:hover{background:rgba(255,255,255,0.2);border-radius:50%}
.vt360-hotspot-list{padding:15px;max-height:calc(70vh - 60px);overflow-y:auto}
.vt360-hotspot-list ul{list-style:none;margin:0;padding:0}
.vt360-hotspot-list li{margin-bottom:8px}
.vt360-hotspot-item-btn{width:100%;padding:10px;background:#f8f9fa;border:1px solid #dee2e6;border-radius:5px;cursor:pointer;text-align:left;transition:all 0.3s;display:flex;align-items:center;gap:10px}
.vt360-hotspot-item-btn:hover{background:#e9ecef;border-color:#0073aa;transform:translateX(5px)}
.hotspot-type-badge{padding:2px 6px;border-radius:3px;font-size:10px;font-weight:bold;color:#fff;flex-shrink:0}
.vt360-type-info{background:#2196F3}
.vt360-type-scene{background:#f44336}
.vt360-type-image{background:#4CAF50}
.vt360-type-video{background:#FFC107;color:#333}
.vt360-type-pdf{background:#9C27B0}
.vt360-type-social{background:#00BCD4;} 
.hotspot-text{flex:1;font-size:14px}
.no-hotspots{text-align:center;color:#666;font-style:italic;padding:20px}

/* Modal - Default styling */
.vt360-modal{position:absolute;z-index:999999;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.8)}
.vt360-modal-content{background:#fff;margin:5% auto;padding:0;width:80%;max-width:400px;position:relative;border-radius:5px;overflow:hidden}
.vt360-modal-close{position:absolute;right:0;top:0;font-size:30px;cursor:pointer;width:40px;height:40px;background:rgba(0,0,0,0.8);color:#fff;display:flex;align-items:center;justify-content:center;z-index:10}
.vt360-modal-body{margin-top:0}
.vt360-modal-title{padding:20px 20px 0 20px; margin-top:0; color:#0073aa}
.vt360-modal-caption{font-style:italic;text-align:center;color:#333;font-size:15px;line-height:1.4} 

/* Custom Social Panel Styling */
.vt360-social-intro {
    padding: 20px;
    padding-bottom: 0;
    background: #444;
    color: #fff;
    font-size: 16px;
}
.vt360-social-intro h3 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
}
.vt360-social-intro br {
    display: none;
}
.vt360-social-links-list {
    padding: 0;
    margin: 0;
    background: #fff;
}
.vt360-social-item {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 15px 20px;
    transition: background-color 0.1s;
    line-height: 1.2;
    gap: 15px;
}
.vt360-social-divider {
    height: 1px;
    background-color: #eee;
    margin: 0 20px;
}
.vt360-social-item:last-of-type + .vt360-social-divider {
    display: none;
}
.vt360-social-item:hover {
    background-color: #f7f7f7;
}
.vt360-social-icon-wrapper {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.vt360-social-text {
    flex-grow: 1;
}
.vt360-social-name {
    font-weight: bold;
    font-size: 15px;
}
.vt360-social-caption {
    font-size: 13px;
    color: #888;
}

/* Hotspot styles */
.vt360-hs-info .pnlm-hotspot-base{background:rgba(33,150,243,.6)}
.vt360-hs-image .pnlm-hotspot-base{background:rgba(76,175,80,.6)}
.vt360-hs-video .pnlm-hotspot-base{background:rgba(255,193,7,.7)}
.vt360-hs-pdf .pnlm-hotspot-base{background:rgba(156,39,176,.7)}
.vt360-hs-social .pnlm-hotspot-base{background:rgba(0,188,212,.7)} 
.vt360-hs-scene .pnlm-hotspot-base{background:rgba(244,67,54,.7)}
.pnlm-hotspot-base{padding:4px 6px;border-radius:4px;color:#fff;font-size:12px;cursor:pointer}
.pnlm-hotspot-base:hover{opacity:.9}
.vt360-custom-hotspot .pnlm-hotspot-base{background:transparent!important;padding:0;border:none;pointer-events:all;display:block;width:fit-content;} 
.vt360-hs-icon-img{width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 4px rgba(0,0,0,.6);border:2px solid #fff}
.vt360-hs-icon-txt{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;font-size:18px;font-weight:bold;color:#fff;background:#0073aa;border-radius:50%;box-shadow:0 0 6px rgba(0,0,0,.5);border:2px solid #fff}
.vt360-hotspot-label-text{text-align:center;font-size:11px;color:#fff;margin-top:2px;padding:3px 6px;background:rgba(0,0,0,0.5);border-radius:3px;white-space:nowrap;margin-top:0} 

/* Responsive adjustments */
@media (max-width: 600px) {
    /* Smaller buttons for mobile */
    .vt360-nav-btn {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    
    .vt360-controls {
        padding: 5px;
        gap: 5px;
    }

    .vt360-hotspot-panel{width:90%;right:5%;left:5%;}
}