/* =====================================================================
   Страница «Recenzija CHEXX Casina» — изолированные стили
   ---------------------------------------------------------------------
   Корень изоляции: .cx-review (уникальный класс <article> этой страницы).
   Все селекторы начинаются с .cx-review — вне статьи правила не действуют.
   Шрифты и цвет текстовых ссылок НЕ переопределяются (исключение — .cx-btn,
   это кнопка-компонент, а не текстовая ссылка).
   Тёмная тема: prefers-color-scheme (см. секцию 17).
   ===================================================================== */

/* ---------- 1. Переменные и корень ---------- */
.cx-review {
  /* светлая палитра */
  --cx-accent:       #157347;                /* фон кнопок, кружки шагов */
  --cx-accent-hover: #0f5132;
  --cx-accent-ink:   #ffffff;                /* текст на акценте */
  --cx-accent-text:  #0f5132;                /* акцентный текст на светлом фоне */
  --cx-accent-soft:  rgba(21, 115, 71, .10); /* подложки акцентных блоков */
  --cx-pos:          #1a7f37;
  --cx-pos-soft:     rgba(26, 127, 55, .10);
  --cx-neg:          #b3261e;
  --cx-neg-soft:     rgba(179, 38, 30, .08);
  --cx-fg:           #24292f;                /* текст внутри компонентов с фоном */
  --cx-fg-dim:       #57606a;
  --cx-surface:      rgba(140, 140, 140, .07);
  --cx-surface-2:    rgba(140, 140, 140, .13);
  --cx-border:       rgba(128, 128, 128, .30);
  --cx-field:        #ffffff;                /* поля форм */
  --cx-radius:       14px;
  --cx-radius-sm:    9px;
  --cx-shadow:       0 1px 2px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.06);

  max-width: 1200px;
  margin: 0 auto;

  line-height: 1.65;
  accent-color: var(--cx-accent); /* нативные чекбоксы/progress под акцент */
  overflow-wrap: break-word;
}

/* ---------- 2. Базовая типографика (без font-family и цвета ссылок) ---------- */
.cx-review p { margin: 0 0 1em; }
.cx-review p:empty { display: none; }        /* артефакты wpautop */
.cx-review h2,
.cx-review h3 { line-height: 1.3; margin: 1.9em 0 .6em; text-wrap: balance; }
.cx-review h2 {
  font-size: 1.6rem;
  padding-bottom: .3em;
  border-bottom: 1px solid var(--cx-border);
}
.cx-review h3 { font-size: 1.2rem; }
.cx-review ul,
.cx-review ol { margin: 0 0 1em;  }
.cx-review li { margin: .3em 0; }
.cx-review strong { font-weight: 700; }      /* на случай сброса темой */
.cx-review small { font-size: .85em; }
.cx-review figure { margin: 1.75rem 0; }
.cx-review figure > img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
}
.cx-review figcaption {
  margin-top: .5rem;
  font-size: .85em;
  color: var(--cx-fg-dim);
  text-align: center;
}
.cx-review h2,
.cx-review h3 { scroll-margin-top: 4.5rem; } /* якоря TOC не прячутся под липкую шапку */
.cx-review a:focus-visible,
.cx-review summary:focus-visible,
.cx-review input:focus-visible,
.cx-review select:focus-visible {
  outline: 2px solid var(--cx-accent-text);
  outline-offset: 2px;
}

/* ---------- 3. Шапка обзора ---------- */
.cx-review .cx-hero {
  margin: 0 0 1.5rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  background: linear-gradient(160deg, var(--cx-accent-soft), transparent 55%), var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  color: var(--cx-fg);
}
.cx-review .cx-hero h1 {
  margin: 0 0 .5em;
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.1rem);
  line-height: 1.25;
  text-wrap: balance;
}
.cx-review .cx-lead { font-size: 1.12em; margin: 0 0 1em; }
.cx-review .cx-score { margin: 0 0 1em; }
.cx-review .cx-score strong { color: var(--cx-accent-text); font-size: 1.2em; }
.cx-review .cx-hero ul { margin: 0; }
.cx-review .cx-hero > :last-child { margin-bottom: 0; }

/* ---------- 4. CTA ---------- */
.cx-review .cx-cta { margin: 1.75rem 0; text-align: center; }
.cx-review .cx-cta br { display: none; }     /* <small> делаем блоком — <br> не нужен */
.cx-review .cx-cta small { display: block; margin-top: .6rem; color: var(--cx-fg-dim); }
/* .cx-btn — ссылка, оформленная как кнопка: цвет задаём здесь осознанно,
   текстовые ссылки страницы не трогаем */
