/*
 * test7.fastmail.monster — візуальний шар під референс gameshub.
 * Вантажиться після style.css, перекриває тільки те, що відрізняється.
 * Референс: темно-синій hero без ілюстрації, діагональний перехід у світлий контент,
 * індиго-акцент замість блакитного, помаранчевий у лого.
 */

:root {
  --bg-dark: #0c1030;
  --bg-hero: linear-gradient(160deg, #171a4a 0%, #12143a 45%, #0c1030 100%);
  --page: #f7f8fc;
  --pp-blue: #ffffff;
  --pp-cyan: #7c3aed;      /* акцент у лого і кнопці (фіолетовий) */
  --accent: #4a41c4;       /* індиго для цитат і активних станів */
  --line: #e4e7f2;
  /* іконка рубрики «Wo es nicht geklappt hat»: маскот сайту (README 6.8).
     Шлях ОБОВ'ЯЗКОВО абсолютний. Відносний тут не працює: браузер резолвить url()
     усередині CSS-змінної від файлу, де змінна ПІДСТАВЛЯЄТЬСЯ (style.css у корені
     теми), а не від того, де вона оголошена. '../assets/' звідси давало
     /wp-content/themes/assets/ без /wpgen/ і мовчазний 404. */
  --note-icon: url('/wp-content/themes/wpgen/assets/mascot-owl.svg');
}

/* ---------- шапка ---------- */

/* шапка чорна (замість --bg-dark), один рядок: лого + меню замість двох
   окремих рядків (header-bar і main-nav), щоб шапка не була заввишки два поверхи */
/* фон шапки на всю ширину вікна (як і раніше), а відступи зліва/справа
   розраховуємо так само, як центрується .wrap, тільки через padding, а не
   через max-width+margin — інакше сам фон обрізається по боках */
.site-header {
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px max(20px, calc((100% - var(--wrap)) / 2 + 20px));
  gap: 6px 28px;
}
.main-nav { border-top: none; flex: 1 1 auto; min-width: 0; }

/* header-bar і main-nav > .wrap несли власний max-width/centering (клас .wrap) —
   тепер відступи задає .site-header, тому тут обнуляємо, інакше подвійний відступ */
.header-bar.wrap { max-width: none; margin: 0; padding: 0; width: auto; flex: 0 0 auto; }
.main-nav > .wrap { max-width: none; margin: 0; padding: 0; width: auto; }

.header-bar { display: flex; align-items: center; justify-content: flex-start; }
.header-bar .header-side, .header-side.right { display: none; }

.main-nav ul { justify-content: flex-start; }
.mobile-menu-toggle { display: none; }

/* нове лого — вже готовий лендмарк (кубики+напис), тому власний текстовий
   логотип теми ховаємо, а бокс під іконку підганяємо під пропорції PNG (550x177) */
.logo-text { display: none; }
.logo-mark {
  width: 130px; height: 42px; flex: 0 0 auto;
  border-radius: 0; background: none; padding: 0;
}
.logo-mark img { width: 100%; height: 100%; object-fit: contain; }

@media (max-width: 640px) {
  /* один рядок і на мобільному: лого фіксованого розміру + меню, що само
     скролиться горизонтально (це вже вміє .main-nav ul з базової теми) */
  .site-header { padding: 8px 16px; gap: 10px; flex-wrap: nowrap; }
  .logo-mark { width: 104px; height: 34px; }
  .site-header { align-items: center; overflow: visible; }
  .mobile-menu-toggle { display: inline-flex; margin-left: auto; align-items: center; justify-content: center; gap: 4px; flex-direction: column; width: 44px; height: 40px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: #006847; color: #fff; cursor: pointer; }
  .mobile-menu-toggle span { display: block; width: 21px; height: 2px; background: currentColor; border-radius: 2px; }
  .mobile-menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .main-nav { display: none; flex: 1 1 100%; width: 100%; overflow: visible; }
  body.mobile-menu-open .main-nav { display: block; }
  .main-nav > .wrap { width: 100%; overflow: visible; }
  .main-nav ul { flex-wrap: wrap; justify-content: flex-start; gap: 2px; overflow: visible; padding: 8px 0 4px; }
  .main-nav li { flex: 0 0 auto; }
  .main-nav a, .main-nav .sub-toggle { font-size: 14px; padding: 10px 11px; }
  .main-nav .sub-menu { position: fixed; top: auto; left: 12px; right: 12px; max-height: 65vh; overflow-y: auto; z-index: 1000; }
}

/* ---------- hero без ілюстрації ---------- */

.hero { position: relative; padding: 30px 0 64px; overflow: hidden; }
.hero-plain .hero-grid { grid-template-columns: 1fr; }
.hero-plain .hero h1 { max-width: 18ch; }

.hero h1 { font-size: clamp(30px, 4.6vw, 48px); letter-spacing: -.8px; }
.hero p.lead { max-width: 62ch; font-size: clamp(16px, 1.35vw, 19px); }

/* діагональний зріз між hero і контентом, як на референсі */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 58px;
  background: var(--page);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  height: 58px;
  background: #4a41c4;
  opacity: .55;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.hero .wrap { position: relative; z-index: 2; }

/* ---------- дисклеймер під byline ---------- */

.hero-disclaimer {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 13px;
  line-height: 1.5;
  color: #b9c0dd;
  max-width: 80ch;
}
.hero-disclaimer-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border: 1px solid #ff6a2b;
  border-radius: 20px;
  color: #ff9a6b;
  font-weight: 700;
  font-size: 12px;
}

/* ---------- контент ---------- */

.content-area { padding: 30px 0 10px; }
.card { border-radius: 14px; }
.entry h2 { letter-spacing: -.4px; }

.author-quote { border-left-color: var(--accent); }
.faq-item.is-open .faq-icon { background: var(--accent); }

@media (max-width: 980px) {
  .hero { padding: 22px 0 48px; }
  .hero::after, .hero::before { height: 38px; }
  .hero::before { bottom: 28px; }
  .hero-plain .hero h1 { max-width: none; }
}

/* Тут лише 6 пунктів верхнього рівня (не 11, як у типового шаблону), тому
   стандартне ущільнення шрифту/відступів не потрібне — навпаки, трохи
   збільшуємо, бо місця в один рядок з лого вистачає. */
@media (min-width: 981px) {
  .main-nav a, .main-nav .sub-toggle { font-size: 16px; padding: 14px 18px; }
  .main-nav ul { gap: 4px; }
  .main-nav .sub-menu a { font-size: 15px; padding: 10px 16px; }
}


/* ---------- смуга трастових бейджів над футером ---------- */

/* смуга стоїть впритул до футера: базовий margin-top футера тут зайвий, інакше між
   ними лишається світлий проміжок і смуга висить сама по собі */
.trust-badges + .site-footer { margin-top: 0; }

.trust-badges { background: #eef0f7; border-top: 1px solid var(--line); padding: 20px 0; }
.trust-badges ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.trust-badges a, .trust-badges .tb-static {
  display: flex; align-items: center; gap: 10px;
  min-width: 178px; padding: 10px 16px; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; text-decoration: none; color: #1a1f3d;
}
.trust-badges a:hover { border-color: var(--pp-cyan); }
.trust-badges a:hover .tb-ico { color: var(--pp-cyan); }
.trust-badges .tb-ico { flex: 0 0 auto; color: #4a41c4; }
.trust-badges .tb-txt { display: flex; flex-direction: column; min-width: 0; }
.trust-badges .tb-label { font-weight: 800; font-size: 15px; letter-spacing: .3px; line-height: 1.2; }
.trust-badges .tb-sub { font-size: 12px; color: #5c6480; margin-top: 2px; }

@media (max-width: 720px) {
  .trust-badges { padding: 14px 0; }
  .trust-badges a, .trust-badges .tb-static { min-width: calc(50% - 5px); padding: 9px 12px; }
  .trust-badges .tb-sub { font-size: 11px; }
}


/* ---------- смуга логотипів медіа/партнерських програм у футері ---------- */

.trust-logos { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; }
.trust-logos ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px;
}
.trust-logos li { display: flex; align-items: center; }
.trust-logos img { display: block; width: auto; max-width: 140px; }

@media (max-width: 720px) {
  .trust-logos { padding: 16px 0; }
  .trust-logos ul { gap: 18px; }
  .trust-logos img { max-width: 110px; }
}


/* ---------- портрет на сторінці автора ---------- */

.hero-author .wrap { position: relative; }
.author-portrait {
  position: absolute; right: 0; top: 46px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.author-portrait img {
  width: 190px; height: 190px; border-radius: 50%; object-fit: cover;
  border: 4px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 34px rgba(5,8,26,.45);
}
.author-portrait .ap-city {
  font-size: 13px; color: #aab2c8; letter-spacing: .3px;
  max-width: 190px; text-align: center;
}
.hero-author h1, .hero-author p.lead { max-width: 30ch; }
.hero-author p.lead { font-size: 15px; }

@media (max-width: 900px) {
  .author-portrait { position: static; align-items: flex-start; margin-top: 18px; }
  .author-portrait img { width: 128px; height: 128px; }
  .hero-author h1, .hero-author p.lead { max-width: none; }
}


/* ---------- наскрізний CTA-банер у контенті ---------- */

.cta-img { display: block; margin: 30px 0; }
.cta-img img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 12px 28px rgba(8,11,35,.15);
}
.cta-img--light img { box-shadow: 0 10px 24px rgba(8,11,35,.10); }
@media (max-width: 640px) { .cta-img { margin: 22px 0; } .cta-img img { border-radius: 14px; } }

/* якір до таблиці оферів: невеликий відступ зверху, щоб при переході таблиця
   не впиралась у край вікна */
.offers-anchor { position: relative; top: -18px; display: block; height: 0; }
html { scroll-behavior: smooth; }

/* ---------- пояснювальні схеми ---------- */
.scheme { margin: 28px 0; }
.scheme img { display: block; width: 100%; height: auto; border-radius: 18px; }
@media (max-width: 640px) { .scheme { margin: 20px 0; } }


/* ---------- блок «Perché fidarti di noi» під контентом ---------- */

.why-trust { margin: 34px 0 4px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }

.why-trust .wt-head { display: flex; align-items: center; gap: 10px; background: var(--bg-dark); color: #fff; padding: 14px 20px; }
.why-trust .wt-head .tb-ico { color: #fff; flex: 0 0 auto; }
.why-trust .wt-title { font-weight: 800; letter-spacing: .4px; text-transform: uppercase; font-size: 14px; }
.why-trust .wt-since { margin-left: auto; padding: 4px 12px; border-radius: 20px; background: rgba(255,255,255,.16); font-size: 12px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }

.why-trust .wt-intro { margin: 0; padding: 18px 20px; font-size: 15px; line-height: 1.5; }

.why-trust .wt-stats { display: flex; background: var(--page); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.why-trust .wt-stat { flex: 1; text-align: center; padding: 16px 10px; border-right: 1px solid var(--line); }
.why-trust .wt-stat:last-child { border-right: 0; }
.why-trust .wt-stat b { display: block; font-size: 26px; letter-spacing: -.5px; }
.why-trust .wt-stat span { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: #5c6480; }

.why-trust .wt-list { list-style: none; margin: 0; padding: 0; }
.why-trust .wt-list li { display: flex; align-items: flex-start; gap: 10px; padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; }
.why-trust .wt-list li:last-child { border-bottom: 0; }
.why-trust .wt-list .tb-ico { flex: 0 0 auto; color: var(--pp-cyan); margin-top: 1px; }

.why-trust .wt-roles { display: flex; background: var(--page); border-top: 1px solid var(--line); }
.why-trust .wt-role { flex: 1; text-align: center; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-right: 1px solid var(--line); }
.why-trust .wt-role:last-child { border-right: 0; }
.why-trust .wt-role .tb-ico { box-sizing: content-box; padding: 9px; border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 0 0 1px var(--line); }
.why-trust .wt-role span { font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: #1a1f3d; }

.why-trust .wt-cta { display: block; text-align: center; padding: 15px; background: linear-gradient(90deg, #7c3aed, #5b21b6); color: #fff; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; text-decoration: none; font-size: 13px; }
.why-trust .wt-cta:hover { filter: brightness(1.06); }

@media (max-width: 640px) {
  .why-trust .wt-stats, .why-trust .wt-roles { flex-wrap: wrap; }
  .why-trust .wt-stat, .why-trust .wt-role { flex: 1 1 50%; }
  .why-trust .wt-stat:nth-child(odd), .why-trust .wt-role:nth-child(odd) { border-right: 1px solid var(--line); }
}


/* ---------- брендова головна (parts/home-brand.php) ---------- */

.home-brand { background: var(--page); padding-bottom: 10px; }
.home-brand .hb-ico { flex: 0 0 auto; }

.hb-hero {
  background: radial-gradient(90% 120% at 50% -20%, #ffe9dd 0%, rgba(255,233,221,0) 60%), #fff;
  border-bottom: 1px solid var(--line); padding: 46px 0 88px; text-align: center;
}
.hb-hero h1 { margin: 0 auto 14px; font-size: clamp(30px, 4vw, 44px); line-height: 1.12; letter-spacing: -.8px; color: #12152e; max-width: 22ch; }
.hb-lead { margin: 0 auto 28px; max-width: 760px; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: #3d4460; }
.hb-lead b, .hb-lead strong { color: #12152e; }

.hb-search {
  position: relative; display: flex; align-items: center; gap: 10px;
  max-width: 640px; margin: 0 auto; padding: 8px 8px 8px 22px;
  background: #fff; border: 1px solid #e6e8f2; border-radius: 999px;
  box-shadow: 0 14px 34px rgba(18,21,46,.10);
}
.hb-search > .hb-ico { color: #8a90ab; }
.hb-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 17px; color: #12152e; padding: 10px 0;
}
.hb-search input::placeholder { color: #9aa0b8; }
.hb-search button {
  flex: 0 0 auto; width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #a78bfa, #7c3aed 55%, #5b21b6);
  box-shadow: 0 6px 16px rgba(124,58,237,.35);
}
.hb-search button:hover { filter: brightness(1.05); }
.hb-search:focus-within { border-color: #c4b5fd; box-shadow: 0 14px 34px rgba(18,21,46,.10), 0 0 0 4px rgba(124,58,237,.14); }

.hb-hints { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.hb-hints a {
  padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line);
  font-size: 14px; color: #3d4460; text-decoration: none;
}
.hb-hints a:hover { border-color: var(--pp-cyan); color: #12152e; }

.hb-section { padding: 26px 0; }
.hb-section--features { padding-top: 0; margin-top: -62px; position: relative; z-index: 2; }

.hb-head { margin: 0 0 18px; }
.hb-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.4px; color: #12152e; }
.hb-head h2 .hb-ico { color: var(--pp-cyan); width: 26px; height: 26px; }
.hb-head p { margin: 6px 0 0; color: #5c6480; font-size: 16px; }

/* картки розділів з помаранчевою смугою */
.hb-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hb-feature {
  display: flex; flex-direction: column; justify-content: space-between;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  text-decoration: none; color: #12152e;
  box-shadow: 0 8px 24px rgba(18,21,46,.06); transition: transform .15s ease, box-shadow .15s ease;
}
a.hb-feature:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18,21,46,.12); }
.hb-feature-top { display: flex; gap: 12px; align-items: flex-start; padding: 16px 16px 14px; }
.hb-feature-img img { display: block; width: 76px; height: 76px; }
.hb-feature-txt b { display: block; font-size: 15px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; line-height: 1.25; margin-bottom: 4px; }
.hb-feature-txt span { display: block; font-size: 14.5px; line-height: 1.45; color: #4a5170; }
.hb-feature-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 8px 8px; padding: 9px 14px; border-radius: 9px; color: #fff;
  background: linear-gradient(90deg, #7c3aed, #5b21b6);
  font-size: 14.5px;
}
.hb-feature-bar b { font-size: 24px; font-weight: 800; letter-spacing: -.3px; line-height: 1; }
.hb-feature.is-soon .hb-feature-bar { background: #e9ebf3; color: #6a7190; }

/* плитки бонусів */
.hb-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hb-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; text-align: center;
  text-decoration: none; color: #12152e; box-shadow: 0 6px 18px rgba(18,21,46,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
a.hb-tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(18,21,46,.10); }
.hb-tile img { width: 84px; height: 84px; }
.hb-tile b { font-size: 14px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; }
.hb-go { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 15px; color: #1ea15a; }
.hb-go .hb-ico { width: 18px; height: 18px; }
.hb-soon { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #eef0f6; color: #6a7190; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; }

/* банери ігор */
.hb-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hb-game {
  position: relative; display: flex; align-items: flex-end; min-height: 140px; padding: 16px;
  border-radius: 14px; overflow: hidden; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, #ff7a3d 0%, #e8481a 100%);
  box-shadow: 0 10px 24px rgba(18,21,46,.12); transition: transform .15s ease;
}
.hb-game::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 85% 20%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%);
}
.hb-game--1 { background: linear-gradient(135deg, #5a50d6 0%, #2f2790 100%); }
.hb-game--2 { background: linear-gradient(135deg, #1e2350 0%, #0c1030 100%); }
.hb-game--3 { background: linear-gradient(135deg, #7a4be0 0%, #e8481a 120%); }
a.hb-game:hover { transform: translateY(-3px); }
.hb-game img { position: absolute; right: -8px; top: 50%; transform: translateY(-50%) rotate(-6deg); width: 118px; height: 118px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.25)); }
.hb-game-txt { position: relative; z-index: 1; max-width: 62%; }
.hb-game-txt b { display: block; font-size: 23px; font-weight: 900; line-height: 1.02; letter-spacing: -.2px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.18); }
.hb-game-txt span { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; opacity: .95; }
.hb-game-txt .hb-ico { width: 16px; height: 16px; }
.hb-badge { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 12px; font-weight: 700; }

/* останні гайди */
.hb-latest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hb-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 18px rgba(18,21,46,.05); }
.hb-card-thumb {
  position: relative; display: grid; place-items: center; height: 150px;
  background: radial-gradient(80% 90% at 30% 20%, #fff3ea 0%, #ffe0cc 45%, #dcd9ff 100%);
}
.hb-card:nth-child(3n+2) .hb-card-thumb { background: radial-gradient(80% 90% at 70% 20%, #eeedff 0%, #dcd9ff 50%, #ffd8c4 100%); }
.hb-card:nth-child(3n) .hb-card-thumb { background: radial-gradient(80% 90% at 50% 10%, #fff6d9 0%, #ffe3c8 50%, #ffcdb5 100%); }
.hb-card-thumb img { width: 110px; height: 110px; transition: transform .2s ease; }
.hb-card:hover .hb-card-thumb img { transform: scale(1.06) rotate(-3deg); }
.hb-chip { position: absolute; left: 14px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: #ffd23f; color: #12152e; font-size: 12.5px; font-weight: 700; }
.hb-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.hb-card-body h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.hb-card-body h3 a { color: #12152e; text-decoration: none; }
.hb-card-body h3 a:hover { color: var(--pp-cyan); }
.hb-card-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: #4a5170; }
.hb-date { margin-top: auto; margin-bottom: 12px; font-size: 13px; color: #8a90ab; }
.hb-btn-outline {
  display: block; text-align: center; padding: 9px 12px; border: 1.5px solid #12152e; border-radius: 9px;
  color: #12152e; font-weight: 800; font-size: 14px; letter-spacing: .3px; text-decoration: none;
}
.hb-btn-outline:hover { background: #12152e; color: #fff; }

/* безпека */
.hb-info { display: grid; gap: 16px; }
.hb-info-card { display: flex; align-items: center; gap: 22px; padding: 18px 26px 18px 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.hb-info-img { flex: 0 0 170px; display: grid; place-items: center; height: 150px; border-radius: 12px; background: radial-gradient(70% 70% at 50% 50%, #ffe6d8 0%, #fff4ee 60%, #fff 100%); }
.hb-info-img img { width: 130px; height: 130px; }
.hb-info-card h3 { margin: 0 0 6px; font-size: 20px; color: #12152e; }
.hb-info-card p { margin: 0 0 12px; color: #4a5170; line-height: 1.55; }
.hb-btn { display: inline-block; padding: 9px 16px; border-radius: 9px; background: linear-gradient(90deg, #7c3aed, #5b21b6); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .3px; text-decoration: none; }
.hb-btn:hover { filter: brightness(1.06); }

/* відгуки (рендеряться тільки з реальними джерелами) */
.hb-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.hb-review { margin: 0; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.hb-review blockquote { margin: 0 0 8px; font-size: 15px; line-height: 1.55; }
.hb-stars { color: #f5b301; letter-spacing: 2px; }
.hb-review figcaption a { color: #c2410c; font-size: 14px; }

/* редакція */
.hb-section--team .author-card { margin-top: 0; }
.hb-section--team .why-trust { margin-top: 18px; }

/* лінія допомоги */
.hb-help {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px;
  padding: 16px 22px; border-radius: 14px; background: var(--bg-dark); color: #d7dbef;
}
.hb-help-l { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.hb-help-num { font-size: 24px; font-weight: 900; letter-spacing: 1px; color: #34d27b; text-decoration: none; }
.hb-help-link { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .hb-features, .hb-tiles, .hb-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-latest, .hb-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .hb-hero { padding: 30px 0 78px; }
  .hb-search { padding-left: 16px; }
  .hb-search input { font-size: 16px; }
  .hb-search button { width: 44px; height: 44px; }
  .hb-features, .hb-latest, .hb-reviews { grid-template-columns: 1fr; }
  .hb-tiles { gap: 10px; }
  .hb-tile img { width: 64px; height: 64px; }
  .hb-tile b { font-size: 12.5px; }
  .hb-games { grid-template-columns: 1fr; }
  .hb-info-card { flex-direction: column; align-items: flex-start; padding: 16px; }
  .hb-info-img { flex-basis: auto; width: 100%; }
}

/* банери ігор: довгі назви (es/lt/lv) не наїжджають на картинку й бейдж */
.hb-game { padding-top: 42px; }
.hb-game-txt { max-width: 64%; }
.hb-game-txt b { font-size: clamp(15px, 1.4vw, 20px); letter-spacing: 0; hyphens: manual; }
.hb-game img { width: 104px; height: 104px; right: -12px; }
@media (max-width: 600px) { .hb-game-txt b { font-size: 21px; } .hb-game-txt { max-width: 62%; } }


/* ---------- діаграма «як працює наш рейтинг» (inc/extras.php) ---------- */

.rating-pie { display: flex; align-items: center; gap: 24px 48px; }
.rating-pie--home { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 34px 38px; }
.rating-pie--page { margin: 8px 0 26px; padding: 22px 24px; background: #f7f8fc; border: 1px solid var(--line); border-radius: 14px; }
.rp-text { flex: 1 1 0; min-width: 0; }
.rp-title { margin: 0 0 10px; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.4px; color: #12152e; }
.rp-intro { margin: 0; font-size: 16px; line-height: 1.6; color: #4a5170; }
.rp-slides { position: relative; margin-top: 26px; }
.rating-pie--page .rp-slides { margin-top: 0; }
.rp-slide { animation: rp-fade .45s ease both; }
.rp-slide h3 { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 21px; color: #12152e; }
.rp-slide h3 i {
  font-style: normal; font-weight: 900; font-size: 24px;
  background: linear-gradient(120deg, #a78bfa 0%, #7c3aed 45%, #4a41c4 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.rp-slide p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #4a5170; }
@keyframes rp-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rp-nav { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.rp-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 0; border-radius: 10px; background: #fff; color: #12152e;
  box-shadow: 0 4px 12px rgba(18,21,46,.12), 0 0 0 1px var(--line);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.rp-arrow:hover { background: #7c3aed; color: #fff; }
.rp-arrow:active { transform: scale(.94); }
.rp-arrow:focus-visible, .rp-piece:focus-visible { outline: 3px solid rgba(124,58,237,.45); outline-offset: 2px; }
.rp-count { min-width: 56px; text-align: center; font-size: 15px; color: #5c6480; }
.rp-count strong { color: #12152e; font-size: 17px; }
.rp-cta { display: inline-block; margin-top: 18px; font-weight: 800; color: #7c3aed; text-decoration: none; }
.rp-cta:hover { text-decoration: underline; }

.rp-chart { flex: 0 0 auto; width: min(360px, 100%); }
.rating-pie--page .rp-chart { width: min(300px, 100%); }
.rp-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.rp-piece { cursor: pointer; transition: transform .32s cubic-bezier(.3,.7,.3,1.2); outline: none; }
.rp-piece.is-open { transform: translate(var(--dx), var(--dy)); }
.rp-piece .rp-top { transition: filter .2s ease; stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-linejoin: round; }
.rp-piece .rp-top.rp-hot { stroke: rgba(255,255,255,.35); }
.rp-piece:hover .rp-top { filter: brightness(1.18); }
/* gradiente "hot" dello spicchio selezionato: definito inline nell'SVG (PHP condiviso
   con l'intera rete di siti), qui sovrascritto da arancione a viola */
#rp1-hot stop:nth-child(1) { stop-color: #c4b5fd !important; }
#rp1-hot stop:nth-child(2) { stop-color: #7c3aed !important; }
#rp1-hot stop:nth-child(3) { stop-color: #4c1d95 !important; }
#rp1-hotside stop:nth-child(1) { stop-color: #5b21b6 !important; }
#rp1-hotside stop:nth-child(2) { stop-color: #3b0f78 !important; }

.rp-wall { fill: #171c33; }
.rp-side { fill: #242b47; }
.rp-hot { opacity: 0; transition: opacity .3s ease; }
.rp-piece.is-open .rp-hot { opacity: 1; }
.rp-label { fill: #fff; font-weight: 800; font-size: 19px; pointer-events: none; font-family: inherit; }
.rp-label.is-small { font-size: 14px; }

@media (max-width: 860px) {
  .rating-pie { flex-direction: column-reverse; align-items: stretch; }
  .rating-pie--home { padding: 24px 18px; }
  .rp-chart, .rating-pie--page .rp-chart { width: min(320px, 100%); margin: 0 auto; }
  .rp-nav { justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-piece, .rp-hot, .rp-slide { transition: none; animation: none; }
}

/* ---------- підписка на розсилку (inc/extras.php) ---------- */

.newsletter { padding: 26px 0 30px; background: var(--page); }
.nl-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 24px;
  padding: 40px 44px; border-radius: 16px; color: #fff;
  background: radial-gradient(60% 120% at 85% 40%, rgba(124,58,237,.28), rgba(124,58,237,0) 60%),
              radial-gradient(50% 90% at 10% 110%, rgba(74,65,196,.45), rgba(74,65,196,0) 70%),
              linear-gradient(135deg, #171b44 0%, #0c1030 100%);
}
.nl-body { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; max-width: 680px; }
.nl-card h2 { margin: 0 0 8px; font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.5px; color: #fff; }
.nl-text { margin: 0 0 20px; font-size: 16.5px; color: #d6daf0; }
.nl-form { display: flex; gap: 12px; }
.nl-form input[type=email] {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 16px; border: 0; border-radius: 10px;
  font: inherit; font-size: 16px; color: #12152e; background: #fff;
}
.nl-form input[type=email]:focus { outline: 3px solid rgba(124,58,237,.55); }
.nl-form button {
  flex: 0 0 auto; height: 48px; padding: 0 28px; border: 0; border-radius: 10px; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; color: #fff;
  background: linear-gradient(90deg, #a78bfa, #7c3aed 55%, #5b21b6);
  box-shadow: 0 8px 20px rgba(124,58,237,.35); transition: filter .15s ease, transform .15s ease;
}
.nl-form button:hover { filter: brightness(1.07); }
.nl-form button:active { transform: translateY(1px); }
.newsletter.is-busy .nl-form button { opacity: .7; cursor: progress; }
.newsletter.is-unsub .nl-form button { background: #3a4466; box-shadow: none; }
.nl-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-msg { margin: 12px 0 0; padding: 9px 14px; border-radius: 9px; font-size: 14.5px; font-weight: 700; }
.nl-msg.is-ok { background: rgba(52,210,123,.16); color: #7ff0ad; }
.nl-msg.is-err { background: rgba(255,106,43,.16); color: #ffb48f; }
.nl-note { margin: 12px 0 0; font-size: 13.5px; color: #aab2cf; }
.nl-toggle { padding: 0; margin-left: 4px; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nl-art { position: relative; z-index: 2; flex: 0 0 auto; width: 210px; height: 210px; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); animation: nl-float 5s ease-in-out infinite; }
.nl-deco { position: absolute; z-index: 1; width: 120px; height: 120px; filter: blur(7px); opacity: .35; pointer-events: none; }
.nl-deco--1 { left: -30px; top: 18px; transform: rotate(-18deg); }
.nl-deco--2 { left: 46%; bottom: -46px; transform: rotate(14deg); }
@keyframes nl-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@media (max-width: 860px) {
  .nl-card { flex-direction: column-reverse; align-items: flex-start; padding: 28px 22px; }
  .nl-art { width: 120px; height: 120px; }
  .nl-form { flex-direction: column; }
  .nl-form button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nl-art { animation: none; } }

.nl-art { margin-left: auto; margin-right: 12px; }
@media (max-width: 860px) { .nl-art { margin: 0; } }

/* картки розділів: іконка не стискається, довгі слова (lv/lt/nl) переносяться всередині тексту */
.hb-feature-top { align-items: center; }
.hb-feature-img { flex: 0 0 68px; width: 68px; height: 68px; display: grid; place-items: center; }
.hb-feature-img img { width: 68px; height: 68px; max-width: none; object-fit: contain; }
.hb-feature-txt { flex: 1 1 auto; min-width: 0; }
.hb-feature-txt b, .hb-feature-txt span { overflow-wrap: break-word; hyphens: auto; }
.home-brand img { object-fit: contain; }
@media (max-width: 1100px) and (min-width: 981px) {
  .hb-feature-img { flex-basis: 56px; width: 56px; height: 56px; }
  .hb-feature-img img { width: 56px; height: 56px; }
  .hb-feature-txt b { font-size: 14px; }
}

/* 981–1180px: іконка над текстом, щоб довгі слова не рвались посередині */
@media (max-width: 1180px) and (min-width: 981px) {
  .hb-feature-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hb-feature-img, .hb-feature-img img { flex-basis: auto; width: 56px; height: 56px; }
  .hb-feature-txt b { font-size: 14.5px; }
}
.hb-feature-txt b { overflow-wrap: normal; word-break: normal; }

/* ---------- логотипи партнерських програм (inc/extras.php) ---------- */

.pl { margin: 26px 0 30px; }
.pl-title { margin: 0 0 16px; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.4px; color: #12152e; }
.pl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.pl-item {
  display: grid; place-items: center; min-height: 118px; padding: 16px; border-radius: 14px;
  background: linear-gradient(160deg, #1b2047 0%, #0f1334 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); text-decoration: none; color: #e8ebf7;
  transition: box-shadow .15s ease, transform .15s ease;
}
a.pl-item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,106,43,.75); }
.pl-item img { max-width: 100%; max-height: 62px; width: auto; height: auto; object-fit: contain; }
.pl-item span { font-weight: 800; letter-spacing: .3px; text-align: center; }
@media (max-width: 980px) { .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-item { min-height: 92px; } }

/* ---------- відгуки партнерських менеджерів (inc/extras.php) ---------- */

.pq-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.pq-head h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -.4px; color: #12152e; }
.pq-arrows { display: flex; gap: 8px; margin-left: auto; }
.pq-arrow {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 0; border-radius: 10px; background: #fff; color: #12152e;
  box-shadow: 0 4px 12px rgba(18,21,46,.12), 0 0 0 1px var(--line);
  transition: background .15s ease, color .15s ease;
}
.pq-arrow:hover { background: #ff6a2b; color: #fff; }
.pq-arrow[disabled] { opacity: .4; cursor: default; background: #fff; color: #12152e; }

.pq-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 4px 14px; scrollbar-width: thin;
}
.pq-card {
  scroll-snap-align: start; flex: 0 0 340px; display: flex; flex-direction: column; align-items: center;
  padding: 26px 22px; text-align: center; border-radius: 16px; color: #e8ebf7;
  background: linear-gradient(160deg, #1b2047 0%, #0f1334 100%);
  box-shadow: 0 10px 26px rgba(12,16,48,.18), inset 0 0 0 1px rgba(255,255,255,.07);
}
.pq-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 18px; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.pq-name { margin: 0 0 4px; font-size: 18px; color: #fff; }
.pq-role { margin: 0; font-size: 14.5px; color: #aab2cf; }
.pq-role a { color: #ffb48f; text-decoration: underline; text-underline-offset: 3px; }
.pq-li {
  display: grid; place-items: center; width: 44px; height: 44px; margin: 18px 0 16px;
  border-radius: 10px; color: #fff; background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .15s ease;
}
.pq-li:hover { background: rgba(255,255,255,.14); }
.pq-quote { font-size: 15px; line-height: 1.6; color: #d7dbef; text-align: left; }
.pq-quote p { margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.pq-card.is-open .pq-quote p { -webkit-line-clamp: unset; display: block; }
.pq-more {
  width: 100%; margin-top: 12px; padding: 7px; cursor: pointer; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: 13.5px; font-weight: 700;
}
.pq-more:hover { background: rgba(255,255,255,.16); }
.pq-note { margin: 10px 0 0; font-size: 12.5px; color: #8f98ba; }

@media (max-width: 600px) {
  .pq-card { flex-basis: 84%; padding: 22px 18px; }
  .pq-head h2 { font-size: 21px; }
}

/* ---------- списки, таблиці, цитати в контенті ---------- */
/* .entry > ..., щоб не чіпати списки всередині .proscons/.faq — там своя стилізація */

/* марковані списки: замість крапки — акцентна риска фіолетового кольору */
.entry > ul { list-style: none; padding-left: 4px; }
.entry > ul > li {
  position: relative;
  padding-left: 22px;
}
.entry > ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 10px; height: 2px;
  border-radius: 1px;
  background: var(--pp-cyan);
}

/* нумеровані списки: круглий бейдж з номером замість крапки */
.entry > ol {
  list-style: none;
  counter-reset: entry-ol;
  padding-left: 4px;
}
.entry > ol > li {
  position: relative;
  padding-left: 34px;
  counter-increment: entry-ol;
}
.entry > ol > li::before {
  content: counter(entry-ol);
  position: absolute;
  left: 0; top: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--pp-cyan);
  color: #fff;
  font-size: 13px; font-weight: 700;
  line-height: 24px; text-align: center;
}

/* таблиці: заокруглені кути замість прямих, акцентна шапка, підсвітка рядка */
.entry table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.entry th, .entry td { border: 1px solid var(--line); border-top: none; border-left: none; }
.entry th:last-child, .entry td:last-child { border-right: none; }
.entry tr:last-child td, .entry tr:last-child th { border-bottom: none; }
.entry th { background: var(--pp-cyan); color: #fff; font-weight: 700; }
.entry tbody tr:hover td { background: #f4f0fe; }

/* цитати з контенту (звичайний <blockquote>, не картка .author-quote —
   та вже має власну ідентичну за духом рамку зліва) */
.entry > blockquote:not(.author-quote) {
  margin: 24px 0;
  padding: 16px 22px;
  border-left: 4px solid var(--accent);
  background: #f7f6fd;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 18px;
  font-style: italic;
  color: #2b3140;
}
.entry > blockquote:not(.author-quote) p:last-child { margin-bottom: 0; }

/* ручний "Autorius: ..." рядок на people-сторінках (там wpgen_author_line()
   вимкнена навмисно — kaip-vertiname і подібні не мають виглядати як тест-звіт) */
.entry > p.page-byline {
  margin: -6px 0 20px;
  font-size: 14px;
  color: var(--muted);
}
.entry > p.page-byline a { color: var(--accent); font-weight: 700; }

/* на kaip-vertiname віддаємо перевагу стовпчиковим інфографікам у контенті замість
   3D-кругової діаграми — саме тут, а не глобально: той самий rp-chart іще знадобиться
   в іншому вигляді на майбутніх сторінках окремих казино */
.rating-pie--page .rp-chart { display: none; }

/* та сама заміна кола на стовпчики — на головній (варіант --home). Тут немає
   свого post_content, куди можна вставити <figure> руками, тому підміняємо
   згенеровану 3D-діаграму статичною картинкою через background-image в тому ж
   слоті (той самий aspect ratio 330:290, що й у вихідного SVG). */
.rating-pie--home .rp-chart svg { display: none; }
.rating-pie--home .rp-chart {
  background-image: url('/wp-content/themes/wpgen/assets/scheme-rating-bars.svg?v=1789747658');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  aspect-ratio: 330 / 290;
}

/* "Kuo grindžiame apžvalgas": 3 інформаційні рівні. Навмисно НЕ <table> — тема сама
   вставляє rating-pie віджет перед першим <table> у контенті (inc/extras.php,
   wpgen_rating_pie_in_content), а той віджет про 4 категорії оцінки, не про ці 3
   рівні джерел. Якби це була таблиця, віджет опинився б перед невідповідним
   розділом; так він природно "спливає" аж до таблиці категорій нижче по тексту. */
.entry > .info-kinds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 22px;
}
.info-kinds .info-kind {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.info-kinds .info-kind h3 { margin: 0 0 10px; font-size: 16px; }
.info-kinds .info-kind p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.info-kinds .info-kind p:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
  .entry > .info-kinds { grid-template-columns: 1fr; }
}

/* hb-feature-txt span має display:block в базовій темі — порожній рядок
   (опис прибрано за проханням) інакше лишає порожній блок з відступом */
.hb-feature-txt span:empty { display: none; }

/* пункт меню з підменю: спільний assets/nav.js навмисно замінює посилання
   кнопкою, і хаб (/kazino/) з шапки ставав недосяжним. Посайтовий mu-plugin
   повертає посилання поруч із кнопкою, тут вони зводяться в один пункт:
   напис веде на сторінку, каретка відкриває підменю */
.main-nav li.menu-item-has-children { display: flex; align-items: center; }
.main-nav a.sub-parent-link { padding-right: 4px; }
.main-nav li.menu-item-has-children > .sub-toggle { padding-left: 4px; padding-right: 14px; }
.main-nav li.menu-item-has-children:hover > a.sub-parent-link { color: #fff; }

@media (max-width: 640px) {
  .main-nav a.sub-parent-link { padding-right: 2px; }
  .main-nav li.menu-item-has-children > .sub-toggle { padding-left: 2px; padding-right: 10px; }
}

/* ---------- оформлення контенту: лід, акценти, нотатки, цифри, скріншоти ---------- */

/* перший абзац читається як лід, а не як звичайний текст */
.entry > p.lede { font-size: 19px; line-height: 1.6; color: #2b3140; }

/* коротка риска над H2: розділи вихоплюються оком при прокручуванні */
.entry > h2 { position: relative; padding-top: 15px; }
.entry > h2::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 44px; height: 3px;
  border-radius: 2px;
  background: var(--pp-cyan);
}

/* нотатка: теза, яку не можна проґавити в суцільному тексті */
.entry > .note {
  margin: 0 0 22px;
  padding: 16px 20px;
  background: #f6f3ff;
  border: 1px solid #e0d7fb;
  border-left: 4px solid var(--pp-cyan);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.entry > .note p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.55; }
.entry > .note p:last-child { margin-bottom: 0; }
.entry > .note b { color: #3b1e8a; }

/* та сама нотатка, але про ризик: закон, гроші, залежність */
.entry > .note--warn { background: #fff6f2; border-color: #f6d9c9; border-left-color: #d9642a; }
.entry > .note--warn b { color: #9c3d0e; }

/* смуга з цифрами: три-чотири факти, які інакше губляться в абзаці */
.entry > ul.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
  padding-left: 0;
  list-style: none;
}
.entry > ul.facts > li {
  margin: 0;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.entry > ul.facts > li::before { content: none; }
.facts b {
  display: block;
  font-size: 26px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.5px;
  color: var(--pp-cyan);
}
.facts span { display: block; margin-top: 6px; font-size: 14px; line-height: 1.4; color: var(--muted); }

/* скріншот кази з підписом: підпис пояснює, що саме на ньому видно */
.entry > figure.shot { margin: 0 0 26px; }
.entry > figure.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 26px rgba(18, 21, 46, .10);
}
.entry > figure.shot figcaption {
  margin-top: 10px;
  font-size: 14px; line-height: 1.5;
  color: var(--muted);
}
.entry > figure.shot figcaption b { color: #2b3140; font-weight: 700; }

/* посилання в тексті: у кольорі бренду, підкреслення не зливається з літерами */
.entry p a, .entry li a, .entry td a {
  color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-color: rgba(74, 65, 196, .35);
}
.entry p a:hover, .entry li a:hover, .entry td a:hover { text-decoration-color: var(--accent); }

@media (max-width: 640px) {
  .entry > p.lede { font-size: 17.5px; }
  .facts b { font-size: 23px; }
}

/* ==========================================================================
   Мокєйімо будай: блоки для сторінок про платіжні методи
   ========================================================================== */

/* коротка відповідь угорі сторінки: читач бачить висновок, не дочитуючи */
.entry > .verdict {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 26px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--pp-cyan);
  border-radius: var(--radius);
}
.entry > .verdict .v-mark {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pp-cyan);
  color: #fff;
  font-size: 15px; font-weight: 800; line-height: 1;
}
.entry > .verdict .v-body { min-width: 0; }
.entry > .verdict p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.entry > .verdict p + p { margin-top: 8px; }
.entry > .verdict b { color: #2b3140; }
/* той самий блок, коли відповідь негативна */
.entry > .verdict--no { border-left-color: #d9642a; }
.entry > .verdict--no .v-mark { background: #d9642a; }

/* картка методу: логотип, назва і два рядки — внесення і виведення */
.entry > ul.pay-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin: 0 0 26px;
  padding-left: 0;
  list-style: none;
}
.entry > ul.pay-methods > li {
  margin: 0;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.entry > ul.pay-methods > li::before { content: none; }
.pay-methods .pm-head {
  display: flex; align-items: center; gap: 10px;
  min-height: 28px;
  margin-bottom: 10px;
}
.pay-methods .pm-head img { display: block; height: 24px; width: auto; }
.pay-methods .pm-head b { font-size: 16px; font-weight: 700; color: #2b3140; }
.pay-methods p { margin: 0 0 5px; font-size: 14.5px; line-height: 1.5; color: #2b3140; }
.pay-methods p:last-child { margin-bottom: 0; }
.pay-methods p > span { display: inline-block; min-width: 74px; color: var(--muted); }

/* логотипи платіжок у рядок: чипи з картинкою або самою назвою */
.entry > p.pay-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.pay-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #2b3140;
  white-space: nowrap;
}
.pay-badge img { display: block; height: 17px; width: auto; }
.pay-badge--img { padding-left: 7px; }

/* пронумеровані кроки каси: більші за звичайний ol, читаються як інструкція */
.entry > ol.steps {
  counter-reset: pay-steps;
  list-style: none;
  margin: 0 0 26px;
  padding-left: 0;
}
.entry > ol.steps > li {
  counter-increment: pay-steps;
  position: relative;
  margin: 0 0 12px;
  padding: 14px 18px 14px 58px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15.5px; line-height: 1.55;
}
.entry > ol.steps > li::before {
  content: counter(pay-steps);
  position: absolute; left: 17px; top: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: var(--pp-cyan);
  border-radius: 50%;
  color: #fff;
  font-size: 14px; font-weight: 800; line-height: 1;
}

@media (max-width: 640px) {
  .entry > ul.pay-methods { grid-template-columns: 1fr; }
  .entry > .verdict { padding: 14px 16px; }
  .entry > ol.steps > li { padding-left: 52px; }
}

/* ==========================================================================
   Головна: "цікавий факт" замість прибраної секції "Kazino žaidimai"
   ========================================================================== */
.hb-highlight {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 32px;
  background: #fff;
  border: 2px solid var(--pp-cyan);
  border-radius: var(--radius);
  box-shadow: 0 16px 38px rgba(124, 58, 237, .14);
}
.hb-highlight-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--pp-cyan);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}
.hb-highlight-body h2 {
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1.3;
  color: #1c2140;
}
.hb-highlight-body p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.6;
  color: #2b3140;
}
.hb-highlight-body p:last-of-type {
  margin-bottom: 16px;
}
.hb-highlight-body b {
  color: var(--pp-cyan);
}
.hb-highlight-cta {
  display: inline-block;
  font-weight: 700;
  color: var(--accent);
  text-underline-offset: 3px;
}
.hb-highlight-cta:hover {
  text-decoration-color: var(--accent);
}

@media (max-width: 640px) {
  .hb-highlight {
    flex-direction: column;
    padding: 22px 20px;
  }
}

/* ==========================================================================
   Головна: блок про тиекейджі (постачальники ігор) з кнопками-іконками
   ========================================================================== */
.hb-providers {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.hbp-head h2 {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.3;
  color: #1c2140;
}
.hbp-head p {
  margin: 0 0 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.hbp-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}
.hbp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px 7px 7px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: #1a1e28;
  font-weight: 700;
  font-size: 14.5px;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.hbp-btn img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}
.hbp-btn:hover {
  border-color: var(--pp-cyan);
  box-shadow: 0 8px 18px rgba(124, 58, 237, .16);
  transform: translateY(-1px);
}
.hbp-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
.hbp-more:hover {
  text-decoration-color: var(--accent);
}

@media (max-width: 640px) {
  .hb-providers { padding: 22px 20px; }
  .hbp-btn { font-size: 14px; padding: 6px 14px 6px 6px; }
  .hbp-btn img { width: 32px; height: 32px; }
}