/**
 * Tokotoko Loading System
 * Apple-inspired modern loading components
 *
 * Components:
 * - .toko-spinner: Rotating spinner (5 sizes)
 * - .toko-loader: Full-screen loader with brand
 * - .toko-skeleton: Skeleton placeholders
 * - .toko-progress: Progress bars
 * - .toko-btn--loading: Button loading state
 * - .toko-loading-overlay: Container overlay
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
  /* Loading colors - uses existing accent colors */
  --loading-primary: var(--accent-primary, #ff6b35);
  --loading-secondary: var(--accent-secondary, #4ecdc4);
  --loading-track: rgba(0, 0, 0, 0.08);

  /* Loading sizing */
  --loading-spinner-xs: 16px;
  --loading-spinner-sm: 24px;
  --loading-spinner-md: 40px;
  --loading-spinner-lg: 56px;
  --loading-spinner-xl: 80px;

  /* Loading timing */
  --loading-duration-spin: 0.8s;
  --loading-duration-pulse: 2s;
  --loading-duration-shimmer: 1.5s;

  /* Backdrop */
  --loading-backdrop-light: rgba(255, 255, 255, 0.95);
  --loading-backdrop-dark: rgba(15, 20, 25, 0.95);
}

/* Dark mode adjustments */
[data-theme='dark'] {
  --loading-track: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

@keyframes toko-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes toko-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes toko-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes toko-progress-indeterminate {
  0% {
    left: -30%;
    width: 30%;
  }
  50% {
    left: 50%;
    width: 30%;
  }
  100% {
    left: 100%;
    width: 0%;
  }
}

@keyframes toko-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes toko-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ==========================================================================
   Spinner Component
   ========================================================================== */

.toko-spinner {
  display: inline-block;
  width: var(--loading-spinner-md);
  height: var(--loading-spinner-md);
  border: 3px solid var(--loading-track);
  border-radius: 50%;
  border-top-color: var(--loading-primary);
  animation: toko-spin var(--loading-duration-spin) linear infinite;
  flex-shrink: 0;
}

/* Spinner Sizes */
.toko-spinner--xs {
  width: var(--loading-spinner-xs);
  height: var(--loading-spinner-xs);
  border-width: 2px;
}

.toko-spinner--sm {
  width: var(--loading-spinner-sm);
  height: var(--loading-spinner-sm);
  border-width: 2px;
}

.toko-spinner--md {
  width: var(--loading-spinner-md);
  height: var(--loading-spinner-md);
  border-width: 3px;
}

.toko-spinner--lg {
  width: var(--loading-spinner-lg);
  height: var(--loading-spinner-lg);
  border-width: 4px;
}

.toko-spinner--xl {
  width: var(--loading-spinner-xl);
  height: var(--loading-spinner-xl);
  border-width: 5px;
}

/* Spinner Color Variants */
.toko-spinner--secondary {
  border-top-color: var(--loading-secondary);
}

.toko-spinner--white {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

.toko-spinner--gradient {
  border-color: transparent;
  border-top-color: var(--loading-primary);
  border-right-color: var(--loading-secondary);
}

/* ==========================================================================
   Full-Screen Loader Component
   ========================================================================== */

.toko-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 10000;
  background: var(--loading-backdrop-light);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: toko-fade-in 0.3s ease;
}

/* Dark mode loader */
[data-theme='dark'] .toko-loader,
[data-theme='dark'] .toko-loader {
  background: var(--loading-backdrop-dark);
}

/* Brand Icon */
.toko-loader__icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
  animation: toko-pulse var(--loading-duration-pulse) ease-in-out infinite;
  margin-bottom: 8px;
}

/* Brand Logo */
.toko-loader__brand {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--loading-primary), var(--loading-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: toko-pulse var(--loading-duration-pulse) ease-in-out infinite;
  letter-spacing: 0.02em;
}

/* Loading Text */
.toko-loader__text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text, #333);
  margin: 0;
}

[data-theme='dark'] .toko-loader__text,
[data-theme='dark'] .toko-loader__text {
  color: rgba(255, 255, 255, 0.9);
}

/* Status Text */
.toko-loader__status {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6c757d);
  margin: 0;
}

[data-theme='dark'] .toko-loader__status,
[data-theme='dark'] .toko-loader__status {
  color: rgba(255, 255, 255, 0.6);
}

/* Loader Fade Out */
.toko-loader--hiding {
  animation: toko-fade-out 0.3s ease forwards;
  pointer-events: none;
}

/* ==========================================================================
   Skeleton Loader Component
   ========================================================================== */

.toko-skeleton {
  background: linear-gradient(
    90deg,
    var(--loading-track) 0%,
    rgba(0, 0, 0, 0.04) 50%,
    var(--loading-track) 100%
  );
  background-size: 200% 100%;
  animation: toko-shimmer var(--loading-duration-shimmer) ease-in-out infinite;
  border-radius: 4px;
}

[data-theme='dark'] .toko-skeleton,
[data-theme='dark'] .toko-skeleton {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.08) 100%
  );
  background-size: 200% 100%;
}

/* Skeleton Variants */
.toko-skeleton--text {
  height: 1em;
  width: 100%;
  margin: 0.5em 0;
}

