@charset "utf-8";

.page-container {
    .page-title {
        font-weight: 300;
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }
}

/* ------------------------------
    SHOP LIST (shop-list-container)
------------------------------ */
.shop-list-container {
    .goods-list-title {
        .title {
            margin: 0;
            font-size: 2rem;
            font-weight: 200;
        }
        .category {
        }
        
        .breadcrumb {
            margin: 0;
            font-size: 0.875rem;
            .breadcrumb-item.active {
            }
            .breadcrumb-item+.breadcrumb-item {
                --bs-breadcrumb-item-padding-x: 0.125rem;
                &::before {
                    --bs-breadcrumb-divider: "\F285";
                    font-family: 'bootstrap-icons';
                    font-weight: bold;
                    color: rgba(var(--bs-secondary-color-rgb), 0.25);
                }
            }
        }
    }
    .goods-list-container {
        .goods-list-meta {
            position: relative;
            margin: 0.75rem 0;
            .nav-underline .nav-link {
                --bs-nav-link-padding-y: 0.125rem;
                font-weight: 400;
            }
            .nav-underline .nav-link.active {
                --bs-nav-underline-link-active-color: var(--bs-tertiary-color);
                border-bottom-color: rgba(var(--bs-tertiary-color-rgb), 0.5);
                font-weight: 400;
            }
        }

        .goods-list-main {
            margin: 0.75rem 0;
            .goods-list-wrapper {}
            .goods-page-wrapper {}
        }
    }



    .list-item-box {
        --bs-card-border-width: 0;
        --bs-card-border-radius: 0;
        height: 100%;

        .goods-list-image {
            --bs-card-inner-border-radius: 0;
            border: 1px solid var(--bs-border-color);
        }

        .goods-link {
            background-color: var(--bs-light, '#fff');
        }

        .goods-image {
            --bs-border-radius: 0;
            transition: transform 0.25s;
        }

        .goods-list-image:hover .goods-image {
            /* transform: scale(1.1); */
        }

        .goods-list-content {
            position: relative;
            font-size: 0.875rem;
            letter-spacing: -0.025em;
            /* color: rgba(var(--bs-body-color-rgb), 0.75); */
        }

        .goods-list-content dl, 
        .goods-list-content dt, 
        .goods-list-content dd {
            margin: 0;
            padding: 0;
            font-weight: inherit;
            line-height: 1.25;
        }

        .goods-name {
            font-size: 1.125rem;
            font-weight: 300;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            overflow: hidden;
            line-height: 1.375;
            margin: 0;
            padding-right: 2rem;
            min-height: 3.5rem;

            a:hover {
                color: var(--bs-body-emphasis);
            }
        }

        .price-box {
            display: grid;
            gap: 0.125rem;
            margin-bottom: 0.5rem;
            line-height: 1.25;
        }
        .price-box dl {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .price-box dt::before {
            font-family: "bootstrap-icons";
            display: inline-block;
            vertical-align: bottom;
            margin-right: 0.5em;
        }
        .point-price dt::before { content: "\F70C"; }
        .current-price dt::before { content: "\F50F"; }
        .benefit-price dt::before { content: "\F2DC"; }
        .price-box dd {
            position: relative;
            display: flex;
            align-items: center;
            gap: 0.25rem;
        }
        .price-box dd .price {
            font-size: 1.125rem;
            font-weight: 700;
        }
        .price-box .emphasis {
            .price {
                color: var(--wz-color-accent);
                font-weight: 900;
                font-size: 1.25rem;
            }
        }
        .price-box .diminish {
            dd {
                color: var(--bs-tertiary-color);
                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 50%;
                    display: block;
                    height: 1px;
                    background: currentColor;
                }
            }
        }

        .point-price dd > span {
            display: flex;
            gap: 0.375rem;
            align-items: center;

            em {
                font-style: normal;
                color: var(--bs-secondary-color);
            }
            b {
                font-size: 1rem;
            }
        }

        .goods-review {
            --wz-score-star-gap: 0;
            --wz-score-star-color: gold;
            --wz-score-star-empty-color: var(--bs-secondary-bg);
            --wz-score-star-size: 1.25rem;
            --wz-score-text-size: 0.875rem;
            --wz-score-text-color: var(--bs-secondary-color);
            --wz-score-text-margin: 0.25rem;
            display: flex;
            gap: 0;
            justify-content: flex-start;
            align-items: center;
            margin-top: 0.25rem;
        }
        .goods-review-score,
        .goods-review-count {
            display: flex;
            gap: 0.25rem;
            justify-content: flex-start;
            align-items: center;
        }
        .goods-review-score {
            .bi {
                color: var(--wz-color-accent);
            }
        }
        .goods-review-count {
            position: relative;
            padding-left: 1.25rem;
            color: var(--bs-tertiary-color);
            &::before {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0.75rem;
                width: 3px;
                height: 3px;
                margin: auto 0;
                border-radius: 50%;
                background-color: rgba(var(--bs-tertiary-color-rgb), 0.5);
                transform: translateX(-50%);
                content: "";
            }
        }
        .goods-review-score {
        }

        .goods-wish {
            display: flex;
            width: 1.5rem;
            height: 1.5rem;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            transition: transform 0.25s ease;
            
            .bi {
                font-size: 1.125rem;
            }

            &.active {
                color: var(--wz-color-accent);
                .bi-suit-heart::before {
                    content: "\F59D";
                }
            }
            &:active {
                transform: scale(1.25);
            }
        }
    }
}

