$form-hor-padding-sm: 15px;
$form-hor-padding: 15px;

button,
input[type='button'],
input[type='reset'],
input[type='file'],
input[type='submit'] {
    -webkit-appearance: none;
    cursor: pointer;
}

.contact-form {
    width: 100%;
    max-width: 580px;
    margin: 0 0 56px;
    font-size: 16px;
    line-height: 1;

    .wpcf7-response-output {
        margin-left: 0;
        margin-right: 0;
        border-color: currentColor;
        padding: 20px;
        &.wpcf7-validation-errors {
            color: $cr-error;
        }
        &.wpcf7-mail-sent-ok {
            color: $accent-color;
        }
    }

    .select2-selection__placeholder {
        font-weight: 400;
        color: #fff !important;
        cursor: pointer;
    }

    .error {
        .select2-selection__placeholder {
            color: $cr-error !important;
        }
    }

    .select2-selection.select2-selection--single {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        height: 82px;
        min-width: 100%;
        background: transparent;
        border: none;
        border-radius: 0;
        outline: none;
        padding: 25px;
    }

    .select2-selection__arrow {
        display: none;
    }

    .select2-selection__rendered {
        font-weight: 700;
        font-size: 14px;
        color: $cr-brand-primary !important;
        padding-left: 5px !important;
        cursor: pointer;
    }

    .contact-form__select-list .select2-results__option[aria-selected="true"] {
        background-color: #c3c8de !important;
    }

    label {
        @extend %clearfix;
        display: block;
    }
}

.contact-form__intro {
    @include media('<tablet') {
        margin-top: 30px;
        margin-bottom: 50px;
    }
    @include media('>=tablet') {
        margin-bottom: 72px;
    }
    @include media('>=desktop') {
        font-size: 30px;
        line-height: 1.4;
        color: $cr-brand-primary;
        margin-bottom: 172px;
    }
    @include media('<widescreen') {
        padding-right: $side-gutters-sm * 3;
    }
}

.contact-form__content {
    max-width: $container-xs;
}

.contact-form__req-txt {
    @include media('>=tablet') {
        margin-bottom: 40px;
    }
}

.contact-form__ttl {
    text-align: center;
    margin-bottom: 20px;
    @include media('>=desktop') {
        margin-bottom: 55px;
    }
}

.wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 15px;
    position: relative;
    .required-field & {
        &:after {
            @include ycenter;
            content: '*';
            right: 0;
            color: rgba($font-cr-primary, .2);
            font-size: 16px;
            line-height: 1;
            font-weight: 400;
        }
    }
    &.your-message {
        margin-bottom: 35px;
        @include media('>=tablet') {
            margin-bottom: 55px;
        }
    }
}

.wpcf7-not-valid-tip {
    @include ycenter;
    z-index: 2;
    right: 20px;
    text-indent: -9999px;
    width: 12px;
    height: 12px;
    pointer-events: none;
    &:after {
        content: '!';
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        text-indent: 0;
        text-align: center;
        color: #fff;
        font-size: 8px;
        width: 100%;
        height: 100%;
        line-height: 12px;
        border-radius: 50%;
        background-color: $cr-error;
    }
    .wpcf7-form-control:focus + & {
        display: none;
    }
}

.form-control,
.wpcf7-form-control {
    &:not([type='submit']) {
        @include adaptive-font(16, 13);
        width: 100%;
        height: 50px;
        border: 1px solid #303234;
        font-weight: 400;
        line-height: 40px;
        padding: 0 $form-hor-padding-sm;
        color: $form-txt-color;
        border-radius: 4px;
        background-color: #111316;

        @include media('>=desktop') {
            height: 38px;
        }

        @include placeholder {
            color: rgba($form-txt-color, .5);
        }
        &.wpcf7-not-valid {
            border-bottom-color: $cr-error;
        }
    }
}

