/* Estilo para o vídeo fixo no rodapé */
#video-footer,
#video-footer-product {
    position: fixed;
    bottom: 20px;
    width: 90px;
    height: 150px;
    z-index: 9999;
    cursor: pointer;
    border-radius: 10px;
    border: 4px solid #7B01B5;
    padding: 1px;
    background-color: white;
}

#video-footer-video,
#video-footer-product-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Ocultar todos os controles e elementos extras */
#video-footer-video::-webkit-media-controls-enclosure,
#video-footer-product-video::-webkit-media-controls-enclosure,
#video-footer-video::-webkit-media-controls-play-button,
#video-footer-product-video::-webkit-media-controls-play-button,
#video-footer-video::-webkit-media-controls-start-playback-button,
#video-footer-product-video::-webkit-media-controls-start-playback-button,
#video-footer-video::-webkit-media-controls-overlay-play-button,
#video-footer-product-video::-webkit-media-controls-overlay-play-button,
#video-footer-video::-webkit-media-controls-time-remaining-display,
#video-footer-product-video::-webkit-media-controls-time-remaining-display,
#video-footer-video::-webkit-media-controls-seek-back-button,
#video-footer-product-video::-webkit-media-controls-seek-back-button,
#video-footer-video::-webkit-media-controls-seek-forward-button,
#video-footer-product-video::-webkit-media-controls-seek-forward-button,
#video-footer-video::-webkit-media-controls-panel,
#video-footer-product-video::-webkit-media-controls-panel {
    display: none !important;
}

/* Estilo para o vídeo em formato de stories */
#story-circle {
    position: fixed;
    top: 180px;
    /* left ou right será substituído dinamicamente via inline style */
    width: 90px;
    height: 90px;
    z-index: 9999;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #7B01B5; /* Cor e espessura da borda serão substituídas dinamicamente */
    padding: 2px;
    background-color: white;
}

#story-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Estilo para a exibição em fullscreen */
#vwp-video-fullscreen {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    justify-content: center;
    align-items: center;
}

/* Estilo personalizado para o vídeo em fullscreen */
#vwp-video-fullscreen video {
    width: 50.625vh; /* 90% da altura da tela em largura, mantendo a proporção 16:9 */
    height: 90vh; /* 90% da altura da tela */
    max-width: 80%; /* Limitar largura máxima para 90% da largura da tela */
    max-height: 80%; /* Limitar altura máxima para 90% da altura da tela */
    object-fit: cover;
    border-radius: 10px;
    background-color: white;
}

/* Estilo para o vídeo nas páginas de produtos */
#product-circle {
    position: fixed;
    top: 180px;
    /* left ou right será substituído dinamicamente via inline style */
    width: 100px;
    height: 100px;
    z-index: 9999;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #7B01B5; /* Cor e espessura da borda serão substituídas dinamicamente */
    padding: 2px;
    background-color: white;
}

#product-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}