/* ================================================================
   ds-overlay.css — патч дизайн-системы поверх боевого CSS сайта.
   Не трогает разметку, только дописывает/переопределяет токены и
   добавляет недостающие классы. Должен подключаться ПОСЛЕ
   common.min.css / override.min.css / home.min.css.
   ================================================================ */

/* 1) Канонические токены (перебивают оригинальные :root в common.min.css) */
:root {
  /* Brand: добавляем недостающую ступень --brand-blue-300 */
  --brand-blue-300: #7FB2F4;

  /* Brand orange и blue 500/600/700/800 уже есть и совпадают, не трогаем */

  /* Operational amber — отсутствовал */
  --brand-amber-050: #FFF8E8;
  --brand-amber-100: #FFF1CC;
  --brand-amber-200: #FFE09A;
  --brand-amber-500: #D99212;
  --brand-amber-700: #8C5605;

  /* Ink: дописываем 050/100/200/600 (в боевом нет) */
  --ink-050: #F5F8FB;
  --ink-100: #EBF0F6;
  --ink-200: #D0DCE8;
  --ink-600: #425D78;

  /* Status: на сайте только -600. Дописываем 050/100/500/700 + info-* */
  --success-050: #F1FAF5; --success-100: #EAF6F0; --success-500: #25A365; --success-600: #1A7A4A; --success-700: #0F5A36;
  --warning-050: #FFF8E8; --warning-100: #FFF3DC; --warning-500: #D99212; --warning-600: #A85F00; --warning-700: #7A4500;
  --danger-050:  #FFF4F2; --danger-100:  #FEE8E4; --danger-500:  #E05243; --danger-600:  #C8392B; --danger-700:  #902B20;
  --info-050: #F1F6FE;    --info-100: #DDE9FB;    --info-600: #0553C7;    --info-700: #0442A3;

  /* Domain tags (типы торгов) — на сайте отсутствуют */
  --tag-44fz-bg:       #EBF2FD; --tag-44fz-fg:       #0849B3;
  --tag-223fz-bg:      #EDFAF3; --tag-223fz-fg:      #0F6A3B;
  --tag-property-bg:   #FCE3D3; --tag-property-fg:   #A43E12;
  --tag-commercial-bg: #EEE8FB; --tag-commercial-fg: #4B2ABD;
  --tag-debtor-bg:     #FEE8E4; --tag-debtor-fg:     #8C1F15;
  --tag-msu-bg:        #E8EEF5; --tag-msu-fg:        #394D6A;

  /* Шрифт — главное визуальное изменение: Onest → Unbounded (канон F·04).
     !important нужен потому, что home.min.css и inline critical CSS
     тоже определяют --font-display, а порядок их загрузки не гарантирован
     (preload+onload-swap). */
  --font-display: 'Unbounded', 'Inter', system-ui, sans-serif !important;

  /* Type scale — полная (на сайте hardcoded) */
  --text-display-2xl: 6rem;
  --text-display-xl:  4.5rem;
  --text-display-lg:  3.5rem;
  --text-display-md:  2.75rem;
  --text-h1:          2.25rem;
  --text-h2:          1.75rem;
  --text-h3:          1.375rem;
  --text-h4:          1.125rem;
  --text-lead:        1.25rem;
  --text-body:        0.9375rem;
  --text-body-sm:     0.8125rem;
  --text-caption:     0.75rem;
  --text-mono:        0.8125rem;
  --text-overline:    0.6875rem;

  /* Spacing 4-px база */
  --space-1: 2px;  --space-2: 4px;  --space-3: 8px;  --space-4: 12px;
  --space-5: 16px; --space-6: 20px; --space-7: 24px; --space-8: 32px;
  --space-9: 40px; --space-10: 48px; --space-11: 64px; --space-12: 80px;

  /* Радиусы: фикс --r-xl (на сайте 20, в каноне 22) */
  --r-xl: 22px !important;

  /* Motion — в каноне другие durations и easings */
  --duration-instant: 80ms;
  --duration-fast:    160ms;
  --duration-base:    240ms;
  --duration-slow:    400ms;
  --easing-standard:  cubic-bezier(0.4, 0, 0.2, 1);
  --easing-emphasis:  cubic-bezier(0.2, 0, 0, 1);
  --easing-decel:     cubic-bezier(0, 0, 0.2, 1);
  /* alias --ease-standard оставляем тот, что есть в боевом, чтобы не ломать
     существующие transitions, переопределяем на канонический: */
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);
}

