@use '../consts.scss' as consts;
@use '../colors.scss' as colors;
@use '../mixins.scss' as mixins;


.orderSummary {
    display: flex;
    gap: 50px;
    
    @include mixins.media('md'){
        flex-direction: column;
    }

    & > .right,  & > .left  {
        & > .title {
            display: flex;
            column-gap: consts.$gap-tiny;
            justify-content: space-between;

            & > .bold {
                @include mixins.text('text-3')
            }
        }
    }

    & > .left {
        position: relative;
        width: 100%;

        &::after {
            position: absolute;
            content: " ";
            top: 0;
            bottom: 0;
            right: -25px;
            width: 1px;
            background-color: consts.$schema-text-accent;
            
            @include mixins.media(md){
                display: none;
            }
        }

        & > .sections {
            display: flex;
            flex-direction: column;
            row-gap: consts.$gap-medium;

            & > .section {
                display: flex;
                flex-direction: column;
                row-gap: consts.$gap-medium;
    
                & > .head {
                    display: flex;
                    justify-content: space-between;
                    gap: consts.$gap-tiny;

                    @include mixins.text("text-3");
                }

                & > .content {
                    display: flex;
                    gap: consts.$gap-base;
                    flex-direction: column;

                    & > .fields {
                        display: grid;
                        grid-template-columns: repeat(2, 1fr);
                        gap: consts.$gap-base;

                        @include mixins.media(sm){
                            display: flex;
                            flex-direction: column;
                        }

                    }

                    .field {
                        display: flex;
                        flex-direction: column;
                        gap: consts.$gap-tiny;

                        & > .label {
                            color: consts.$schema-text-secondary;
                            @include mixins.text("text-5");
                        }

                        & > input, & > textarea {
                            all: unset;
                            padding: 20px;
                            outline: 1px solid #E1DFDB;
                            @include mixins.text("text-4");
                        }

                        & > .help {
                            @include mixins.text("text-5");

                            height: 1em;
                        }
                    }


                    .checkboxWithLabel {
                        display: flex;
                        gap: consts.$gap-base;
                        padding: consts.$gap-base;
                        align-items: center;
                        & > .label {
                            display: flex;
                            flex-direction: column;
                            row-gap: 5px;

                            @include mixins.text('text-5-bold');
                            margin-bottom: 0;
                            cursor: pointer;
                            user-select: none;

                            .--secondary {
                                color: consts.$schema-text-secondary;
                                @include mixins.text('text-default');
                            }
                        }

                        &:has(.checkbox:checked) {
                            outline: 2px solid colors.$color-gold;
                        }
                        & > .checkbox {
                            all: unset;
                            position: relative;
                            border-radius: 50%;
                            width: 22px;
                            height: 22px;
                            outline: 1px solid #E1DFDB;

                            &:checked {
                                &::before {
                                    content: " ";
                                    position: absolute;
                                    top: calc(50% - 5px);
                                    right: calc(50% - 5px);
                                    width: 10px;
                                    height: 10px;
                                    border-radius: 50%;
                                    background-color: colors.$color-gold;
                                }
                            }
                        }

                    }
                }
            }
        }

    }

    & > .right {
        display: flex;
        flex-direction: column;
        row-gap: consts.$gap-medium;
        width: 423px;

        @include mixins.media(lg){
            width: 317px;
        }

        @include mixins.media(md){
            width: unset;
        }
        
        & > .prices {
            display: flex;
            flex-direction: column;
            row-gap: consts.$gap-tiny;

            & > .priceLine {
                display: flex;
                column-gap: consts.$gap-tiny;
                justify-content: space-between;
                align-items: baseline;
                
                & > .price {
                    @include mixins.text('text-4-bold');

                    &.--total {
                        @include mixins.text('text-1');

                    }
                }
            }
        }
    
    }


}