/* ==========================================================================
   ЛОНГРИД /ipoteka/ — контент ниже калькулятора (блоки 1-10).
   Полностью изолирован в namespace .lr / .lr-* + плашка ЦБ .cbr-bar.
   Боевой CSS скоупится под .ipoteka-main → коллизий нет (классы lr-* свободны).
   Шрифт Manrope наследуется от страницы. Деплой: apply_lr.py
   ========================================================================== */

/* ---- компактный чип ключевой ставки ЦБ (в hero-copy, над эйбрау; не перекрывает hero) ---- */
.cbr-chip{display:inline-flex;align-items:center;gap:9px;background:#13374f;color:#fff;border-radius:999px;
  padding:6px 15px 6px 7px;margin:0 0 16px;max-width:100%;flex-wrap:wrap;position:relative;z-index:3}
.cbr-chip .cbr-ic{width:28px;height:28px;border-radius:50%;background:rgba(163,217,119,.2);display:grid;place-items:center;color:#a3d977;flex:0 0 auto}
.cbr-chip .cbr-ic svg{width:16px;height:16px}
.cbr-chip .cbr-key{font-size:13px;font-weight:600;color:rgba(255,255,255,.82)}
.cbr-chip .cbr-val{font-size:15px;font-weight:800;color:#a3d977}
.cbr-chip .cbr-date{font-size:12px;color:rgba(255,255,255,.55)}

/* ---- namespace-переменные лонгрида (самодостаточно) ---- */
.lr{
  --lr-green:#a3d977; --lr-green-deep:#8cc65c; --lr-green-dark:#4a6b1f;
  --lr-navy:#13374f; --lr-ink:#1a2330; --lr-muted:#6b7785;
  --lr-line:#e6e8ec; --lr-line-soft:#eef0f2;
  --lr-bg-cream:#f6f2ec; --lr-bg-sky:#eef0ea; --lr-bg-warm:#efe9e2;
  --lr-card:#fff; --lr-amber:#e0903e; --lr-amber-soft:#fdf3e7;
  --lr-r:24px; --lr-r-md:16px; --lr-r-sm:11px;
  color:var(--lr-ink); line-height:1.55;
}
.lr *{box-sizing:border-box}

/* ---- секции и контейнер ---- */
.lr-sec{padding:62px 0}
.lr-sec--cream{background:var(--lr-bg-cream)}
.lr-sec--sky{background:var(--lr-bg-sky)}
.lr-sec--warm{background:var(--lr-bg-warm)}
.lr-container{max-width:1180px;margin:0 auto;padding:0 20px}

/* ---- заголовки ---- */
.lr-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:var(--lr-green-dark);
  background:rgba(163,217,119,.22);padding:6px 13px;border-radius:999px;margin-bottom:16px}
.lr-h{font-size:32px;font-weight:800;color:var(--lr-navy);letter-spacing:-.02em;line-height:1.15;margin:0 0 12px;max-width:780px}
.lr-lead{font-size:16.5px;color:var(--lr-muted);max-width:720px;margin:0 0 34px}
.lr-subh{font-size:20px;font-weight:800;color:var(--lr-navy);margin:8px 0 14px}
.lr-head-center{text-align:center}
.lr-head-center .lr-h,.lr-head-center .lr-lead{margin-left:auto;margin-right:auto}
.lr-head-center .lr-h{max-width:820px}

/* ---- факт-сетка ---- */
.lr-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.lr-facts3{grid-template-columns:repeat(3,1fr)}
.lr-fact{background:var(--lr-card);border:1.5px solid var(--lr-line);border-radius:var(--lr-r-md);padding:22px}
.lr-fact-ic{width:44px;height:44px;border-radius:12px;background:rgba(163,217,119,.2);display:grid;place-items:center;color:var(--lr-green-dark);margin-bottom:14px}
.lr-fact-ic svg{width:23px;height:23px}
.lr-fact h4{font-size:15px;font-weight:800;color:var(--lr-navy);margin:0 0 5px}
.lr-fact p{font-size:13.5px;color:var(--lr-muted);line-height:1.5;margin:0}
.lr-fact b{color:var(--lr-ink)}

/* ---- карточки программ ---- */
.lr-pcards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.lr-pcard{background:var(--lr-card);border:1.5px solid var(--lr-line);border-radius:var(--lr-r);padding:24px;transition:.18s;position:relative;overflow:hidden}
.lr-pcard:hover{border-color:var(--lr-green-deep);box-shadow:0 14px 40px rgba(19,55,79,.09);transform:translateY(-2px)}
.lr-pcard.lr-feat{border-color:var(--lr-green-deep);background:linear-gradient(180deg,rgba(163,217,119,.08),#fff)}
.lr-pcard--wide{grid-column:1 / -1;max-width:calc(50% - 9px);margin-inline:auto}
.lr-pcard-top{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.lr-pcard-ic{width:48px;height:48px;border-radius:13px;background:rgba(163,217,119,.2);display:grid;place-items:center;color:var(--lr-green-dark);flex:0 0 auto}
.lr-pcard-ic svg{width:25px;height:25px}
.lr-pcard-name{font-size:19px;font-weight:800;color:var(--lr-navy)}
.lr-pcard-rate{font-size:13px;font-weight:700;color:var(--lr-green-dark)}
.lr-pcard-rate b{font-size:22px}
.lr-pcard-badge{position:absolute;top:18px;right:18px;font-size:11px;font-weight:800;color:var(--lr-navy);background:var(--lr-green);padding:4px 10px;border-radius:999px}
.lr-pcard ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:6px 0 0;padding:0}
.lr-pcard li{display:flex;gap:9px;font-size:14px;color:var(--lr-ink)}
.lr-pcard li svg{width:17px;height:17px;color:var(--lr-green-deep);flex:0 0 auto;margin-top:2px}
.lr-pcard li b{color:var(--lr-navy);font-weight:700}
.lr-pcard-note{margin-top:14px;font-size:12.5px;color:var(--lr-muted);border-top:1px solid var(--lr-line-soft);padding-top:12px}

/* ---- тёмная врезка ---- */
.lr-darkbox{background:var(--lr-navy);border-radius:var(--lr-r);padding:28px 30px;color:#fff;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.lr-darkbox .lr-db-ic{width:56px;height:56px;border-radius:15px;background:rgba(163,217,119,.2);display:grid;place-items:center;color:var(--lr-green);flex:0 0 auto}
.lr-darkbox .lr-db-ic svg{width:30px;height:30px}
.lr-darkbox .lr-db-tx{flex:1;min-width:260px}
.lr-darkbox .lr-db-tx h3{font-size:19px;font-weight:800;margin:0 0 6px}
.lr-darkbox .lr-db-tx p{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.5;margin:0}
.lr-darkbox .lr-db-tx b{color:var(--lr-green)}

/* ---- шаги ---- */
.lr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:lrs}
.lr-step{background:var(--lr-card);border:1.5px solid var(--lr-line);border-radius:var(--lr-r-md);padding:22px;position:relative}
.lr-step::before{counter-increment:lrs;content:counter(lrs);position:absolute;top:18px;right:20px;font-size:34px;font-weight:800;color:var(--lr-line);line-height:1}
.lr-step h4{font-size:15.5px;font-weight:800;color:var(--lr-navy);margin:0 0 7px;max-width:80%}
.lr-step p{font-size:13.5px;color:var(--lr-muted);line-height:1.5;margin:0}

/* ---- инфо-врезки tip/warn ---- */
.lr-note{display:flex;gap:13px;border-radius:var(--lr-r-md);padding:17px 19px;font-size:14px;line-height:1.55;margin-top:20px}
.lr-note svg{width:21px;height:21px;flex:0 0 auto;margin-top:1px}
.lr-note.lr-tip{background:rgba(163,217,119,.14);color:var(--lr-green-dark)} .lr-note.lr-tip svg{color:var(--lr-green-deep)}
.lr-note.lr-warn{background:var(--lr-amber-soft);color:#8a5a1e} .lr-note.lr-warn svg{color:var(--lr-amber)}
.lr-note b{font-weight:800}

/* ---- таблица ---- */
.lr-tbl{width:100%;border-collapse:collapse;background:var(--lr-card);border-radius:var(--lr-r-md);overflow:hidden;border:1.5px solid var(--lr-line);margin-top:8px}
.lr-tbl th{background:var(--lr-bg-cream);text-align:left;font-size:12.5px;font-weight:800;color:var(--lr-navy);text-transform:uppercase;letter-spacing:.03em;padding:13px 16px}
.lr-tbl td{padding:14px 16px;border-top:1px solid var(--lr-line-soft);font-size:14px;color:var(--lr-ink)}
.lr-tbl td b{color:var(--lr-navy);font-weight:700}
.lr-tbl tr td:last-child{text-align:right;font-weight:700;color:var(--lr-navy)}
.lr-pill{display:inline-block;font-weight:800;color:var(--lr-navy);background:rgba(163,217,119,.2);padding:3px 11px;border-radius:999px;font-size:13.5px}

/* ---- двухколоночное сравнение ---- */
.lr-versus{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lr-vscol{background:var(--lr-card);border:1.5px solid var(--lr-line);border-radius:var(--lr-r-md);padding:22px}
.lr-vscol h4{font-size:16px;font-weight:800;color:var(--lr-navy);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.lr-vscol h4 svg{width:20px;height:20px;color:var(--lr-green-deep)}
.lr-vscol ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.lr-vscol li{font-size:13.5px;color:var(--lr-ink);display:flex;gap:8px}
.lr-vscol li::before{content:'—';color:var(--lr-muted)}

/* ---- CTA воронка ---- */
.lr-cta{margin-top:30px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--lr-card);
  border:1.5px solid var(--lr-green-deep);border-radius:var(--lr-r);padding:22px 26px;box-shadow:0 8px 28px rgba(140,198,92,.12)}
.lr-cta .lr-cttxt{flex:1;min-width:240px}
.lr-cta .lr-cttxt b{font-size:17px;font-weight:800;color:var(--lr-navy);display:block;margin-bottom:3px}
.lr-cta .lr-cttxt span{font-size:13.5px;color:var(--lr-muted)}
.lr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;font-family:inherit;
  font-weight:800;font-size:15px;cursor:pointer;padding:15px 26px;transition:.16s;text-decoration:none;white-space:nowrap}
.lr-btnp{background:var(--lr-green);color:var(--lr-navy)} .lr-btnp:hover{background:var(--lr-green-deep)}

/* ---- адаптив ---- */
@media(max-width:920px){
  .lr-facts,.lr-facts3{grid-template-columns:repeat(2,1fr)}
  .lr-steps{grid-template-columns:1fr}
}
@media(max-width:760px){
  .lr-sec{padding:44px 0}
  .lr-h{font-size:25px}
  .lr-pcards,.lr-versus,.lr-facts3{grid-template-columns:1fr}
  .lr-pcard--wide{max-width:none}
  .lr-darkbox{padding:22px}
  .lr-tbl th:nth-child(2),.lr-tbl td:nth-child(2){display:none}
}

/* 2-Я ШАПКА (sticky subnav, навигация по странице) — прилипает под хедером (77px) после калькулятора.
   Паттерн адаптирован из .pdp-subnav (Самолёт PDP). */
.ip-subnav{position:sticky; top:77px; z-index:40; background:#fff; border-top:1px solid #e6e8ec; border-bottom:1px solid #e6e8ec; padding:11px 0; box-shadow:0 4px 14px rgba(19,55,79,.05)}
.ip-subnav-row{display:flex; align-items:center; gap:18px}
.ip-subnav-anchors{display:flex; gap:20px; overflow-x:auto; scrollbar-width:thin; min-width:0}
.ip-subnav-anchors::-webkit-scrollbar{height:4px}
.ip-subnav-anchors::-webkit-scrollbar-thumb{background:#cdd4dd; border-radius:2px}
.ip-subnav-link{padding:5px 0; color:#3a4754; text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; font-weight:500; font-size:14px; transition:.12s; cursor:pointer}
.ip-subnav-link:hover{color:#13374f}
.ip-subnav-link--active{color:#13374f; font-weight:700; border-bottom-color:#a3d977}
.ip-subnav-more{position:relative; flex-shrink:0}
.ip-subnav-more>summary{list-style:none; cursor:pointer; padding:5px 0; color:#3a4754; white-space:nowrap; font-weight:500; font-size:14px; display:inline-flex; align-items:center; gap:5px; -webkit-user-select:none; user-select:none; transition:color .12s; border-bottom:2px solid transparent}
.ip-subnav-more>summary::-webkit-details-marker{display:none}
.ip-subnav-more>summary:hover{color:#13374f}
.ip-subnav-more[open]>summary{color:#13374f; font-weight:700}
/* активен раздел из выпадающего «Ещё» → подсветить саму кнопку «Ещё» зелёной линией */
.ip-subnav-more.is-active>summary{color:#13374f; font-weight:700; border-bottom-color:#a3d977}
.ip-subnav-more-menu{position:absolute; top:calc(100% + 12px); right:0; background:#fff; border:1px solid #e6e8ec; border-radius:12px; box-shadow:0 14px 40px rgba(19,55,79,.16); padding:8px; display:flex; flex-direction:column; gap:2px; min-width:190px; z-index:5}
.ip-subnav-more-menu .ip-subnav-link{padding:8px 12px; border-radius:8px; border-bottom:0}
.ip-subnav-more-menu .ip-subnav-link:hover{background:#f6f8f4}
.ip-subnav-cta{display:flex; gap:12px; align-items:center; flex-shrink:0; margin-left:auto}
.ip-subnav-tel{font-weight:800; color:#13374f; text-decoration:none; font-size:14px; white-space:nowrap}
.ip-subnav-btn{display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:11px; font-family:inherit; font-weight:800; font-size:14px; cursor:pointer; padding:9px 18px; background:#a3d977; color:#13374f; text-decoration:none; white-space:nowrap; transition:.16s}
.ip-subnav-btn:hover{background:#8cc65c}
/* якорный отступ: хедер 77 + залипшая subnav ~48 */
.ipoteka-main section[id], .ipoteka-main .hero[id]{scroll-margin-top:132px}
@media(max-width:900px){ .ip-subnav-tel{display:none} }
/* на ≤1023 основной хедер сжимается до 60px → subnav прилипает под ним на 60 */
@media(max-width:1023px){
  .ip-subnav{top:60px}
  .ipoteka-main section[id], .ipoteka-main .hero[id]{scroll-margin-top:112px}
}
@media(max-width:760px){
  .ip-subnav{padding:9px 0}
  .ip-subnav-row{gap:10px}
  .ip-subnav-btn{padding:8px 13px; font-size:13px}
}

/* ЛЁГКИЙ ПОПАП ЗАЯВКИ (v2 без magnific): открывается с CTA лонгрида (.popup-link[href="#consult-ipoteka"]),
   форма отправляется существующим submitLead() → /ajax/quiz_lead.php. */
.lead-pop{position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(19,55,79,.55)}
.lead-pop.open{display:flex}
.lead-pop-box{background:#fff; border-radius:20px; max-width:430px; width:100%; padding:30px 28px; position:relative; box-shadow:0 30px 80px rgba(19,55,79,.3); animation:leadPopIn .18s ease}
@keyframes leadPopIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
.lead-pop-x{position:absolute; top:14px; right:14px; width:34px; height:34px; border:0; border-radius:50%; background:#f0f2f5; color:#13374f; cursor:pointer; display:grid; place-items:center}
.lead-pop-x svg{width:16px; height:16px}
.lead-pop-title{font-size:21px; font-weight:800; color:#13374f; margin:0 0 8px; letter-spacing:-.01em}
.lead-pop-sub{font-size:14px; color:#6b7785; margin:0 0 18px; line-height:1.5}
.lead-pop form{display:flex; flex-direction:column; gap:11px}
.lead-pop input{height:50px; border:1.5px solid #e6e8ec; border-radius:12px; padding:0 16px; font-family:inherit; font-size:15px; font-weight:600; color:#1a2330; outline:none}
.lead-pop input:focus{border-color:#8cc65c}
.lead-pop .lead-pop-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; border:0; border-radius:14px;
  font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; padding:15px 26px; background:#a3d977; color:#13374f; transition:.16s}
.lead-pop .lead-pop-btn:hover{background:#8cc65c}
.lead-pop-status{font-size:13px; min-height:1em; text-align:center}
.lead-pop-status.ok{color:#4a6b1f} .lead-pop-status.err{color:#d9534f}
.lead-pop-legal{font-size:11.5px; color:#9aa4b0; line-height:1.4; text-align:center}

/* ФИКС боевого блока «5 шагов» (.steps/.step) на мобайле:
   .step = grid 60px|1fr, но h4/p/.time — отдельные grid-элементы и auto-flow
   роняет описание в узкую колонку номера. Привязываем контент к колонке 2,
   номер — к колонке 1 на всю высоту. (Грузится после ipoteka.css → переопределяет.) */
@media(max-width:760px){
  .ipoteka-main .steps .step{row-gap:4px; column-gap:14px}
  .ipoteka-main .steps .step > .num{grid-column:1; grid-row:1 / span 3}
  .ipoteka-main .steps .step > h4,
  .ipoteka-main .steps .step > p,
  .ipoteka-main .steps .step > .time{grid-column:2}
  .ipoteka-main .steps .step > .time{justify-self:start; margin-top:2px}
}

/* попап регистрации калькулятора поверх прилипшей навигации: пока открыт .reg-overlay — прячем subnav (z-index бесполезен, попап заперт в stacking-context #aprXcalc) */
body:has(#aprXcalc .reg-overlay.show) .ip-subnav{display:none}