.img-carousel-casamento{
    height:600px;
    object-fit:contain;
    border-radius:15px;
}


#carouselFotosCasamento{
    background:rgba(255,255,255,0.15);
    border-radius:15px;
    padding:15px;
}


.carousel-control-prev-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%238b6f47' viewBox='0 0 16 16'%3e%3cpath d='M11.354 4.646a.5.5 0 0 1 0 .708L7.707 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
    width:40px;
    height:40px;
}


.carousel-control-next-icon{
    background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%238b6f47' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L8.293 8 4.646 4.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    width:40px;
    height:40px;
}


.carousel-control-prev,
.carousel-control-next{
    opacity:1;
}


/* CABINE */

#carouselCabine{
    position:relative;
}


#carouselCabine .carousel-item{
    height:600px;
    text-align:center;
}


#carouselCabine .carousel-item img{
    height:600px;
    max-width:100%;
    object-fit:contain;
    border-radius:15px;
}


#carouselCabine .carousel-item img,
#carouselFotosCasamento .carousel-item img{
    display:block;
    margin:auto;
}

#carouselCabine .carousel-control-prev{
    left:-70px;
    opacity:1;
}


#carouselCabine .carousel-control-next{
    right:-70px;
    opacity:1;
}


/* ==========================================================================
   CORREÇÃO DEFINITIVA: SETAS 100% FORA DOS VÍDEOS
   ========================================================================== */

/* 1. Alinha os elementos em linha (Seta - Vídeos - Seta) e centraliza verticalmente */
#carouselVideosCasamento,
#carouselRevoSpin {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 20px !important; /* Espaço de segurança nas bordas da tela */
}

/* 2. Faz a área interna dos vídeos encolher um pouco para dar espaço nas laterais */
#carouselVideosCasamento .carousel-inner,
#carouselRevoSpin .carousel-inner {
    max-width: 90% !important; /* Reduz a largura dos vídeos para as setas caberem fora */
    margin: 0 auto !important;
}

/* 3. Remove os posicionamentos antigos que jogavam as setas para cima dos vídeos */
#carouselVideosCasamento .carousel-control-prev,
#carouselRevoSpin .carousel-control-prev {
    position: absolute !important;
    left: -10px !important; /* Joga a seta completamente para fora da área dos vídeos */
    right: auto !important;
    width: 45px !important;
    height: 45px !important;
    opacity: 1 !important;
}

#carouselVideosCasamento .carousel-control-next,
#carouselRevoSpin .carousel-control-next {
    position: absolute !important;
    right: -10px !important; /* Joga a seta completamente para fora da área dos vídeos */
    left: auto !important;
    width: 45px !important;
    height: 45px !important;
    opacity: 1 !important;
}

/* 4. Garante o tamanho correto e visualização dos ícones das setas */
#carouselVideosCasamento .carousel-control-prev-icon,
#carouselVideosCasamento .carousel-control-next-icon,
#carouselRevoSpin .carousel-control-prev-icon,
#carouselRevoSpin .carousel-control-next-icon {
    width: 40px !important;
    height: 40px !important;
}

/* Ajuste fino para Telemóveis (Mobile) para não esmagar os vídeos */
@media (max-width: 767px) {
    #carouselVideosCasamento .carousel-inner,
    #carouselRevoSpin .carousel-inner {
        max-width: 85% !important;
    }
    #carouselVideosCasamento .carousel-control-prev,
    #carouselRevoSpin .carousel-control-prev { left: -5px !important; }
    #carouselVideosCasamento .carousel-control-next,
    #carouselRevoSpin .carousel-control-next { right: -5px !important; }
}

/* ==========================================================================
   2. CORREÇÃO DO FUNDO DA MODAL (CINZA CLARO)
   ========================================================================== */

#videoModal .modal-content {
    /* Altera o fundo de preto transparente para um cinza bem clarinho */
    background: #f4f4f6 !important; 
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: none;
}

/* ==========================================================================
   FUNDO DA MODAL (CASO AINDA ESTEJA PRETO NO SEU NAVEGADOR)
   ========================================================================== */
