/* ==========================================================================
   WP Rotating Banner — Frontend Styles v1.3.5
   Autor: Anderson Barbosa | https://abdesignerpro.com.br
   ========================================================================== */

/* ==========================================================================
   1. CONTAINER PRINCIPAL
   ========================================================================== */

.wrb-banner-container {
    --wrb-arrow-color: #ffffff;
    --wrb-arrow-bg: #000000;
    --wrb-dot-color: #ffffff;
    --wrb-dot-active: #ffffff;

    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.wrb-swiper {
    width: 100% !important;
    overflow: hidden !important;
    height: 600px !important;
}


/* Vertical: precisa de altura fixa para Swiper funcionar */
.wrb-banner-container.wrb-vertical .wrb-swiper {
    height: 600px !important;
}

/* ==========================================================================
   2. SLIDES
   ========================================================================== */

.wrb-slide {
    position: relative !important;
    width: 100% !important;
    height: 600px !important;
    overflow: hidden !important;
    background: #111 !important;
}

.wrb-slide-video {
    background: #111 !important;
}

.wrb-slide-link {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    line-height: 0 !important;
}

.wrb-slide-img {
    width: 100% !important;
    height: 600px !important;
    display: block !important;
    object-fit: cover !important;
}

/* ==========================================================================
   3. VÍDEO
   ========================================================================== */

.wrb-video-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 600px !important;
    overflow: hidden !important;
}

.wrb-video-poster {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 0 !important;
}

.wrb-poster-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    transition: opacity .4s ease;
}

.wrb-video-wrapper.wrb-video-playing .wrb-video-poster {
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
}

.wrb-video-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.wrb-video-wrapper.wrb-video-playing .wrb-video-container {
    pointer-events: auto !important;
}

.wrb-video-container iframe,
.wrb-video-container video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: 0 !important;
}

/* Botão Play — isolado contra conflitos com Elementor/temas */
.wrb-banner-container .wrb-play-btn,
.wrb-banner-container .wrb-play-btn:hover,
.wrb-banner-container .wrb-play-btn:focus,
.wrb-banner-container .wrb-play-btn:active,
.wrb-banner-container .wrb-play-btn:visited {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: .85 !important;
    transition: opacity .25s ease, transform .25s ease;
    line-height: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.wrb-banner-container .wrb-play-btn:hover {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1.08) !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.wrb-banner-container .wrb-play-btn svg {
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)) !important;
    display: block !important;
}

.wrb-video-wrapper.wrb-video-playing .wrb-play-btn {
    display: none !important;
}

.wrb-video-wrapper.wrb-video-playing .wrb-slide-link-btn {
    z-index: 10 !important;
}

/* Botão de link externo para slides de vídeo */
.wrb-banner-container .wrb-slide-link-btn,
.wrb-banner-container .wrb-slide-link-btn:hover,
.wrb-banner-container .wrb-slide-link-btn:focus,
.wrb-banner-container .wrb-slide-link-btn:active,
.wrb-banner-container .wrb-slide-link-btn:visited {
    position: absolute !important;
    bottom: 16px !important;
    right: 16px !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: rgba(0,0,0,.55) !important;
    background-color: rgba(0,0,0,.55) !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.25) !important;
    outline: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    color: #fff !important;
    transition: background .25s ease, transform .25s ease;
    line-height: 0 !important;
}

.wrb-banner-container .wrb-slide-link-btn:hover {
    background: rgba(0,0,0,.8) !important;
    background-color: rgba(0,0,0,.8) !important;
    transform: scale(1.08) !important;
}

.wrb-banner-container .wrb-slide-link-btn svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)) !important;
}

/* ==========================================================================
   4. NAVEGAÇÃO (Setas) — cores via CSS vars
   ========================================================================== */

.wrb-banner-container .swiper-button-prev,
.wrb-banner-container .swiper-button-next {
    width: 44px !important;
    height: 44px !important;
    background: var(--wrb-arrow-bg) !important;
    background: color-mix(in srgb, var(--wrb-arrow-bg) 55%, transparent) !important;
    border-radius: 50% !important;
    color: var(--wrb-arrow-color) !important;
    transition: background .25s ease, transform .25s ease;
}

.wrb-banner-container .swiper-button-prev:hover,
.wrb-banner-container .swiper-button-next:hover {
    background: color-mix(in srgb, var(--wrb-arrow-bg) 80%, transparent) !important;
    transform: scale(1.05) !important;
}

.wrb-banner-container .swiper-button-prev::after,
.wrb-banner-container .swiper-button-next::after {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--wrb-arrow-color) !important;
}

.wrb-banner-container .swiper-button-prev {
    left: 16px !important;
}

.wrb-banner-container .swiper-button-next {
    right: 16px !important;
}

/* Setas fora do banner */
.wrb-banner-container.wrb-arrows-outside {
    padding: 0 56px !important;
}

.wrb-arrows-outside > .swiper-button-prev,
.wrb-arrows-outside > .swiper-button-next {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    margin-top: 0 !important;
}

.wrb-arrows-outside > .swiper-button-prev {
    left: 6px !important;
}

.wrb-arrows-outside > .swiper-button-next {
    right: 6px !important;
}

