/* ============================================
   MEU GLIGHTBOX - CSS COMPLETO
   ============================================ */

/* ===== Container principal do video ===== */
.video-thumb,
a.video-thumb,
a.glightbox.video-thumb {
    position: relative;
    display: inline-block !important;
    overflow: visible;
    border-radius: 8px;
    cursor: pointer;
    line-height: 0;
    max-width: 100%;
    box-sizing: border-box !important;
    box-shadow: none !important;
    border: none !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0;
    vertical-align: middle;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;

    /* Variaveis CSS - podem ser sobrescritas pelo shortcode */
    --play-bg: rgba(30, 144, 255, 0.95);
    --play-arrow: #ffffff;
    --play-pulse: rgba(30, 144, 255, 0.4);
    --play-size: 70px;
    --play-arrow-size: 12px;
    --play-arrow-width: 20px;
    --img-fit: cover;
}

/* Transparencia apenas quando tem imagem (nao no placeholder) */
.video-thumb:not(.video-thumb-sem-imagem) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

.video-thumb:not(.video-thumb-sem-imagem):hover,
.video-thumb:not(.video-thumb-sem-imagem):focus,
.video-thumb:not(.video-thumb-sem-imagem):active {
    background: transparent !important;
    background-color: transparent !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ===== Wrapper da imagem ===== */
.video-thumb .video-thumb-img-wrapper {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    border-radius: inherit;
    position: relative;
    box-sizing: border-box;
}

.video-thumb .video-thumb-img-wrapper img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    object-fit: var(--img-fit);
    transition: transform 0.4s ease, filter 0.3s ease;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    border-radius: inherit;
}

.video-thumb:hover .video-thumb-img-wrapper img {
    transform: scale(1.05);
    filter: brightness(0.85);
}

/* ===== Quando NAO tem imagem - placeholder escuro ===== */
.video-thumb-sem-imagem,
a.video-thumb-sem-imagem {
    width: 200px;
    height: 200px;
    max-width: 100%;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    overflow: hidden;
}

.video-thumb-sem-imagem:hover {
    transform: scale(1.03);
}

/* ===== Icone de play ===== */
.video-thumb .play-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: var(--play-size) !important;
    height: var(--play-size) !important;
    transform: translate(-50%, -50%) !important;
    background: var(--play-bg) !important;
    background-color: var(--play-bg) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.3s ease, filter 0.3s ease;
    z-index: 999 !important;
    pointer-events: none;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.video-thumb-sem-imagem .play-icon {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
}

/* Seta do play */
.video-thumb .play-icon::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 55% !important;
    transform: translate(-50%, -50%) !important;
    border-style: solid !important;
    border-width: var(--play-arrow-size) 0 var(--play-arrow-size) var(--play-arrow-width) !important;
    border-color: transparent transparent transparent var(--play-arrow) !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

.video-thumb:hover .play-icon {
    filter: brightness(1.15);
}

.video-thumb:not(.video-thumb-sem-imagem):hover .play-icon {
    transform: translate(-50%, -50%) scale(1.1) !important;
}

.video-thumb-sem-imagem:hover .play-icon {
    transform: scale(1.1) !important;
}

/* Foco para acessibilidade (teclado) */
.video-thumb:focus-visible {
    outline: 3px solid var(--play-bg) !important;
    outline-offset: 4px;
}

/* ===== Animacao de pulso ===== */
.video-thumb .play-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--play-pulse);
    animation: pulse-play 2s infinite;
    z-index: -1;
}

