/**
 * GCampaner Video Product - Estilos
 */

/* ============================================
   GALERIA DA PÁGINA INDIVIDUAL DO PRODUTO
   ============================================ */

.gcampaner-product-video-thumbnail {
    margin-bottom: 15px;
    cursor: pointer;
    position: relative;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.gcampaner-product-video-thumbnail:hover {
    opacity: 0.9;
}

.gcampaner-product-video-thumbnail .gcampaner-video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    border-radius: 4px;
}

.gcampaner-product-video-thumbnail .gcampaner-product-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vídeo na galeria principal */
.woocommerce-product-gallery__wrapper .gcampaner-main-gallery-video,
.product-images .images .gcampaner-main-gallery-video {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.gcampaner-main-gallery-video .gcampaner-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.gcampaner-main-gallery-video .gcampaner-product-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}


/* ============================================
   LISTAGEM DE PRODUTOS (FLATSOME)
   ============================================ */

.gcampaner-product-video-listing-wrapper {
    position: relative;
    width: 100%;
}

.gcampaner-product-video-listing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none;
}

.gcampaner-product-video-listing .gcampaner-video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 0;
    overflow: hidden;
    background: #f5f5f5;
}

.gcampaner-product-video-listing .gcampaner-listing-video,
.gcampaner-product-video-listing .gcampaner-video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gcampaner-product-video-listing .gcampaner-video-fallback {
    transition: opacity 0.4s ease;
    opacity: 1;
}

.gcampaner-product-video-listing.video-loaded .gcampaner-video-fallback {
    opacity: 0;
    pointer-events: none;
}

.gcampaner-product-video-listing .gcampaner-listing-video {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2 !important;
}

.gcampaner-product-video-listing.video-loaded .gcampaner-listing-video {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 3 !important;
}

/* Ajustes para .box-image apenas */
.gcampaner-product-video-listing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20 !important;
    pointer-events: none;
    display: block;
}

.box-image .gcampaner-product-video-listing {
    display: block;
}

/* Container .box-image quando tem vídeo */
.box-image.has-video-product {
    position: relative !important;
    overflow: hidden !important;
    width: 100%;
    max-width: 100%;
}

/* Ocultar galeria hover do Flatsome quando vídeo está ativo - apenas em .box-image */
.box-image.has-video-product .product-gallery-slider,
.box-image.has-video-product .image-tools,
.box-image.has-video-product .image-fade_in_back,
.box-image.has-video-product:hover .product-gallery-slider,
.box-image.has-video-product:hover .image-tools,
.box-image.has-video-product:hover .image-fade_in_back {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Esconde completamente a imagem destacada e elementos de hover quando vídeo está ativo */
.box-image.has-video-product .image-fade_in_back,
.box-image.has-video-product .image-fade_in_back img,
.box-image.has-video-product > a > img,
.box-image.has-video-product a img:not(.gcampaner-video-fallback),
.box-image.has-video-product img:not(.gcampaner-video-fallback) {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
}

/* Garante que o vídeo fique acima de tudo */
.box-image.has-video-product .gcampaner-product-video-listing {
    z-index: 20 !important;
}

/* Garante que o container do vídeo também fique acima */
.box-image.has-video-product .gcampaner-video-container {
    z-index: 21 !important;
}

/* Garante que o vídeo esteja acima da imagem fallback */
.box-image.has-video-product .gcampaner-listing-video {
    z-index: 30 !important;
    position: absolute !important;
}

.box-image.has-video-product.video-loaded .gcampaner-listing-video {
    z-index: 30 !important;
    position: absolute !important;
}

/* Garantir proporção do vídeo seja respeitada */
.gcampaner-video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    background: #f5f5f5;
}

.box-image.has-video-product .gcampaner-video-container {
    width: 100% !important;
}

/* Vídeo dentro do container */
.gcampaner-listing-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

/* Imagem fallback - DEVE estar sempre visível inicialmente */
.gcampaner-video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
}

.box-image.has-video-product .gcampaner-video-fallback {
    z-index: 1 !important;
}

.box-image.has-video-product.video-loaded .gcampaner-video-fallback {
    z-index: 0 !important;
}

/* Esconde fallback completamente quando vídeo está tocando */
.gcampaner-product-video-listing.video-loaded .gcampaner-video-fallback {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    display: none !important;
    z-index: 0 !important;
}

/* ============================================
   ESTADOS DE CARREGAMENTO
   ============================================ */

.gcampaner-video-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: gcampaner-spin 0.6s linear infinite;
    z-index: 20;
}

@keyframes gcampaner-spin {
    to { 
        transform: rotate(360deg); 
    }
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

@media (max-width: 768px) {
    .gcampaner-product-video-thumbnail {
        margin-bottom: 10px;
    }
}

/* ============================================
   ACESSIBILIDADE
   ============================================ */

.gcampaner-product-video-thumbnail:focus {
    outline: 2px solid var(--primary-color, #0073aa);
    outline-offset: 2px;
}

/* Reduzir animações para usuários que preferem movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    .gcampaner-product-video-thumbnail,
    .gcampaner-video-fallback,
    .gcampaner-listing-video {
        transition: none;
        animation: none;
    }
}

/* Responsividade - Vídeos devem ser responsivos mantendo proporção */

/* Galeria Single */
.gcampaner-main-gallery-video .gcampaner-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.gcampaner-main-gallery-video .gcampaner-product-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* Listagem */
.gcampaner-product-video-listing .gcampaner-video-container {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 0;
    overflow: hidden;
    background: #f5f5f5;
}

.gcampaner-product-video-listing .gcampaner-listing-video,
.gcampaner-product-video-listing .gcampaner-video-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* Thumbnails */
.gcampaner-product-video-thumbnail .gcampaner-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.gcampaner-product-video-thumbnail .gcampaner-product-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}

/* Garantir que containers responsivos */
.box-image.has-video-product {
    max-width: 100%;
    width: 100%;
}

.woocommerce-product-gallery__wrapper .gcampaner-main-gallery-video,
.product-gallery-slider .gcampaner-main-gallery-video {
    max-width: 100%;
    width: 100%;
}