.m-subscribe-section {
  padding: 50px 0;
  background-color: var(--secondary-subtle-color);

  @include respond-to('medium') {
    padding: 80px 0;
  }
}

.m-subscribe-section__content {
  @include respond-to('medium') {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.m-subscribe-section__text {
  text-align: center;
  margin-bottom: 30px;

  @include respond-to('medium') {
    flex: 1;
    text-align: left;
    padding-right: 75px;
    margin-bottom: 0;
  }
}

.rtl {
  .m-subscribe-section__text {
    @include respond-to('medium') {
      text-align: right;
      padding-right: 0;
      padding-left: 75px;
    }
  }
}

.m-subscribe-section__title {
  color: var(--titles-color);
  letter-spacing: 0.3px;
  line-height: 1.3;
  font-size: 1.250rem;
  font-weight: 600;
  margin: 0 0 20px;

  @include respond-to('medium') {
    letter-spacing: 0.3px;
    font-size: 1.5rem;
    margin-bottom: 15px;
  }
}

.m-subscribe-section__description {
  letter-spacing: 0.2px;
  line-height: 1.4;

  @include respond-to('medium') {
    font-size: 1.125rem;
  }
}

.m-subscribe-section__form {
  @include respond-to('medium') {
    width: 300px;
    margin: 0 auto;
  }
}

.m-subscribe-section__container {
  &.loading {
    .m-button {
      pointer-events: none;
      @extend .loading;
    }
  }

  &.success {
    .m-subscribe__success {
      display: block;
    }

    .m-subscribe__invalid,
    .m-subscribe__error,
    .m-subscribe__form {
      display: none;
    }
  }

  &.invalid {
    .m-subscribe__invalid {
      display: block;
    }
  }

  &.error {
    .m-subscribe__error {
      display: block;
    }

    .m-subscribe__form {
      margin-bottom: 20px;
    }
  }

  .m-subscribe__success,
  .m-subscribe__invalid,
  .m-subscribe__error {
    display: none;
  }
}

.m-subscribe__success_icon {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto 25px;
}

.m-subscribe__error {
  text-align: center;
}