/* BetPro — Override/theme layer (split from 04-sections.css; loads last) */

.section,
.footer {
  background: transparent;
}

.dealer-card .glow,
.dstat .glow,
.trust-cell .glow,
.warn-col .glow,
.odds .glow,
.how-card .glow,
.pay-card .glow,
.nu-card .glow,
.testi-card .glow,
.support-card .glow,
.support-card .shimmer,
.blog-card .shimmer,
.blog-card .iglow,
.how-card .arrow,
.warn-col .bar,
.s-warning .l-divider,
.faq-item .dot,
.trust-cell .ord,
.s-dealer .l-watermark {
  display: none !important;
}

.dealer-grid,
.why-grid,
.nu-grid {
  gap: 2.5rem;
}

.center-head,
.testi-head,
.blog-head,
.faq-head {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

/* Left-aligned headers anchor to the container edge so they line up with the
   full-width content grid beneath them (instead of floating in a centered
   760px column). */
.trust-head,
.why-head,
.warn-head {
  max-width: 760px;
  margin-inline: 0;
  margin-bottom: 2.5rem;
}

/* The "View all" variant spans the full container width so the link sits at
   the far right edge. */
.blog-head.has-viewall {
  max-width: none;
  margin-inline: 0;
}

.warn-head {
  text-align: left;
  align-items: flex-start;
}

.center-head {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.center-head .sec-title,
.center-head p {
  margin-inline: auto;
}

.faq-head,
.testi-head {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}

.faq-head h2,
.faq-head p,
.testi-head h2,
.testi-head p {
  margin-inline: auto;
}

.testi-head .rating {
  justify-content: center;
}

.center-head p,
.trust-head p,
.why-head p,
.warn-head p,
.faq-head p,
.testi-head p,
.blog-head p,
.dealer-desc,
.trust-cell p,
.why-item p,
.warn-col li span,
.pay-guarantee p,
.support-card .desc,
.testi-card .text,
.footer-brand .about {
  max-width: 62ch;
  color: hsl(var(--muted-foreground));
  font-size: 1.08rem;
  line-height: 1.85;
}

.dealer-info h2,
.trust-cell h3,
.warn-col .ctitle h3,
.why-item h4,
.pay-card h3,
.how-card h3,
.support-card h3,
.testi-card .name,
.footer-col h4,
.dealer-cta .t1 {
  font-family: var(--font-sans);
  line-height: 1.28;
  letter-spacing: -0.02em;
}

.dealer-info h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.9rem);
}

.trust-cell h3,
.warn-col .ctitle h3,
.why-item h4,
.pay-card h3,
.how-card h3,
.support-card h3 {
  font-size: 1.22rem;
}

.faq-item .q {
  font-size: 1.12rem;
  line-height: 1.5;
}

.blog-card h3 {
  font-size: 1.28rem;
  line-height: 1.35;
}

.blog-card .excerpt,
.faq-answer p,
.testi-card .text,
.support-card .desc {
  font-size: 1.08rem;
}

.dealer-head,
.why-item,
.warn-col li {
  align-items: flex-start;
}

.dealer-avatar .ring,
.dealer-avatar .check,
.trust-cell .ic,
.warn-col .ctitle .box,
.why-item .ic,
.support-card .ic {
  background: hsl(var(--muted));
  border-color: hsl(var(--border));
  box-shadow: none;
}

.dealer-rank,
.dealer-badges .chip,
.pay-card .row,
.support-card .handle,
.faq-item .q,
.faq-answer p,
.testi-card .tag,
.blog-card .metainfo,
.blog-card .excerpt,
.footer-brand .legal,
.footer-bottom {
  color: hsl(var(--muted-foreground));
}

.trust-grid,
.faq-cols {
  gap: 1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.trust-cell,
.faq-item,
.odds-row,
.pay-card .body,
.support-card .body,
.testi-card .body,
.blog-card .body {
  border-radius: var(--radius-xl);
}

.odds-row,
.pay-card,
.support-card,
.blog-card,
.faq-item {
  background: hsl(220 15% 14%);
  border-color: hsl(var(--border));
}

.odds-row:hover,
.trust-cell:hover,
.dstat:hover,
.pay-card:hover,
.support-card:hover,
.blog-card:hover {
  background: hsl(220 15% 14%);
}

.warn-head h2 .red {
  text-shadow: none;
}

.blog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.blog-viewall,
.blog-card .read,
.footer-bottom .links a:hover {
  color: hsl(var(--foreground));
}

.support-card .pin,
.faq-cta a,
.footer-social a,
.blog-viewall {
  border-radius: 999px;
}

.faq-item,
.odds-row,
.how-card,
.testi-card,
.blog-card,
.support-card,
.dealer-cta,
.footer-social a,
.footer-col a {
  transition: none;
}

.faq-item.open {
  box-shadow: none;
}

.faq-item .toggle {
  transition: none;
}

.faq-answer {
  transition: none;
}

.footer,
.footer-bottom {
  background: transparent;
}

.footer-main,
.footer-bottom {
  border-top-color: hsl(var(--border));
}

@media (max-width: 1023px) {
  .warn-head,
  .blog-head {
    align-items: flex-start;
    text-align: left;
  }

  .blog-head:not(.has-viewall) {
    align-items: center;
    text-align: center;
  }

  .center-head {
    align-items: center;
    text-align: center;
  }

  .faq-head,
  .testi-head {
    align-items: center;
    text-align: center;
  }
}

@media (max-width: 767px) {
  .blog-head {
    align-items: flex-start;
  }
}

/* ==========================================================================
   Alternating section backgrounds
   The whole page previously shared one flat colour (all the per-section
   decorative layers are disabled above). This restores visual rhythm by
   alternating a soft primary-tinted gradient with a deeper flat tone,
   section after section down the page.
   ========================================================================== */

/* Gradient / glow sections */
.s-dealer,
.s-warning,
.s-compare,
.s-payment,
.s-faq,
.s-blog,
.s-precta {
  background:
    radial-gradient(115% 85% at 50% 0%, hsl(var(--primary) / 0.07), transparent 55%),
    linear-gradient(180deg, hsl(222 27% 8%), hsl(222 24% 5%) 72%);
}

/* Deep flat sections */
.s-trust,
.s-why,
.s-how,
.s-newuser,
.s-testi,
.s-seo {
  background: hsl(223 28% 4%);
}

/* Hairline seam so the join between two sections always reads */
.site > .section + .section {
  border-top: 1px solid rgba(255, 255, 255, 0.045);
}

/* ==========================================================================
   SEO content section (#about-betpro)
   ========================================================================== */
.s-seo .seo-prose {
  max-width: 62ch;
  margin: 2.5rem auto 0;
}

.s-seo .seo-prose h3 {
  font-family: var(--font-display, var(--font-sans));
  font-size: 1.15rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin: 1.75rem 0 0.5rem;
}

.s-seo .seo-prose p {
  color: hsl(var(--muted-foreground));
  line-height: 1.85;
  margin-bottom: 0.5rem;
}

.s-seo .seo-searches-label {
  margin-top: 2rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.s-seo .seo-searches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0;
}

.s-seo .seo-searches li {
  font-size: 0.8rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
}