/* Scanner Corner and Line Animations */
.scan-corners.scanning {
  display: block;
}

.scan-corners.scanning .sc {
  animation: pulse-corners 1.5s infinite alternate ease-in-out;
}

.scan-corners.scanning::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--teal, #0EA5E9);
  box-shadow: 0 0 10px var(--teal, #0EA5E9), 0 0 20px var(--teal, #0EA5E9);
  animation: scan-line 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}

/* Scan steps states - support both .active and .on for compatibility */
.spin-steps .step {
  transition: all 0.35s ease;
  opacity: 0.5;
}

.spin-steps .step.active,
.spin-steps .step.on {
  opacity: 1;
  color: var(--teal2, #38BDF8);
  font-weight: 800;
  background: rgba(14, 165, 233, 0.1);
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.spin-steps .step.done {
  opacity: 1;
  color: var(--ok, #10B981);
}

@keyframes pulse-corners {
  0% { opacity: 0.5; transform: scale(1); border-color: rgba(14,165,233,0.5); }
  100% { opacity: 1; transform: scale(1.05); border-color: rgba(14,165,233,1); }
}

@keyframes scan-line {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}