/* Lozad.js CSS for lazy loading */

/* Basic lazy loading styles */
.lozad {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lozad.loaded {
  opacity: 1;
}

/* Fallback: ensure loaded content shows up even without .loaded class */
.lozad[src],
.lozad[style*="background-image"],
.lozad-bg[style*="background-image"] {
  opacity: 1;
}

/* Ensure images don't have max-height 0 while loading */
.lozad:not([src]):not([style*="background-image"]) {
  position: relative; /* For loading spinner positioning */
}

/* Background image loading state */
.lozad-bg:not([style*="background-image"]) {
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Background image loaded state */
.lozad-bg[style*="background-image"] {
  opacity: 1;
}

.lozad-bg.loaded {
  opacity: 1;
}

/* Loading placeholder for better UX */
.lozad:not([src]):not([style*="background-image"])::before,
.lozad-bg:not([style*="background-image"])::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  /* border: 2px solid #e0e0e0;
  border-top: 2px solid #666; */
  /* border-radius: 50%; */
  animation: lozad-spin 1s linear infinite;
}

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

/* Background image lazy loading */
.lazy-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}