/*
 * WooCommerce Frontend Enhancer - Styles
 *
 * @package WooCommerce Frontend Enhancer
 * @since   1.0.0
 *
 * ============================================================
 *  CÓMO PERSONALIZAR:
 * ============================================================
 *  Todos los selectors usan el prefijo .wfe- para evitar conflictos.
 *
 *  Para cambiar la duración de la animación, sobrescribe:
 *  .wfe-image-wrapper { --wfe-transition-duration: 0.6s; }
 *
 * ============================================================
 */

/* ==========================================================================
   Contenedor principal del hover image
   ========================================================================== */
.wfe-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    overflow: hidden;
    --wfe-transition-duration: 0.4s;
    background-color:#fff!important;
}
/* Disparamos el cambio de imagen del plugin también desde el hover del card completo */
.card-product:hover .wfe-image-hover {
    opacity: 1 !important;
}

.card-product:hover .wfe-image-default {
    opacity: 0 !important;
}

/* ==========================================================================
   Imagen por defecto (visible inicialmente)
   ========================================================================== */
.wfe-image-default {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
}

.wfe-image-default img,
.wfe-image-default picture {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================================================
   Imagen hover (se muestra al hacer hover)
   ========================================================================== */
.wfe-image-hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.wfe-image-hover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   ANIMACIONES
   ========================================================================== */

/* ---- FADE (default) ---- */
.wfe-animation-fade .wfe-image-default {
    opacity: 1;
    visibility: visible;
    transition:
        opacity var(--wfe-transition-duration) ease-in-out,
        visibility var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-fade .wfe-image-hover {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--wfe-transition-duration) ease-in-out,
        visibility var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-fade:hover .wfe-image-default {
    opacity: 0;
    visibility: hidden;
}

.wfe-animation-fade:hover .wfe-image-hover {
    opacity: 1;
    visibility: visible;
    z-index: 3;
}

/* ---- SLIDE UP ---- */
.wfe-animation-slide .wfe-image-default {
    transition: transform var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-slide .wfe-image-hover {
    transform: translateY(100%);
    z-index: 3;
    transition: transform var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-slide:hover .wfe-image-default {
    transform: translateY(-100%);
}

.wfe-animation-slide:hover .wfe-image-hover {
    transform: translateY(0);
}

/* ---- SLIDE DOWN ---- */
.wfe-animation-slide-d .wfe-image-default {
    transition: transform var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-slide-d .wfe-image-hover {
    transform: translateY(-100%);
    z-index: 3;
    transition: transform var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-slide-d:hover .wfe-image-default {
    transform: translateY(100%);
}

.wfe-animation-slide-d:hover .wfe-image-hover {
    transform: translateY(0);
}

/* ---- SLIDE LEFT ---- */
.wfe-animation-slide-l .wfe-image-default {
    transition: transform var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-slide-l .wfe-image-hover {
    transform: translateX(100%);
    z-index: 3;
    transition: transform var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-slide-l:hover .wfe-image-default {
    transform: translateX(-100%);
}

.wfe-animation-slide-l:hover .wfe-image-hover {
    transform: translateX(0);
}

/* ---- SLIDE RIGHT ---- */
.wfe-animation-slide-r .wfe-image-default {
    transition: transform var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-slide-r .wfe-image-hover {
    transform: translateX(-100%);
    z-index: 3;
    transition: transform var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-slide-r:hover .wfe-image-default {
    transform: translateX(100%);
}

.wfe-animation-slide-r:hover .wfe-image-hover {
    transform: translateX(0);
}

/* ---- ZOOM IN ---- */
.wfe-animation-zoom-in .wfe-image-default {
    transition: transform var(--wfe-transition-duration) ease-in-out,
                opacity var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-zoom-in .wfe-image-hover {
    opacity: 0;
    transform: scale(0.8);
    transition: transform var(--wfe-transition-duration) ease-in-out,
                opacity var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-zoom-in:hover .wfe-image-default {
    opacity: 0;
    transform: scale(1.1);
}

.wfe-animation-zoom-in:hover .wfe-image-hover {
    opacity: 1;
    transform: scale(1);
    z-index: 3;
}

/* ---- ZOOM OUT ---- */
.wfe-animation-zoom-out .wfe-image-default {
    transition: transform var(--wfe-transition-duration) ease-in-out,
                opacity var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-zoom-out .wfe-image-hover {
    opacity: 0;
    transform: scale(1.2);
    transition: transform var(--wfe-transition-duration) ease-in-out,
                opacity var(--wfe-transition-duration) ease-in-out;
}

.wfe-animation-zoom-out:hover .wfe-image-default {
    opacity: 0;
    transform: scale(0.8);
}

.wfe-animation-zoom-out:hover .wfe-image-hover {
    opacity: 1;
    transform: scale(1);
    z-index: 3;
}

/* ==========================================================================
   SOPORTE TÁCTIL (mobile/tablet)
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
    .wfe-animation-fade:hover .wfe-image-default {
        opacity: 1;
        visibility: visible;
    }

    .wfe-animation-fade:hover .wfe-image-hover {
        opacity: 0;
        visibility: hidden;
    }

    .wfe-animation-fade.wfe-touch-active .wfe-image-default {
        opacity: 0;
        visibility: hidden;
    }

    .wfe-animation-fade.wfe-touch-active .wfe-image-hover {
        opacity: 1;
        visibility: visible;
        z-index: 3;
    }

    /* Slide animations reset on touch */
    .wfe-animation-slide:hover .wfe-image-default,
    .wfe-animation-slide-d:hover .wfe-image-default,
    .wfe-animation-slide-l:hover .wfe-image-default,
    .wfe-animation-slide-r:hover .wfe-image-default {
        transform: translate(0);
    }

    .wfe-animation-slide.wfe-touch-active .wfe-image-default {
        transform: translateY(-100%);
    }

    .wfe-animation-slide.wfe-touch-active .wfe-image-hover {
        transform: translateY(0);
    }

    .wfe-animation-slide-d.wfe-touch-active .wfe-image-default {
        transform: translateY(100%);
    }

    .wfe-animation-slide-d.wfe-touch-active .wfe-image-hover {
        transform: translateY(0);
    }

    .wfe-animation-slide-l.wfe-touch-active .wfe-image-default {
        transform: translateX(-100%);
    }

    .wfe-animation-slide-l.wfe-touch-active .wfe-image-hover {
        transform: translateX(0);
    }

    .wfe-animation-slide-r.wfe-touch-active .wfe-image-default {
        transform: translateX(100%);
    }

    .wfe-animation-slide-r.wfe-touch-active .wfe-image-hover {
        transform: translateX(0);
    }

    .wfe-animation-zoom-in.wfe-touch-active .wfe-image-default,
    .wfe-animation-zoom-out.wfe-touch-active .wfe-image-default {
        opacity: 0;
    }

    .wfe-animation-zoom-in.wfe-touch-active .wfe-image-hover,
    .wfe-animation-zoom-out.wfe-touch-active .wfe-image-hover {
        opacity: 1;
        transform: scale(1);
        z-index: 3;
    }
}

/* ==========================================================================
   Placeholder para futuras features:
   .wfe-quick-view-button { ... }
   .wfe-wishlist-button { ... }
   .wfe-badge { ... }
   .wfe-ajax-add-to-cart { ... }
   .wfe-product-label { ... }
   ========================================================================== */