.cx-review .cx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75em 1.9em;
  border-radius: 999px;
  background: var(--cx-accent);
  color: var(--cx-accent-ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--cx-shadow);
  transition: background-color .2s ease, transform .15s ease;
}
.cx-review .cx-btn:link,
.cx-review .cx-btn:visited { color: var(--cx-accent-ink); }
.cx-review .cx-btn:hover,
.cx-review .cx-btn:focus-visible,
.cx-review .cx-btn:active {
  background: var(--cx-accent-hover);
  color: var(--cx-accent-ink);
  text-decoration: none;
  transform: translateY(-1px);
}
.cx-review .cx-btn:active { transform: none; }

/* ---------- 5. «Самое важное» и оглавление ---------- */
.cx-review .cx-takeaways {
  margin: 0 0 1.75rem;
  padding: 1rem 1.25rem;
  background: var(--cx-accent-soft);
  border: 1px solid var(--cx-border);
  border-inline-start: 4px solid var(--cx-accent);
  border-radius: var(--cx-radius-sm);
  color: var(--cx-fg);
}
.cx-review .cx-takeaways p { margin: 0 0 .35rem; }
.cx-review .cx-takeaways ul { margin: .15rem 0 0; }

.cx-review .cx-toc {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  color: var(--cx-fg);
}
.cx-review .cx-toc p { margin: 0 0 .25rem; }
.cx-review .cx-toc ol { margin: 0; padding-inline-start: 1.5rem; }
.cx-review .cx-toc li { margin: .28em 0; }

/* ---------- 6. Карточки оценок ---------- */
.cx-review .cx-scorecard {
  list-style: none;
  margin: 1.25rem 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .6rem;
}
.cx-review .cx-scorecard li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  margin: 0;
  padding: .55rem .9rem;
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  color: var(--cx-fg);
}
.cx-review .cx-scorecard strong { flex: none; color: var(--cx-accent-text); font-size: 1.1em; }

/* ---------- 7. Таблицы ---------- */
.cx-review .cx-table-wrap {
  margin: 1.25rem 0 1.5rem;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  overflow-x: auto;                 /* узкие экраны: скролл вместо разъезда вёрстки */
  -webkit-overflow-scrolling: touch;
}
.cx-review table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
  color: var(--cx-fg);
}
.cx-review table caption {
  padding: .7rem .85rem;
  font-weight: 700;
  text-align: left;
  background: var(--cx-surface-2);
  border-block-end: 1px solid var(--cx-border);
}
.cx-review table th,
.cx-review table td {
  padding: .6rem .75rem;
  text-align: left;
  vertical-align: top;
  border-block-end: 1px solid var(--cx-border);
  overflow-wrap: break-word;
}
.cx-review table thead th { background: var(--cx-surface-2); font-weight: 700; }
.cx-review table th[scope="row"] { font-weight: 700; }
.cx-review table tbody tr:last-child th,
.cx-review table tbody tr:last-child td { border-block-end: 0; }
.cx-review table tbody tr:nth-child(2n) { background: var(--cx-surface); }
/* строка .cx-best генерируется JS инструмента выбора сети —
   селектор усилен, чтобы перекрыть зебру независимо от порядка правил */
.cx-review table tbody tr.cx-best { background: var(--cx-accent-soft); }
.cx-review table tbody tr.cx-best th { color: var(--cx-accent-text); }

/* ---------- 8. Интерактивные инструменты (.cx-tool) ---------- */
.cx-review .cx-tool {
  margin: 1.5rem 0;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius);
  color: var(--cx-fg);
}
.cx-review .cx-tool > h3:first-child { margin-top: 0; }
.cx-review .cx-tool label { display: block; margin: .9rem 0 .3rem; font-weight: 700; }
.cx-review .cx-tool select {
  width: 100%;
  max-width: 18rem;
  min-height: 44px;
  padding: .5em .75em;
  font: inherit;                    /* наследуем шрифт темы, а не системный */
  color: var(--cx-fg);
  background: var(--cx-field);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
}
.cx-review .cx-tool .cx-table-wrap { margin: .9rem 0 0; }
.cx-review .cx-tool .cx-note {      /* примечание внутри инструмента — без рамки */
  margin: .6rem 0 0;
  padding: 0;
  background: none;
  border: 0;
  font-size: .85em;
  color: var(--cx-fg-dim);
}

/* прогресс-бар чек-листа */
.cx-review progress {
  display: block;
  width: 100%;
  height: 10px;
  margin: .4rem 0 .2rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
}
.cx-review progress::-webkit-progress-bar   { background: var(--cx-surface-2); border-radius: 999px; }
.cx-review progress::-webkit-progress-value { background: var(--cx-accent); border-radius: 999px; }
.cx-review progress::-moz-progress-bar      { background: var(--cx-accent); border-radius: 999px; }
.cx-review .cx-tool p[aria-live] { margin: .2rem 0 .4rem; }
.cx-review .cx-tool p[aria-live] strong { color: var(--cx-accent-text); }

