/**
 * WooCommerce Variation Images Force
 * CSS styles for smooth image transitions
 */

/* Loading state for product images */
.woocommerce-product-gallery__image img.loading,
.product-image img.loading,
.wp-post-image.loading,
.single-product img.loading {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* Smooth transitions for all product images */
.woocommerce-product-gallery__image img,
.product-image img,
.wp-post-image,
.single-product img,
.product .images img,
.woocommerce-product-gallery img {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Ensure images maintain aspect ratio during transitions */
.woocommerce-product-gallery__image,
.product-image,
.product .images {
    position: relative;
    overflow: hidden;
}

.woocommerce-product-gallery__image img,
.product-image img,
.product .images img {
    width: 100%;
    height: auto;
    display: block;
}

/* Loading spinner overlay */
.woocommerce-product-gallery__image::after,
.product-image::after,
.product .images::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 10;
}

.woocommerce-product-gallery__image.loading::after,
.product-image.loading::after,
.product .images.loading::after {
    opacity: 1;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade effect for image changes */
.woocommerce-product-gallery__image img.fade-out,
.product-image img.fade-out,
.wp-post-image.fade-out,
.single-product img.fade-out {
    opacity: 0;
    transform: scale(0.95);
}

.woocommerce-product-gallery__image img.fade-in,
.product-image img.fade-in,
.wp-post-image.fade-in,
.single-product img.fade-in {
    opacity: 1;
    transform: scale(1);
}

/* Ensure proper display for different image containers */
.woocommerce-product-gallery__wrapper {
    position: relative;
}

.woocommerce-product-gallery__image {
    position: relative;
    display: block;
}

/* Compatibility with Astra theme */
.ast-separate-container .woocommerce-product-gallery__image img,
.ast-separate-container .product-image img,
.ast-separate-container .wp-post-image {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .woocommerce-product-gallery__image img,
    .product-image img,
    .wp-post-image,
    .single-product img {
        transition-duration: 0.2s; /* Faster transitions on mobile */
    }
}

/* Ensure images don't break layout during transitions */
.woocommerce-product-gallery__image,
.product-image,
.product .images {
    min-height: 200px; /* Prevent layout shift */
}

/* Loading state for the entire gallery */
.woocommerce-product-gallery.loading {
    position: relative;
}

.woocommerce-product-gallery.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 5;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.woocommerce-product-gallery.loading::after {
    content: 'Loading...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #333;
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.woocommerce-product-gallery.loading::before,
.woocommerce-product-gallery.loading::after {
    opacity: 1;
}

/* Error state styling */
.woocommerce-product-gallery__image img.error,
.product-image img.error,
.wp-post-image.error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* Ensure proper z-index for overlays */
.woocommerce-product-gallery__image {
    z-index: 1;
}

.woocommerce-product-gallery__image::after {
    z-index: 10;
}

/* Compatibility with popular WooCommerce gallery plugins */
.woocommerce-product-gallery__trigger {
    transition: opacity 0.3s ease;
}

.woocommerce-product-gallery__trigger:hover {
    opacity: 0.8;
}

/* Ensure thumbnails also transition smoothly */
.woocommerce-product-gallery__image--placeholder img,
.woocommerce-product-gallery__image img {
    transition: all 0.3s ease;
}

/* Fix for themes that use background images */
.woocommerce-product-gallery__image[style*="background-image"] {
    transition: all 0.3s ease;
}

/* Ensure compatibility with zoom plugins */
.woocommerce-product-gallery__image img[data-zoom-image] {
    transition: opacity 0.3s ease;
}

/* Loading state for zoom containers */
.woocommerce-product-gallery__image.loading img[data-zoom-image] {
    pointer-events: none;
}