/* ============================================================================
   Brand review template — ghanaweb.com/casino/hu/
   D3, 4 вересня 2026. Верстка макета D2 (design/*.dc.html).

   Що тут Є: тільки нове. Кнопки, галочки/хрестики, FAQ, плюси/мінуси і шапка
   таблиць беруться з живої теми casinosguide (c-ada3d83d3d3e.css) — ці класи
   тут НЕ перевизначаються, лише розкладаються по сітці.

   Що тут спеціально НЕ описано (дає тема):
     .btn / .btn-visit   — CTA, 250x44, radius 5, 14/700 uppercase, стрілка-спрайт
     .check-list li      — галка 14px зі спрайта, padding-left 23
     .not-list li        — хрестик зі спрайта
     .side .pros/.cons   — фони #E7FAEE / #FFE6E6
     .faq / .faq__item / .faq-btn / .faq-heading — нумерований details
     table th            — #F5F6F8, 13/600, #100E0E

   Порядок підключення: ПІСЛЯ теми і після інлайнового <style> сторінки теки.
   `!important` стоїть рівно там, де інлайновий блок сторінки задає типографіку
   колонки (`#medsectionWideRight .article-left-col`, `.article-content-area p`)
   і без нього перебиває наші значення.
   ========================================================================== */

.brv {
  --brv-ink: #171616;
  --brv-ink-2: #333333;
  --brv-body: #262626;
  --brv-muted: #5C5C5C;
  --brv-surface: #F5F6F8;
  --brv-line: #ececec;
  --brv-cta: var(--main-color, #FF0000);
  --brv-cta-hover: var(--btn-visit-hover, #D70000);
  --brv-accent: var(--border-card-first, #D70304);
  --brv-dark: var(--bonus, #171616);
  --brv-green: #70A703;
  --brv-green-ink: #107935;
  --brv-amber: #FFBC0A;
  --brv-red: #AD0002;
  --brv-pros: #E7FAEE;
  --brv-cons: #FFE6E6;
  --brv-track: #e3e6e8;
  --brv-r: 7px;
  --brv-r-sm: 5px;
  --brv-gap: 30px;

  font-family: Inter, Arial, Helvetica, sans-serif;
  color: var(--brv-body);
}

.brv *,
.brv *::before,
.brv *::after { box-sizing: border-box; }

/* Типографіка. Тіло 15/24 — значення макета D2; інлайновий блок сторінки теки
   ставить у цій колонці 13/1.4, тому перебивається свідомо (розбіжність №2,
   винесена в зведення D3). Один рядок — і сторінка повертається до 13px. */
.brv p,
.brv li,
.brv td { letter-spacing: normal; }

/* Типографіка ТІЛА не перевизначається — рішення Дмитра 4.09: «делай как на
   живом сайте, шобы велик не придумывать». Абзаци огляду беруть те саме, що
   решта сторінок теки: інлайновий <style> сторінки задає в цій колонці
   Inter 13/1.4 #262626 на десктопі і Tahoma 16/1.5625 #000 на мобайлі.
   Макет D2 малювався на 15/24 — це була друга розбіжність із живим CSS
   (перша — рамп H1), і закрита вона на користь сайту, а не макета.

   Розмір тексту — теки, відступи між блоками — наші: тому `!important` стоїть
   на margin абзаців (тека дає 10px десктоп / 20px мобайл, і на мобайлі це
   розсовує лід від свого H2) і на двох підписах, які справді дрібніші за тіло.
   Правило теки (`…article-content-area p:not(.card-table-bonus-text)
   :not(.card-link)`) — 1 id + 4 класи, розумним селектором не побивається,
   зате саме воно БЕЗ !important, тому наше виграє. */
.brv p,
.brv li,
.brv td { letter-spacing: normal; }

.brv .brv-lead { margin: 0 0 14px !important; }
.brv .brv-intro p { margin: 0 0 12px !important; }

.brv .brv-intro p:last-child,
.brv .faq .text p:last-child,
.brv .brv-legal__text p:last-child { margin-bottom: 0 !important; }

.brv .brv-offer__note {
  font-size: 14px !important;
  line-height: 21px !important;
  color: var(--brv-muted) !important;
  margin: 0 !important;
}

.brv .brv-legal__text p {
  font-size: 14px !important;
  line-height: 21px !important;
  margin: 0 0 8px !important;
}

.brv .brv-scroll-hint {
  font-size: 11px !important;
  line-height: 16px !important;
  color: #8d8d8d !important;
  margin: 4px 0 0 !important;
}

.brv h1,
.brv h2,
.brv h3 {
  color: var(--brv-ink);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Рамп макета: 30 / 26 / 20. Тема дає H1 24 (дрібніший за H2 — баг теми),
   тому H1 перебивається; id у селекторі потрібен, щоб побити
   `#medsectionWideRight .article-left-col h1`. */
#medsectionWideRight .article-left-col .brv-h1,
.brv .brv-h1 {
  font-size: 30px !important;
  line-height: 38px !important;
  margin: 14px 0 18px !important;
}

.brv .brv-h2 {
  font-size: 26px;
  line-height: 34px;
  margin: 0 0 8px;
}

.brv .brv-h2--tight { margin-bottom: 16px; }

.brv .brv-h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  margin: 0 0 10px;
}

/* Якір під фіксовану шапку сайту (.top-bar 58px десктоп / 50 мобайл). */
.brv [id] { scroll-margin-top: 70px; }

.brv-section { margin-bottom: var(--brv-gap); }

.brv-ph {
  color: #8d8d8d;
  border-bottom: 1px dashed #c2c2c2;
  font-style: normal;
}

.brv-nodata { color: #8d8d8d; }

/* ── 02 автор · дата · час читання (над H1, рішення Дмитра 4.09) ─────────── */
.brv-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 12px 0 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--brv-muted);
}

.brv-byline__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.brv-byline__sep { color: #cfcfcf; }

.brv-byline__author {
  color: #100E0E;
  font-weight: 600;
  text-decoration: underline;
}

.brv-byline__read {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.brv-byline__src { font-size: 12px; }

.brv-byline__src a {
  color: #1e446b;
  text-decoration: underline;
}

/* ── 04 offer-card ───────────────────────────────────────────────────────── */
.brv-offer {
  border: 1px solid var(--brv-line);
  border-top: 3px solid var(--brv-accent);
  border-radius: var(--brv-r);
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .06);
  padding: 20px;
  margin-bottom: 22px;
}

.brv-offer__top {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.brv-offer__brand {
  width: 200px;
  min-width: 200px;
  text-align: center;
}

.brv-offer__logo {
  display: block;
  width: 200px;
  height: 90px;
  object-fit: cover;
  border-radius: var(--brv-r-sm);
  background: var(--brv-surface);
  margin-bottom: 8px;
}

.brv-offer__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--brv-ink);
}

.brv-offer__score {
  flex: 1;
  min-width: 0;
}

.brv-offer__aside {
  width: 250px;
  min-width: 250px;
  border-left: 1px solid var(--brv-line);
  padding-left: 22px;
}

.brv-offer__note {
  font-size: 14px;
  line-height: 21px;
  color: var(--brv-muted);
  margin: 0;
}

.brv-offer__note a {
  color: #100E0E;
  text-decoration: underline;
}

/* Оцінка N/10 — новий компонент №1. Зірок теми (.rating-list, спрайт 83x14,
   у всіх листингах 5/5) на огляді немає свідомо. */
.brv-score {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.brv-score__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 44px;
  color: var(--brv-ink);
}

.brv-score__max {
  font-size: 18px;
  font-weight: 600;
  color: var(--brv-muted);
}

.brv-score__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--brv-muted);
  margin-left: 4px;
}

.brv-segbar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 16px;
}

