/* CALC_PRICE_2026_09_14 — блок результата калькулятора.
   Оформление повторяет уже существующую карточку .nv-calc: те же скругления,
   та же граница var(--nv-border), тот же фиолетовый акцент. Новых цветов,
   градиентов и свечения не добавляется. */

.nv-calc-res {
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid var(--nv-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, .04);
}

.nv-calc-res[hidden] {
    display: none !important;
}

.nv-calc-res-head {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #c4b5fd;
    text-transform: none;
    margin-bottom: 12px;
}

.nv-calc-res-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--nv-border);
    border: 1px solid var(--nv-border);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
}

.nv-calc-res-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: 14px;
    padding: 12px 14px;
    background: #140f22;
}

.nv-crr-name {
    font-size: 14px;
    color: #e9e5f5;
    min-width: 0;
}

.nv-crr-price {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.nv-crr-term {
    font-size: 12.5px;
    color: #9c95ad;
    white-space: nowrap;
    min-width: 74px;
    text-align: right;
}

.nv-calc-res-note {
    font-size: 12.5px;
    line-height: 1.55;
    color: #9c95ad;
    margin: 0 0 14px;
}

.nv-calc-res-note--wide {
    color: #c9c3d8;
    font-size: 13.5px;
}

.nv-calc-res-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.nv-crc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: transform .12s;
}

.nv-crc:hover {
    transform: translateY(-1px);
}

.nv-crc--primary {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
}

.nv-crc--secondary {
    background: rgba(255, 255, 255, .06);
    border-color: var(--nv-border);
    color: #fff;
}

.nv-crc--link {
    background: none;
    color: #c4b5fd;
    padding: 0 6px;
    min-height: 44px;
    font-weight: 600;
}

/* Телефон: кнопки на всю ширину, строка результата в две линии,
   чтобы длинное название работы не сжимало цену. */
@media (max-width: 560px) {
    .nv-calc-res {
        padding: 15px 14px;
    }

    .nv-calc-res-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }

    .nv-crr-name {
        grid-column: 1 / -1;
        font-size: 13.5px;
    }

    .nv-crr-term {
        text-align: left;
        min-width: 0;
    }

    .nv-crr-price {
        text-align: right;
    }

    .nv-calc-res-cta {
        flex-direction: column;
        align-items: stretch;
    }

    .nv-crc {
        width: 100%;
    }
}

/* CRO_2026_09_14 — иерархия в результате калькулятора.
   Цена должна читаться первой, «Подробнее» — обычная ссылка, а не третья кнопка. */
.nv-crr-price {
    font-size: 21px;
    line-height: 1.2;
}

.nv-crr-name {
    color: #c9c3d8;
}

.nv-crc--link {
    min-height: 0;
    padding: 6px 4px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nv-crc--link:hover {
    transform: none;
}

@media (max-width: 560px) {
    .nv-crr-price {
        font-size: 20px;
    }

    /* «Подробнее» не растягиваем на всю ширину — это не кнопка */
    .nv-crc--link {
        width: auto;
        align-self: center;
    }
}

/* Липкая панель на главной: компонент .mobile-cta-bar уже существует
   на страницах услуг, здесь только приводим его к тёмной палитре главной
   и учитываем safe-area на iPhone. */
body.nv-home .mobile-cta-bar {
    background: rgba(10, 6, 20, .94);
    border-top: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .35);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
}

body.nv-home .mobile-cta-form {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff !important;
    border: 0;
}

body.nv-home .mobile-cta-call {
    background: rgba(255, 255, 255, .07);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, .14);
}

/* панель прячется, пока открыто модальное окно, меню или баннер cookie,
   а также когда пользователь уже видит нужное действие */
body.nv-home .mobile-cta-bar.is-hidden {
    display: none !important;
}

/* CRO_HERO_2026_09_14 — строка фактов под заголовком страницы услуги.
   Отдельный блок, без кнопок и без градиентов: цена, срок, гарантия. */
