/* Bayti.PanoramaKit — the viewer chrome. The canvas is the whole element; everything else
   floats over it. Products override the --pk-* tokens (the kit reads nothing else). */
:root {
  --pk-accent: #0e7c86;
  --pk-surface: rgba(255, 255, 255, .94);
  --pk-text: #101828;
  --pk-backdrop: #14161a;
}

.pk-viewer {
  position: relative;
  overflow: hidden;
  background: var(--pk-backdrop);
  touch-action: none;            /* the drag is ours, not the page's */
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.pk-viewer:focus-visible { box-shadow: inset 0 0 0 2px var(--pk-accent); }
.pk-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.pk-viewer.pk-grabbing .pk-canvas { cursor: grabbing; }

.pk-overlay { position: absolute; inset: 0; pointer-events: none; }

/* Hotspots are positioned by the renderer every frame; the transform centres them on that point. */
.pk-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pk-text);
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}
.pk-dot {
  width: 30px; height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pk-hotspot-color, var(--pk-accent));
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 3px 10px rgba(0, 0, 0, .35);
  position: relative;
  animation: pk-pulse 2.4s ease-out infinite;
}
.pk-dot::after {
  content: "";
  position: absolute; inset: 9px 0 0 9px;
  width: 12px; height: 12px;
  border-top: 2px solid #fff; border-right: 2px solid #fff;
  transform: rotate(45deg) translate(-2px, 2px);
}
.pk-label {
  background: var(--pk-surface);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}
@keyframes pk-pulse {
  0% { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 0 rgba(255,255,255,.55), 0 3px 10px rgba(0,0,0,.35); }
  70% { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 16px rgba(255,255,255,0), 0 3px 10px rgba(0,0,0,.35); }
  100% { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 0 rgba(255,255,255,0), 0 3px 10px rgba(0,0,0,.35); }
}
@media (prefers-reduced-motion: reduce) { .pk-dot { animation: none; } }

/* Cardboard mode: the two halves are drawn by the renderer, so only the chrome changes. */
.pk-viewer.pk-stereo .pk-canvas { cursor: default; }
.pk-viewer.pk-stereo::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, .15);
  pointer-events: none;
}

.pk-status {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  text-align: center;
  color: #fff;
  font-size: .9rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
  pointer-events: none;
}

.pk-viewer.pk-busy::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: pk-spin .9s linear infinite;
  z-index: 2;
}
@keyframes pk-spin { to { transform: rotate(360deg); } }