/* ═══════════════════════════════════════════════
   Ákotí Spinner & Loader — Pure CSS

   Spinner:  <div class="akoti-spinner"></div>
   Dots:     <div class="akoti-dots"><i></i><i></i><i></i></div>
   Skeleton: see akoti-skeleton.css for shimmer loading
   Overlay:  <div class="akoti-loading-overlay"><div class="akoti-spinner lg"></div></div>

   Sizes: .sm (16px), default (24px), .lg (40px), .xl (56px)
   Colors: .primary, .white, .bronze
   ═══════════════════════════════════════════════ */

/* ── Spinner (ring) ────────────────────────────────── */

.akoti-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(26, 47, 94, 0.15);
  border-top-color: #1a2f5e;
  border-radius: 50%;
  animation: akoti-spin 0.7s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes akoti-spin {
  to { transform: rotate(360deg); }
}

/* Sizes */
.akoti-spinner.sm { width: 16px; height: 16px; border-width: 2px; }
.akoti-spinner.lg { width: 40px; height: 40px; border-width: 4px; }
.akoti-spinner.xl { width: 56px; height: 56px; border-width: 5px; }

/* Colors */
.akoti-spinner.white { border-color: rgba(255,255,255,0.2); border-top-color: white; }
.akoti-spinner.bronze { border-color: rgba(205,127,50,0.2); border-top-color: #CD7F32; }
.akoti-spinner.baby { border-color: rgba(168,200,232,0.2); border-top-color: #a8c8e8; }

/* ── Dots ──────────────────────────────────────────── */

.akoti-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.akoti-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a2f5e;
  display: block;
  animation: akoti-dot-bounce 1.4s ease-in-out infinite both;
}
.akoti-dots i:nth-child(1) { animation-delay: 0s; }
.akoti-dots i:nth-child(2) { animation-delay: 0.16s; }
.akoti-dots i:nth-child(3) { animation-delay: 0.32s; }

@keyframes akoti-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.akoti-dots.sm i { width: 5px; height: 5px; }
.akoti-dots.lg i { width: 12px; height: 12px; }
.akoti-dots.white i { background: white; }
.akoti-dots.bronze i { background: #CD7F32; }

/* ── Pulse (Akoti brick shape) ─────────────────────── */

.akoti-pulse {
  width: 40px;
  height: 40px;
  border-radius: 12px 4px 12px 4px;
  background: #1a2f5e;
  display: inline-block;
  animation: akoti-pulse-anim 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes akoti-pulse-anim {
  0% { transform: scale(1); opacity: 1; border-radius: 12px 4px 12px 4px; }
  50% { transform: scale(0.85); opacity: 0.5; border-radius: 4px 12px 4px 12px; }
  100% { transform: scale(1); opacity: 1; border-radius: 12px 4px 12px 4px; }
}

.akoti-pulse.sm { width: 24px; height: 24px; }
.akoti-pulse.lg { width: 56px; height: 56px; }
.akoti-pulse.baby { background: #a8c8e8; }
.akoti-pulse.bronze { background: #CD7F32; }

/* ── Loading Overlay ───────────────────────────────── */

.akoti-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  z-index: 100;
  backdrop-filter: blur(2px);
  border-radius: inherit;
}

.akoti-loading-overlay .akoti-loading-text {
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  color: #5f6368;
  font-weight: 500;
}

/* ── Inline loading ────────────────────────────────── */

.akoti-inline-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  color: #5f6368;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .akoti-spinner { border-color: rgba(255,255,255,0.1); border-top-color: #a8c8e8; }
  :root:not([data-theme="light"]) .akoti-dots i { background: #a8c8e8; }
  :root:not([data-theme="light"]) .akoti-pulse { background: #a8c8e8; }
  :root:not([data-theme="light"]) .akoti-loading-overlay { background: rgba(30,30,36,0.85); }
  :root:not([data-theme="light"]) .akoti-loading-overlay .akoti-loading-text { color: #9a9aa6; }
}