/* 購買流程 Banner-start */
.faq-banner-section {
    height: 260px;
    background-image: url("/static/image/page_heder_2.webp");
    background-size: cover;
    background-position: center 46%;
    background-repeat: no-repeat;

    .my-container {
        height: auto;
        justify-content: center;
        align-items: center;
        background-image: none;
    }

    .faq-banner__content {
        max-width: 720px;
    }

    .banner-title {
        text-align: center;
        margin: 0 0 12px;
        font-size: 40px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--black-color);
    }

    .faq-banner__desc {
        margin: 0;
        font-size: 16px;
        line-height: 1.7;
        color: var(--black-color);
    }
}
/* 購買流程 Banner-end */

@keyframes pp-step-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pp-marker-pop {
    from {
        opacity: 0;
        transform: scale(0.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pp-bg-float {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(0, -12px); }
}

@keyframes pp-bg-float-reverse {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(8px, 10px) rotate(4deg); }
}

@keyframes pp-ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 購物流程與退換貨-start */
.purchase-process-section {
    position: relative;
    display: block;
    width: 100%;
    padding: 88px 0 96px;
    background: #ffffff;
    overflow: hidden;

    &--returns {
        padding-top: 88px;
        padding-bottom: 104px;
        background: #f7f8fa;
    }

    /* 背景裝飾 */
    .purchase-process__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
    }

    .purchase-process__bg-blob {
        position: absolute;
        display: block;
        border-radius: 50%;
        will-change: transform;
    }

    .purchase-process__bg-ring {
        position: absolute;
        display: block;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2px solid rgba(30, 140, 230, 0.22);
    }

    .purchase-process__bg-ring::after {
        content: "";
        position: absolute;
        inset: 16px;
        border-radius: 50%;
        border: 1px dashed rgba(30, 140, 230, 0.2);
    }

    .purchase-process__bg-dots {
        position: absolute;
        inset: 0;
        display: block;
        background-image: radial-gradient(rgba(24, 24, 24, 0.08) 1px, transparent 1px);
        background-size: 40px 40px;
        -webkit-mask-image: radial-gradient(ellipse 48% 42% at 50% 50%, transparent 0%, transparent 72%, rgba(0, 0, 0, 0.35) 88%, #000 100%);
        mask-image: radial-gradient(ellipse 48% 42% at 50% 50%, transparent 0%, transparent 72%, rgba(0, 0, 0, 0.35) 88%, #000 100%);
    }

    .my-container {
        position: relative;
        z-index: 1;
    }

    .purchase-process-block {
        max-width: 1200px;
        margin: 0 auto;
    }

    /* 區塊標題 */
    .purchase-process__head {
        max-width: 560px;
        margin: 0 auto 56px;
        text-align: center;
    }

    .purchase-process__label {
        display: inline-block;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--main-color);
    }

    .purchase-process__title {
        margin: 0 0 16px;
        font-size: 36px;
        font-weight: 600;
        line-height: 1.25;
        letter-spacing: -0.02em;
        color: var(--black-color);
    }

    .purchase-process__intro {
        margin: 0;
        font-size: 16px;
        line-height: 1.75;
        color: rgba(24, 24, 24, 0.8);
    }

    /* 步驟列表 */
    .purchase-process__steps {
        display: flex;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .purchase-process__step {
        position: relative;
        flex: 1;
        min-width: 0;
        opacity: 0;
        transform: translateY(20px);

        &.is-visible {
            animation: pp-step-in 0.5s ease forwards;

            .purchase-process__step-marker {
                animation: pp-marker-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            }
        }

        &:last-child .purchase-process__step-arrow {
            display: none;
        }
    }

    .purchase-process__step-arrow {
        position: absolute;
        top: 36px;
        right: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        color: rgba(30, 140, 230, 0.45);
        transform: translate(50%, -50%);
        pointer-events: none;
        transition: color 0.25s ease, transform 0.25s ease;

        svg {
            width: 20px;
            height: 20px;
        }
    }

    .purchase-process__step:hover .purchase-process__step-arrow {
        color: var(--main-color);
        transform: translate(50%, -50%) translateX(2px);
    }

    .purchase-process__step-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 100%;
        padding: 0 20px 8px;
        text-align: center;
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-4px);

            .purchase-process__step-marker {
                background: var(--main-color);
                box-shadow: 0 12px 32px rgba(30, 140, 230, 0.22);
                background: linear-gradient(135deg, #4f90ff 0%, var(--main-color) 100%);
            }

            .purchase-process__step-icon {
                color: #ffffff;
            }

            .purchase-process__step-index {
                background: var(--yellow-color);
                color: #ffffff;
            }

            .purchase-process__step-title {
                color: var(--main-color);
            }
        }
    }

    /* 圖示標記 */
    .purchase-process__step-marker {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 72px;
        height: 72px;
        margin-bottom: 24px;
        border-radius: 20px;
        background: rgba(30, 140, 230, 0.08);
        transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
        opacity: 0;
        transform: scale(0.85);

        &::after {
            content: "";
            position: absolute;
            top: -32%;
            left: -26%;
            width: 57%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 22%, rgba(255, 255, 255, 0) 100%);
            transform: rotate(38deg) translateX(0);
            pointer-events: none;
        }
    }

    .purchase-process__step-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--main-color);
        transition: color 0.3s ease;

        svg {
            width: 40px;
            height: 40px;
        }
    }

    .purchase-process__step-index {
        position: absolute;
        top: -6px;
        right: -6px;
        min-width: 30px;
        height: 30px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--main-color);
        font-size: 13px;
        font-weight: 700;
        line-height: 30px;
        letter-spacing: 0.02em;
        color: #ffffff;
        transition: background 0.3s ease, color 0.3s ease;
    }

    .purchase-process__step-body {
        width: 100%;
    }

    .purchase-process__step-title {
        margin: 0 0 8px;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.45;
        color: var(--black-color);
        transition: color 0.25s ease;
    }

    .purchase-process__step-desc {
        margin: 0;
        font-size: 15px;
        line-height: 1.7;
        color: rgba(24, 24, 24, 0.5);
    }

    /* 提示區 */
    .purchase-process__note {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        margin: 56px auto 0;
        padding: 16px 20px;
        border-radius: 12px;
        border: 1px solid rgba(248, 188, 36, 0.35);
        background: rgba(255, 251, 240, 0.8);
        transition: box-shadow 0.3s ease, border-color 0.3s ease;

        &:hover {
            border-color: rgba(248, 188, 36, 0.55);
            box-shadow: 0 4px 20px rgba(248, 188, 36, 0.1);
        }

        p {
            margin: 0;
            font-size: 15px;
            line-height: 28px;
            color: rgba(24, 24, 24, 0.65);

            a {
                color: var(--main-color);
                font-weight: 500;
                text-decoration: none;
                border-bottom: 1px solid rgba(30, 140, 230, 0.35);
                transition: color 0.2s ease, border-color 0.2s ease;

                &:hover {
                    color: var(--yellow-color);
                    border-color: var(--yellow-color);
                }
            }
        }
    }

    .purchase-process__note-icon {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin-top: -1px;
        color: #d4a012;

        svg {
            width: 20px;
            height: 20px;
        }
    }
}
/* 購物流程與退換貨-end */