#videoModal .modal-body {
    background-color: #f4f4f6 !important;
}

/* Altera o botão de fechar (X) para a versão escura, já que o fundo agora é claro */
#videoModal .btn-close-white {
    filter: invert(1) grayscale(1) brightness(0); /* Força o botão 'X' a ficar preto */
}

/* Garante que o cabeçalho da modal não tenha bordas feias */
#videoModal .modal-header {
    border-bottom: none;
    padding: 15px 15px 5px 15px;
}

/* Estilização extra para o vídeo dentro da modal se adaptar ao fundo claro */
#modalVideoPlayer {
    width: 100%; 
    max-height: 80vh;
    border-radius: 0 0 15px 15px;
    background-color: #f4f4f6 !important; /* Altera o fundo interno do player expandido também */
}

/* Container onde fica o preview do vídeo no carrossel */
.video-preview-container {
    width: 100%;
    height: 250px; 
    background-color: #f4f4f6 !important; /* Força o cinza claro se o vídeo demorar */
    border: 1px solid #e1e1e1;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Garante que a tag de vídeo interna também não force um fundo preto */
.video-preview-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #f4f4f6 !important; /* Remove o fundo preto nativo do player */
    pointer-events: none;
}

/* Efeito ao passar o mouse */
.thumbnail-video-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.thumbnail-video-card:hover {
    transform: scale(1.03);
}

/* Ícone de Play flutuando no meio */
.play-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.thumbnail-video-card:hover .play-overlay {
    background: rgba(0,0,0,0.4);
}

.play-overlay i {
    font-size: 3rem;
    color: #fff;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.thumbnail-video-card:hover .play-overlay i {
    transform: scale(1.1);
    opacity: 1;
}

/* Ajustes finos nas setas do seu carrossel */
#carouselVideosCasamento .carousel-control-prev { left: -15px; }
#carouselVideosCasamento .carousel-control-next { right: -15px; }

/* ==========================================================================
   Classe customizada para forçar o menu "Vídeos da Cerimônia" ativo
   ========================================================================== */

/* Quando a classe é aplicada no body da página */
body.videos-casamento .navbar-nav .nav-item a[href*="videos"],
body.videos-casamento .navbar-nav .nav-item a[href*="cerimonia"] {
    color: #fff !important; /* Cor branca para o cabeçalho no topo */
}

/* Quando o menu se torna fixo (Sticky) com fundo branco */
body.videos-casamento .header.sticky .navbar-nav .nav-item a[href*="videos"],
body.videos-casamento .header.sticky .navbar-nav .nav-item a[href*="cerimonia"] {
    color: #BAAA9E !important; /* Cor marrom padrão do site */
}

/* Compatibilidade com dispositivos móveis (Mobile) */
@media only screen and (max-width: 991px) {
    body.videos-casamento .header .navbar .navbar-nav .nav-item a[href*="videos"],
    body.videos-casamento .header .navbar .navbar-nav .nav-item a[href*="cerimonia"] {
        color: #BAAA9E !important;
    }
}


/* ==========================================================================
   NOVA SECÇÃO: REVO SPIN (VÍDEOS DA CERIMÓNIA)
   ========================================================================== */

#revospin {
    position: relative;
}

/* 1. CORREÇÃO DAS SETAS DO CARROSSEL (FORA DA ÁREA DOS VÍDEOS) */
#carouselRevoSpin {
    position: relative;
    /* Cria um espaço seguro de 65px nas pontas para as setas não cobrirem os vídeos */
    padding: 0 65px; 
}

/* Reposiciona as setas bem nas extremidades criadas pelo padding lateral */
#carouselRevoSpin .carousel-control-prev { 
    left: 10px !important; 
    opacity: 1;
}

#carouselRevoSpin .carousel-control-next { 
    right: 10px !important; 
    opacity: 1;
}

