@mixin white-block-bg {
  padding: 0 15px;
}

@mixin radio-styles($margin-bottom: 1rem) {
  @include primary-text;
  margin-bottom: $margin-bottom;

  input[type='radio']:checked + ins + span {
    font-weight: bold;
  }

  .rbn {
    @include primary-text;
  }
}

.your-details {
  background-color: $gray-bg;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;


  &__help,
  &__add {
    &-wrap {
      @include white-block-bg;
      display: none;

      .title {
        &-help {
          font-size: 1.125rem;
          padding-left: 0;
          margin-bottom: 1.25rem;
        }
      }

      .form-row__error {
        padding-left: 0;
      }
    }

    &-inner {
      padding-left: 30px;

      &-wrap {
        display: none;
      }

      .form-row__label {
        padding-left: 0;
      }

      .rbn {
        &:first-child {
          padding-right: 10%;
        }
      }
    }

    & > .form-row__label {
      padding-left: 0;
      margin-bottom: 1.25rem;
    }

    &-radio {
      @include radio-styles;
      margin-bottom: 1rem;

      &__last {
        @include radio-styles(0);

        &-sub {
          @include radio-styles(0);
          margin-bottom: 0;
        }
      }

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

  .wickes-installed,
  .kitchen-bathroom,
  .other-enquiries,
  .store-enquiry {
    display: none;
  }

  &__personal {
    &-title {
      font-size: 1.125rem;
      font-weight: 500;
    }
  }

  &__add {
    @include white-block-bg;

    .form-row__label {
      margin-bottom: 10px;

      &__sub-label {
        margin-top: 10px;
      }
    }

    &-radio {
      margin-bottom: 0;

      .rbn {
        &:first-child {
          padding-right: 10%;
        }
      }
    }

    &-title {
      font-size: 1.125rem;
      font-weight: 500;
    }
  }

  .error-msg {
    margin-top: 5px;
    color: $red;
    display: none;
  }
}

.details-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

.row-time {
  margin-top: 40px;

  &.form-row_convenient-time {
    display: none;
  }
}

.row-project {
  margin-top: 30px;
}

.row-time,
.row-project {
  .form-row__label {
    margin-bottom: 20px;
  }
}

.row-time,
.row-project {
  .form-row__field {
    @include make-col(6);
    margin-bottom: 10px;
  }

  .form-row__field--smaller {
    @include make-col(4);
  }
}

@include media-breakpoint-up(lg) {
  .your-details {
    &__wrap {
      @include make-col(12);
      padding: 0;

      .your-details {
        padding-left: 120px;
        padding-right: 120px;

        .btn-submit {
          width: 160px;
        }
      }
    }
  }
}

@include media-breakpoint-down(lg) {
  .your-details {
    padding-left: 60px;
    padding-right: 60px;

    .details-wrap {
      gap: 60px;
    }
  }
}

@include media-breakpoint-only(md) {
  .your-details {
    .form-row__field:nth-child(2n-1) {
      padding-left: 0;
    }
  }
}

@include media-breakpoint-down(md) {
  .your-details {
    padding-left: 30px;
    padding-right: 30px;

    .details-wrap {
      gap: 30px;

      .form-row__col-btn {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }
  }
}

@include media-breakpoint-down(sm) {
  .page_contact-us {
    .page-header {
      margin-bottom: 10px;
      order: 1;

      &__title {
        margin-bottom: 0;
      }

      &__message {
        display: none;
      }
    }

    .left-aside {
      margin-bottom: 60px;
      order: 2;
    }

    .content {
      order: 3;
    }

    .your-details {
      padding-left: 15px;
      padding-right: 15px;

      .warning-required {
        margin-top: 0;
      }

      .details-wrap {
        gap: 0;
      }

      .form-row {
        padding: 0;

        & + .your-details__help-wrap {
          padding: 0 15px;
        }
      }
    }

    .row-time {
      .form-row__field {
        &:last-child {
          margin-top: 30px;
        }
      }
    }
  }

  .your-details {
    padding-bottom: 0;

    .details-wrap {
      grid-template-columns: 1fr;
      gap: 0;

      .form-row {
        padding: 0;
      }

      .row-project {
        margin-top: 15px;
      }
    }
  }

  .row-time,
  .row-project {
    .form-row__field {
      padding-right: 0;
    }
  }

  .form-row__action {
    margin-top: 20px;
  }
}

@media (max-width: 360px) {
  .row-project {
    .form-row__field {
      flex: 0 0 100%;
      max-width: none;
    }
  }
}