/* 2) OpenType фичи — глобально (канон F·04 §06) */
body {
  font-feature-settings: 'tnum' on, 'liga' on, 'calt' on, 'case' on;
  text-rendering: optimizeLegibility;
}

/* 3) Утилитарные классы доменных тегов (можно проставить в шаблонах) */
.tag, .ds-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  white-space: nowrap;
  font-feature-settings: 'tnum' on, 'case' on;
}
.tag-44fz, .ds-tag.tag-44fz             { background: var(--tag-44fz-bg);       color: var(--tag-44fz-fg); }
.tag-223fz, .ds-tag.tag-223fz           { background: var(--tag-223fz-bg);      color: var(--tag-223fz-fg); }
.tag-property, .ds-tag.tag-property     { background: var(--tag-property-bg);   color: var(--tag-property-fg); }
.tag-commercial, .ds-tag.tag-commercial { background: var(--tag-commercial-bg); color: var(--tag-commercial-fg); }
.tag-debtor, .ds-tag.tag-debtor         { background: var(--tag-debtor-bg);     color: var(--tag-debtor-fg); }
.tag-msu, .ds-tag.tag-msu               { background: var(--tag-msu-bg);        color: var(--tag-msu-fg); }

/* 4) news-tag — стилизуем существующий класс новостных карточек.
   На live-сайте у каждой новости уже есть .news-tag — даём ему
   акцентный pill вместо нынешней "пустой" типографики. */
.news-tag,
.news-card-v2 .news-tag {
  display: inline-flex !important;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  text-transform: uppercase !important;
  background: var(--tag-44fz-bg);
  color: var(--tag-44fz-fg) !important;
  margin-top: 14px;
  align-self: flex-start;
  width: max-content;
}

/* 5) Status callouts — pre-built из канона. Можно использовать классы
   .ds-callout.success/warn/danger/info прямо в шаблонах. */
.ds-callout {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--space-5);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--r-md);
  border-left: 4px solid var(--info-600);
  background: var(--info-050);
  align-items: start;
  margin: var(--space-6) 0;
}
.ds-callout.success { border-color: var(--success-600); background: var(--success-100); }
.ds-callout.warn    { border-color: var(--warning-600); background: var(--warning-100); }
.ds-callout.danger  { border-color: var(--danger-600);  background: var(--danger-100); }
.ds-callout .ico    { font-size: 22px; color: var(--info-600); }
.ds-callout.success .ico { color: var(--success-700); }
.ds-callout.warn    .ico { color: var(--warning-700); }
.ds-callout.danger  .ico { color: var(--danger-700); }
.ds-callout h4 {
  font-family: var(--font-display);
  font-size: var(--text-h4);
  color: var(--ink-1000);
  margin: 0 0 var(--space-2);
  letter-spacing: -.01em;
}
.ds-callout p {
  font-size: var(--text-body-sm);
  color: var(--ink-700);
  line-height: 1.55;
  margin: 0;
}

/* 6) Лёгкая типошкальная коррекция уже сверстанного:
   усиливаем letter-spacing у Display-заголовков (Unbounded шире Onest). */
.hero h1,
.page-title,
.section-title {
  letter-spacing: -.025em;
}

/* 6a) Фиксы для CTA-блоков с центрированным текстом.
   Боевой common.css: `p { text-wrap: pretty }`. На центрированном
   двухстрочном параграфе pretty оставляет 2-ю строку короче 1-й,
   и из-за `text-align:center` это даёт визуальный «ступенчатый» сдвиг.
   Решение — text-wrap: balance: одинаковая длина строк. */
.workflow-cta p,
.cta-hero-body p,
.q-band p,
.section-head p,
.page-lead,
.hero-lead {
  text-wrap: balance;
}

/* 6b) Unbounded имеет более короткий ascender, чем Onest. При том же
   padding-top заголовок визуально «висит в воздухе». Слегка ужимаем
   верхний отступ и подтягиваем h3 вверх.
   !important нужен потому, что home.min.css приходит асинхронно через
   preload-swap и может оказаться в каскаде позже overlay. */
