/* Estilos para slides com YouTube no carrossel */
.carousel-item {
    position: relative;
    overflow: hidden;
    /* Garantir que nada vaze */
}

/* Regra para IMAGENS cobrirem o slide inteiro (fix para mobile) */
#fw_al_003>.carousel-inner>.carousel-item>img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    z-index: 0;
}

.slide-youtube-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.slide-youtube-bg iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(1.5);
    pointer-events: none;
    border: 0;
}

.youtube-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* Wrapper Flexbox para centralização robusta */
.slide-content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    /* Mágica do Flexbox */
    align-items: center;
    /* Centraliza verticalmente */
    justify-content: center;
    /* Centraliza horizontalmente */
    z-index: 2;
    pointer-events: none;
    /* Permite clicar no slide se necessário, mas bloqueia overlay */
}

/* Resetar posicionamento do container de texto dentro do wrapper */
#fw_al_003 .slide-content-wrapper .fw_al_003_slide {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 15px;
    width: 100%;
    pointer-events: auto;
    /* Reabilitar cliques nos botões/texto */
}

/* Ajustes específicos para mobile e tablets */
@media (max-width: 991px) {
    #fw_al_003 .slide-content-wrapper .fw_al_003_slide {
        /* Garante que o reset funcione no mobile também */
        top: auto !important;
        transform: none !important;
    }

    /* Forçar exibição das setas de navegação */
    .ps_control_bsquare .carousel-control {
        display: block !important;
        opacity: 1 !important;
        /* Sempre visível */
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 20px !important;
        border-width: 1px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: rgba(255, 255, 255, 0.2);
    }

    .ps_control_bsquare .carousel-control.left {
        left: 10px !important;
    }

    .ps_control_bsquare .carousel-control.right {
        right: 10px !important;
    }

    /* Ajuste de centralização dos ícones das setas */
    .ps_control_bsquare .carousel-control.left>span:nth-child(1) {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        top: 50% !important;
        position: absolute;
    }

    .ps_control_bsquare .carousel-control.right>span:nth-child(1) {
        right: 50% !important;
        transform: translate(50%, -50%) !important;
        left: auto !important;
        top: 50% !important;
        position: absolute;
    }
}

/* Compensação para header overlay em telas médias (onde não tem margin-top do tema) */
@media (min-width: 481px) and (max-width: 991px) {
    .slide-content-wrapper {
        padding-top: 80px;
        /* Empurra o centro visual para baixo para compensar o menu */
        box-sizing: border-box;
    }
}

/* Alturas responsivas para o slider */
.carousel-item.active,
.carousel-item {
    min-height: 400px;
    /* Mobile first */
}

@media (min-width: 576px) {

    .carousel-item.active,
    .carousel-item {
        min-height: 500px;
    }
}

@media (min-width: 768px) {

    .carousel-item.active,
    .carousel-item {
        min-height: 600px;
    }
}

@media (min-width: 992px) {

    .carousel-item.active,
    .carousel-item {
        min-height: 700px;
    }
}

/* Ajustes específicos para mobile */
@media (max-width: 575px) {
    .slide-youtube-bg iframe {
        transform: translate(-50%, -50%) scale(2.0);
        /* Zoom maior no mobile para preencher */
    }

    .carousel-item .fw_al_003_slide {
        width: 100%;
        padding: 0 15px;
    }
}