/* Stylesheet for the vendored pannellum viewer.
 *
 * Upstream ships its own pannellum.css; the copy inherited from the legacy repo
 * did not include it (that code wrapped the viewer in styled-components), so
 * this is written here against the class names pannellum.js actually creates.
 *
 * Two rules below are load-bearing rather than cosmetic:
 *
 *   .pnlm-dragfix   is the transparent layer pannellum attaches its pointer
 *                   handlers to. It must cover the container and sit above the
 *                   canvas, or look-around does nothing.
 *   .pnlm-load-box  and .pnlm-lbox default to display:none; pannellum turns
 *                   them on only while loading or on error. Leaving them
 *                   visible parks an opaque panel over the viewer that
 *                   swallows every drag -- the panorama renders, and nothing
 *                   responds to the mouse.
 *
 * The upstream control icons are a PNG sprite (pnlm-sprite) that the legacy
 * copy did not include either, so the buttons are drawn with plain CSS here.
 */

.pnlm-container {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 320px;
  background: #0b0b0b;
  overflow: hidden;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;   /* let pannellum own touch gestures, not the page */
}
.pnlm-grab { cursor: grab; }
.pnlm-grabbing { cursor: grabbing; }

.pnlm-render-container {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}
.pnlm-render-container canvas { display: block; width: 100%; height: 100%; }

/* the pointer-capture layer -- see note above */
.pnlm-dragfix {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

.pnlm-preview-img {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  background-size: cover;
  background-position: center;
}
.pnlm-fade-img { position: absolute; top: 0; left: 0; }

/* controls: zoom, fullscreen, orientation */
.pnlm-controls-container {
  position: absolute;
  top: 0; left: 0;
  z-index: 2;
  margin: .6rem;
}
.pnlm-controls {
  display: block;
  margin-bottom: .4rem;
  border-radius: 6px;
  overflow: hidden;
  background: rgba(20, 26, 32, .82);
  border: 1px solid rgba(255, 255, 255, .18);
}
.pnlm-control, .pnlm-zoom-in, .pnlm-zoom-out,
.pnlm-fullscreen-toggle-button, .pnlm-orientation-button {
  display: block;
  width: 30px; height: 30px;
  cursor: pointer;
  position: relative;
  color: #e8edf2;
}
.pnlm-zoom-in + .pnlm-zoom-out { border-top: 1px solid rgba(255, 255, 255, .18); }
.pnlm-control:hover { background: rgba(255, 255, 255, .12); }

/* glyphs, since the upstream sprite is absent */
.pnlm-zoom-in::before, .pnlm-zoom-out::before,
.pnlm-fullscreen-toggle-button::before {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font: 700 16px/1 system-ui, sans-serif;
}
.pnlm-zoom-in::before { content: "+"; }
.pnlm-zoom-out::before { content: "-"; }
.pnlm-fullscreen-toggle-button::before { content: "[ ]"; font-size: 11px; }
.pnlm-fullscreen-toggle-button-active::before { content: "><"; font-size: 11px; }
.pnlm-orientation-button { display: none; }  /* device orientation: mobile only */

/* loading and error panels -- hidden unless pannellum shows them */
.pnlm-load-box, .pnlm-lbox {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: none;          /* pannellum sets display when it needs these */
  z-index: 3;
  text-align: center;
  color: #e8edf2;
  font: 14px/1.45 system-ui, sans-serif;
  background: rgba(0, 0, 0, .6);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  max-width: 80%;
}
.pnlm-load-box p, .pnlm-lmsg { margin: .2rem 0; }
.pnlm-lbar {
  width: 150px; height: 6px;
  margin: .6rem auto 0;
  background: #333;
  border-radius: 3px;
  overflow: hidden;
}
.pnlm-lbar-fill { height: 100%; background: #4da3ff; }
.pnlm-load-button { display: none; }
.pnlm-error-msg { display: none; }

/* informational overlays we do not use */
.pnlm-panorama-info, .pnlm-title-box, .pnlm-author-box,
.pnlm-about-msg, .pnlm-compass { display: none; }

/* hotspots (not wired yet, but keep them sane if they appear) */
.pnlm-hotspot-base { position: absolute; visibility: hidden; cursor: default; }
.pnlm-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  padding: .3rem .5rem;
  border-radius: 4px;
  font: 12px/1.3 system-ui, sans-serif;
  white-space: nowrap;
}
.pnlm-hot-spot-debug-indicator { display: none; }