/* =========================================================
   LU CONTACT-CTA — блок обратной связи "Закатное небо"
   Совместим с Битрикс / Кракен360 / Bootstrap 3.3.6.
   Подключать ПОСЛЕ lu-cards.css (использует --lu-card-bg).

   Структура:
   1) Фон "закатного неба" — на родительском блоке Битрикса
      (для этого блоку дописать класс lu-contact-cta-host)
   2) Стандартный заголовок и описание Кракена (.head, .descrip)
      перекрашиваются под светлый фон, .head/.content получают
      серый фон через .container — единая "капсула"
   3) Переопределение стилей формы Bitrix24 (scoped под .lu-contact-cta__b24)
   4) Телефон + 3 trust-карточки
   5) Адаптив

   ВАЖНО: все селекторы строго scoped под .lu-contact-cta
   или .lu-contact-cta-host — ничего глобального.
   ========================================================= */


/* =========================================================
   1) ФОН ЗАКАТНОГО НЕБА — на самом блоке Битрикса
   ========================================================= */

.block.lu-contact-cta-host{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 20% 105%, #FFD9C7 0%, rgba(255,217,199,0) 60%),
    radial-gradient(140% 80% at 85% 120%, #FFB7C9 0%, rgba(255,183,201,0) 55%),
    linear-gradient(180deg, #87b0dc 0%, #cedbed 35%, #F8C5C8 72%, #FFB7A3 100%);
}

/* Розовые "облака" — слой поверх неба, под контентом */
.block.lu-contact-cta-host:before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 220px 60px at 18% 22%, rgba(255,255,255,.55), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 320px 70px at 82% 14%, rgba(255,228,235,.7), rgba(255,228,235,0) 70%),
    radial-gradient(ellipse 260px 55px at 60% 32%, rgba(255,255,255,.45), rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 380px 90px at 30% 58%, rgba(255,200,210,.65), rgba(255,200,210,0) 70%),
    radial-gradient(ellipse 300px 75px at 75% 70%, rgba(255,180,195,.55), rgba(255,180,195,0) 70%);
}

/* Солнечное гало у горизонта */
.block.lu-contact-cta-host:after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -120px;
  width: 720px;
  height: 360px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,237,200,.85) 0%, rgba(255,200,170,.4) 35%, rgba(255,200,170,0) 65%);
  pointer-events: none;
  z-index: 0;
}

/* Поднимаем head и content над фоновыми слоями */
.block.lu-contact-cta-host > .head,
.block.lu-contact-cta-host > .content{
  position: relative;
  z-index: 1;
}

/* Заголовок и описание Кракена под светло-голубой фон неба */
.block.lu-contact-cta-host .head .main1,
.block.lu-contact-cta-host .head h2.main1{
  color: #1f2a24;
}

.block.lu-contact-cta-host .head .descrip{
  color: rgba(31,42,36,.78);
}

/* Прозрачные внутренние обёртки Кракена,
   чтобы фон закатного неба просвечивал насквозь.
   Все селекторы скоупированы под .lu-contact-cta-host —
   соседние блоки сайта не затрагиваются. */
.block.lu-contact-cta-host .head,
.block.lu-contact-cta-host .content,
.block.lu-contact-cta-host .descriptive,
.block.lu-contact-cta-host .descriptive-table,
.block.lu-contact-cta-host .descriptive-cell,
.block.lu-contact-cta-host .text-wrap,
.block.lu-contact-cta-host .text-content,
.block.lu-contact-cta-host .z-text{
  background: transparent !important;
}

/* Тень/оверлей блока (.shadow) гасит небо — отключаем */
.block.lu-contact-cta-host > .shadow{
  display: none !important;
}

/* Зануляем отступы Кракена .head/.content — они создают
   зазор между серой шапкой и серой тарелкой */
.block.lu-contact-cta-host > .head{
  margin-bottom: 0 !important;
}

.block.lu-contact-cta-host > .content{
  margin-top: 0 !important;
}