.brv-seg {
  height: 7px;
  border-radius: 2px;
  background: var(--brv-track);
}

.brv-seg--on { background: var(--brv-seg-color, var(--brv-green)); }

/* Останній, частково залитий сегмент: --brv-seg-cut ставить шаблон (0-100%). */
.brv-seg--part {
  background: linear-gradient(90deg,
    var(--brv-seg-color, var(--brv-green)) var(--brv-seg-cut, 50%),
    var(--brv-track) var(--brv-seg-cut, 50%));
}

.brv-scale--high { --brv-seg-color: var(--brv-green); }
.brv-scale--mid  { --brv-seg-color: var(--brv-amber); }
.brv-scale--low  { --brv-seg-color: var(--brv-accent); }

/* Бонус у шапці */
.brv-bonus {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
}

.brv-bonus__icon {
  margin-top: 3px;
  flex: none;
}

.brv-bonus__amount {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: var(--brv-ink);
}

.brv-bonus__sub {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  color: var(--brv-muted);
  margin-top: 3px;
}

/* CTA у теці — <button class="btn btn-visit casino-url">, бо партнерський URL
   підставляє плагін brand-match-tables (див. brand-review.php, brv_cta()).
   Кнопку тема вже ресетить сама — заміряно computed-стилем на живій сторінці:
   border 0, шрифт `Inter Variable`, cursor `pointer`. Тому тут лишається
   тільки box-sizing, потрібний під `width: 100%` разом із падінгами.

   (У самому `.btn` теми `cursor: poInter Variable` — слід глобальної заміни
   «Inter» на назву шрифта, значення невалідне. Але курсор на живій кнопці
   все одно `pointer`, тобто його дає інше правило. Не чіпаємо.) */
