/* ==========================================================
   CASINO THEME — базовый стиль сайта
   ========================================================== */

/* ===== Цвета и переменные ===== */
:root{
  --bg-main: #0f141a;
  --bg-card: #161d26;
  --bg-soft: #1c2530;

  --text-main: #e8edf3;
  --text-muted: #9aa6b2;

  --accent-green: #2ecc71;
  --accent-green-dark: #27ae60;

  --accent-gold: #f5c542;
  --accent-blue: #3b82f6;

  --radius-lg: 18px;
  --radius-md: 14px;

  --shadow-soft: 0 10px 30px rgba(0,0,0,.35);
  --shadow-hover: 0 16px 40px rgba(0,0,0,.5);
}

/* ===== BODY / ФОН ===== */
html, body{
  background: radial-gradient(1200px 600px at top, #1a2430 0%, var(--bg-main) 60%);
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

/* ===== КОНТЕЙНЕР ===== */
.container{
  max-width: 1240px;
}

/* ===== ЗАГОЛОВКИ ===== */
h1, h2, h3, h4{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
}

h1{
  font-size: clamp(26px, 4vw, 40px);
  margin-bottom: 16px;
}

h2{
  font-size: clamp(22px, 3.2vw, 32px);
  margin: 28px 0 14px;
}

h3{
  font-size: 20px;
  margin: 22px 0 10px;
}

/* акцент под заголовком */
h2::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:8px;
  background: linear-gradient(90deg, var(--accent-gold), transparent);
  border-radius: 4px;
}

/* ===== ТЕКСТ ===== */
p{
  color: var(--text-main);
  line-height: 1.65;
}

.muted,
.param-name{
  color: var(--text-muted);
}

/* ===== КАРТОЧКИ / СЕКЦИИ ===== */
.white-block,
.section,
.content-text,
.casino-item,
.params-block{
  background: linear-gradient(180deg, var(--bg-card), var(--bg-soft));
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

/* ===== РАЗДЕЛИТЕЛИ ===== */
.param-row{
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ===== КНОПКИ ===== */
.btn,
.btn-main,
.btn-green,
.btn-download{
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: all .2s ease;
}

/* основная кнопка */
.btn-main{
  background: linear-gradient(135deg, var(--accent-green), var(--accent-green-dark));
  color:#fff;
  box-shadow: 0 8px 24px rgba(46,204,113,.45);
}

.btn-main:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 34px rgba(46,204,113,.6);
}

/* кнопка регистрации */
.btn-download{
  background: linear-gradient(135deg, var(--accent-blue), #2563eb);
  color:#fff;
}

/* ===== КАРТОЧКИ КАЗИНО ===== */
.casinos-list .casino-item{
  display:flex;
  gap:16px;
  align-items:center;
  border:1px solid rgba(255,255,255,.08);
}

/* логотип */
.casino-item .logo{
  width:96px;
  height:96px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* рейтинг */
.rating-block{
  background: rgba(0,0,0,.35);
  border-radius: 14px;
  padding: 12px;
}

.stars-wrap{
  color: var(--accent-gold);
  font-size: 18px;
  letter-spacing: 2px;
}

/* ===== GAME PLACEHOLDER ===== */
.game-placeholder{
  background:#000;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* ===== TOC / СПИСКИ ===== */
.toc{
  background: rgba(255,255,255,.04);
  border-radius: 14px;
}

.toc a{
  color: var(--accent-green);
}

.toc a:hover{
  text-decoration: underline;
}

/* ===== RAIL / СЛАЙДЕР ===== */
.rail-item{
  background: var(--bg-card);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.rail-title{
  font-weight: 700;
  color:#fff;
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ===== */
@media (max-width: 768px){
  body{
    background: var(--bg-main);
  }

  .casinos-list .casino-item{
    flex-direction: column;
    align-items: stretch;
  }

  .rating-block{
    display:none;
  }
}

/* ==========================================================
   FIX READABILITY: белые внутренние блоки → тёмные + контраст текста
   Вставь в КОНЕЦ CSS
   ========================================================== */

/* общие внутренние "карточки/плашки" внутри секций */
.white-block,
.section,
.content-text,
.params-block,
.casino-item{
  color: var(--text-main);
}

/* маленькие карточки в блоках параметров (3 колонки) */
.params-block .param-group,
.params-block .params-wrap{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text-main) !important;
}

/* строки и разделители */
.params-block .param-row{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* подписи/значения */
.params-block .param-name{
  color: var(--text-muted) !important;
}
.params-block .param-value{
  color: #ffffff !important;
  font-weight: 700;
}

/* если где-то остались белые "карточки" как в казино-листе (плитки внутри) */
.casino-item .param,
.casino-item .param-col,
.casino-item .main-params-row{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--text-main) !important;
}

/* значения бонуса чуть ярче */
.value-bonus{
  color: var(--accent-gold) !important;
  font-weight: 800;
}

/* ссылки внутри тёмных блоков */
.content-text a,
.section a,
/* .white-block a{
  color: var(--accent-green) !important;
} */
.content-text a:hover,
.section a:hover,
.white-block a:hover{
  text-decoration: underline;
}

/* ==========================================================
   CASINO CARDS — mobile layout like screenshot #2
   (add at the very end of CSS)
   ========================================================== */

@media (max-width: 768px) {

  /* общий контейнер списка */
  .casinos-list{
    display: grid;
    gap: 18px;
  }

  /* карточка казино */
  .casinos-list .casino-item{
    background: #f6f7f9 !important;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 22px;
    padding: 18px 16px;
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
    overflow: hidden;
  }

  /* логотип сверху */
  .casinos-list .casino-item .logo{
    display: inline-flex;
    width: 78px;
    height: 78px;
    border-radius: 18px;
    margin: 2px 0 14px 2px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,.18);
  }
  .casinos-list .casino-item .logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    display: block;
  }

  /* параметры (3 штуки) — в 2 колонки, как на примере */
  .casinos-list .casino-item .main-params-row{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 8px 0 10px;
  }

  /* каждая ячейка параметра = мини-карточка */
  .casinos-list .casino-item .param-col .param{
    background: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
    padding: 12px 12px;
    min-height: 62px;
  }

  .casinos-list .casino-item .param-name{
    font-size: 13px;
    opacity: .75;
    margin: 0 0 6px;
  }

  .casinos-list .casino-item .param-value{
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
  }

  /* блок "Бонус" делаем широкой плашкой на всю ширину */
  .casinos-list .casino-item .param-col:not(.main-params-row){
    margin-top: 10px;
  }
  .casinos-list .casino-item .param-col:not(.main-params-row) .param{
    width: 100%;
    min-height: 0;
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(0,0,0,.04);
  }
  .casinos-list .casino-item .value-bonus{
    color: #c98200; /* “золотой” как на примере */
    font-weight: 900;
  }

  /* разделитель как на 2-м скрине */
  .casinos-list .casino-item .param-col:not(.main-params-row){
    position: relative;
    padding-top: 14px;
  }
  .casinos-list .casino-item .param-col:not(.main-params-row)::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    border-top: 1px dashed rgba(0,0,0,.18);
    opacity: .9;
  }

  /* рейтинг в мобиле скрываем (как просил) 
  .casinos-list .casino-item .rating-block{
    display: none !important;
  }*/

  /* кнопка регистрации — крупная, на всю ширину */
  .casinos-list .casino-item .btns-wrap{
    margin-top: 14px;
  }
  .casinos-list .casino-item .btn-download{
    display: block;
    width: 100%;
    text-align: center;
    border-radius: 999px;
    padding: 16px 18px;
    font-size: 18px;
    font-weight: 800;
  }
}
/* ==========================================================
   MOBILE: casino cards — less empty, more contrast
   put to the END of /assets/casino-theme.css
   ========================================================== */
@media (max-width: 768px){

  /* карточка казино чуть плотнее */
  .casinos-list .casino-item{
    padding: 16px 14px !important;
  }

  /* сетка параметров: компактнее */
  .casinos-list .casino-item .main-params-row{
    gap: 10px !important;
    margin: 8px 0 8px !important;
  }

  /* каждая ячейка параметра = прям заметная мини-карточка */
  .casinos-list .casino-item .main-params-row .param{
    background: rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    border-radius: 16px !important;
    padding: 12px 12px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.06) !important;
    min-height: 66px !important;
  }

  /* “Бонус” отдельной плашкой — более явной */
  .casinos-list .casino-item .param-col:not(.main-params-row) .param{
    background: rgba(255, 184, 0, .10) !important;
    border: 1px solid rgba(255, 184, 0, .25) !important;
    border-radius: 18px !important;
    padding: 14px 14px !important;
  }
  .casinos-list .casino-item .value-bonus{
    color: #c98200 !important;
    font-weight: 900 !important;
  }

  /* разделитель делаем заметнее */
  .casinos-list .casino-item .param-col:not(.main-params-row)::before{
    border-top: 2px dashed rgba(0,0,0,.18) !important;
  }

  /* кнопка регистрации чуть компактнее + без “пустого” отступа */
  .casinos-list .casino-item .btns-wrap{
    margin-top: 12px !important;
  }
  .casinos-list .casino-item .btn-download{
    padding: 14px 16px !important;
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  /* рейтинг точно скрыт */
  .casinos-list .casino-item .rating-block{
    display:none !important;
  }
}

/* ==========================================================
   MOBILE: rating block to the right of logo
   ========================================================== */
@media (max-width: 768px){

  /* шапка карточки: лого слева + рейтинг справа */
  .casinos-list .casino-item{
    display: grid !important;
    grid-template-columns: 86px 1fr !important;
    grid-template-areas:
      "logo rating"
      "params params"
      "bonus bonus"
      "btn btn" !important;
    column-gap: 12px !important;
  }

  .casinos-list .casino-item > .logo{ grid-area: logo; }
  .casinos-list .casino-item > .rating-mobile{ grid-area: rating; }
  .casinos-list .casino-item > .main-params-row{ grid-area: params; }
  .casinos-list .casino-item > .param-col:not(.main-params-row){ grid-area: bonus; }
  .casinos-list .casino-item > .btns-wrap{ grid-area: btn; }

  /* скрываем “старый” рейтинг (большой блок) */
  .casinos-list .casino-item .rating-block{
    display:none !important;
  }

  /* сам мобильный рейтинг */
  .casinos-list .casino-item .rating-mobile{
    align-self: start;
    background: rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.10);
    border-radius: 18px;
    padding: 12px 12px;
    min-height: 62px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }

  .casinos-list .casino-item .rating-mobile__name{
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    color: rgba(0,0,0,.78);
  }

  .casinos-list .casino-item .rating-mobile__stars{
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
    color: #f2b01e;
    text-shadow: 0 1px 0 rgba(0,0,0,.18);
    white-space: nowrap;
  }
}

/* ==========================================================
   MOBILE: рейтинг справа от логотипа (без правок HTML)
   ========================================================== */
@media (max-width: 768px){

  /* карточка как якорь для absolute */
  .casinos-list .casino-item{
    position: relative !important;
  }

  /* ✅ отменяем прежнее "скрыть рейтинг" */
  .casinos-list .casino-item .rating-block{
    display: block !important;
  }

  /* ставим рейтинг в верхней строке справа от логотипа */
  .casinos-list .casino-item .rating-block{
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;

    /* чтобы блок начинался "после" логотипа */
    left: 112px !important; /* подстрой 96–140 если нужно */

    padding: 10px 12px !important;
    border-radius: 16px !important;

    /* перебиваем inline background-color из HTML */
    background: rgba(0,0,0,.06) !important;
    border: 1px solid rgba(0,0,0,.12) !important;

    box-shadow: none !important;
    z-index: 5 !important;
  }

  /* делаем текст читабельным (у тебя раньше был чёрный/тёмный) */
  .casinos-list .casino-item .rating-block .casino-name{
    color: rgba(0,0,0,.78) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    margin: 0 0 6px 0 !important;
  }

  .casinos-list .casino-item .rating-block .stars-wrap{
    color: #f2b01e !important;
    font-size: 18px !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.18) !important;
    margin: 0 !important;
  }

  /* иконки платформ — по желанию: компактно */
  .casinos-list .casino-item .rating-block .platforms{
    display: none !important; /* если нужно — убери эту строку */
  }

  /* чтобы блок рейтинга не налезал на параметры ниже */
  .casinos-list .casino-item .main-params-row{
    margin-top: 64px !important;
  }
}

/* ==========================================================
   MOBILE: убрать пустоту под логотипом + рейтингом
   ========================================================== */
@media (max-width: 768px){

  /* уменьшаем верхние отступы карточки */
  .casinos-list .casino-item{
    padding-top: 14px !important; /* было больше */
  }

  /* логотип — без лишнего нижнего отступа */
  .casinos-list .casino-item .logo{
    margin-bottom: 6px !important;
  }

  /* рейтинг справа — компактнее по высоте */
  .casinos-list .casino-item .rating-block{
    padding: 8px 10px !important;
  }

  /* убираем резервное пространство под «шапку» */
  .casinos-list .casino-item .main-params-row{
    margin-top: 12px !important; /* было ~60+ */
  }

  /* если есть grid/flex с min-height — снимаем */
  .casinos-list .casino-item{
    min-height: unset !important;
  }
}

/* ==========================================================
   Mobile: логотип казино на всю область блока
   ========================================================== */
@media (max-width: 768px) {

  /* контейнер логотипа */
  .casinos-list .casino-item .logo{
    width: 72px;           /* нормальный размер под мобильный */
    height: 72px;
    padding: 0 !important;
    background: none !important;
    border-radius: 16px;
    box-shadow: none !important;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* сама картинка */
  .casinos-list .casino-item .logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;     /* заполняет весь блок */
    border-radius: 16px;
    display: block;
  }

  /* убираем любые затемнения / псевдоэлементы */
  .casinos-list .casino-item .logo::before,
  .casinos-list .casino-item .logo::after{
    display: none !important;
    content: none !important;
  }
}

@media (max-width: 768px) {
  .casinos-list .casino-item .logo{
    width: 100px;
    height: 100px;
  }
}

/* =========================================================
   MOBILE FIX: params cards should be full-width (no narrow)
   ========================================================= */
@media (max-width: 768px){

  /* Родитель: запрещаем центрирование элементов в grid */
  #play .params-block,
  #play #params{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;

    /* ключевой фикс: если это grid/flex — растягиваем детей */
    justify-items: stretch !important;  /* grid */
    align-items: stretch !important;    /* grid */
    justify-content: stretch !important;
  }

  /* Если .params-block был grid — делаем 1 колонку и растяжение */
  #play .params-block{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Карточки параметров: всегда на 100% */
  #play .params-block .param-group{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    justify-self: stretch !important; /* grid */
    align-self: stretch !important;   /* grid */
    box-sizing: border-box !important;
  }

  /* На всякий: если где-то стоит ограничение внутри */
  #play .params-block .params-wrap{
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }
}