/* =========================================================
   2) СЕРАЯ "КАПСУЛА" — заголовок + форма единым прямоугольником.
   Серый фон вешаем на Bootstrap-овский .container внутри .head
   и внутри .content — это гарантирует одинаковую ширину/паддинги
   на всех брейкпоинтах.
   ========================================================= */

.block.lu-contact-cta-host .head{
  padding-bottom: 0 !important;
  padding-left: 15px;
  padding-right: 15px;
}

.block.lu-contact-cta-host .head > .container{
  background: var(--lu-card-bg, #f5f5f5);
  border-top-left-radius: var(--lu-card-radius, 28px);
  border-top-right-radius: var(--lu-card-radius, 28px);
  padding-top: 48px !important;
  padding-bottom: 28px !important;
  padding-left: 56px !important;
  padding-right: 56px !important;
  position: relative;
}

/* Контент шапки */
.block.lu-contact-cta-host .head > .container > *{
  position: relative;
  z-index: 1;
}

.block.lu-contact-cta-host .content{
  padding-left: 15px;
  padding-right: 15px;
}

.block.lu-contact-cta-host .content > .container{
  position: relative;
  background: var(--lu-card-bg, #f5f5f5);
  border-radius: var(--lu-card-radius, 28px);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 28px 56px 44px;
  overflow: hidden;
  box-shadow: 0px 150px 80px 0px rgba(40, 60, 90, .25);
}


/* =========================================================
   3) ТЕЛЕФОН ПОД ФОРМОЙ
   ========================================================= */

.lu-contact-cta__phone{
  margin-top: 28px;
  margin-bottom: 36px;
  text-align: center;
  font-size: 26px;
  line-height: 1.3;
  color: #1f2a24;
}

.lu-contact-cta__phone-lead{
  display: inline;
  color: rgba(17,17,17,.78);
  font-weight: 400;
  margin-right: 8px;
}

.lu-contact-cta__phone-num{
  display: inline-block;
  font-family: 'SegoeUIBold', Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #2A8CB8;
  text-decoration: none;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 3px;
}

.lu-contact-cta__phone-num:after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #5FC6F1 0%, #95C12B 100%);
  border-radius: 2px;
  opacity: .6;
}

.lu-contact-cta__phone-num:hover{ color: #1f2a24; text-decoration: none; }
.lu-contact-cta__phone-num:hover:after{ opacity: 1; }


/* =========================================================
   4) РЯД "ДОВЕРИЯ" — 3 карточки
   ========================================================= */

.lu-contact-cta__trust{
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 320px));
justify-content: center;
  gap: 14px;
}

.lu-contact-cta__trust-item{
  background: #fff;
  border-radius: 22px;
  padding: 22px 22px;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: 0 8px 22px -6px rgba(40,60,90,.10);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 16px;
  transition: .18s ease;
  min-height: 0;
}

.lu-contact-cta__trust-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -6px rgba(40,60,90,.14);
}

.lu-contact-cta__trust-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.lu-contact-cta__trust-icon svg{
  width: 26px;
  height: 26px;
}