/* ------------------------------
    SHOP VIEW
------------------------------ */
.shop-view-container {
    .goods-view-title {}

    .goods-view-container {
        .goods-main-container {}
        .goods-detail-container {}
    }

    .goods-title {
        position: relative;
        margin-bottom: 2rem;
        .goods-name {
            margin-bottom: 0.75rem;
            font-size: 2.25rem;
            font-weight: 200;
            letter-spacing: -0.05rem;
            line-height: 1.0625;
            color: var(--bs-emphasis-color);
            word-break: keep-all;
        }
        .goods-meta {
            display: flex;
            gap: 0.75rem;
            justify-content: flex-start;
            align-items: center;
            font-size: 1.25rem;
            font-weight: 300;
            line-height: 1.25;
            color: var(--bs-secondary-color);
        }
        .brand-name {
            flex-shrink: 0;
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: var(--bs-border-radius);
            background-color: var(--bs-body-color);
            color: var(--bs-body-bg);
            font-size: 0.75em;
            white-space: nowrap;
            text-transform: uppercase;
        }
        .model-name {
            flex-shrink: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            min-width: 0;
        }
        .goods-score {
            flex-shrink: 0;
            margin-left: auto;
        }
    }

    .goods-image {
        img {
            background-color: var(--bs-white, '#fff');
        }
        .sticky-top {
            top: 1rem;
        }
        .swiper-slide {
            /* background-color: var(--bs-white, '#fff'); */
        }
        .goods-image-container,
        .goods-thumb-container {
            user-select: none;
        }
        .goods-image-container {
            border: 1px solid var(--bs-border-color);
            border-radius: var(--bs-border-radius-lg);
        }
        .goods-thumb-container .swiper-slide {
            overflow: hidden;
            border-radius: var(--bs-border-radius-lg);
            border: 1px solid var(--bs-secondary-bg);
        }
        .goods-thumb-container .swiper-slide-thumb-active:not(:has(.placeholder)) {
            border-color: var(--bs-border-color);
        }
        .goods-thumb-container .swiper-slide-thumb-active img {
            opacity: 0.75;
            filter: grayscale(1);
        }

        .swiper-button-prev,
        .swiper-button-next {
            --swiper-navigation-color: rgba(var(--bs-black-rgb), 0.75);
            --swiper-navigation-sides-offset: -1px;
            svg {
                fill: none;
                stroke-width: 3px;
            }
        }
        .goods-image-container .swiper-button-prev,
        .goods-image-container .swiper-button-next {
            --swiper-navigation-size: 76px;
            width: auto;
            padding: 1rem 0;
            background-color: rgba(var(--bs-white-rgb), 0.375);
            border: 1px solid rgba(var(--bs-black-rgb), 0.125);
        }
        .goods-image-container .swiper-button-prev {
            border-top-right-radius: var(--bs-border-radius);
            border-bottom-right-radius: var(--bs-border-radius);
        }
        .goods-image-container .swiper-button-next {
            border-top-left-radius: var(--bs-border-radius);
            border-bottom-left-radius: var(--bs-border-radius);
        }

        .goods-thumb-container .swiper-button-prev,
        .goods-thumb-container .swiper-button-next {
            --swiper-navigation-size: 32px;
            /* border-radius: 100%; */
            /* background-color: rgba(var(--bs-white-rgb), 0.375); */
            /* border: 1px solid rgba(var(--bs-black-rgb), 0.125); */
        }
        .goods-thumb-container .swiper-button-prev {
            /* transform: translateX(-100%); */
        }
        .goods-thumb-container .swiper-button-next {
            /* transform: translateX(100%); */
        }
    }

    .condition-row {}
    .condition-title {
        margin-bottom: 0.5rem;
    }

    /* 옵션 */
    .goods-option:has(#goods-option-list:empty) {
        display: none;
    }
    .item-option {
        &.list-group .list-group-item:has(.form-check-input:checked) {
            --bs-list-group-bg: var(--bs-tertiary-bg);
            --bs-list-group-color: var(--bs-emphasis-color);
            transition: background-color 0.25s ease, color 0.25s ease;
            font-weight: 500;
        }
    }
    .condition-option {
        .form-check-label {
            padding: 0.625rem 1rem !important;
        }
    }

    /* 렌탈 */
    .item-commitment,
    .item-management {
        .condition-item-placeholder-btn {
            flex-grow: 1;
            min-height: 2.875rem;
            background-color: var(--bs-secondary-bg);
            border-radius: var(--bs-border-radius);
            cursor: wait;
        }
    }

    /* 렌탈 */
    .condition-commitment,
    .condition-management {
        .btn {
            --bs-btn-padding-y: 0.625rem;

            --bs-btn-active-color: var(--bs-emphasis-color);
            --bs-btn-bg: transparent;
            --bs-btn-border-color: rgba(var(--bs-secondary-rgb), 0.25);

            --bs-btn-active-color: var(--bs-emphasis-color);
            --bs-btn-active-bg: transparent;
            --bs-btn-active-border-color: var(--bs-emphasis-color);
        }

        .btn-check:checked+.btn {
            --bs-btn-font-weight: 500;
        }
    }

    @media (max-width: 576px) {
        .item-commitment,
        .item-management {
            flex-wrap: wrap !important;
            & > * {
                flex: 0 0 calc(50% - 0.25rem) !important; 
                max-width: calc(50% - 0.25rem);
            }
        }
    }

    /* 제휴 카드 선택 */
    .condition-item.item-card {
        font-variant-numeric: tabular-nums;
        .accordion {
            --bs-accordion-btn-padding-y: 0.625rem;
        }
        .accordion-collapse {
            position: relative;
        }
        .accordion-collapse::before {
            content: "";
            position: absolute;
            left: var(--bs-accordion-btn-padding-x);
            right: var(--bs-accordion-btn-padding-x);
            top: 0;
            border-top: 1px solid rgba(var(--bs-secondary-bg-rgb), 0.75);
        }
        .accordion-button:focus {
            --bs-accordion-active-color: var(--bs-body-color);
            --bs-accordion-active-bg: var(--bs-body-bg);
            --bs-accordion-btn-focus-box-shadow: none;
        }
        .accordion-button:not(.collapsed) {
            --bs-accordion-active-color: var(--bs-body-color);
            --bs-accordion-active-bg: var(--bs-body-bg);
            --bs-accordion-border-color: transparent;
        }

        .condition-card {
            white-space: nowrap;
            .form-check-label {
                .card-company {}
                .card-name {}
                .card-discount {
                    margin-left: auto;
                    color: var(--bs-tertiary-color);
                    font-weight: 300;
                    /* font-size: 0.875rem; */
                    b {
                        font-weight: 500;
                    }
                }
            }
            .form-check-input:checked ~ .form-check-label {
                .card-discount {
                    color: var(--bs-body-color);
                    font-weight: 400;
                    b {
                        color: var(--bs-emphasis-color);
                        font-weight: 600;
                    }
                }
            }
        }

        .card-benefit-container {
            margin: 0.125rem 0 0.5rem 1.75rem;
        }
        .condition-card-benefit {
            .btn {
                --bs-btn-padding-x: 0.5rem;
                --bs-btn-font-size: 0.875rem;
                --bs-btn-line-height: 1.25;
                --bs-btn-border-color: var(--bs-border-color);
                --bs-btn-border-radius: var(--bs-border-radius-lg);
                --bs-btn-color: var(--bs-tertiary-color);

                --bs-btn-active-color: var(--bs-emphasis-color);
                --bs-btn-active-bg: transparent;
                --bs-btn-active-border-color: var(--bs-emphasis-color);
            }

        }
    }

    /* 요금 */
    .goods-price {
        margin-top: 3rem !important;
        white-space: nowrap;

        dl, dt, dd {
            margin: 0;
            padding: 0;
            list-style: none;
            font-style: normal;
            font-weight: normal;
        }
        dl {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        dt {
            font-size: 1.25rem;
            padding-right: 1em;
            position: relative;
            max-width: 12ch;
            overflow: hidden;
            text-overflow: ellipsis;

            &::after {
                content: "\F285";
                font-family: 'bootstrap-icons';
                font-size: 0.75em;
                color: var(--bs-tertiary-color);
                display: block;
                line-height: 1;
                position: absolute;
                top: 50%;
                right: 0;
                transform: translateY(-50%);
            }
        }
        dd {
            font-size: 1.5rem;
            gap: 0.25em;
            justify-content: flex-start;
            align-items: center;

            .prefix,
            .suffix {
                font-weight: 300;
            }
            .prefix {}
            .amount {
                font-weight: 800;
                font-variant-numeric: tabular-nums;
                font-size: 1.125em;
            }
            .suffix {}
        }

        .price-info {}
        .promo-info {
            margin-bottom: 0.375rem;
            dl {
                color: var(--bs-primary);
            }
            dt {
                &::after {
                    color: var(--bs-primary-border-subtle);
                }
            }
            dd {
            }
            .promo-text {
                display: flex;
                gap: 0.75rem;
                justify-content: flex-start;
                align-items: center;
                font-size: 0.875rem;
            }
            .promo-name {
                position: relative;
                overflow: hidden;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 3rem;
                border: 1px solid var(--bs-primary-border-subtle);
                background-color: var(--bs-primary-bg-subtle);
                color: var(--bs-primary-text-emphasis);
                padding: 0.125rem 0.75rem;
                font-weight: 500;
            }
            .promo-name::after {
                content: "";
                position: absolute;
                top: 0;
                left: -150%;
                width: 75%;
                height: 100%;
                background: linear-gradient(
                    to right,
                    rgba(255, 255, 255, 0) 0%,
                    rgba(255, 255, 255, 0.25) 50%,
                    rgba(255, 255, 255, 0) 100%
                );
                transform: skewX(-25deg);
                animation: shine 2.5s infinite;
            }
            .promo-term {}
            .promo-rate {
                position: relative;
                margin-left: auto;
                color: var(--bs-danger);
                font-size: 1.375rem;
                font-weight: 800;
                line-height: 1;
                font-variant-numeric: tabular-nums;
                &::before {
                    position: absolute;
                    right: 100%;
                    content: "\F124" / "";
                    font-family: 'bootstrap-icons';
                }
            }
        }

        .discount-info {
            color: var(--bs-secondary-color);
        }

        .total-info {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--bs-border-color);

            dd {
                /* font-size: 1.75rem; */
                color: var(--wz-color-accent);
            }
        }

        .point-info {
            dd {
                position: relative;
                color: var(--bs-success);
                .notapp {
                    font-size: 1.25rem;
                    font-weight: 300;
                    color: var(--bs-tertiary-color);
                }
                .prefix {
                    position: absolute;
                    right: calc(100% + 0.5rem);
                    overflow: hidden;
                    font-size: 0.875rem;
                    font-weight: 500;
                    padding: 0.125rem 0.75rem;
                    border-radius: 3rem;
                    border: 1px solid var(--bs-success-border-subtle);
                    background-color: var(--bs-success-bg-subtle);
                    color: var(--bs-success-text-emphasis);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .prefix::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: -150%;
                    width: 75%;
                    height: 100%;
                    background: linear-gradient(
                        to right,
                        rgba(255, 255, 255, 0) 0%,
                        rgba(255, 255, 255, 0.25) 50%,
                        rgba(255, 255, 255, 0) 100%
                    );
                    transform: skewX(-25deg);
                    animation: shine 2.5s infinite;
                }
            }

            /* 사은품 디스플레이 컨트롤 */
            & [data-has-point="N"] { display: flex; }
            & [data-has-point="Y"] { display: none; }
            &.has-point [data-has-point="N"] { display: none; }
            &.has-point [data-has-point="Y"] { display: flex; }
        }
    }

    /* 버튼 */
    .goods-buttons {
        margin-top: 2rem !important;

        .btn {
            --bs-btn-padding-y: 0.75rem;
        }

        .btn-counsel {
            flex-basis: 20%;
            --bs-btn-bg: transparent;
            --bs-btn-color: var(--bs-body-color);

            &[data-channel=""] {
                display: none;
            }
        }
        .btn-order {
            flex-basis: 0;
            font-weight: 500;
        }
    }

    /* 상세 */
    .goods-detail-tab-menu {
    }
    .goods-detail-tab-menu:not(:empty) {
        background-color: rgba(var(--bs-body-bg-rgb), 1);
        /* backdrop-filter: blur(8px); */
        border-bottom: 1px solid var(--bs-border-color);
    }
    .goods-detail-tab-menu.is-sticky {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        padding-left: calc(50vw - 50%);
        padding-right: calc(50vw - 50%);
    }
    .goods-detail-tab-content {
        text-align: center;
    }
    .goods-detail-tab-content img {
        max-width: 100%;
    }
}

