/* fb_widget.css — сгенерирован из константы FB_CSS в fb_widget.js.
   Правится ТОЛЬКО там; сверка описана в README.md. */
:host { display: block; }

.fb-root.fb-root {
  /* Отрезаем author-стили сайта: у 16 проектов формы уже стилизованы
     глобальными правилами вида "form input {}", и без сброса виджет
     выглядит по-разному на каждом. all не трогает custom properties,
     поэтому переменные ниже переживают revert. */
  all: revert;

  --_fb-accent: var(--fb-accent, #2f6fdb);
  --_fb-accent-hover: var(--fb-accent-hover, #2455ab);
  --_fb-on-accent: var(--fb-on-accent, #ffffff);
  --_fb-accent-soft: var(--fb-accent-soft, #eaf1fd);
  --_fb-fg: var(--fb-fg, #1d2129);
  --_fb-muted: var(--fb-muted, #6b7280);
  --_fb-surface: var(--fb-surface, #ffffff);
  --_fb-surface-2: var(--fb-surface-2, #f7f8fa);
  --_fb-border: var(--fb-border, #d6dae0);
  --_fb-border-strong: var(--fb-border-strong, #aeb5be);
  --_fb-danger: var(--fb-danger, #b3261e);
  --_fb-danger-soft: var(--fb-danger-soft, #fdeceb);
  --_fb-success: var(--fb-success, #16733e);
  --_fb-success-soft: var(--fb-success-soft, #e7f5ec);
  --_fb-warn: var(--fb-warn, #8a5a00);
  --_fb-warn-soft: var(--fb-warn-soft, #fdf3e2);
  --_fb-radius: var(--fb-radius, 10px);
  --_fb-radius-lg: var(--fb-radius-lg, 16px);
  --_fb-tap: var(--fb-tap, 44px);
  --_fb-gap: var(--fb-gap, 16px);
  --_fb-font: var(--fb-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --_fb-shadow: var(--fb-shadow, 0 16px 40px rgba(16, 24, 40, .22));
  --_fb-backdrop: var(--fb-backdrop, rgba(16, 24, 40, .5));
  --_fb-ring: var(--fb-ring, rgba(47, 111, 219, .28));

  position: relative;
  display: block;
  box-sizing: border-box;
  font-family: var(--_fb-font);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--_fb-fg);
  text-align: left;
  -webkit-text-size-adjust: 100%;
}

/* Дефолты тёмной темы. Идут ПОСЛЕ базовых при равной специфичности,
   поэтому побеждают; явный data-fb-theme перебивает и их. */
@media (prefers-color-scheme: dark) {
  .fb-root.fb-root {
    --_fb-accent: var(--fb-accent, #5b9bff);
    --_fb-accent-hover: var(--fb-accent-hover, #7db0ff);
    --_fb-on-accent: var(--fb-on-accent, #0f1115);
    --_fb-accent-soft: var(--fb-accent-soft, #1b2a44);
    --_fb-fg: var(--fb-fg, #e6e8ec);
    --_fb-muted: var(--fb-muted, #9aa2ad);
    --_fb-surface: var(--fb-surface, #1a1d23);
    --_fb-surface-2: var(--fb-surface-2, #22262e);
    --_fb-border: var(--fb-border, #383e48);
    --_fb-border-strong: var(--fb-border-strong, #545c68);
    --_fb-danger: var(--fb-danger, #ff8a80);
    --_fb-danger-soft: var(--fb-danger-soft, #3a1f1d);
    --_fb-success: var(--fb-success, #6ddc9a);
    --_fb-success-soft: var(--fb-success-soft, #17301f);
    --_fb-warn: var(--fb-warn, #f0c070);
    --_fb-warn-soft: var(--fb-warn-soft, #33270f);
    --_fb-shadow: var(--fb-shadow, 0 16px 40px rgba(0, 0, 0, .55));
    --_fb-backdrop: var(--fb-backdrop, rgba(0, 0, 0, .62));
    --_fb-ring: var(--fb-ring, rgba(91, 155, 255, .32));
  }
}

.fb-root.fb-root[data-fb-theme="dark"] {
  --_fb-accent: var(--fb-accent, #5b9bff);
  --_fb-accent-hover: var(--fb-accent-hover, #7db0ff);
  --_fb-on-accent: var(--fb-on-accent, #0f1115);
  --_fb-accent-soft: var(--fb-accent-soft, #1b2a44);
  --_fb-fg: var(--fb-fg, #e6e8ec);
  --_fb-muted: var(--fb-muted, #9aa2ad);
  --_fb-surface: var(--fb-surface, #1a1d23);
  --_fb-surface-2: var(--fb-surface-2, #22262e);
  --_fb-border: var(--fb-border, #383e48);
  --_fb-border-strong: var(--fb-border-strong, #545c68);
  --_fb-danger: var(--fb-danger, #ff8a80);
  --_fb-danger-soft: var(--fb-danger-soft, #3a1f1d);
  --_fb-success: var(--fb-success, #6ddc9a);
  --_fb-success-soft: var(--fb-success-soft, #17301f);
  --_fb-warn: var(--fb-warn, #f0c070);
  --_fb-warn-soft: var(--fb-warn-soft, #33270f);
  --_fb-shadow: var(--fb-shadow, 0 16px 40px rgba(0, 0, 0, .55));
  --_fb-backdrop: var(--fb-backdrop, rgba(0, 0, 0, .62));
  --_fb-ring: var(--fb-ring, rgba(91, 155, 255, .32));
}

.fb-root.fb-root[data-fb-theme="light"] {
  --_fb-accent: var(--fb-accent, #2f6fdb);
  --_fb-accent-hover: var(--fb-accent-hover, #2455ab);
  --_fb-on-accent: var(--fb-on-accent, #ffffff);
  --_fb-accent-soft: var(--fb-accent-soft, #eaf1fd);
  --_fb-fg: var(--fb-fg, #1d2129);
  --_fb-muted: var(--fb-muted, #6b7280);
  --_fb-surface: var(--fb-surface, #ffffff);
  --_fb-surface-2: var(--fb-surface-2, #f7f8fa);
  --_fb-border: var(--fb-border, #d6dae0);
  --_fb-border-strong: var(--fb-border-strong, #aeb5be);
  --_fb-danger: var(--fb-danger, #b3261e);
  --_fb-danger-soft: var(--fb-danger-soft, #fdeceb);
  --_fb-success: var(--fb-success, #16733e);
  --_fb-success-soft: var(--fb-success-soft, #e7f5ec);
  --_fb-shadow: var(--fb-shadow, 0 16px 40px rgba(16, 24, 40, .22));
  --_fb-backdrop: var(--fb-backdrop, rgba(16, 24, 40, .5));
  --_fb-ring: var(--fb-ring, rgba(47, 111, 219, .28));
}

/* Полный сброс author-стилей сайта внутри корня.

   Одного all:revert на корне мало. Замер по восьми проектам: 124
   правила "textarea {}", 39 "select {}", 30 "label {}", 24 "input {}",
   12 "button {}" — все бьют по потомкам напрямую, мимо корня, и
   revert на .fb-root их не отменяет. Поэтому revert идёт ПЕРВЫМ
   свойством на каждом потомке, а наши правила ниже возвращают нужное.

   Удвоенный .fb-root даёт специфичность (0,2,0): выше и голого
   "textarea {}" (0,0,1), и типового "form .field input" (0,1,1).
   Против правил с id ("#main input", 1,0,1) не спасает — там остаётся
   изоляция в shadow DOM, см. data-fb-isolate в README.

   Наследуемые свойства revert берёт у РОДИТЕЛЯ, поэтому шрифт и цвет
   по-прежнему приходят с корня виджета: инлайновая форма должна
   выглядеть частью страницы, а не вставкой из другого сайта. */
.fb-root.fb-root *, .fb-root.fb-root *::before, .fb-root.fb-root *::after {
  all: revert;
  box-sizing: border-box;
}
.fb-root.fb-root ul, .fb-root.fb-root ol { list-style: none; margin: 0; padding: 0; }
/* revert возвращает не «ничего», а стиль браузера: у p и заголовков
   это margin: 1em 0, у form — отступ снизу. Гасим их отдельно, отступы
   в форме задаёт gap флекс-контейнера. */
.fb-root.fb-root p, .fb-root.fb-root h2, .fb-root.fb-root h3,
.fb-root.fb-root form, .fb-root.fb-root fieldset, .fb-root.fb-root legend {
  margin: 0; padding: 0; border: 0;
}

/* ---------- каркас ---------- */
.fb-root.fb-root .fb-form { display: flex; flex-direction: column; gap: var(--_fb-gap); }
.fb-root.fb-root .fb-head { display: flex; flex-direction: column; gap: 4px; }
.fb-root.fb-root .fb-title { font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--_fb-fg); }
.fb-root.fb-root .fb-sub { font-size: 14px; color: var(--_fb-muted); }
.fb-root.fb-root .fb-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Ловушки для ботов. display:none и visibility:hidden headless-браузеры
   и простые парсеры распознают и поле не трогают, поэтому уводим за
   левый край: в LTR это не даёт горизонтальной прокрутки, а корень
   position:relative удерживает их внутри виджета. */
.fb-root.fb-root .fb-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* ---------- поля ---------- */
.fb-root.fb-root .fb-field { display: flex; flex-direction: column; gap: 6px; }
/* Атрибут hidden обязан побеждать любые display-правила виджета.
   Без этого `.fb-root.fb-root .fb-field { display:flex }` (специфичность 0,2,1)
   перебивает браузерное `[hidden]{display:none}`, и скрытые поля продолжают
   показываться — именно так чекбокс согласия оставался на форме, которая
   его не требует. Правило касается ВСЕХ полей, а не только согласия. */
.fb-root.fb-root [hidden] { display: none; }

.fb-root.fb-root .fb-label { font-size: 14px; font-weight: 500; color: var(--_fb-fg); }
.fb-root.fb-root .fb-label__opt { font-weight: 400; color: var(--_fb-muted); }
.fb-root.fb-root .fb-note { font-size: 13px; color: var(--_fb-muted); }

.fb-root.fb-root .fb-input, .fb-root.fb-root .fb-textarea, .fb-root.fb-root .fb-select {
  width: 100%;
  min-height: var(--_fb-tap);
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--_fb-fg);
  background: var(--_fb-surface);
  border: 1px solid var(--_fb-border);
  border-radius: var(--_fb-radius);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}
.fb-root.fb-root .fb-textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.fb-root.fb-root .fb-select {
  padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.fb-root.fb-root .fb-input::placeholder, .fb-root.fb-root .fb-textarea::placeholder { color: var(--_fb-muted); opacity: 1; }
.fb-root.fb-root .fb-input:hover, .fb-root.fb-root .fb-textarea:hover, .fb-root.fb-root .fb-select:hover { border-color: var(--_fb-border-strong); }
.fb-root.fb-root .fb-input:focus, .fb-root.fb-root .fb-textarea:focus, .fb-root.fb-root .fb-select:focus {
  border-color: var(--_fb-accent);
  box-shadow: 0 0 0 3px var(--_fb-ring);
}
.fb-root.fb-root .fb-input[aria-invalid="true"], .fb-root.fb-root .fb-textarea[aria-invalid="true"] { border-color: var(--_fb-danger); }
.fb-root.fb-root .fb-input[aria-invalid="true"]:focus, .fb-root.fb-root .fb-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--_fb-danger-soft);
}
.fb-root.fb-root .fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .fb-root.fb-root .fb-row { grid-template-columns: 1fr; } }

.fb-root.fb-root .fb-err { font-size: 13px; color: var(--_fb-danger); }
.fb-root.fb-root .fb-err:empty { display: none; }

/* ---------- чипсы проблем ---------- */
.fb-root.fb-root .fb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-root.fb-root .fb-chip { position: relative; display: inline-flex; }
/* Настоящий checkbox, уведённый с глаз, но НЕ display:none: так
   пробел/Enter, скринридер и автозаполнение работают сами, без
   ручной эмуляции role="checkbox". */
.fb-root.fb-root .fb-chip__input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.fb-root.fb-root .fb-chip__box {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 8px 14px;
  font-size: 14px; color: var(--_fb-fg);
  background: var(--_fb-surface);
  border: 1px solid var(--_fb-border);
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
@media (pointer: coarse) { .fb-root.fb-root .fb-chip__box { min-height: var(--_fb-tap); } }
.fb-root.fb-root .fb-chip__box:hover { border-color: var(--_fb-border-strong); }
/* Каналы ответа: мессенджеры крупнее и заметнее, звонок и почта — приглушённо. Это продуктовый приоритет: первое общение удобнее в мессенджере, там человек читает когда ему удобно и отвечает, а звонок застаёт врасплох. */
.fb-root.fb-root .fb-chips--channel .fb-chip__box { font-weight: 600; }
.fb-root.fb-root .fb-chip--minor .fb-chip__box { font-weight: 400; opacity: .72; }
.fb-root.fb-root .fb-chip--minor .fb-chip__input:checked + .fb-chip__box { opacity: 1; }
/* Темы: их до одиннадцати, поэтому чипсы мельче — иначе они занимают пол-экрана и форма снова выглядит тяжёлой. */
.fb-root.fb-root .fb-chips--topic .fb-chip__box { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.fb-root.fb-root .fb-chip__input:checked + .fb-chip__box {
  border-color: var(--_fb-accent);
  background: var(--_fb-accent-soft);
  color: var(--_fb-accent);
  font-weight: 500;
}
.fb-root.fb-root .fb-chip__input:focus-visible + .fb-chip__box {
  border-color: var(--_fb-accent);
  box-shadow: 0 0 0 3px var(--_fb-ring);
}

/* ---------- переключатель канала ответа ---------- */
.fb-root.fb-root .fb-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-root.fb-root .fb-seg__item { position: relative; display: inline-flex; }
.fb-root.fb-root .fb-seg__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.fb-root.fb-root .fb-seg__box {
  display: inline-flex; align-items: center;
  min-height: 38px; padding: 7px 13px;
  font-size: 14px; color: var(--_fb-muted);
  background: var(--_fb-surface-2);
  border: 1px solid transparent;
  border-radius: 999px; cursor: pointer; user-select: none;
  transition: border-color .15s, background-color .15s, color .15s;
}
@media (pointer: coarse) { .fb-root.fb-root .fb-seg__box { min-height: var(--_fb-tap); } }
.fb-root.fb-root .fb-seg__input:checked + .fb-seg__box {
  color: var(--_fb-accent); background: var(--_fb-accent-soft); border-color: var(--_fb-accent);
}
.fb-root.fb-root .fb-seg__input:focus-visible + .fb-seg__box { box-shadow: 0 0 0 3px var(--_fb-ring); }

/* ---------- чекбоксы (согласие, «не звонить») ---------- */
.fb-root.fb-root .fb-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.fb-root.fb-root .fb-check__input {
  flex: none; width: 20px; height: 20px; margin: 2px 0 0;
  accent-color: var(--_fb-accent); cursor: pointer;
}
.fb-root.fb-root .fb-check__text { font-size: 13px; line-height: 1.4; color: var(--_fb-muted); }
.fb-root.fb-root .fb-check[data-fb-invalid="true"] .fb-check__text { color: var(--_fb-danger); font-weight: 600; }
/* Согласие без галки — самая частая причина «форма не отправляется».
   Мелкого красного текста человек в спешке не замечает, поэтому весь
   блок обводится рамкой и заливается: пропустить это уже нельзя. */
.fb-root.fb-root .fb-field[data-fb-invalid="true"] {
  background: var(--_fb-danger-soft); border: 1px solid var(--_fb-danger);
  border-radius: var(--_fb-radius); padding: 12px 14px;
}
.fb-root.fb-root .fb-check a { color: var(--_fb-accent); text-decoration: underline; }

/* ---------- разделитель и мягкий блок ---------- */
.fb-root.fb-root .fb-split { border-top: 1px solid var(--_fb-border); padding-top: var(--_fb-gap); display: flex; flex-direction: column; gap: 10px; }

/* ---------- кнопки ---------- */
.fb-root.fb-root .fb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--_fb-tap); padding: 11px 20px;
  font: inherit; font-size: 15px; font-weight: 600;
  border: 1px solid transparent; border-radius: var(--_fb-radius);
  cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.fb-root.fb-root .fb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--_fb-ring); }
.fb-root.fb-root .fb-btn[disabled] { opacity: .6; cursor: default; }
.fb-root.fb-root .fb-btn--primary { width: 100%; color: var(--_fb-on-accent); background: var(--_fb-accent); }
.fb-root.fb-root .fb-btn--primary:hover:not([disabled]) { background: var(--_fb-accent-hover); }
/* Кнопка отправки прижата к низу модалки: при длинном списке чипсов
   она иначе уезжает ниже сгиба, и форма выглядит как текст без действия. */
.fb-root.fb-root .fb-modal .fb-btn--primary { position: sticky; bottom: 0; margin-top: 4px; box-shadow: 0 -12px 16px -8px var(--_fb-surface); }

.fb-root.fb-root .fb-btn--ghost { color: var(--_fb-accent); background: none; border-color: var(--_fb-border); }
.fb-root.fb-root .fb-btn--ghost:hover:not([disabled]) { border-color: var(--_fb-accent); }
.fb-root.fb-root .fb-btn--link {
  min-height: 0; padding: 0; font-size: 14px; font-weight: 500;
  color: var(--_fb-accent); background: none; text-decoration: underline;
}

.fb-root.fb-root .fb-spin {
  width: 16px; height: 16px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: fb-spin .7s linear infinite;
}
@keyframes fb-spin { to { transform: rotate(360deg); } }
@keyframes fb-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
.fb-root.fb-root .fb-shake { animation: fb-shake .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .fb-root.fb-root .fb-spin { animation-duration: 2s; }
  .fb-root.fb-root .fb-shake { animation: none; }
  .fb-root.fb-root *, .fb-root.fb-root *::before { transition-duration: .01ms !important; }
}

/* ---------- сообщения о состоянии ---------- */
.fb-root.fb-root .fb-alert {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 14px; font-size: 14px;
  border: 1px solid; border-radius: var(--_fb-radius);
}
.fb-root.fb-root .fb-alert:empty { display: none; }
.fb-root.fb-root .fb-alert--error { color: var(--_fb-danger); background: var(--_fb-danger-soft); border-color: var(--_fb-danger); }
.fb-root.fb-root .fb-alert--warn { color: var(--_fb-warn); background: var(--_fb-warn-soft); border-color: var(--_fb-warn); }
.fb-root.fb-root .fb-alert--info { color: var(--_fb-muted); background: var(--_fb-surface-2); border-color: var(--_fb-border); }
.fb-root.fb-root .fb-alert__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ---------- экран успеха ---------- */
.fb-root.fb-root .fb-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 8px; text-align: center; }
.fb-root.fb-root .fb-done__icon {
  display: grid; place-items: center; width: 56px; height: 56px;
  color: var(--_fb-success); background: var(--_fb-success-soft); border-radius: 50%;
}
.fb-root.fb-root .fb-done__title { font-size: 17px; font-weight: 600; color: var(--_fb-fg); }
.fb-root.fb-root .fb-done__eta { font-size: 14px; color: var(--_fb-muted); }
.fb-root.fb-root .fb-ticket {
  font-size: 14px; color: var(--_fb-fg);
  padding: 6px 12px; background: var(--_fb-surface-2);
  border: 1px solid var(--_fb-border); border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ---------- модалка ---------- */
.fb-root.fb-root .fb-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 16px; }
.fb-root.fb-root .fb-modal__backdrop { position: fixed; inset: 0; background: var(--_fb-backdrop); }
.fb-root.fb-root .fb-modal__panel {
  position: relative; width: 100%; max-width: 460px; margin: auto;
  padding: 22px; background: var(--_fb-surface);
  border-radius: var(--_fb-radius-lg); box-shadow: var(--_fb-shadow);
}
.fb-root.fb-root .fb-modal__close {
  position: absolute; top: 10px; right: 10px;
  display: grid; place-items: center;
  width: var(--_fb-tap); height: var(--_fb-tap);
  font: inherit; font-size: 26px; line-height: 1;
  color: var(--_fb-muted); background: none; border: 0; border-radius: 50%; cursor: pointer;
}
.fb-root.fb-root .fb-modal__close:hover { color: var(--_fb-fg); background: var(--_fb-surface-2); }
.fb-root.fb-root .fb-modal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--_fb-ring); }
.fb-root.fb-root .fb-modal .fb-head { padding-right: 40px; }
@media (max-width: 480px) {
  .fb-root.fb-root .fb-modal { padding: 0; align-items: stretch; }
  .fb-root.fb-root .fb-modal__panel { max-width: none; margin: auto 0 0; border-radius: var(--_fb-radius-lg) var(--_fb-radius-lg) 0 0; }
}