/**
 * VixViu Preview-Plus Frontend CSS
 * Foundation CSS overrides for frontend styling
 *
 * IMPORTANT: This file loads AFTER foundation CSS to ensure overrides work properly
 * Use !important sparingly and only when necessary for foundation CSS overrides
 */

/* Plugin-specific wrapper styling */
.vixviu-preview-plus-wrapper {
    /* Add any plugin-specific wrapper styles here */
}

.vixviu-preview-plus-single-swap-host {
    position: relative;
    display: block;
    overflow: hidden;
}

.vixviu-preview-plus-single-swap-host img {
    display: block;
    width: 100%;
    height: auto;
}

.vixviu-preview-plus-video {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
    .vixviu-preview-plus-video {
        transition: none;
    }
}

/* Make video fill */
.vixviu-preview-plus-video .vixviu-video-plus-container,
.vixviu-preview-plus-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* SHOW video on hover */
.vixviu-preview-plus-single-swap-host:hover .vixviu-preview-plus-video {
    opacity: 1;
}