/* ------------------------------
    SHOP CHECKOUT
------------------------------ */
.shop-checkout-container {
    .page-title {}
    .page-content-container {}
    .content-main-container {
        margin-bottom: 3rem;

        h2 {
            font-size: 1.5rem;
            font-weight: 300;
            line-height: 1.25;
            margin-bottom: 1rem;
            color: var(--bs-secondary-color);
        }
        .order-checkout-wrapper {}
        .order-condition-wrapper {}
    }

    /* 상품 정보 */
    .info-box {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        dl, dt, dd {
            margin: 0;
            padding: 0;
            list-style: 0;
            font-weight: normal;
        }

        .list-group-item {
            dl {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 1rem;
            }
            dt {
                color: var(--bs-tertiary-color);
            }
        }

        .info-box-goods {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            .goods-name {
                font-size: 1.5rem;
                font-weight: 300;
                line-height: 1.25;
                color: var(--bs-emphasis-color);
            }
        }

        .info-box-conditions {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            font-variant-numeric: tabular-nums;
        }
    }
}

/* ------------------------------
    SHOP COMPLETE
------------------------------ */
.shop-complete-container {
    .page-title {
        display: none;
    }
    .page-content-container {}

    .content-main-container {
        dl, dt, dd {
            margin: 0;
            padding: 0;
            list-style: none;
            font-weight: normal;
        }
    }

    .order-checkout-wrapper {
        .complete {
            padding: 2rem 0;
            font-size: 2.25rem;
            font-weight: 300;
            line-height: 1.25;
            letter-spacing: -0.05em;
            color: var(--bs-emphasis-color);
            text-align: center;
        }
        .table {
            border-top: 3px solid var(--bs-body-color);
        }
    }
    .order-condition-wrapper {
        margin: 2rem 0;
    }

    .goods-image {
        top: 1rem;
    }

    .order-sheet {
        h3 {
            font-size: 1.25rem;
            font-weight: 400;
            line-height: 1.25;
        }
        .table {
            th, td {
                padding: 0.5rem 0.75rem;
                overflow-wrap: break-word;
                word-break: keep-all;
                /* font-variant-numeric: tabular-nums; */
            }
            th {
                --bs-table-bg: var(--bs-tertiary-bg);
                width: 30%;
                vertical-align: middle;
            }
            b {
                font-size: 1.125rem;
                font-weight: 400;
            }
            strong {
                font-size: 1.25rem;
                font-weight: 800;
            }
            .guide {
                font-size: 0.875rem;
                color: var(--bs-tertiary-color);
                line-height: 1.25;
                display: flex;
                gap: 0.25rem;
                &::before {
                    content: "\F333";
                    font-family: 'bootstrap-icons';
                }
            }
        }
    }
    .order-sheet + .order-sheet {
        margin-top: 1rem;
    }

    .buttons-wrap {
        .btn {
            --bs-btn-padding-x: 0.75rem;
            --bs-btn-padding-y: 0.625rem;
        }
    }
}



