/* legal.css — стиль страниц /terms /privacy /security.
 * Вынесен из общего style.css 2026-05-13, чтобы юридические страницы
 * не тащили весь лендинг и не ломались на правках главной. Содержит:
 *   - базовую типографику + layout документа
 *   - sticky TOC справа на desktop, sheet вверху на mobile
 *   - accent callouts (info / warn / success / danger)
 *   - mini header/footer
 *   - tariff markers (cssмаркеры вместо эмодзи 📗📘📙📕)
 *   - @media print — белый фон, чёрный текст, без декора
 *
 * Зависит только от CSS variables (--text, --primary-light, --border, --bg-2)
 * которые приходят из style.css (для тем) — без них fallback'и в самих правилах.
 */

/* ── Layout ─────────────────────────────────────────────────────────── */
.legal-page { background: var(--bg, #0a0a14); color: var(--text, #e2e2f0); min-height: 100vh; }
.legal-layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .legal-layout { grid-template-columns: 1fr; gap: 0; padding: 0 18px; }
    .legal-toc { position: relative; top: 0; max-height: none; }
}

/* ── Mini header ────────────────────────────────────────────────────── */
.legal-header {
    border-bottom: 1px solid var(--border, rgba(124, 137, 246, 0.18));
    background: rgba(7, 8, 14, 0.78);
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 50;
}
.legal-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.legal-header-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: 15px;
}
.legal-header-logo img { width: 22px; height: 22px; border-radius: 4px; }
.legal-header-logo b { color: var(--primary-light, #a29bfe); }
.legal-header-nav {
    display: flex;
    gap: 18px;
    margin-left: auto;
    flex-wrap: wrap;
    font-size: 13px;
}
.legal-header-nav a {
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 1px solid transparent;
    transition: border-color .15s, color .15s;
}
.legal-header-nav a:hover { color: var(--text, #e2e2f0); border-bottom-color: var(--primary-light, #a29bfe); }
.legal-header-nav a.is-current { color: var(--primary-light, #a29bfe); }
@media (max-width: 600px) {
    .legal-header-nav { font-size: 12px; gap: 12px; width: 100%; }
}

/* ── Body / typography ──────────────────────────────────────────────── */
.legal-main { padding: 28px 0 80px; min-width: 0; }
.legal-main h1 { font-size: 30px; font-weight: 800; margin: 8px 0 6px; line-height: 1.2; }
.legal-main .legal-updated { font-size: 13px; color: var(--text-muted, rgba(255,255,255,0.55)); margin: 0 0 28px; }
.legal-main h2 {
    font-size: 19px;
    font-weight: 700;
    margin: 34px 0 10px;
    color: var(--primary-light, #a29bfe);
    scroll-margin-top: 80px;     /* sticky-header не наезжает при якоре */
}
.legal-main h3 { font-size: 15.5px; font-weight: 600; margin: 22px 0 8px; color: var(--text, #e2e2f0); scroll-margin-top: 80px; }
.legal-main p,
.legal-main li {
    font-size: 14.5px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.80));
    line-height: 1.72;
}
.legal-main ul { padding-left: 22px; margin: 8px 0; }
.legal-main li { margin-bottom: 6px; list-style: disc; }
.legal-main code {
    background: rgba(124, 137, 246, 0.10);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: var(--primary-light, #a29bfe);
    word-break: break-word;
}
.legal-main a { color: var(--primary-light, #a29bfe); }

/* ── Sticky TOC (right rail on desktop) ─────────────────────────────── */
.legal-toc {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    padding: 14px 14px 14px 18px;
    border-left: 1px solid var(--border, rgba(124, 137, 246, 0.18));
    font-size: 13px;
}
.legal-toc-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    margin: 0 0 10px;
}
.legal-toc ol {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: legal-toc-num;
}
.legal-toc li {
    margin: 0 0 4px;
    counter-increment: legal-toc-num;
}
.legal-toc a {
    display: block;
    padding: 4px 6px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
    text-decoration: none;
    border-radius: 4px;
    border-left: 2px solid transparent;
    transition: background-color .12s, color .12s, border-color .12s;
}
.legal-toc a::before {
    content: counter(legal-toc-num) ". ";
    color: var(--text-muted, rgba(255, 255, 255, 0.4));
    margin-right: 4px;
}
.legal-toc a:hover { background: rgba(124, 137, 246, 0.08); color: var(--text, #e2e2f0); }
.legal-toc a.is-active { border-left-color: var(--primary-light, #a29bfe); color: var(--primary-light, #a29bfe); background: rgba(124, 137, 246, 0.06); }

/* Mobile: TOC превращается в <details> вверху */
.legal-toc-mobile {
    display: none;
    margin: 0 0 24px;
    border: 1px solid var(--border, rgba(124, 137, 246, 0.18));
    border-radius: 10px;
    background: rgba(15, 17, 25, 0.65);
}
.legal-toc-mobile summary {
    cursor: pointer;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    list-style: none;
}
.legal-toc-mobile summary::-webkit-details-marker { display: none; }
.legal-toc-mobile summary::after {
    content: '▾';
    float: right;
    color: var(--text-muted, rgba(255,255,255,0.4));
    transition: transform .15s;
}
.legal-toc-mobile[open] summary::after { transform: rotate(180deg); }
.legal-toc-mobile ol {
    list-style: none;
    padding: 4px 0 12px;
    margin: 0;
    border-top: 1px solid var(--border, rgba(124, 137, 246, 0.10));
}
.legal-toc-mobile li a {
    display: block;
    padding: 8px 14px;
    color: var(--text-secondary, rgba(255, 255, 255, 0.75));
    text-decoration: none;
    font-size: 13.5px;
}
.legal-toc-mobile li a:hover { background: rgba(124, 137, 246, 0.08); }
@media (max-width: 900px) {
    .legal-toc { display: none; }
    .legal-toc-mobile { display: block; }
}

/* ── Accent callouts ────────────────────────────────────────────────── */
.legal-callout {
    margin: 18px 0;
    padding: 14px 16px 14px 50px;
    border: 1px solid var(--border, rgba(124, 137, 246, 0.18));
    border-left-width: 4px;
    border-radius: 10px;
    background: rgba(15, 17, 25, 0.55);
    position: relative;
    font-size: 14px;
    line-height: 1.65;
    color: var(--text, #e2e2f0);
}
.legal-callout::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 14px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.legal-callout-title { font-weight: 700; margin: 0 0 4px; font-size: 14px; }
.legal-callout-info     { border-left-color: #60a5fa; }
.legal-callout-info::before     { background: rgba(96, 165, 250, 0.18); color: #93c5fd; content: 'i'; }
.legal-callout-success  { border-left-color: #4ade80; }
.legal-callout-success::before  { background: rgba(74, 222, 128, 0.18); color: #86efac; content: '✓'; }
.legal-callout-warn     { border-left-color: #fbbf24; }
.legal-callout-warn::before     { background: rgba(251, 191, 36, 0.18); color: #fde68a; content: '!'; }
.legal-callout-danger   { border-left-color: #f87171; }
.legal-callout-danger::before   { background: rgba(248, 113, 113, 0.18); color: #fca5a5; content: '×'; }

/* ── Tariff markers (вместо 📗📘📙📕) ────────────────────────────────── */
.legal-tier-mark {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.legal-tier-mark.basic    { background: linear-gradient(135deg, #4ade80, #22c55e); }
.legal-tier-mark.standard { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.legal-tier-mark.pro      { background: linear-gradient(135deg, #f59e0b, #d97706); }
.legal-tier-mark.premium  { background: linear-gradient(135deg, #c084fc, #a855f7); }

/* ── Mini footer ────────────────────────────────────────────────────── */
.legal-footer {
    border-top: 1px solid var(--border, rgba(124, 137, 246, 0.15));
    margin-top: 60px;
    padding: 28px 24px;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-size: 13px;
}
.legal-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
}
.legal-footer a {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    text-decoration: none;
    margin-right: 16px;
}
.legal-footer a:hover { color: var(--primary-light, #a29bfe); }

/* ── Light theme overrides ──────────────────────────────────────────── */
body.light-theme .legal-page,
body.light-theme.legal-page { background: #f7f7fa; color: #1a1a2e; }
body.light-theme .legal-main p,
body.light-theme .legal-main li { color: #2c2c40; }
body.light-theme .legal-header { background: rgba(247, 247, 250, 0.92); }
body.light-theme .legal-toc a { color: #44446a; }
body.light-theme .legal-callout { background: #ffffff; color: #1a1a2e; }
body.light-theme .legal-main code { background: rgba(108, 92, 231, 0.10); color: #6c5ce7; }

/* ── Print ─────────────────────────────────────────────────────────── */
@media print {
    .legal-header, .legal-footer, .legal-toc, .legal-toc-mobile,
    .bg-grid, .bg-glow, #particles-canvas, .terms-back { display: none !important; }
    .legal-page, body { background: #fff !important; color: #000 !important; }
    .legal-layout { display: block; padding: 0; max-width: 100%; }
    .legal-main { padding: 0; }
    .legal-main h1, .legal-main h2, .legal-main h3 { color: #000 !important; }
    .legal-main p, .legal-main li { color: #1a1a1a !important; font-size: 11pt; line-height: 1.55; }
    .legal-main a { color: #000 !important; text-decoration: underline; }
    .legal-main code { background: #f2f2f2; color: #000; padding: 0 4px; }
    .legal-callout {
        border: 1px solid #999;
        border-left: 3px solid #555;
        background: #fafafa !important;
        color: #000 !important;
        page-break-inside: avoid;
    }
    .legal-callout::before { background: #e5e5e5; color: #333; }
    .legal-tier-mark { background: #333 !important; }
}