.svc-hero-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 14px 0 18px;
    font-size: 15px;
    line-height: 1.5;
    color: #c9c3d8;
}

.svc-hero-facts .shf-price {
    font-size: 19px;
    font-weight: 800;
    color: #fff;
}

.svc-hero-facts .shf-sep {
    opacity: .45;
}

@media (max-width: 480px) {
    .svc-hero-facts {
        font-size: 14px;
        gap: 6px;
        margin: 12px 0 14px;
    }

    .svc-hero-facts .shf-price {
        font-size: 18px;
    }

    /* на узком экране разделители только мешают переносу */
    .svc-hero-facts .shf-sep {
        display: none;
    }

    .svc-hero-facts .shf-term::before,
    .svc-hero-facts .shf-warr::before {
        content: "· ";
        opacity: .45;
    }
}

/* На главной базовое правило .mobile-cta-bar из styles-*.css не применяется
   (там оно живёт в другом контексте), поэтому задаём раскладку явно. */
body.nv-home .mobile-cta-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    gap: 8px;
}

@media (min-width: 769px) {
    body.nv-home .mobile-cta-bar {
        display: none;
    }
}

/* NAV_PROBLEMS_2026_09_14 — «Что случилось с телефоном?».
   Навигация, а не призыв к действию: обычные ссылки без кнопок и градиентов,
   чтобы не спорить с «Узнать стоимость». Сетка, а не горизонтальная лента —
   на телефоне ничего не нужно листать вбок. */
.nv-prob {
    margin: -30px 0 46px;
    padding: 18px 20px;
    border: 1px solid var(--nv-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, .025);
}

.nv-prob-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #c4b5fd;
}

.nv-prob-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
}

.nv-prob-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--nv-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .04);
    color: #e9e5f5;
    font-size: 14px;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color .12s, background .12s;
}

.nv-prob-item:hover {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(167, 139, 250, .45);
}

@media (max-width: 560px) {
    .nv-prob {
        margin: -24px 0 34px;
        padding: 15px 14px;
    }

    .nv-prob-list {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .nv-prob-item {
        font-size: 13.5px;
        padding: 9px 11px;
    }
}

@media (max-width: 360px) {
    .nv-prob-list {
        grid-template-columns: 1fr;
    }
}

/* FAB_HOME_2026_09_14 — на десктопе липкая панель скрыта, но селектор
   body:has(.mobile-cta-bar) всё равно срабатывал: элемент есть в разметке.
   Из-за этого блок плавающих кнопок поднимался под кнопку чата и они
   налезали друг на друга. Возвращаем им обычное положение там, где
   панели на экране нет. */
@media (min-width: 769px) {

    body.nv-home .floating-buttons,
    body.nv-home .dcw-aux-fabs {
        bottom: 30px !important;
    }
}


/* MOBILE_CTA_DESKTOP_OFF_2026_09_15 — панель .mobile-cta-bar только для телефона.
   Правило с !important стоит намеренно: раньше сломанный media-запрос выпустил
   наружу «.mobile-cta-bar{display:flex!important}», и панель висела на десктопе.
   Граница ровно 768px: 320–767 — панель есть, 768 и шире — панели нет,
   ни fixed-полосы, ни отступа под неё. */
@media (min-width: 768px) {
    .mobile-cta-bar {
        display: none !important;
    }

    /* панели нет — значит и запаса под неё быть не должно.
       Раньше на 768px ровно панель уже пряталась, а 70px пустоты оставались. */
    body {
        padding-bottom: 0;
    }
}

/* Запас под липкую панель: на главной его не было — index.html не подключает
   service.css, и нижняя часть подвала уходила под панель. Высота панели
   69px плюс safe-area на айфонах с «чёлкой». */
@media (max-width: 767px) {
    body.nv-home {
        /* --cta-bar-h ставит sticky-cta.js по фактической высоте панели:
           на узких экранах подписи кнопок переносятся и панель выше */
        padding-bottom: calc(var(--cta-bar-h, 76px) + env(safe-area-inset-bottom, 0px));
    }
}