/* Lazy Loading Styles */
.lazy-loading {
  opacity: 0.3;
  transition: opacity 0.3s ease-in-out;
}

.lazy-loading.loaded {
  opacity: 1;
}

/* Image fade-in transition */
img {
  transition: opacity 0.3s ease-in-out;
}

/* Ensure images maintain aspect ratio during loading */
.lazy-loading {
  min-height: 1px; /* Prevent collapsed images */
}

.card__hidden-image {
  display: none !important;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.category__cover-img.lazy-loading {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main__table-logo.lazy-loading {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.channel-button img.lazy-loading {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.footer__logo.lazy-loading,
.profile__avatar-img.lazy-loading {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.item__cover-img.lazy-loading {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.signup__logo.lazy-loading,
.header__logo-img.lazy-loading {
  max-height: 50px;
  width: auto;
  object-fit: contain;
}

.category__item-img.lazy-loading,
.card__img.lazy-loading {
  width: 100%;
  height: auto;
  object-fit: cover;
}