/**
 * Critical CSS for CLS Prevention
 * This file contains the most essential styles to prevent layout shifts
 */

/* ===== CRITICAL LAYOUT FIXES ===== */

/* Prevent layout shifts during font loading */
* {
  font-display: swap !important;
}

/* Reserve space for TodayPredictions component */
.today-predictions-container,
[class*="TodayPredictions"] {
  contain: layout style !important;
}

/* Reserve space for subtitle element (the one causing CLS) */
[class*="subtitle"],
p[class*="subtitle"] {
  min-height: 60px !important;
  contain: layout style !important;
  font-display: swap !important;
}

/* Reserve space for dynamic components */
[class*="dynamic"],
[class*="lazy"] {
  min-height: 150px !important;
  contain: layout style !important;
}

/* Prevent layout shifts for images */
img {
  height: auto !important;
  max-width: 100% !important;
  contain: layout style !important;
}

/* Prevent layout shifts for icons */
svg {
  contain: layout style !important;
}

/* Reserve space for loading states */
[class*="loading"],
[class*="skeleton"] {
  min-height: 200px !important;
  contain: layout style !important;
}

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {

  [class*="subtitle"],
  p[class*="subtitle"] {
    min-height: 48px !important;
  }

  .today-predictions-container,
  [class*="TodayPredictions"] {
    min-height: 150px !important;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.contain-layout {
  contain: layout style !important;
}

.prevent-shift {
  will-change: auto !important;
  transform: translateZ(0) !important;
}

/* ===== LOADING ANIMATIONS ===== */
@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.loading-placeholder {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 8px;
  min-height: 200px !important;
  contain: layout style !important;
}