/* Lazy loading blur-up effect for progressive image loading */
img[loading="lazy"] {
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* Blurred state while image is loading */
img[loading="lazy"]:not(.lazyloaded):not(.sp-loaded) {
    filter: blur(10px);
    opacity: 0.8;
}

/* Sharp state when image has loaded */
img[loading="lazy"].lazyloaded, img[loading="lazy"].sp-loaded {
    filter: blur(0);
    opacity: 1;
}

/* ShortPixel LQIP Low Quality Image Placeholder support */
.sp-img-placeholder {
    background-color: #f0f0f0;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(5px);
    transition: filter 0.4s ease-out;
}

.sp-img-placeholder.sp-loaded {
    filter: blur(0);
}

/* Skeleton loader shimmer effect for images without src yet */
img:not([src]):not([data-src]) {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    min-height: 200px;
}

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

/* Prevent layout shift during image load */
img[loading="lazy"] {
    height: auto;
    max-width: 100%;
}

/* WooCommerce product gallery images specific styling */
.woocommerce-product-gallery__image img[loading="lazy"] {
    transition: filter 0.4s ease-in-out, transform 0.3s ease;
}

/* Ensure blur effect doesn't interfere with WooCommerce zoom */
.woocommerce-product-gallery__image img.lazyloaded {
    filter: none;
}

/* Exclude third-party widgets from lazy loading effects */
.trustindex-widget img,
.ti-widget img,
.ti-widget-google img,
.google-review-widget img,
[class*="trustindex"] img,
trustindex-image img {
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Exclude Instagram Feed from blur effect */
.sbi_photo img,
.sb_instagram_photo img,
#sb_instagram img,
[class^="sbi_"] img {
    filter: none !important;
    opacity: 1 !important;
    transition: none !important;
}

/* Instagram Feed optimization - preserve square aspect ratio */
#sb_instagram .sbi_photo {
  position: relative;
  width: 100%;
  background-color: #f9f9f9;
}

/* Ensure images maintain square 1:1 ratio */
#sb_instagram .sbi_photo img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  filter: none !important;
  opacity: 1 !important;
}

/* Prevent layout shift during image load */
.sbi_photo_wrap {
  position: relative;
  overflow: hidden;
}

/* Smooth fade-in for Instagram images when they load */
#sb_instagram img.sbi_img_loaded {
  animation: sbi-fade-in 0.3s ease-in;
}

@keyframes sbi-fade-in {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

/* Ensure grid container respects plugin layout */
#sb_instagram #sbi_images {
  /* Do NOT override display or flex properties */
  /* Let Instagram Feed plugin manage grid layout */
}