/* Палітра VipHouse / Parimatch (з шапки viphouse.com.ua): чорний фон, акцент #DCFF16, темний текст на кнопках #2F2F2F, світло-сірий #E7E7E7. Шрифт Inter. */
:root {
  --vh-black: #000000;
  --vh-surface: #111111;
  --vh-surface-2: #1b1b1b;
  --vh-accent: #dcff16;
  --vh-accent-text: #2f2f2f;
  --vh-light: #e7e7e7;
  --html--preset--color--accent-1: #dcff16;
  --html--preset--color--contrast-3: #dcff16;
  --html--preset--color--base-1: #000000;
  --html--preset--color--base-2: #111111;
  --html--preset--color--gradient-shadow-2: #dcff16;
  --html--preset--color--even-stripe: #dcff16;
  --html--preset--color--odd-stripe: #dcff16;
  --html--preset--color--scroll-banner-bg: #000000;
  --html--preset--color--rating-star: #dcff16;
}
body { background-color: var(--vh-black); font-family: Inter, "Segoe UI", Arial, sans-serif; }
a { color: var(--vh-accent); }
.html-block-heading, h1, h2, h3 { font-family: Inter, "Segoe UI", Arial, sans-serif; }
.entry-content table th { background: var(--vh-accent); color: var(--vh-accent-text); }
.entry-content table td { border-color: #2a2a2a; }
.entry-content .table-responsive { overflow-x: auto; margin: 1.25rem 0; }
.entry-content .table-responsive table { width: 100%; border-collapse: collapse; }
.entry-content img { max-width: 100%; height: auto; border-radius: 10px; }
.html-block-details summary { color: var(--vh-light); }

/* Банер VIP: десктоп — vip-banner.webp (1110×308, inline у розмітці), мобільний — vip-banner-mobile.webp (720×480): колонки шаблону стають у стовпчик до 781px */
.vh-vip-banner { background-position: center right; }
@media (max-width: 781px) {
  .vh-vip-banner { background-image: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 85%), url("/assets/image/site/vip-banner-mobile.webp") !important; background-position: center bottom !important; }
}

/* Кнопки з салатовим фоном: темний текст (клас шаблону has-gradient-shadow-1-color ставить білий з !important) */
.html-element-button[style*="background-color:#dcff16"] { color: #0b0b0b !important; }

/* Таблиці тексту: шаблон ставить tbody { min-width: 600px } під широкі таблиці з горизонтальним скролом;
   у наших 2–3 короткі колонки → вміщаємо в ширину екрана */
.entry-content .table-responsive table thead,
.entry-content .table-responsive table tbody { min-width: 0; }
.entry-content .table-responsive table th,
.entry-content .table-responsive table td { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .entry-content .table-responsive table th,
  .entry-content .table-responsive table td { padding: 10px 8px; font-size: 14px; }
  /* довгий H1 з ТЗ у шрифті шаблону (60px) займав 5 рядків */
  .entry-content h1 { font-size: 36px; line-height: 1.15; }
}

/* Футер на мобільному: меню юридичних сторінок шаблон ховає в модалку, а кнопка відкриття випадає за межі сторінки →
   показуємо список посилань відкритим, у кілька рядків по центру (стосується лише .m-footer-8, гамбургер шапки не чіпаємо) */
@media (max-width: 781px) {
  .m-footer-8 .html-block-navigation__responsive-container { display: block !important; position: static !important; background: none !important; padding: 0 !important; inset: auto !important; width: auto !important; height: auto !important; }
  .m-footer-8 .html-block-navigation__responsive-close,
  .m-footer-8 .html-block-navigation__responsive-dialog,
  .m-footer-8 .html-block-navigation__responsive-container-content { display: block !important; position: static !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .m-footer-8 .html-block-navigation__responsive-container-open,
  .m-footer-8 .html-block-navigation__responsive-container-close { display: none !important; }
  .m-footer-8 .html-block-navigation__container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 8px 18px !important; }
}

/* Мобільне меню шапки: шаблон відкриває білу модалку з чорним текстом → темна під бренд */
header .html-block-navigation__responsive-container.is-menu-open { background-color: #000 !important; color: #fff !important; }
header .html-block-navigation__responsive-container.is-menu-open a,
header .html-block-navigation__responsive-container.is-menu-open .html-block-navigation__responsive-container-close { color: #fff !important; }

/* Футер, перший ряд: як у донора — група на всю ширину контейнера (у донора її розтягувала стрічка з 9 платіжок;
   у нас 5: Visa, Mastercard, monobank, Binance Pay, Tether) */
.m-footer-8 .html-container-core-group-is-layout-9366075c > .html-block-group { flex: 1 1 100%; }
/* на телефоні 5 платіжок у один рядок стискались до нечитабельних → перенос у 2 рядки по центру */
@media (max-width: 781px) {
  .m-footer-8 .html-container-core-group-is-layout-81711ad7 { flex-wrap: wrap !important; justify-content: center; align-items: center; gap: 16px 28px; }
  .m-footer-8 .html-container-core-group-is-layout-81711ad7 > figure { margin-left: 0 !important; flex: 0 0 auto; }
}