/* Spinner Atom */
.spinner {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Liquid-glass blob (PO-approved "Blob B"): a green blob that rotates + morphs, with
   inner glass highlights + a soft glow. THE loading visual platform-wide -- every
   LoadingState (~103 sites incl. the booking guest-lookup), the nav spinner, and the
   boot loader funnel through this. ONE FIXED SIZE everywhere: the size variants
   intentionally do NOT resize it, so it looks identical in the modal guest-lookup,
   panels, and the boot screen (the PO wants a uniform indicator). */
.spinner-circle {
  width: var(--space-10);
  height: var(--space-10);
  border: none;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.88), rgba(74, 222, 128, 0.55));
  box-shadow:
    0 6px 18px rgba(22, 163, 74, 0.28),
    inset 0 2px 8px rgba(255, 255, 255, 0.55),
    inset 0 -4px 10px rgba(21, 128, 61, 0.35);
  animation: blob-spin 3.4s linear infinite, blob-shape 5s ease-in-out infinite;
}

/* Two DECOUPLED animations so neither stutters:
   - blob-spin: a constant linear 0 -> 360deg rotation. Seamless (360deg == 0deg) and
     even (no speed pulse), so the full turn gets uniform time.
   - blob-shape: a SEPARATE eased shape wobble. ease-in-out eases the border-radius to
     zero velocity at 0%/100%, so the morph has no sharp direction-change at the
     keyframes or the loop seam (that was the leftover jitter).
   No scale -> uniform size. Different durations keep the combination organic. */
@keyframes blob-spin {
  to { transform: rotate(360deg); }
}
@keyframes blob-shape {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  50%      { border-radius: 63% 37% 45% 55% / 38% 57% 43% 62%; }
}

/* No reduced-motion override: the blanket suppression was removed (PO decision),
   so the base blob-spin + blob-shape animations above run for every user. */

.spinner-primary { color: var(--color-primary); }
.spinner-secondary { color: var(--text-secondary); }
.spinner-inverse { color: var(--text-inverse); }

.spinner-text {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-surface);
  opacity: 0.9;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}