/*
 * Сборщик лидов: стили всплывающего квиза
 * Цвет акцента можно переопределить в теме дизайна: .lead-overlay { --lead-accent: #e53935; }
 */
html body .lead-overlay {
  --lead-accent: #2f6bff !important;
  --lead-accent-soft: rgba(47, 107, 255, .1) !important;
  --lead-accent-text: #ffffff !important;
  --lead-text: #1d2433 !important;
  --lead-muted: #6b7385 !important;
  --lead-border: #e3e7ef !important;
  --lead-bg: #ffffff !important;
  --lead-bg-soft: #f5f7fb !important;
  --lead-error: #e53935 !important;
  --lead-radius: 16px !important;

  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(15, 20, 35, .6) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  backdrop-filter: blur(4px) !important;
  overflow-y: auto !important;
  font-family: inherit !important;
  line-height: 1.4 !important;
}
html body .lead-overlay.is-open { display: flex !important; animation: lead-fade .2s ease !important; }
html body .lead-overlay *, html body .lead-overlay *::before, html body .lead-overlay *::after { box-sizing: border-box !important; }
html.lead-lock, html.lead-lock body { overflow: hidden !important; }

@keyframes lead-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lead-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes lead-step { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes lead-spin { to { transform: rotate(360deg); } }

/* Лоадер */
html body .lead-overlay .lead-loader {
  width: 44px !important;
  height: 44px !important;
  border: 4px solid rgba(255, 255, 255, .3) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: lead-spin .8s linear infinite !important;
}

/* Окно */
html body .lead-overlay .lead-modal {
  position: relative !important;
  width: 100% !important;
  max-width: 760px !important;
  margin: auto !important;
  background: var(--lead-bg) !important;
  color: var(--lead-text) !important;
  border-radius: var(--lead-radius) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .25) !important;
  animation: lead-up .25s ease !important;
  display: flex !important;
  flex-direction: column !important;
}
html body .lead-overlay .lead-close {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--lead-bg-soft) !important;
  color: var(--lead-muted) !important;
  font-size: 24px !important;
  line-height: 36px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
  z-index: 2 !important;
}
html body .lead-overlay .lead-close:hover { background: var(--lead-border) !important; color: var(--lead-text) !important; }

/* Шапка и прогресс */
html body .lead-overlay .lead-head { padding: 28px 64px 0 32px !important; }
html body .lead-overlay .lead-head__title { font-size: 14px !important; color: var(--lead-muted) !important; margin-bottom: 14px !important; }
html body .lead-overlay .lead-progress__info {
  display: flex !important;
  justify-content: space-between !important;
  font-size: 13px !important;
  color: var(--lead-muted) !important;
  margin-bottom: 8px !important;
}
html body .lead-overlay .lead-progress__percent { color: var(--lead-accent) !important; font-weight: 600 !important; }
html body .lead-overlay .lead-progress__bar {
  height: 6px !important;
  border-radius: 3px !important;
  background: var(--lead-bg-soft) !important;
  overflow: hidden !important;
}
html body .lead-overlay .lead-progress__bar span {
  display: block !important;
  height: 100% !important;
  width: 0 !important;
  border-radius: 3px !important;
  background: var(--lead-accent) !important;
  transition: width .35s ease !important;
}
html body .lead-overlay .lead-modal.is-success .lead-head,
html body .lead-overlay .lead-modal.is-success .lead-nav { display: none !important; }

/* Шаги */
html body .lead-overlay .lead-form { margin: 0 !important; padding: 24px 32px !important; flex: 1 !important; }
html body .lead-overlay .lead-step { display: none !important; }
html body .lead-overlay .lead-step.is-active { display: block !important; animation: lead-step .25s ease !important; }
html body .lead-overlay .lead-step__title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 0 0 20px !important;
}
html body .lead-overlay .lead-step__text { color: var(--lead-muted) !important; margin: -8px 0 20px !important; font-size: 15px !important; }

