/**
 * Video Support Styles
 * Styles for video elements in product cards and galleries
 */

/* Product Card Video Styles */
.product-img-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: block;
}

.product-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Main video (visible by default) - matches image behavior */
.product-img .product-video-main,
.card-product .product-img .product-video-main,
.card-product .card-product-wrapper .product-img video.product-video-main {
    position: relative !important;
    z-index: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    transition-duration: 700ms;
    flex-shrink: 0;
    min-height: 0;
}

/* Override any image-specific styles that might affect video */
.card-product .card-product-wrapper .product-img video {
    display: block !important;
}

/* Ensure video works within flex container */
.card-product .product-img video.product-video-main {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}

/* Make sure video is visible and not hidden by any other styles */
.card-product .card-product-wrapper .product-img > video.product-video-main {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
}

.product-img-main {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 0;
}

/* Gallery Video Styles */
.gallery-video {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Video Play Overlay (for gallery videos) */
.video-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.gallery-video:hover .video-play-overlay {
    opacity: 1;
}

/* Ensure videos don't break layout */
.gallery-video,
.gallery-image {
    aspect-ratio: 1;
}

/* Swiper gallery video styles */
.swiper-slide .gallery-video {
    width: 100%;
    height: 100%;
}

.swiper-slide .gallery-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Grid gallery video styles (v3, v5) */
.item-scroll-target.gallery-video {
    width: 100%;
    height: auto;
}

.item-scroll-target.gallery-video .gallery-video-element {
    width: 100%;
    height: auto;
    max-height: 100%;
}

/* Thumbnail video styles */
.tf-product-media-thumbs .gallery-video-element {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

/* Main image video styles */
.tf-product-media-main .gallery-video {
    width: 100%;
    height: 100%;
}

.tf-product-media-main .gallery-video-element {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Use contain for main image to show full video */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .video-play-overlay {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    
    /* On mobile, consider disabling autoplay or using smaller videos */
    .product-video,
    .gallery-video-element {
        /* Mobile browsers may have restrictions on autoplay */
    }
}

/* Loading state (optional) */
.gallery-video-element[preload="metadata"] {
    background: #f0f0f0;
}

/* Ensure video controls are visible when needed */
.gallery-video-element[controls] {
    cursor: pointer;
}

/* More Options (Linked Products) Video Styles */
.linked-product-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}