/* Cockpit image wrapper — position: relative so % callouts work */
.cockpit-wrapper {
  position: relative;
  display: block;
  width: 100%;
  line-height: 0; /* removes gap below inline img */
}

.cockpit-img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}

/* Circular callout dots */
.callout {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 165, 0, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  /* center the circle on the coordinate point */
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.callout:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}

.callout.active {
  background: rgba(30, 120, 255, 0.95);
  border-color: #fff;
  color: #fff;
  transform: translate(-50%, -50%) scale(1.35);
  box-shadow: 0 0 0 4px rgba(30, 120, 255, 0.3), 0 3px 10px rgba(0, 0, 0, 0.8);
}

.callout.completed {
  background: rgba(40, 167, 69, 0.9);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.0);
}

/* Picker mode: crosshair cursor on the image */
.cockpit-wrapper.pick-mode {
  cursor: crosshair;
}

/* Picker dot (admin step placement) */
.picker-dot {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #fff;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: #000;
  z-index: 10;
  pointer-events: none;
}

.picker-dot.placed {
  background: rgba(255, 165, 0, 0.85);
}

.picker-dot.active-target {
  background: rgba(255, 60, 60, 0.9);
  color: #fff;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 60, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 60, 60, 0); }
}

/* Step rows in admin form */
.step-row.pick-active {
  border-color: rgba(255, 60, 60, 0.8) !important;
  box-shadow: 0 0 0 2px rgba(255, 60, 60, 0.4);
}