/* ================================
   Promo modal readability patch
   (keeps existing layout, overrides dark-theme muted styles)
   ================================ */
.promo-modal__dialog{ color:#111; }
.promo-modal__dialog .muted{
  color: rgba(0,0,0,.68) !important;
  opacity: 1 !important;
}
.promo-modal__title{ color:#111 !important; opacity:1 !important; }
.promo-modal__subtitle{ color: rgba(0,0,0,.68) !important; opacity:1 !important; }
.promo-modal__hint{ color: rgba(0,0,0,.68) !important; opacity:1 !important; }
.promo-benefits, .promo-benefits li{ color:#111 !important; opacity:1 !important; }
.promo-codebox__code{ color:#111 !important; opacity:1 !important; }
.promo-modal__note{
  color: rgba(0,0,0,.55) !important;
  opacity: 1 !important;
}

/* If any global effects apply opacity/filters to all text, neutralize inside modal */
.promo-modal__dialog *{
  text-shadow: none !important;
  filter: none !important;
}

/* === BTN: Получить код — усиленная версия === */
.btn-show-code,
.show-code,
[data-open-promo] {
  background: linear-gradient(135deg, #2f6df6 0%, #1d4ed8 100%) !important;
  color: #ffffff !important;

  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;

  padding: 16px 34px !important;
  min-height: 54px !important;

  border-radius: 14px !important;
  border: none !important;

  box-shadow: 
    0 8px 20px rgba(37, 99, 235, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.2) !important;

  transition: all 0.25s ease !important;
}

/* Hover */
.btn-show-code:hover,
.show-code:hover,
[data-open-promo]:hover {
  background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%) !important;
  transform: translateY(-2px);
  box-shadow: 
    0 12px 28px rgba(37, 99, 235, 0.45),
    0 4px 10px rgba(0, 0, 0, 0.25) !important;
}

/* Active */
.btn-show-code:active,
.show-code:active,
[data-open-promo]:active {
  transform: translateY(0);
  box-shadow: 
    0 4px 12px rgba(37, 99, 235, 0.35) !important;
}

/* ===========================
   SIDEBAR / POPULAR — casino look (force)
   ВСТАВЬ В КОНЕЦ CSS
   =========================== */

/* 1) Контейнер aside (правый блок) */
.layout > aside,
.layout aside,
aside{
  min-width: 0;
}

/* 2) Сам бокс сайдбара (обычно первая большая карточка внутри aside) */
.layout > aside > *,
.layout aside > *{
  border-radius: 22px;
}

/* 3) Находим "популярное" по структуре:
   контейнер внутри aside, где есть список ссылок (a) */
.layout aside .white-block,
.layout aside .card,
.layout aside .section,
.layout aside .widget,
.layout aside .box,
.layout aside > div{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 18px 40px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  padding: 18px;
}

/* 4) Заголовок внутри сайдбара (например "Popular") */
.layout aside h2,
.layout aside h3,
.layout aside .h2,
.layout aside .h3,
.layout aside b:first-of-type{
  margin: 0 0 12px;
  font-weight: 800;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  gap:10px;
}

/* "фишка" слева у заголовка */
.layout aside h2::before,
.layout aside h3::before{
  content:"";
  width:10px;height:10px;
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #ffe08a, #d9a441 60%, #7a520a 100%);
  box-shadow: 0 0 0 3px rgba(217,164,65,.18);
}

/* 5) ССЫЛКИ: превращаем в казино-кнопки/карточки */
.layout aside a{
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding: 12px 12px;
  margin: 10px 0;

  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);

  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

/* если внутри ссылки есть заголовок/текст — делаем его жирным */
.layout aside a b,
.layout aside a strong{
  font-weight: 750;
  line-height: 1.15;
}

/* второй ряд/подпись ("Vá para") делаем CTA-чипом */
.layout aside a .muted,
.layout aside a small,
.layout aside a span{
  color: rgba(255,255,255,.68);
  font-size: 12px;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* стрелка справа */
.layout aside a::after{
  content:"›";
  opacity:.75;
  font-size:18px;
  line-height:1;
  color: rgba(255,255,255,.70);
}

/* hover эффект */
.layout aside a:hover{
  transform: translateY(-1px);
  border-color: rgba(217,164,65,.35);
  background: linear-gradient(180deg, rgba(217,164,65,.10), rgba(0,0,0,.18));
}

/* 6) На мобилке компактнее */
@media (max-width: 860px){
  .layout aside .white-block,
  .layout aside .card,
  .layout aside .section,
  .layout aside .widget,
  .layout aside .box,
  .layout aside > div{
    padding: 14px;
    border-radius: 18px;
  }
  .layout aside a{
    padding: 10px 10px;
    border-radius: 14px;
  }
}
/* ===========================
   POPULAR SIDEBAR — casino style (targeted)
   ВСТАВЬ В КОНЕЦ casino-theme.css
   =========================== */

/* контейнер сайдбара */
.layout aside .white-block,
.layout aside .card,
.layout aside .widget,
.layout aside .box,
.layout aside > .white-block,
.layout aside > .card,
.layout aside > div{
  background: radial-gradient(120% 100% at 10% 0%, rgba(20,255,170,.10), rgba(0,0,0,.00) 55%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(10px);
  padding: 18px !important;
}

/* заголовок "Popular" */
.layout aside h2,
.layout aside h3{
  margin: 0 0 14px !important;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
  display:flex;
  align-items:center;
  gap:10px;
}

/* золотая точка слева */
.layout aside h2::before,
.layout aside h3::before{
  content:"";
  width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #ffe8a3, #d9a441 60%, #7a520a 100%);
  box-shadow: 0 0 0 3px rgba(217,164,65,.16), 0 10px 24px rgba(217,164,65,.20);
}

/* ===== СТИЛЬ КАРТОЧЕК-ПУНКТОВ =====
   у тебя каждый пункт — отдельная "белая" карточка.
   Мы красим любые прямые карточки/блоки внутри сайдбара */
.layout aside .white-card,
.layout aside .popular-item,
.layout aside .mini-card,
.layout aside .tile,
.layout aside .card-item,
.layout aside > div > div{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.35) !important;
}

/* если твои карточки — это ссылки или в них есть ссылка */
.layout aside a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
}

/* Заголовок внутри карточки (Bônus de cassino) */
.layout aside .white-card b,
.layout aside .white-card strong,
.layout aside > div > div b,
.layout aside > div > div strong{
  color: rgba(255,255,255,.92) !important;
  font-weight: 850;
}

/* ЛЕВАЯ АКЦЕНТНАЯ ПОЛОСКА у каждого пункта */
.layout aside .white-card,
.layout aside > div > div{
  position: relative;
  overflow: hidden;
}
.layout aside .white-card::before,
.layout aside > div > div::before{
  content:"";
  position:absolute;
  left:0; top:10px; bottom:10px;
  width:4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(20,255,170,.85), rgba(217,164,65,.85));
  opacity: .75;
}

/* ===== CTA "Vá para" (убираем серую плашку) =====
   у тебя "Vá para" выглядит как отдельная серая кнопка/полоса.
   Красим любые такие вложенные блоки внутри пункта */
.layout aside .white-card .btn,
.layout aside .white-card .cta,
.layout aside .white-card .go,
.layout aside .white-card .muted,
.layout aside > div > div .muted{
  color: rgba(15,15,15,.92) !important;
  background: radial-gradient(120% 140% at 30% 20%, #ffe8a3, #d9a441 60%, #9a6b14 100%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 14px 26px rgba(217,164,65,.18), inset 0 1px 0 rgba(255,255,255,.25) !important;
  font-weight: 800 !important;
}

/* стрелка справа на CTA */
.layout aside .white-card .muted::after,
.layout aside > div > div .muted::after{
  content:"›";
  font-size: 18px;
  line-height: 1;
  opacity: .9;
}

/* hover на пункт */
.layout aside .white-card:hover,
.layout aside > div > div:hover{
  border-color: rgba(217,164,65,.28) !important;
  transform: translateY(-1px);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
/* ===========================
   POPULAR SIDEBAR — FIX (text missing + remove white)
   =========================== */

/* 1) Блок Popular (внешняя карточка) */
.layout aside{
  color: rgba(255,255,255,.92);
}

/* 2) Любая "карточка пункта" внутри aside */
.layout aside .white-card,
.layout aside .mini-card,
.layout aside .tile,
.layout aside .card-item,
.layout aside .popular-item,
.layout aside > div > div{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 18px !important;
  padding: 14px 14px 16px !important;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.35) !important;
}

/* акцентная полоска слева */
.layout aside .white-card::before,
.layout aside .mini-card::before,
.layout aside .tile::before,
.layout aside .card-item::before,
.layout aside .popular-item::before,
.layout aside > div > div::before{
  content:"";
  position:absolute;
  left:0; top:10px; bottom:10px;
  width:4px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(20,255,170,.85), rgba(217,164,65,.85));
  opacity:.85;
}

/* 3) ВАЖНО: вернуть видимость текста.
   Красим ВСЕ текстовые элементы внутри карточки,
   но исключаем кнопку/чип "Vá para" */
.layout aside .white-card :where(h1,h2,h3,h4,p,span,small,strong,b,div,em),
.layout aside .mini-card :where(h1,h2,h3,h4,p,span,small,strong,b,div,em),
.layout aside .tile :where(h1,h2,h3,h4,p,span,small,strong,b,div,em),
.layout aside .card-item :where(h1,h2,h3,h4,p,span,small,strong,b,div,em),
.layout aside .popular-item :where(h1,h2,h3,h4,p,span,small,strong,b,div,em),
.layout aside > div > div :where(h1,h2,h3,h4,p,span,small,strong,b,div,em){
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* но сама "кнопка" пусть будет золотой */
.layout aside .white-card .muted,
.layout aside .mini-card .muted,
.layout aside .tile .muted,
.layout aside .card-item .muted,
.layout aside .popular-item .muted,
.layout aside > div > div .muted{
  color: rgba(15,15,15,.92) !important;
  background: radial-gradient(120% 140% at 30% 20%, #ffe8a3, #d9a441 60%, #9a6b14 100%) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-weight: 850 !important;
  box-shadow: 0 14px 26px rgba(217,164,65,.18), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

/* стрелка на кнопке */
.layout aside .white-card .muted::after,
.layout aside .mini-card .muted::after,
.layout aside .tile .muted::after,
.layout aside .card-item .muted::after,
.layout aside .popular-item .muted::after,
.layout aside > div > div .muted::after{
  content:"›";
  font-size: 18px;
  line-height: 1;
  opacity: .95;
}

/* 4) Если заголовок пункта — это <b>/<strong> вверху, делаем его явно */
.layout aside .white-card b,
.layout aside .white-card strong,
.layout aside .mini-card b,
.layout aside .mini-card strong,
.layout aside .tile b,
.layout aside .tile strong,
.layout aside .card-item b,
.layout aside .card-item strong,
.layout aside .popular-item b,
.layout aside .popular-item strong,
.layout aside > div > div b,
.layout aside > div > div strong{
  display:block !important;
  margin-bottom: 10px !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  letter-spacing: .2px !important;
  font-weight: 900 !important;
}

/* hover */
.layout aside .white-card:hover,
.layout aside .mini-card:hover,
.layout aside .tile:hover,
.layout aside .card-item:hover,
.layout aside .popular-item:hover,
.layout aside > div > div:hover{
  border-color: rgba(217,164,65,.28) !important;
  transform: translateY(-1px);
  transition: transform .12s ease, border-color .12s ease;
}
/* =======================================
   SIDEBAR CARD DARK FIX (FINAL CLEAN FIX)
   ======================================= */

/* Все карточки внутри aside */
.layout aside > div > div{
  background: linear-gradient(
      180deg,
      rgba(18, 24, 32, 0.95),
      rgba(14, 20, 28, 0.95)
  ) !important;

  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important;
  padding: 18px !important;
}

/* Заголовок пункта (Bônus de cassino и т.д.) */
.layout aside > div > div b,
.layout aside > div > div strong,
.layout aside > div > div h3,
.layout aside > div > div h4{
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 18px !important;
  margin-bottom: 12px !important;
  display: block !important;
}

/* Любой текст внутри карточки */
.layout aside > div > div *{
  color: rgba(255,255,255,0.92) !important;
}

/* Кнопка "Vá para" */
.layout aside > div > div .muted{
  color: #111 !important;

  background: linear-gradient(
      180deg,
      #f5d37a,
      #d4a63a
  ) !important;

  border-radius: 999px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  box-shadow:
      0 8px 20px rgba(212,166,58,0.25),
      inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

/* стрелка */
.layout aside > div > div .muted::after{
  content: "›";
  font-size: 16px;
  opacity: .9;
}

/* hover эффект */
.layout aside > div > div:hover{
  border-color: rgba(212,166,58,0.35) !important;
  transform: translateY(-2px);
  transition: 0.2s ease;
}
/* ===========================
   SIDEBAR (Popular) — casino theme
   Targets: #siteSidebarMount .sidecard .side-list .side-item a.muted
   =========================== */

#siteSidebarMount.sticky-sidebar .sidecard{
  background: radial-gradient(120% 140% at 10% 0%, rgba(16, 255, 170, .10), rgba(0,0,0,0) 55%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

/* Заголовок "Popular" */
#siteSidebarMount.sticky-sidebar .sidecard > h3{
  margin: 0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

#siteSidebarMount.sticky-sidebar .sidecard > h3::before{
  content:"";
  width:10px;height:10px;border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #ffe8a3, #d9a441 60%, #7a520a 100%);
  box-shadow: 0 0 0 3px rgba(217,164,65,.16), 0 10px 24px rgba(217,164,65,.18);
}

/* Сетка списка */
#siteSidebarMount.sticky-sidebar .side-list{
  display: grid;
  gap: 12px;
}

/* Карточка пункта (убираем белый фон) */
#siteSidebarMount.sticky-sidebar .side-item{
  position: relative;
  overflow: hidden;

  background: linear-gradient(180deg, rgba(18, 24, 32, .92), rgba(12, 16, 24, .92));
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 14px 14px 16px;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.35);
}

/* Акцентная полоска слева */
#siteSidebarMount.sticky-sidebar .side-item::before{
  content:"";
  position:absolute;
  left:0; top:10px; bottom:10px;
  width:4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(16,255,170,.85), rgba(217,164,65,.85));
  opacity:.9;
}

/* Заголовок пункта */
#siteSidebarMount.sticky-sidebar .side-item > b{
  display:block;
  margin: 2px 0 12px;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.2;
  font-size: 18px;
}

/* Кнопка/ссылка "Vá para" */
#siteSidebarMount.sticky-sidebar .side-item > a.muted{
  text-decoration: none;
  color: rgba(16,16,16,.92);
  font-weight: 850;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 16px;
  border-radius: 999px;

  background: radial-gradient(120% 140% at 30% 20%, #ffe8a3, #d9a441 60%, #9a6b14 100%);
  border: 1px solid rgba(255,255,255,.18);

  box-shadow: 0 12px 24px rgba(217,164,65,.18), inset 0 1px 0 rgba(255,255,255,.25);
}

/* Стрелка справа на CTA */
#siteSidebarMount.sticky-sidebar .side-item > a.muted::after{
  content:"›";
  font-size: 18px;
  line-height: 1;
  opacity: .9;
  transform: translateY(-1px);
}

