/* =============================================
   CORREÇÃO PARA ALINHAMENTO DO SLICK SLIDER
   ============================================= */

/* Forçar alinhamento horizontal para o slider de logos */
.brand-logo-area .element-carousel .slick-track {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.brand-logo-area .element-carousel .slick-slide {
    float: none !important;
    display: block !important;
    height: auto !important;
    min-height: 1px !important;
}

/* Garantir que os slides tenham largura adequada */
.brand-logo-area .element-carousel .slick-slide .item {
    width: 100% !important;
    display: block !important;
}

/* Corrigir o container do slider */
.brand-logo-area .element-carousel {
    overflow: hidden !important;
}

.brand-logo-area .element-carousel .slick-list {
    overflow: visible !important;
}

/* Ajustar espaçamento entre os logos */
.brand-logo-area .element-carousel .slick-slide {
    padding: 0 10px !important;
}

/* Garantir que as imagens dos logos sejam responsivas */
.brand-logo-area .element-carousel .slick-slide figure img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Correção específica para o problema de alinhamento vertical */
.brand-logo-area .element-carousel.slick-initialized .slick-track {
    transform: none !important;
    width: 100% !important;
}

.brand-logo-area .element-carousel.slick-initialized .slick-slide {
    width: calc(20% - 20px) !important; /* 5 logos por linha */
    margin: 0 10px !important;
}

/* Responsividade */
@media (max-width: 1200px) {
    .brand-logo-area .element-carousel.slick-initialized .slick-slide {
        width: calc(25% - 20px) !important; /* 4 logos por linha */
    }
}

@media (max-width: 992px) {
    .brand-logo-area .element-carousel.slick-initialized .slick-slide {
        width: calc(33.333% - 20px) !important; /* 3 logos por linha */
    }
}

@media (max-width: 768px) {
    .brand-logo-area .element-carousel.slick-initialized .slick-slide {
        width: calc(50% - 20px) !important; /* 2 logos por linha */
    }
}

@media (max-width: 480px) {
    .brand-logo-area .element-carousel.slick-initialized .slick-slide {
        width: calc(100% - 20px) !important; /* 1 logo por linha */
    }
}

/* Debug visual - remover em produção */
.brand-logo-area .element-carousel .slick-slide {
    border: 1px solid transparent;
}

.brand-logo-area .element-carousel .slick-slide:hover {
    border-color: #ddd;
}

/* Garantir que o slider seja inicializado corretamente */
.brand-logo-area .element-carousel:not(.slick-initialized) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.brand-logo-area .element-carousel:not(.slick-initialized) .item {
    flex: 0 0 auto;
    margin: 0 10px;
    max-width: 200px;
}