/* ==========================================================================
   Juju Wins brand layer
   Джерело палітри: jujuwins.io/hu (бірюзовий #29EFD8, графіт, білий).
   Точні HEX потребують звірки з брендбуком оператора — правляться тут, в одному місці.
   ========================================================================== */

:root {
  --p24-yellow: #29efd8;
  --p24-yellow-hover: #7ff5e7;
  --p24-yellow-deep: #1fc9b5;
  --p24-black: #1a1a1a;
  --p24-black-soft: #29292e;
  --p24-black-line: #2f2f36;
  --p24-white: #ffffff;
  --p24-grey-bg: #f5f5f7;
  --p24-grey-line: #e3e3e8;
  --p24-text: #16161a;
  --p24-text-muted: #5c5c66;
  --p24-danger: #d92d20;
  --p24-success: #18a957;
  --p24-radius: 10px;
}

/* --- Базова типографіка та фон ------------------------------------------ */
body { background: var(--p24-white); color: var(--p24-text); }
h1, h2, h3, h4 { color: var(--p24-text); }
h2 { border-left: 4px solid var(--p24-yellow); padding-left: 14px; }

.content a, .entry-content a { color: var(--p24-text); box-shadow: inset 0 -2px 0 var(--p24-yellow); transition: box-shadow .15s ease, background .15s ease; }
.content a:hover, .entry-content a:hover { box-shadow: inset 0 -22px 0 var(--p24-yellow); }

/* --- Кнопки -------------------------------------------------------------- */
.button, .btn, .button--primary, .casino__button, .hero__button, a.button {
  background: var(--p24-yellow) !important;
  color: var(--p24-black) !important;
  font-weight: 700;
  border-radius: var(--p24-radius);
  border: 1px solid var(--p24-yellow-deep);
}
.button:hover, .btn:hover, .casino__button:hover, .hero__button:hover, a.button:hover {
  background: var(--p24-yellow-hover) !important;
  color: var(--p24-black) !important;
}
.button--alt, .btn--secondary {
  background: var(--p24-black) !important;
  color: var(--p24-yellow) !important;
  border: 1px solid var(--p24-black);
}

/* --- Хедер і футер -------------------------------------------------------- */
.header, .header__inner { background: var(--p24-black) !important; color: var(--p24-white) !important; }
.header a, .header__link { color: var(--p24-white) !important; }
.header a:hover, .header__link:hover { color: var(--p24-yellow) !important; }
.footer { background: var(--p24-black) !important; color: var(--p24-white) !important; border-top: 3px solid var(--p24-yellow); }
.footer a { color: var(--p24-white) !important; }
.footer a:hover { color: var(--p24-yellow) !important; }

/* --- Таблиці контенту ---------------------------------------------------- */
.table-responsive { width: 100%; overflow-x: auto; margin: 24px 0; -webkit-overflow-scrolling: touch; }
.table-responsive table { width: 100%; min-width: 520px; border: 1px solid var(--p24-grey-line); border-radius: var(--p24-radius); overflow: hidden; }
.table-responsive th {
  background: var(--p24-black); color: var(--p24-yellow);
  text-align: left; font-weight: 700; padding: 12px 14px; border: 1px solid var(--p24-black-line);
}
.table-responsive td { padding: 12px 14px; border: 1px solid var(--p24-grey-line); vertical-align: top; }
.table-responsive tr:nth-child(even) td { background: var(--p24-grey-bg); }

/* --- Блок оцінки ---------------------------------------------------------- */
.rating-score { background: var(--p24-black); color: var(--p24-yellow); border-radius: var(--p24-radius); }
.rating-bar { background: var(--p24-grey-line); border-radius: 999px; overflow: hidden; height: 10px; }
.rating-bar__fill { background: var(--p24-yellow); height: 100%; display: block; }
.star, .rating__star { color: var(--p24-yellow) !important; }

/* --- Плюси та мінуси ------------------------------------------------------ */
.advantages__item--plus { border-left: 4px solid var(--p24-success); }
.advantages__item--minus { border-left: 4px solid var(--p24-danger); }

/* --- Вікове застереження -------------------------------------------------- */
.age-badge {
  display: inline-block; background: var(--p24-yellow); color: var(--p24-black);
  font-weight: 700; border-radius: 999px; padding: 2px 12px; line-height: 1.8;
}

/* --- Зображення в контенті ------------------------------------------------ */
.entry-content img, .content img { border-radius: var(--p24-radius); border: 1px solid var(--p24-grey-line); margin: 20px 0; }

/* --- Партнерські посилання ------------------------------------------------ */
a[rel~="sponsored"] { font-weight: 700; }


/* ==========================================================================
   Міст до змінних теми — щоб брендові токени керували й блоками шаблону
   ========================================================================== */
:root {
  --primary-header-color: var(--p24-black);
  --second-header-color: var(--p24-white);
  --sub-menu-background: var(--p24-black-soft);
  --primary-header-color-cta-button: var(--p24-yellow);
  --second-header-color-cta-button: var(--p24-yellow-hover);
  --main-primary-color-cta-button: var(--p24-yellow);
  --main-primary-color-cta-button-text-color: var(--p24-black);
  --main-second-color-cta-button: var(--p24-black);
  --main-second-color-cta-button-text-color: var(--p24-yellow);
  --main-color-text: var(--p24-text);
  --third-color-text: var(--p24-black);
  --four-color-text: var(--p24-yellow);
  --four-color-text-alt: var(--p24-yellow-deep);
  --main-block-background-color-alt: var(--p24-grey-bg);
  --main-block-border-color: var(--p24-grey-line);
  --main-under-line-color: var(--p24-grey-line);
  --main-rating-star-color: var(--p24-yellow);
  --home_hero_banner_color: var(--p24-black);
  --home_hero_banner_text_color: var(--p24-white);
  --footer-background-color: var(--p24-black);
  --footer-color-text: var(--p24-white);
  --theme-color-10: var(--p24-yellow);
}