.workflow-cta,
.cta-hero {
  padding-top: 28px !important;
  padding-bottom: 32px !important;
}
.workflow-cta h3,
.cta-hero h3,
.cta-hero-body h3 {
  margin-bottom: 8px !important;
  line-height: 1.15 !important;
}

/* 6c) Универсальный фикс: первый ребёнок CTA-/карточных-/секционных
   блоков не должен иметь верхнего margin. Боевой каскад из legacy app.css
   (Bootstrap-style) местами вешает margin-top на h2/h3/p — это создаёт
   «разрыв» под верхней границей блока. */
.workflow-cta > :first-child,
.cta-hero > :first-child,
.cta-hero-body > :first-child,
.q-band > div > :first-child,
.srv > :first-child,
.news-card > :first-child,
.news-card-v2 > :first-child,
.flow-step > :first-child,
.audience-card > :first-child,
.feature-item > :first-child,
.fee-card > :first-child,
.tariff-card > :first-child,
.case-card > :first-child,
.review-card > :first-child,
.consult-card > :first-child,
.consult-form > :first-child,
.partner-card > :first-child,
.sp-decision-card > :first-child,
.about-card > :first-child,
.mp-tile > :first-child,
section.section > .section-inner > :first-child,
.section-head > :first-child,
.page-hero-inner > :first-child {
  margin-top: 0 !important;
}

/* ────────────────────────────────────────────────────────────
   8) Bitrix24 inline CRM-forms (`.b24-form`).
   На сайте используются стандартные inline-формы Bitrix24
   (loader_40.js). Они вставляют DOM с классами .b24-form-*
   и собственным CSS стандартного «классического» стиля
   (синие плоские поля, серый фон). Без правки выглядят
   чужеродно — приводим к концепции дизайн-системы.

   Все правила с !important: bitrix-style загружается
   асинхронно и может оказаться в каскаде позже overlay.
   Покрывает все формы Bitrix24, не только эту страницу.
   ──────────────────────────────────────────────────────────── */

/* — Переопределяем CSS-переменные Bitrix24 на всех контейнерах формы.
   Bitrix инжектит inline `<style>` вида
   `#b24-{uniqueId} { --b24-primary-color: rgba(0,174,239,1); }`
   и эти переменные задают цвет кнопок, акцентов и фокусов в форме.
   Селектор `[id^="b24-"]` повышает специфичность до атрибутного, чтобы
   победить inline-style id-селектор Bitrix (specificity > 1-0-0 даёт
   нашему правилу с !important шанс). */
.b24-form,
.b24-form [id^="b24-"],
.b24-form-popup,
.b24-window-mounts > [id^="b24-"] {
  --b24-primary-color: var(--brand-orange-500) !important;
  --b24-primary-text-color: #fff !important;
  --b24-primary-hover-color: var(--brand-orange-600) !important;
  --b24-text-color: var(--ink-1000) !important;
  --b24-background-color: var(--surface-card) !important;
  --b24-popup-background-color: var(--surface-card) !important;
  --b24-field-background-color: var(--surface-card) !important;
  --b24-field-focus-background-color: var(--surface-card) !important;
  --b24-field-border-color: var(--border-default) !important;
}

/* — Корневой контейнер формы: карточка как .srv/.q-band — */
.b24-form {
  font-family: var(--font-body) !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  overflow: hidden !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  color: var(--ink-700) !important;
}
.b24-form *,
.b24-form *::before,
.b24-form *::after {
  font-family: var(--font-body) !important;
  box-sizing: border-box !important;
}

/* — Шапка формы: ink-050 фон + Unbounded заголовок — */
.b24-form .b24-form-header {
  background: var(--ink-050) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 24px 32px !important;
}
.b24-form .b24-form-header-title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: var(--text-h3) !important;
  color: var(--ink-1000) !important;
  letter-spacing: -.015em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.b24-form .b24-form-header-description {
  font-size: var(--text-body-sm) !important;
  color: var(--ink-500) !important;
  margin-top: 6px !important;
  line-height: 1.55 !important;
}

