@use "../common/utils" as *;
@use "../common/mixins" as *;

.thanks-page {
    background: #FFF;
    padding-block: calc-rem(50px) calc-rem(80px);

    &__wrapper {
        border-radius: var(--border-radius);

        @include media-breakpoint-up(lg) {
            padding: calc-rem(40px);
            border: calc-rem(1px) solid rgba(var(--color-secondary), .2);
        }

        .order-label {
            font-size: clamp-font(12px, 14px);

            .label {
                font-variation-settings: var(--font-variation-settings-extended-bold);
                min-width: calc-rem(170px);
                display: inline-block;

                @include media-breakpoint-up(lg) {
                    min-width: calc-rem(200px);
                }
            }

            &.order-address{
                font-style: normal;
                display: flex;
                margin-top: calc-rem(20px);
                font-size: clamp-font(12px, 14px);

                address{
                    font-style: normal;
                    font-size: clamp-font(12px, 14px);
                }
            }
        }

        .content {
            font-size: calc-rem(14px);
            margin-top: calc-rem(30px);

            a:not(.btn) {
                font-size: clamp-font(12px, 14px);
                color: rgba(var(--color-primary));
                text-decoration: underline;

            }

            p {
                font-size: clamp-font(12px, 14px);

                &:last-child {
                    margin-bottom: 0;
                }
            }

        }
    }

    &__order-info {
        border-radius: var(--border-radius);
        padding: calc-rem(30px) calc-rem(20px);
        margin-top: calc-rem(30px);
        border: calc-rem(1px) solid rgba(var(--color-secondary), .2);

        @include media-breakpoint-up(lg) {
            padding: calc-rem(40px);
            margin-top: calc-rem(30px);
            border: calc-rem(1px) solid rgba(var(--color-secondary), .2);
        }

        .title {
            font-size: clamp-font(16px, 18px);
        }

        .order-information-list {
            display: flex;
            flex-direction: column;
            gap: calc-rem(10px);
            margin-top: 0;

            @include media-breakpoint-up(lg) {
                margin-top: calc-rem(30px);
            }

            li {
                display: flex;
                align-items: center;
                gap: calc-rem(10px);
                border-bottom: calc-rem(1px) solid rgba(var(--color-secondary), .2);
                padding-block: calc-rem(10px);

                @include media-breakpoint-up(lg) {
                    gap: calc-rem(30px);

                }


                .total-price {
                    display: flex;
                    flex-direction: column-reverse;
                    margin-left: auto;
                    white-space: nowrap;

                }
            }

        }

        .card-product-small {
            display: flex;
            gap: calc-rem(10px);
            align-items: center;

            @include media-breakpoint-up(md) {
                max-width: 80%;
                width: 100%;
            }

            figure {
                aspect-ratio: 1;
                width: calc-rem(50px);
                height: calc-rem(50px);
                flex: none;
                border: calc-rem(1px) solid rgba(var(--color-border));
                border-radius: var(--border-radius-small);
                overflow: hidden;

                @include media-breakpoint-up(lg) {
                    width: calc-rem(60px);
                    height: calc-rem(60px);
                }


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

            &__content {
                .product-title {
                    font-size: clamp-font(12px, 12px);
                    line-height: calc(20/14);
                    text-transform: initial;
                    font-family: var(--font-family-body), sans-serif;
                    margin-bottom: calc-rem(5px);
                    font-variation-settings: var(--font-variation-settings-extended-bold);
                    @include truncate(2);
                }

            }


        }

        .order-total-price {
            display: flex;
            align-items: flex-end;
            flex-direction: column;
            gap: 0;

            div{
                display: flex;
                font-size: clamp-font(12px, 12px);
                font-variation-settings: var(--font-variation-settings-medium);

                &.total-price{
                    margin-top: calc-rem(20px);
                    font-size: clamp-font(16px, 22px);
                }
            }

        }

    }

    &__aside {
        border-radius: var(--border-radius);
        margin-top: calc-rem(60px);

        @include media-breakpoint-up(lg) {
            margin-top: 0;
            padding: calc-rem(40px);
            border: calc-rem(1px) solid rgba(var(--color-secondary), .2);
        }

        .title {
            font-size: clamp-font(18px, 18px);
        }

        ul {
            list-style-type: none;
            padding-left: 0;
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            gap: calc-rem(10px);

            & > li {
                display: flex;
                font-size: calc-rem(14px);

                .counter {
                    background: rgba(var(--color-primary));
                    color: rgba(var(--color-white));
                    width: calc-rem(30px);
                    height: calc-rem(30px);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex: none;
                    border-radius: 100%;
                    margin-right: calc-rem(10px);
                }


            }


        }


    }
}
