/* ===========================================================================
   ff-cta-form: форма заявки для фулфилмента
   =========================================================================== */

.ff-cta-form {
  /* Размеры и позиционирование */
  position: relative;
  width: 100%;
  max-width: var(--page-width);
  margin: 180px auto 0;
  height: 952px;

  /* Стиль */
  background-color: var(--bg-dark-primary);
  border: 1px solid var(--border-main-quarteary);
  border-radius: var(--radius-xxxl);

  /* Тени (из Figma) */
  box-shadow: var(--shadow-main);

  /* Оверфлоу для абс. позиционирования */
  overflow: hidden;
}

/* Фоновое изображение */
.ff-cta-form__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

/* Контент (flex контейнер над фоном) */
.ff-cta-form__content {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-xl);
  gap: 24px;
  padding: clamp(60px, 6.25vw, 120px) clamp(50px, 5.2vw, 100px);
  height: 100%;
}

/* Левая часть: текстовое содержимое */
.ff-cta-form__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  gap: 16px;
  flex: 0 0 clamp(450px, 44.5vw, 855px);
  color: var(--text-constant-light);
}

.ff-cta-form__badge {
  /* Переиспользуем .badge--on-dark из base.css */
  width: fit-content;
}

.ff-cta-form__title {
  /* Переопределяем размер заголовка на 64px по макету */
  color: var(--text-constant-light);
  margin: 0;
  max-width: 855px;
  font-size: clamp(32px, 3.33vw, 64px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.ff-cta-form__lead {
  /* Используем .t-lead для 24px */
  color: var(--text-constant-light);
  margin: 0;
  max-width: 855px;
  line-height: 1.5;
}

/* Форма */
.ff-cta-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  gap: 16px;
  flex: 1 1 clamp(450px, 44vw, 841px);
  padding: 32px;
  background: var(--bg-main);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-l);
}

/* На экране успеха карточка перестаёт растягиваться по высоте секции
   и садится по содержимому — как нарисовано в макете (841x431). */
.ff-cta-form__form.is-form-sent {
  align-self: flex-start;
}

/* Сетка полей (2 колонки) */
.ff-cta-form__fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-l);
  gap: 16px;
  width: 100%;
}

.ff-cta-form__fields .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 91px;
}

.ff-cta-form__fields .field__label {
  font-size: 16px;
}

/* Переопределение height для полей формы */
.ff-cta-form__fields .field__control {
  height: 56px;
  padding-inline: 16px;
  border-radius: 16px;
}

/* Letter-spacing для select элементов */
.ff-cta-form__fields select.field__control {
  letter-spacing: 0.01em;
}

/* Разделитель */
.divider--light {
  border-color: rgba(255, 255, 255, 0.3);
  margin: 0;
}

/* Футер формы: чекбокс + кнопка */
.ff-cta-form__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ff-cta-form__footer .checkbox {
  align-items: center;
  gap: var(--space-xxxs);
  font-size: var(--scale-03);
  color: var(--text-constant-dark);
  font-weight: 500;
}

.ff-cta-form__footer .checkbox__box {
  flex: none;
  width: 20px;
  height: 20px;
}

/* Переопределение размера и стиля кнопки */
.ff-cta-form__form .btn {
  height: 61px;
  font-size: var(--scale-05);
  margin-top: 0;
}

/* =========================================================================
   Адаптив
   ========================================================================= */

/* Промежуточные ширины: раскладка десктопная — текст слева, форма справа
   (в колонку она уходит только на планшете, ≤1199). Переопределений flex тут
   больше нет: базовая формула непрерывна от 1200 до 1920, иначе на границе
   1440 получался обрыв. */
@media (max-width: 1440px) {
  /* Макетные 952px тут не влезают — высота по содержимому. Паддинги НЕ
     переопределяем: свои 60px вместо клампа давали скачок ширины формы
     на границе 1440 (605 → 535px). */
  .ff-cta-form {
    height: auto;
  }

}

/* Первый ряд — во всю ширину, пока двух колонок не хватает. В нём самые длинные
   подсказки: «Введите ИНН или название компании» (275px) и «Заполнится
   автоматически» (199px). В двух колонках полю достаётся 176px на 1200 и 275px
   только к 1800 — до этой ширины текст обрезался. Во всю ширину на 1200
   выходит 368px. */
@media (min-width: 1200px) and (max-width: 1799px) {
  .ff-cta-form__fields > .field:nth-child(1),
  .ff-cta-form__fields > .field:nth-child(2) {
    grid-column: 1 / -1;
  }
}

/* Планшет малый (1024px) */


/* Мобильный большой (768px) */


/* Мобильный малый (480px) */


/* ============================================================================
   Планшет (≤1024) — узел 534:4776 (768x945): во всю ширину, r20, пад 48/40,
   заголовок 40, лид 16; форма — белая карточка, поля 2 в ряд (312), 
   кнопка «Отправить заявку» 44.
   ============================================================================ */

