/* ============================================================
   Блок регистрации
   ============================================================ */

.form-section {
  background: url('/images/fermenkol/bg_order.png') center / cover no-repeat;
  min-height: clamp(720px, 56.4vw, 1082px);
  overflow: hidden;
  padding-block: clamp(48px, 4.8vw, 92px);
  position: relative;
  padding-top: 54px;

  @media (min-width: $bp-1440) {
    padding-top: 91px;
  }

  &__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 5vw, var(--container-padding));
    text-align: center;
  }

  &__title {
    color: var(--clr-text-inverse);
    font-family: var(--font-manrope);
    font-size: clamp(1.75rem, 4.5vw, 3.5rem);
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight-12);
    margin: 0 auto;
    max-width: unset;
    padding-inline: var(--container-padding);
  }

  &__title-line {
    color: #fff;
    display: block;
    font-family: var(--font-manrope);
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: var(--font-size-56);
    font-style: normal;
    font-weight: 400;
    letter-spacing: clamp(-0.08em, -0.12vw, -2.2px);
    line-height: 1.08;
    margin-left: clamp(-4px, -0.4vw, -6px);

    &--register {
      font-weight: var(--font-weight-semibold);
      letter-spacing: clamp(-0.05em, -0.08vw, -1.49px);
      margin-left: clamp(-4px, -0.55vw, -10px);
    }

  }

  &__subtitle {
    color: #fff;
    font-family: var(--font-manrope);
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: var(--font-size-56);
    font-style: normal;
    font-weight: 400;
    letter-spacing: clamp(-0.04em, -0.06vw, -1.1px);
    line-height: 1.08;
    margin: 45px auto 0;
    max-width: 1258px;
    padding-inline: var(--container-padding);
    text-align: center;
  }

  /* Переносы в подписи: только на узкой колонке, по той же идее, что и в giveaway. */
  &__subtitle-br-490 {
    display: none;

    @media (width <= #{$features-mq-narrow}) {
      display: block;
    }
  }

  &__title-highlight {
    box-decoration-break: clone;
    color: var(--clr-text-inverse);
    display: inline-block;
    font-weight: var(--font-weight-medium);
    margin-left: 0.15em;
    position: relative;
    z-index: 0;

    &::before {
      background: #02a8a8;
      content: '';
      inset: 0;
      position: absolute;
      transform: rotate(-1.412deg);
      z-index: -1;
    }

    /* stylelint-disable-next-line order/properties-alphabetical-order -- вендорное свойство идет после стандартного */
    -webkit-box-decoration-break: clone;
  }

  &__ornament {
    display: flex;
    justify-content: center;
    margin-block: clamp(24px, 2.25vw, 39px);
  }

  &__ornament-img {
    display: block;
    height: auto;
    max-width: 79px;
    width: 100%;
  }

  &__brand {
    bottom: 40px;
    height: 17px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 125px;

    @media (max-width: 1140px) {
      bottom: 20px;
    }
  }

  /* На мобильных экранах поля и кнопка остаются крупными и удобными для нажатия. */
  @media (max-width: $bp-md) {
    &__title {
      font-size: 32px;
      line-height: 32px;
    }

    &__title-line {
      font-family: var(--font-bigcity);
      font-size: 32px;
      font-weight: 400;
      letter-spacing: -0.8px;
      line-height: 32px;
      margin-left: 0;

      &--register {
        font-weight: 400;
        letter-spacing: -0.8px;
        margin-left: 0;
      }
    }

    &__subtitle {
      font-family: var(--font-bigcity);
      font-size: 32px;
      font-weight: 400;
      letter-spacing: -0.8px;
      line-height: 32px;
    }

    &__title-highlight {
      font-weight: 400;
    }

    &__ornament-img {
      max-width: 42px;
    }
  }

  @media (width <= #{$features-mq-narrow}) {
    padding-bottom: 141px;

    &__brand {
      bottom: 12px;
      width: 76px;
    }

    &__title {
      padding-inline: 0;
    }

    &__subtitle {
      margin-top: 33px;
    }

    &__ornament {
      margin-bottom: 59px;
    }

    .form--webinar .form__note.form__note--webinar {
      /* Стили заметки под кнопкой: вложены в .form-section, чтобы перебить правила формы. */
      color: rgba(255, 255, 255, 0.7);
      font-family: var(--font-manrope);
      font-size: 5px;
      font-style: normal;
      font-weight: 400;
      line-height: 120%;
      text-align: center;

      /* stylelint-disable order/properties-alphabetical-order, property-no-unknown */
      font-feature-settings: 'liga' off, 'clig' off;
      leading-trim: both;
      text-edge: cap;
      /* stylelint-enable order/properties-alphabetical-order, property-no-unknown */
    }
  }
}