textarea.wpcf7-form-control {
    min-height: 80px;
    max-height: 700px;
    width: 100%;
    &:not([type='submit']) {
        line-height: 1.2;
    }
}
select.wpcf7-form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: '';
    &::-ms-expand {
        display: none;
    }
}

.wpcf7-submit {
    @extend .btn-transparency;
}

.select-wrap {
    position: relative;
    &:after {
        @include ycenter;
        margin-top: 5px;
        content: '';
        right: 27px;
        border: solid transparent;
        border-width: 7px 5px;
        border-top-color: $cr-brand-primary;
        pointer-events: none;
        .error {
            border-top-color: $cr-error;
        }
    }
}

select {
    -webkit-border-radius: 0;
}

textarea {
    resize: vertical;
    vertical-align: top;
    overflow: auto;
}

.select2-container {
    font-size: 16px;
    &.select2.select2 {
        &-container {
            display: block;
            width: 100% !important;
        }
    }
    &--default {
        &.select2-container--open{
            .select2-selection {
                &--single {
                    .select2-selection {
                        &__arrow {
                            b {
                                border: 0;
                                border-top: 1px solid $cr-brand-primary;
                                border-right: 1px solid $cr-brand-primary;
                            }
                        }
                    }
                }
            }
        }
    }
    .select2-selection {
        &--single {
            border: 1px solid $border-cr;
            border-radius: 0;
            height: 48px;
            outline: 0;
            @include media('<tablet', 'screen') {
                height: 44px;
            }
            .select2-selection {
                &__rendered {
                    color: $font-cr-primary;
                    outline: 0;
                }
                &__arrow {
                    width: 17px;
                    right: 15px;
                    height: auto;
                    top: 0;
                    bottom: 0;
                    b {
                        border: 0;
                        border-top: 1px solid $cr-brand-primary;
                        border-right: 1px solid $cr-brand-primary;
                        height: 12px;
                        width: 12px;
                        transform: translateY(-50%) rotate(135deg);
                        margin: -2px 0 0 0;
                        top: 50%;
                        left: 2px;
                    }
                }
            }
        }
    }
}

.select2-container:not(.select2) {
    z-index: 100;
    .select2-dropdown {
        border: 1px solid $border-cr;
        border-radius: 0;
        &--below {
            margin-top: -1px;
        }
        &--above {
            margin-top: 1px;
        }
        .select2-search {
            display: none;
        }
        .select2-results {
            font-size: 18px;
            &__option {
                padding: 10px 15px;
                line-height: 28px;
                &--highlighted[aria-selected],
                &[aria-selected=true] {
                    color: #fff;
                    background: $cr-brand-primary;
                }
            }
        }
    }
}

input[type="checkbox"] {
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    visibility: hidden;
    & + label {
        display: inline-flex;
        &:before {
            @include anim;
            content: '';
            margin: 2px 8px 0 0;
            display: inline-block;
            flex: 0 0 1em;
            width: 1em;
            height: 1em;
            border: 1px solid #e5e5e5;
            background-color: #fff;
        }
    }
    &:checked {
        & + label {
            color: $cr-brand-primary;
            &:before {
                background-color: $cr-brand-primary;
                box-shadow: inset 0 0 0 3px #fff;
            }
        }
    }
}

input[type="radio"] {
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    position: absolute;
    visibility: hidden;
    & + label {
        display: inline-flex;
        &:before {
            @include anim;
            content: '';
            margin: 2px 8px 0 0;
            display: inline-block;
            border-radius: 50%;
            flex: 0 0 1em;
            width: 1em;
            height: 1em;
            border: 1px solid #e5e5e5;
            background-color: #fff;
        }
    }
    &:checked {
        & + label {
            color: $cr-brand-primary;
            &:before {
                border-color: $cr-brand-primary;
                background-color: $cr-brand-primary;
                box-shadow: inset 0 0 0 3px #fff;
            }
        }
    }
}

