@keyframes cloudyForceSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.cloudy-loader-ring,
.loader-ring,
.spinner,
.fa-spin,
.fas.fa-spin,
.far.fa-spin,
.fab.fa-spin,
.fa-solid.fa-spin,
i.fa-spin,
svg.fa-spin,
.animate-spin,
svg.animate-spin,
[data-lucide].animate-spin {
  animation: cloudyForceSpin .85s linear infinite !important;
  display: inline-block;
  will-change: transform;
}

.cloudy-loader-ring,
.loader-ring,
.spinner {
  display: block;
}

/* === Premium Loader Components === */
.cloudy-premium-loader {
  width: 76px;
  height: 76px;
  flex: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(56,189,248,0.12);
  border: 1px solid rgba(56,189,248,0.28);
  color: #38bdf8;
  position: relative;
  box-shadow: 0 0 34px rgba(56,189,248,0.16);
  margin: 0 auto;
}
.cloudy-premium-loader.loading {
  background: rgba(56,189,248,0.08);
}
.cloudy-premium-ring {
  position: absolute;
  inset: 6px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.10);
  border-top-color: #38bdf8;
  border-right-color: rgba(34,197,94,0.78);
  animation: cloudyPremiumOrbit 0.82s linear infinite;
}
.cloudy-premium-core {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(135deg, #38bdf8, #2563eb);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 24px rgba(37,99,235,0.28);
}
.cloudy-premium-core i,
.cloudy-premium-core svg {
  color: #ffffff;
  width: 20px;
  height: 20px;
}
.cloudy-premium-core i { font-size: 20px; }

@keyframes cloudyPremiumOrbit { to { transform: rotate(360deg); } }
@keyframes cloudyPremiumPulse {
  0%, 100% { opacity: 0.35; transform: scaleX(0.45); }
  50% { opacity: 1; transform: scaleX(1); }
}

.cloudy-premium-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 15px;
}
.cloudy-premium-steps span {
  width: 38px;
  height: 3px;
  display: block;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #22c55e);
  transform-origin: left center;
  animation: cloudyPremiumPulse 1.1s ease-in-out infinite;
}
.cloudy-premium-steps span:nth-child(2) { animation-delay: 0.16s; }
.cloudy-premium-steps span:nth-child(3) { animation-delay: 0.32s; }