/* ==========================================================================
   cpy-skin.css — каркас casino-payouts.com (FI, fi-FI). Этап 05.
   Концепция «Kuitti» (квитанция): газетно-финансовый портал о ВЫПЛАТАХ.
   Референсы-иконы: Financial Times (тёплая бумага, бордо, плотная типографика)
   и Wise (крупные цифры-показатели, много воздуха в панелях данных).
   Полотно — тёплый песок, контент — лист с рамкой и тенью, акцент — бордо.
   ========================================================================== */

:root {
  --canvas: #ece5db;
  --paper:  #fffdf9;
  --paper2: #f6f1e8;
  --ink:    #191d24;
  --ink2:   #4c5563;
  --line:   #ddd3c4;
  --line2:  #cfc3b0;
  --accent: #99203f;
  --accent-d: #7a1932;
  --steel:  #1f5f7a;
  --ok:     #17624a;
  --w:      888px;
  --wide:   1120px;
  --pad:    20px;
  --sheet:  36px;
  --r:      10px;
  --shadow: 0 1px 2px rgba(25,29,36,.06), 0 8px 24px rgba(25,29,36,.07);
  --font: "Lexend", "Proxima Nova", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---------- полотно и лист ------------------------------------------------ */
html { background: var(--canvas); }
body {
  background: var(--canvas) !important;
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  margin: 0;
}
body #page, body .site, body > .wrapper { background: transparent !important; }

/* контентная лента донора: каждый .module — секция на ЛИСТЕ */
body .module {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
body .module > .container,
body .module > div > .container {
  max-width: calc(var(--w) + var(--sheet) * 2) !important;
  width: auto !important;
  margin: 0 auto !important;
  background: var(--paper);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  padding: 0 var(--sheet) !important;
  box-sizing: border-box;
}
body .module:first-of-type > .container { border-top: 1px solid var(--line); }
/* лист должен быть НЕПРЕРЫВНЫМ: вертикальный паддинг гасит схлопывание внешних отступов,
   иначе между модулями просвечивает полотно и страница выглядит «полосатой» */
body .module > .container,
body .module > div > .container { padding-top: 10px !important; padding-bottom: 10px !important; }
body .module:last-of-type > .container {
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 var(--r) var(--r);
  padding-bottom: 26px !important;
}
body .module:first-of-type > .container { border-radius: var(--r) var(--r) 0 0; padding-top: 20px !important; }
/* внутренние обёртки донора не должны множить отступ */
body .module .container .container {
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
  width: 100% !important;
}
body .module .container > * { max-width: 100%; }

/* ряды-обёртки донора возвращаем в блочный поток */
body .module .row, body .module .head, body .module .page-top,
body .module .info-top, body .module .has-sidebar {
  display: block !important;
}
body .module .row > *, body .module .head > * {
  width: 100% !important;
  flex: none !important;
  max-width: 100% !important;
}

/* ---------- шапка --------------------------------------------------------- */
body header:not(.cpy-hd), body .header:not(.cpy-hd) { display: none !important; }

.cpy-hd { background: var(--paper); border-bottom: 3px solid var(--accent); }
.cpy-hd__bar {
  background: var(--ink);
  color: #e8e2d8;
  font-size: 13px;
  letter-spacing: .02em;
}
.cpy-hd__bar-in, .cpy-hd__in, .cpy-ft__in {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--pad);
  box-sizing: border-box;
}
.cpy-hd__bar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 34px; flex-wrap: wrap;
}
.cpy-hd__bar b { color: #fff; font-weight: 600; }
.cpy-hd__bar-in span { color: #cdc5b8; }
.cpy-hd__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 68px;
}
.cpy-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); }
.cpy-logo__mark {
  width: 38px; height: 38px; flex: none; border-radius: 7px;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; letter-spacing: -.03em;
}
.cpy-logo__txt { display: flex; flex-direction: column; line-height: 1.1; }
.cpy-logo__name { font-weight: 700; font-size: 20px; letter-spacing: -.02em; }
.cpy-logo__sub { font-size: 11px; color: var(--ink2); letter-spacing: .08em; text-transform: uppercase; }

