/* ============================================================
   rating.css — расширенная таблица казино (site-brand-bonus)
   Сайт: capannabovarina.ch (CH-IT). Префикс: cb-
   Файл вне любой сборки, подключается с ?v=filemtime.
   Специфичность «body .cb-rating …» — правила темы идут позже и с !important.
   ============================================================ */

body .cb-rating {
  --cb-ink: #1d2440;
  --cb-ink-2: #46506f;
  --cb-mute: #7c85a8;
  --cb-line: #e6e9f4;
  --cb-soft: #f4f6fc;
  --cb-acc: #12a06b;      /* зелёный темы сайта */
  --cb-acc-2: #2fcf8e;
  --cb-acc-d: #0c7a51;
  --cb-acc-bg: #e8f7f0;
  --cb-acc-br: #cdeade;
  --cb-gold: #d99a16;
  --cb-star: #f2a61d;

  --cb-b: 17px;   /* размер суммы бонуса */
  --cb-bs: 14px;  /* размер остального текста бонуса */

  display: block;
  margin: 0 0 8px;
  font-family: inherit;
}

/* ---------- сброс типографики темы внутри блока ---------- */

body .cb-rating p,
body .cb-rating ul,
body .cb-rating ol,
body .cb-rating li,
body .cb-rating dl,
body .cb-rating dt,
body .cb-rating dd,
body .cb-rating div,
body .cb-rating span,
body .cb-rating a,
body .cb-rating b,
body .cb-rating strong,
body .cb-rating code,
body .cb-rating button {
  margin: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--cb-ink-2);
  font-family: inherit;
}

body .cb-rating ul,
body .cb-rating ol { list-style: none; }

body .cb-rating a { text-decoration: none; }

body .cb-rating img { max-width: 100%; height: auto; }

body .cb-rating svg { display: block; }

/* ---------- карточка ---------- */

body .cb-rating .cb-card {
  position: relative;
  margin: 0 0 16px;
  padding: 20px 18px 16px;
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(29, 36, 64, .06);
  overflow: hidden;
}

body .cb-rating .cb-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cb-acc), var(--cb-acc-2));
  opacity: .28;
}

body .cb-rating .cb-card--top {
  border-color: #f0dfb6;
  box-shadow: 0 10px 28px rgba(191, 137, 20, .13);
}

body .cb-rating .cb-card--top::before {
  background: linear-gradient(90deg, var(--cb-gold), #f6cf6a);
  opacity: 1;
}

/* номер места — метка на верхнем левом углу плитки логотипа */
body .cb-rating .cb-rank {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #3e4a63, #232c40);
  border-radius: 8px;
  box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(35, 44, 64, .25);
}

body .cb-rating .cb-card--top .cb-rank {
  background: linear-gradient(135deg, #f0bb45, #cf8f0c);
  box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(207, 143, 12, .3);
}

/* ---------- шапка: логотип | бренд и рейтинг | кнопка ---------- */

body .cb-rating .cb-head {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 180px;
  align-items: center;
  gap: 16px;
}

body .cb-rating .cb-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  padding: 8px;
  background: var(--cb-soft);
  border: 1px solid var(--cb-line);
  border-radius: 14px;
}

body .cb-rating .cb-logo img {
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

body .cb-rating .cb-logo-txt {
  font-size: 13px;
  font-weight: 700;
  color: var(--cb-ink);
  text-align: center;
}

body .cb-rating .cb-name {
  display: block;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--cb-ink) !important;
}

body .cb-rating .cb-name:hover { color: var(--cb-acc) !important; }

body .cb-rating .cb-rate {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin-top: 5px;
}

body .cb-rating .cb-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  flex: none;
}

body .cb-rating .cb-stars-bg,
body .cb-rating .cb-stars-fg {
  display: block;
  white-space: nowrap;
  line-height: 0;
  font-size: 0;
}

body .cb-rating .cb-stars-bg { color: #dbe0ee; }

body .cb-rating .cb-stars-fg {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cb-p, 0%);
  overflow: hidden;
  color: var(--cb-star);
}

