/* iframe 頁面基礎 */
html.cart-popup-page,
html.cart-popup-page body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
}

html.cart-popup-page {
    --main-color: #1e8ce6;
    --yellow-color: #f8bc24;
    --black-color: #181818;
}

/* 購物車抽屜-start */
.cart-drawer {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 24px 0 0 24px;

    .cart-drawer__handle {
        display: none;
        position: relative;
        flex-shrink: 0;
        width: 100%;
        height: 20px;
        background: linear-gradient(to right, var(--main-color), rgba(30, 140, 230, 0.6));
        cursor: grab;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;

        /* 擴大觸控熱區，方便向下拖關閉 */
        &::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: -12px;
            bottom: -16px;
        }

        &::before {
            content: "";
            width: 48px;
            height: 4px;
            border-radius: 4px;
            background: var(--yellow-color);
            position: absolute;
            left: 50%;
            bottom: 6px;
            transform: translateX(-50%);
            z-index: 1;
            pointer-events: none;
        }

        &.is-dragging {
            cursor: grabbing;
        }
    }

    /* 頭部-start */
    .cart-drawer__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 19px 24px;
        border-bottom: 1px solid #eef2f7;
        background: linear-gradient(to right, var(--main-color), rgba(30, 140, 230, 0.6));

        .cart-drawer__title {
            margin: 0;
            font-size: 22px;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 12px;

            .cart-drawer__title-icon {
                width: 38px;
                height: 38px;
                border-radius: 52px;
                display: flex;
                justify-content: center;
                align-items: center;
                background-color: #ffffff;
            }

            img {
                width: 24px;
                height: 24px;
            }
        }

        .cart-drawer__close {
            width: 38px;
            height: 38px;
            color: #ffffff;
            border: 1px solid rgb(236, 236, 236);
            border-radius: 50%;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            transition: all 0.3s ease;
            overflow: hidden;
            position: relative;

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

            &:hover {
                color: #ffffff;
                transform: rotate(180deg);

                &::before {
                    width: calc(100% + 1px * 2);
                }

                svg {
                    path {
                        fill: #ffffff;
                    }
                }
            }

            &::before {
                content: "";
                position: absolute;
                width: 0;
                inset-block: -1px;
                inset-inline-start: -1px;
                z-index: -1;
                transition: width .3s;
                border-radius: calc(infinity * 1px);
                background-color: rgb(255, 168, 50);
            }
        }
    }

    /* 頭部-end */

    /* 免運進度-start */
    .cart-drawer__shipping {
        padding: 16px 20px;
        position: relative;

        &::after {
            content: '';
            position: absolute;
            width: 90%;
            border-bottom: 1px dotted #f0f0f0;
            bottom: -6px;
            left: 5%;
        }

        .cart-drawer__shipping-text {
            margin: 0 0 10px;
            font-size: 14px;
            font-family: Outfit, sans-serif;
            color: var(--black-color);
        }

        .cart-drawer__progress {
            width: 100%;
            height: 6px;
            border-radius: 999px;
            background: rgba(30, 140, 230, 0.1);
            overflow: hidden;

            .cart-drawer__progress-bar {
                display: block;
                width: 0;
                height: 100%;
                border-radius: inherit;
                background: linear-gradient(to right, var(--main-color), rgba(30, 140, 230, 0.6), var(--main-color));
                transition: width 0.3s ease;
            }
        }

        .cart-drawer__progress-amount {
            margin: 8px 0 0;
            font-size: 13px;
            line-height: 1.4;
            letter-spacing: 0.02em;
            color: rgba(24, 24, 24, 0.55);
            font-family: Outfit, sans-serif;
            text-align: right;
        }
    }

    /* 免運進度-end */

    /* 商品列表-start */
    .cart-drawer__body {
        flex: 1;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 12px 20px;
        scrollbar-width: thin;
        scrollbar-color: rgba(30, 140, 230, 0.35) transparent;

        &::-webkit-scrollbar {
            width: 4px;
        }

        &::-webkit-scrollbar-track {
            background: transparent;
        }

        &::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: rgba(30, 140, 230, 0.28);
        }

        &::-webkit-scrollbar-thumb:hover {
            background: rgba(30, 140, 230, 0.45);
        }

        .cart-drawer__items {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .cart-drawer__item {
            display: flex;
            gap: 12px;
            padding: 14px 0;
            border-bottom: 1px solid #eef2f7;

            &:last-child {
                border-bottom: none;
            }

            .cart-drawer__thumb {
                width: 72px;
                height: 72px;
                border-radius: 10px;
                object-fit: cover;
                flex-shrink: 0;
                background: #f3f4f6;
            }

            .cart-drawer__item-main {
                flex: 1;
                min-width: 0;
            }

            .cart-drawer__item-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 8px;
                margin-bottom: 10px;

                .cart-drawer__item-name {
                    margin: 0;
                    font-size: 14px;
                    line-height: 1.5;
                    color: var(--black-color);
                    font-weight: 600;
                }
            }

            .cart-drawer__item-meta {
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .cart-drawer__remove {
                width: 28px;
                height: 28px;
                border: none;
                background: transparent;
                cursor: pointer;
                flex-shrink: 0;
                transition: all 0.3s ease;

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

                &:hover {
                    transform: rotate(180deg);
                }
            }

            .cart-drawer__qty {
                display: flex;
                align-items: stretch;
                overflow: hidden;

                .qty-btn-wrapper {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    overflow: hidden;
                }

                .cart-drawer__qty-btn {
                    width: 24px;
                    height: 24px;
                    border: none;
                    color: var(--black-color);
                    cursor: pointer;
                    font-size: 16px;
                    line-height: 1;
                    background-color: rgba(24, 24, 24, 0.035);

                    &.decrease {
                        border-radius: 0 0 6px 0;
                    }

                    &.increase {
                        border-radius: 0 6px 0 0;
                    }

                    img {
                        width: 8px;
                        height: 8px;
                    }
                }

                .cart-drawer__qty-input {
                    width: 44px;
                    border: none;
                    text-align: center;
                    font-size: 13px;
                    color: var(--black-color);
                    outline: none;
                    background-color: rgba(24, 24, 24, 0.035);
                    border-radius: 6px 0 0 6px;
                    font-family: Outfit, sans-serif;
                }
            }

            .cart-drawer__item-price {
                font-size: 14px;
                font-weight: 500;
                color: var(--black-color);
                font-family: Outfit, sans-serif;
            }
        }

        .empty-wrapper {
            min-height: 220px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;

            .empty-icon {
                width: 160px;
                height: 160px;
                margin-top: 60px;
                margin-bottom: 12px;

                img {
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            .empty-text {
                margin: 0;
                font-size: 14px;
                color: #6b7280;
            }
        }
    }

    /* 商品列表-end */

    /* 底部操作-start */
    .cart-drawer__footer {
        padding: 16px 20px 20px;
        border-top: 1px solid #eef2f7;
        background: #ffffff;

        .cart-drawer__subtotal {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 0 14px;
            font-size: 20px;
            color: var(--black-color);

            strong {
                font-size: 24px;
                font-weight: bold;
                color: var(--main-color);
                font-family: Outfit, sans-serif;
            }
        }

        .cart-drawer__actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding-top: 24px;
            border-top: 1px solid #f0f0f0;

            .cart-drawer__btn {
                height: 62px;
                border-radius: 999px;
                border: 1px solid var(--main-color);
                background: var(--main-color);
                color: #ffffff;
                font-size: 14px;
                font-weight: 600;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                display: flex;
                align-items: center;
                justify-content: center;
                text-decoration: none;

                &.cart-drawer__btn--primary {
                    border-color: var(--yellow-color);
                    background: var(--yellow-color);
                }

                &:hover {
                    opacity: 0.7;
                }

                .cart-drawer__btn-text {
                    font-size: 18px;
                    position: relative;
                    z-index: 1;
                }
            }
        }
    }

    /* 底部操作-end */
}

/* 購物車抽屜-end */