/**
 * ============================================================================
 * 🟩 K2 Loading Indicator (Animated 3-Dot Loader)
 * ----------------------------------------------------------------------------
 * Minimal, accessible loading animation designed for async UI states such as
 * AJAX calls, content fetches, or background processing indicators.
 *
 * Structure:
 *   .k2-loading        → main loader container (flex, centered)
 *   .k2-loading span   → individual dot elements
 *
 * Behavior:
 *   • Three dots pulse sequentially (via scale animation)
 *   • Fully accessible (`role="status"` + `aria-label="Loading"`)
 *   • Can be embedded inline or centered in containers
 *
 * Usage Guidelines:
 * ----------------------------------------------------------------------------
 * 1️⃣ Inline loader (fits into content flow)
 *     <div class="k2-loading"><span></span><span></span><span></span></div>
 *
 * 2️⃣ Centered block loader
 *     <div class="k2-loading k2-loading-center"><span></span><span></span><span></span></div>
 *
 * 3️⃣ Overlay loader (absolute/fixed full-page)
 *     <div class="k2-loading k2-loading-overlay"><span></span><span></span><span></span></div>
 *
 * Animation:
 * ----------------------------------------------------------------------------
 * - Uses CSS keyframes `@keyframes k2-loading-bounce`
 * - Dots bounce vertically in sequence using delay offsets
 * - Duration customizable via `--k2-loading-speed` variable
 *
 * Accessibility:
 * ----------------------------------------------------------------------------
 * - Add `role="status"` and `aria-label="Loading"`
 * - Background contrast can be adjusted using theme vars
 *
 * ============================================================================
 */

.k2-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem;
  min-height: 1.5rem;
  --k2-loading-speed: 0.6s;
}

.k2-loading span {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--k2-color-accent, #007bff);
  animation: k2-loading-bounce var(--k2-loading-speed) ease-in-out infinite;
}

.k2-loading span:nth-child(1) {
  animation-delay: 0s;
}
.k2-loading span:nth-child(2) {
  animation-delay: 0.15s;
}
.k2-loading span:nth-child(3) {
  animation-delay: 0.3s;
}

/* ============================================================================
 * 🔁 Animation Keyframes
 * ----------------------------------------------------------------------------
 * Creates a smooth up-down bounce motion using translateY and opacity scaling
 * ============================================================================
 */
@keyframes k2-loading-bounce {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  40% {
    transform: translateY(-0.4rem);
    opacity: 1;
  }
}

/* ============================================================================
 * 📍 Variants
 * ----------------------------------------------------------------------------
 * Add these helper classes to control loader placement.
 * ============================================================================
 */

/* Centered within parent container */
.k2-loading-center {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 1.5rem 0;
}

/* Full-page overlay for blocking UI during async actions */
.k2-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: var(--k2-z-overlay, 2000);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Optional: adjust color for dark themes */
.k2-dark .k2-loading span {
  background-color: var(--k2-color-accent-light, #5ac8fa);
}