@import '~styles/mixins';
@import '~styles/common';

.checkout-step1 {
  .tips {
    margin-top: 30px;
  }

  .form-wrapper {
    .form {
      max-width: 500px;
    }
  }

  .detail-wrapper {
    margin-top: 30px;
  }
  .detail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 30px;
    background-color: $color-grey-background;
    border-radius: 50px;

    @include tablet {
      border-radius: 4px;
      justify-content: space-between;
      hr {
        display: none;
      }

      p {
        margin: 10px;
      }
    }

    @include phone {
      display: block;
    }

    .item {
      display: flex;
      align-items: center;
      @include tablet {
        margin: 5px;
      }
      @include phone {
        margin: 0 0 20px 0;

        &:nth-last-child(1) {
          margin: 0;
        }
      }
    }

    .green {
      font-weight: 700;
    }

    .label {
      font-weight: 700;
      margin-right: 10px;
    }

    p {
      margin: 0;
      padding: 0;
    }

    hr {
      width: 2px;
      height: 20px;
      border: 0;
      background-color: $color-grey;
    }
  }
}