.wrb-arrows-outside > .swiper-button-prev:hover,
.wrb-arrows-outside > .swiper-button-next:hover {
    transform: translateY(-50%) scale(1.05) !important;
}

/* ==========================================================================
   5. PAGINAÇÃO (Dots) — cores via CSS vars
   ========================================================================== */

.wrb-banner-container .swiper-pagination {
    bottom: 16px !important;
}

.wrb-banner-container .swiper-pagination-bullet {
    width: 10px !important;
    height: 10px !important;
    background: var(--wrb-dot-color) !important;
    background: color-mix(in srgb, var(--wrb-dot-color) 50%, transparent) !important;
    opacity: 1 !important;
    transition: background .25s ease, transform .25s ease, width .25s ease;
    border-radius: 10px !important;
}

.wrb-banner-container .swiper-pagination-bullet-active {
    background: var(--wrb-dot-active) !important;
    width: 28px !important;
    border-radius: 10px !important;
}

/* Dots fora (abaixo) do banner — elemento fora do .wrb-swiper */
.wrb-banner-container.wrb-dots-outside > .swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: 12px !important;
    padding: 8px 0 !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

.wrb-dots-outside > .swiper-pagination .swiper-pagination-bullet {
    background: color-mix(in srgb, var(--wrb-dot-color) 40%, #999) !important;
}

.wrb-dots-outside > .swiper-pagination .swiper-pagination-bullet-active {
    background: var(--wrb-dot-active) !important;
}

/* ==========================================================================
   6. EFEITOS CUSTOMIZADOS (zoom-in / zoom-out)
   ========================================================================== */

.wrb-swiper[data-wrb-animation="zoom-in"] .swiper-slide-active .wrb-slide-img {
    animation: wrb-zoom-in 6s ease-out forwards;
}

.wrb-swiper[data-wrb-animation="zoom-out"] .swiper-slide-active .wrb-slide-img {
    animation: wrb-zoom-out 6s ease-out forwards;
}

@keyframes wrb-zoom-in {
    from { transform: scale(1); }
    to { transform: scale(1.08); }
}

@keyframes wrb-zoom-out {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

/* ==========================================================================
   7. RESPONSIVO
   ========================================================================== */

@media (max-width: 767px) {
    .wrb-swiper {
        height: auto !important;
    }

    .wrb-banner-container.wrb-vertical .wrb-swiper {
        height: auto !important;
    }

    .wrb-slide {
        height: auto !important;
        background: transparent !important;
    }

    .wrb-slide-img {
        width: 100% !important;
        height: auto !important;
        object-fit: unset !important;
    }

    .wrb-poster-img {
        width: 100% !important;
        height: auto !important;
        object-fit: unset !important;
    }

    .wrb-video-wrapper {
        height: auto !important;
    }

    .wrb-video-wrapper.wrb-video-playing .wrb-video-poster {
        position: relative !important;
        visibility: hidden !important;
    }

    .wrb-banner-container .swiper-button-prev,
    .wrb-banner-container .swiper-button-next {
        width: 34px !important;
        height: 34px !important;
    }

    .wrb-banner-container .swiper-button-prev::after,
    .wrb-banner-container .swiper-button-next::after {
        font-size: 14px !important;
    }

    .wrb-banner-container .swiper-button-prev {
        left: 10px !important;
    }

    .wrb-banner-container .swiper-button-next {
        right: 10px !important;
    }

    .wrb-banner-container.wrb-arrows-outside {
        padding: 0 42px !important;
    }

    .wrb-arrows-outside > .swiper-button-prev {
        left: 4px !important;
    }

    .wrb-arrows-outside > .swiper-button-next {
        right: 4px !important;
    }

    .wrb-banner-container .swiper-pagination {
        bottom: 10px !important;
    }

    .wrb-banner-container .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
    }

    .wrb-banner-container .swiper-pagination-bullet-active {
        width: 22px !important;
    }

    .wrb-banner-container .wrb-play-btn svg {
        width: 48px !important;
        height: 34px !important;
    }

    .wrb-banner-container .wrb-slide-link-btn,
    .wrb-banner-container .wrb-slide-link-btn:hover,
    .wrb-banner-container .wrb-slide-link-btn:focus,
    .wrb-banner-container .wrb-slide-link-btn:active,
    .wrb-banner-container .wrb-slide-link-btn:visited {
        width: 36px !important;
        height: 36px !important;
        bottom: 12px !important;
        right: 12px !important;
    }

    .wrb-banner-container .wrb-slide-link-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* ==========================================================================
   8. ACESSIBILIDADE
   ========================================================================== */

.wrb-banner-container:focus-within .swiper-button-prev,
.wrb-banner-container:focus-within .swiper-button-next {
    outline: 2px solid rgba(255,255,255,.8) !important;
    outline-offset: 2px !important;
}

.wrb-swiper .swiper-slide:focus-visible {
    outline: 3px solid rgba(255,255,255,.8) !important;
    outline-offset: -3px !important;
}

/* ==========================================================================
   9. PRINT
   ========================================================================== */

@media print {
    .wrb-banner-container .swiper-button-prev,
    .wrb-banner-container .swiper-button-next,
    .wrb-banner-container .swiper-pagination,
    .wrb-play-btn,
    .wrb-slide-link-btn {
        display: none !important;
    }
}