/* Bitrix24: визуальные переопределения под дизайн сайта */
.b24-form-host,
.b24-form-host .b24-form,
.b24-form-host .b24-form-wrapper,
.b24-form-host .b24-form-content,
.b24-form-host .b24-form-padding-side,
.b24-form-host .b24-form-inner,
.b24-form-host .b24-form-container {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--ink) !important;
  font-family: Manrope, Arial, sans-serif !important;
}

/* Битрикс задаёт Open Sans и фон inline-стилями, поэтому здесь нужен !important. */
.b24-form-host .b24-form * {
  font-family: Manrope, Arial, sans-serif !important;
}

.b24-form-content.b24-form-padding-side {
  padding: 0 !important;
}

.b24-form .b24-form-sign-abuse {
  display: none !important;
}

.b24-form-host .b24-form-header {
  display: none !important;
}

.b24-form-host .b24-form-field,
.b24-form-host .b24-form-field-layout {
  width: 100% !important;
  margin: 0 0 25px !important;
  padding: 0 !important;
  background: transparent !important;
}

.b24-form-host .b24-form-control-label {
  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  top: 5px !important;
  z-index: 1 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  pointer-events: none !important;
  transition: opacity .15s ease, visibility .15s ease !important;
  transform: none !important;
}

/* В Bitrix24 label расположен сразу после input. Поднимаем подпись только
   во время ввода или после него, чтобы она не перекрывала значение. */
.b24-form-host .b24-form-control:focus + .b24-form-control-label,
.b24-form-host .b24-form-control:focus ~ .b24-form-control-label,
.b24-form-host .b24-form-control-focus + .b24-form-control-label,
.b24-form-host .b24-form-control-focus ~ .b24-form-control-label,
.b24-form-host .b24-form-control-not-empty + .b24-form-control-label,
.b24-form-host .b24-form-control-not-empty ~ .b24-form-control-label {
  top: 5px !important;
  transform: none !important;
  font-size: 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Если Bitrix24 не успел добавить класс на label, скрываем его через
   состояние самого input. Это исключает наложение подписи на введённый текст. */
.b24-form-host .b24-form-control-container:has(> .b24-form-control:focus) > .b24-form-control-label,
.b24-form-host .b24-form-control-container:has(> .b24-form-control-not-empty) > .b24-form-control-label {
  visibility: hidden !important;
  opacity: 0 !important;
}

.b24-form-host .b24-form-control:focus,
.b24-form-host .b24-form-control-focus,
.b24-form-host .b24-form-control-not-empty {
  padding-top: 18px !important;
}

.b24-form-host .b24-form-control-container {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid #12112160 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.b24-form-host .b24-form-control,
.b24-form-host input.b24-form-control,
.b24-form-host textarea.b24-form-control,
.b24-form-host select.b24-form-control {
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 18px 0 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -.03em !important;
}

.b24-form-host .b24-form-control::placeholder {
  color: #12112160 !important;
  opacity: 1 !important;
}

.b24-form-host .b24-form-field-agreement,
.b24-form-host .b24-form-field-agreement label,
.b24-form-host .b24-form-sign {
  color: var(--ink) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.b24-form-host .b24-form-field-agreement {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 0 0 25px !important;
  padding: 0 !important;
  background: transparent !important;
}

.b24-form-host .b24-form-field-agreement input[type="checkbox"] {
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  margin: 2px 0 0 !important;
  border-radius: 0 !important;
}

.b24-form-host .b24-form-field-agreement a {
  color: inherit !important;
  text-decoration: underline !important;
}

.b24-form-host .b24-form-btn-container {
  width: 100% !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.b24-form-host .b24-form-btn {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  min-height: 61px !important;
  margin: 0 !important;
  padding: 10px 62px 10px 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ink) !important;
  box-shadow: none !important;
  color: var(--paper) !important;
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

.b24-form-host .b24-form-btn::after {
  content: "↗";
  position: absolute;
  top: 50%;
  right: 16px;
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border: 1px solid #ffffff50;
  border-radius: 50%;
  color: var(--paper);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
}

/* Внешний заголовок Битрикса скрыт, возвращаем заголовок исходной callback-формы. */
#callback-form {
  display: block !important;
  padding-top: 6px !important;
}

#callback-form::before {
  display: block;
  margin: 0 0 25px;
  color: var(--ink);
  content: "Оставьте свой номер телефона, и мы перезвоним!";
  font-family: Manrope, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.7;
}

#order-form {
  display: block !important;
}

#order-form .b24-form-field,
#callback-form .b24-form-field {
  background: transparent !important;
}

@media (max-width: 600px) {
  .b24-form-host .b24-form-control,
  .b24-form-host input.b24-form-control,
  .b24-form-host textarea.b24-form-control,
  .b24-form-host select.b24-form-control {
    font-size: 18px !important;
  }
}

/* Секция процесса использует ту же тёмную палитру, что и technology. */
.process {
  background: var(--ink) !important;
  color: var(--paper) !important;
}

.process .section-meta {
  color: #d9d9e180 !important;
}

.process h2,
.process h3,
.process h4,
.process .process-number,
.process .remote-symbol {
  color: var(--paper) !important;
}

.process .process-caption,
.process .process-grid p,
.process .remote-copy p,
.process .remote-action p,
.process .remote-action small {
  color: #c1c0cb !important;
  opacity: 1 !important;
}

.process .process-number {
  border-bottom-color: #fffaf725 !important;
}

.process .process-number span {
  border-color: #89baff80 !important;
}

.process .remote-copy .eyebrow {
  color: var(--blue) !important;
}

.process .text-link {
  color: var(--blue) !important;
}

.process .button-dark {
  background: var(--blue) !important;
  color: var(--ink) !important;
}

.process .button-dark span {
  border-color: #12112160 !important;
}