/* =====================================================
   MAIN PANO
   ===================================================== */

/* Vistra Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html,body{background: rgba(255,255,255,0) !important;margin:0;height:100%;font-family:Inter,system-ui,sans-serif;}
#panorama{position:relative;width:100%;height:100vh;}

/* Main viewer background */
.pnlm-container,
.pnlm-render-container,
.pnlm-panorama,
.pnlm-load-box,
.pnlm-loading,
canvas {
  background: rgba(0,0,0,1) !important;
}

/* Loader */
.pnlm-load-box,.pnlm-loading,.pnlm-load-button{display:none!important;}
.loader {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  pointer-events: none;
  transition: opacity .4s ease;
}

.loader.hide {
  opacity: 0;
}

.line-loader {
  width: 120px;
  height: 3px;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
  border-radius: 3px;
}

.line-loader::before {
  content: "";
  position: absolute;
  left: -40%;
  top: 0;
  width: 40%;
  height: 100%;
  background: #fff;
  animation: lineMove 1s ease-in-out infinite;
}

.loader img{
  width: 70px;
  height: auto;
  opacity: .3;
  transition: opacity .4s ease;
}


@keyframes lineMove {
  0% {
    left: -40%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

/* Navigation buttons */
.nav.pannl{position:absolute; bottom:48%; justify-content: space-between; width: 99%; display:flex;gap:12px;z-index:30; padding: 0 .5%; pointer-events: none; }
.nav.pannl > * {
  pointer-events: auto;
}
.nav.pannl button{
  width: 36px;
  height: 36px;
  font-size: 13px;
  padding: 0;
  background: linear-gradient(135deg,rgba(55,121,255,0.06),rgba(55,121,255,0.01)),rgba(11,15,14,0.7);
  backdrop-filter: blur(5px) saturate(150%);
  -webkit-backdrop-filter: blur(5px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.01);
  box-shadow:inset 0 .05px 0 rgba(255,255,255,0.10),0 3px 10px rgba(0,0,0,0.25);
  color: #fff;
  border-radius: 30px;
  cursor: pointer;
}

/* Title */
.pnlm-panorama-info{
  top: 10px;
  left: 10px;
  bottom: unset;
  padding: 0px;
  border-radius: 0px;
  background: linear-gradient(135deg,rgba(55,121,255,0.06),rgba(55,121,255,0.01)),rgba(11,15,14,0.75);
  backdrop-filter: blur(5px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.01);
  box-shadow: inset 0 .05px 0 rgba(255,255,255,0.10),0 3px 10px rgba(0,0,0,0.25);
}
.pnlm-title-box{
  font-weight: 600;
  font-size: 16px;
  padding: 5px 18px;
  margin: 0;
}

/* Custom Hotspot */
.custom-hotspot{
  position: absolute;
  width:25px;
  height:25px;
  background: linear-gradient(135deg,rgba(55,121,255,0.06),rgba(55,121,255,0.01)),rgba(11,15,14,1);
  backdrop-filter: blur(5px) saturate(150%);
  -webkit-backdrop-filter: blur(5px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.01);
  box-shadow:inset 0 .05px 0 rgba(255,255,255,0.10),0 3px 10px rgba(0,0,0,0.25);
  border-radius:50%;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 25;
  isolation: isolate;
}


.custom-hotspot::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 120%; 
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  padding: 0px 0px;
  border-radius: 0px;
  font-weight: 600;
  font-size: 12px;
  white-space: nowrap;
  opacity: 1;
  pointer-events: none;
  z-index: 50;
  transition: all ease 0.4s;
  isolation: isolate;
  z-index: 1;
}

.custom-hotspot:hover::after{
  bottom: 200%;
  transition: all ease 0.4s;
}

/* pulse circle */
.custom-hotspot::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(55, 121, 255, 0.65);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: hotspotPulse 1.8s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

.custom-hotspot:hover::before {
  width: 0px;
  height: 0px;
}

/* pulse animation */
@keyframes hotspotPulse {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.8;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

/* Light line */
.custom-hotspot span.tooltip-line {
  position: absolute;
  width: 1px;              
  height: 20%;           
  background: rgba(255,255,255,.2);         
  bottom: 30px;             
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  transition: opacity 0.3s ease;
  z-index: 45;
  transition: height 0.3s ease;
}

.custom-hotspot:hover span.tooltip-line {
  height: 75%;  
  transition: height .3s ease;
}

/* Scene Hotspot Fix */
.pnlm-hotspot{z-index:25;display:flex;align-items:center;justify-content:center;}
.pnlm-controls-container{ top: 3px; right: 8px; left: unset; }
.pnlm-zoom-controls{ display: none !important; }
.pnlm-compass {display: none !important;}
.pnlm-orientation-button {display: none !important;}

/* Popup */
.popup{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:.3s;z-index:40;}
.popup.active{opacity:1;pointer-events:auto;}
.popup-box{
  background: rgba(55,121,255,.25);
  border: 1px solid rgba(55,121,255,.35);
  backdrop-filter: blur(5px) saturate(150%);
  -webkit-backdrop-filter: blur(5px) saturate(150%);
  color:#fff;
  padding:20px;
  width:40vw;
  min-width: 300px;
  border-radius:10px;
  position:relative;
}

/* Fullscreen */
.pnlm-fullscreen-toggle-button {
  background: linear-gradient(135deg,rgba(55,121,255,0.06),rgba(55,121,255,0.01)),rgba(11,15,14,0.7) !important;
  backdrop-filter: blur(5px) saturate(150%);
  -webkit-backdrop-filter: blur(5px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.01);
  box-shadow: inset 0 .05px 0 rgba(255,255,255,0.10),0 3px 10px rgba(0,0,0,0.25);}
.pnlm-fullscreen-toggle-button::before {
  content: "\f14a";
  font-family: "bootstrap-icons";
  font-size: 15px;
  color: #fff;
  line-height: 26px;
  display: block;
  text-align: center;
  
}
.pnlm-fullscreen-toggle-button.pnlm-sprite.pnlm-fullscreen-toggle-button-inactive.pnlm-controls.pnlm-control.pnlm-fullscreen-toggle-button-active::before {content: "\f149";}
.popup-close{position:absolute;top:10px;right:12px;cursor:pointer;}