.brv .btn-visit { box-sizing: border-box; }

/* Тема дає .btn-visit фіксовані 250px; у колонці картки він на всю ширину. */
.brv-offer__aside .btn-visit,
.brv-cta .btn-visit { width: 100%; }

.brv-terms {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
}

.brv-terms a {
  color: #100E0E;
  text-decoration: underline;
}

/* Підоцінки — смугою на всю ширину картки, п'ять рівних колонок */
.brv-subscores {
  border-top: 1px solid var(--brv-line);
  margin-top: 18px;
  padding-top: 16px;
}

.brv-subscores__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* Кнопка «Részletes értékelés» існує лише на мобайлі. У розмітці вона стоїть
   з атрибутом hidden — його знімає JS, і тільки на мобайлі. */
.brv-subscores__btn,
.brv-facts__btn { display: none; }

.brv-subscore__label {
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
  color: var(--brv-muted);
  min-height: 34px;
}

.brv-subscore__row {
  display: flex;
  align-items: center;
  gap: 9px;
}

.brv-meter {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--brv-track);
  overflow: hidden;
}

.brv-meter__fill {
  display: block;
  height: 6px;
  background: var(--brv-green);
}

.brv-meter__fill.is-mid { background: var(--brv-amber); }
.brv-meter__fill.is-low { background: var(--brv-accent); }

.brv-subscore__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--brv-ink);
}

/* 18+ смуга */
.brv-rg {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--brv-line);
  margin-top: 16px;
  padding-top: 13px;
  font-size: 12px;
  line-height: 17px;
  color: var(--brv-muted);
}

.brv-rg__badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #100E0E;
  font-size: 11px;
  font-weight: 700;
  color: #100E0E;
}

/* ── 05 адатлап: плитки 3x4 — новий компонент №2 ─────────────────────────── */
.brv-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.brv-fact {
  background: var(--brv-surface);
  border-radius: var(--brv-r);
  padding: 12px 14px;
}

.brv-fact__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--brv-muted);
  margin-bottom: 3px;
}

.brv-fact__value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brv-ink);
}

/* Мобільні перемикачі адатлапу — на десктопі не існують */
.brv-facts--peek,
.brv-facts__more { display: none; }

/* ── 06 Előnyök / Hátrányok. Фони й іконки — тема (.side .pros/.cons,
      .check-list, .not-list); тут лише сітка й падінги. ──────────────────── */
.brv-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: var(--brv-gap);
}

.brv-side .pros,
.brv-side .cons {
  border-radius: var(--brv-r);
  padding: 18px 20px;
}

.brv-side .side-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 26px;
  color: var(--brv-ink);
  margin-bottom: 14px;
}

.brv-side .check-list,
.brv-side .not-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.brv-side .check-list li,
.brv-side .not-list li {
  font-size: 15px;
  line-height: 22px;
  color: var(--brv-ink-2);
}

/* Посилання на підсторінку бренду. За урлостроєм теки підсторінки живуть
   суфіксом поруч (`/{бренд}-casino-bonusz/`), а не всередині огляду, тому цей
   рядок — місце, де огляд віддає їм глибокий інтент. Немає поля — немає рядка. */
.brv .brv-more {
  font-size: 14px !important;
  line-height: 21px !important;
  font-weight: 600 !important;
  margin: 0 0 16px !important;
}

.brv-more a {
  color: #100E0E;
  text-decoration: underline;
}

