/* 
 * Carousel Pro v5.0 - CSS
 * Baseado exatamente no código funcional fornecido
 */

/* Imagem do ícone */
.slider__img {
    max-width: 60px !important;
    height: 60px !important;
    flex-shrink: 0; /* evita que distorça */
}

/* Container geral do slick */
.container-slider {
    padding: 15px; /* Adicionado padding para espaçamento */
    max-width: 1400px; /* Aumentado para acomodar textos longos */
    margin: 0 auto; /* Centralizar o container */
    overflow: hidden; /* Evita overflow lateral */
}

/* Garantir largura adequada para 3 slides no desktop */
@media (min-width: 769px) {
    .container-slider .slick-slide {
        max-width: calc(100% / 3 - 20px) !important; /* Mais espaço entre elementos */
        width: calc(100% / 3 - 20px) !important;
        margin: 0 10px !important; /* Espaçamento lateral aumentado */
    }
    
    .container-slider .slick-track {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }
}

/* Garantir largura adequada para 2 slides no tablet */
@media (max-width: 1024px) and (min-width: 769px) {
    .container-slider .slick-slide {
        max-width: calc(100% / 2) !important; /* 2 slides no tablet */
        width: calc(100% / 2) !important;
    }
}

/* Garantir largura completa no mobile */
@media (max-width: 768px) {
    .container-slider .slick-slide {
        max-width: 100% !important; /* 1 slide completo no mobile */
        width: 100% !important;
    }
    
    .container-slider {
        padding: 5px; /* Reduzir padding no mobile */
    }
    
    .slider__item {
        justify-content: center !important; /* Centralizar conteúdo no mobile */
    }
}

/* Cada slide */
.slider__item {
    display: flex;
    align-items: center;
    gap: 15px; /* Gap aumentado para melhor separação */
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 15px; /* Padding aumentado para melhor espaçamento interno */
    width: 100% !important;
    max-width: 100% !important;
    min-height: 90px; /* Altura mínima aumentada */
    background: rgba(255, 255, 255, 0.8); /* Fundo sutil para separação visual */
    border-radius: 8px; /* Bordas arredondadas para melhor visual */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra sutil */
}

/* Título */
.slider__title {
    font-family: 'Montserrat';
    font-weight: 600;
    text-transform: capitalize;
    font-size: 0.875em;
    color: #242424;
    margin: 0;
    line-height: 1.3; /* Melhor altura de linha */
    word-wrap: break-word; /* Permite quebra de palavra se necessário */
    max-width: 100%; /* Garante que use toda largura disponível */
}

/* Container de descrição */
.slider-item__description {
    flex: 1; /* Ocupa todo espaço disponível */
    min-width: 0; /* Permite flex shrink */
    overflow: hidden; /* Evita overflow do container */
}

/* Texto secundário */
.slider-item__description p {
    font-family: 'Montserrat';
    font-size: 1em;
    color: rgb(118,118,118) !important;
    margin: 0;
    line-height: 1.3; /* Melhor altura de linha */
    word-wrap: break-word; /* Permite quebra de palavra se necessário */
    max-width: 100%; /* Garante que use toda largura disponível */
}

/* Ajustes obrigatórios do Slick - ESPECÍFICOS PARA O CAROUSEL PRO */
/* Usando seletores específicos para evitar conflitos com outros sliders */
.container .container-slider .slick-track {
    display: flex !important;
    height: 12vh !important; /* Altura específica apenas para o Carousel Pro */
    max-height: 12vh !important;
}

.container .container-slider .slick-slide {
    height: auto !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
}

/* Estilo opcional das setas - ESPECÍFICAS PARA O CAROUSEL PRO */
.container .container-slider .slick-prev,
.container .container-slider .slick-next {
    z-index: 10;
    background: #fff;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.container .container-slider .slick-prev:before,
.container .container-slider .slick-next:before {
    color: #242424;
    font-size: 20px;
}