/* ==========================================================================
   lead.css — окно заявки.

   Задача окна: человек только что посчитал доставку или платёж и решился.
   Ему нельзя ни на секунду усомниться, о чём именно он просит и кому.
   Поэтому внутри окна сначала стоит СВОДКА его же расчёта, и только потом
   поля. Плюс живая альтернатива — позвонить: аудитории 60-75 лет трубка
   привычнее формы, и отнимать у неё этот путь нельзя.
   ========================================================================== */

.lead .lead__box {
  width: 100%; max-width: 560px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(12, 10, 8, .38);
  /* Запас под шапку сверху: окно центрируется по экрану, и без запаса
     его верх на невысоком ноутбуке упирается в полосу меню. */
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── Шапка окна: тёмная, как шапка сайта — человек видит, что он всё ещё
   у того же дилера, а не в чужой форме ─────────────────────────────────── */
.lead__head {
  position: relative;
  background: #1a1712;
  padding: 16px 28px 12px;
  border-bottom: 3px solid var(--color-accent);
}
.lead__title {
  margin: 0 0 4px; padding-right: 44px;
  font-family: var(--font-heading); font-size: 24px; font-weight: 700;
  line-height: 1.15; color: #fff;
}
.lead__lead {
  margin: 0; font-size: var(--fs-small); line-height: 1.5;
  color: #cfc7b6; max-width: 44ch;
}

.lead__close {
  position: absolute; top: 16px; right: 16px;
  width: var(--h-btn-sm); height: var(--h-btn-sm);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245,240,230,.28); border-radius: var(--radius-btn);
  background: rgba(245,240,230,.08); color: #fff; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.lead__close svg { width: 18px; height: 18px; }
.lead__close:hover { background: rgba(245,240,230,.2); }
.lead__close:active { transform: translateY(1px); }
.lead__close:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; }

/* ── Тело ───────────────────────────────────────────────────────────────── */
.lead__body { padding: 20px 28px 20px; }

/* Сводка расчёта. Раскладка та же, что у характеристик в карточке машины:
   подпись сверху, значение снизу, две колонки. Списком в четыре строки она
   занимала 147 пикселей и выталкивала кнопку за край экрана на ноутбуке
   1280×720; сеткой — вдвое меньше, и человек читает её тем же движением
   глаз, что и карточки выше по странице. */
.lead__sum {
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-md);
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px;
}
.lead__sum[hidden] { display: none; }
.lead__sum div { min-width: 0; }
.lead__sum dt {
  font: 700 var(--fs-micro)/1 var(--font-body);
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
  margin-bottom: 4px;
}
.lead__sum dd {
  font-size: var(--fs-small); font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis;
}
/* Итоговая цифра — деньгами и цветом действия: это то, ради чего человек
   и нажал кнопку. */
.lead__sum div:last-child dd {
  color: var(--color-accent); font-family: var(--font-heading);
  font-size: var(--fs-h3); line-height: 1.1;
}

/* Имя и телефон в один ряд: два коротких поля друг под другом растягивают
   окно и заставляют прокручивать до кнопки. */
.lead__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.lead .field { margin-bottom: 12px; }
.lead .field label {
  display: block; margin-bottom: 8px;
  font-size: var(--fs-label); font-weight: 600; color: var(--ink);
}
.lead .field input,
.lead .field textarea {
  width: 100%; min-width: 0;
  padding: 8px 12px;
  font: 400 var(--fs-small)/1.4 var(--font-body);
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lead .field input { min-height: var(--h-btn-sm); }
.lead .field textarea { resize: vertical; min-height: 64px; }
.lead .field input::placeholder,
.lead .field textarea::placeholder { color: var(--ink-soft); opacity: .75; }
.lead .field input:focus,
.lead .field textarea:focus {
  outline: none; border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--green-soft);
}
/* Поле с ошибкой видно и без чтения подписи */
.lead .field input[aria-invalid="true"],
.lead .field textarea[aria-invalid="true"] { border-color: var(--brick); background: #fdf6f4; }
.lead .field-error {
  display: block; margin-top: 6px;
  font-size: var(--fs-label); font-weight: 600; color: var(--brick);
}

.lead__fine {
  margin: 8px 0 0; font-size: var(--fs-micro); line-height: 1.45;
  color: var(--ink-soft);
}

/* ── Альтернатива форме: позвонить ──────────────────────────────────────
   Вопрос и часы слева, номер справа. В одну строку всё втроём не влезало:
   крупный номер зажимался между двумя мелкими серыми надписями и читался
   как случайная вставка. Аудитории 60-75 лет трубка привычнее формы, и этот
   путь должен быть виден, но не спорить с кнопкой отправки. */
.lead__alt {
  margin: 12px 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.lead__alt-text { min-width: 0; }
.lead__alt-text span {
  display: block; font-size: var(--fs-label); font-weight: 600; color: var(--ink);
}
.lead__alt-text small {
  display: block; margin-top: 2px;
  font-size: var(--fs-micro); color: var(--ink-soft);
}
.lead__call {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--h-btn-sm); padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-btn);
  font-family: var(--font-heading); font-size: 20px; font-weight: 700;
  color: var(--color-accent); text-decoration: none; white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lead__call:hover { background: var(--green-soft); border-color: var(--color-accent); color: var(--color-accent-dark); }
.lead__call:active { transform: translateY(1px); }
.lead__call svg { width: 18px; height: 18px; }

/* ── Появление ──────────────────────────────────────────────────────────── */
.lead.is-open .lead__box { animation: leadIn .26s var(--ease); }
@keyframes leadIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lead.is-open .lead__box { animation: none; } }

@media (max-width: 560px) {
  /* На телефоне окно прижимается к низу: до кнопки и полей дотягивается
     большой палец, а не приходится тянуться к середине экрана. */
  .lead.is-open { align-items: flex-end; padding: 0; }
  .lead .lead__box {
    max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 96vh;
  }
  .lead__head { padding: 16px 20px 16px; }
  .lead__title { font-size: 21px; }
  .lead__body { padding: 16px 20px 20px; }
  .lead__grid { grid-template-columns: 1fr; }
  .lead.is-open .lead__box { animation: leadUp .28s var(--ease); }
  @keyframes leadUp { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
}