/* — Контент: padding и spacing между полями — */
.b24-form .b24-form-content {
  padding: 28px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}
.b24-form .b24-form-padding-side { padding-left: 32px !important; padding-right: 32px !important; }

/* — Каждое поле — */
.b24-form .b24-form-field {
  margin: 0 !important;
}

/* — Лейбл поля: маленький моно-uppercase в стиле .contact-row .lbl — */
.b24-form .b24-form-control-label {
  font-family: var(--font-mono) !important;
  font-size: var(--text-overline) !important;
  letter-spacing: .08em !important;
  color: var(--ink-500) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
}
.b24-form .b24-form-control-required {
  color: var(--brand-orange-500) !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
}

/* — Контейнер контрола: stacked layout (label сверху, input снизу).
   Bitrix по умолчанию ставит label position:absolute; top:-25px поверх
   input'а — это floating-label паттерн, где label сидит «в воздухе» и
   соседние поля наезжают друг на друга. Возвращаем нормальный flow:
   flex-column + order, чтобы каждое поле занимало честное место. */
.b24-form .b24-form-control-container {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.b24-form .b24-form-control-container > .b24-form-control-label {
  order: 1 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  margin-bottom: 6px !important;
}
.b24-form .b24-form-control-container > .b24-form-control,
.b24-form .b24-form-control-container > .b24-form-dropdown,
.b24-form .b24-form-control-container > select.b24-form-control,
.b24-form .b24-form-control-container > textarea.b24-form-control {
  order: 2 !important;
}
.b24-form .b24-form-control-container > .b24-form-control-alert-message {
  order: 3 !important;
  margin-top: 6px !important;
  position: static !important;
}
/* Звёздочка required — тоже в normal flow (а не absolute поверх) */
.b24-form .b24-form-control-required {
  position: static !important;
  display: inline !important;
}
/* Иконка-индикатор (стрелка dropdown / svg валидации) справа от input.
   У Bitrix это псевдоэлемент `.b24-form-control-icon-after::after` или
   вложенный svg. Из-за нашего нового layout (label сверху, container стал
   69 px вместо 44 px) дефолтная привязка top:24px ставит иконку на уровень
   label. Перепозиционируем к центру input (input снизу контейнера,
   высотой 44 px, центр на ~22 px от bottom). */
.b24-form .b24-form-control-container.b24-form-control-icon-after::after,
.b24-form .b24-form-control-icon-after > svg {
  top: auto !important;
  bottom: 18px !important;
  right: 14px !important;
  transform: none !important;
}
/* На случай, если иконка визуально получилась слишком тёмной — приглушим */
.b24-form .b24-form-control-container.b24-form-control-icon-after::after {
  border-color: var(--ink-500) !important;
}

/* — Сам input / textarea / select. Dropdown — отдельным правилом ниже,
   чтобы не стилизовать ВСЕ .b24-form-dropdown подряд (у Bitrix их 2-3 на
   одно list-поле: визибильный input + popup-обёртка + hidden trigger). */
.b24-form .b24-form-control,
.b24-form input.b24-form-control,
.b24-form textarea.b24-form-control,
.b24-form select.b24-form-control {
  width: 100% !important;
  height: 44px !important;
  padding: 0 16px !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  color: var(--ink-1000) !important;
  background: var(--surface-card) !important;
  border: 1.5px solid var(--border-default) !important;
  border-radius: var(--r-sm) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard) !important;
  font-feature-settings: 'tnum' on, 'liga' on, 'calt' on, 'case' on !important;
}
.b24-form textarea.b24-form-control {
  height: auto !important;
  min-height: 110px !important;
  padding: 12px 16px !important;
  resize: vertical !important;
  line-height: 1.55 !important;
}
.b24-form .b24-form-control::placeholder,
.b24-form input.b24-form-control::placeholder,
.b24-form textarea.b24-form-control::placeholder {
  color: var(--ink-400) !important;
  opacity: 1 !important;
}
.b24-form .b24-form-control:hover,
.b24-form input.b24-form-control:hover,
.b24-form textarea.b24-form-control:hover,
.b24-form select.b24-form-control:hover {
  border-color: var(--brand-blue-300) !important;
}
.b24-form .b24-form-control:focus,
.b24-form input.b24-form-control:focus,
.b24-form textarea.b24-form-control:focus,
.b24-form select.b24-form-control:focus {
  border-color: var(--brand-blue-500) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* — Поле phone/email — иногда у них особая обёртка с иконкой — */
.b24-form .b24-form-control-icon-after .b24-form-control {
  padding-right: 40px !important;
}
.b24-form .b24-form-control-container svg {
  color: var(--ink-400) !important;
}

/* — Dropdown (list-поле): для list-полей Bitrix создаёт несколько
   .b24-form-dropdown узлов в DOM:
     1) внутри control-container — это служебный popup, скрытый по умолчанию
     2) пара DIV.b24-form-dropdown снаружи container — служебные обёртки
   Видимое поле — это input.b24-form-control, его мы уже стилизовали
   выше. Все служебные dropdown'ы делаем нулевыми (без border/height),
   чтобы не выглядели как пустые поля. Раскроются только когда Bitrix
   добавит активный класс (.b24-form-dropdown--open или подобный) — тогда
   стилизуем popup отдельным правилом. */
.b24-form .b24-form-dropdown {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
}
/* Когда popup открыт, рисуем его как карточку под полем */
.b24-form .b24-form-dropdown.is-open,
.b24-form .b24-form-dropdown[style*="display: block"],
.b24-form .b24-form-dropdown[style*="display:block"] {
  background: var(--surface-card) !important;
  border: 1.5px solid var(--border-default) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: var(--shadow-md) !important;
  margin-top: 4px !important;
  padding: 6px !important;
}

/* — Файл-инпут — */
.b24-form .b24-form-control-filelist {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.b24-form .b24-form-control-file-item-empty {
  color: var(--ink-500) !important;
  font-size: var(--text-body-sm) !important;
}
.b24-form .b24-form-control-file-button,
.b24-form .b24-form-control.b24-form-control-file-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 36px !important;
  width: auto !important;
  padding: 0 16px !important;
  font-size: var(--text-body-sm) !important;
  font-weight: 600 !important;
  color: var(--brand-blue-800) !important;
  background: var(--brand-blue-050) !important;
  border: 1.5px solid var(--brand-blue-200) !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
}
.b24-form .b24-form-control-file-button:hover {
  background: var(--brand-blue-100) !important;
  border-color: var(--brand-blue-500) !important;
}
/* Bitrix рисует плюс через два псевдоэлемента (border-based shape) поверх
   текста кнопки. Скрываем — у нас текст «Выбрать файл» уже понятен сам. */
.b24-form .b24-form-control-file-button::before,
.b24-form .b24-form-control-file-button::after {
  content: none !important;
  display: none !important;
}
.b24-form .b24-form-control-field-file-summary-size,
.b24-form .b24-form-control-field-file-summary-size-text {
  font-family: var(--font-mono) !important;
  font-size: var(--text-overline) !important;
  color: var(--ink-400) !important;
  letter-spacing: .04em !important;
}

/* — Чекбокс согласия — */
.b24-form .b24-form-field-agreement {
  background: var(--ink-050) !important;
  padding: 12px 16px !important;
  border-radius: var(--r-sm) !important;
}
.b24-form .b24-form-field-agreement .b24-form-control-label {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-sm) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  color: var(--ink-700) !important;
  line-height: 1.5 !important;
}
.b24-form .b24-form-control-desc {
  font-size: var(--text-body-sm) !important;
  color: var(--ink-500) !important;
  line-height: 1.55 !important;
}
/* Bitrix оборачивает ВЕСЬ текст согласия в `.b24-form-field-agreement-link`
   (это просто span, не настоящая ссылка). Поэтому подчёркивать и красить
   как ссылку нельзя — иначе весь параграф станет «синим линком».
   Делаем нормальный body-текст; реальные `<a>` внутри останутся выделенными. */
