:root {
  --zoccer-bg: #10263b;
  --zoccer-surface: #0b192a;
  --zoccer-surface-soft: #14263f;
  --zoccer-accent: #a8ff3e;
  --zoccer-accent-hover: #baff64;
  --zoccer-violet: #2b213c;
  --zoccer-text: #f7fbff;
  --zoccer-muted: #9bb7d8;
  --zoccer-border: #263a54;
}

body,
.page,
.page__content,
.page__footer {
  background-color: var(--zoccer-bg) !important;
}

.header,
.homeCasino,
.homePoker,
.home__container_wrap {
  background-color: var(--zoccer-bg) !important;
}

.footer,
.sidebar,
.footer__content {
  background-color: var(--zoccer-surface) !important;
}

.button_theme_primary,
.promoCard__button,
.userinfo__registration {
  background: var(--zoccer-accent) !important;
  border-color: var(--zoccer-accent) !important;
  color: #08121f !important;
}

.button_theme_primary:hover,
.promoCard__button:hover,
.userinfo__registration:hover {
  background: var(--zoccer-accent-hover) !important;
  border-color: var(--zoccer-accent-hover) !important;
}

.button_theme_secondary,
.userinfo__signIn {
  background: var(--zoccer-violet) !important;
  border-color: var(--zoccer-violet) !important;
  color: #fff !important;
}

.header__logo .logo__desktopIcon {
  height: auto !important;
  max-height: 58px !important;
  width: 160px !important;
}

.header__logo .logo__mobileIcon {
  height: auto !important;
  max-height: 42px !important;
  width: 116px !important;
}

.categoriesBlock__item,
.homeBlock__viewAllCard,
.homeCasino__providers .providers__block,
.bonusCard,
.promoCard {
  background-color: var(--zoccer-surface) !important;
  border-color: var(--zoccer-border) !important;
}

.categoriesBlock__item:hover,
.homeCasino__providers .providers__block:hover {
  border-color: var(--zoccer-accent) !important;
}

.promoBlock .scrollSLider__list {
  align-items: stretch;
}

.promoBlock .scrollSLider__slide {
  display: flex;
}

.promoBlock .promoCard {
  align-self: stretch;
}

.promoCard__imageWrapper {
  flex: 0 0 auto;
  overflow: hidden;
}

.promoCard__image {
  height: 100%;
  object-fit: cover;
}

.footer__content {
  color: var(--zoccer-muted) !important;
  border-radius: 18px;
  margin: 28px auto;
  max-width: 1220px;
  padding: 34px !important;
}

.footer__content h1,
.footer__content h2,
.footer__content h3 {
  color: var(--zoccer-text) !important;
  scroll-margin-top: 92px;
}

.footer__content h1 {
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.15;
}

.footer__content h2 {
  margin-top: 36px;
}

.footer__content a {
  color: var(--zoccer-accent) !important;
}

.footer__content table {
  border-collapse: collapse;
  display: block;
  margin: 22px 0;
  max-width: 100%;
  overflow-x: auto;
  width: 100%;
}

.footer__content th,
.footer__content td {
  border: 1px solid var(--zoccer-border) !important;
  min-width: 145px;
  padding: 12px 14px !important;
  text-align: left;
}

.footer__content th {
  background: var(--zoccer-violet) !important;
  color: #fff !important;
}

.footer__content tr:nth-child(even) td {
  background: var(--zoccer-surface-soft) !important;
}

.footer__content blockquote {
  background: var(--zoccer-surface-soft);
  border-left: 4px solid var(--zoccer-accent);
  border-radius: 0 10px 10px 0;
  margin: 24px 0;
  padding: 18px 22px;
}

.zoccer-toc {
  background: var(--zoccer-surface-soft);
  border: 1px solid var(--zoccer-border);
  border-radius: 14px;
  margin: 26px 0;
  padding: 20px 24px;
}

.zoccer-page-hero {
  margin: 24px 0 28px;
}

.zoccer-page-hero img {
  border: 1px solid var(--zoccer-border);
  border-radius: 16px;
  display: block;
  height: auto;
  max-width: 100%;
  width: 100%;
}

.zoccer-toc h2 {
  margin-top: 0;
}

.zoccer-toc ul {
  columns: 2;
  margin-bottom: 0;
}

/* Preserve the homepage hero artwork's native proportions. */
.carousel_mainPromo .carousel__slideImageContainer {
  overflow: hidden;
}

.carousel_mainPromo .carousel__slideImageContainer img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  width: 100% !important;
}

@media (max-width: 700px) {
  .footer__content {
    border-radius: 0;
    margin: 14px 0;
    padding: 22px 16px !important;
  }

  .zoccer-toc ul {
    columns: 1;
  }

  .zoccer-page-hero {
    margin: 18px 0 22px;
  }

  .zoccer-page-hero img {
    border-radius: 10px;
  }
}


/* Zoccer page content, aligned with the supplied navy/lime/orange reference. */
.footer__content .hero {
  background: linear-gradient(135deg, #102d47 0%, #112239 100%);
  border: 1px solid #263a54;
  border-radius: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-bottom: 28px;
  padding: 30px;
}
.footer__content .hero-text { flex: 1 1 420px; }
.footer__content .hero-table { flex: 1 1 340px; min-width: 0; }
.footer__content .hero h1 .accent,
.footer__content h3 { color: #ffbd3f !important; }
.footer__content .badge {
  background: rgba(168,255,62,.1);
  border: 1px solid rgba(168,255,62,.38);
  border-radius: 999px;
  color: #a8ff3e;
  display: inline-block;
  font-weight: 700;
  margin-bottom: 12px;
  padding: 5px 12px;
}
.zoccer-toc,
.footer__content .toc {
  background: #14263f;
  border: 1px solid #263a54;
  border-left: 4px solid #a8ff3e;
  border-radius: 14px;
  margin: 26px 0 34px;
  padding: 20px 24px;
}
.footer__content .toc h2 { margin-top: 0; }
.footer__content .pros-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
  margin: 20px 0;
}
.footer__content .pro-card,
.footer__content .info-box,
.footer__content .step,
.footer__content details {
  background: #14263f;
  border: 1px solid #263a54;
  border-radius: 12px;
  padding: 16px 18px;
}
.footer__content .pro-card p { margin-bottom: 0; }
.footer__content .steps,
.footer__content .faq { display: grid; gap: 12px; margin: 18px 0; }
.footer__content summary { color: #f7fbff; cursor: pointer; font-weight: 700; }
.footer__content .faq-body { padding-top: 10px; }
.footer__content th { background: #1d3655 !important; color: #a8ff3e !important; }
.footer__content .tag { color: #a8ff3e; }
.footer__content section { scroll-margin-top: 92px; }
.footer__content a.button,
.footer__content .btn-cta { background: #a8ff3e !important; color: #08121f !important; }
@media (max-width:700px) {
  .footer__content .hero { padding: 20px 16px; }
}