/* =========================================================
   СТРАНИЦА "КОНТАКТЫ" — стили, специфичные для страницы.
   Hero, .section-head, .cta-strip и строка уведомлений — общие
   компоненты сайта, здесь не описаны.

   Раньше стили страницы жили в style.css и использовали
   полупрозрачную зелёную заливку в нескольких местах (иконки
   способов связи, блок "О компании" на градиенте, статус формы
   после отправки) — здесь их нет вообще. Блок "О компании" с
   ИП/ОГРНИП убран целиком: это не контакт и не преимущество,
   юридические реквизиты уже есть в футере на каждой странице.
   ========================================================= */

.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 899px) {
  .contacts-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* =========================================================
   СПОСОБЫ СВЯЗИ — вертикальный список кликабельных строк, тот
   же язык, что у каталога инструментов: иконка слева, текст
   посередине, индикатор перехода справа. Каждый способ связи —
   это переход вовне (почта, Telegram, VK), поэтому логично
   выглядит и ведёт себя как список ссылок, а не карточки-плитки.
   ========================================================= */

.contacts-methods-head { margin-bottom: 20px; }
.contacts-methods-head h2 { font-size: 20px; margin-bottom: 6px; }
.contacts-methods-head p { font-size: 14px; color: var(--color-muted); margin: 0; }

.contacts-methods {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-lg);
  padding: 8px 20px;
}

.contacts-method {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 12px;
  margin: 0 -12px;
  border-top: 1px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background var(--transition-fast);
}
.contacts-methods > .contacts-method:first-child { border-top: none; }
.contacts-method:hover { background: var(--color-bg); }

.contacts-method-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: var(--color-accent);
  color: #06231a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 6px 14px -6px rgba(29, 217, 122, 0.5);
}

.contacts-method-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contacts-method-text strong { font-size: 14.5px; font-weight: 700; color: var(--color-text-strong); word-break: break-word; }
.contacts-method-text span { font-size: 12.5px; color: var(--color-muted); }

.contacts-method-go {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--color-muted);
  transition: transform var(--transition-fast), color var(--transition-fast);
}
.contacts-method:hover .contacts-method-go { color: var(--color-accent-dark); transform: translate(2px, -2px); }

/* =========================================================
   ФОРМА — каждое поле продумано отдельно: единый механизм
   фокуса (граница + мягкое свечение, без двойной обводки),
   явная пометка необязательного поля, кастомный чекбокс вместо
   нативного (у него разный вид в каждой ОС/браузере).
   ========================================================= */

.contacts-form-block {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-lg);
  padding: 32px;
}
@media (max-width: 599px) { .contacts-form-block { padding: 22px; } }
.contacts-form-block h2 { font-size: 20px; margin-bottom: 22px; }

.contacts-form { display: flex; flex-direction: column; gap: 18px; }

.contacts-field { display: flex; flex-direction: column; gap: 8px; }
/* Подпись поля. Чекбокс согласия тоже лежит в .contacts-field (ради
   общего вывода ошибки), но у него своя раскладка — его не трогаем */