/* Hover эффекты */
#siteSidebarMount.sticky-sidebar .side-item:hover{
  border-color: rgba(217,164,65,.28);
  transform: translateY(-1px);
  transition: transform .12s ease, border-color .12s ease;
}

#siteSidebarMount.sticky-sidebar .side-item > a.muted:hover{
  filter: brightness(1.03);
}

/* Мобилка */
@media (max-width: 860px){
  #siteSidebarMount.sticky-sidebar .sidecard{
    padding: 14px;
    border-radius: 18px;
  }
  #siteSidebarMount.sticky-sidebar .side-item{
    padding: 12px 12px 14px;
    border-radius: 16px;
  }
  #siteSidebarMount.sticky-sidebar .side-item > b{
    font-size: 17px;
  }
}
/* ===========================
   SIDEBAR FIX: no extra stripe + no footer overlap
   =========================== */

/* 1) Sticky: корректное прилипание и ограничение по высоте экрана */
#siteSidebarMount.sticky-sidebar{
  position: sticky;
  top: 88px;                 /* подстрой под высоту твоего хедера */
  align-self: start;
  height: fit-content;

  /* чтобы не упирался в футер и не растягивался бесконечно */
  max-height: calc(100vh - 120px);
  overflow: auto;            /* внутри прокрутка, если пунктов много */
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