/* ------------------------------
    MYPAGE ORDER LIST
------------------------------ */
.mypage-order-container {
    .page-title {}
    .page-content-container {}

    .mypage-content h3 {
        display: none;
    }


    .order-step {
        --arrow-size: 0.75rem;
        --step-bg: var(--bs-secondary-bg);
        --step-color: var(--bs-secondary-color);
        --step-hover-bg: var(--bs-tertiary-bg);
        --step-hover-color: var(--bs-body-color);

        counter-reset: step-counter;
        margin: 1.5rem 0 0 0;
        padding: 0;
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.25rem;

        [data-order-step] {
            counter-increment: step-counter;
            flex: 1;
            position: relative;
            user-select: none;
            transition: background-color 0.25s;
            margin-left: calc(var(--arrow-size) * -1);
        }

        [data-order-step]:first-child {
            margin-left: 0;
        }

        [data-order-step] a {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.125rem;
            text-align: center;
            padding: 1.125rem var(--arrow-size) 0.875rem var(--arrow-size);
            text-decoration: none;
            color: var(--step-color);
            font-size: 0.75rem;
            background-color: transparent;
            cursor: pointer;
            line-height: 1.25;
        }
        [data-order-step] a::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--step-bg);
            clip-path: polygon(
                0% 0%, 
                calc(100% - var(--arrow-size)) 0%, 
                100% 50%, 
                calc(100% - var(--arrow-size)) 100%, 
                0% 100%, 
                var(--arrow-size) 50%
            );
            z-index: -1;
        }
        [data-order-step]:first-child a::before {
            clip-path: polygon(
                0% 0%, 
                calc(100% - var(--arrow-size)) 0%, 
                100% 50%, 
                calc(100% - var(--arrow-size)) 100%, 
                0% 100%
            );
            border-radius: 0.375rem 0 0 0.375rem;
        }
        [data-order-step]:last-child a::before {
            clip-path: polygon(
                0% 0%, 
                100% 0%, 
                100% 100%, 
                0% 100%, 
                var(--arrow-size) 50%
            );
            border-radius: 0 0.375rem 0.375rem 0;
        }
        [data-order-step]:only-child a::before {
            clip-path: none;
            border-radius: 0.375rem;
            margin-left: 0;
        }

        [data-order-step].active a::before,
        [data-order-step]:hover a::before {
            background-color: var(--step-hover-bg);
            color: var(--step-hover-color);
        }

        [data-order-step] i {
            position: absolute;
            top: -0.6875rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
        }
        [data-order-step] i::before {
            content: counter(step-counter);
            font-family: var(--bs-font-monospace);
            font-size: 1rem;
            font-style: normal;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 1.5rem;
            height: 1.5rem;
            background-color: var(--bs-body-color);
            color: var(--bs-body-bg);
            border-radius: 50%;
            line-height: 1;
        }
    }



    .order-detail {
        margin-top: 3rem;
    }

    .order-list {
        margin: 0;
        padding: 0;
        list-style: none;

        li {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--bs-border-color);
        }

        img {
            max-width: 100px;
        }

        dl,
        dt,
        dd {
            margin: 0;
            padding: 0;
            list-style: none;
            font-weight: 400;
        }
        dl {
        }
    }
}

@keyframes shine {
    0%      { left: -150%; }
    30%     { left: 150%; }
    100%    { left: 150%; }
}