/* =====================================================================
 * qx-rtl.css — перекрытия для письма справа налево.
 * 2026-08-26
 *
 * ВСЁ в этом файле привязано к html[dir="rtl"]. На en/ru/zh ни одно
 * правило не матчится, поэтому файл безопасно подключать всем.
 *
 * ---------------------------------------------------------------------
 * КАК ЭТО РАБОТАЕТ (важно, иначе правки отсюда будут «не срабатывать»)
 *
 * Инлайновые <style> страниц лежат в <body>, то есть ПОЗЖЕ этого файла
 * в порядке документа. Значит при равной специфичности выигрывают они.
 * Мы берём не порядком, а СПЕЦИФИЧНОСТЬЮ: префикс html[dir="rtl"]
 * добавляет (0,1,1), и типовой селектор становится (0,2,1) против
 * (0,1,0) у инлайна. Специфичность в каскаде проверяется раньше
 * порядка, поэтому перекрытие выигрывает независимо от позиции.
 *
 * Отсюда два следствия:
 *   1. Селекторы здесь нельзя «упрощать» — сняв html[dir="rtl"],
 *      правило проиграет инлайну.
 *   2. Медиазапросы специфичности НЕ добавляют. Поэтому там, где
 *      у страницы есть мобильное перекрытие, здесь оно продублировано
 *      на той же точке перелома — иначе наше немедийное правило
 *      выиграло бы на всех ширинах и мобильный сброс потерялся бы.
 *
 * Позиционные перекрытия сначала гасят ОБЕ физические стороны в auto,
 * потом ставят логическую. Без этого элемент с заданной шириной
 * оказывается переопределён по обеим сторонам, и по правилам CSS
 * для over-constrained в RTL игнорируется как раз левая — та, которую
 * мы выставили.
 *
 * ---------------------------------------------------------------------
 * НАМЕРЕННО ОСТАВЛЕНО ФИЗИЧЕСКИМ (не трогать, это не недоделка)
 *
 *   Декоративные пятна и свечения — позиционируются в процентах и к
 *   ходу письма отношения не имеют:
 *     .atm-glow, .atm-glow-2, body.dir-b .atm-glow,
 *     .hero-row::before, .article-hero::before, .blog-hub-hero::before,
 *     .cta-block::before, main#main-content > h1:first-child::before
 *
 *   Центрирование через left:50% + transform:translateX(-50%):
 *     .rail-line, .rail-marker, .compare-grid::before,
 *     .cta-section::before, .lc-stage-dot, всплывающий тост
 *
 *   .qx-nudge::after — border-right вместе с transform:rotate(45deg)
 *     рисует симметричный шип вниз. Зеркалить границу нельзя, шип
 *     станет косым. Позицию (right:30px) перекрываем, границу — нет.
 *
 *   Пиксель Яндекса — инлайновый style="left:-9999px" на <img>,
 *     элемент невидим, направление письма неприменимо.
 *
 *   Симметричные пары — от направления не зависят по построению:
 *     #qxNav{left:0;right:0}, .qx-footer-v2-bar{margin ±56px},
 *     .atm-scan, .live-console::before, .lc-stages-track,
 *     .lc-feed::after, .hero-atmosphere::after,
 *     .hero-secondary-cta::after{left:0;right:0},
 *     main > section > *{margin-left:auto;margin-right:auto},
 *     .how-it-works{border-left:none;border-right:none},
 *     main#main-content > .cta-block{margin/padding auto и var(--gutter)}
 *
 *   nav{padding:1rem 180px 1rem 2.5rem} в инлайне статей — мёртвое
 *     правило, перекрыто #qxNav по id. Перекрывать нечего.
 *
 * ---------------------------------------------------------------------
 * ГДЕ ПРИШЛОСЬ ВЗЯТЬ !important (5 мест, каждое подписано ниже)
 *   .lookup-input, .qx-chat-bubble (мобильный),
 *   .safety-block h2, .safety-lead, .hero h1 em
 * Во всех пяти в исходнике стоит !important, и без него перекрытие
 * не победит независимо от специфичности.
 * ===================================================================== */


/* ── 1. Межбуквенный интервал ─────────────────────────────────────────
 * Арабское письмо связное: интервал разрывает лигатурную вязь, а
 * отрицательные значения ещё и наезжают. Гасим целиком.
 * Тройной [dir="rtl"] даёт (0,3,1): среди !important-объявлений спор
 * решает специфичность, а самый цепкий конкурент — body.dir-b .hero h1
 * с (0,2,2). Замер: было 184 элемента с интервалом, стало 0.          */
html[dir="rtl"][dir="rtl"][dir="rtl"],
html[dir="rtl"][dir="rtl"][dir="rtl"] *,
html[dir="rtl"][dir="rtl"][dir="rtl"] *::before,
html[dir="rtl"][dir="rtl"][dir="rtl"] *::after {
  letter-spacing: normal !important;
}
/* Отдельными правилами: незнакомый браузеру псевдоэлемент в общем
   списке обнулил бы весь список, а не только свою строку. */
