/**
 * Foozu Skeleton Loading System
 * Smooth shimmer placeholders for Menu & Checkout pages
 * Uses CSS-only animations — zero JS dependency
 */

/* ============================================================
   SHIMMER ANIMATION
   ============================================================ */
@keyframes foozu-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ============================================================
   BASE SKELETON ELEMENT
   ============================================================ */
.fz-skeleton {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);
  background-size: 800px 100%;
  animation: foozu-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}

/* ============================================================
   SKELETON PRIMITIVES
   ============================================================ */

/* Rectangular block */
.skeleton-box {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);
  background-size: 800px 100%;
  animation: foozu-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
  display: block;
}

/* Text line placeholder */
.skeleton-text {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);
  background-size: 800px 100%;
  animation: foozu-shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
  height: 14px;
  display: block;
}
.skeleton-text.h-lg { height: 20px; border-radius: 5px; }
.skeleton-text.h-sm { height: 10px; }
.skeleton-text.h-xl { height: 28px; border-radius: 6px; }

/* Pill shape (for category tabs, badges, delivery toggles) */
.skeleton-pill {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);
  background-size: 800px 100%;
  animation: foozu-shimmer 1.6s ease-in-out infinite;
  border-radius: 9999px;
  display: inline-block;
}

/* Circle shape (for icons, avatars, food dish thumbnails) */
.skeleton-circle {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 40%, #f1f5f9 80%);
  background-size: 800px 100%;
  animation: foozu-shimmer 1.6s ease-in-out infinite;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* Card container (wraps skeleton item groups) */
.skeleton-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* ============================================================
   WIDTH UTILITIES
   ============================================================ */
.skeleton-w-25  { width: 25%; }
.skeleton-w-30  { width: 30%; }
.skeleton-w-40  { width: 40%; }
.skeleton-w-50  { width: 50%; }
.skeleton-w-60  { width: 60%; }
.skeleton-w-75  { width: 75%; }
.skeleton-w-80  { width: 80%; }
.skeleton-w-100 { width: 100%; }

/* ============================================================
   SKELETON SECTION CONTAINERS
   ============================================================ */

/* Page title / hero banner skeleton */
.skeleton-hero-banner {
  background: linear-gradient(90deg, #e8ecf1 0%, #dde3ea 40%, #e8ecf1 80%);
  background-size: 800px 100%;
  animation: foozu-shimmer 2s ease-in-out infinite;
  border-radius: 0;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
}

/* Category pill skeleton row */
.skeleton-category-bar {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

/* Menu item card skeleton (list mode) */
.skeleton-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.skeleton-menu-item:last-child {
  border-bottom: none;
}

/* Checkout item row skeleton */
.skeleton-checkout-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  margin-bottom: 8px;
}

/* ============================================================
   STAGGER DELAYS FOR NATURAL FEEL
   ============================================================ */
.skeleton-delay-1 { animation-delay: 0.1s; }
.skeleton-delay-2 { animation-delay: 0.2s; }
.skeleton-delay-3 { animation-delay: 0.3s; }
.skeleton-delay-4 { animation-delay: 0.4s; }
.skeleton-delay-5 { animation-delay: 0.5s; }

/* ============================================================
   DARK MODE SUPPORT
   ============================================================ */
.dark .fz-skeleton,
.dark .skeleton-box,
.dark .skeleton-text,
.dark .skeleton-pill,
.dark .skeleton-circle {
  background: linear-gradient(90deg, #1e293b 0%, #334155 40%, #1e293b 80%);
  background-size: 800px 100%;
}
.dark .skeleton-card {
  background: #1e293b;
  border-color: rgba(255,255,255,0.08);
}
.dark .skeleton-hero-banner {
  background: linear-gradient(90deg, #1e293b 0%, #0f172a 40%, #1e293b 80%);
  background-size: 800px 100%;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767.98px) {
  .skeleton-hero-banner {
    min-height: 120px;
    padding: 16px;
  }
  .skeleton-card {
    padding: 12px;
    border-radius: 10px;
  }
}