/* 
=================================================================
🖼️ IMAGE OPTIMIZATION CSS
=================================================================
بهینه‌سازی نمایش تصاویر برای مرورگرها (به‌ویژه Chrome)
=================================================================
*/

/* ✅ جلوگیری از layout shift با تعیین aspect-ratio */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 🖼️ تصاویر محصولات */
.product-image,
.product-img,
.medicine-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  background-color: hsl(35, 18%, 90%);
  border-radius: 8px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  /* جلوگیری از layout shift */
  aspect-ratio: 1 / 1;
}

/* ✅ Lazy loading placeholder - نمایش loading اسکلتون */
img[loading="lazy"] {
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* ✅ وقتی تصویر بارگذاری شد، animation رو حذف کن */
img[loading="lazy"].loaded,
img:not([loading]) {
  animation: none;
  background: transparent;
}

/* 🎯 تصاویر thumbnail */
.product-image.thumbnail,
img[width="150"] {
  aspect-ratio: 1 / 1;
  max-width: 150px;
}

/* 🎯 تصاویر small */
.product-image.small,
img[width="300"] {
  aspect-ratio: 1 / 1;
  max-width: 300px;
}

/* 🎯 تصاویر medium */
.product-image.medium,
img[width="600"] {
  aspect-ratio: 1 / 1;
  max-width: 600px;
}

/* 🎯 تصاویر large */
.product-image.large,
img[width="1200"] {
  aspect-ratio: 1 / 1;
  max-width: 1200px;
}

/* ✅ برای کانتینرهای تصویر */
.product-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: hsl(35, 18%, 90%);
  border-radius: 8px;
}

.product-image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 🚀 بهینه‌سازی برای Chrome */
@supports (content-visibility: auto) {
  .product-card-wrapper {
    content-visibility: auto;
    contain-intrinsic-size: 320px;
  }
}

/* ✅ Hover effect برای تصاویر */
.product-image:hover,
.product-img:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* 🔄 وقتی تصویر در حال بارگذاری است */
img[loading="lazy"]:not(.loaded) {
  opacity: 0.7;
}

/* ✅ Fade in animation وقتی تصویر بارگذاری می‌شود */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

img.loaded {
  animation: fadeIn 0.3s ease-in;
}

/* 📱 Responsive: موبایل */
@media (max-width: 768px) {
  .product-image,
  .product-img {
    aspect-ratio: 1 / 1;
    max-height: 300px;
  }
  
  .product-image-container {
    aspect-ratio: 1 / 1;
  }
}

/* 🖥️ Responsive: تبلت */
@media (min-width: 769px) and (max-width: 1024px) {
  .product-image,
  .product-img {
    max-height: 400px;
  }
}

/* 💻 Responsive: دسکتاپ */
@media (min-width: 1025px) {
  .product-image,
  .product-img {
    max-height: 600px;
  }
}

/* ✅ WebP Support Detection */
.webp .product-image[data-webp] {
  background-image: attr(data-webp url);
}

.no-webp .product-image[data-fallback] {
  background-image: attr(data-fallback url);
}

/* 🎨 Placeholder برای تصاویر بدون محتوا */
img[src*="placeholder"],
img[src*="default"] {
  opacity: 0.6;
  filter: grayscale(20%);
}

/* 🔧 Fix برای Chrome image loading issues */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* ✅ بهینه‌سازی GPU acceleration */
.product-image,
.product-img {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 🚫 جلوگیری از drag تصاویر */
img {
  user-select: none;
  -webkit-user-drag: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

/* ✅ Grid Layout بهینه برای لیست محصولات */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

@media (max-width: 768px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
}

/* 🎯 Image intersection observer optimization */
.product-card-wrapper {
  min-height: 320px; /* Reserve space to prevent layout shift */
}

/* ✅ Prevent FOUC (Flash of Unstyled Content) */
.product-image-container:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    #f0f0f0 25%,
    #e0e0e0 50%,
    #f0f0f0 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

/* 🚀 Performance: Reduce repaints */
.product-image,
.product-img {
  contain: layout style paint;
}