/*
 * ABG Planos Carousel v1.0.3
 * Adicione a classe "abg-planos-carousel" na seção/container do Elementor
 * que contém diretamente os cards dos planos.
 */

.abg-planos-carousel {
    position: relative;
    overflow: visible !important;
    --abg-carousel-arrow-size: 46px;
    --abg-carousel-arrow-outside: 64px;
    --abg-carousel-bottom-space: 34px;
}

/* O recorte acontece só nos cards. Assim as setas podem ficar para fora. */
.abg-planos-carousel .abg-carousel-viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: var(--abg-carousel-bottom-space);
}

.abg-planos-carousel .abg-carousel-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: none !important;
    transition: transform .45s ease;
    will-change: transform;
}

.abg-planos-carousel .abg-carousel-slide {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important;
}

.abg-planos-carousel .abg-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    width: var(--abg-carousel-arrow-size);
    height: var(--abg-carousel-arrow-size);
    padding: 0;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: rgba(21, 24, 164, .96);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}

.abg-planos-carousel .abg-carousel-arrow:hover {
    background: #0d0f78;
}

.abg-planos-carousel .abg-carousel-arrow:focus-visible {
    outline: 3px solid #ff9d00;
    outline-offset: 3px;
}

.abg-planos-carousel .abg-carousel-arrow[disabled] {
    opacity: .32;
    cursor: default;
}

/* Agora as setas ficam realmente FORA da área dos cards. */
.abg-planos-carousel .abg-carousel-prev {
    left: calc(var(--abg-carousel-arrow-outside) * -1);
}

.abg-planos-carousel .abg-carousel-next {
    right: calc(var(--abg-carousel-arrow-outside) * -1);
}

.abg-planos-carousel .abg-carousel-dots {
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    z-index: 31;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.abg-planos-carousel .abg-carousel-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(21, 24, 164, .30);
    cursor: pointer;
}

.abg-planos-carousel .abg-carousel-dot.is-active {
    background: #1518a4;
}

@media (max-width: 1024px) {
    .abg-planos-carousel {
        --abg-carousel-arrow-outside: 42px;
    }

    .abg-planos-carousel .abg-carousel-slide {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }
}

@media (max-width: 767px) {
    .abg-planos-carousel {
        --abg-carousel-arrow-size: 40px;
        --abg-carousel-arrow-outside: 10px;
        --abg-carousel-bottom-space: 30px;
    }

    .abg-planos-carousel .abg-carousel-slide {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}