/* Формы и кнопки ESTEO: одни поля, кнопки и подпись согласия во всех формах на тёмных карточках
   (таймер, «Есть предложение», тест-драйв, окно заявки). Подключается после main.min.css и form-0025.css. */
:root {
  --ui-accent: #0b71bb;
  --ui-accent-hover: #1f6fd9;
  --ui-text: #fff;
  --ui-text-muted: rgba(255, 255, 255, .72);
  --ui-field-bg: rgba(255, 255, 255, .06);
  --ui-field-bg-focus: rgba(255, 255, 255, .1);
  --ui-field-border: rgba(255, 255, 255, .28);
  --ui-field-border-hover: rgba(255, 255, 255, .5);
  --ui-placeholder: rgba(255, 255, 255, .62);
  --ui-error: #eb5757;
  --ui-cut: 10px;
}

/* Поля: прозрачные на тёмной карточке, тонкая светлая рамка, фокус — фирменным синим. */
.form-elements .input {
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--ui-field-border);
  border-radius: 0;
  background-color: var(--ui-field-bg);
  color: var(--ui-text);
  caret-color: var(--ui-accent-hover);
  font-weight: 400;
  transition: border-color .2s ease, background-color .2s ease;
}

.form-elements .input::placeholder {
  color: var(--ui-placeholder);
  opacity: 1;
}

.form-elements .input:hover {
  border-color: var(--ui-field-border-hover);
}

.form-elements .input:focus {
  border-color: var(--ui-accent-hover);
  background-color: var(--ui-field-bg-focus);
}

/* Общее правило сайта красит заполненный телефон зелёным — в формах цвет текста поля. */
.form-elements .input:required:valid,
.form-elements .input:focus:required:invalid {
  color: var(--ui-text);
}

.form-elements .input.redput,
.form-elements .input.redput:required:invalid {
  border-color: var(--ui-error);
  color: var(--ui-text);
}

.form-elements .input:-webkit-autofill {
  -webkit-text-fill-color: var(--ui-text);
  box-shadow: 0 0 0 100px #1b1f21 inset;
}

/* Подпись согласия на тёмном фоне: светлый приглушённый текст, ссылки — белые с подчёркиванием. */
.form-elements .checkbox-light .form__check {
  color: var(--ui-text-muted);
}

.form-elements .checkbox-light .form__check-text .form__check-link {
  color: var(--ui-text);
}

.form-elements .checkbox-light .form__check-text .form__check-link:hover {
  color: var(--ui-accent-hover);
}

.form-elements .checkbox-light .form__check-box {
  border-color: var(--ui-field-border-hover);
  border-radius: 0;
}

.form-elements .checkbox-light .form__check-input:checked + .form__check-box {
  border-color: var(--ui-accent);
  background: var(--ui-accent);
}

/* Залитые кнопки (баннер, окно заявки) — тем же силуэтом со срезанными углами, что и контурные. */
.btn.btn-accent,
.popup__content .form .btn {
  border: 0;
  background-color: var(--ui-accent);
  color: #fff;
  clip-path: polygon(var(--ui-cut) 0, calc(100% - var(--ui-cut)) 0, 100% var(--ui-cut), 100% calc(100% - var(--ui-cut)), calc(100% - var(--ui-cut)) 100%, var(--ui-cut) 100%, 0 calc(100% - var(--ui-cut)), 0 var(--ui-cut));
  transition: background-color .2s ease;
}

.btn.btn-accent:hover,
.popup__content .form .btn:hover {
  border: 0;
  background-color: var(--ui-accent-hover);
  color: #fff;
}

.btn.btn-accent svg {
  display: none;
}

.btn.btn-accent:focus-visible,
.popup__content .form .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.popup__content .form .btn:disabled {
  cursor: default;
}

/* Окно заявки: ритм заголовка, кнопка во всю ширину колонки полей, закрытие без синего круга. */
.popup .body {
  max-width: 560px;
}

.popup__content {
  padding: 48px;
}

.popup__content .popup__title {
  padding-right: 32px;
  font-size: 32px;
  line-height: 1.15;
}

.popup .body .content .popup__subtitle {
  margin-top: 12px;
  color: var(--ui-text-muted);
  font-size: 16px;
  line-height: 1.5;
}

.popup .body .content form .form-elements {
  margin-top: 28px;
}

.popup .body .content form .btn {
  width: 100%;
  min-height: 56px;
}

.popup .body .close {
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 0;
  background-color: transparent;
}

.popup .body .close:before,
.popup .body .close:after {
  width: 56%;
  left: 22%;
  border-radius: 0;
  background: var(--ui-text-muted);
  transition: background-color .2s ease;
}

.popup .body .close:hover {
  opacity: 1;
}

.popup .body .close:hover:before,
.popup .body .close:hover:after {
  background: #fff;
}

@media only screen and (max-width: 760px) {
  .popup__content {
    padding: 40px 20px 24px;
  }

  .popup__content .popup__title {
    width: auto;
    font-size: 26px;
  }

  .popup .body .content .popup__subtitle {
    font-size: 15px;
  }

  .popup .body .content form .form-elements {
    margin-top: 20px;
  }

  .popup .body .close {
    top: 6px;
    right: 6px;
  }
}