/**
 * Fluent Forms в облике Vira Skills.
 *
 * Конструктор рисует формы в своём нейтральном стиле — на нашем сайте это
 * выглядит вставкой из другого продукта. Здесь форма приводится к языку школы:
 * ember-акцент, Oswald на кнопке, те же скругления и линии, что у карточек.
 *
 * 🔴 Имя файла и handle начинаются с «fluentform» намеренно. Плагин лендингов
 * (blank-html-landing) срезает на файловых лендингах всё чужое оформление и
 * оставляет только стили конструкторов форм — по меткам из bhl_form_style_allow().
 * Переименуешь во что-то вроде vs-forms.css — стиль исчезнет ровно на лендингах,
 * а в остальных местах останется, и причина будет неочевидной.
 *
 * Переменные ниже дублируют :root темы: на файловых лендингах style.css темы
 * срезан, и без запасных значений форма осталась бы без цвета и без шкалы.
 * Числа берутся из BRAND/DESIGN-SYSTEM.md (§3.2 шкала и пол кегля, §3.3 шаг
 * сетки и брейкпоинты, §4.1 кнопка, §4.3 поле), а не подбираются здесь.
 */

.fluentform {
  --vs-accent: #E8590C;
  --vs-accent-ink: #C24500;
  --vs-text: #1A1A1A;
  --vs-text-muted: #57606A;
  --vs-line: #D8D2C7;
  --vs-r: 8px;

  --vs-sp-1: 8px; --vs-sp-2: 16px; --vs-sp-3: 24px;
  --vs-fs-base: 16px;   /* 🔒 пол кегля текста */
  --vs-fs-btn: 19px;    /* §4.1: 19px bold, иначе AA не проходит */

  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color: var(--vs-text);
}

/* Подписи полей */
.fluentform .ff-el-input--label label {
  font-weight: 600;
  font-size: var(--vs-fs-base);
  color: var(--vs-text);
  margin-bottom: var(--vs-sp-1);
}

.fluentform .ff-el-input--label.ff-el-is-required label:after {
  color: var(--vs-accent-ink);
}

/* Поля ввода */
.fluentform .ff-el-form-control {
  font-family: inherit;
  font-size: var(--vs-fs-base); /* ниже 16 — Safari на телефоне зумит страницу */
  line-height: 1.6;
  min-height: 48px;             /* §4.3 */
  padding: var(--vs-sp-1) var(--vs-sp-2);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-r);
  background: #fff;
  color: var(--vs-text);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.fluentform .ff-el-form-control::placeholder {
  color: var(--vs-text-muted);
  opacity: .75;
}

.fluentform .ff-el-form-control:focus {
  border-color: var(--vs-accent);
  box-shadow: 0 0 0 3px rgba(232, 89, 12, .18);
  outline: none;
}

/* Галочка согласия — крупнее обычного: по ней человек принимает решение,
   и промахнуться мимо неё пальцем на телефоне быть не должно. */
.fluentform .ff-el-form-check {
  margin-top: var(--vs-sp-1);
}

.fluentform .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: var(--vs-sp-1);
  min-height: 44px;             /* §7: тач-цель — вся подпись целиком */
  font-size: var(--vs-fs-base);
  line-height: 1.6;
  color: var(--vs-text);
  cursor: pointer;
}

.fluentform .ff-el-form-check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--vs-accent);
  cursor: pointer;
}

/* Кнопка отправки */
.fluentform .ff-btn-submit,
.fluentform .ff_submit_btn_wrapper button {
  font-family: 'Oswald', Impact, 'Arial Narrow', system-ui, sans-serif;
  font-weight: 600;
  font-size: var(--vs-fs-btn);
  letter-spacing: .02em;
  text-transform: none;
  min-height: 48px;
  padding: 14px 28px;           /* §4.1 дословно */
  width: 100%;                  /* с 360 вверх; с брейкпоинта 640 — по тексту */
  border: 0;
  border-radius: var(--vs-r);
  background: var(--vs-accent);
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, transform .05s ease;
}

.fluentform .ff-btn-submit:hover,
.fluentform .ff_submit_btn_wrapper button:hover {
  background: var(--vs-accent-ink);
}

.fluentform .ff-btn-submit:active {
  transform: translateY(1px);
}

.fluentform .ff-btn-submit:focus-visible {
  outline: 3px solid var(--vs-text);   /* §4.1: 3px solid #1A1A1A */
  outline-offset: 3px;
}

/* Ошибки проверки */
.fluentform .ff-el-is-error .ff-el-form-control {
  border-color: #C0392B;
}

.fluentform .text-danger,
.fluentform .error.text-danger {
  font-size: var(--vs-fs-base);
  color: #C0392B;
  margin-top: var(--vs-sp-1);
}

/* Сообщение после отправки */
.ff-message-success {
  padding: var(--vs-sp-3);
  border: 1px solid var(--vs-line);
  border-left: 4px solid var(--vs-accent);
  border-radius: var(--vs-r);
  background: #F7F4EE;
  color: var(--vs-text);
  font-size: var(--vs-fs-base);
  line-height: 1.6;
}

/* Тесно стоящие поля разводим на воздух — форма читается сверху вниз */
.fluentform .ff-t-container {
  gap: var(--vs-sp-2);
}

.fluentform .ff-el-group {
  margin-bottom: var(--vs-sp-2);
}

/* Кнопка во всю ширину — состояние по умолчанию (§3.3: проектируем с 360
   вверх). Было наоборот, через самодельный брейкпоинт 480px, которого
   в системе нет. */
@media (min-width: 640px) {
  .fluentform .ff-btn-submit,
  .fluentform .ff_submit_btn_wrapper button {
    width: auto;
  }
}