/* 背景裝飾修飾類（扁平選擇器，避免 CSS 嵌套 &--n 無法匹配） */
.purchase-process__bg-blob--1,
.purchase-process__bg-blob--2,
.purchase-process__bg-blob--3,
.purchase-process__bg-blob--4 {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(48px);
    will-change: transform, filter;
}

.purchase-process__bg-blob--1 {
    top: -40px;
    left: -40px;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle at 50% 50%, rgba(30, 140, 230, 0.32) 0%, rgba(30, 140, 230, 0.1) 42%, transparent 72%);
    animation: pp-bg-float 10s ease-in-out infinite;
}

.purchase-process__bg-blob--2 {
    top: 40%;
    right: -80px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle at 50% 50%, rgba(248, 188, 36, 0.3) 0%, rgba(248, 188, 36, 0.09) 42%, transparent 72%);
    animation: pp-bg-float-reverse 12s ease-in-out infinite;
    z-index: 1;
}

.purchase-process__bg-blob--3 {
    top: -30px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle at 50% 50%, rgba(248, 188, 36, 0.28) 0%, rgba(248, 188, 36, 0.08) 42%, transparent 72%);
    animation: pp-bg-float 11s ease-in-out infinite -2s;
}

.purchase-process__bg-blob--4 {
    bottom: -100px;
    left: -100px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle at 50% 50%, rgba(30, 140, 230, 0.26) 0%, rgba(30, 140, 230, 0.08) 42%, transparent 72%);
    animation: pp-bg-float-reverse 13s ease-in-out infinite -4s;
}

.purchase-process__bg-ring--1,
.purchase-process__bg-ring--2 {
    position: absolute;
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    border: 2px solid rgba(30, 140, 230, 0.22);
}

.purchase-process__bg-ring--1 {
    top: 10%;
    right: 6%;
    width: 140px;
    height: 140px;
    animation: pp-ring-spin 40s linear infinite;
}

.purchase-process__bg-ring--2 {
    bottom: 14%;
    left: 4%;
    width: 110px;
    height: 110px;
    border-color: rgba(248, 188, 36, 0.32);
    animation: pp-ring-spin 35s linear infinite reverse;
}

.purchase-process__bg-ring--2::after {
    border-color: rgba(248, 188, 36, 0.28);
}

.purchase-process__bg-dots--alt {
    background-image: radial-gradient(rgba(30, 140, 230, 0.09) 1px, transparent 1px);
    -webkit-mask-image: radial-gradient(ellipse 46% 40% at 50% 52%, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.3) 86%, #000 100%);
    mask-image: radial-gradient(ellipse 46% 40% at 50% 52%, transparent 0%, transparent 70%, rgba(0, 0, 0, 0.3) 86%, #000 100%);
}

/* 中等螢幕：3 + 2 換行 */
@media screen and (max-width: 1200px) and (min-width: 993px) {
    .purchase-process-section {
        .purchase-process__steps:not(.purchase-process__steps--returns) {
            flex-wrap: wrap;
            row-gap: 40px;

            .purchase-process__step {
                flex: 0 0 33.333%;

                &:nth-child(3) .purchase-process__step-arrow {
                    display: none;
                }

                &:nth-child(4),
                &:nth-child(5) {
                    flex: 0 0 50%;
                }
            }
        }
    }
}