/**
 * Beef Sires Video Fixes
 * Ensures videos display properly on all screen sizes
 * For both single product pages AND category grid views
 * Version: 1.3.0
 */

/* ============================================
   BASE VIDEO CONTAINER STYLES
   ============================================ */

/* Ensure video container is always visible when displayed */
#main-product-video,
.video-container {
    width: 100% !important;
    height: auto !important;
    min-height: 190px !important; /* Ensure container has minimum height */
    display: none; /* Hidden by default, shown via JavaScript */
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* When video container is shown */
#main-product-video[style*="display: block"],
.video-container[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    min-height: 190px !important; /* Maintain minimum height when shown */
}

/* ============================================
   VIDEO ELEMENT STYLES
   ============================================ */

.product-main-video,
#main-product-video video,
.video-container video {
    width: 100% !important;
    height: auto !important;
    min-height: 190px !important; /* Ensure video is always visible */
    max-width: 100% !important;
    display: block !important;
    object-fit: contain !important;
}

/* Remove any max-height constraints that could hide video */
.product-main-video {
    max-height: none !important;
    min-height: 190px !important; /* Critical: prevents video from collapsing */
}

/* ============================================
   RESPONSIVE FIXES - CRITICAL
   ============================================ */

/* Fix for screens below 1780px - matching Australian Sires implementation */
@media (max-width: 1780px) {
    /* Container styles for single product pages */
    #main-product-video,
    .video-container {
        height: auto !important;
        min-height: 200px !important; /* Ensure minimum visibility */
    }
    
    /* Video element styles for single product pages */
    .product-main-video,
    #main-product-video video,
    .video-container video {
        height: auto !important;
        max-height: 400px !important; /* Match Australian Sires max-height */
    }
    
    /* Category page video styles - for grid view videos */
    .video-view .angus-card-video-container,
    .video-view .charolais-card-video-container,
    .video-view .hereford-card-video-container,
    .video-view .murray-grey-card-video-container,
    .video-view .red-angus-card-video-container,
    .video-view .simmental-card-video-container,
    .video-view .south-devon-card-video-container,
    .video-view .speckle-park-card-video-container,
    .video-view .wagyu-card-video-container,
    .video-view .beef-sires-card-video-container {
        height: auto !important;
    }
    
    /* Video elements in category grid view */
    .video-view .angus-card-video-container video,
    .video-view .charolais-card-video-container video,
    .video-view .hereford-card-video-container video,
    .video-view .murray-grey-card-video-container video,
    .video-view .red-angus-card-video-container video,
    .video-view .simmental-card-video-container video,
    .video-view .south-devon-card-video-container video,
    .video-view .speckle-park-card-video-container video,
    .video-view .wagyu-card-video-container video,
    .video-view .beef-sires-card-video-container video {
        height: auto !important;
        max-height: 400px !important; /* Match Australian Sires styling */
    }
}

/* Tablet screens */
@media (max-width: 1024px) {
    #main-product-video,
    .video-container {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .product-main-video {
        width: 100% !important;
        height: auto !important;
    }
}

/* Mobile screens */
@media (max-width: 768px) {
    #main-product-video,
    .video-container {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .product-main-video,
    #main-product-video video,
    .video-container video {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        /* Maintain aspect ratio on mobile */
        aspect-ratio: 16/9;
        object-fit: contain !important;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .product-main-video,
    #main-product-video video,
    .video-container video {
        width: 100% !important;
        height: auto !important;
        /* Ensure video is visible on very small screens */
        min-height: 200px !important;
        max-height: 60vh !important; /* Limit height to viewport */
    }
}

/* ============================================
   VIDEO LOADING STATES
   ============================================ */

.video-container.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.video-container.loaded {
    background-color: #000;
}

/* Ensure video-loaded containers maintain minimum height */
.video-loaded.angus-card-video-container,
.video-loaded.charolais-card-video-container,
.video-loaded.hereford-card-video-container,
.video-loaded.murray-grey-card-video-container,
.video-loaded.red-angus-card-video-container,
.video-loaded.simmental-card-video-container,
.video-loaded.south-devon-card-video-container,
.video-loaded.speckle-park-card-video-container,
.video-loaded.wagyu-card-video-container,
.video-loaded.beef-sires-card-video-container {
    min-height: 190px !important;
}

.video-container.playing .product-main-video {
    opacity: 1;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ============================================
   IMAGE/VIDEO TOGGLE FIXES
   ============================================ */

/* Ensure image is properly hidden when video is showing */
#main-product-image[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Ensure video is properly hidden when image is showing */
#main-product-video[style*="display: none"],
.video-container[style*="display: none"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ============================================
   OVERRIDE PROBLEMATIC STYLES
   ============================================ */

/* Override any inline styles that might cause issues */
#main-product-video[style*="display: block"] {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    top: auto !important;
    left: auto !important;
}

/* Ensure video controls are accessible */
.product-main-video::-webkit-media-controls {
    display: flex !important;
    opacity: 1 !important;
}

/* ============================================
   PORTRAIT ORIENTATION FIXES
   ============================================ */

@media (orientation: portrait) and (max-width: 768px) {
    .product-main-video,
    #main-product-video video,
    .video-container video {
        width: 100% !important;
        height: auto !important;
        max-height: 50vh !important; /* Limit height in portrait */
        object-fit: contain !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION FIXES
   ============================================ */

@media (orientation: landscape) and (max-width: 768px) {
    .product-main-video,
    #main-product-video video,
    .video-container video {
        width: 100% !important;
        height: auto !important;
        max-height: 80vh !important; /* More height in landscape */
        object-fit: contain !important;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    #main-product-video,
    .video-container {
        display: none !important;
    }
}