/* 支付方式无限滚动样式 - 模仿currency-scroll.css */

/* 移动端支付方式滚动 */
@media (max-width: 959px) {
    .paymentListBox {
        overflow: hidden;
        width: 100%;
        position: relative;
    }

    .payment-scroll-wrapper {
        display: flex;
        align-items: center;
        gap: 18.47vw; /* 移动端间距：按需设为 18.47vw */
        animation: scrollPayment 15s linear infinite;
        width: max-content;
        will-change: transform; /* 优化性能，减少迭代边界抖动 */
    }

    /* 悬停时暂停动画 */
    .paymentListBox:hover .payment-scroll-wrapper {
        animation-play-state: paused;
    }

    /* 触摸时暂停动画 */
    .paymentListBox.touch-active .payment-scroll-wrapper {
        animation-play-state: paused;
    }

    .payment-scroll-wrapper img {
        flex-shrink: 0;
        transition: transform 0.3s ease;
    }

    /* 悬停时图片放大效果 */
    .payment-scroll-wrapper img:hover {
        transform: scale(1.05);
    }

    @keyframes scrollPayment {
        0% {
            transform: translateX(0);
        }

        100% {
            /* 使用 JS 计算的首轮实际宽度，避免在两轮之间出现 0.5×gap 的错位跳动 */
            transform: translateX(calc(-1 * var(--scroll-distance, 0px)));
        }
    }
}

/* 桌面端保持原样，不添加滚动效果 */
@media (min-width: 769px) {
    .paymentListBox {
        /* 保持原有样式 */
    }
}