:root{--bg:#0f1720;--panel:#0b1220;--accent:#06b6d4;--text:#e6eef6}
*{box-sizing:border-box;font-family:Tahoma, Arial, sans-serif}
html,body,.container{height:100%;margin:0}
.container{display:flex;flex-direction:row;gap:10px;background:var(--bg);color:var(--text)}
.panorama{flex:1;min-width:0}
.sidebar{width:320px;padding:16px;background:linear-gradient(180deg,var(--panel),#051018);overflow:auto}
.sidebar h2{margin-top:0}
label{display:block;margin:8px 0;font-size:14px}
input,select,button{width:100%;padding:8px;margin-top:6px;border-radius:6px;border:1px solid rgba(255,255,255,0.08);background:#071222;color:var(--text)}
button{cursor:pointer;border:none;background:var(--accent);color:#022; font-weight:600}
.msg{margin-top:8px;min-height:22px;font-size:13px}
ul#hotspot-list{list-style:none;padding:0;margin:8px 0}
ul#hotspot-list li{padding:6px;border-radius:6px;background:rgba(255,255,255,0.03);margin-bottom:6px;font-size:13px}

/* Make viewer full height */
#panorama .pnlm-fullscreen-button{right:12px}

@media (max-width:900px){
  .sidebar{width:100%;position:relative}
  .container{flex-direction:column}
}

/* Overlay (iframe) styles */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.overlay[aria-hidden="false"]{display:flex}
.overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6)}
.overlay-content{position:relative;z-index:2;width:88%;max-width:1000px;height:78%;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.overlay-close{position:absolute;right:10px;top:6px;z-index:3;background:rgba(0,0,0,0.6);color:#fff;border:none;width:36px;height:36px;border-radius:50%;cursor:pointer}
.overlay iframe{width:100%;height:100%;display:block;border:0;background:#fff}

/* Hotspot customization */
.pnlm-hotspot-base.custom-scene {
  background-image: url("./images/museum/enter.png") !important;
  background-size: cover !important;
  background-position: center !important;
  width: 30px !important;
  height: 30px !important;
  border: none !important;
}

.pnlm-hotspot-base.custom-link {
  background-image: url("./images/museum/visibility.png") !important;
  background-size: cover !important;
  background-position: center !important;
  width: 30px !important;
  height: 30px !important;
  border: none !important;
}

.pnlm-hotspot-base.custom-gallery {
  background-image: url("./images/museum/walk.png") !important;
  background-size: cover !important;
  background-position: center !important;
  width: 30px !important;
  height: 30px !important;
  border: none !important;
}

/* Gallery styles */
.gallery-content {
  position: relative;
  z-index: 2;
  width: 90%;
  max-width: 1200px;
  height: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

#gallery-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  border: none;
  width: 50px;
  height: 50px;
  font-size: 36px;
  cursor: pointer;
  z-index: 3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-prev { left: 20px; }
.gallery-next { right: 20px; }
.gallery-nav:hover { background: rgba(0,0,0,0.9); }

.gallery-counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  z-index: 3;
}