/* Встроенный блок заявки на страницах посёлков (nv_leadblock.php).
   Палитра берётся из variables.css сайта: --purple-primary #6D37E0, --purple-secondary #F0EAFF.
   Скругление 28px — как у карточек каталога (.custom-block-radius-28), чтобы блок читался родным. */

/* На сайте нет глобального border-box: с ним input шириной 100% раздувался на padding+border
   (291px поле → 329px поле ввода) и налезал на соседнее поле светлой полосой. */
.nv-lead, .nv-lead *, .nv-lead *::before, .nv-lead *::after { box-sizing: border-box }

/* Композиция вертикальная (текст сверху, форма во всю ширину). Горизонтальную «текст слева /
   форма справа» намеренно не делаем: колонка карточки посёлка всего ~894px, и ряд
   «имя + телефон + кнопка» в неё не помещается — кнопка вылезала за скругление блока.

   Типографика задана явно: блок стоит в разных контейнерах (колонка посёлка, лента каталога),
   а font:inherit тянул то Geologica, то Mulish — кнопка теряла и шрифт, и жирность.
   На сайте body — Geologica, заголовки (.title-h1/h2/h3) — Mulish 800..900. */
.nv-lead {
    font-family: "Geologica", sans-serif;
    margin: 40px 0;
    padding: 32px 34px;
    border-radius: 28px;
    background: linear-gradient(135deg, #7B45E8 0%, #5B22CC 100%);
    box-shadow: 0 18px 40px rgba(52, 16, 132, .18);
}

/* блок стоит прямо в ленте карточек каталога (.objects-list — flex с переносом),
   поэтому занимает всю строку сетки, а вертикальные поля берёт от gap самой сетки */
.nv-lead--row { flex: 0 0 100%; width: 100%; grid-column: 1 / -1; margin: 0 }

.nv-lead__txt { margin-bottom: 22px }

.nv-lead .nv-lead__title {
    margin: 0 0 10px;
    font-family: "Mulish", sans-serif;
    font-weight: 800;
    font-size: 26px;
    line-height: 1.22;
    color: #fff;
}

.nv-lead .nv-lead__sub {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .92);
}

/* В каталоге действует правило сайта `.objects-list *:not(.title-h3) {font-family:Mulish;...}`
   со специфичностью выше, чем у одиночного .nv-lead, — поэтому семейство задаём на самих
   элементах блока, иначе шрифт блока в каталоге и на карточке посёлка отличается. */
.nv-lead .nv-lead__sub,
.nv-lead .nv-lead__legal,
.nv-lead .nv-lead__row input,
.nv-lead .nv-lead__row button { font-family: "Geologica", sans-serif }

.nv-lead__form { min-width: 0 }
/* wrap — страховка: если колонка окажется уже расчётной, кнопка перейдёт на свою строку,
   а не вылезет за скругление блока */
.nv-lead__row  { display: flex; flex-wrap: wrap; gap: 12px }

.nv-lead__field { flex: 1 1 200px; min-width: 130px }
/* маска +7 (___) ___-__-__ должна помещаться целиком, иначе поле выглядит обрезанным */
.nv-lead__field--phone { flex: 1 1 200px; min-width: 186px }

/* Поля намеренно НЕ белые: белая здесь только кнопка — иначе в ряд встают три одинаковых
   белых прямоугольника и кнопка перестаёт читаться как кнопка (проверено на десктопе). */
.nv-lead input {
    width: 100%;
    height: 54px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 14px;
    background: rgba(255, 255, 255, .13);
    font-size: 16px;
    color: #fff;
    outline: none;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.nv-lead input::placeholder { color: rgba(255, 255, 255, .78) }

.nv-lead input:focus {
    background: rgba(255, 255, 255, .2);
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

/* автозаполнение браузера рисует свой светлый фон — возвращаем стеклянный вид */
.nv-lead input:-webkit-autofill,
.nv-lead input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 60px #6535C9 inset;
    caret-color: #fff;
}

/* специфичность через .nv-lead__row: в ленте каталога общие правила сайта перебивали вес кнопки */
.nv-lead .nv-lead__row button {
    flex: 0 1 auto;
    height: 54px;
    padding: 0 28px;
    border: none;
    border-radius: 14px;
    background: #fff;
    font-size: 16px;
    font-weight: 700;
    color: #4A1FAE;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.nv-lead .nv-lead__row button:hover {
    background: var(--purple-secondary, #F0EAFF);
    box-shadow: 0 8px 22px rgba(16, 2, 52, .34);
    transform: translateY(-1px);
}

.nv-lead .nv-lead__row button:active { transform: none }
.nv-lead .nv-lead__row button:disabled { opacity: .6; cursor: default; transform: none }

.nv-lead .nv-lead__legal {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
}

.nv-lead .nv-lead__legal a { color: #fff; text-decoration: underline }

/* доступность: подпись нужна скринридеру, но не нужна глазам — плейсхолдер её дублирует */
.nv-lead__sr {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .nv-lead { padding: 24px 20px; border-radius: 22px; margin: 30px 0 }
    .nv-lead .nv-lead__title { font-size: 21px }
    .nv-lead .nv-lead__sub { font-size: 14px }
    .nv-lead__txt { margin-bottom: 18px }
    .nv-lead__row { flex-direction: column; gap: 10px }
    .nv-lead__field, .nv-lead__field--phone { flex: 0 0 auto; min-width: 0 }
    .nv-lead .nv-lead__row button { width: 100% }
}