/* Street View Navigation - Branch Button Positioning */
/* Shared CSS for cpi, inverta, and gpxviewer */
  .image-controls {
    position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; z-index:20; pointer-events:none;
  }
  .navigation-ring {
    position:relative; width:160px; height:160px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; user-select:none; pointer-events:none;
  }
  .nav-button.ring-button {
    position:absolute; width:40px; height:40px; border:none; border-radius:50%;
    background:rgba(0,0,0,0); color:#fff; display:flex; align-items:center; justify-content:center;
    font-size:20px; cursor:pointer; transform:translateX(-50%); pointer-events:auto; z-index:21;
  }
  #nextImageBtn.ring-button { top:15px; left:50%; }
  #prevImageBtn.ring-button { bottom:15px; left:50%; }
  .nav-button.ring-button:hover { transform:translateX(-50%) scale(1.08); }

  #viewer-loading {
    display:none; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:100; background:rgba(0,0,0,0.7); padding:16px 20px; border-radius:10px; text-align:center; color:#fff;
  }
  .spinner { width:36px; height:36px; border:4px solid rgba(255,255,255,0.12); border-top-color:#22d3ee; border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 8px; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Mapbox marker z-index for cone (default fine) */
  .mapboxgl-marker.view-cone { z-index: 10; }

/* When dragging the panorama, ignore all overlay clicks */
.dragging-pano .image-controls,
.dragging-pano .image-controls *,
.dragging-pano .nav-button,
.dragging-pano .nav-button *,
.dragging-pano .ring-button,
.dragging-pano .ring-button * {
  pointer-events: none !important;
}

/* Prevent text selection highlight on nav buttons */
.ring-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Branch button positions based on position class */
/* 3 o'clock - right side (default) */
#branchImageBtn.ring-button,
.navigation-ring.branch-right #branchImageBtn.ring-button {
  right: 15px;
  top: 50%;
  left: auto;
  bottom: auto;
  transform: translateY(-50%);
}

/* 9 o'clock - left side */
.navigation-ring.branch-left #branchImageBtn.ring-button {
  left: 15px;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%) rotate(180deg);
}

/* 12 o'clock - top (when at last marble, no next button) */
.navigation-ring.branch-top #branchImageBtn.ring-button {
  top: 15px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%) rotate(-90deg);
}

/* 6 o'clock - bottom (when at first marble, no prev button) */
.navigation-ring.branch-bottom #branchImageBtn.ring-button {
  bottom: 15px;
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%) rotate(90deg);
}

/* Hide the old branch-buttons container (no longer used) */
.small-btn {
  display: none;
}