/* Correções para os carrosséis */

/* Resetar posições anteriores e garantir que o container seja relativo */
.carrossel-container {
    position: relative !important;
}

/* Garantir que o carrossel principal seja relativo para posicionamento absoluto das setas */
.carrossel-principal {
    position: relative !important;
}

/* Posicionamento perfeito dos botões */
.carrossel-prev, .carrossel-next {
    /* Centralização vertical perfeita */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important; /* Remover qualquer margem que possa afetar */
    height: 40px !important;
    
    /* Estilo visual melhorado */
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: white !important;
    width: 40px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    border: none !important;
    outline: none !important;
    font-size: 18px !important;
    opacity: 0.9 !important;
    z-index: 1000 !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.2) !important;
}

.carrossel-prev {
    left: 15px !important;
}

.carrossel-next {
    right: 15px !important;
}

/* Ajuste para dispositivos móveis */
@media (max-width: 768px) {
    .carrossel-prev, .carrossel-next {
        top: 150px !important; /* Metade da altura da imagem em mobile (300px/2) */
        width: 30px !important;
        height: 30px !important;
        font-size: 14px !important;
    }
}

/* Garantir que as miniaturas fiquem em uma única linha */
.carrossel-miniaturas {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 10px; /* Espaço para a barra de rolagem */
    scrollbar-width: thin;
    -ms-overflow-style: none; /* Para IE e Edge */
}

/* Esconder a barra de rolagem para Chrome, Safari e Opera */
.carrossel-miniaturas::-webkit-scrollbar {
    height: 4px;
}

.carrossel-miniaturas::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
}

/* Ajustes para dispositivos móveis */
@media (max-width: 768px) {
    .miniatura {
        min-width: 70px !important; /* Garante tamanho mínimo em mobile */
    }
    
    /* Ajuste das setas em mobile */
    .carrossel-prev, .carrossel-next {
        width: 30px !important;
        height: 30px !important;
        font-size: 16px !important;
    }
}