/*
 * Формы «Виртуальная справка» и «Online-продление». Цвета — переменные (зелёный — как у «Афиши» и «Архива газет»),
 * тема может переопределить их для .ml-form. Поля заданы классами: стили темы для input и select их не ломают.
 * У кнопки тема Drupal задаёт градиент и белую тень текста — здесь они сняты.
 * Форма — карточка: заголовок, поля, внизу под линией — согласие, капча и кнопка. Отступы между блоками —
 * gap колонок, а не margin: так их не съедают сбросы темы.
 */

.ml-form {
  --form-accent: #004f20;
  --form-accent-dark: #00381a;
  --form-accent-soft: #e3efe7;
  --form-ring: rgba(0, 79, 32, 0.18);
  --form-error: #b3261e;
  --form-error-soft: #fbeceb;
  --form-error-ring: rgba(179, 38, 30, 0.15);
  --form-text: #1f2a24;
  --form-muted: #5f6b66;
  --form-line: #c5cfca;
  --form-line-soft: #dbe4df;
  --form-panel: #f6f9f7;
  --form-surface: #fff;
  --form-radius: 8px;

  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 620px;
  margin: 32px 0 12px;
  padding: 26px 30px 30px;
  border: 1px solid var(--form-line-soft);
  border-top: 4px solid var(--form-accent);
  border-radius: 12px;
  background: var(--form-panel);
  color: var(--form-text);
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
}

.ml-form *,
.ml-form *::before,
.ml-form *::after {
  box-sizing: border-box;
}

.ml-form p {
  margin: 0;
}

.ml-form__heading {
  color: var(--form-accent);
  font-size: 18px;
  font-weight: bold;
  line-height: 1.3;
}

/* --- Поля -------------------------------------------------------------------- */

.ml-form__field {
  margin: 0;
}

.ml-form__field > label {
  display: block;
  margin: 0 0 7px;
  font-weight: bold;
}

.ml-form__req {
  color: var(--form-error);
}

.ml-form input[type="text"],
.ml-form input[type="email"],
.ml-form input[type="tel"],
.ml-form select,
.ml-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--form-line);
  border-radius: var(--form-radius);
  background-color: var(--form-surface);
  color: inherit;
  font: inherit;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ml-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f6b66' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-repeat: no-repeat;
  cursor: pointer;
  appearance: none;
}

.ml-form textarea {
  min-height: 10em;
  resize: vertical;
}

.ml-form input:hover,
.ml-form select:hover,
.ml-form textarea:hover {
  border-color: var(--form-muted);
}

/* Прозрачная рамка outline остаётся видна в режиме высокой контрастности Windows, где тени нет. */
.ml-form input:focus,
.ml-form select:focus,
.ml-form textarea:focus {
  border-color: var(--form-accent);
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px var(--form-ring);
}

.ml-form .has-error input,
.ml-form .has-error select,
.ml-form .has-error textarea {
  border-color: var(--form-error);
}

.ml-form .has-error input:focus,
.ml-form .has-error select:focus,
.ml-form .has-error textarea:focus {
  box-shadow: 0 0 0 3px var(--form-error-ring);
}

.ml-form__error {
  margin-top: 6px;
  color: var(--form-error);
  font-size: 13px;
}

.ml-form__alert {
  padding: 12px 14px;
  border-left: 4px solid var(--form-error);
  border-radius: 4px;
  background: var(--form-error-soft);
}

/* --- Низ формы: согласие, капча, кнопка ------------------------------------------- */

.ml-form__footer {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--form-line-soft);
}

.ml-form .ml-form__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

.ml-form__check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--form-accent);
  cursor: pointer;
}

.ml-form__admin {
  padding: 10px 12px;
  border: 1px dashed var(--form-line);
  border-radius: var(--form-radius);
  background: var(--form-surface);
  color: var(--form-muted);
  font-size: 13px;
}

.ml-form .ml-form__submit {
  min-width: 180px;
  padding: 12px 32px;
  border: 0;
  border-radius: var(--form-radius);
  background: var(--form-accent);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: bold;
  text-shadow: none;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.ml-form .ml-form__submit:hover {
  background: var(--form-accent-dark);
}

.ml-form .ml-form__submit:focus-visible {
  outline: 2px solid var(--form-accent);
  outline-offset: 3px;
}

/* Ловушка для ботов: за пределами экрана, а не display:none — такие поля боты пропускают. */
.ml-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Заявка принята ------------------------------------------------------------ */

.ml-form--done {
  gap: 8px;
}

.ml-form__done {
  color: var(--form-accent);
  font-size: 18px;
  font-weight: bold;
}

/* --- Узкий экран ------------------------------------------------------------- */

@media (max-width: 600px) {
  .ml-form {
    gap: 18px;
    padding: 20px 16px 22px;
  }

  .ml-form .ml-form__submit {
    width: 100%;
  }
}

/* --- Версия для слабовидящих: цвета задаёт плагин, оставляем рамки потолще и ширину колонки. --- */

.bvi-body .ml-form {
  max-width: none;
  border: 2px solid;
}

.bvi-body .ml-form input[type="text"],
.bvi-body .ml-form input[type="email"],
.bvi-body .ml-form input[type="tel"],
.bvi-body .ml-form select,
.bvi-body .ml-form textarea,
.bvi-body .ml-form .ml-form__submit,
.bvi-body .ml-form__alert {
  border: 2px solid;
}

.bvi-body .ml-form select {
  background-image: none;
  appearance: auto;
}

.bvi-body .ml-form__check input {
  width: 1em;
  height: 1em;
}