/* HPA Spin v2 - listing 360 viewer. Teal matches the listing video house style. */
.hpa-spin {
  --spin-accent: #20b9bb;
  --spin-ink: #12232b;
  --spin-glass: rgba(255, 255, 255, 0.82);
  position: relative;
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #eef0f2;
  box-shadow: 0 1px 2px rgba(18, 35, 43, 0.08), 0 12px 32px -12px rgba(18, 35, 43, 0.28);
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.hpa-spin:focus-visible { box-shadow: 0 0 0 3px var(--spin-accent), 0 12px 32px -12px rgba(18, 35, 43, 0.28); }

.hpa-spin__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 1;           /* replaced by the real frame shape at mount */
  cursor: grab;
  touch-action: pan-y;           /* phones: vertical swipe still scrolls the page */
}
.hpa-spin.is-dragging .hpa-spin__stage { cursor: grabbing; }
.hpa-spin.is-zoomed .hpa-spin__stage { cursor: move; touch-action: none; }
.hpa-spin__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Loading */
.hpa-spin__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(18, 35, 43, 0.08); opacity: 0; transition: opacity .4s;
}
.hpa-spin__progress span {
  display: block; height: 100%; background: var(--spin-accent);
  transform-origin: left; transform: scaleX(0); transition: transform .25s ease-out;
}
.hpa-spin.is-loading .hpa-spin__progress { opacity: 1; }
.hpa-spin.is-loaded .hpa-spin__progress { opacity: 0; }

/* 360 badge, top left */
.hpa-spin__badge {
  position: absolute; top: 14px; left: 14px;
  font: 700 13px/1 "DIN Condensed", "Barlow Condensed", "Roboto Condensed", system-ui, sans-serif;
  letter-spacing: .08em; color: #fff; background: #0b6466; /* darker than the accent: white on teal is 2.4:1 */
  padding: 7px 9px 6px; border-radius: 6px; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* Orbit compass, top right */
.hpa-spin__orbit {
  position: absolute; top: 12px; right: 12px; width: 56px; height: 56px;
  border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--spin-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  opacity: 0; transform: scale(.85); transition: opacity .35s, transform .35s;
}
.hpa-spin.is-ready .hpa-spin__orbit { opacity: 1; transform: none; }
.hpa-spin__orbit-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.hpa-spin__orbit-ring circle { fill: none; stroke: rgba(18, 35, 43, .18); stroke-width: 1.5; stroke-dasharray: 2 3.2; }
.hpa-spin__orbit-plane { position: absolute; inset: 15px; color: var(--spin-ink); transform: rotate(180deg); } /* nose toward the visitor */
.hpa-spin__orbit-plane svg { width: 100%; height: 100%; display: block; }
.hpa-spin__orbit-plane .fill { fill: currentColor; }
.hpa-spin__orbit-dot {
  position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--spin-accent);
  box-shadow: 0 0 0 3px rgba(32, 185, 187, .25);
  will-change: transform;
}

/* "Drag to walk around" hint */
.hpa-spin__hint {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--spin-ink);
  background: var(--spin-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 9px 14px 9px 10px; border-radius: 999px; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  opacity: 0; transition: opacity .5s, transform .5s;
}
.hpa-spin.is-ready .hpa-spin__hint { opacity: 1; }
.hpa-spin.has-interacted .hpa-spin__hint { opacity: 0; transform: translateX(-50%) translateY(6px); }
.hpa-spin__hint-icon { width: 22px; height: 22px; color: var(--spin-accent); animation: hpa-spin-nudge 1.6s ease-in-out infinite; }
.hpa-spin__hint-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes hpa-spin-nudge { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }

/* Control bar */
.hpa-spin__bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 12px;
  background: var(--spin-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.hpa-spin.is-ready:hover .hpa-spin__bar,
.hpa-spin.is-ready:focus-within .hpa-spin__bar,
.hpa-spin.is-full .hpa-spin__bar,
.hpa-spin.is-pseudo-full .hpa-spin__bar { opacity: 1; transform: none; }
.hpa-spin.is-intro .hpa-spin__bar { opacity: 0 !important; }
@media (hover: none) { .hpa-spin.is-ready .hpa-spin__bar { opacity: 1; transform: none; } }

.hpa-spin__btn {
  flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; padding: 7px;
  background: transparent; color: var(--spin-ink); cursor: pointer; transition: background .15s, color .15s;
}
.hpa-spin__btn:hover { background: rgba(32, 185, 187, .14); color: #0e8587; }
.hpa-spin__btn:focus-visible { outline: 2px solid var(--spin-accent); outline-offset: 1px; }
.hpa-spin__btn svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hpa-spin__btn svg .fill { fill: currentColor; stroke: none; }

.hpa-spin__scrub { position: relative; flex: 1; height: 36px; margin: 0 8px; cursor: pointer; touch-action: none; }
.hpa-spin__ticks { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; display: flex; gap: 2px; }
.hpa-spin__ticks i { flex: 1; border-radius: 2px; background: rgba(18, 35, 43, .16); }
.hpa-spin__thumb {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; border: 3px solid var(--spin-accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}

/* Full screen */
.hpa-spin.is-full, .hpa-spin.is-pseudo-full { max-width: none; border-radius: 0; background: #0d1418; display: flex; align-items: center; }
.hpa-spin.is-pseudo-full { position: fixed; inset: 0; z-index: 99999; }
.hpa-spin.is-full .hpa-spin__stage, .hpa-spin.is-pseudo-full .hpa-spin__stage { height: 100%; }

@media (max-width: 600px) {
  .hpa-spin { border-radius: 10px; }
  .hpa-spin__orbit { width: 44px; height: 44px; top: 8px; right: 8px; }
  .hpa-spin__orbit-plane { inset: 12px; }
  .hpa-spin__badge { top: 10px; left: 10px; font-size: 11px; padding: 6px 7px 5px; }
  .hpa-spin__bar { left: 8px; right: 8px; bottom: 8px; padding: 3px; }
  .hpa-spin__btn { width: 32px; height: 32px; padding: 6px; }
  .hpa-spin__btn[aria-label="Zoom"] { display: none; } /* pinch does this on phones */
  .hpa-spin__ticks i { display: none; }
  .hpa-spin__ticks { background: rgba(18, 35, 43, .16); border-radius: 2px; }
  .hpa-spin__hint { bottom: 10px; left: 10px; transform: none; font-size: 12px; padding: 7px 11px 7px 8px; }
  .hpa-spin.has-interacted .hpa-spin__hint { transform: translateY(6px); }
  /* Inline on a phone the photo is ~170px tall: keep only an expand button. Everything else lives in full screen. */
  .hpa-spin:not(.is-full):not(.is-pseudo-full) .hpa-spin__bar { left: auto; opacity: 1; transform: none; }
  .hpa-spin:not(.is-full):not(.is-pseudo-full) .hpa-spin__bar > :not(:last-child) { display: none; }
  .hpa-spin.is-full .hpa-spin__bar, .hpa-spin.is-pseudo-full .hpa-spin__bar { bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .hpa-spin__hint-icon { animation: none; }
  .hpa-spin * { transition: none !important; }
}

/* WordPress listing wrapper (matches the spacing of the old SpriteSpin block) */
.three-sixty-viewer.hpa-spin-v2 { display: block; width: 100%; margin: 3.5% 0; text-align: left; }
.three-sixty-viewer.hpa-spin-v2 button { min-width: 0; line-height: 1; letter-spacing: 0; text-transform: none; box-shadow: none; }