body .cb-rating .cb-stars svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: top;
}

body .cb-rating .cb-rate-v {
  font-size: 15px;
  font-weight: 800;
  color: var(--cb-ink);
}

body .cb-rating .cb-rate-of {
  font-size: 12px;
  color: var(--cb-mute);
}

body .cb-rating .cb-rate-c {
  font-size: 12px;
  color: var(--cb-mute);
}

body .cb-rating .cb-rate-c::before {
  content: "\00b7";
  margin-right: 5px;
}

body .cb-rating .cb-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}

body .cb-rating .cb-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--cb-ink-2);
  background: var(--cb-soft);
  border: 1px solid var(--cb-line);
  border-radius: 999px;
}

body .cb-rating .cb-badge--1 {
  color: var(--cb-acc-d);
  background: var(--cb-acc-bg);
  border-color: var(--cb-acc-br);
}

body .cb-rating .cb-act {
  display: grid;
  gap: 6px;
  justify-items: stretch;
}

body .cb-rating .cb-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  color: #fff !important;
  background: linear-gradient(135deg, var(--cb-acc-2), var(--cb-acc));
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(18, 160, 107, .28);
  transition: transform .15s ease, box-shadow .15s ease;
}

body .cb-rating .cb-cta:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 9px 20px rgba(18, 160, 107, .34);
}

body .cb-rating .cb-review {
  font-size: 12.5px;
  text-align: center;
  color: var(--cb-acc-d) !important;
  text-decoration: underline;
}

/* ---------- бонус ---------- */

body .cb-rating .cb-offer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  padding: 11px 14px;
  background: linear-gradient(90deg, var(--cb-acc-bg), #fbfdfc 72%);
  border: 1px dashed var(--cb-acc-br);
  border-radius: 13px;
}

body .cb-rating .cb-bonus {
  flex: 1 1 260px;
  min-width: 0;
  font-size: var(--cb-b);
  font-weight: 700;
  line-height: 1.35;
  color: var(--cb-ink);
}

body .cb-rating .cb-bonus div,
body .cb-rating .cb-bonus p,
body .cb-rating .cb-bonus span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* если сумма выделена <strong> — крупным идёт только она */
body .cb-rating .cb-bonus:has(strong) {
  font-size: var(--cb-bs);
  font-weight: 600;
  color: var(--cb-ink-2);
}

body .cb-rating .cb-bonus strong {
  font-size: var(--cb-b);
  font-weight: 800;
  color: var(--cb-ink);
}

body .cb-rating .cb-special {
  flex: 1 1 100%;
  font-size: 13px;
  color: var(--cb-ink-2);
}

body .cb-rating .cb-promo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 6px 10px;
  background: #fff;
  border: 1px dashed #a9dcc5;
  border-radius: 10px;
}

body .cb-rating .cb-promo-l {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cb-mute);
}

body .cb-rating .cb-promo-v {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--cb-acc-d);
}

body .cb-rating .cb-features {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--cb-ink-2);
}

body .cb-rating .cb-features li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
}

body .cb-rating .cb-features li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cb-acc-2);
}

/* ---------- плитки характеристик: подпись сверху, значение снизу ---------- */

body .cb-rating .cb-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

body .cb-rating .cb-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 11px;
  background: #fff;
  border: 1px solid var(--cb-line);
  border-radius: 12px;
}

body .cb-rating .cb-spec-ic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--cb-acc-d);
  background: var(--cb-acc-bg);
}

body .cb-rating .cb-spec-ic svg {
  width: 18px;
  height: 18px;
}

body .cb-rating .cb-spec-txt {
  min-width: 0;
  display: block;
}

body .cb-rating .cb-spec-l {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cb-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body .cb-rating .cb-spec-v {
  display: block;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--cb-ink);
}

/* ---------- кнопка раскрытия (только мобильная) ---------- */

body .cb-rating .cb-more {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  padding: 9px 12px;
  background: var(--cb-soft);
  border: 1px solid var(--cb-line);
  border-radius: 10px;
  cursor: pointer;
  appearance: none;
}

body .cb-rating .cb-more-txt {
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--cb-ink-2);
}