.b24-form .b24-form-field-agreement-link {
  color: var(--ink-700) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
}
.b24-form .b24-form-field-agreement a,
.b24-form .b24-form-control-desc a {
  color: var(--brand-blue-700) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}
.b24-form .b24-form-field-agreement a:hover,
.b24-form .b24-form-control-desc a:hover {
  color: var(--brand-blue-500) !important;
}

/* — Кнопка submit: accent orange как .btn-accent —
   ВНИМАНИЕ: на некоторых формах Bitrix применяет background-color
   через registered @property или inline-style высокой специфичности,
   которую нельзя пробить даже inline `!important`. Обход —
   `background-image: linear-gradient(<color>, <color>)`: это другое
   CSS-свойство, которое выводится поверх background-color и заливает
   кнопку нужным цветом. */
.b24-form .b24-form-btn-container,
.b24-form .b24-form-btn-block {
  margin-top: 8px !important;
  padding: 0 !important;
}
.b24-form .b24-form-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 48px !important;
  padding: 0 24px !important;
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #fff !important;
  background-color: var(--brand-orange-500) !important;
  background-image: linear-gradient(var(--brand-orange-500), var(--brand-orange-500)) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  border: 0 !important;
  border-radius: var(--r-sm) !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  transition: background-image var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard) !important;
}
.b24-form .b24-form-btn:hover {
  background-image: linear-gradient(var(--brand-orange-600), var(--brand-orange-600)) !important;
  transform: translateY(-1px) !important;
}
.b24-form .b24-form-btn:active {
  transform: translateY(0) !important;
}
.b24-form .b24-form-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(234,91,33,.30) !important;
}
.b24-form .b24-form-btn[disabled],
.b24-form .b24-form-btn.disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* — Сообщения валидации.
   У незаполненных полей Bitrix создаёт пустой alert-контейнер
   (с невидимым .b24-form-sr-only). Скрываем такой пустой контейнер,
   чтобы он не давал лишнего вертикального gap. Показываем alert только
   когда есть видимый текст (или когда у поля есть state-error). */
