/* RGB Border Effect for WooCommerce Products */

/* Target WooCommerce products and custom rgb-border class */
.woocommerce ul.products li.product,
.elementor-widget-wc-products .product,
.rgb-border {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--rgb-transition-duration, 0.3s) ease;
    will-change: transform;
}

/* Hover scale effect */
.woocommerce ul.products li.product:hover,
.elementor-widget-wc-products .product:hover,
.rgb-border:hover {
    transform: scale(var(--rgb-hover-scale, 1.05));
}

/* RGB border pseudo-element */
.woocommerce ul.products li.product::before,
.elementor-widget-wc-products .product::before,
.rgb-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--rgb-border-radius, 10px);
    border: var(--rgb-border-width, 3px) solid transparent;
    opacity: 0;
    transition: opacity var(--rgb-transition-duration, 0.3s) ease;
    background: var(--rgb-border-background, 
        linear-gradient(var(--rgb-bg-color, #fff), var(--rgb-bg-color, #fff)) padding-box,
        transparent border-box);
    pointer-events: none;
    z-index: 1;
    will-change: opacity, background;
}

/* Show border on hover */
.woocommerce ul.products li.product:hover::before,
.elementor-widget-wc-products .product:hover::before,
.rgb-border:hover::before {
    opacity: 1;
}

/* Ensure content stays above the border */
.woocommerce ul.products li.product > *,
.elementor-widget-wc-products .product > *,
.rgb-border > * {
    position: relative;
    z-index: 2;
}

/* Dark theme compatibility */
.rgb-border.dark-theme::before,
.woocommerce.dark-theme ul.products li.product::before {
    background: 
        linear-gradient(#000, #000) padding-box,
        transparent border-box;
}

/* Performance optimizations */
.woocommerce ul.products li.product,
.elementor-widget-wc-products .product,
.rgb-border {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .woocommerce ul.products li.product,
    .elementor-widget-wc-products .product,
    .rgb-border {
        transition: none !important;
    }
    
    .woocommerce ul.products li.product:hover,
    .elementor-widget-wc-products .product:hover,
    .rgb-border:hover {
        transform: none !important;
    }
    
    .woocommerce ul.products li.product::before,
    .elementor-widget-wc-products .product::before,
    .rgb-border::before {
        display: none !important;
    }
}

/* Elementor specific adjustments */
.elementor-widget-wc-products .woocommerce ul.products li.product {
    margin-bottom: 0;
}

/* Product card image container adjustments */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.elementor-widget-wc-products .product .woocommerce-loop-product__link {
    display: block;
    position: relative;
    z-index: 2;
}

/* Ensure compatibility with various themes */
.rgb-border-container {
    position: relative;
    display: block;
}

/* Custom RGB border class for manual application */
.apply-rgb-border {
    position: relative !important;
    overflow: hidden !important;
}

.apply-rgb-border::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--rgb-border-radius, 10px);
    border: var(--rgb-border-width, 3px) solid transparent;
    opacity: 0;
    transition: opacity var(--rgb-transition-duration, 0.3s) ease;
    background: 
        linear-gradient(var(--rgb-bg-color, #fff), var(--rgb-bg-color, #fff)) padding-box,
        transparent border-box;
    pointer-events: none;
    z-index: 1;
    will-change: opacity, background;
}

.apply-rgb-border:hover::before {
    opacity: 1;
}

.apply-rgb-border:hover {
    transform: scale(var(--rgb-hover-scale, 1.05));
}

/* Mobile optimizations */
@media (max-width: 768px) {
    .woocommerce ul.products li.product:hover,
    .elementor-widget-wc-products .product:hover,
    .rgb-border:hover {
        transform: scale(var(--rgb-hover-scale-mobile, 1.02));
    }
}

/* Loading state */
.rgb-border-loading {
    position: relative;
}

.rgb-border-loading::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: rgb-border-spin 1s linear infinite;
    z-index: 10;
}

@keyframes rgb-border-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}