@media (max-width: 1199px) {
  /* На планшете и ниже раскладка колоночная: текст сверху, форма под ним
     (двухколоночная — только десктоп и промежуточные ширины). Горизонтальный
     паддинг тут целиком даёт сама секция (48/40 по макету), поэтому у контента
     он обнулён: иначе поля складываются дважды — форма сжимается с 686 до 586
     и подсказка «Введите ИНН или название компании» перестаёт влезать. */
  .ff-cta-form__content {
    flex-direction: column;
    padding: 0;
  }

  .ff-cta-form__form,
  .ff-cta-form__text {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  /* Шапка секции в макетах планшета и мобилы — по центру */
  .ff-cta-form__text {
    align-items: center;
    text-align: center;
  }

  .ff-cta-form {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-height: 0;
    height: 945px;
    border-radius: 20px;
    padding: 48px 40px;
    gap: 36px;
  }

  .ff-cta-form__text { gap: 16px; }

  .ff-cta-form__title {
    font-size: 40px;
    line-height: 1.1;
  }

  /* Перенос «...о вашем | фулфилменте» — из десктопного макета */
  .ff-cta-form__title br { display: none; }

  .ff-cta-form__lead {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Перенос после запятой — из десктопного макета; на планшете одна строка */
  .ff-cta-form__lead br { display: none; }

  .ff-cta-form__form {
    width: 100%;
    max-width: none;
    padding: 20px 24px;
    border-radius: 20px;
    gap: 16px;
  }

  .ff-cta-form__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  .ff-cta-form__fields .field {
    width: calc(50% - 8px);
    flex: 0 0 calc(50% - 8px);
  }

  /* Ряд поля в макете 91: отступ 12 СВЕРХУ + подпись 19 + 4 + инпут 56 */
  .ff-cta-form__fields .field {
    gap: 4px;
  }

  .ff-cta-form__fields .field__label {
    font-size: 16px;
    line-height: 1.2;
    padding: 12px 0 0;
  }

  .ff-cta-form__form .btn {
    width: 100%;
    height: 44px;
    min-height: 0;
    padding: 8px 24px;
    border-radius: var(--radius-s);
    font-size: 14px;
    font-weight: var(--weight-400);
    letter-spacing: 0.01em;
  }
}

/* ============================================================================
   Мобилка (≤767) — узел 534:6760 (376x1508): во всю ширину, r20, пад 48/24,
   контент 328, заголовок 32, лид 14, форма карточка с пад 12/16, поля в одну
   колонку, кнопка 44.
   ============================================================================ */

@media (max-width: 767px) {
  .ff-cta-form {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    margin-top: 0;
    height: 1508px;
    border-radius: 20px;
    padding: 48px 24px;
    box-sizing: border-box;
  }

  .ff-cta-form__content {
    flex-direction: column;
    padding: 0;
    gap: 36px; /* зазор контент→форма в макете 36 */
    height: 100%;
  }

  .ff-cta-form__text {
    flex: 0 0 auto;
    gap: 16px;
  }

  .ff-cta-form__badge {
    width: fit-content;
    padding: 8px; /* бейдж макета 42 высотой */
  }

  .ff-cta-form__title {
    font-size: 32px;
    line-height: 1.1;
    margin: 0;
    color: var(--text-constant-light);
    max-width: 100%;
  }

  .ff-cta-form__title br {
    display: none;
  }

  .ff-cta-form__lead {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: var(--text-constant-light);
    max-width: 100%;
  }

  .ff-cta-form__lead br {
    display: none;
  }

  .ff-cta-form__form {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    padding: 12px 16px;
    border-radius: 20px;
    gap: 16px;
  }

  .ff-cta-form__fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .ff-cta-form__fields .field {
    width: 100%;
    flex: 0 0 91px;
    gap: 4px;
  }

  .ff-cta-form__fields .field__label {
    font-size: 16px;
    line-height: 1.2;
    padding-top: 12px;
  }

  .ff-cta-form__fields .field__control {
    height: 56px;
    font-size: 14px;
  }

  .divider--light {
    margin: 0;
    border-color: rgba(255, 255, 255, 0.3);
  }

  .ff-cta-form__footer {
    gap: 12px;
  }

  .ff-cta-form__footer .checkbox {
    font-size: 12px;
  }

  .ff-cta-form__form .btn {
    height: 44px;
    min-height: 0;
    padding: 8px 24px;
    font-size: 14px;
    border-radius: 12px;
  }
}

/* Внутреннее поле полноширинной секции не меньше бокового поля страницы.
   Раз его даёт сама секция, внутренний горизонтальный паддинг контента тут
   обнуляется — иначе поле складывается дважды (на 1200 это было 83 + 62 с
   каждой стороны) и форма сжимается так, что подсказки не влезают. */
@media (min-width: 1200px) and (max-width: 1919px) {
  .ff-cta-form {
    padding-inline: max(var(--page-gutter), 40px);
  }

  /* Раз боковое поле даёт сама секция, внутренний горизонтальный паддинг
     контента обнуляем — иначе поле складывалось дважды (на 1200 это 84 + 62
     с каждой стороны) и форма сжималась так, что подсказки не влезали. */
  .ff-cta-form__content {
    padding-inline: 0;
  }

  /* Обе колонки сжимаемы. С жёсткой (0 0) колонкой текста форма на 1441px
     обрывалась с 680 до 423px: текст рос от vw, а форма добирала остаток.
     Теперь нехватку делят пополам, и ширина формы растёт непрерывно
     от 1200 до 1920. Правка живёт только здесь: на планшете раскладка
     в колонку, а на 1920 базовые правила дают макетные 855 и 841. */
  .ff-cta-form__text {
    flex: 1 1 clamp(450px, 44.5vw, 855px);
    min-width: 0;
  }

  .ff-cta-form__form {
    flex: 1 1 clamp(420px, 44vw, 841px);
    min-width: 0;
  }
}