@import '../global/variables';
@import '../global/mixins';

.thank-you {
  background: linear-gradient(to right, $white 50%, $bg-light-gray 50%);
  @media screen and (max-width: $desktop) {
    background: $white;
  }
  .container {
    max-width: 1560px;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    width: 100%;
    padding: 120px 30px;
    align-items: center;
    justify-content: space-between;
    gap: 100px;
    @media screen and (max-width: $desktop) {
      flex-direction: column;
      padding: 70px 30px;
      height: 100%;
      gap: 60px;
    }
    @media screen and (max-width: $phones-big) {
      flex-direction: column;
      padding: 76px 16px 35px;
      gap: 35px;
    }
  }
  &-column {
    flex: 1;
  }
  &-info {
    max-width: 655px;
    max-height: fit-content;
    @media screen and (max-width: $desktop) and (min-width: $phones-big) {
      text-align: center;
      max-width: 800px
    }
    @media screen and (max-width: $phones-big) {
      padding-bottom: 35px;
      border-bottom: 1px solid $light-blue;
    }
    & > p {
      display: none;
    }
    h1 {
      font: normal 700 44px / 1.2em $font-almoni;
      color: $dark-blue;
      margin: 0;
      display: flex;
      align-items: flex-end;
      img {
        object-fit: contain;
        margin: 0 15px 15px 0;
      }
      @media screen and (max-width: $full-hd) {
        font-size: 38px;
      }
      @media screen and (max-width: $desktop) {
        justify-content: center;
        img {
          margin-bottom: 11px;
        }
      }
      @media screen and (max-width: $phones-big) {
        font-size: 22px;
        justify-content: start;
        img {
          margin-bottom: 6px;
        }
      }
    }
    div {
      font: normal 400 25px / 1.2em $font-almoni;
      color: $dark-gray;
      padding: 35px 0 100px;
      @media screen and (max-width: $full-hd) {
        font-size: 22px;
      }
      @media screen and (max-width: $desktop) {
        padding: 35px 0;
      }
      @media screen and (max-width: $phones-big) {
        font-size: 14px;
        padding: 12px 0 20px;
      }
    }
    a {
      @media screen and (max-width: $desktop) and (min-width: $phones-big) {
        margin: 0 auto;
      }
    }
    .woocommerce-order-details, .woocommerce-customer-details {
      display: none;
    }
  }
}