@keyframes pulse-play {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

/* ============================================
   RESPONSIVO - THUMB
   ============================================ */

/* ===== TABLET ===== */
@media (max-width: 1024px) {
    .video-thumb {
        --play-size: 60px;
        --play-arrow-size: 10px;
        --play-arrow-width: 17px;
    }
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .video-thumb {
        --play-size: 55px;
        --play-arrow-size: 9px;
        --play-arrow-width: 15px;
        border-radius: 6px;
    }

    .video-thumb-sem-imagem {
        width: 100%;
        max-width: 280px;
        height: 160px;
    }

    .video-thumb:hover .video-thumb-img-wrapper img {
        transform: none;
        filter: none;
    }

    .video-thumb:not(.video-thumb-sem-imagem):hover .play-icon {
        transform: translate(-50%, -50%) !important;
        filter: none;
    }

    .video-thumb-sem-imagem:hover .play-icon {
        transform: none !important;
    }

    .video-thumb-sem-imagem:hover {
        transform: none;
    }

    .video-thumb:active .play-icon {
        transform: translate(-50%, -50%) scale(0.92) !important;
    }

    .video-thumb-sem-imagem:active .play-icon {
        transform: scale(0.92) !important;
    }

    .video-thumb:active .video-thumb-img-wrapper img {
        filter: brightness(0.8);
    }
}

/* ===== MOBILE PEQUENO ===== */
@media (max-width: 480px) {
    .video-thumb {
        --play-size: 50px;
        --play-arrow-size: 8px;
        --play-arrow-width: 13px;
    }

    .video-thumb-sem-imagem {
        height: 140px;
    }
}

/* ===== Reduz movimento ===== */
@media (prefers-reduced-motion: reduce) {
    .video-thumb .play-icon::after {
        animation: none;
    }

    .video-thumb .video-thumb-img-wrapper img,
    .video-thumb .play-icon,
    .video-thumb-sem-imagem {
        transition: none;
    }
}

/* ============================================
   GLIGHTBOX - LIGHTBOX
   ============================================ */

@media (max-width: 768px) {
    .gslide-video {
        max-width: 95vw !important;
        max-height: 80vh !important;
    }

    .gslide-video .gvideo-wrapper {
        max-width: 95vw !important;
    }

    .gclose {
        width: 44px !important;
        height: 44px !important;
        top: 10px !important;
        right: 10px !important;
    }

    .gnext, .gprev {
        width: 44px !important;
        height: 44px !important;
    }
}

/* ===== Safe area iOS (notch) ===== */
@supports (padding: env(safe-area-inset-top)) {
    @media (max-width: 768px) {
        .gclose {
            top: calc(10px + env(safe-area-inset-top)) !important;
            right: calc(10px + env(safe-area-inset-right)) !important;
        }
    }
}

/* ============================================
   PLYR - PLAYER CUSTOMIZADO
   ============================================ */

/* Container do video - ocupa toda largura */
.gslide-video .gvideo-wrapper,
.gslide-video .gvideo-container,
.gslide-video .plyr {
    width: 100% !important;
    max-width: 100% !important;
}

/* Controles do player - largura total */
.plyr--video .plyr__controls,
.gslide-video .plyr__controls {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 10px 15px !important;
    border-radius: 0 !important;
    background: linear-gradient(
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.75) 100%
    ) !important;
}

/* Barra de progresso - largura total */
.plyr--video .plyr__progress,
.gslide-video .plyr__progress {
    flex: 1 !important;
    margin-right: 10px !important;
}

.plyr--video .plyr__progress__container {
    flex: 1 !important;
    width: 100% !important;
}

/* Cor dos sliders - combinando com #2D8A96 */
.plyr--video .plyr__progress input[type="range"],
.plyr--video .plyr__volume input[type="range"] {
    color: #2D8A96 !important;
}

.plyr__progress__buffer {
    color: rgba(255, 255, 255, 0.25) !important;
}

/* Botoes do player */
.plyr--video .plyr__control {
    padding: 7px !important;
    color: #fff !important;
}

.plyr--video .plyr__control:hover {
    background: rgba(45, 138, 150, 0.8) !important;
    color: #fff !important;
}

.plyr--video .plyr__control[aria-pressed="true"] {
    background: rgba(45, 138, 150, 0.6) !important;
}

/* Tempo (duracao / atual) */
.plyr__time {
    color: #fff !important;
    font-size: 14px !important;
}

/* Volume slider */
.plyr--video .plyr__volume {
    max-width: 110px !important;
}

/* Botao grande de play no centro do video */
.plyr__control--overlaid {
    background: rgba(45, 138, 150, 0.9) !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

.plyr__control--overlaid:hover {
    background: rgba(45, 138, 150, 1) !important;
}

/* Ajustes mobile do player */
@media (max-width: 768px) {
    .plyr--video .plyr__controls,
    .gslide-video .plyr__controls {
        padding: 8px 10px !important;
    }

    .plyr--video .plyr__control {
        padding: 6px !important;
    }

    .plyr__time {
        font-size: 12px !important;
    }

    /* Esconde volume slider no mobile (mantem so o botao de mute) */
    .plyr--video .plyr__volume input[type="range"] {
        display: none !important;
    }
}

/* Mobile pequeno - menos botoes */
@media (max-width: 480px) {
    .plyr__time--duration {
        display: none !important;
    }
}