/* Image fallback styles - защита от "вечного прогруза" */

.image-fallback {
  background-color: #f3f4f6 !important;
  object-fit: contain !important;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.image-fallback:hover {
  opacity: 1;
}

/* Smooth loading transition */
img:not(.image-fallback) {
  transition: opacity 0.3s ease;
}

/* Loading state (пока картинка грузится) */
img[src]:not([src=""]):not(.image-fallback):not(.loaded) {
  background: linear-gradient(
    90deg,
    #f3f4f6 0%,
    #e5e7eb 50%,
    #f3f4f6 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Transparent brand marks should never show the image-loading background. */
.logo img[src]:not([src=""]):not(.image-fallback),
img.auth-logo[src]:not([src=""]):not(.image-fallback) {
  background: none;
  animation: none;
}

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

/* Stop shimmer when loaded */
img[src]:not([src=""]).loaded {
  background: none;
  animation: none;
}