/* ============================================================
   Оверрайд стилей встроенной формы Битрикс24 (CRM site button form)
   под дизайн FlashFormat.

   Форма грузится скриптом с bitrix.567150.ru и рендерится в ОБЫЧНЫЙ DOM
   (не shadow) внутри обёртки .b24-form — поэтому внешний CSS её достаёт.
   B24 подключает свой CSS скриптом ПОЗЖЕ нашего <link>, поэтому:
     • всё скоупим под `.b24-form ` (+1 класс специфичности);
     • ключевые свойства помечаем !important (иначе B24-правило перебивает по порядку).

   Палитра — в локальных переменных, тёмная тема через html.dark.
   Токены сайта: primary #ec1b25 / #c8111a, ink #212529 / muted #5c636a,
   шрифт Inter, радиусы pill=9999px / card=16px (см. :root в style.css).
   ============================================================ */

.b24-form {
  --ff-primary:      #ec1b25;
  --ff-primary-dark: #c8111a;
  --ff-secondary:    #00aeef;
  --ff-surface:      #ffffff; /* фон панели/полей */
  --ff-surface-2:    #f5f5f6; /* поля ввода */
  --ff-fg:           #212529; /* основной текст */
  --ff-fg-muted:     #5c636a; /* лейблы, подписи */
  --ff-border:       #d9dadd; /* границы полей */
}
html.dark .b24-form {
  --ff-surface:   #16171d;
  --ff-surface-2: #1c1d25;
  --ff-fg:        #e6e7ea;
  --ff-fg-muted:  #9aa0a8;
  --ff-border:    #33363f;
}

/* ─── Типографика: Inter как на всём сайте ─── */
.b24-form,
.b24-form input,
.b24-form textarea,
.b24-form select,
.b24-form button {
  font-family: var(--font-inter, "Inter"), system-ui, sans-serif !important;
}

