/* ═══════════════════════════════════════════════════════
   custom.css — дополнительные компонентные стили
   Подключается ПОСЛЕ frontend.css и dynamic.php
═══════════════════════════════════════════════════════ */

/* ── Логотип ─────────────────────────────────────────── */
.logo-link { display: flex; align-items: center; text-decoration: none; }
.logo-img  { height: 36px; width: auto; max-width: 160px; object-fit: contain; }
.logo-fallback { font-size: 1.25rem; font-weight: 700; color: var(--c-primary, #2563eb); }

/* ── Cookie-consent banner ───────────────────────────── */
.cookie-consent-banner {
    position: fixed;
    z-index: 9999;
    bottom: 1.25rem;
    left: 1.25rem;
    max-width: 380px;
    width: calc(100% - 2.5rem);
    background: #1e293b;
    color: #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
    padding: 1rem 1.125rem;
}
@media (max-width: 639px) {
    .cookie-consent-banner {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        width: 100%;
        border-radius: 1rem 1rem 0 0;
        padding: 1rem;
    }
}
.cookie-consent-inner { display: flex; flex-direction: column; gap: .625rem; }
.cookie-consent-text  { font-size: .8rem; line-height: 1.5; color: #cbd5e1; margin: 0; }
.cookie-consent-link  { color: #93c5fd; text-decoration: underline; }
.cookie-consent-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.cookie-consent-btn-accept {
    flex: 1 1 auto;
    padding: .5rem .875rem;
    background: var(--c-primary, #2563eb);
    color: #fff;
    border: none;
    border-radius: .625rem;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s;
    white-space: nowrap;
}
.cookie-consent-btn-accept:hover { opacity: .85; }
.cookie-consent-btn-decline {
    flex: 1 1 auto;
    padding: .5rem .875rem;
    background: transparent;
    color: #94a3b8;
    border: 1px solid #475569;
    border-radius: .625rem;
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.cookie-consent-btn-decline:hover { color: #e2e8f0; border-color: #94a3b8; }

/* ── Floating CTA button ─────────────────────────────── */
@keyframes floatPulse {
    0%,100% { box-shadow: 0 4px 24px rgba(37,99,235,.5), 0 0 0 0 rgba(37,99,235,.3); }
    50%      { box-shadow: 0 6px 30px rgba(37,99,235,.6), 0 0 0 8px rgba(37,99,235,.0); }
}
.floating-cta-btn {
    position: fixed;
    bottom: 1.75rem;
    right: 1.5rem;
    z-index: 9001;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1.75rem;
    min-width: 210px;
    justify-content: center;
    background: var(--c-accent, #ea580c);
    color: #fff;
    border-radius: 3rem;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(234,88,12,.5);
    animation: floatPulse 2.5s ease-in-out infinite;
    transition: transform .15s, background .15s;
    white-space: nowrap;
}
.floating-cta-btn:hover {
    transform: translateY(-3px) scale(1.03);
    background: var(--c-primary, #2563eb);
    animation: none;
    box-shadow: 0 8px 32px rgba(37,99,235,.55);
}
.floating-cta-btn:active { transform: translateY(0) scale(.98); }
@media (max-width: 639px) {
    /* Отступ снизу страницы = высота floating CTA, чтобы контент не прятался под кнопкой */
    body {
        padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
    }

    /* На мобильных — полная ширина, снизу страницы */
    .floating-cta-btn {
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        min-width: 0;
        border-radius: 0;
        justify-content: center;
        /* Учитываем safe-area на iPhone (жест-бар снизу) */
        padding: 1rem 1.25rem;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        font-size: 1rem;
        font-weight: 800;
        z-index: 9001;
        animation: none; /* отключаем пульсацию — она мешает на мобиле */
        box-shadow: 0 -2px 16px rgba(234,88,12,.3);
    }
    /* Гарантируем что текст всегда видим */
    .floating-cta-btn span {
        display: inline !important;
        opacity: 1 !important;
        visibility: visible !important;
        color: #fff !important;
        font-size: 1rem;
        font-weight: 800;
    }
    .floating-cta-btn svg {
        width: 1.1rem;
        height: 1.1rem;
        flex-shrink: 0;
    }
}

/* ── Форма /form — шире на десктопах ─────────────────── */
@media (min-width: 640px) {
    #form-wrap { max-width: 600px !important; }
}

/* ── Dropdown nav hover gap fix ──────────────────────── */
.nav-dropdown-menu {
    /* invisible bridge covers the gap between button and dropdown */
    padding-top: .625rem;
    margin-top: -.5rem;
}
.nav-dropdown-menu .nav-dropdown-inner {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: .75rem;
    box-shadow: 0 10px 40px rgba(0,0,0,.1);
    padding: .375rem 0;
    overflow: hidden;
}

/* ── MFO comparison grid (responsive by item count) ─── */
.content-mfo-compare {
    display: grid;
    gap: .75rem;
    grid-template-columns: 1fr; /* default: 1 col, overridden by JS/PHP data-count */
}
.content-mfo-compare[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.content-mfo-compare[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.content-mfo-compare[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.content-mfo-compare[data-count="5"] { grid-template-columns: repeat(3, 1fr); }
.content-mfo-compare[data-count="6"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) {
    .content-mfo-compare[data-count="2"],
    .content-mfo-compare[data-count="3"],
    .content-mfo-compare[data-count="4"],
    .content-mfo-compare[data-count="5"],
    .content-mfo-compare[data-count="6"] {
        grid-template-columns: 1fr;
    }
}
.content-mfo-hero {
    position: relative;
    min-width: 0; /* prevent overflow */
    overflow: hidden;
}
.content-mfo-hero-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1rem .75rem;
    overflow: hidden;
}
/* Лого МФО в hero — фиксированная ширина, не растягивается */
.content-mfo-hero-head img {
    max-width: 90px;
    height: 3rem;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    border-radius: .5rem;
    padding: .25rem .4rem;
}
/* Текстовая часть hero заполняет оставшееся место */
.content-mfo-hero-head > div {
    min-width: 0;
    flex: 1;
}
.content-mfo-hero-name {
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.content-mfo-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--c-accent, #ea580c);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: .04em;
    max-width: calc(100% - 1rem);
    overflow: hidden;
    text-overflow: ellipsis;
}
.content-mfo-hero--featured .content-mfo-hero-head {
    background: linear-gradient(135deg, var(--c-primary-dark, #1d4ed8), var(--c-primary, #2563eb));
}

/* ── SEO content page styles ─────────────────────────── */
.seo-content h2 { font-size: 1.25rem; font-weight: 700; color: #0f172a; margin: 1.75rem 0 .75rem; }
.seo-content h3 { font-size: 1.05rem; font-weight: 600; color: #1e293b; margin: 1.5rem 0 .5rem; }
.seo-content h4 { font-size: .95rem; font-weight: 600; color: #334155; margin: 1.25rem 0 .4rem; }
.seo-content p  { margin: 0 0 .875rem; line-height: 1.75; color: #374151; font-size: .9375rem; }
.seo-content ul, .seo-content ol { margin: .5rem 0 1rem 1.25rem; }
.seo-content ul { list-style: disc; }
.seo-content ol { list-style: decimal; }
.seo-content li { margin-bottom: .375rem; line-height: 1.65; color: #374151; font-size: .9375rem; }
.seo-content a  { color: var(--c-primary, #2563eb); text-decoration: underline; }
.seo-content a:hover { opacity: .8; }

/* Tables */
.seo-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0 1.5rem;
    font-size: .875rem;
    overflow: hidden;
    border-radius: .625rem;
    border: 1px solid #e2e8f0;
}
.seo-content thead { background: var(--c-primary, #2563eb); color: #fff; }
.seo-content th    { padding: .625rem 1rem; font-weight: 600; text-align: left; }
.seo-content td    { padding: .5rem 1rem; color: #374151; border-bottom: 1px solid #f1f5f9; }
.seo-content tbody tr:hover { background: #f8fafc; }
.seo-content tbody tr:last-child td { border-bottom: none; }

/* Blockquotes */
.seo-content blockquote {
    margin: 1rem 0;
    padding: .875rem 1.125rem;
    border-left: 4px solid var(--c-primary, #2563eb);
    background: #f0f7ff;
    border-radius: 0 .5rem .5rem 0;
    font-style: italic;
    color: #334155;
}
.seo-content blockquote p { margin: 0; }

/* Callout / Note boxes */
.seo-content .callout, .seo-content .note {
    margin: 1rem 0;
    padding: .875rem 1rem;
    border-radius: .625rem;
    font-size: .875rem;
    display: flex;
    align-items: flex-start;
    gap: .625rem;
}
.seo-content .callout { background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; }
.seo-content .note    { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }

/* ── Pros / Cons grid ─────────────────────────────── */
.seo-content .pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
@media (max-width: 639px) {
    .seo-content .pros-cons { grid-template-columns: 1fr; }
}
.seo-content .pros,
.seo-content .cons {
    border-radius: .75rem;
    padding: 1rem 1.125rem;
}
.seo-content .pros {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}
.seo-content .pros h3 { color: #15803d; margin-top: 0; }
.seo-content .cons {
    background: #fff1f2;
    border: 1px solid #fecdd3;
}
.seo-content .cons h3 { color: #be123c; margin-top: 0; }

/* ── Warning / Risk block ─────────────────────────── */
.seo-content .warning-block {
    background: #fff7ed;
    border: 1.5px solid #fed7aa;
    border-radius: .75rem;
    padding: 1rem 1.125rem;
    margin: 1rem 0 1.5rem;
}
.seo-content .warning-block p { color: #9a3412; margin-bottom: .5rem; }
.seo-content .warning-block p:last-child { margin-bottom: 0; }

/* ── Hero stats — мобильная сетка ────────────────── */
@media (max-width: 639px) {
    /* На мобиле: 4 карточки в сетке 2×2 с зазорами */
    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 16px;
    }
    /* Вертикальные разделители не нужны в grid-режиме */
    .hero-stat-divider { display: none; }
    /* Каждая карточка — отдельный блок с отступами и границей */
    .hero-stat,
    .hero-stat:first-child {
        padding: 10px 14px;
        border-radius: 12px;
        background: rgba(255,255,255,.13);
        border: 1px solid rgba(255,255,255,.18);
        text-align: left;
    }
}

/* ── Offer cards — mobile optimisation ───────────── */
@media (max-width: 480px) {
    /* Compact card layout: больше места для текста параметров */
    .offer-queue-card { gap: 10px; padding: 12px; }
    .offer-queue-logo { width: 48px; height: 36px; }
    /* Уменьшаем кнопку — текст «Получить» не длинный */
    .offer-queue-btn { padding: 8px 14px; font-size: 13px; }
}

/* ── MFO table — mobile optimisation ─────────────── */
@media (max-width: 639px) {
    /* Скрываем «Срок» (4-я колонка) и «Особенность» (6-я) */
    .mfo-table th:nth-child(4),
    .mfo-table td:nth-child(4),
    .mfo-table th:nth-child(6),
    .mfo-table td:nth-child(6) { display: none; }
    /* Уменьшаем паддинги чтобы таблица влезала */
    .mfo-table th, .mfo-table td { padding: 8px 10px; font-size: 13px; }
    .mfo-table-cta-btn { padding: 5px 9px; font-size: 12px; }
    /* Визуальный хинт прокрутки: мягкая тень справа */
    .overflow-x-auto {
        box-shadow: inset -6px 0 8px -6px rgba(0,0,0,.12);
    }
}

/* ── FAQ items in content ─────────────────────────── */
.seo-content .faq-item {
    border: 1.5px solid #e2e8f0;
    border-radius: .75rem;
    padding: 1rem 1.125rem;
    margin-bottom: .75rem;
}
.seo-content .faq-item h3 { margin: 0 0 .5rem; font-size: 1rem; color: #1e293b; }
.seo-content .faq-item p  { margin: 0; color: #374151; }

/* ── Cabinet subpage: override frontend.css .content-article a color ─────── */
/* frontend.css: .content-article a{color:var(--c-primary)} — spec (0,1,1)   */
/* beats .cab-btn--primary{color:#fff} — spec (0,1,0). Fix with higher spec.  */
.content-article .cab-btn--primary,
.content-article .cab-btn--primary:hover { color: #fff; text-decoration: none; }
.content-article .cab-btn--outline        { color: var(--c-primary, #2563eb); text-decoration: none; }
.content-article .cab-btn--outline:hover  { color: #fff; }
/* Tailwind resets: ol,ul,menu{list-style:none} — restore disc for checklist */
.cab-checklist { list-style: disc; }

/* ── Live Feed Widget ─────────────────────────────────────────────────────── */
.zn-live-feed {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.zn-live-feed-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid #f3f4f6;
    background: linear-gradient(135deg, #f8fafc 0%, #eff6ff 100%);
}
.zn-live-feed-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #22c55e;
    animation: lfPulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(34,197,94,.2);
}
@keyframes lfPulse {
    0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
    50%     { opacity: .8; transform: scale(1.2); box-shadow: 0 0 0 6px rgba(34,197,94,.0); }
}
.zn-live-feed-title {
    font-weight: 700;
    font-size: 13px;
    color: #111827;
    flex: 1;
}
.zn-live-feed-count {
    font-size: 11px;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}
.zn-live-feed-list { max-height: 300px; overflow: hidden; }
.zn-live-feed-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-bottom: 1px solid #f9fafb;
    transition: background .25s;
}
.zn-live-feed-item:last-child { border-bottom: 0; }
.zn-live-feed-item--new {
    background: #f0fdf4;
    animation: lfSlideIn 0.45s cubic-bezier(.16,1,.3,1);
}
@keyframes lfSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.zn-live-feed-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--c-primary, #2563eb), #7c3aed);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    letter-spacing: .02em;
}
.zn-live-feed-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zn-live-feed-phone { font-size: 12px; font-weight: 600; color: #374151; white-space: nowrap; }
.zn-live-feed-city  { font-size: 11px; color: #9ca3af; }
.zn-live-feed-meta  { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.zn-live-feed-amount { font-size: 12px; font-weight: 700; color: var(--c-primary, #2563eb); }
.zn-live-feed-time   { font-size: 10px; color: #9ca3af; }
.zn-live-feed-status { flex-shrink: 0; }
.zn-live-feed-badge  { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }


/* Perf: defer heavy below-the-fold rendering without affecting business logic */
@supports (content-visibility: auto) {
    .partners-section,
    .trust-section,
    #zn-live-feed,
    .faq-list,
    .mfo-table,
    .section-gray,
    .benefits-grid,
    .steps-grid {
        content-visibility: auto;
        contain-intrinsic-size: 1px 800px;
    }
}