body .cb-rating .cb-more-ic {
  color: var(--cb-mute);
  transition: transform .2s ease;
}

body .cb-rating .cb-collapsible .cb-more { display: flex; }

body .cb-rating.cb-collapsible .cb-more { display: flex; }

body .cb-rating.cb-collapsible .cb-card.cb-open .cb-more-ic { transform: rotate(180deg); }

/* ---------- подвал: платежи и 18+ ---------- */

body .cb-rating .cb-fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .25s ease;
}

body .cb-rating.cb-collapsible .cb-fold { grid-template-rows: 0fr; }

body .cb-rating.cb-collapsible .cb-card.cb-open .cb-fold { grid-template-rows: 1fr; }

body .cb-rating .cb-fold-in { overflow: hidden; min-height: 0; }

body .cb-rating .cb-foot {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px dashed var(--cb-line);
}

body .cb-rating .cb-pays {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

body .cb-rating .cb-pays-l {
  margin-right: 2px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--cb-mute);
}

body .cb-rating .cb-pay {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--cb-ink-2);
  background: var(--cb-soft);
  border: 1px solid var(--cb-line);
  border-radius: 999px;
}

body .cb-rating .cb-pay svg {
  width: 14px;
  height: 14px;
  color: var(--cb-acc-d);
}

body .cb-rating .cb-extra {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--cb-ink-2);
}

body .cb-rating .cb-rg {
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a90a8;
}

body .cb-rating .cb-rg p,
body .cb-rating .cb-rg span,
body .cb-rating .cb-rg strong {
  font-size: 11.5px;
  line-height: 1.5;
  color: #8a90a8;
}

/* ---------- адаптив ---------- */

@media (max-width: 1199px) {
  body .cb-rating .cb-head { grid-template-columns: 110px minmax(0, 1fr) 160px; gap: 12px; }
  body .cb-rating .cb-logo { height: 60px; }
  body .cb-rating .cb-logo img { max-height: 42px; }
  body .cb-rating .cb-name { font-size: 17px; }
}

@media (max-width: 991px) {
  body .cb-rating .cb-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  body .cb-rating {
    --cb-b: 15.5px;
    --cb-bs: 13px;
  }

  body .cb-rating .cb-card { padding: 16px 13px 13px; border-radius: 16px; }

  body .cb-rating .cb-head {
    grid-template-columns: 86px minmax(0, 1fr);
    grid-template-areas: "logo id" "act act";
    gap: 10px 12px;
  }

  body .cb-rating .cb-logo { grid-area: logo; height: 54px; padding: 6px; border-radius: 12px; }
  body .cb-rating .cb-logo img { max-height: 38px; }
  body .cb-rating .cb-id { grid-area: id; }
  body .cb-rating .cb-act { grid-area: act; margin-top: 2px; }

  body .cb-rating .cb-name { font-size: 16px; }
  body .cb-rating .cb-rank { top: 9px; left: 9px; right: auto; height: 22px; min-width: 26px; font-size: 12px; }

  /* на телефоне подпись плитки переносится, а не режется многоточием */
  body .cb-rating .cb-spec-l { white-space: normal; overflow: visible; text-overflow: clip; }

  body .cb-rating .cb-offer { margin-top: 12px; padding: 10px 12px; gap: 8px 10px; }
  body .cb-rating .cb-specs { gap: 8px; margin-top: 12px; }
  body .cb-rating .cb-spec { padding: 8px 9px; gap: 8px; border-radius: 11px; }
  body .cb-rating .cb-spec-ic { width: 30px; height: 30px; border-radius: 9px; }
  body .cb-rating .cb-spec-ic svg { width: 16px; height: 16px; }
  body .cb-rating .cb-spec-v { font-size: 13px; }
  body .cb-rating .cb-cta { min-height: 46px; font-size: 14.5px; }
}

@media (max-width: 359px) {
  body .cb-rating .cb-specs { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  body .cb-rating .cb-fold,
  body .cb-rating .cb-more-ic,
  body .cb-rating .cb-cta { transition: none; }
}