.brv-more a:hover { color: var(--link-hover, #B70101); }

.brv-more__arrow {
  display: inline-block;
  margin-left: 6px;
  text-decoration: none;
}

/* Проза секції (WYSIWYG). Розмір тексту дає тека — ми його не перебиваємо.
   Але два ресети теми ламають вміст, який ставить редактор, тому їх треба
   зняти В МЕЖАХ цього блоку:
     - маркери й нумерацію списків тема прибирає глобально (`ol, ul`),
       і список із редактора виглядав би суцільним текстом;
     - `h3` без класу тема віддає 16 px (це host-CSS ghanaweb), тобто дрібнішим
       за H2 26 px і майже як тіло — тому H3 із редактора підводимо до рампу
       макета 20/28. */
.brv-text { margin: 16px 0 0; }

.brv-text > :first-child { margin-top: 0 !important; }
.brv-text > :last-child { margin-bottom: 0 !important; }

.brv-text h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--brv-ink);
  margin: 20px 0 8px;
}

.brv-text ul,
.brv-text ol {
  margin: 0 0 12px;
  padding-left: 22px;
}

.brv-text ul { list-style: disc; }
.brv-text ol { list-style: decimal; }

.brv-text li { margin-bottom: 6px; }

.brv-text table { margin-bottom: 14px; }

/* ── 08 Tartalomjegyzék ──────────────────────────────────────────────────── */
.brv-toc {
  background: var(--brv-surface);
  border-radius: var(--brv-r);
  padding: 16px 20px;
  margin-bottom: var(--brv-gap);
}

.brv-toc__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  min-height: 24px;
}

.brv-toc__btn::-webkit-details-marker { display: none; }

.brv-toc__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--brv-ink);
}

.brv-toc__chevron {
  margin-left: auto;
  transition: transform .15s ease;
}

.brv-toc[open] .brv-toc__chevron { transform: rotate(180deg); }

/* Тема ресетить ol/ul (list-style: none), і нумерація змісту на живому
   сайті просто зникає — тому вона ставиться тут явно. Дзеркально: списки
   з іконками теми маркерів мати не повинні ні за яких обставин. */
.brv .check-list,
.brv .not-list,
.brv-steps,
.brv-providers,
.brv-weights {
  list-style: none;
  margin: 0;
  padding: 0;
}

.brv-toc__list {
  list-style: decimal;
  margin: 16px 0 0;
  padding-left: 20px;
  columns: 2;
  column-gap: 30px;
  font-size: 14px;
  line-height: 26px;
  color: var(--brv-ink);
}

.brv-toc__list a { color: var(--brv-ink); text-decoration: none; }
.brv-toc__list a:hover { color: var(--link-hover, #B70101); text-decoration: underline; }

/* ── 09 / 13 таблиці. Шапку дає тема (table th); тут — рамка, зебра, скрол ── */
.brv-table-wrap {
  border: 1px solid var(--brv-line);
  border-radius: var(--brv-r);
  overflow: hidden;
  margin-bottom: 14px;
}

.brv-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin: 0;
}

.brv-table th {
  text-align: left;
  padding: 12px 15px;
  white-space: nowrap;
}

.brv-table td {
  font-size: 15px;
  font-weight: 500;
  color: var(--brv-ink-2);
  padding: 13px 15px;
  border-top: 1px solid var(--brv-line);
}

.brv-table tbody tr:first-child td { border-top: none; }

.brv-table tbody tr:nth-child(even) { background: var(--brv-surface); }

.brv-table td:first-child {
  font-weight: 600;
  color: var(--brv-ink);
}

.brv-code {
  display: inline-block;
  border: 1px dashed var(--brv-accent);
  border-radius: 4px;
  padding: 3px 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--brv-accent);
}

.brv-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border-radius: var(--brv-r);
  padding: 12px 15px;
  font-size: 13px;
  line-height: 20px;
  color: var(--brv-ink-2);
}

.brv-note svg { flex: none; margin-top: 2px; }