.b24-form .b24-form-control-alert-message {
  display: none !important;
  margin: 0 !important;
}
.b24-form .b24-form-field.b24-form-field-error .b24-form-control-alert-message,
.b24-form .b24-form-control-alert-message:has(*:not(.b24-form-sr-only)) {
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-top: 6px !important;
  padding: 6px 10px !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-body-sm) !important;
  line-height: 1.45 !important;
  color: var(--danger-700) !important;
  background: var(--danger-050) !important;
  border-radius: var(--r-xs) !important;
  border-left: 3px solid var(--danger-600) !important;
}
.b24-form .b24-form-control-alert-message .b24-form-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.b24-form .b24-form-control.b24-form-control-error,
.b24-form .b24-form-field.b24-form-field-error .b24-form-control {
  border-color: var(--danger-500) !important;
  background: var(--danger-050) !important;
}

/* — Состояния (loader/success/error) — */
.b24-form .b24-form-state-container {
  padding: 24px 32px !important;
}
.b24-form .b24-form-loader {
  background: var(--surface-card) !important;
}
.b24-form .b24-form-loader-icon {
  border-color: var(--brand-blue-200) !important;
  border-top-color: var(--brand-blue-500) !important;
}
.b24-form .b24-form-state.b24-form-success,
.b24-form .b24-form-state.b24-form-state-success {
  background: var(--success-100) !important;
  color: var(--success-700) !important;
  border: 1px solid var(--success-600) !important;
  border-radius: var(--r-md) !important;
  padding: 18px 22px !important;
}
.b24-form .b24-form-state-text,
.b24-form .b24-form-state-inner {
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  line-height: 1.55 !important;
}

/* — Прячем «Powered by Bitrix24» (необязательно, но для чистоты) — */
.b24-form .b24-form-sign,
.b24-form .b24-form-link-banner,
.b24-form-link-img {
  opacity: .35 !important;
  filter: grayscale(1) !important;
  font-size: 10px !important;
}

/* ── Виджет «Связаться» (плавающая кнопка справа) ──
   .b24-widget-button-* — оставляем нетронутым: это не часть формы,
   а отдельный шарик с соц-сетями. Если понадобится — можно
   спрятать одной строкой:
   .b24-widget-button-position-bottom-right { display: none !important; }
*/

/* 7) PREVIEW watermark */
.preview-stamp {
  position: fixed; bottom: 14px; right: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-500);
  background: rgba(255,255,255,.92);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-sm);
  z-index: 99;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.preview-stamp strong { color: var(--brand-orange-600); font-weight: 700; }