/* ===================================================================
   Заңдық құжаттар: жария оферта, құпиялылық саясаты, келісім.

   ⚠️ МӘТІН — I18N СӨЗДІГІНДЕ ЕМЕС, БЕТТІҢ ӨЗІНДЕ. Оферта — мыңдаған
   сөз; оны i18n.js-ке салу сөздікті екі есе үлкейтіп, ӘР БЕТКЕ
   жүктелетін еді. Сондықтан үш тіл беттің ішінде жатыр, біреуі ғана
   көрсетіледі (legal.js ауыстырады).

   ⚠️ ОҚЫЛУЫ БІРІНШІ ОРЫНДА. Заңдық мәтінді адам ЖОҒАРЫДАН ТӨМЕН
   оқымайды — керек бөлімін іздейді. Сондықтан: ені шектеулі, жол
   биіктігі үлкен, бөлімдер нөмірленген, мазмұны жабысып тұрады.
   =================================================================== */

.lg-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 20px 80px;
}

/* ---------- Шапка ---------- */
.lg-top {
    display: flex; align-items: center; gap: 14px;
    padding: 18px 0 26px;
    flex-wrap: wrap;
}
.lg-back {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 15px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-2); font-size: 13.5px; font-weight: 600;
    transition: color .2s, border-color .2s, transform .2s var(--ease);
}
.lg-back:hover { color: var(--brand); border-color: var(--violet-300); transform: translateX(-2px); }
.lg-langs { margin-left: auto; display: flex; gap: 6px; }
.lg-langs button {
    padding: 8px 13px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--surface);
    color: var(--ink-3); font-size: 13px; font-weight: 700;
    transition: color .2s, border-color .2s, background .2s;
}
.lg-langs button:hover { color: var(--brand); border-color: var(--violet-300); }
.lg-langs button.on { color: #fff; background: var(--brand); border-color: var(--brand); }
/* ⚠️ В тёмной теме --brand СВЕТЛЕЕТ до #8B7BFF, и белый текст на нём
   даёт 3.29 — ниже нормы 4.5. Тот же приём, что и у активного пункта
   меню: на светлом фоне текст тёмный. */
[data-theme="dark"] .lg-langs button.on { color: #10091F; }

/* ---------- Тақырып ---------- */
.lg-head { margin-bottom: 30px; }
.lg-head h1 {
    font-family: var(--font-display); font-size: clamp(26px, 4vw, 36px);
    line-height: 1.2; margin: 0 0 10px; color: var(--ink);
}
.lg-meta {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
    font-size: 13px; color: var(--ink-3);
}
.lg-meta b { color: var(--ink-2); font-weight: 600; }

/* ⚠️ ЖАСЫЛ ЖОЛАҚ — ҚҰҚЫҚТЫҚ ЕСКЕРТПЕ, әшекей емес: құжаттың қай
   тілдегі нұсқасы басым екені дауда шешуші болады. */
.lg-note {
    margin: 18px 0 28px; padding: 14px 16px;
    border-radius: var(--r-md, 14px);
    border: 1px solid var(--line);
    /* ⚠️ --surface-2, а НЕ выдуманный --bg-soft. Такой переменной в
       проекте нет, поэтому всегда брался светлый запасной цвет — и в
       тёмной теме плашка оставалась белой со светлым текстом: контраст
       1.56 вместо 4.5, то есть текст было НЕ ВИДНО. */
    background: var(--surface-2);
    font-size: 13.5px; line-height: 1.6; color: var(--ink-2);
}
.lg-note i { color: var(--brand); margin-right: 7px; }

/* ---------- Мазмұны ---------- */
.lg-toc {
    margin: 0 0 34px; padding: 18px 20px;
    border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
    background: var(--surface);
}
.lg-toc h2 {
    font-size: 13px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-3); margin: 0 0 12px;
}
.lg-toc ol { margin: 0; padding-left: 20px; }
.lg-toc li { margin: 6px 0; font-size: 14px; }
.lg-toc a { color: var(--ink-2); transition: color .2s; }
.lg-toc a:hover { color: var(--brand); text-decoration: underline; }

/* ---------- Мәтін ---------- */
.lg-doc { font-size: 15.5px; line-height: 1.75; color: var(--ink-2); }
.lg-doc h2 {
    font-family: var(--font-display); font-size: 20px; line-height: 1.3;
    color: var(--ink); margin: 34px 0 12px;
    /* ⚠️ Жабысқақ шапка тақырыпты жауып қалмауы үшін */
    scroll-margin-top: 80px;
}
.lg-doc h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 20px 0 8px; }
.lg-doc p { margin: 0 0 12px; }
.lg-doc ul, .lg-doc ol { margin: 0 0 14px; padding-left: 22px; }
.lg-doc li { margin: 5px 0; }
.lg-doc a { color: var(--brand); text-decoration: underline; }
.lg-doc strong { color: var(--ink); font-weight: 700; }

/* Деректер кестесі: не жиналады, не үшін, қанша сақталады */
.lg-table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 14px; }
.lg-table th, .lg-table td {
    border: 1px solid var(--line); padding: 9px 12px;
    text-align: left; vertical-align: top;
}
/* ⚠️ Тот же случай, что и у .lg-note: было var(--bg-soft, …) */
.lg-table th { background: var(--surface-2); font-weight: 700; color: var(--ink); }
/* ⚠️ Кесте тар экранда БЕТТІ созбауы керек — өз ішінде жылжиды */
.lg-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- ТОЛТЫРЫЛМАҒАН ОРЫН ----------
   ⚠️ ӘДЕЙІ ҚЫЗЫЛ ЖӘНЕ КӨЗГЕ ТҮСЕДІ. Реквизиттері жоқ оферта —
   жарамсыз құжат. Ол байқаусыз продқа шықпауы үшін орын БАСЫП
   ТҰРУЫ керек, ал lgv риг мұндай белгі қалса — құлайды. */
.lg-todo {
    display: inline-block; padding: 1px 8px; border-radius: 6px;
    background: #FEE2E2; color: #B91C1C;
    font-weight: 700; font-size: .93em;
    /* ⚠️ БЕЗ nowrap: длинная пометка («сгорают / переносятся — нужно
       выбрать») не помещалась в 360px и выносила ВСЮ СТРАНИЦУ вбок. */
    overflow-wrap: anywhere;
}
[data-theme="dark"] .lg-todo { background: #7F1D1D; color: #FECACA; }

/* ---------- Тіл ---------- */
/* Бір мезгілде БІР тіл ғана көрінеді */
.lg-doc[hidden] { display: none; }

/* ---------- Соңы ---------- */
.lg-foot {
    margin-top: 46px; padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 13.5px; color: var(--ink-3);
    display: flex; gap: 18px; flex-wrap: wrap;
}
.lg-foot a { color: var(--ink-2); }
.lg-foot a:hover { color: var(--brand); }

@media (max-width: 560px) {
    .lg-wrap { padding: 0 15px 60px; }
    .lg-doc { font-size: 15px; }
    .lg-langs { width: 100%; margin-left: 0; }
}

@media print {
    .lg-top, .lg-toc, .lg-foot { display: none; }
    .lg-doc { font-size: 11pt; color: #000; }
    .lg-todo { border: 1px solid #000; }
}