/*
 * Модальное окно формы запроса (hystmodal).
 *
 * Жило в lightbox.css вместе с галереей, но нужно и там, где галереи
 * нет — на «Контактах». Вынесено отдельным файлом: подключается по
 * formSubject во front matter.
 */

/* Именно flex: .hystmodal__wrap центрирует окно через margin:auto и
   min-height:100%, а при содержимом выше экрана даёт прокрутку сверху.
   На старом сайте всё лежало в одном div, и block ещё сходил с рук. */
.hystmodal__wrap {
  flex-shrink: 0;
  flex-grow: 0;
  width: 100%;
  min-height: 100%;
  margin: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

.hystmodal--active .hystmodal__window {
  transform: scale(1);
  opacity: 1;
}

.hystmodal__close:focus {
  outline: 2px dotted #afb3b9;
  outline-offset: 2px;
}

.hystmodal__opened,
.hystmodal__shadow {
  position: fixed;
  right: 0;
  left: 0;
  overflow: hidden;
}

.hystmodal__shadow {
  border: 0;
  display: block;
  width: 100%;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 98;
  opacity: 0;
  transition: opacity .15s ease;
  background-color: #000;
}

.hystmodal__shadow--show {
  pointer-events: auto;
  opacity: .6;
}

.hystmodal {
  position: fixed;
  top: 3.125em;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 1;
  pointer-events: none;
  z-index: 99;
  visibility: hidden;
  display: none;
}

.hystmodal__window {
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
  background: #fff;
  border-radius: .5rem;
  width: 37.5em;
  max-width: 100%;
  overflow: visible;
  transition: transform .2s ease 0s, opacity .2s ease 0s;
  transform: scale(.9);
  opacity: 0;
}
/* Размеры задаём окну, а не подложке: подложка растянута на весь экран и
   прокручивает содержимое. Раньше здесь стояла height: 34em — вёрстка была
   из одного div, и высота формы совпадала с высотой подложки. С галочкой
   согласия форма стала выше, и кнопка «Отправить» уезжала за край. */
.hystmodal_form .hystmodal__window {
  max-width: min(33em, 100%);
  margin: 1.25em auto;
}

.hystmodal--active {
  opacity: 1;
}
.hystmodal--active,
.hystmodal--moved {
  pointer-events: auto;
  visibility: visible;
  display: flex;
}

.hystmodal__close {
  position: absolute;
  z-index: 10;
  top: 0;
  right: -40px;
  display: block;
  width: 30px;
  height: 30px;
  background-color: transparent;
  background-position: 50%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M22 2L2 22'/%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='square' stroke-miterlimit='50' stroke-width='2' d='M2 2l20 20'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  border: 0;
  font-size: 0;
  cursor: pointer;
  outline: 0;
}

@media (max-width: 767px) {
  .hystmodal__close {
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
  }

  .hystmodal__window {
    max-width: 100%;
  }
}

/* ---- начинка формы ------------------------------------------------------
 *
 * Переехало из machine.css. Форма запроса одна на весь сайт (partials/
 * request-form.njk), а стили её полей и кнопки лежали в файле страницы
 * станка. На «Контактах», где machine.css не подключается, форма
 * открывалась вообще неоформленной: серая системная кнопка, поля
 * с inset-рамкой, синяя шапка «Запрос» без фона.
 *
 * Здесь им и место: modal.css подключается ровно там, где есть форма —
 * base.njk добавляет его по formSubject.
 *
 * Мёртвое при переезде не взято: button.buttons (в разметке div, а не
 * button), form li и form ul (форма давно без списков), .white-popup
 * (остаток magnific popup) и hystmodal_lager (селектор без точки).
 */

.form_container {
  border-radius: .5em;
  text-align: left;
  box-shadow: 0 0 .625em .3125em rgba(0, 0, 0, .14);
}

form.appnitro {
  margin: 1.25em 1.25em 0;
  padding: 0 0 1.25em;
}

.form_description {
  background-color: var(--c-blue);
  text-align: center;
  padding: .625em;
  border-radius: .5em .5em 0 0;
}

.form_description h2 {
  font-size: 1.875em;
  color: #fff;
  font-weight: 400;
  margin: 0 0 .1875em;
}

label.description,
span.description {
  font-weight: 500;
  line-height: 2em;
}

.element {
  border: .0625em solid #999;
  border-radius: .1875em;
  padding: .375em;
  font-size: 1em;
  width: 100%;
  margin-bottom: 1em;
}

/* Согласие на обработку персональных данных: галочка слева от текста,
   а не над ним, как у остальных полей формы. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: .5em;
  margin: .75em 0 0;
  font-size: .875em;
  line-height: 1.4;
  cursor: pointer;
}

.consent input {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-top: .1em;
  accent-color: var(--c-blue);
}

/* Отступ сверху: у полей его даёт margin-bottom, а согласие — последнее
   перед кнопкой, и она прилипала к тексту про политику вплотную. */
.buttons {
  margin-top: 1.25em;
  text-align: center;
}

input.button_text {
  overflow: visible;
  outline: 0;
  padding: .5em 1.875em;
  font-weight: 300;
  color: #fff;
  background: var(--c-blue);
  border-radius: .375em;
  font-size: 1.2em;
  border-color: transparent;
  box-shadow: 0 0 .3125em rgba(0, 0, 0, .4);
  cursor: pointer;
}