/**
 * Vivaia Product Video - Frontend Styles
 *
 * @package Vivaia_Product_Video
 */

/* Video wrapper - match WooCommerce gallery image styling */
.vivaia-product-video-wrapper {
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* Video container - maintain aspect ratio */
.vivaia-product-video-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Video element */
.vivaia-product-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
}

/* GIF element */
.vivaia-product-gif {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
}

/* Ensure video fits properly in grid layouts */
.product-gallery .vivaia-product-video-wrapper,
.product-single .vivaia-product-video-wrapper {
    width: 100%;
    height: auto;
}

/* Match Riode gallery styling for grid layout */
.riode-product-gallery .vivaia-product-video-wrapper {
    position: relative;
    margin-bottom: 10px;
}

/* Match carousel/slider item styling */
.owl-carousel .vivaia-product-video-wrapper {
    display: block;
}

.owl-carousel .vivaia-product-video {
    width: 100%;
    height: auto;
}

/* Ensure proper aspect ratio in carousel */
.product-single-carousel .vivaia-product-video-wrapper,
.product-gallery-carousel .vivaia-product-video-wrapper {
    position: relative;
    width: 100%;
}

.product-single-carousel .vivaia-product-video,
.product-gallery-carousel .vivaia-product-video {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
}

/* Grid layout specific styles */
.riode-single-product.grid .vivaia-product-video-wrapper,
.riode-single-product.gallery .vivaia-product-video-wrapper {
    width: 100%;
    margin-bottom: 10px;
}

/* Sticky layout support */
.sticky-both .vivaia-product-video-wrapper,
.sticky-info .vivaia-product-video-wrapper {
    width: 100%;
}

/* Ensure video works with WooCommerce PhotoSwipe gallery */
.vivaia-product-video-wrapper .woocommerce-product-gallery__trigger {
    display: none;
}

/* Loading state */
.vivaia-product-video-container::before {
    content: '';
    display: block;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.vivaia-product-video-container .vivaia-product-video,
.vivaia-product-video-container .vivaia-product-gif {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Video controls styling - keep hidden at all times */
.vivaia-product-video::-webkit-media-controls {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Controls stay hidden - no hover state
.vivaia-product-video-wrapper:hover .vivaia-product-video::-webkit-media-controls {
    opacity: 1;
}
*/

/* Pause/play overlay (optional) */
.vivaia-product-video-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    transition: background 0.3s ease;
}

.vivaia-product-video-wrapper:hover .vivaia-product-video-container::after {
    background: rgba(0, 0, 0, 0.1);
}

/* Ensure video doesn't break flexbox layouts */
.woocommerce-product-gallery.vivaia-product-video-wrapper {
    flex-shrink: 0;
}

/* -------------------------------
   RESPONSIVE: Hide on Mobile
   ------------------------------- */

/* Tablet breakpoint - show video */
@media (min-width: 768px) {
    .vivaia-product-video-wrapper {
        display: block !important;
    }
}

/* Mobile breakpoint - hide video */
@media (max-width: 767px) {
    .vivaia-product-video-wrapper {
        display: none !important;
    }
}

/* Mobile floating overlay - hidden on desktop */
.vivaia-product-video-mobile-overlay {
    display: none;
}

@media (max-width: 767px) {
    .woocommerce-product-gallery {
        position: relative;
    }

    .vivaia-product-video-mobile-overlay {
        display: block;
        position: absolute;
        top: 10px;
        right: 10px;
        width: 35%;
        max-width: 150px;
        border-radius: 10px;
        overflow: hidden;
        z-index: 10;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .vivaia-mobile-overlay-media {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    .vivaia-mobile-overlay-close {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border: none;
        font-size: 14px;
        line-height: 22px;
        text-align: center;
        cursor: pointer;
        z-index: 11;
        padding: 0;
    }
}

/* -------------------------------
   Compatibility with Riode Layouts
   ------------------------------- */

/* Default layout (vertical thumbnails) */
.riode-single-product.default .vivaia-product-video-wrapper {
    width: 100%;
}

/* Horizontal layout */
.riode-single-product.horizontal .vivaia-product-video-wrapper {
    width: 100%;
}

/* Gallery layout (grid with carousel) */
.riode-single-product.gallery .vivaia-product-video-container {
    aspect-ratio: 1 / 1;
}

.riode-single-product.gallery .vivaia-product-video {
    object-fit: cover;
}

/* Masonry layout */
.riode-single-product.masonry .vivaia-product-video-wrapper {
    width: 100%;
    margin-bottom: 10px;
}

/* -------------------------------
   Accessibility
   ------------------------------- */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .vivaia-product-video {
        animation: none !important;
    }
}

/* Focus state for accessibility */
.vivaia-product-video:focus {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* -------------------------------
   Print Styles
   ------------------------------- */

@media print {
    .vivaia-product-video-wrapper {
        display: none !important;
    }
}