/* --- Estilos para o Modal de Vídeo --- */

.yt-modal-wrapper {
    position: relative;
    display: inline-block; /* Ou 'block' se quiser largura total */
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px; /* Opcional: bordas arredondadas */
}

.yt-modal-wrapper img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.yt-modal-wrapper:hover img {
    transform: scale(1.05); /* Efeito de zoom leve */
}

/* O ícone de Play (Triângulo) */
.yt-modal-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 30px solid white; /* Tamanho do ícone */
    border-top: 20px solid transparent; /* Metade da altura */
    border-bottom: 20px solid transparent; /* Metade da altura */
    transition: all 0.3s ease;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
    padding-left: 5px; /* Ajuste para centralizar o triângulo */
}

/* Círculo ao redor do ícone (Opcional) */
.yt-modal-play-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;  /* Tamanho do círculo */
    height: 80px; /* Tamanho do círculo */
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: -1;
    
    /* Ajuste fino da posição do círculo */
    margin-left: -15px; /* Metade do border-left do triângulo */
    margin-top: -1px; 
}


.yt-modal-wrapper:hover .yt-modal-play-icon::before {
    background: rgba(255, 0, 0, 0.7); /* Muda para vermelho no hover */
    transform: translate(-50%, -50%) scale(1.1);
}

/* --- Estilos do GLightbox --- */
/* Garante que o vídeo ocupe o espaço */
.gslide-video {
    width: 100% !important;
    height: 100% !important;
}

.gvideo-wrapper {
    width: 100%;
    height: 100%;
}

iframe.gvideo-frame {
    width: 100%;
    height: 100%;
    max-width: 100% !important;
    max-height: 100% !important;
}