/* тонкий скроллбар (по желанию) */
#siteSidebarMount.sticky-sidebar::-webkit-scrollbar{ width: 10px; }
#siteSidebarMount.sticky-sidebar::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.35);
}
#siteSidebarMount.sticky-sidebar::-webkit-scrollbar-track{
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}

/* 2) Убираем “лишнюю полосу” у контейнера/списка, если она есть */
#siteSidebarMount .sidecard,
#siteSidebarMount .side-list{
  border-left: none !important;
  box-shadow: none; /* если где-то давало вертикальную линию */
}

/* 3) Оставляем ТОЛЬКО одну акцентную полоску на каждом item и делаем её аккуратной */
#siteSidebarMount .side-item{
  position: relative;
  overflow: hidden;
  padding-left: 16px; /* место под полоску */
}

/* Сама полоска */
#siteSidebarMount .side-item::before{
  content:"";
  position:absolute;
  left: 10px;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(16,255,170,.85), rgba(217,164,65,.85));
  opacity: .9;
}

/* 4) Если где-то ещё добавляется полоса через pseudo-элементы — выключаем */
#siteSidebarMount .side-list::before,
#siteSidebarMount .sidecard::before,
#siteSidebarMount .sidecard::after,
#siteSidebarMount .side-list::after{
  content: none !important;
}