.cpy-nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cpy-nav > ul > li { position: relative; }
.cpy-nav > ul > li > a {
  display: block; padding: 10px 12px; border-radius: 7px;
  color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 600;
}
.cpy-nav > ul > li > a:hover, .cpy-nav > ul > li:focus-within > a {
  background: var(--paper2); color: var(--accent);
}
.cpy-nav ul ul {
  position: absolute; top: 100%; left: 0; min-width: 268px; z-index: 60;
  background: var(--paper); border: 1px solid var(--line2); border-radius: 10px;
  box-shadow: var(--shadow); list-style: none; margin: 6px 0 0; padding: 8px;
  /* прячем ТОЛЬКО visibility: при opacity:0 чекер контраста считает текст
     пунктов подменю невидимым и даёт 34 ложных замечания на каждой странице */
  visibility: hidden;
}
.cpy-nav > ul > li:hover > ul, .cpy-nav > ul > li:focus-within > ul { visibility: visible; }
.cpy-nav ul ul li a {
  display: block; padding: 8px 10px; border-radius: 6px;
  color: var(--ink) !important; text-decoration: none; font-size: 14.5px;
}
.cpy-nav ul ul li a:hover { background: var(--paper2); color: var(--accent) !important; }
.cpy-nav__more { color: var(--ink2); font-size: 11px; }

/* ---------- полоса показателей (первый экран) ----------------------------- */
.cpy-stats { background: var(--paper2); border-bottom: 1px solid var(--line); }
.cpy-stats__in {
  max-width: var(--wide); margin: 0 auto; padding: 14px var(--pad);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; box-sizing: border-box;
}
.cpy-stat { display: flex; flex-direction: column; gap: 2px; }
.cpy-stat b { font-size: 19px; font-weight: 700; color: var(--accent); letter-spacing: -.01em; }
.cpy-stat span { font-size: 12.5px; color: var(--ink2); }

/* ---------- хлебные крошки, заголовки ------------------------------------- */
body .subheader { background: transparent !important; padding: 0 !important; }
body .subheader .container, body .breadcrumbs {
  max-width: calc(var(--w) + var(--sheet) * 2) !important;
  margin: 0 auto !important; padding: 10px var(--sheet) !important;
  font-size: 13px; color: var(--ink2); box-sizing: border-box;
}
body .breadcrumbs a { color: var(--ink2); }

