@use '../abstract' as *;

/*----------------------------------------*/
/*  23. DOMAIN CSS START
/*----------------------------------------*/

.domain{
    &__mt--175{
        margin-top: -175px;
    }
    &__wrapper{
        background: $white;
        @include box-shadow(0px 20px 40px rgba(28, 50, 109, 0.07));
        @include border-radius(5px);
        padding: 65px 20px 55px;
    }
    &__title{
        font-size: 28px;
        font-weight: 700;
        color: $black-2;
        margin-bottom: 3px;
        & span{
            color: $d-blue-4;
        }
    }
    &__content{
        & > p{
            margin-bottom: 35px;
        }
    }
    &__form{
        &-input{
            & input{
                width: 100%;
                height: 70px;
                border: 1px solid $border-2;
                padding-left: 140px;
                padding-right: 170px;
                @include border-radius(5px);
                @media #{$xs}{
                    padding: 0 30px;
                }
                &::placeholder{
                    color: $d-text-1;
                }
            }
            &-2{
                & input{
                    @include box-shadow(0px 30px 30px rgba(0, 33, 110, 0.2));
                }
            }
        }
        & .nice-select{
            width: 120px;
            height: 70px;
            line-height: 70px;
            text-align: center;
            @include border-radius(5px 0 0 5px);
            background: $grey-9;
            border: none;
            position: absolute;
            top: 0;
            left: 0;
            color: $black-2;

            @media #{$xs}{
                width: 100%;
                position: relative;
                margin-bottom: 10px;
                @include border-radius(5px);
            }
            &::after{
                right: 20px;
                top: 55%;
                width: 0; 
                height: 0; 
                border: none;
                border-left: 4px solid transparent;
                border-right: 4px solid transparent;
                border-top: 4px solid $d-text-1;
                margin-top: -7px;
                @include transform(rotate(0deg));
            }
            & .list{
                width: 100%;
                @include border-radius(5px);
            }
            & .option{
                
                color: $white;
                background: $black;
                &:hover,
                &.selected{
                    background: $d-blue;
                    color: $white;
                }
            }
            &.open{
                &::after{
                    @include transform(rotate(-180deg));
                }
            }
        }
        & button{
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 14px;
            font-weight: 500;
            color: $white;
            background: $d-blue-4;
            height: 55px;
            line-height: 55px;
            text-align: center;
            @include border-radius(5px);
            padding: 0 30px;
            text-transform: uppercase;

            @media #{$xs}{
                position: static;
                margin-top: 10px;
            }
            & i{
                margin-right: 8px;
            }
            &:hover{
                background: $black-2;
            }
        }
    }
    &__price{
        & p{
            font-size: 16px;
            color: $black-2;
            text-transform: capitalize;
            position: relative;
            &::after{
                position: absolute;
                content: '';
                right: 0;
                top: 50%;
                @include transform(translateY(-50%));
                width: 1px;
                height: 15px;
                background: #DEE0E5;
                @media #{$xs}{
                    display: none;
                }
            }
            &:last-child{
                &::after{
                    display: none;
                }
            }
            &:not(:last-child){
                padding-right: 35px;
                margin-right: 35px;

                @media #{$sm}{
                    padding-right: 20px;
                    margin-right: 15px;
                }

                @media #{$xs}{
                    padding-right: 0;
                    margin-right: 0;
                }
            }
            & span{
                text-transform: uppercase;
                font-weight: 500;
                margin-left: 15px;
                position: relative;

                &::after{
                    position: absolute;
                    content: '';
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 2px;
                    background: $black-2;
                }
            }
        }
        &-2{
            & p{
                color: $white;
                & span{
                    &::after{
                        background: $white;
                    }
                }
            }
        }
    }
}