/* Общая разметка формы и состояния отправки. */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);

  &__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  &__submit {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    position: relative;
    transition: background-color var(--transition-base);
    width: 100%;

    &:disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }
  }

  &__submit-loader {
    animation: spin 0.6s linear infinite;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-full);
    border-top-color: var(--clr-white);
    display: none;
    height: 20px;
    width: 20px;
  }

  &__submit--loading .form__submit-text {
    display: none;
  }

  &__submit--loading .form__submit-loader {
    display: block;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Форма вебинара: поля, состояния и кнопка отправки. */
.form--webinar {
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-inline: auto;
  max-width: 520px;

  .form__group--field {
    gap: 0.35rem;
    position: relative;
  }

  .form__group input {
    background-color: var(--clr-white);
    border: 1px solid #353535;
    border-radius: 100px;
    box-sizing: border-box;
    color: var(--clr-text-primary);
    display: block;
    font-family: var(--font-manrope);
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: var(--font-size-28);
    font-style: normal;
    font-weight: 400;
    height: clamp(52px, 12vw, 60px);
    leading-trim: both;
    line-height: 20px;
    margin-inline: auto;
    max-width: min(100%, 380px);
    padding: 0 clamp(20px, 5vw, 40px);
    text-align: left;
    text-edge: cap;
    width: 100%;

    &::placeholder {
      color: rgba(53, 53, 53, 0.5);
      text-align: left;
    }

    &:focus {
      border-color: var(--clr-primary);
      outline: 2px solid rgba(2, 168, 168, 0.45);
      outline-offset: 2px;
    }

  }

  .form__input--error {
    border-color: #ffb4b4;

    &:focus {
      outline-color: rgba(255, 180, 180, 0.6);
    }
  }

  .form__error {
    color: #ffc9c9;
    font-size: var(--font-size-xs);
    left: 0;
    position: absolute;
    text-align: center;
    top: calc(100% + 4px);
    width: 100%;
  }

  .form__submit--webinar {
    background-color: var(--clr-primary);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-input);
    color: var(--clr-text-inverse);
    font-family: var(--font-manrope);
    font-size: clamp(0.9375rem, 2.8vw, var(--font-size-28));
    font-weight: var(--font-weight-regular);
    height: clamp(52px, 12vw, 60px);
    letter-spacing: 0.02em;
    line-height: 1;
    margin: auto;
    margin-top: 18px;
    max-width: 380px;
    min-height: 52px;
    padding: var(--pad-input-y) var(--pad-input-x);
    text-align: center;
    text-transform: uppercase;

    &:hover:not(:disabled) {
      background-color: color-mix(in srgb, var(--clr-primary) 88%, #000);
      box-shadow: none;
    }
  }

  .form__note--webinar {
    color: var(--clr-text-on-form-note);
    font-size: var(--font-size-10);
    line-height: var(--leading-tight-12);
    margin-top: -10px;
    max-width: 24rem;
    text-align: center;
  }

  @media (max-width: $bp-md) {
    gap: 15px;

    .form__group input {
      font-size: 16px;
      height: 52px;
      line-height: 16px;
      max-width: 310px;
      padding-left: 10px;
      padding-right: 10px;
    }

    .form__submit--webinar {
      font-size: 28px;
      height: 60px;
      letter-spacing: 0;
      line-height: 28px;
      max-width: 307px;
      padding: 20px 0;
    }
  }

  @media (width <= #{$features-mq-narrow}) {
    &.form {
      max-width: 310px;
      width: 100%;
    }

    .form__group input {
      padding-left: 25px;
    }

    .form__submit--webinar {
      margin-top: 15px;
    }
  }
}