html[dir="rtl"][dir="rtl"][dir="rtl"] ::placeholder { letter-spacing: normal !important; }
html[dir="rtl"][dir="rtl"][dir="rtl"] ::first-line  { letter-spacing: normal !important; }


/* ── 2. Стрелки ───────────────────────────────────────────────────────
 * В арабском указатель «дальше» смотрит влево. Альтернативный текст
 * остаётся пустым, стрелка не попадает в доступное имя кнопки.        */
html[dir="rtl"] .qx-arrow::after        { content: "←" / ""; }
html[dir="rtl"] .sources-list li::before { content: "←"; }

/* Два направленных значка нарисованы контуром вправо. Отражаем только
   их: галочки, щиты и логотип зеркалить нельзя. Оба aria-hidden. */
html[dir="rtl"] #qxNav .qx-btn-nav svg,
html[dir="rtl"] .qx-chat-send svg { transform: scaleX(-1); }


/* ── 3. Хлебные крошки ────────────────────────────────────────────────
 * Звенья латиницей, разделители «/» нейтральные — алгоритм склеивает
 * цепочку в один левосторонний кусок, и первым справа оказывается
 * последний крош вместо корня. Изоляция делает каждое звено
 * нейтральным объектом, порядок начинает задавать контейнер.          */
html[dir="rtl"] .breadcrumb a { unicode-bidi: isolate; }


/* ── 4. Ссылка «к содержимому» ────────────────────────────────────────
 * Пряталась уводом на left:-9999px. В RTL начальный край правый, и тот
 * же приём отправляет ссылку вправо, ВНУТРЬ прокручиваемой области.
 * Прячем обрезкой: элемент остаётся на (0,0), ширины и прокрутки не
 * создаёт, указатель не ловит, но из обхода с клавиатуры и из чтения
 * скринридером не выпадает.                                           */
html[dir="rtl"] .skip-link {
  left: auto;
  right: auto;
  inset-inline-start: 0;
  clip-path: inset(50%);
}
html[dir="rtl"] .skip-link:focus {
  inset-inline-start: 0;
  clip-path: none;
}


/* ── 5. Шапка и подвал ────────────────────────────────────────────────
 * qx-header.css и qx-footer.css подключаются из <body>, то есть ПОЗЖЕ
 * этого файла. Проверено поштучно: html[dir="rtl"] + тот же селектор
 * даёт строго большую специфичность во всех случаях, исключений нет.
 * Сейчас перекрывать нечего — все направленные объявления там уже
 * логические либо симметричные. Блок оставлен как якорь на будущее. */


/* ── 6. Ввод и подсказки ──────────────────────────────────────────── */
html[dir="rtl"] .tooltip-icon {
  margin-left: 0;
  margin-inline-start: 6px;
}
html[dir="rtl"] .tooltip-box {
  left: auto;
  right: auto;
  inset-inline-start: 0;
}
html[dir="rtl"] .modal-close {
  left: auto;
  right: auto;
  inset-inline-end: 18px;
}

/* Поле поиска: правый отступ держит место под значок «?», который
   уезжает на противоположную сторону. !important — потому что
   в исходнике их четыре штуки и все с !important. */
/* Все четыре правила .lookup-input лежат ВНЕ медиазапросов, побеждает
   последнее в документе: padding:0 48px 0 18px !important. Поэтому
   действующая пара — 18px со стороны начала, 48px со стороны конца,
   а не 16/44 из первого правила. !important обязателен: в исходнике
   он есть. */
html[dir="rtl"] .lookup-input {
  padding-block: 0 !important;
  padding-inline: 18px 48px !important;
}
html[dir="rtl"] .lookup-section::before {
  left: auto;
  right: auto;
  inset-inline-end: 16px;
}



/* ── 7. Метки секций, герой ───────────────────────────────────────── */
/* (0,2,1) перекрывает и голый .section-label::after (0,1,1),
   и .blog-section .section-label::after (0,2,0). */
html[dir="rtl"] .section-label::after {
  margin-left: 0;
  margin-inline-start: 6px;
}
html[dir="rtl"] .hero-row::after {
  left: auto;
  right: auto;
  inset-inline-end: var(--gutter);
}
html[dir="rtl"] .hero-row > .hero::after {
  left: auto;
  right: auto;
  inset-inline-start: 0;
}
html[dir="rtl"] .hero-secondary-cta:hover::after {
  right: auto;
  inset-inline-end: -4px;
}
/* Оптическая подгонка первой буквы под латиницу. Для арабского
   бессмысленна, поэтому просто гасим и обратно не ставим.
   !important — в исходнике margin-left:0 !important. */