/* Варианты ответа: кол-во колонок задаёт класс lead-options_cols-N, неполный последний ряд по центру */
html body .lead-overlay .lead-options {
  --lead-cols: 2 !important;
  --lead-gap: 12px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: var(--lead-gap) !important;
}
html body .lead-overlay .lead-options_cols-2 { --lead-cols: 2 !important; }
html body .lead-overlay .lead-options_cols-3 { --lead-cols: 3 !important; }
html body .lead-overlay .lead-options_cols-4 { --lead-cols: 4 !important; }
html body .lead-overlay .lead-option {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  width: calc((100% - (var(--lead-cols) - 1) * var(--lead-gap)) / var(--lead-cols)) !important;
  margin: 0 !important;
  border: 2px solid var(--lead-border) !important;
  border-radius: 12px !important;
  background: var(--lead-bg) !important;
  cursor: pointer !important;
  overflow: hidden !important;
  transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
html body .lead-overlay .lead-option:hover {
  border-color: var(--lead-accent) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .08) !important;
  transform: translateY(-2px) !important;
}
html body .lead-overlay .lead-option.is-selected { border-color: var(--lead-accent) !important; background: var(--lead-accent-soft) !important; }
html body .lead-overlay .lead-option input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
html body .lead-overlay .lead-option__img {
  display: block !important;
  aspect-ratio: 4 / 3 !important;
  background: var(--lead-bg-soft) !important;
}
html body .lead-overlay .lead-option__img img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
html body .lead-overlay .lead-option__text {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
html body .lead-overlay .lead-options_img .lead-option__text { padding: 12px !important; font-size: 14px !important; flex: 1 !important; }
html body .lead-overlay .lead-option__check {
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  border: 2px solid var(--lead-border) !important;
  border-radius: 50% !important;
  background: var(--lead-bg) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
html body .lead-overlay .lead-option.is-selected .lead-option__check {
  border-color: var(--lead-accent) !important;
  box-shadow: inset 0 0 0 4px var(--lead-bg), inset 0 0 0 10px var(--lead-accent) !important;
}

/* Форма заявки */
html body .lead-overlay .lead-fields { max-width: 420px !important; }
html body .lead-overlay .lead-field { position: relative !important; display: block !important; margin: 0 0 20px !important; }
html body .lead-overlay .lead-field__label { display: block !important; font-size: 13px !important; color: var(--lead-muted) !important; margin-bottom: 6px !important; }
html body .lead-overlay .lead-field__req { margin-left: 3px !important; color: var(--lead-error) !important; }
html body .lead-overlay .lead-field input {
  display: block !important;
  width: 100% !important;
  height: 50px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 2px solid var(--lead-border) !important;
  border-radius: 10px !important;
  background: var(--lead-bg) !important;
  color: var(--lead-text) !important;
  font: inherit !important;
  font-size: 16px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s !important;
}
html body .lead-overlay .lead-field input:focus { border-color: var(--lead-accent) !important; }
html body .lead-overlay .lead-field.is-error input { border-color: var(--lead-error) !important; }

/* ошибка поля — «облачко» под полем со стрелкой вверх; поверх следующего поля, вёрстку не сдвигает */
html body .lead-overlay .lead-field__error {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  z-index: 5 !important;
  max-width: 100% !important;
  margin-top: 7px !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  background: var(--lead-error) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15) !important;
  pointer-events: none !important;
}
html body .lead-overlay .lead-field__error::before {
  content: '' !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 14px !important;
  border: 6px solid transparent !important;
  border-bottom-color: var(--lead-error) !important;
}
html body .lead-overlay .lead-field__error:empty { display: none !important; }
html body .lead-overlay .is-error .lead-field__error:not(:empty) { animation: lead-fade .2s ease !important; }
/* у согласия стрелка указывает на чекбокс */
html body .lead-overlay .lead-agree .lead-field__error::before { left: 4px !important; }
html body .lead-overlay .lead-field_hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

html body .lead-overlay .lead-agree {
  position: relative !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 4px 0 24px !important;
  font-size: 13px !important;
  color: var(--lead-muted) !important;
  cursor: pointer !important;
}
html body .lead-overlay .lead-agree input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
html body .lead-overlay .lead-agree__box {
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: -1px !important;
  border: 2px solid var(--lead-border) !important;
  border-radius: 5px !important;
  background: var(--lead-bg) center / 14px no-repeat !important;
  transition: border-color .15s, background-color .15s !important;
}
html body .lead-overlay .lead-agree input:checked + .lead-agree__box {
  border-color: var(--lead-accent) !important;
  background-color: var(--lead-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") !important;
}
html body .lead-overlay .lead-agree.is-error .lead-agree__box { border-color: var(--lead-error) !important; }
html body .lead-overlay .lead-agree a { color: var(--lead-accent) !important; }

html body .lead-overlay .lead-error {
  margin: 14px 0 0 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(229, 57, 53, .08) !important;
  color: var(--lead-error) !important;
  font-size: 14px !important;
}
html body .lead-overlay .lead-error[hidden] { display: none !important; }

html body .lead-overlay .lead-submit {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--lead-accent) !important;
  color: var(--lead-accent-text) !important;
  font: inherit !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15) !important;
  transition: filter .15s, transform .15s !important;
}
html body .lead-overlay .lead-submit:hover { filter: brightness(1.08) !important; }
html body .lead-overlay .lead-submit:active { transform: scale(.98) !important; }
html body .lead-overlay .lead-submit:disabled { cursor: default !important; opacity: .7 !important; }
html body .lead-overlay .lead-submit.is-loading { color: transparent !important; }
/* тема дизайна рисует на кнопках при наведении псевдоэлементы ::before/::after с фоном — отключаем их у всех кнопок окна (кроме спиннера загрузки) */
html body .lead-overlay button::before,
html body .lead-overlay button:hover::before,
html body .lead-overlay button:not(.is-loading)::after,
html body .lead-overlay button:not(.is-loading):hover::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
html body .lead-overlay .lead-submit.is-loading::after,
html body .lead-overlay .lead-submit.is-loading:hover::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  margin: -11px 0 0 -11px !important;
  background: none !important;
  opacity: 1 !important;
  width: 22px !important;
  height: 22px !important;
  border: 3px solid rgba(255, 255, 255, .4) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: lead-spin .8s linear infinite !important;
}