.contacts-field > label:not(.contacts-checkbox) {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--color-text-strong);
}
.contacts-field-optional {
  font-size: 11px; font-weight: 600; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.contacts-field input,
.contacts-field select,
.contacts-field textarea {
  font-family: var(--font-body);
  font-size: 14.5px;
  padding: 12px 14px;
  border: 1.5px solid var(--ct-border, rgba(43, 47, 51, 0.12));
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text-strong);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contacts-field input::placeholder,
.contacts-field textarea::placeholder { color: var(--color-muted); }
.contacts-field input:hover,
.contacts-field select:hover,
.contacts-field textarea:hover { border-color: rgba(43, 47, 51, 0.2); }
.contacts-field input:focus-visible,
.contacts-field select:focus-visible,
.contacts-field select.is-picker-open,
.contacts-field textarea:focus-visible {
  outline: none;
  background-color: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(29, 217, 122, 0.14);
}
.contacts-field textarea { resize: vertical; min-height: 200px; line-height: 1.6; }

/* Тема обращения — общий селект сайта (стрелка, список и галочка заданы в
   style.css). Здесь только вид закрытого поля: ширина и приглушённая
   подпись, пока тема не выбрана, — как у подсказки в текстовых полях */
.contacts-field select { width: 100%; min-height: 48px; }
.contacts-field select:has(option:checked[value=""]) { color: var(--color-muted); }

/* --- Кастомный чекбокс: нативный input скрыт визуально, но остаётся
   в потоке для клика по всей строке и доступен с клавиатуры —
   фокус на нём подсвечивает саму нарисованную рамку через :focus-visible --- */
.contacts-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  padding: 2px 0;
}
.contacts-checkbox input {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.contacts-checkbox-box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid rgba(43, 47, 51, 0.22);
  background: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.contacts-checkbox-box i { opacity: 0; transform: scale(0.6); transition: opacity var(--transition-fast), transform var(--transition-fast); }
.contacts-checkbox input:checked + .contacts-checkbox-box {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.contacts-checkbox input:checked + .contacts-checkbox-box i { opacity: 1; transform: scale(1); }
.contacts-checkbox:hover .contacts-checkbox-box { border-color: rgba(29, 217, 122, 0.5); }
.contacts-checkbox input:focus-visible + .contacts-checkbox-box { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.contacts-checkbox-text { font-size: 13px; line-height: 1.55; color: var(--color-text); }

.contacts-submit {
  margin-top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background: var(--color-text-strong);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.contacts-submit:hover { background: #000; }
.contacts-submit:active { transform: scale(0.99); }
.contacts-submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- Статус отправки — сплошная заливка вместо полупрозрачной,
   не зависит от того, красный это цвет или зелёный --- */
.form-status:empty { display: none; }
.form-success,
.form-error {
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  animation: contactsSlideIn 200ms ease-out;
}
.form-success { background: var(--color-accent); color: #06231a; }
.form-error { background: #C94747; color: #fff; }

/* --- Ошибка у поля: рамка и текст под полем --- */
.contacts-field-error {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #B03A3A;
}
.contacts-field.is-invalid input,
.contacts-field.is-invalid select,
.contacts-field.is-invalid textarea { border-color: #C94747; background-color: #FFF8F8; }
.contacts-field.is-invalid input:focus-visible,
.contacts-field.is-invalid select:focus-visible,
.contacts-field.is-invalid textarea:focus-visible { box-shadow: 0 0 0 4px rgba(201, 71, 71, 0.14); }
.contacts-field.is-invalid .contacts-checkbox-box { border-color: #C94747; }
.contacts-field--check { gap: 6px; }
/* Ошибка согласия — под текстом, а не под квадратиком: 20 px + 11 px */
.contacts-field--check .contacts-field-error { padding-left: 31px; }
/* Длинный адрес почты не должен распирать блок на узком экране */
.contacts-field-error,
.form-error,
.contacts-success p { overflow-wrap: anywhere; }
.form-error a { color: inherit; font-weight: 700; text-decoration: underline; }

/* --- Поле-ловушка для ботов: вне экрана, не display:none —
   часть ботов пропускает скрытые через display поля --- */
.contacts-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Отправка: индикатор на кнопке вместо иконки --- */
.contacts-submit.is-sending { opacity: 1; cursor: progress; }
.contacts-submit.is-sending i::before { content: "\eec6"; }
.contacts-submit.is-sending i { animation: spin 0.9s linear infinite; }

/* --- Сообщение отправлено ---
   Форма и панель переключаются атрибутом hidden. display:flex ниже
   перебил бы его, поэтому скрытие задано явно.

   Блок не меняет высоту: скрипт перед подменой фиксирует min-height, равную
   высоте формы, — иначе страница под ним (CTA и подвал) за один кадр
   подпрыгивала бы на сотни пикселей. Сообщение стоит по центру блока.
   Состояние .is-sent — графитовый фон как у сайдбара и подвала, плоские
   сплошные цвета без полупрозрачных зелёных заливок --- */
.contacts-form[hidden],
.contacts-success[hidden] { display: none; }

.contacts-form-block { transition: background-color 360ms ease, border-color 360ms ease, box-shadow 360ms ease; }
.contacts-form-block.is-sent {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-color: var(--sidebar-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 60px -32px rgba(25, 27, 30, 0.6);
}
/* Заголовок «Написать нам» остаётся для скринридеров, но над сообщением он лишний */
.contacts-form-block.is-sent > h2 {
  position: absolute;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.contacts-success {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 0;
  outline: none;
}
.contacts-success > * { animation: contactsRise 560ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.contacts-success > .contacts-success-icon { animation: contactsPop 640ms cubic-bezier(0.2, 1.15, 0.3, 1) 80ms both; }
.contacts-success > h3 { animation-delay: 190ms; }
.contacts-success > #contactSuccessText { animation-delay: 260ms; }
.contacts-success > .contacts-success-note { animation-delay: 330ms; }
.contacts-success > .contacts-success-again { animation-delay: 400ms; }

.contacts-success-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(150deg, #34EC93 0%, var(--color-accent) 48%, var(--color-accent-dark) 100%);
  color: #06231a;
  font-size: 30px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -6px 12px -6px rgba(6, 35, 26, 0.35),
    0 14px 34px -10px rgba(29, 217, 122, 0.65);
}
/* Одно кольцо расходится от значка и гаснет — единственный «эффект» */
.contacts-success-icon::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--color-accent);
  animation: contactsRing 1100ms cubic-bezier(0.2, 0.6, 0.3, 1) 260ms both;
  pointer-events: none;
}

.contacts-form-block .contacts-success h3 {
  margin: 26px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
.contacts-form-block .contacts-success p {
  margin: 14px 0 0;
  max-width: 34ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: #B7BEC3;
}
.contacts-success p strong { color: #fff; font-weight: 600; overflow-wrap: anywhere; }
.contacts-form-block .contacts-success .contacts-success-note {
  margin-top: 26px;
  padding-top: 18px;
  max-width: 40ch;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  line-height: 1.55;
  color: #8A9296;
}
.contacts-success-note a {
  color: #E4E8EA;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}
.contacts-success-note a:hover { color: #fff; text-decoration-color: var(--color-accent); }

.contacts-success-again {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.contacts-success-again:hover { background: #fff; color: var(--color-text-strong); border-color: #fff; }
.contacts-success-again:active { transform: scale(0.98); }
.contacts-success-again:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .contacts-submit.is-sending i { animation: none; }
  .contacts-success > *,
  .contacts-success-icon::after { animation: none; }
  .contacts-form-block { transition: none; }
}

@keyframes contactsRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes contactsPop {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes contactsRing {
  from { opacity: 0.6; transform: scale(1); }
  to { opacity: 0; transform: scale(1.7); }
}
@keyframes contactsSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}