/*
 | Mobile price card swipe row (assets/js/tbtk-mobile-price-swipe.js).
 |
 | The script adds .tbtk-mps-row / .tbtk-mps-slide only below 768px, so none
 | of this reaches tablet or desktop. Page sheets lay these rows out as grids
 | with high-specificity selectors (e.g. the logo design track and the
 | #bundle-products grid on /package), hence the two :not(#id) clauses that
 | lift these rules above an id selector, and !important on layout properties.
 */
@media (max-width: 767.98px) {
    html body .tbtk-mps-row:not(#tbtk-mps-a):not(#tbtk-mps-b) {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        box-sizing: border-box !important;
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding: 6px 13vw 14px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-padding-inline: 13vw;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none !important;
        transform: none !important;
    }

    html body .tbtk-mps-row:not(#tbtk-mps-a):not(#tbtk-mps-b)::-webkit-scrollbar {
        display: none;
    }

    html body .tbtk-mps-row:not(#tbtk-mps-a):not(#tbtk-mps-b) > .tbtk-mps-slide {
        flex: 0 0 74vw !important;
        width: 74vw !important;
        max-width: 74vw !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    html body .tbtk-mps-row:not(#tbtk-mps-a):not(#tbtk-mps-b) > .tbtk-mps-slide > * {
        height: 100%;
    }

    /* Zero-height bar right under the row. The script keeps
       --tbtk-mps-row-h (row height) and --tbtk-mps-arrow-y (how far down the
       row the arrows sit: a third of the way down the screen, held inside the cards) up to
       date on scroll, so the arrows travel with the page. */
    .tbtk-mps-nav {
        position: relative;
        height: 0;
        z-index: 5;
    }

    .tbtk-mps-nav[hidden] {
        display: none;
    }

    .tbtk-mps-arrow {
        position: absolute;
        top: calc(var(--tbtk-mps-arrow-y, 200px) - var(--tbtk-mps-row-h, 400px));
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        padding: 0;
        border: 2px solid rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        background: #00a2ff;
        color: #fff;
        box-shadow: 0 6px 16px rgba(0, 60, 140, 0.35);
        cursor: pointer;
        transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.2s ease;
    }

    .tbtk-mps-nav.is-offscreen .tbtk-mps-arrow {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* Sideways offsets come from the script: just inside whatever clips
       the row, in the gap beside the card. */
    .tbtk-mps-arrow-prev {
        left: var(--tbtk-mps-arrow-left, 0);
    }

    .tbtk-mps-arrow-next {
        right: var(--tbtk-mps-arrow-right, 0);
    }

    .tbtk-mps-arrow:active {
        transform: scale(0.92);
    }

    .tbtk-mps-arrow:disabled {
        opacity: 0.35;
        cursor: default;
    }

    .tbtk-mps-nav.is-nudging .tbtk-mps-arrow-prev:not(:disabled) {
        animation: tbtk-mps-nudge-left 0.7s ease-in-out;
    }

    .tbtk-mps-nav.is-nudging .tbtk-mps-arrow-next:not(:disabled) {
        animation: tbtk-mps-nudge-right 0.7s ease-in-out;
    }

    @keyframes tbtk-mps-nudge-left {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-5px); }
        40% { transform: translateX(3px); }
        60% { transform: translateX(-3px); }
        80% { transform: translateX(1px); }
    }

    @keyframes tbtk-mps-nudge-right {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(5px); }
        40% { transform: translateX(-3px); }
        60% { transform: translateX(3px); }
        80% { transform: translateX(-1px); }
    }

    /* One-time intro: every card slides a little toward the next package
       and springs straight back to the first. */
    html body .tbtk-mps-row.is-peeking:not(#tbtk-mps-a):not(#tbtk-mps-b) > .tbtk-mps-slide {
        animation: tbtk-mps-peek 1.1s cubic-bezier(.33, 0, .25, 1) both;
    }

    @keyframes tbtk-mps-peek {
        0% { transform: translateX(0); }
        40% { transform: translateX(-30vw); }
        62% { transform: translateX(0); }
        78% { transform: translateX(-3vw); }
        100% { transform: translateX(0); }
    }

    .tbtk-mps-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        margin: 2px 0 8px;
        color: inherit;
    }

    .tbtk-mps-dots[hidden] {
        display: none;
    }

    .tbtk-mps-dot {
        width: 8px;
        height: 8px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(128, 128, 128, 0.5);
        cursor: pointer;
        transition: width 0.25s ease, opacity 0.25s ease, background-color 0.25s ease;
    }

    .tbtk-mps-dot.is-active {
        width: 22px;
        opacity: 1;
        background: #00a2ff;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .tbtk-mps-dot,
    .tbtk-mps-arrow {
        transition: none;
    }

    .tbtk-mps-nav.is-nudging .tbtk-mps-arrow,
    html body .tbtk-mps-row.is-peeking:not(#tbtk-mps-a):not(#tbtk-mps-b) > .tbtk-mps-slide {
        animation: none !important;
    }
}