.brv-note--info { background: #eef8c6; }
.brv-note--warn { background: var(--brv-cons); }

.brv-scroll-hint { display: none; }

/* ── 10 кроки реєстрації ─────────────────────────────────────────────────── */
.brv-signup {
  display: flex;
  gap: 24px;
}

.brv-steps {
  flex: 1;
  counter-reset: brv-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brv-step {
  display: flex;
  gap: 14px;
}

.brv-step:not(:last-child) { margin-bottom: 16px; }

.brv-step::before {
  counter-increment: brv-step;
  content: counter(brv-step);
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: var(--brv-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
}

.brv-step__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--brv-ink);
  margin-bottom: 3px;
}

.brv-step__text {
  font-size: 14px;
  line-height: 21px;
  color: var(--brv-muted);
}

.brv-shot {
  width: 340px;
  min-width: 340px;
}

.brv-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--brv-r);
  background: var(--brv-surface);
}

.brv-shot__cap {
  font-size: 12px;
  color: var(--brv-muted);
  margin-top: 7px;
  text-align: center;
}

/* ── 11 таби застосунку — новий компонент №3 ─────────────────────────────── */
.brv-tabs {
  border: 1px solid var(--brv-line);
  border-radius: var(--brv-r);
  overflow: hidden;
}

.brv-tabs__nav {
  display: flex;
  background: var(--brv-surface);
  border-bottom: 1px solid var(--brv-line);
}

.brv-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 18px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--brv-muted);
  cursor: pointer;
}

.brv-tab svg { flex: none; }
.brv-tab svg [stroke]:not([stroke="none"]) { stroke: currentColor; }
.brv-tab svg [fill]:not([fill="none"]) { fill: currentColor; }

.brv-tab[aria-selected="true"] {
  background: #fff;
  border-bottom-color: var(--brv-accent);
  font-weight: 700;
  color: var(--brv-ink);
}

.brv-tab:focus-visible {
  outline: 2px solid var(--brv-accent);
  outline-offset: -2px;
}

.brv-tabs__panel {
  display: flex;
  gap: 24px;
  padding: 20px;
}

.brv-tabs__panel[hidden] { display: none; }

.brv-tabs__body { flex: 1; }

.brv-tab__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--brv-ink);
  margin-bottom: 12px;
}

.brv-tabs__panel .check-list li {
  font-size: 14px;
  line-height: 21px;
  color: var(--brv-ink-2);
}

.brv-tabs__panel .check-list li:not(:last-child) { margin-bottom: 9px; }

.brv-tabs__shot {
  width: 170px;
  min-width: 170px;
}

.brv-tabs__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--brv-r);
  background: var(--brv-surface);
}

/* ── 12 статистика ігор + провайдери ─────────────────────────────────────── */
.brv-games {
  background: var(--brv-surface);
  border-radius: var(--brv-r);
  padding: 20px;
}

.brv-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.brv-stat {
  background: #fff;
  border-radius: var(--brv-r-sm);
  padding: 14px 16px;
}

.brv-stat__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--brv-muted);
  margin-bottom: 3px;
}

.brv-stat__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--brv-ink);
}

.brv-eyebrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--brv-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
}

.brv-providers {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brv-provider {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  background: #fff;
  border-radius: var(--brv-r-sm);
  padding: 6px;
}

.brv-provider img {
  max-width: 100%;
  max-height: 34px;
  width: auto;
  height: auto;
}

/* ── 14 смуга легальності — новий компонент №4 ───────────────────────────── */
.brv-legal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.brv-legal__card {
  border: 1px solid var(--brv-line);
  border-radius: var(--brv-r);
  padding: 16px 18px;
}

.brv-legal__head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}

.brv-legal__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--brv-ink);
}

.brv-legal__text {
  font-size: 14px;
  line-height: 21px;
  color: var(--brv-ink-2);
}

.brv-legal__text a { text-decoration: underline; }

/* ── 15 inline CTA (рівно два: після 09 і після 13) ──────────────────────── */
.brv-cta {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--brv-dark);
  border-radius: var(--brv-r);
  padding: 18px 22px;
  margin-bottom: var(--brv-gap);
}

.brv-cta__logo {
  width: 150px;
  height: 68px;
  min-width: 150px;
  object-fit: contain;
  border-radius: var(--brv-r-sm);
  background: rgba(255, 255, 255, .1);
  padding: 6px;
}

.brv-cta__body { flex: 1; min-width: 0; }

.brv-cta__head {
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
  color: #fff;
}

.brv-cta__sub {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .7);
  margin-top: 4px;
}

.brv-cta__btn { width: 250px; min-width: 250px; }

