.a360-panorama {
  position: relative;
  width: 100%;
  height: var(--a360-panorama-height, 600px);
  min-height: 240px;
  overflow: hidden;
  border-radius: 12px;
  background: #111;
  color: #fff;
  isolation: isolate;
}

.a360-panorama:focus-visible {
  outline: 3px solid #2271b1;
  outline-offset: 3px;
}

.a360-panorama__viewport {
  position: absolute;
  inset: 0;
  cursor: grab;
  opacity: 0;
  transition: opacity 240ms ease;
  touch-action: none;
}

.a360-panorama__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.a360-panorama__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 240ms ease;
}

.a360-panorama.is-ready .a360-panorama__poster {
  opacity: 0;
}

.a360-panorama__viewport:active {
  cursor: grabbing;
}

.a360-panorama.is-ready .a360-panorama__viewport {
  opacity: 1;
}

.a360-panorama__loader,
.a360-panorama__error {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #111;
  color: rgba(255, 255, 255, 0.82);
  font: 500 14px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
}

.a360-panorama__loader[hidden],
.a360-panorama__error[hidden] {
  display: none;
}
.a360-panorama__toggle {
  position: absolute;
  z-index: 4;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  color: #fff;
  background: rgba(3, 17, 35, 0.56);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.a360-panorama__toggle:focus-visible {
  outline: 3px solid #5bb0ff;
  outline-offset: 3px;
}

.a360-panorama:not(.is-ready) .a360-panorama__toggle {
  opacity: 0;
  pointer-events: none;
}

.a360-panorama__interaction-hint {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(86%, 360px);
  transform: translate(-50%, -50%);
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
  font: 500 clamp(18px, 2.2vw, 30px)/1.18 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms ease, visibility 240ms ease;
}

.a360-panorama__interaction-hint svg {
  position: relative;
  width: 112px;
  height: 72px;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
  animation: a360-interaction-hint-sway 2.2s ease-in-out infinite;
  -webkit-animation: a360-interaction-hint-sway 2.2s ease-in-out infinite;
  will-change: left;
}

@keyframes a360-interaction-hint-sway {
  0%, 100% { left: -7px; }
  50% { left: 7px; }
}

@-webkit-keyframes a360-interaction-hint-sway {
  0%, 100% { left: -7px; }
  50% { left: 7px; }
}

.a360-panorama.is-ready:not(.has-used-panorama) .a360-panorama__interaction-hint {
  opacity: 1;
}

.a360-panorama.has-used-panorama .a360-panorama__interaction-hint {
  visibility: hidden;
  opacity: 0;
}

@media (max-width: 600px) {
  .a360-panorama {
    max-height: 70vh;
    border-radius: 8px;
  }

  .a360-panorama__interaction-hint {
    gap: 8px;
    font-size: 18px;
  }

  .a360-panorama__interaction-hint svg {
    width: 84px;
    height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .a360-panorama__viewport {
    transition: none;
  }

  .a360-panorama__interaction-hint svg {
    animation: none;
    -webkit-animation: none;
  }
}
.a360-panorama__hotspots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.a360-panorama__hotspot {
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  gap: 8px;

  border: 0;
  padding: 0;

  color: #fff;
  background: transparent;
  text-decoration: none;

  cursor: pointer;
  pointer-events: auto;

  will-change: transform;
}

.a360-panorama__hotspot-dot {
  position: relative;

  display: block;

  width: 24px;
  height: 24px;

  border: 3px solid #fff;
  border-radius: 50%;

  background: rgba(0, 120, 255, 0.9);

  box-shadow:
    0 3px 14px rgba(0, 0, 0, 0.4),
    0 0 0 6px rgba(255, 255, 255, 0.18);
}

.a360-panorama__hotspot-dot::after {
  content: "";

  position: absolute;
  inset: -8px;

  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;

  animation: a360-hotspot-pulse 2s infinite;
}

.a360-panorama__hotspot-label {
  padding: 7px 10px;

  border-radius: 6px;

  background: rgba(0, 0, 0, 0.72);

  color: #fff;

  font:
    500 13px/1.2 system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  white-space: nowrap;

  opacity: 0;
  transform: translateX(-5px);

  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.a360-panorama__hotspot:hover
.a360-panorama__hotspot-label,
.a360-panorama__hotspot:focus-visible
.a360-panorama__hotspot-label {
  opacity: 1;
  transform: translateX(0);
}

.a360-panorama__hotspot:focus-visible {
  outline: none;
}

.a360-panorama__hotspot:focus-visible
.a360-panorama__hotspot-dot {
  outline: 3px solid #5bb0ff;
  outline-offset: 4px;
}

@keyframes a360-hotspot-pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.8);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .a360-panorama__hotspot-dot::after {
    animation: none;
  }
}
/* Hotspot modal */
.a360-hotspot-modal[hidden]{display:none!important}
.a360-hotspot-modal{position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:clamp(16px,4vw,48px);box-sizing:border-box}
.a360-hotspot-modal__backdrop{position:absolute;inset:0;background:rgba(2,8,18,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.a360-hotspot-modal__dialog{position:relative;z-index:1;width:min(920px,100%);max-height:min(82vh,820px);overflow:auto;overscroll-behavior:contain;border:1px solid rgba(255,255,255,.14);border-radius:20px;background:rgba(10,20,35,.96);color:#fff;box-shadow:0 28px 80px rgba(0,0,0,.45)}
.a360-hotspot-modal__close{position:sticky;z-index:3;top:14px;float:right;width:42px;height:42px;margin:14px 14px -56px 0;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:#fff;background:rgba(0,0,0,.48);font:300 30px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer;backdrop-filter:blur(8px)}
.a360-hotspot-modal__close:hover{background:rgba(0,0,0,.7)}
.a360-hotspot-modal__close:focus-visible,.a360-hotspot-modal__thumb:focus-visible{outline:3px solid #5bb0ff;outline-offset:3px}
.a360-hotspot-modal__body{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);min-height:360px}
.a360-hotspot-modal__gallery{min-width:0;padding:18px;background:rgba(0,0,0,.22)}
.a360-hotspot-modal__gallery-main{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:#05080d}
.a360-hotspot-modal__thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:72px;gap:8px;margin-top:10px;padding:4px 2px;overflow-x:auto}
.a360-hotspot-modal__thumb{width:72px;height:54px;padding:0;overflow:hidden;border:2px solid transparent;border-radius:8px;background:#111;opacity:.72;cursor:pointer}
.a360-hotspot-modal__thumb.is-active{border-color:#58aaff;opacity:1}
.a360-hotspot-modal__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.a360-hotspot-modal__content{min-width:0;padding:clamp(28px,5vw,52px) clamp(24px,4vw,44px) 32px;align-self:center}
.a360-hotspot-modal__body:not(:has(.a360-hotspot-modal__gallery)){grid-template-columns:1fr}
.a360-hotspot-modal__body:not(:has(.a360-hotspot-modal__gallery)) .a360-hotspot-modal__content{width:min(720px,100%);box-sizing:border-box;margin-inline:auto}
.a360-hotspot-modal__title{margin:0 0 16px;color:#fff;font:700 clamp(24px,4vw,36px)/1.15 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.02em}
.a360-hotspot-modal__description{color:rgba(255,255,255,.82);font:400 16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.a360-hotspot-modal__description p{margin:0 0 12px}
.a360-hotspot-modal__video{position:relative;width:100%;margin-top:24px;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000}
.a360-hotspot-modal__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:720px){.a360-hotspot-modal{padding:10px;place-items:end center}.a360-hotspot-modal__dialog{width:100%;max-height:92vh;border-radius:18px 18px 10px 10px}.a360-hotspot-modal__body{grid-template-columns:1fr}.a360-hotspot-modal__gallery{padding:12px}.a360-hotspot-modal__gallery-main{aspect-ratio:16/10}.a360-hotspot-modal__content{padding:26px 20px 28px}}
@media(prefers-reduced-motion:reduce){.a360-hotspot-modal__backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}}