/* Форма обратной связи + адаптация intl-tel-input под палитру темы.

   Разметку .iti (флаг, dial-code, dropdown) рисует сама библиотека —
   её не переопределяем, только цвета/размеры под макет. */

.contact-form {
  padding: calc(30 * var(--u));
  border-radius: calc(14 * var(--u));
  background: rgba(13, 44, 72, 0.04);
  border: 1px solid rgba(13, 44, 72, 0.1);
}

.field {
  margin-bottom: calc(18 * var(--u));
}

.field__label {
  display: block;
  margin-bottom: calc(7 * var(--u));
  font-size: calc(19 * var(--u));
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--color-navy);
}

.field__req {
  color: var(--color-gold);
}

.field__input,
.field__textarea {
  width: 100%;
  height: calc(52 * var(--u));
  padding: 0 calc(16 * var(--u));
  font-family: var(--font-family);
  font-size: calc(20 * var(--u));
  font-weight: var(--fw-light);
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid rgba(13, 44, 72, 0.2);
  border-radius: calc(8 * var(--u));
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.field__textarea {
  height: auto;
  min-height: calc(120 * var(--u));
  padding: calc(12 * var(--u)) calc(16 * var(--u));
  line-height: 1.5;
  resize: vertical;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: rgba(44, 42, 40, 0.45);
}

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(218, 155, 42, 0.22);
}

.field__error {
  display: block;
  min-height: calc(20 * var(--u));
  margin-top: calc(5 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  color: #c0392b;
}

.field--error .field__input,
.field--error .field__textarea,
.field--error .iti input[type='tel'] {
  border-color: #c0392b;
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(192, 57, 43, 0.15);
}

/* Ханипот — скрыт от людей, виден ботам.

   Важно: НЕ уводить элемент в left: -9999px. Страница RTL, и такой сдвиг
   растягивает документ по горизонтали (ширина становилась 11439px вместо 1440),
   из-за чего появлялся горизонтальный скролл. Прячем клипом, как .visually-hidden. */
.field--honeypot {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.contact-form__submit {
  width: 100%;
  height: calc(56 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gold);
  color: var(--color-white);
  font-size: calc(22 * var(--u));
  font-weight: var(--fw-medium);
  border-radius: calc(8 * var(--u));
  transition: filter var(--transition-fast), transform var(--transition-fast);
}

.contact-form__submit:hover:not(:disabled) {
  filter: brightness(1.08);
}

.contact-form__submit:active:not(:disabled) {
  transform: translateY(1px);
}

.contact-form__submit:disabled {
  opacity: 0.65;
  cursor: default;
}

.contact-form__submit.is-loading::after {
  content: '';
  width: calc(18 * var(--u));
  height: calc(18 * var(--u));
  margin-inline-start: calc(10 * var(--u));
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: yv-spin 0.7s linear infinite;
}

@keyframes yv-spin {
  to { transform: rotate(360deg); }
}

.contact-form__status {
  min-height: calc(26 * var(--u));
  margin-top: calc(14 * var(--u));
  font-size: calc(19 * var(--u));
  line-height: 1.4;
  text-align: center;
}

.contact-form__status--ok {
  color: #1e8449;
  font-weight: var(--fw-bold);
}

.contact-form__status--error {
  color: #c0392b;
  font-weight: var(--fw-bold);
}

/* ---------- intl-tel-input: только палитра, разметку не трогаем ---------- */
.iti {
  width: 100%;
  display: block;
}

.iti input[type='tel'] {
  width: 100%;
  height: calc(52 * var(--u));
  padding-block: 0;
  font-family: var(--font-family);
  font-size: calc(20 * var(--u));
  font-weight: var(--fw-light);
  color: var(--color-ink);
  background: var(--color-white);
  border: 1px solid rgba(13, 44, 72, 0.2);
  border-radius: calc(8 * var(--u));
  direction: ltr; /* Номер набирается слева направо даже в RTL-странице */
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.iti input[type='tel']:focus {
  outline: none;
  border-color: var(--color-gold);
  box-shadow: 0 0 0 calc(3 * var(--u)) rgba(218, 155, 42, 0.22);
}

/* Пилюля с флагом и кодом страны */
.iti--separate-dial-code .iti__selected-country {
  background: rgba(13, 44, 72, 0.06);
  border-radius: calc(8 * var(--u)) 0 0 calc(8 * var(--u));
}

.iti__selected-dial-code {
  font-size: calc(19 * var(--u));
  color: var(--color-ink);
}

.iti__country-list {
  z-index: 1000;
  text-align: left;
  font-size: calc(17 * var(--u));
  border-radius: calc(8 * var(--u));
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(13, 44, 72, 0.22);
}

.iti__country.iti__highlight {
  background: rgba(218, 155, 42, 0.16);
}

.iti__search-input {
  font-size: calc(17 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
}

@media (max-width: 767px) {
  .contact-form {
    padding: calc(20 * var(--u)) calc(16 * var(--u));
  }

  .field__label {
    font-size: calc(16 * var(--u));
  }

  .field__input,
  .field__textarea,
  .iti input[type='tel'] {
    height: calc(48 * var(--u));
    font-size: calc(17 * var(--u));
  }

  .field__textarea {
    height: auto;
    min-height: calc(110 * var(--u));
  }

  .contact-form__submit {
    height: calc(52 * var(--u));
    font-size: calc(19 * var(--u));
  }

  .contact-form__status {
    font-size: calc(16 * var(--u));
  }
}