/* ── 18 методика ─────────────────────────────────────────────────────────── */
.brv-method {
  background: var(--brv-surface);
  border-radius: var(--brv-r);
  padding: 20px;
}

.brv-weights {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
  list-style: none;
  padding: 0;
}

.brv-weight { text-align: center; }

.brv-weight__n {
  font-size: 24px;
  font-weight: 700;
  color: var(--brv-ink);
}

.brv-weight__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--brv-muted);
  margin-top: 2px;
}

.brv-method__note {
  border-top: 1px solid #e2e5e8;
  padding-top: 14px;
  font-size: 13px;
  line-height: 20px;
  color: var(--brv-muted);
}

/* ── 19 автор ────────────────────────────────────────────────────────────── */
.brv-author {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--brv-surface);
  border-radius: var(--brv-r);
  padding: 18px 20px;
  margin-bottom: var(--brv-gap);
}

.brv-author__photo {
  width: 74px;
  height: 74px;
  min-width: 74px;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.brv-author__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--brv-ink);
  text-decoration: underline;
}

.brv-author__role {
  font-size: 13px;
  font-weight: 600;
  color: var(--brv-muted);
  margin: 2px 0 7px;
}

.brv-author__bio {
  font-size: 14px;
  line-height: 21px;
  color: var(--brv-ink-2);
}

/* ── 20 GYIK. Компонент цілком теми (.faq); тут — тільки відступ блоку ───── */
.brv .faq { margin-bottom: var(--brv-gap); }

/* ── 21 внутрішні лінки ──────────────────────────────────────────────────── */
.brv-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: var(--brv-gap);
}

.brv-link {
  display: block;
  border: 1px solid var(--brv-line);
  border-radius: var(--brv-r);
  padding: 15px 18px;
  text-decoration: none;
}

.brv-link:hover { border-color: #d3d6da; }

.brv-link__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--brv-green);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}

.brv-link__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--brv-ink);
  line-height: 22px;
}

.brv-link__url {
  font-size: 12px;
  color: var(--brv-muted);
  margin-top: 5px;
}

/* ── 22 sticky-бар. Модалки немає — ні на таймері, ні на прокрутці. ──────── */
.brv-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10005; /* нижче .top-bar (10010), вище решти */
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--brv-dark);
  padding: 12px 18px;
  transform: translateY(100%);
  transition: transform .18s ease;
}

.brv-sticky.is-visible { transform: none; }

/* Без JS бар видно завжди — це кращий стан, ніж прихований назавжди. */
.brv-sticky[hidden] { display: none; }

.brv-sticky__logo {
  width: 110px;
  height: 46px;
  min-width: 110px;
  object-fit: contain;
  border-radius: var(--brv-r-sm);
  background: rgba(255, 255, 255, .1);
  padding: 4px;
}

/* Назва бренду й бонус лежать в одній обгортці: на десктопі вона просто
   тримає їх у рядок, на мобайлі — складає в дві стрічки, щоб бонус не
   обрізався між логотипом і кнопкою. */
