/* ==========================================================================
   fulfillment-policy - стили страницы.

   Собрано из source/tajiro скриптом tools/port-tajiro.mjs. Править здесь
   бессмысленно: следующий прогон затрёт. Правка идёт в src/css/.
   ========================================================================== */

/* ========================= HEADER STYLES ========================= */
/* Переопределения шапки для этой страницы. Общая шапка живёт в style.css
   в корне темы. */
/* ========================= /HEADER STYLES ======================== */

/* ========================= PAGE STYLES =========================== */
/* ---------------------------------------------------------------
   css/legal/00-legal.css
   --------------------------------------------------------------- */
/* ==========================================================================
   tajiro — Юридические страницы

   Terms of Service, Privacy Policy, Fulfillment Policy, Cancellation &
   Refund Policy — один шаблон на четыре страницы, как у мини-лендингов.

   Устройство — как у образца (сверка 30.09.2026): шапка сайта,
   одна секция-документ, подвал. Первого экрана, оглавления и призыва перед
   подвалом у образца нет — нет и у нас. Документ открывается заголовком и
   строкой «Last updated», дальше нумерованные разделы, абзацы и списки.

   Оформление наше: кремовый фон страницы, Almarai, зелёный акцент в ссылках
   и маркерах, надзаголовок с линейкой, как у секций сайта. Таблицы — на
   белой плашке: белый в системе только у плашек.

   Колонка текста уже общего контейнера. У образца строка на всю ширину
   1200 — около 160 знаков, длинный документ так читать тяжело. 800 при
   кегле 16–17 — около девяноста знаков.

   Всё, что ниже, — телефонные значения. Ступени идут строго по
   возрастанию: правила равной силы, побеждает последнее подошедшее.
   ========================================================================== */

/* --- Секция и колонка ----------------------------------------------------- */
.lg {
    padding-block: 48px 72px;
}

/* Контейнер тот же, меняется только его потолок. */
.lg__inner {
    --container: 800px;
}

/* --- Шапка документа -------------------------------------------------------
   Надзаголовок с укороченной линейкой — как «Pricing details» над
   комиссиями на странице цен. Заголовок набран .h2, а не .h1: это документ,
   а не первый экран, и у образца заголовок тоже мельче первых экранов. */
.lg__head {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--c-line);
}

.lg__eye {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lg__eye .rule { width: 24px; }

.lg__title { margin-top: 16px; }

.lg__updated { margin-top: 12px; }

.lg__updated strong {
    font-weight: 700;
    color: var(--c-text-strong);
}

/* --- Текст ------------------------------------------------------------------ */
.lg__doc {
    padding-top: 4px;
    font-size: 16px;
    line-height: 26px;
    color: var(--c-text-body);
    overflow-wrap: break-word;
}

.lg__doc p { margin-top: 14px; }

.lg__doc h2,
.lg__doc h3,
.lg__doc h4 {
    font-weight: 700;
    color: var(--c-text);
    text-wrap: balance;
  /* Переход по якорю (#section-8) не прячет заголовок под липкой шапкой. */
    scroll-margin-top: 112px;
}

.lg__doc h2 {
    margin-top: 44px;
    font-size: 21px;
    line-height: 29px;
    letter-spacing: -0.3px;
}

.lg__doc h3 {
    margin-top: 30px;
    font-size: 17px;
    line-height: 25px;
}

.lg__doc h4 {
    margin-top: 24px;
    font-size: 16px;
    line-height: 24px;
}

/* Приложения A и B — вторая часть документа: крупнее разделов и отбиты
   линией во всю колонку. */
.lg__doc .lg__annex {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--c-line);
    font-weight: 800;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: -0.5px;
}

.lg__doc strong {
    font-weight: 700;
    color: var(--c-text-strong);
}

.lg__doc a {
    color: var(--c-green-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Списки без класса — сброс ul[class] из core/base.css их не трогает, но
   поля браузера (40) слишком широки для колонки. */
.lg__doc ul {
    margin-top: 12px;
    padding-left: 22px;
    list-style: disc;
}

.lg__doc li + li { margin-top: 8px; }

.lg__doc li::marker { color: var(--c-green-bright); }

.lg__doc li > ul {
    margin-top: 8px;
    list-style: circle;
}

/* Адрес компании: строки — как в документе, слева золотая линейка —
   тёплый акцент держит декор. */
.lg__doc .lg__address {
    margin-top: 18px;
    padding-left: 16px;
    border-left: 2px solid var(--c-line-gold);
}

/* --- Таблицы ---------------------------------------------------------------
   Белая плашка, строки разведены тонкими линиями, первая колонка —
   название тарифа или услуги — набрана жирным. На узком экране таблица
   прокручивается внутри рамки, а не сжимает колонки до слова в строке:
   отсюда min-width у ячеек. 104, а не 120: при 120 таблицы в три колонки
   на 375 уезжали за рамку на 25–30 точек — прокрутка, которой не видно.
   Теперь три колонки встают целиком, четыре и пять прокручиваются.
   Рамка фокусируется (tabindex в разметке) — прокрутить её можно и с
   клавиатуры. */
.lg__table {
    margin-top: 18px;
    overflow-x: auto;
    border: 1px solid var(--c-line);
    border-radius: 14px;
    background: var(--c-surface);
}

.lg__table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 22px;
}

.lg__table th,
.lg__table td {
    min-width: 104px;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
}

.lg__table thead th {
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--c-text-muted);
    background: var(--c-bg-alt);
    border-bottom: 1px solid var(--c-line);
}

.lg__table tbody th {
    font-weight: 700;
    color: var(--c-text);
}

.lg__table td { color: var(--c-text-body); }

.lg__table tbody tr + tr > * { border-top: 1px solid var(--c-line-soft); }

/* --- Адаптив: снизу вверх --------------------------------------------------- */
@media (min-width: 601px) {
  .lg { padding-block: 64px 88px; }
}

@media (min-width: 901px) {
  .lg { padding-block: 72px 104px; }

  .lg__doc {
      font-size: 17px;
      line-height: 28px;
  }

  .lg__doc h2 {
      margin-top: 52px;
      font-size: 22px;
      line-height: 30px;
  }

  .lg__doc h3 {
      font-size: 18px;
      line-height: 26px;
  }

  .lg__doc .lg__annex {
      margin-top: 80px;
      font-size: 28px;
      line-height: 36px;
  }
}

@media (min-width: 1281px) {
  .lg { padding-block: 88px 120px; }
}
/* ========================= /PAGE STYLES ========================== */

/* ========================= FOOTER STYLES ========================= */
/* Переопределения подвала для этой страницы. */
/* ========================= /FOOTER STYLES ======================== */