/* Garante que os ícones das setas usam a cor marrom elegante padrão (#8b6f47) */
#carouselRevoSpin .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%238b6f47' viewBox='0 0 16 16'%3e%3cpath d='M11.354 4.646a.5.5 0 0 1 0 .708L7.707 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
    width: 40px;
    height: 40px;
}

#carouselRevoSpin .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%238b6f47' viewBox='0 0 16 16'%3e%3cpath d='M4.646 4.646a.5.5 0 0 1 .708 0l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L8.293 8 4.646 4.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    width: 40px;
    height: 40px;
}

/* 2. ESTILIZAÇÃO DOS CARDS DE PREVIEW DOS VÍDEOS REVO SPIN */
.video-preview-container {
    width: 100%;
    height: 250px; 
    background-color: #f4f4f6 !important; /* Fundo cinza claro padrão */
    border: 1px solid #e1e1e1;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Garante que a tag de vídeo nativa não mostre barras pretas horizontais/verticais */
.video-preview-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #f4f4f6 !important;
    pointer-events: none; /* Evita que o clique nativo do vídeo bloqueie a modal */
}

/* Efeito suave de Zoom ao passar o rato (Hover) no Card */
.thumbnail-video-card {
    cursor: pointer;
    transition: transform 0.3s ease;
}

.thumbnail-video-card:hover {
    transform: scale(1.03);
}

/* Camada escura por cima do preview do vídeo */
.play-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.thumbnail-video-card:hover .play-overlay {
    background: rgba(0, 0, 0, 0.4);
}

/* Ícone de Play branco no centro do card */
.play-overlay i {
    font-size: 3rem;
    color: #fff;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.thumbnail-video-card:hover .play-overlay i {
    transform: scale(1.1);
    opacity: 1;
}

/* ==========================================================================
   CORREÇÃO DO MENU ATIVO VIA SCROLL (STICKY & TOPO)
   ========================================================================== */

/* 1. Quando a barra de navegação está no TOPO (Transparente) */
.header .navbar .navbar-nav .nav-item a.active {
    color: #BAAA9E !important; /* Ou use #fff se preferir que os itens ativos no topo fiquem brancos */
    font-weight: 600;
}

/* 2. Quando você rola a página para baixo e a barra fica branca (.sticky) */
.header.sticky .navbar-nav .nav-item a.active {
    color: #BAAA9E !important; /* Cor marrom claro para o item que estiver visível na tela */
    font-weight: 600;
}

/* 3. Garante que ao passar o mouse (hover) também use o marrom nos dois estados */
.navbar-nav .nav-item a:hover,
.header.sticky .navbar-nav .nav-item a:hover {
    color: #BAAA9E !important;
}



/* ==========================================================================
   CORREÇÃO DE ISOLAMENTO DAS SEÇÕES (VÍDEOS VS REVO SPIN)
   ========================================================================== */

/* 1. Garante que a seção de Vídeos da Cerimônia tenha altura para preencher a tela */
#videos_casamento {
    min-height: 85vh !important; /* Faz a seção ocupar quase a tela cheia */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o carrossel verticalmente na tela */
    padding-bottom: 100px !important;
}

/* 2. Isola a seção do RevoSpin para ela só aparecer quando rolada propositalmente */
#revospin {
    /* Cria um recuo interno no topo para compensar a barra do menu fixo (navbar) */
    scroll-margin-top: 30px; 
    
    /* Um espaçamento generoso acima do título para empurrá-la para baixo */
    padding-top: 120px !important; 
    
    /* Mantém a Solução 1 ativa para o menu funcionar no final */
    padding-bottom: 250px !important; 
    
    /* Linha divisória elegante e sutil entre as seções */
    border-top: 1px solid rgba(139, 111, 71, 0.12);
}

/* Ajustes finos para celulares não ficarem com espaços gigantes */
@media (max-width: 991px) {
    #videos_casamento {
        min-height: auto !important;
        padding-bottom: 60px !important;
    }
    #revospin {
        scroll-margin-top: 70px;
        padding-top: 80px !important;
        padding-bottom: 180px !important;
    }
}