.brv-sticky__body {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brv-sticky__brand {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.brv-sticky__bonus {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.brv-sticky__cta { width: 200px; min-width: 200px; }
.brv-sticky .btn-visit { width: 200px; height: 40px; line-height: 40px; }

.brv-sticky__close {
  display: none;
}

/* ==========================================================================
   МОБАЙЛ (<= 768). Малювався першим: 314 із 363 кліків мобільні, позиція там
   гірша (15,8 проти 12,7). Шрифт НЕ задаємо — тека сама ставить Tahoma
   `!important` на цю колонку, і сперечатись із нею тут нема сенсу.
   ========================================================================== */
@media screen and (max-width: 768px) {

  .brv { --brv-gap: 20px; }

  .brv .brv-lead { margin: 0 0 12px !important; }
  .brv .brv-intro p { margin: 0 0 12px !important; }

  #medsectionWideRight .article-left-col .brv-h1,
  .brv .brv-h1 {
    font-size: 20px !important;
    line-height: 25px !important;
    color: #000 !important;
    margin: 10px 0 14px !important;
  }

  .brv .brv-h2 {
    font-size: 19px;
    line-height: 25px;
    margin-bottom: 6px;
  }

  .brv .brv-h3 { font-size: 17px; line-height: 24px; }

  .brv-byline { font-size: 12px; gap: 6px; }
  .brv-byline__src { display: none; } /* «Forrás» дублює шапку теки на мобайлі */

  /* 04 — CTA мусить влазити в перший екран */
  .brv-offer { padding: 16px; }

  /* Логотип і оцінка — в один рядок; бонус, CTA і умови переносяться
     під них на всю ширину картки (flex-wrap, а не grid: інакше блоки
     розкладаються по клітинках не в тому порядку). */
  .brv-offer__top {
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
  }

  .brv-offer__brand { width: 130px; min-width: 130px; text-align: left; }
  .brv-offer__logo { width: 130px; height: 60px; margin-bottom: 4px; }
  .brv-offer__name { font-size: 15px; }

  .brv-offer__score { flex: 1; min-width: 0; }
  .brv-score { margin-bottom: 0; }
  .brv-score__value { font-size: 28px; line-height: 30px; }
  .brv-score__max { font-size: 14px; }
  .brv-score__label,
  .brv-offer__note,
  .brv-segbar { display: none; } /* на мобайлі шкалу заміняє «Részletes értékelés» */

  .brv-offer__aside {
    flex: 1 0 100%;
    width: auto;
    min-width: 0;
    border-left: 0;
    padding-left: 0;
  }

  .brv-bonus {
    align-items: center;
    background: var(--brv-surface);
    border-radius: var(--brv-r-sm);
    padding: 11px 13px;
    margin-bottom: 12px;
  }

  .brv-bonus__icon { margin-top: 0; }
  .brv-bonus__amount { font-size: 17px; line-height: 22px; }
  .brv-bonus__sub { display: none; }

  /* тач-ціль 48 px */
  .brv-offer__aside .btn-visit,
  .brv-cta .btn-visit {
    height: 48px;
    line-height: 48px;
    font-size: 15px;
  }

  .brv-terms { margin-top: 10px; }

  /* Підоцінки згорнуті під «Részletes értékelés» */
  .brv-subscores { margin-top: 12px; padding-top: 0; }

  .brv-subscores__list {
    display: block;
    padding-top: 12px;
  }

  .brv-subscores__list.is-collapsed { display: none; }

  .brv-subscores__btn:not([hidden]) {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--brv-ink);
    text-align: left;
    cursor: pointer;
  }

  .brv-subscores__chevron { margin-left: auto; display: inline-flex; transition: transform .15s ease; }
  .brv-subscores__btn[aria-expanded="true"] .brv-subscores__chevron { transform: rotate(180deg); }

  .brv-subscore {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .brv-subscore:not(:last-child) { margin-bottom: 9px; }

  .brv-subscore__label {
    flex: 1;
    min-height: 0;
    font-size: 13px;
    color: var(--brv-ink-2);
  }

  .brv-subscore__row { flex: none; width: 70px; }
  .brv-subscore__value { width: 24px; font-size: 13px; text-align: right; }

  .brv-rg { font-size: 11px; line-height: 16px; margin-top: 12px; padding-top: 11px; }
  .brv-rg__badge { width: 24px; height: 24px; font-size: 10px; }

  /* 05 — одна сітка на всі 12 плиток. Згорнута показує тільки три
     з класом --peek (Licenc / Kifizetési idő / Mobilalkalmazás); `order`
     виносить їх наперед, тому десктопний порядок макета не рухається. */
  .brv-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .brv-fact--peek { order: -1; }

  .brv-facts.is-collapsed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .brv-facts.is-collapsed .brv-fact:not(.brv-fact--peek) { display: none; }
  .brv-facts.is-collapsed .brv-fact { text-align: center; }
  .brv-facts.is-collapsed .brv-fact__value { justify-content: center; }

  .brv-fact { padding: 10px 12px; }
  .brv-fact__label { font-size: 11px; font-weight: 700; }
  .brv-fact__value { font-size: 13px; font-weight: 700; }

  .brv-facts__btn:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 44px;
    margin-top: 10px;
    border: 1px solid var(--brv-line);
    border-radius: var(--brv-r);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--brv-ink);
    cursor: pointer;
  }

  .brv-facts__btn[aria-expanded="true"] .brv-facts__chevron { transform: rotate(180deg); }
  .brv-facts__chevron { display: inline-flex; transition: transform .15s ease; }

  /* 06 — одна колонка */
  .brv-side { grid-template-columns: 1fr; gap: 10px; }
  .brv-side .pros, .brv-side .cons { padding: 15px 16px; }
  .brv-side .side-heading { font-size: 16px; margin-bottom: 11px; }
  .brv-side .check-list li, .brv-side .not-list li { font-size: 14px; line-height: 21px; }

  /* 08 — зміст лишається згорнутим */
  .brv-toc { padding: 13px 16px; }
  .brv-toc__list { columns: 1; }

  /* 09 / 13 — таблиця скролиться по X, підказка видима */
  .brv-table-wrap {
    border: 0;
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 4px;
  }

  .brv-table { width: auto; min-width: 520px; }
  .brv-table th { font-size: 12px; padding: 10px 12px; }
  .brv-table td { font-size: 13px; padding: 11px 12px; white-space: nowrap; }

  .brv-scroll-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: #8d8d8d;
    margin: 4px 0 0;
  }

  /* 10 — скрін під кроками */
  .brv-signup { display: block; }
  .brv-shot { width: auto; min-width: 0; margin-top: 16px; }

  /* 11 — таби в рядок, підпис без іконки */
  .brv-tab { padding: 13px 6px; font-size: 13px; min-height: 46px; }
  .brv-tab svg { display: none; }
  .brv-tabs__panel { display: block; padding: 14px 16px; }
  .brv-tabs__shot { width: auto; min-width: 0; margin-top: 14px; }
  .brv-tab__status { font-size: 14px; }
  .brv-tabs__panel .check-list li { font-size: 13px; line-height: 20px; }

  /* 12 */
  .brv-games { padding: 14px; }
  .brv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brv-providers { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* 14 — три картки колонкою */
  .brv-legal { grid-template-columns: 1fr; gap: 8px; }
  .brv-legal__card { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
  .brv-legal__head { margin-bottom: 2px; }
  .brv-legal__title { font-size: 13px; }
  .brv-legal__text { font-size: 12px; }

  /* 15 — CTA колонкою */
  .brv-cta { display: block; padding: 16px; }
  .brv-cta__logo { width: 90px; height: 44px; min-width: 90px; margin-bottom: 13px; }
  .brv-cta__head { font-size: 16px; line-height: 21px; }
  .brv-cta__sub { display: none; }
  .brv-cta__btn { width: 100%; min-width: 0; margin-top: 13px; }
  .brv-cta__legal {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, .6);
    text-align: center;
    margin-top: 9px;
  }

  /* 18 */
  .brv-method { padding: 14px; }
  .brv-weights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .brv-weight__n { font-size: 20px; }
  .brv-weight__label { font-size: 12px; }

  /* 19 */
  .brv-author { align-items: flex-start; gap: 12px; padding: 14px; }
  .brv-author__photo { width: 56px; height: 56px; min-width: 56px; }

  /* 20 — заголовки питань дрібніші за десктопні 20px */
  .brv .faq-heading { font-size: 15px; line-height: 22px; }
  .brv .faq-btn { padding-left: 22px; }
  .brv .faq-btn::before { font-size: 15px; line-height: 22px; }
  .brv .faq .text { padding-left: 22px; }

  /* 21 */
  .brv-links { grid-template-columns: 1fr; gap: 8px; }
  .brv-link { padding: 13px 15px; }
  .brv-link__title { font-size: 15px; }
  .brv-link__url { display: none; }

  /* 22 */
  .brv-sticky { gap: 10px; padding: 10px 12px; }
  .brv-sticky__logo { width: 54px; height: 40px; min-width: 54px; }
  .brv-sticky__body { display: block; gap: 0; }
  .brv-sticky__brand { font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .75); }
  .brv-sticky__bonus { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brv-sticky__bonus svg { display: none; }
  .brv-sticky__cta { width: 120px; min-width: 120px; }
  .brv-sticky .btn-visit { width: 120px; height: 44px; line-height: 44px; font-size: 13px; }
}

/* Місце під sticky-бар, щоб він не накривав футер */
@media screen and (min-width: 769px) {
  body.brv-has-sticky { padding-bottom: 70px; }
}

@media screen and (max-width: 768px) {
  body.brv-has-sticky { padding-bottom: 64px; }
}

@media print {
  .brv-sticky, .brv-cta { display: none; }
}