.toko-skeleton--text-short {
  height: 1em;
  width: 60%;
  margin: 0.5em 0;
}

.toko-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.toko-skeleton--avatar-sm {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.toko-skeleton--avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

.toko-skeleton--card {
  width: 100%;
  height: 200px;
  border-radius: 12px;
}

.toko-skeleton--image {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
}

.toko-skeleton--button {
  height: 40px;
  width: 120px;
  border-radius: 8px;
}

/* Skeleton Container */
.toko-skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.toko-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ==========================================================================
   Progress Bar Component
   ========================================================================== */

.toko-progress {
  width: 100%;
  height: 4px;
  background: var(--loading-track);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.toko-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--loading-primary), var(--loading-secondary));
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Indeterminate Progress */
.toko-progress--indeterminate .toko-progress__bar {
  position: absolute;
  animation: toko-progress-indeterminate 1.5s ease-in-out infinite;
}

/* Progress Sizes */
.toko-progress--sm {
  height: 2px;
}

.toko-progress--lg {
  height: 8px;
  border-radius: 4px;
}

.toko-progress--lg .toko-progress__bar {
  border-radius: 4px;
}

/* ==========================================================================
   Button Loading State
   ========================================================================== */

.toko-btn--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}

.toko-btn--loading .toko-btn__text {
  visibility: hidden;
}

.toko-btn--loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: toko-spin var(--loading-duration-spin) linear infinite;
}

/* Outline button loading */
.toko-btn--outline.toko-btn--loading::after {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: var(--loading-primary);
}

/* ==========================================================================
   Loading Overlay Component
   ========================================================================== */

.toko-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--loading-backdrop-light);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
  z-index: 10;
}

[data-theme='dark'] .toko-loading-overlay,
[data-theme='dark'] .toko-loading-overlay {
  background: var(--loading-backdrop-dark);
}

/* Loading with message */
.toko-loading-overlay--message {
  flex-direction: column;
  gap: 12px;
}

.toko-loading-overlay__text {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6c757d);
}

/* ==========================================================================
   Inline Loading
   ========================================================================== */

.toko-loading-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.toko-loading-inline__text {
  font-size: inherit;
  color: inherit;
}

/* ==========================================================================
   Page Loading State (for page content)
   ========================================================================== */

.toko-page-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 16px;
  padding: 32px;
}

.toko-page-loading__text {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6c757d);
}

/* ==========================================================================
   Accessibility: Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .toko-spinner,
  .toko-skeleton,
  .toko-loader__brand,
  .toko-progress--indeterminate .toko-progress__bar,
  .toko-btn--loading::after {
    animation: none;
  }

  .toko-spinner {
    border-top-color: var(--loading-primary);
    opacity: 0.7;
  }

  .toko-skeleton {
    background: var(--loading-track);
  }

  .toko-loader__brand {
    opacity: 1;
  }

  .toko-progress--indeterminate .toko-progress__bar {
    width: 50%;
    left: 25%;
  }
}

/* ==========================================================================
   Legacy Support (Backwards Compatibility)
   ========================================================================== */

/* Support old #app-loader ID for existing JS */
#app-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 10000;
  background: var(--loading-backdrop-light);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.3s ease;
}

[data-theme='dark'] #app-loader,
[data-theme='dark'] #app-loader {
  background: var(--loading-backdrop-dark);
}

/* Legacy spinner class support */
.loader-spinner,
.app-loader .spinner {
  width: var(--loading-spinner-xl);
  height: var(--loading-spinner-xl);
  border: 5px solid var(--loading-track);
  border-radius: 50%;
  border-top-color: var(--loading-primary);
  animation: toko-spin var(--loading-duration-spin) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .loader-spinner,
  .app-loader .spinner {
    animation: none;
    opacity: 0.7;
  }
}

/* ==========================================================================
   Additional Skeleton Variants
   ========================================================================== */

.toko-skeleton--line {
  height: 14px;
  width: 100%;
  border-radius: 4px;
}

.toko-skeleton--circle {
  border-radius: 50%;
}

.toko-skeleton--rect {
  border-radius: 8px;
}

/* ==========================================================================
   Map Loading Component
   ========================================================================== */

@keyframes toko-bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes toko-dot-pulse {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.toko-loading-map {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 16px;
  text-align: center;
}

.toko-loading-map__pin {
  font-size: 2.5rem;
  animation: toko-bounce 1.2s ease-in-out infinite;
}

.toko-loading-map__dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.toko-loading-map__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--loading-primary);
  animation: toko-dot-pulse 1.4s ease-in-out infinite;
}

.toko-loading-map__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.toko-loading-map__dot:nth-child(3) {
  animation-delay: 0.4s;
}

.toko-loading-map__text {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #6c757d);
}

[data-theme='dark'] .toko-loading-map__text {
  color: rgba(255, 255, 255, 0.6);
}

/* Dark mode page loading text */
[data-theme='dark'] .toko-page-loading__text {
  color: rgba(255, 255, 255, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .toko-loading-map__pin {
    animation: none;
  }

  .toko-loading-map__dot {
    animation: none;
    opacity: 0.6;
  }
}