/* ─── Затемняющий оверлей ─── */
.b24-form .b24-window-overlay {
  background: rgba(11, 12, 16, 0.55) !important;
  backdrop-filter: blur(2px);
}
/* Форма из шапки (site button, loader_5) — выезжает справа, делаем размер как у центровой */
.b24-form .b24-window-popup-p-right {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.b24-form .b24-window-popup-p-right .b24-window-popup-wrapper {
  width: auto !important;
  min-width: 0 !important;
  max-width: 600px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Контейнеры контента формы (тут был грубый background:black) */
.b24-form .b24-form-wrapper,
.b24-form .b24-form-content,
.b24-form .b24-form-state-container {
  background: var(--ff-surface) !important;
  color: var(--ff-fg) !important;
}
.b24-form .b24-form-border-bottom { border-color: var(--ff-border) !important; }

/* Кнопка закрытия (крестик): круг B24 оранжевый #f8430d, сам «X» — белые ::before/::after.
   Красим круг в фирменный красный, X оставляем белым. */
.b24-form .b24-window-close {
  background-color: var(--ff-primary) !important;
  opacity: 1;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.b24-form .b24-window-close:hover {
  background-color: var(--ff-primary-dark) !important;
  transform: scale(1.06);
}

/* ─── Скролл-контейнер панели: у него был БЕЛЫЙ фон (rgb 255,255,255) — он и давал
   белые полосы сверху/снизу формы. Красим в поверхность + прячем нативный скроллбар. ─── */
.b24-form .b24-window-scrollable {
  background: var(--ff-surface) !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important;
}
.b24-form .b24-window-scrollable::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ─── Родная шапка B24-формы (.b24-form-header): заголовок и описание идут ЧЁРНЫМ
   (rgb 0,0,0) — на тёмной панели невидимы, на светлой блёклые. Красим в текст-токены,
   центрируем, заголовок жирный — как в исходной форме заказчика. ─── */
.b24-form .b24-form-header { text-align: center !important; }
/* Заголовок = фирменный .h-display сайта: Inter 900, UPPERCASE, тесный трекинг
   (как «ОБСУДИМ ВАШУ ЗАДАЧУ» в CTA). Размер адаптивный под ширину панели. */
.b24-form .b24-form-header-title {
  font-family: var(--font-inter, "Inter"), system-ui, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  font-size: clamp(1.2rem, 4.2vw, 1.6rem) !important;
  /* боковой отступ, чтобы центрированный заголовок не заходил под крестик (особенно на мобиле) */
  padding: 0 2.25rem !important;
  color: var(--ff-fg) !important;
}
.b24-form .b24-form-header-description {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ff-fg-muted) !important;
}

/* ─── Блокировка скролла страницы, пока форма открыта (класс вешает скрипт) ─── */
html.b24-locked,
html.b24-locked body {
  overflow: hidden !important;
  position: relative;
  width: 100%;
}

/* ─── Поля ввода ─── */
.b24-form .b24-form-control {
  background: var(--ff-surface-2) !important;
  color: var(--ff-fg) !important;
  border: 1px solid var(--ff-border) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}
.b24-form .b24-form-control:focus,
.b24-form .b24-form-control:focus-within {
  border-color: var(--ff-primary) !important;
  box-shadow: 0 0 0 3px rgba(236, 27, 37, 0.15) !important;
  outline: none !important;
}
/* Плавающий лейбл и подписи */
.b24-form .b24-form-control-label { color: var(--ff-fg-muted) !important; }
.b24-form .b24-form-control-container.b24-form-control-icon-after .b24-form-control:focus ~ .b24-form-control-label {
  color: var(--ff-primary) !important;
}
/* Обязательная звёздочка */
.b24-form .b24-form-control-required { color: var(--ff-primary) !important; }

/* ─── Состояние ошибки поля ─── */
.b24-form .b24-form-control-alert .b24-form-control {
  border-color: var(--ff-primary) !important;
  box-shadow: 0 0 0 3px rgba(236, 27, 37, 0.12) !important;
}
.b24-form .b24-form-control-alert-message {
  color: var(--ff-fg-muted) !important;
}

/* ─── Согласие (чекбокс) — компактный блок в одну строку ─── */
.b24-form .b24-form-field-agreement {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  margin-top: 0.25rem !important;
  border-radius: 12px !important;
  background: var(--ff-surface-2) !important;
  border: 1px solid var(--ff-border) !important;
}
.b24-form .b24-form-field-agreement .b24-form-control-container {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin: 0 !important;
}
.b24-form .b24-form-field-agreement input[type="checkbox"] {
  accent-color: var(--ff-primary);
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 !important;
  flex-shrink: 0;
  cursor: pointer;
}
.b24-form .b24-form-control-desc {
  color: var(--ff-fg-muted) !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}
.b24-form .b24-form-field-agreement-link {
  color: var(--ff-fg-muted) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.b24-form .b24-form-field-agreement-link:hover { color: var(--ff-primary) !important; }

/* ─── Popup-форма (loader_19 — по центру экрана) — единый стиль с panel ─── */
.b24-form .b24-window-popup {
  background: transparent !important;
}
.b24-form .b24-window-popup-p-center {
  background: transparent !important;
}
.b24-form .b24-window-popup-wrapper {
  background: var(--ff-surface) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.45) !important;
  overflow: hidden !important;
}
.b24-form .b24-window-popup-head {
  padding: 1.5rem 1.5rem 0 !important;
}
.b24-form .b24-window-popup-title {
  color: var(--ff-fg) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}
.b24-form .b24-window-popup-body {
  color: var(--ff-fg-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

/* ─── Кнопка отправки — как .btn-primary сайта ─── */
.b24-form .b24-form-btn {
  background: linear-gradient(135deg, #f04a52, #ec1b25 45%, #c8111a) !important;
  background-size: 150% 150% !important;
  background-position: 0 0 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 24px -8px rgba(236, 27, 37, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transition: background-position 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}
.b24-form .b24-form-btn:hover {
  background-position: 100% 100% !important;
  box-shadow: 0 14px 36px -10px rgba(236, 27, 37, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-1px);
}
/* Вторичная кнопка «Отправить ещё раз» (bordered) */
.b24-form .b24-form-btn-border {
  background: transparent !important;
  color: var(--ff-primary) !important;
  border: 1px solid var(--ff-primary) !important;
  box-shadow: none !important;
}
.b24-form .b24-form-btn-border:hover {
  background: rgba(236, 27, 37, 0.06) !important;
  transform: none;
}

/* ─── Состояния (успех / ошибка / загрузка) ─── */

/* Успех — зелёный «плашка» от B24 → стилизуем под дизайн сайта */
.b24-form .b24-form-state.b24-form-success {
  background: var(--ff-surface) !important;
  padding: 3rem 1.5rem !important;
}
.b24-form .b24-form-state-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.b24-form .b24-form-success-icon {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, #22c55e, #16a34a) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 8px 24px -8px rgba(22, 163, 74, 0.4) !important;
}
.b24-form .b24-form-success-icon::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 0.75rem;
  border: 2px solid #fff;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) translateY(-2px);
}
.b24-form .b24-form-state-text,
.b24-form .b24-form-state-text p {
  color: var(--ff-fg) !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
/* Ошибка — стилизуем под дизайн */
.b24-form .b24-form-state.b24-form-error {
  background: var(--ff-surface) !important;
  padding: 3rem 1.5rem !important;
}
.b24-form .b24-form-error-icon {
  width: 3.5rem !important;
  height: 3.5rem !important;
  border-radius: 9999px !important;
  background: linear-gradient(135deg, var(--ff-primary), var(--ff-primary-dark)) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(236, 27, 37, 0.4) !important;
}
.b24-form .b24-form-error-icon::before {
  content: "!";
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
/* Предупреждение (warning) — красная плашка, белый текст */
.b24-form .b24-form-state.b24-form-warning {
  background: linear-gradient(135deg, var(--ff-primary), #c8111a) !important;
  padding: 3rem 1.5rem !important;
  border-radius: 12px !important;
}
.b24-form .b24-form-state.b24-form-warning .b24-form-state-text,
.b24-form .b24-form-state.b24-form-warning .b24-form-state-text p {
  color: rgba(255, 255, 255, 0.9) !important;
}
.b24-form .b24-form-state.b24-form-warning .b24-form-state-icon svg path,
.b24-form .b24-form-state.b24-form-warning .b24-form-state-icon svg circle {
  fill: rgba(255, 255, 255, 0.9) !important;
  stroke: rgba(255, 255, 255, 0.9) !important;
  opacity: 1 !important;
}
.b24-form .b24-form-loader-icon-sun-ring { stroke: var(--ff-primary) !important; }
.b24-form .bx-sun-lines-animate { fill: var(--ff-primary) !important; }

/* Плейсхолдеры и нативные контролы под тёмную тему */
html.dark .b24-form { color-scheme: dark; }
html.dark .b24-form ::placeholder { color: var(--ff-fg-muted) !important; }