/* ============================================================================
   SPRITESPIN CONTAINER SIZE OVERRIDE - CRITICAL FIX
   ============================================================================

   PROBLEM: Hundreds of CSS rules across multiple files set fixed widths/heights
   on #videocontainer with !important, preventing JavaScript from controlling size.

   SOLUTION: Override ALL fixed dimensions and let JavaScript read product image
   size and set SpriteSpin dimensions dynamically for perfect matching.

   FILES OVERRIDDEN:
   - B2CTheme/css/responsive.css (315px !important)
   - B2CTheme/css/Seperate/_buildProductDetail.css (many fixed sizes)
   - B2CTheme/css/Seperate/_ItemDetails.css (many fixed sizes)
   - B2CTheme/css/style1.css (335px, 312px)
   - B2CTheme/css/test.css (hundreds of rules)

   LOAD ORDER: This file MUST load LAST to override all previous rules.
   ============================================================================ */

/* CRITICAL: Remove ALL fixed dimensions from SpriteSpin containers */
#videocontainer,
#videocontainer-H,
#videocontainer-R,
.videocontainer,
.pdp-spritespin {
    /* Remove fixed widths */
    width: 100% !important;
    min-width: unset !important;
    max-width: 650px !important; /* BUG 4 FIX: Allow 650px for desktop responsive */

    /* Remove fixed heights - let content size container */
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;

    /* Flexible layout - inline-block wraps canvas */
    display: inline-block !important;
    position: relative !important;
    vertical-align: top !important;
}

/* SpriteSpin wrapper - must contain canvas properly */
#spritespin-wrapper-H,
#spritespin-wrapper-R,
[id^="spritespin-wrapper"] {
    width: 100% !important;
    /* CRITICAL: Do NOT use fixed min-height - JavaScript will set height dynamically */
    /* Canvas is absolutely positioned and doesn't contribute to wrapper height */
    /* JavaScript sets explicit height to match canvas dimensions */
    height: auto;  /* NO !important - let JavaScript override */
    display: block !important;
    margin: 0 auto !important;
    position: relative !important;
    text-align: center !important;
}

/* ============================================================================
   UNIFIED OVERLAY ARCHITECTURE - 360° VIDEO POSITIONING
   ============================================================================

   SOLUTION: 360° views render as absolutely positioned overlay inside #popupdiv,
   at the EXACT same location as product image (#productmainimage).

   ARCHITECTURE:
   - #popupdiv (position: relative) = parent positioning context
   - #video-overlay-wrapper (position: absolute, top:0, left:0) = overlay container
   - #videoimagesh-inline, #videoimagesr-inline = 360° view containers
   - Toggle visibility via JavaScript based on thumbnail clicks

   ============================================================================ */

/* Parent container must be positioned for absolute children */
.imageWeb #popupdiv {
    position: relative !important;
    width: 100% !important;
    display: block !important;
}

/* CRITICAL: Prevent #popupdiv height collapse on mobile when 360° overlay is active */
/* Mobile (iPhone): #popupdiv collapses to 0 height when product image is absolutely positioned */
@media (max-width: 768px) {
    .imageWeb #popupdiv {
        min-height: 400px !important; /* Minimum height to contain 360° video */
    }
}

/* 360° overlay wrapper - absolutely positioned over product image */
#video-overlay-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    /* Let content determine height - don't constrain */
    height: auto !important;
    z-index: 100 !important;
    display: none !important;
}

#video-overlay-wrapper.active {
    display: block !important;
}

/* CRITICAL: Hide product image when video overlay is active */
/* Use :has() selector to target parent container and hide product image */
/* IMPORTANT: Use visibility + opacity (NOT display:none) to preserve dimensions for SpriteSpin */
/* CRITICAL: Include img element selector and .cloudzoom class to match specificity of pdp-surgical-fix.css and pdp-core-merged.css */
/* These files have rules like img#productmainimage and #productmainimage.cloudzoom with !important that override our rules */
#popupdiv:has(#video-overlay-wrapper.active) img#productmainimage,
#popupdiv:has(#video-overlay-wrapper.active) #productmainimage.cloudzoom,
.imageWeb #popupdiv:has(#video-overlay-wrapper.active) img#productmainimage,
.imageWeb #popupdiv:has(#video-overlay-wrapper.active) #productmainimage.cloudzoom,
.Centervideocontainer .imageWeb #popupdiv:has(#video-overlay-wrapper.active) img#productmainimage,
.Centervideocontainer .imageWeb #popupdiv:has(#video-overlay-wrapper.active) #productmainimage.cloudzoom,
.Product-detail .container .product-full-details .product-slider .Centervideocontainer .imageWeb #popupdiv:has(#video-overlay-wrapper.active) img#productmainimage,
.Product-detail .container .product-full-details .product-slider .Centervideocontainer .imageWeb #popupdiv:has(#video-overlay-wrapper.active) #productmainimage.cloudzoom,
.Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .imageWeb #popupdiv:has(#video-overlay-wrapper.active) img#productmainimage,
.Product-detail .web-size .container .product-full-details .product-slider .Centervideocontainer .imageWeb #popupdiv:has(#video-overlay-wrapper.active) #productmainimage.cloudzoom {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -1 !important;
    /* DO NOT use display: none - it collapses dimensions and prevents SpriteSpin from reading natural size */
    position: absolute !important;
    /* Visually hide but preserve layout space for dimension reading */
}

/* 360° inline containers inside overlay */
/* CRITICAL: Remove !important from display so JavaScript can show/hide these containers */
#videoimagesh-inline,
#videoimagesr-inline {
    width: 100% !important;
    height: 100% !important;
    display: none; /* JavaScript will change this to 'block' when active */
}

/* Video containers inside overlay - full width/height */
#video-overlay-wrapper #videocontainer-H,
#video-overlay-wrapper #videocontainer-R {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: inline-block !important;
}

/* ============================================================================
   END UNIFIED OVERLAY ARCHITECTURE
   ============================================================================ */

/* Product slider contexts - override specific rules */
.product-slider #videocontainer,
.product-slider .productvideos #videocontainer,
.product-slider #videoimages.productvideos #videocontainer,
#videoimages #videocontainer {
    width: 100% !important;
    min-width: unset !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
}

/* Responsive overrides - all breakpoints */
@media only screen and (max-width: 767px) {
    #videocontainer,
    #videocontainer-H,
    #videocontainer-R,
    .videocontainer {
        width: 100% !important;
        height: auto !important;
        /* Mobile: Need min-height to contain canvas */
        min-height: 300px !important;
        max-width: 100% !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #videocontainer,
    #videocontainer-H,
    #videocontainer-R,
    .videocontainer {
        width: 100% !important;
        height: auto !important;
        /* Tablet: Need min-height to contain canvas */
        min-height: 400px !important;
        max-width: 100% !important;
    }
}

@media only screen and (min-width: 1025px) {
    #videocontainer,
    #videocontainer-H,
    #videocontainer-R,
    .videocontainer {
        width: 100% !important;
        height: auto !important;
        /* BUG 4 FIX: Allow responsive sizing without min-width constraint */
        /* Desktop: Product image is hidden, so container needs defined dimensions */
        min-width: 300px !important; /* Minimum for smallest viewports */
        min-height: 300px !important; /* Maintain aspect ratio */
        max-width: 650px !important;
    }
}

/* OLD iframe-based 360° container - keep hidden (replaced by SpriteSpin overlay) */
#container.videocontainer {
    display: none !important;
}

/* ============================================================================
   END SPRITESPIN CONTAINER OVERRIDE
   ============================================================================ */