/* чек-лист перед первой выплатой */
.cx-review .cx-check { list-style: none; margin: .5rem 0 0; padding: 0; }
.cx-review .cx-check li { margin: 0; }
.cx-review .cx-check br { display: none; }  /* <small> делаем блоком */
.cx-review .cx-check label {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  min-height: 44px;                 /* вся строка — кликабельная зона ≥ 44px */
  padding: .6rem .25rem;
  border-block-start: 1px solid var(--cx-border);
  cursor: pointer;
}
.cx-review .cx-check li:first-child label { border-block-start: 0; }
.cx-review .cx-check label:hover { background: var(--cx-surface); }
.cx-review .cx-check label > span { flex: 1 1 auto; }
.cx-review .cx-check input[type="checkbox"] { flex: none; width: 1.25em; height: 1.25em; margin: .2em 0 0; }
.cx-review .cx-check small { display: block; margin-top: .1rem; color: var(--cx-fg-dim); }

/* ---------- 9. Пошаговые инструкции ---------- */
.cx-review .cx-steps { list-style: none; counter-reset: cx-step; margin: 1rem 0 1.5rem; padding: 0; }
.cx-review .cx-steps > li {
  position: relative;
  margin: .9rem 0;
  padding: .1rem 0 .1rem 3.1rem;
  counter-increment: cx-step;
}
.cx-review .cx-steps > li::before {
  content: counter(cx-step);
  position: absolute;
  top: 0;
  left: 0;                          /* физические координаты как fallback */
  inset-inline-start: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  font-size: .95rem;
  font-weight: 700;
  color: var(--cx-accent-ink);
  background: var(--cx-accent);
  border-radius: 50%;
}

/* ---------- 10. Советы и примечания ---------- */
.cx-review .cx-tip,
.cx-review .cx-note {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  border-radius: var(--cx-radius-sm);
  color: var(--cx-fg);
}
.cx-review .cx-tip {
  background: var(--cx-accent-soft);
  border: 1px solid var(--cx-border);
  border-inline-start: 4px solid var(--cx-accent);
}
.cx-review .cx-note {
  background: var(--cx-surface);
  border: 1px dashed var(--cx-border);
  font-size: .92em;
}
.cx-review .cx-tip p,
.cx-review .cx-note p { margin: .25rem 0; }
.cx-review .cx-tip small,
.cx-review .cx-note small { color: var(--cx-fg-dim); }

/* ---------- 11. «Делайте / избегайте» ---------- */
.cx-review .cx-two {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}
.cx-review .cx-two > div { min-width: 0; }
.cx-review .cx-pos,
.cx-review .cx-neg {
  padding: 1rem 1.15rem;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  color: var(--cx-fg);
}
.cx-review .cx-pos { background: var(--cx-pos-soft); border-inline-start: 4px solid var(--cx-pos); }
.cx-review .cx-neg { background: var(--cx-neg-soft); border-inline-start: 4px solid var(--cx-neg); }
.cx-review .cx-pos .cx-h { margin: 0 0 .4rem; color: var(--cx-pos); }
.cx-review .cx-neg .cx-h { margin: 0 0 .4rem; color: var(--cx-neg); }
.cx-review .cx-two ul { list-style: none; margin: 0; padding: 0; }
.cx-review .cx-two li { position: relative; margin: .45rem 0; padding-left: 1.55rem; }
.cx-review .cx-pos li::before,
.cx-review .cx-neg li::before {
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 700;
}
.cx-review .cx-pos li::before { content: "✓"; color: var(--cx-pos); }
.cx-review .cx-neg li::before { content: "✕"; color: var(--cx-neg); }

/* ---------- 12. FAQ (аккордеон) ---------- */
.cx-review .cx-faq { margin: 1rem 0 1.5rem; }
.cx-review .cx-faq details {
  margin: .5rem 0;
  background: var(--cx-surface);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
}
.cx-review .cx-faq details[open] { background: var(--cx-surface-2); }
.cx-review .cx-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 48px;
  padding: .75rem 1rem;
  font-weight: 700;
  color: var(--cx-fg);
  cursor: pointer;
  list-style: none;
}
.cx-review .cx-faq summary::-webkit-details-marker { display: none; } /* Safari */
.cx-review .cx-faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--cx-accent-text);
}
.cx-review .cx-faq details[open] summary::after { content: "−"; }
.cx-review .cx-faq details > p { margin: 0; padding: 0 1rem .85rem; }