body h1, body .module h1 {
  font-size: 34px; line-height: 1.18; letter-spacing: -.02em;
  margin: 22px 0 14px; color: var(--ink); font-weight: 700;
}
body h2, body .module h2 {
  font-size: 25px; line-height: 1.25; margin: 30px 0 12px; font-weight: 700;
  letter-spacing: -.01em; padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
body h3, body .module h3 { font-size: 19.5px; margin: 22px 0 10px; font-weight: 700; }
body p { margin: 0 0 14px; }
body .module a { color: var(--accent); text-underline-offset: 2px; }
body .module a:hover { color: var(--accent-d); }
body .module ul, body .module ol { padding-left: 22px; }
body .module li { margin: 0 0 7px; }

/* ---------- герой --------------------------------------------------------- */
.cpy-hero { background: var(--ink); color: #f3ede4; }
.cpy-hero__in {
  max-width: var(--wide); margin: 0 auto; padding: 40px var(--pad) 44px;
  box-sizing: border-box;
}
.cpy-hero h1 { color: #fff !important; margin: 0 0 14px !important; max-width: 20ch; }
.cpy-hero p { color: #d8d0c4; font-size: 18px; margin: 0 0 18px; max-width: 62ch; }
.cpy-hero__row { display: flex; flex-wrap: wrap; gap: 10px; }
.cpy-hero__row a {
  display: inline-block; background: var(--accent); color: #fff !important;
  padding: 11px 20px; border-radius: 8px; font-weight: 700; text-decoration: none;
}
.cpy-hero__row a.is-ghost { background: transparent; border: 1px solid #4a5260; color: #eee6da !important; }

body .module.hero { background: var(--ink) !important; color: #f3ede4; }
body .module.hero > .container {
  background: transparent; border: 0; color: #f3ede4;
  max-width: var(--wide) !important; padding: 34px var(--pad) !important;
}
body .module.hero h1, body .module.hero h2 { color: #fff; border: 0; }
body .module.hero p, body .module.hero span, body .module.hero div { color: #ded6c9; }
body .module.hero a { color: #f0c9d3; }

/* ---------- оглавление (наше, свёрнутое) ---------------------------------- */
body .module.anchors-menu-module { display: none !important; }
.cpy-toc {
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--paper2); margin: 18px 0 22px; padding: 0;
}
.cpy-toc > summary {
  cursor: pointer; padding: 12px 16px; font-weight: 700; font-size: 15px;
  list-style: none; display: flex; align-items: center; gap: 8px;
}
.cpy-toc > summary::-webkit-details-marker { display: none; }
.cpy-toc > summary::after { content: "▾"; margin-left: auto; color: var(--ink2); }
.cpy-toc[open] > summary::after { content: "▴"; }
.cpy-toc ol { margin: 0; padding: 0 16px 14px 34px; }
.cpy-toc li { margin: 0 0 6px; font-size: 14.5px; }
.cpy-toc a { color: var(--ink); text-decoration: none; }
.cpy-toc a:hover { color: var(--accent); text-decoration: underline; }

/* ---------- FAQ: всё развёрнуто ------------------------------------------- */
body .faq-module .container { padding-bottom: 8px !important; }
body .faq-item, body .faq-module li, body .accordion__item {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper2); margin: 0 0 10px; padding: 14px 16px; list-style: none;
}
body .faq-item .question, body .faq-module h3 { font-weight: 700; margin: 0 0 6px; }
body .faq-item .answer, body .faq-module .answer, body .accordion__panel,
body .tab-content, body .tabs__panel {
  display: block !important; height: auto !important; max-height: none !important;
  overflow: visible !important; visibility: visible !important; color: var(--ink);
}

/* FAQ донора: <dl class="faq"><div><dt>вопрос</dt><dd>ответ</dd></div>… — тема прячет dd */
body dl.faq { margin: 0; padding: 0; }
body dl.faq > div {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper2);
  margin: 0 0 10px; padding: 14px 16px;
}
body dl.faq dt {
  font-weight: 700; margin: 0 0 6px; cursor: default; color: var(--ink);
}
body dl.faq dd {
  display: block !important; visibility: visible !important; height: auto !important;
  max-height: none !important; overflow: visible !important;
  margin: 0; color: var(--ink);
}
body dl.faq dd p { margin: 0 0 8px; }
body dl.faq dd p:last-child { margin-bottom: 0; }

/* контейнеры донора ВНЕ .module (хлебные крошки и т.п.) — по сетке листа */
body .module ~ .container, body > .container, body #page > .container {
  max-width: calc(var(--w) + var(--sheet) * 2) !important;
  margin: 0 auto !important; padding: 0 var(--sheet) !important; box-sizing: border-box;
}

/* кнопка «наверх» донора: фиксируем и убираем её вылет за экран */
body .back-to-top {
  position: fixed !important; right: 18px !important; bottom: 18px !important;
  left: auto !important; top: auto !important;
  width: 42px !important; height: 42px !important; overflow: hidden !important;
  display: flex !important; align-items: center; justify-content: center; z-index: 80;
}
body .back-to-top svg { width: 18px !important; height: 18px !important; max-width: 18px; }

/* ---------- карточка обзора бренда (ficha донора) ------------------------- */
body section.review {
  background: transparent !important; padding: 0 !important;
}
body section.review > .container {
  max-width: calc(var(--w) + var(--sheet) * 2) !important;
  margin: 0 auto !important; padding: 22px var(--sheet) !important;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0; box-sizing: border-box;
}
body .review-rating .rating-type { font-size: 14px; color: var(--ink2); }
body .review-rating .rating-bar { background: var(--line) !important; border-radius: 4px; }
body .review-rating .rating-bar > * { background: var(--accent) !important; border-radius: 4px; }
body .review .banner {
  background: var(--ink) !important; color: #fff; border-radius: var(--r);
  padding: 16px 18px !important; margin: 16px 0 !important;
}
body .review .banner *, body .review .banner b, body .review .banner span { color: #fff !important; }
body .review .banner a.btn, body .review .banner .btn {
  background: var(--accent) !important; color: #fff !important; border: 0 !important;
  border-radius: 8px; padding: 12px 22px !important; font-weight: 700;
  box-shadow: none !important;
}
body .review .info-block, body .review .facts, body .review .info {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper2);
}

/* ---------- карусели донора (JS снят) ------------------------------------- */
body .glide__track, body .glide { overflow: visible !important; }
body .glide__slides {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px; transform: none !important; width: auto !important; max-width: 100% !important;
}
body .glide__slide, body .glide__slides > li { width: auto !important; margin: 0 !important; }
body .glide__arrows, body .glide__bullets { display: none !important; }
body .card.mini, body .card, body .card-game, body .card-slot {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--paper2);
  padding: 18px !important; box-sizing: border-box;
}
/* текст внутри карточки не должен упираться в её рамку (gate_padding ≥16) */
body .card > *, body .card.mini > *, body .card-game > * { max-width: 100%; }
body .card-game, body .card.mini { overflow: hidden; }
body .card b, body .card .card-title { color: var(--ink) !important; font-weight: 700; }
body .card a { color: var(--accent) !important; }
body .card .btn {
  display: inline-block; background: var(--accent); color: #fff !important;
  border-radius: 8px; padding: 9px 16px; font-weight: 700; text-decoration: none;
}
body .games-carousel-module .container, body .also-try-these-casinos-carousel-module .container,
body .image-carousel-module .container { padding-bottom: 20px !important; }
body .module-title h2, body .module-title h3 { border: 0; margin-bottom: 10px; }

/* ---------- таблицы ------------------------------------------------------- */
body .module table {
  width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 18px;
  background: var(--paper);
}
body .module th, body .module td {
  border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top;
}
body .module th { background: var(--paper2); font-weight: 700; }
body .module .table-wrap, body .module .tablepress-wrap { overflow-x: auto; }

/* ---------- кнопки донора ------------------------------------------------- */
body .module .btn, body .module .button, body .module a.btn {
  display: inline-block; background: var(--accent); color: #fff !important;
  border: 0; border-radius: 8px; padding: 11px 20px; font-weight: 700;
  text-decoration: none; box-shadow: none;
}
body .module .btn:hover { background: var(--accent-d); }

/* ---------- подвал -------------------------------------------------------- */
body footer:not(.cpy-ft), body .footer:not(.cpy-ft) { display: none !important; }

.cpy-ft { background: var(--ink); color: #d8d1c6; margin-top: 46px; font-size: 14.5px; }
.cpy-ft__trust { background: #12161c; border-bottom: 1px solid #262c35; }
.cpy-ft__trust .cpy-ft__in {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  padding-top: 16px; padding-bottom: 16px;
}
.cpy-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid #39414d; border-radius: 999px; padding: 7px 14px;
  color: #e5ded3; font-size: 13.5px; background: #171c23;
}
.cpy-chip b { color: #fff; }
.cpy-chip--age { border-color: var(--accent); color: #fff; }
.cpy-ft__cols {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 28px;
  padding-top: 30px; padding-bottom: 26px;
  /* фон ЯВНЫМ цветом: прозрачный фон чекер контраста считает белым и даёт
     ложное «светлое по светлому» на всём подвале */
  background: var(--ink);
}
.cpy-ft__about, .cpy-ft__cols > div, .cpy-ft__legal { background: var(--ink); }
.cpy-ft__trust .cpy-ft__in { background: #12161c; }
.cpy-ft h4 {
  color: #fff; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  margin: 0 0 12px; font-weight: 700;
}
.cpy-ft ul { list-style: none; margin: 0; padding: 0; background: var(--ink); }
.cpy-ft li { margin: 0 0 8px; background: var(--ink); }
/* фон задаём и самим ссылкам: чекер контраста не поднимается по предкам и
   прозрачный фон считает БЕЛЫМ — светлый текст тогда «не читается» (34 ложных) */
.cpy-ft a { color: #e2dbd0; text-decoration: none; background: var(--ink); }
.cpy-ft h4 { background: var(--ink); }
.cpy-ft__trust .cpy-chip { background: #171c23; }
.cpy-ft a:hover { color: #fff; text-decoration: underline; }
.cpy-ft__about p { margin: 0 0 12px; color: #d7d0c5; line-height: 1.6; }
.cpy-ft__legal {
  border-top: 1px solid #262c35; padding-top: 16px; padding-bottom: 26px;
  color: #b3aca1; font-size: 13px;
}
.cpy-ft__legal p { margin: 0 0 8px; }

/* ---------- back-to-top --------------------------------------------------- */
body .back-to-top {
  background: var(--accent) !important; border-radius: 999px !important;
  border: 0 !important; box-shadow: var(--shadow);
}
body .back-to-top svg, body .back-to-top a { color: #fff !important; fill: #fff !important; }

/* ---------- мусор донора -------------------------------------------------- */
body .popup, body .search-wrapper, body .mobile-menu-wrapper, body .search-btn,
body .langs, body .lang-switch, body .moove-gdpr-cookie-notice { display: none !important; }
body img { max-width: 100%; height: auto; }

/* ---------- мобилка ------------------------------------------------------- */
@media (max-width: 900px) {
  :root { --pad: 14px; --sheet: 16px; }
  body { font-size: 16px; }
  body h1 { font-size: 27px; }
  body h2 { font-size: 21px; }
  .cpy-hd__in { flex-direction: column; align-items: stretch; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .cpy-nav > ul { flex-wrap: wrap; gap: 2px; }
  .cpy-nav > ul > li > a { padding: 8px 10px; font-size: 14px; }
  .cpy-nav ul ul {
    position: static; visibility: visible; box-shadow: none;
    border: 0; background: var(--paper); padding: 0 0 4px 12px; min-width: 0;
  }
  .cpy-nav ul ul li a { padding: 4px 6px; font-size: 13px; color: var(--ink2) !important; }
  /* мобильное меню держим раскрытым (без JS), но компактным: подпункты в две колонки */
  .cpy-nav > ul { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
  .cpy-nav > ul > li > a { padding: 6px 8px; font-size: 14px; }
  .cpy-nav ul ul { padding: 0 0 6px 10px; }
  .cpy-nav ul ul li { margin: 0; }
  .cpy-stats__in { grid-template-columns: 1fr; gap: 10px; }
  .cpy-ft__cols { grid-template-columns: 1fr 1fr; gap: 20px; }
  body .glide__slides { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .cpy-ft__cols { grid-template-columns: 1fr; }
  body .glide__slides { grid-template-columns: 1fr; }
}

/* ⛔ CSS темы донора (256 КБ) красит ссылки правилом с id (#page a) — оно СИЛЬНЕЕ
   селектора .cpy-ft a (0,1,1), и ссылки подвала оставались ЧЁРНЫМИ на графите
   (34 замечания контраста, видно только замером computed color). Поднимаем
   специфичность своими правилами каркаса. */
body footer.cpy-ft a, body footer.cpy-ft li, body footer.cpy-ft ul,
body footer.cpy-ft p, body footer.cpy-ft h4, body footer.cpy-ft span {
  color: #e2dbd0 !important;
}
body footer.cpy-ft h4, body footer.cpy-ft b { color: #ffffff !important; }
body footer.cpy-ft .cpy-ft__legal, body footer.cpy-ft .cpy-ft__legal p {
  color: #b3aca1 !important;
}
body footer.cpy-ft a:hover { color: #ffffff !important; }
body header.cpy-hd .cpy-nav > ul > li > a { color: var(--ink) !important; }
body header.cpy-hd .cpy-nav ul ul li a { color: var(--ink) !important; }
body header.cpy-hd .cpy-hd__bar, body header.cpy-hd .cpy-hd__bar span { color: #e8e2d8 !important; }
body header.cpy-hd .cpy-hd__bar b { color: #ffffff !important; }