/* Форма обратной связи (окно «Get in touch», страницы /about и /gipopo).
   Размеры и цвета задаются в scripts/build.mjs (FORM_STYLE) — их применяет скрипт Тильды.
   Здесь только то, чего в настройках Тильды нет: подсказки в полях, наведение, фокус,
   автозаполнение браузера и сообщения об ошибках на тёмном фоне. */

.tn-atom__form .t-input {
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.tn-atom__form .t-input::placeholder {
  color: rgba(245, 245, 245, 0.55);
  opacity: 1;
}

.tn-atom__form .t-input:hover {
  border-color: #a6a6a6 !important;
}

.tn-atom__form .t-input:focus,
.tn-atom__form .t-input:focus-visible {
  border-color: #f5f5f5 !important;
  background-color: #1a1a1a !important;
  outline: none;
}

.tn-atom__form textarea.t-input {
  padding-top: 16px;
  padding-bottom: 16px;
  line-height: 1.45;
  resize: none;
}

/* браузер при автозаполнении красит поле в свой светлый цвет — возвращаем тёмный */
.tn-atom__form .t-input:-webkit-autofill,
.tn-atom__form .t-input:-webkit-autofill:hover,
.tn-atom__form .t-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f5f5f5;
  caret-color: #f5f5f5;
  box-shadow: 0 0 0 1000px #1a1a1a inset;
  transition: background-color 9999s ease-out;
}

.tn-atom__form .t-submit {
  letter-spacing: 0.04em;
  cursor: pointer;
}

.tn-atom__form .t-submit:focus-visible {
  outline: 2px solid #f5f5f5;
  outline-offset: 3px;
}

/* поле с ошибкой и текст ошибки под ним */
.tn-atom__form .js-error-control-box .t-input {
  border-color: #ff3300 !important;
}

.tn-atom__form .t-input-error {
  color: #ff7a59 !important;
  font-size: 14px;
  line-height: 1.4;
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .tn-atom__form .t-input,
  .tn-atom__form .t-submit {
    transition: none !important;
  }
}

/* сообщение после отправки — в цветах сайта вместо зелёной плашки */
.tn-atom__form .js-successbox,
.tn-atom__form .t-form__successbox {
  background: transparent !important;
  color: #f5f5f5 !important;
  border: 1px solid #6e6e6e;
  border-radius: 4px;
  padding: 22px 20px !important;
  font-size: 17px !important;
  line-height: 1.45;
}