/* 5) Сайдбар не “толстый” и не растянутый по ширине */
#siteSidebarMount .sidecard{
  padding: 16px !important;
  max-width: 420px;     /* чтобы не выглядело как огромный блок */
}

/* 6) Чуть компактнее карточки */
#siteSidebarMount .side-item{
  border-radius: 16px !important;
  padding-top: 12px !important;
  padding-bottom: 14px !important;
}

#siteSidebarMount .side-item > b{
  font-size: 17px !important;
  margin-bottom: 10px !important;
}

/* 7) CTA компактнее */
#siteSidebarMount .side-item > a.muted{
  padding: 9px 14px !important;
}

/* 8) На мобилке убираем sticky, чтобы не мешал */
@media (max-width: 980px){
  #siteSidebarMount.sticky-sidebar{
    position: static;
    max-height: none;
    overflow: visible;
  }
}
/* ===========================
   SIDEBAR sticky — clean (NO inner scroll)
   =========================== */

/* 1) Сайдбар липнет ровно под шапкой */
#siteSidebarMount.sticky-sidebar{
  position: sticky;
  top: 16px;              /* ✅ если хедера нет фиксированного; если есть — см. ниже */
  align-self: start;
  height: fit-content;

  /* ✅ убираем внутренний скролл/полосу */
  max-height: none;
  overflow: visible;
}

/* Если у тебя фиксированный header — поставь top равный его высоте.
   Например: 72px. Тогда закомментируй top:16px выше и включи это: */
/*
#siteSidebarMount.sticky-sidebar{ top: 72px; }
*/

/* 2) Убираем любую “полосу справа” от overflow у вложенных блоков */
#siteSidebarMount .sidecard,
#siteSidebarMount .side-list{
  overflow: visible !important;
}

/* 3) Иногда линию рисует border/outline у sidecard — убираем */
#siteSidebarMount .sidecard{
  outline: none !important;
}