/* Экран благодарности */
html body .lead-overlay .lead-step_success { text-align: center !important; padding: 32px 0 8px !important; }
html body .lead-overlay .lead-step_success .lead-step__text { margin: -8px auto 28px !important; max-width: 420px !important; }
html body .lead-overlay .lead-step_success .lead-submit { max-width: 220px !important; }
html body .lead-overlay .lead-success__icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 72px !important;
  height: 72px !important;
  margin-bottom: 20px !important;
  border-radius: 50% !important;
  background: var(--lead-accent-soft) !important;
  color: var(--lead-accent) !important;
}

/* Навигация */
html body .lead-overlay .lead-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 32px !important;
  border-top: 1px solid var(--lead-border) !important;
}
html body .lead-overlay .lead-nav button {
  height: 44px !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border-radius: 10px !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background .15s, opacity .15s !important;
}
html body .lead-overlay .lead-nav__prev { border: 0 !important; background: transparent !important; color: var(--lead-muted) !important; }
html body .lead-overlay .lead-nav__prev:hover { background: var(--lead-bg-soft) !important; color: var(--lead-text) !important; }
html body .lead-overlay .lead-nav__next { margin-left: auto !important; border: 0 !important; background: var(--lead-accent) !important; color: var(--lead-accent-text) !important; }
/* фон при наведении фиксируем явно (с повышенной специфичностью), чтобы тема дизайна не перекрашивала кнопку */
html body .lead-overlay .lead-nav .lead-nav__next:hover,
html body .lead-overlay .lead-nav .lead-nav__next:focus { background: var(--lead-accent) !important; color: var(--lead-accent-text) !important; opacity: .8 !important; }
html body .lead-overlay .lead-nav .lead-nav__next:disabled { background: var(--lead-accent) !important; color: var(--lead-accent-text) !important; opacity: .4 !important; cursor: default !important; }

/* Адаптив */
@media (max-width: 767px) {
  html body .lead-overlay .lead-options_cols-4 { --lead-cols: 2 !important; }
}
@media (max-width: 599px) {
  html body .lead-overlay { padding: 0 !important; align-items: stretch !important; }
  html body .lead-overlay .lead-modal { max-width: none !important; min-height: 100% !important; border-radius: 0 !important; }
  html body .lead-overlay .lead-head { padding: 20px 60px 0 16px !important; }
  html body .lead-overlay .lead-form { padding: 20px 16px !important; }
  html body .lead-overlay .lead-nav { position: sticky !important; bottom: 0 !important; padding: 12px 16px !important; background: var(--lead-bg) !important; }
  html body .lead-overlay .lead-step__title { font-size: 19px !important; }
  html body .lead-overlay .lead-options { --lead-cols: 1 !important; --lead-gap: 10px !important; }
  html body .lead-overlay .lead-options_img { --lead-cols: 2 !important; }
  html body .lead-overlay .lead-fields { max-width: none !important; }
}