/* ============================================================================
   Формы заявок — единый стиль (попап, футер, /contacts/).
   ----------------------------------------------------------------------------
   До этого три формы выглядели по-разному и «колхозно»: поля без границ, разной
   ширины, согласие — крошечным нативным чекбоксом (10px, opacity .7), у попапа
   половину ширины занимал персонаж, а поля сжимались в две узкие колонки.

   Здесь один набор правил на все три формы. Область — `.cmzd-form`, поэтому
   легаси-стили (.input-style-1, .area-style-1) перекрываются точечно, а не по
   всему сайту. Цвета — палитра ЦМЗД: жёлтая кнопка #fbd239 с чёрным текстом
   (как все родные кнопки), тёмный #2d3e50, серый текст #6d6d6d.

   Разметку скрипт (assets/js/forms.js) ищет по: input[name=name|phone|email],
   textarea[name=message], обёртке `.input-style-1` (в неё он кладёт `.field-error`)
   и `.form-result` — эти хуки здесь сохранены.
   ========================================================================== */

/* ---------------------------------------------------------------- попап ---- */
/* Персонаж из шаблона донора занимал 150px справа и вылезал за край попапа
   (половина фигуры) — из-за него поля шли в две узкие колонки и выглядели
   сжатыми. Убираем фигуру и отдаём место полям: форма становится спокойной и
   читаемой. */
#popup-form .popup-form-wrap {
  position: relative;
  overflow: hidden;
  max-width: 440px;
  padding-right: 0;
}

/* ------------------------------------------------------------- каркас ------ */
.cmzd-form {
  text-align: left;
}

.cmzd-form .cmzd-form__title {
  margin: 0 0 6px;
  color: #2d3e50;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
}

.cmzd-form .cmzd-form__subtitle {
  margin: 0 0 22px;
  color: #6d6d6d;
  font-size: 15px;
  line-height: 1.5;
}

/* -------------------------------------------------------------- поля ------- */
.cmzd-form .cmzd-field {
  margin-bottom: 12px;
}

.cmzd-form .input-style-1 {
  width: 100%;
  margin: 0;
  padding: 0;
}

.cmzd-form .cmzd-field input,
.cmzd-form .cmzd-field textarea,
.cmzd-form .input-style-1 input {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  padding: 15px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
}

.cmzd-form .cmzd-field textarea,
.cmzd-form .area-style-1 {
  display: block;
  width: 100%;
  margin: 0;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  height: 104px;
  min-height: 104px;
  padding: 14px 16px;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cmzd-form input::placeholder,
.cmzd-form textarea::placeholder {
  color: #9b9fa3;
  opacity: 1;
}

.cmzd-form input:focus,
.cmzd-form textarea:focus {
  outline: none;
  border-color: #2d3e50;
  box-shadow: 0 0 0 3px rgb(45 62 80 / 10%);
}

/* Ошибку ставит assets/js/forms.js: класс .field-invalid на поле и .field-error
   внутри обёртки. */
.cmzd-form .has-error input,
.cmzd-form .has-error textarea,
.cmzd-form input.field-invalid,
.cmzd-form textarea.field-invalid {
  border-color: #d73240;
  background: #fffafa;
}

.cmzd-form .field-error {
  margin: 6px 0 0;
  color: #d73240;
  font-size: 13px;
  line-height: 1.35;
}

/* ------------------------------------------------------------- кнопка ------ */
.cmzd-form .cmzd-submit,
.cmzd-form button[type="submit"],
.cmzd-form input[type="submit"] {
  display: block;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: #fbd239;
  color: #000;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1;
  padding: 19px 24px;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.cmzd-form .cmzd-submit:hover,
.cmzd-form button[type="submit"]:hover,
.cmzd-form input[type="submit"]:hover {
  background: #2d3e50;
  color: #fff;
}

.cmzd-form .cmzd-submit[disabled],
.cmzd-form button[type="submit"][disabled] {
  opacity: 0.6;
  cursor: default;
}

/* ------------------------------------------------------- согласие и факты -- */
.cmzd-form .cmzd-consent,
.cmzd-form .cmzd-note {
  margin: 12px 0 0;
  color: #6d6d6d;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}

.cmzd-form .cmzd-consent a {
  color: #2d3e50;
  text-decoration: underline;
}

.cmzd-form .cmzd-note {
  margin-top: 10px;
  font-size: 13px;
}

/* ------------------------------------------------------- ответ сервера ----- */
.cmzd-form .form-result {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.45;
  text-align: center;
}

.cmzd-form .form-result--ok {
  background: rgb(102 187 106 / 12%);
  color: #1f7a33;
}

.cmzd-form .form-result--error {
  background: rgb(215 50 64 / 10%);
  color: #d73240;
}

/* --------------------------------------------------------- футер ----------- */
/* Форма в футере — только телефон и кнопка, в одну строку. */
.cmzd-form--inline .mailchimp-inputbox {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.cmzd-form--inline .mailchimp-inputbox > i {
  display: none;
}

.cmzd-form--inline .input-style-1 {
  flex: 1 1 220px;
}

.cmzd-form--inline .cmzd-submit,
.cmzd-form--inline input[type="submit"] {
  width: auto;
  flex: 0 0 auto;
  padding: 18px 28px;
}

/* Поле в футере лежит внутри `.mailchimp-inputbox`, у которого в легаси-стилях свои
   padding/border — задаём точечно (специфичность выше), чтобы поле выглядело как в
   остальных двух формах. */
.cmzd-form.cmzd-form--inline .mailchimp-inputbox .input-style-1 input {
  width: 100%;
  height: auto;
  padding: 15px 16px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fff;
  color: #000;
  font-size: 16px;
  line-height: 1.4;
  box-shadow: none;
}

/* Футер — жёлтая полоса, поэтому кнопка и подпись здесь тёмные: жёлтая кнопка на
   жёлтом фоне не читалась бы (в исходной вёрстке кнопка тоже была тёмной). */
.cmzd-form.cmzd-form--inline .cmzd-submit,
.cmzd-form.cmzd-form--inline input[type="submit"] {
  background: #2d3e50;
  color: #fff;
}

.cmzd-form.cmzd-form--inline .cmzd-submit:hover,
.cmzd-form.cmzd-form--inline input[type="submit"]:hover {
  background: #000;
  color: #fff;
}

.cmzd-form.cmzd-form--inline .cmzd-note {
  color: #2d3e50;
}

.cmzd-form--inline .cmzd-note {
  margin-top: 10px;
  text-align: left;
}

/* ---------------------------------------------------------- мобильный ------ */
@media (max-width: 767px) {
  #popup-form .popup-form-wrap {
    max-width: 100%;
  }

  .cmzd-form .cmzd-form__title {
    font-size: 22px;
  }

  .cmzd-form--inline .mailchimp-inputbox {
    flex-direction: column;
    align-items: stretch;
  }

  .cmzd-form--inline .cmzd-submit,
  .cmzd-form--inline input[type="submit"] {
    width: 100%;
  }
}