html[dir="rtl"] .hero h1 em {
  margin-left: 0 !important;
}
html[dir="rtl"] .hero-switcher {
  left: auto;
  right: auto;
  inset-inline-end: var(--gutter);
}
html[dir="rtl"] .live-mini {
  left: auto;
  right: auto;
  inset-inline-start: var(--gutter);
}
html[dir="rtl"] .lc-stages-fill {
  left: auto;
  right: auto;
  inset-inline-start: calc(12.5% + 4px);
}
@media (max-width: 880px) {
  /* У страницы здесь сброс top/right/left в auto — повторяем логически. */
  html[dir="rtl"] .hero-switcher {
    inset-inline-start: auto;
    inset-inline-end: auto;
  }
}


/* ── 8. Полоса статистики ─────────────────────────────────────────── */
html[dir="rtl"] .stat-item {
  border-right: 0;
  border-inline-end: 1px solid var(--line);
}
html[dir="rtl"] .stat-item:last-child {
  border-inline-end: none;
}
@media (max-width: 768px) {
  html[dir="rtl"] .stat-item:nth-child(2) {
    border-inline-end: none;
  }
}


/* ── 9. Процесс, сравнение, FAQ ───────────────────────────────────── */
/* Асимметрия есть только шире 768px: в @media(max-width:768px)
   у страницы padding:22px 0 — симметричный, перекрывать нечего.
   Без этой обёртки немедийное правило выиграло бы и на мобильном. */
@media (min-width: 769px) {
  html[dir="rtl"] .process-step {
    padding-block: 26px;
    padding-inline: 28px 0;
  }
}
html[dir="rtl"] .process-disclaimer {
  padding-left: 0;
  padding-inline-start: 64px;
}
@media (max-width: 768px) {
  html[dir="rtl"] .process-disclaimer { padding-inline-start: 0; }
}

/* Асимметричные 60px объявлены только внутри @media(min-width:769px),
   поэтому и перекрытие живёт там же — иначе немедийное правило
   выиграло бы и на мобильном, где у исходника асимметрии нет.
   Возвращаем 32px из шортката .compare-col{padding:36px 32px} явно:
   обнуление стороны съело бы боковое поле колонки. */
@media (min-width: 769px) {
  html[dir="rtl"] .compare-col--wait {
    padding-right: 32px;
    padding-inline-end: 60px;
  }
  html[dir="rtl"] .compare-col--sell {
    padding-left: 32px;
    padding-inline-start: 60px;
  }
}

html[dir="rtl"] .faq-item summary {
  padding-block: 24px;
  padding-inline: 0 56px;
}
html[dir="rtl"] .faq-item summary::after {
  left: auto;
  right: auto;
  inset-inline-end: 8px;
}
html[dir="rtl"] .faq-body {
  padding-block: 0 28px;
  padding-inline: 0 60px;
}


/* ── 10. Блок безопасности ────────────────────────────────────────────
 * !important — в исходнике text-align:left !important в обоих. */
html[dir="rtl"] .safety-block h2 { text-align: start !important; }
html[dir="rtl"] .safety-lead     { text-align: start !important; }


/* ── 11. Текст статьи ─────────────────────────────────────────────── */
html[dir="rtl"] .article-body ul,
html[dir="rtl"] .article-body ol,
html[dir="rtl"] .about-body ul,
html[dir="rtl"] .about-body ol {
  padding-left: 0;
  padding-inline-start: 1.5rem;
}
html[dir="rtl"] main.content > ul,
html[dir="rtl"] main.content > ol {
  padding-left: 0;
  padding-inline-start: 24px;
}
html[dir="rtl"] .article-body li {
  padding-left: 0;
  padding-inline-start: 4px;
}
html[dir="rtl"] .article-body blockquote {
  border-left: 0;
  border-inline-start: 3px solid var(--accent);
  padding-block: .4rem;
  padding-inline: 1.25rem 0;
}
html[dir="rtl"] .callout {
  border-left: 0;
  border-inline-start: 3px solid var(--accent);
}
html[dir="rtl"] .callout-info {
  border-inline-start-color: var(--accent);
}
html[dir="rtl"] .disclaimer,
html[dir="rtl"] .result-card .disclaimer {
  border-left: 0;
  border-inline-start: 2px solid var(--line-strong);
}
html[dir="rtl"] .message-card { text-align: start; }

html[dir="rtl"] .sources-list li {
  padding-left: 0;
  padding-inline-start: 18px;
}
html[dir="rtl"] .sources-list li::before {
  left: auto;
  right: auto;
  inset-inline-start: 0;
}


