/* Estilos para o carrossel */
.pxg-carousel-container {
    position: relative;
    overflow: hidden; /* Garante que os itens fora da vista fiquem escondidos */
    margin: 20px 0;
    padding: 0 50px; /* Adiciona padding para as setas não ficarem em cima dos itens */
    box-sizing: border-box; /* Garante que padding não aumente a largura total */
}
.pxg-carousel-track {
    display: flex;
    gap: 20px; /* Espaçamento entre os itens */
    transition: transform 0.5s ease;
    width: 100%; /* O track ocupa 100% da largura visível do container */
}
.pxg-carousel-item {
    /* flex-basis: calcula a largura de cada item para que 'itemsVisible' caibam na tela,
       considerando o gap entre eles.
       --pxg-carousel-items-visible é definido pelo JS.
       O 20px é o valor do gap.
       Ex: para 3 itens, (100% / 3) - (20px * (3-1) / 3) = 33.333% - 13.333px
    */
    flex: 0 0 calc(100% / var(--pxg-carousel-items-visible, 3) - var(--pxg-carousel-gap-calc, 13.333px));
    min-width: 250px; /* Garante um tamanho mínimo para o item */
    box-sizing: border-box; /* Garante que padding/border não aumente a largura do item */
}

/* Estilos para as setas de navegação */
.pxg-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--pxg-accent-color, #2f69ff);
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    z-index: 10;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.pxg-carousel-arrow:hover { background: #1e4ba6; transform: translateY(-50%) scale(1.1); }
.pxg-carousel-arrow:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
    transform: translateY(-50%) scale(1);
}
.pxg-carousel-prev { left: 0px; } /* Ajustado para ficar na borda do padding */
.pxg-carousel-next { right: 0px; } /* Ajustado para ficar na borda do padding */

/* Media Queries para responsividade do carrossel */
@media(max-width: 1024px) {
    .pxg-carousel-item {
        /* 2 itens em tablet com gap de 20px */
        flex: 0 0 calc(100% / 2 - 20px / 2); /* (100% / 2) - (20px * (2-1) / 2) = 50% - 10px */
    }
    .pxg-carousel-container { padding: 0 30px; }
    .pxg-carousel-prev { left: 0px; }
    .pxg-carousel-next { right: 0px; }
}
@media(max-width: 768px) {
    .pxg-carousel-item {
        flex: 0 0 100%; /* 1 item em mobile */
    }
    .pxg-carousel-arrow { width: 35px; height: 35px; font-size: 16px; }
    .pxg-carousel-container { padding: 0 20px; }
    .pxg-carousel-prev { left: 0px; }
    .pxg-carousel-next { right: 0px; }
}