/* ---------- 13. Итоговый вердикт ---------- */
.cx-review .cx-verdict {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--cx-accent-soft);
  border: 1px solid var(--cx-accent);
  border-radius: var(--cx-radius);
  color: var(--cx-fg);
}
.cx-review .cx-verdict > p { margin: .4rem 0; }
.cx-review .cx-verdict > p:first-child { margin-block-start: 0; font-size: 1.15rem; }
.cx-review .cx-verdict > p:first-child strong { color: var(--cx-accent-text); font-size: 1.22em; }
.cx-review .cx-verdict > p:last-child { margin-block-end: 0; }

/* ---------- 14. Защита [hidden] ----------
   JS страницы показывает/прячет элементы атрибутом hidden. Если у темы
   есть правило вида `p { display: block }`, оно перебивает скрытие
   (правила автора всегда сильнее UA-стилей) — страховка обязательна.
   Стоит в конце файла, чтобы выигрывать при равной специфичности. */
.cx-review [hidden] { display: none; }

/* ---------- 15. Запас под инструменты fit / week / myths / score ----
   В присланной разметке этих блоков НЕТ, но общий скрипт страницы умеет
   их оживлять. Минимальные стили состояний — если добавите блоки позже. */
.cx-review [data-pick] {
  font: inherit;
  min-height: 44px;
  padding: .5em 1em;
  color: var(--cx-fg);
  background: var(--cx-field);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  cursor: pointer;
}
.cx-review [data-pick]:hover { background: var(--cx-surface-2); }
.cx-review [data-pick]:disabled { opacity: .55; cursor: default; }
.cx-review .is-ok { color: var(--cx-pos); }
.cx-review .is-no { color: var(--cx-neg); }
.cx-review .cx-myth.is-right { border-color: var(--cx-pos); }
.cx-review .cx-myth.is-wrong { border-color: var(--cx-neg); }
.cx-review .cx-ans { margin-top: .5rem; }
.cx-review [data-panel] { margin-block: .75rem 0; }

/* ---------- 16. Адаптив ---------- */
@media (max-width: 860px) {
  .cx-review h2 { font-size: 1.5rem; }
  .cx-review .cx-hero { padding: 1.15rem 10px; }
  .cx-review .cx-steps > li { padding-left: 2.8rem; }
  .cx-review .cx-steps > li::before { width: 2rem; height: 2rem; font-size: .9rem; }
  .cx-review table { font-size: .9rem; }
  .cx-review table th,
  .cx-review table td { padding: .5rem .6rem; }
}

@media (max-width: 600px) {
  
  .cx-review h2 { font-size: 1.4rem; }
  .cx-review h3 { font-size: 1.1rem; }
  .cx-review .cx-two { grid-template-columns: 1fr; }
  .cx-review .cx-btn { width: 100%; }
  .cx-review .cx-scorecard { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .cx-review .cx-tool { padding: 1rem 1rem .85rem; }
  .cx-review .cx-tool select { max-width: none; }
  .cx-review .cx-check label { padding: .55rem .1rem; }
  .cx-review .cx-faq summary { min-height: 44px; padding: .65rem .85rem; }
  .cx-review .cx-verdict { padding: 1rem 1.1rem; }
  .cx-review .cx-takeaways,
  .cx-review .cx-toc { padding: .9rem 1rem; }
}

/* ---------- 17. Тёмная тема (авто по настройке ОС) ---------- */
@media (prefers-color-scheme: dark) {
  .cx-review {
    color-scheme: dark;             /* нативные контролы и скроллбары — тёмные */
    --cx-accent:       #2fbf74;
    --cx-accent-hover: #45d185;
    --cx-accent-ink:   #052013;
    --cx-accent-text:  #58d68d;
    --cx-accent-soft:  rgba(47, 191, 116, .14);
    --cx-pos:          #3fb950;
    --cx-pos-soft:     rgba(63, 185, 80, .12);
    --cx-neg:          #f85149;
    --cx-neg-soft:     rgba(248, 81, 73, .11);
    --cx-fg:           #e6edf3;
    --cx-fg-dim:       #9198a1;
    --cx-surface:      rgba(240, 246, 252, .05);
    --cx-surface-2:    rgba(240, 246, 252, .10);
    --cx-border:       rgba(240, 246, 252, .17);
    --cx-field:        #10161c;
    --cx-shadow:       0 1px 2px rgba(0,0,0,.5), 0 10px 28px rgba(0,0,0,.35);
  }
}

/* ---------- 18. Reduced motion ----------
   !important здесь необходим и осознан: правило обязано перекрыть в том
   числе transition'ы темы внутри статьи, чья специфичность может быть
   выше. Отключение анимации — требование доступности. */
@media (prefers-reduced-motion: reduce) {
  .cx-review *,
  .cx-review *::before,
  .cx-review *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}
ol{
  list-style: none;
}