/* ── 12. Таблицы ──────────────────────────────────────────────────── */
html[dir="rtl"] .data-table th,
html[dir="rtl"] .data-table td,
html[dir="rtl"] .holdings-table th,
html[dir="rtl"] .holdings-table td {
  text-align: start;
}
/* (0,3,2) перекрывает .holdings-table td:nth-child(2) с (0,2,1). */
html[dir="rtl"] .holdings-table th:nth-child(2),
html[dir="rtl"] .holdings-table th:nth-child(3),
html[dir="rtl"] .holdings-table td:nth-child(2),
html[dir="rtl"] .holdings-table td:nth-child(3) {
  text-align: end;
}


/* ── 13. Контакты в подвале ───────────────────────────────────────── */
html[dir="rtl"] .contact-handle {
  margin-left: 0;
  margin-inline-start: auto;
  text-align: end;
}


/* ── 14. Баннер кук ───────────────────────────────────────────────── */
html[dir="rtl"] .cookie-banner {
  left: auto;
  right: auto;
  inset-inline-start: 16px;
}


/* ── 15. Виджет чата ──────────────────────────────────────────────────
 * Блок лежит инлайном в 101 файле, в шести редакциях. Значения
 * направленных объявлений во всех редакциях совпадают, поэтому
 * перекрытие одно на всех. .qx-nudge-text есть только в больших
 * блоках about/privacy/terms — перекрываем и его.                     */
html[dir="rtl"] .qx-chat-bubble {
  left: auto;
  right: auto;
  inset-inline-end: 24px;
}
html[dir="rtl"] .qx-chat-panel {
  left: auto;
  right: auto;
  inset-inline-end: 24px;
}
html[dir="rtl"] .qx-nudge {
  left: auto;
  right: auto;
  inset-inline-end: 24px;
  padding-block: 14px;
  padding-inline: 16px 36px;
}
html[dir="rtl"] .qx-nudge-close {
  left: auto;
  right: auto;
  inset-inline-end: 8px;
}
html[dir="rtl"] .qx-nudge-text {
  padding-right: 0;
  padding-inline-end: 14px;
}
/* Позицию шипа переносим, border-right не трогаем — см. шапку файла. */
html[dir="rtl"] .qx-nudge::after {
  left: auto;
  right: auto;
  inset-inline-end: 30px;
}
html[dir="rtl"] .qx-msg-bot ul {
  padding-left: 0;
  padding-inline-start: 20px;
}
@media (max-width: 480px) {
  html[dir="rtl"] .qx-chat-panel { inset-inline-end: 0; }
  html[dir="rtl"] .qx-nudge      { inset-inline-end: 16px; }
  /* !important — на главных страницах есть right:14px!important,
     без гашения он победит: элемент задан по ширине, и при заданных
     обеих сторонах в RTL игнорируется именно левая. Значение берём
     16px — оно общее для всех шести редакций блока; на главных
     кнопка сместится на 2px, это осознанный размен. */
  html[dir="rtl"] .qx-chat-bubble {
    right: auto !important;
    inset-inline-end: 16px;
  }
}

/* ------------------------------------------------------------------ *
 * 16. Курсив — 2026-08-28.
 *
 *    В арабском письме курсива нет. Подключённый IBM Plex Sans Arabic
 *    несёт только прямые начертания (400, 500, 600, 700, все normal),
 *    поэтому на каждом font-style:italic браузер наклоняет глифы сам.
 *    Синтетический наклон ломает форму связок и читается как дефект
 *    набора. 54 места на 11 страницах: 18 <em>, 18 <summary> в FAQ
 *    главной, 5 <blockquote>, 11 заголовков и 2 абзаца.
 *
 *    Гасим наклон перечислением тегов, а не через `*`: латинские
 *    вставки внутри арабской страницы курсив имеют настоящий, и
 *    выключать его всюду подряд незачем.
 *
 *    !important вынужденный: на главной .hero h1 em объявлен с
 *    font-style:italic !important в трёх редакциях подряд.
 * ------------------------------------------------------------------ */
html[dir="rtl"] :is(em, i, cite, dfn, var, q, blockquote, summary,
                    h1, h2, h3, h4, h5, h6, p, li, dd, td, figcaption) {
  font-style: normal !important;
}

/*    Заголовки, summary и blockquote наклон не потеряют: их и так
 *    отличают кегль, насыщенность, а у цитат — лаймовая линейка и
 *    подложка. А вот 14 из 18 <em> стоят в прозе статей, где наклон
 *    был ЕДИНСТВЕННЫМ признаком: вес и цвет там равны абзацу.
 *    Возвращаем выделение насыщенностью. 600 — не произвольное
 *    число, а шаг, которым выделение сделано в других местах сайта:
 *    .feature-card h3 берёт ровно 600 на основе 400. Лаймовый цвет
 *    для прозы был бы громче, чем принято: акцент на сайте отдан
 *    заголовкам и ссылкам.                                          */
html[dir="rtl"] .article-body em {
  font-weight: 600;
}
