/* ŁapKurs 6.1.76 — szersze porównanie na laptopie i mobilny slider pakietów. */

.landing-pricing-dots {
    display: none;
}

@media (min-width: 900px) {
    .gp-pricing .gp-plan-compare {
        width: calc(100% + clamp(40px, 6vw, 88px));
        max-width: calc(100vw - 32px);
        margin-left: calc(clamp(40px, 6vw, 88px) / -2);
    }

    .gp-pricing .gp-plan-table {
        min-width: 900px;
    }

    .gp-pricing .gp-plan-table th,
    .gp-pricing .gp-plan-table td {
        padding-right: clamp(15px, 1.7vw, 23px);
        padding-left: clamp(15px, 1.7vw, 23px);
    }
}

@media (max-width: 720px) {
    .landing-pricing[data-pricing-carousel],
    .gp-pricing .landing-pricing[data-pricing-carousel] {
        display: flex !important;
        align-items: stretch !important;
        gap: 14px !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 -16px !important;
        padding: 14px 16px 19px !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .landing-pricing[data-pricing-carousel]::-webkit-scrollbar {
        display: none;
    }

    .landing-pricing[data-pricing-carousel] > .pricing-card,
    .gp-pricing .landing-pricing[data-pricing-carousel] > .pricing-card {
        flex: 0 0 min(86vw, 330px) !important;
        width: min(86vw, 330px) !important;
        max-width: none !important;
        min-height: auto;
        transform: none !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .landing-pricing-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 30px;
        margin: -5px 0 17px;
    }

    .landing-pricing-dots button {
        display: grid;
        width: 10px;
        height: 10px;
        padding: 0;
        place-items: center;
        overflow: hidden;
        border: 0;
        border-radius: 999px;
        background: #7890a7;
        box-shadow: 0 0 0 4px transparent;
        color: transparent;
        cursor: pointer;
        transition: width .18s ease, background .18s ease, box-shadow .18s ease;
    }

    .landing-pricing-dots button.is-active {
        width: 27px;
        background: linear-gradient(90deg, #56d8ff, #53e0ba);
        box-shadow: 0 0 0 4px rgba(86, 216, 255, .10), 0 0 14px rgba(86, 216, 255, .27);
    }

    .landing-pricing-dots button:focus-visible {
        outline: 2px solid #56d8ff;
        outline-offset: 4px;
    }

    .landing-pricing-dots button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-pricing[data-pricing-carousel] {
        scroll-behavior: auto;
    }

    .landing-pricing-dots button {
        transition: none;
    }
}