.lu-contact-cta__trust-icon--green{
  background: linear-gradient(180deg, #E8F6D4 0%, #C9E596 100%);
  color: #5A8A14;
}

.lu-contact-cta__trust-icon--yandex{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.lu-contact-cta__trust-icon--yandex svg{
  width: 32px;
  height: auto;
}

.lu-contact-cta__trust-icon--blue{
  background: linear-gradient(180deg, #D6EFFB 0%, #A6DDF5 100%);
  color: #1F6A8C;
}

/* Специфичность повышаем за счёт каскада через .lu-contact-cta-host —
   чтобы перебить возможные правила Кракена для .text-content h3, .z-text h3 и т.п. */
.block.lu-contact-cta-host .lu-contact-cta__trust-title,
.block.lu-contact-cta-host h3.lu-contact-cta__trust-title,
.lu-contact-cta__trust-title{
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'SegoeUIBold', Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #1f2a24 !important;
  letter-spacing: -0.005em !important;
  text-align: left !important;
  text-transform: none !important;
  max-width: 100% !important;
}


/* =========================================================
   5) BITRIX24 INLINE FORM — переопределения
   Все селекторы строго scoped под .lu-contact-cta__b24,
   чтобы не задеть другие формы Б24 на сайте.
   ========================================================= */

.block.lu-contact-cta-host .lu-contact-cta__b24{
  position: relative;
  max-width: 560px;
  margin: 0 auto 8px;
}

/* Сбрасываем собственные обёртки/паддинги/тени Б24 */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-wrapper,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-content,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-padding-side,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-padding-bottom,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-header-padding{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Скрываем шапку формы и брендинг "Сообщить о нарушении" */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-header,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-sign,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-footer,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-btn-share-block{
  display: none !important;
}

/* Расстояние между полями */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field{
  margin-bottom: 12px !important;
}

/* Контейнер инпута (Б24 рендерит контейнер с float-label) */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container{
  position: relative !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7) !important;
  transition: .18s ease !important;
  min-height: 56px !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container:hover{
  border-color: rgba(0,0,0,.20) !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container:focus-within,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container.b24-form-control-active{
  border-color: #5FC6F1 !important;
  box-shadow:
    0 0 0 4px rgba(95,198,241,.18),
    inset 0 1px 0 rgba(255,255,255,.7) !important;
  outline: none !important;
}

/* Сам input/textarea внутри контейнера — без рамок и фонов */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container input.b24-form-control,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container textarea.b24-form-control,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container input,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container textarea{
  width: 100% !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-family: 'SegoeUIRegular', Arial, 'PT Sans Caption', sans-serif !important;
  font-size: 15px !important;
  color: #111 !important;
  height: auto !important;
  min-height: 22px !important;
  outline: none !important;
}

/* Лейбл по умолчанию */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-label{
  font-family: 'SegoeUIRegular', Arial, 'PT Sans Caption', sans-serif !important;
  font-size: 13px !important;
  color: rgba(17,17,17,.55) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

/* Лейбл во "всплывающем" состоянии (когда поле заполнено или активно) */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container.b24-form-control-not-empty .b24-form-control-label,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container.b24-form-control-active .b24-form-control-label,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-container:focus-within .b24-form-control-label{
  font-size: 11px !important;
  color: rgba(42,140,184,.95) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Звёздочка обязательного поля */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-required{
  color: #FF6B6B !important;
}

/* Чекбоксы согласий */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement{
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: rgba(17,17,17,.72) !important;
  background: transparent !important;
}

/* У чекбокс-полей контейнер НЕ должен выглядеть как инпут —
   убираем у него белый фон, рамку, паддинги и тень */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement .b24-form-control-container,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement .b24-form-control-container{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 6px 2px !important;
  min-height: 0 !important;
  box-shadow: none !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement .b24-form-control-container:hover,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement .b24-form-control-container:hover,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement .b24-form-control-container:focus-within,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement .b24-form-control-container:focus-within{
  border: 0 !important;
  box-shadow: none !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement label,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement label{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  cursor: pointer !important;
  /* Фиксируем line-height на label, чтобы чекбокс мог
     выровняться по первой строке через line-height-приём */
  line-height: 1.5 !important;
}

/* Текст рядом с чекбоксом — наследует line-height label.
   Не привязывается к align-items: первая строка совпадает с верхом
   контейнера, а сам чекбокс центрируется по высоте этой первой строки. */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement label .b24-form-control-desc,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement label .b24-form-control-desc{
  flex: 1 1 auto;
  min-width: 0;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement input[type="checkbox"],
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement input[type="checkbox"]{
  appearance: none !important;
  -webkit-appearance: none !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  height: 18px !important;
  /* Поднимаем чекбокс к центру ПЕРВОЙ строки текста.
     При line-height: 1.5 и font-size: 13px высота строки = 19.5px.
     Центр первой строки = 9.75px от верха текста.
     Чекбокс высотой 18px, его центр = 9px.
     Сдвигаем сверху на ~1px, чтобы центр совпал с центром первой строки.
     Этот трюк работает одинаково при 1, 2 и 3 строках. */
  margin: 1px 0 0 !important;
  border: 1.5px solid rgba(0,0,0,.25) !important;
  border-radius: 5px !important;
  background: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  transition: .15s ease !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement input[type="checkbox"]:hover,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement input[type="checkbox"]:hover{
  border-color: rgba(0,0,0,.45) !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement input[type="checkbox"]:checked,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement input[type="checkbox"]:checked{
  background: #95C12B !important;
  border-color: #7BA321 !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement input[type="checkbox"]:checked:after,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-agreement input[type="checkbox"]:checked:after{
  content: "" !important;
  position: absolute !important;
  left: 5px; top: 1px !important;
  width: 5px; height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement-link,
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-field-agreement a{
  color: #2A8CB8 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* Кнопка отправки — фирменный зелёный CTA */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-btn-container{
  margin-top: 16px !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-btn-block{
  width: 100% !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-btn,
.block.lu-contact-cta-host .lu-contact-cta__b24 button.b24-form-btn{
  width: 100% !important;
  padding: 18px 26px !important;
  border: 1px solid #7BA321 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #95C12B 0%, #7BA321 100%) !important;
  color: #fff !important;
  font-family: 'SegoeUIBold', Arial, sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  cursor: pointer !important;
  box-shadow:
    0 12px 28px rgba(123,163,33,.36),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
  transition: .18s ease !important;
  min-height: 56px !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-btn:hover,
.block.lu-contact-cta-host .lu-contact-cta__b24 button.b24-form-btn:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, #A4CF3A 0%, #88B228 100%) !important;
  box-shadow:
    0 16px 32px rgba(123,163,33,.42),
    inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-btn:active,
.block.lu-contact-cta-host .lu-contact-cta__b24 button.b24-form-btn:active{
  transform: translateY(0);
}

/* Сообщения об ошибках */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-control-alert-message{
  color: #FF6B6B !important;
  font-size: 12px !important;
  font-family: 'SegoeUIRegular', Arial, sans-serif !important;
  margin-top: 4px !important;
}

/* Состояния "успешно отправлено" / "ошибка" / "форма не актуальна" */
.block.lu-contact-cta-host .lu-contact-cta__b24 .b24-form-state-container{
  background: transparent !important;
}


/* =========================================================
   6) АДАПТИВ
   ========================================================= */

@media (max-width: 991px){
  .block.lu-contact-cta-host .content > .container{
    padding: 22px 28px 32px;
    border-radius: 24px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .block.lu-contact-cta-host .head > .container{
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 36px 28px 22px !important;
  }
}

@media (max-width: 767px){
  .block.lu-contact-cta-host .content > .container{
    padding: 18px 20px 24px;
    border-radius: 20px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .block.lu-contact-cta-host .head > .container{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 28px 20px 18px !important;
  }

  .lu-contact-cta__phone{
    margin-top: 22px;
    margin-bottom: 28px;
    font-size: 18px;
  }

  .lu-contact-cta__phone-lead{
    display: block;
    margin-right: 0;
    margin-bottom: 4px;
    font-size: 16px;
  }

  .lu-contact-cta__phone-num{
    font-size: 22px;
  }

  .lu-contact-cta__trust{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lu-contact-cta__trust-item{
    padding: 18px 18px;
    gap: 14px;
  }

  .lu-contact-cta__trust-icon{
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .lu-contact-cta__trust-icon svg{
    width: 24px;
    height: 24px;
  }

  .lu-contact-cta__trust-icon--yandex svg{
    width: 28px;
  }

  .block.lu-contact-cta-host .lu-contact-cta__trust-title,
  .block.lu-contact-cta-host h3.lu-contact-cta__trust-title,
  .lu-contact-cta__trust-title{
    font-size: 14px !important;
  }

  /* Уменьшаем гало солнца на мобильных */
  .block.lu-contact-cta-host:after{
    width: 460px;
    height: 230px;
    bottom: -80px;
  }
}