/*
Theme Name:        SunpelBets
Theme URI:         https://sunpel.com
Author:            SunpelBets
Author URI:        https://sunpel.com
Description:       Lightweight, SEO-optimized, mobile-responsive theme built for the SunpelBets Predictions plugin. Matches the SunpelBets brand — dark green navbar, green accents, and clean card layouts for football tips and jackpots.
Version:           1.0.0
Requires at least: 5.8
Tested up to:      6.4
Requires PHP:      7.4
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       sunpelbets
Tags:              blog, one-column, custom-menu, custom-logo, featured-images, translation-ready, full-width-template, right-sidebar
*/

/* ============================================================
   ROOT VARIABLES
   ============================================================ */
:root{
  --sp-dark:#0b3b2e;
  --sp-dark-2:#07271e;
  --sp-green:#22c55e;
  --sp-green-dark:#16a34a;
  --sp-green-deep:#15803d;
  --sp-ink:#1f2937;
  --sp-muted:#64748b;
  --sp-line:#e8eef3;
  --sp-bg:#f7f9fb;
  --sp-white:#ffffff;
  --sp-radius:.9rem;
  --sp-radius-sm:.6rem;
  --sp-shadow-sm:0 1px 3px rgba(16,24,40,.04), 0 10px 26px -16px rgba(16,24,40,.18);
  --sp-container:1200px;
  --sp-transition:.18s ease;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--sp-ink);
  background:var(--sp-bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:var(--sp-green-deep);text-decoration:none;transition:color var(--sp-transition);}
a:hover,a:focus{color:#166534;}
button,input,select,textarea{font:inherit;color:inherit;}
button{cursor:pointer;}

h1,h2,h3,h4,h5,h6{
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  color:#0f172a;
  margin:0 0 .6em;
}
h1{font-size:clamp(1.85rem,4vw,2.95rem);font-weight:800;}
h2{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;}
h3{font-size:1.25rem;}
h4{font-size:1.1rem;}
p{margin:0 0 1em;}

/* Accessibility */
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);
  height:1px;margin:-1px;overflow:hidden;padding:0;
  position:absolute !important;width:1px;word-wrap:normal !important;
}
.skip-link{
  position:absolute;top:-60px;left:16px;z-index:9999;
  background:var(--sp-green);color:#fff;padding:10px 16px;
  border-radius:var(--sp-radius-sm);font-weight:600;
  transition:top var(--sp-transition);
}
.skip-link:focus{top:12px;color:#fff;}
:focus-visible{outline:2px solid var(--sp-green);outline-offset:2px;}

/* ============================================================
   LAYOUT
   ============================================================ */
.sp-container,
.container{
  width:100%;
  max-width:var(--sp-container);
  margin:0 auto;
  padding:0 20px;
}
.sp-main{min-height:60vh;}
.sp-section{padding:56px 0;}
.sp-section-sm{padding:36px 0;}
.sp-section-alt{background:var(--sp-white);border-top:1px solid var(--sp-line);border-bottom:1px solid var(--sp-line);}

/* Eyebrow */
.sp-eyebrow{
  color:var(--sp-green-deep);
  text-transform:uppercase;
  letter-spacing:.15em;
  font-weight:700;
  font-size:.72rem;
  margin:0 0 6px;
}
.sp-section-title{font-family:"Poppins",sans-serif;font-weight:800;font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.015em;color:#0f172a;margin:0 0 16px;}
.sp-section-sub{color:var(--sp-muted);font-size:1rem;margin:0 0 24px;}
.sp-flex-between{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:24px;}

/* Links */
.sp-link{color:var(--sp-green-deep);font-weight:600;font-size:.85rem;}
.sp-link:hover{color:#166534;text-decoration:underline;}

/* ============================================================
   BUTTONS
   ============================================================ */
.sp-btn,
.sp-button,
button.sp-btn,
input[type="submit"].sp-btn,
.wp-block-button__link{
  display:inline-block;
  background:var(--sp-green);
  border:1px solid var(--sp-green);
  color:#fff;
  font-family:"Inter",sans-serif;
  font-weight:600;
  font-size:.875rem;
  line-height:1.2;
  border-radius:var(--sp-radius-sm);
  padding:.6rem 1.25rem;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--sp-transition), border-color var(--sp-transition), transform var(--sp-transition);
}
.sp-btn:hover,.sp-btn:focus,
button.sp-btn:hover,
input[type="submit"].sp-btn:hover{
  background:var(--sp-green-dark);
  border-color:var(--sp-green-dark);
  color:#fff;
  text-decoration:none;
}
.sp-btn:active{transform:translateY(1px);}
.sp-btn-sm{padding:.4rem .9rem;font-size:.8rem;border-radius:.55rem;}

.sp-btn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  padding:.5rem 1rem;
  border-radius:var(--sp-radius-sm);
  font-weight:600;
  display:inline-block;
  transition:background var(--sp-transition);
}
.sp-btn-outline:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.55);}

/* ============================================================
   NAVBAR
   ============================================================ */
.sp-navbar{
  background:var(--sp-dark);
  padding:.65rem 0;
  box-shadow:0 2px 14px rgba(0,0,0,.22);
  position:sticky;
  top:0;
  z-index:1030;
}
.sp-navbar-row{display:flex;align-items:center;flex-wrap:nowrap;width:100%;}
.sp-navbar .navbar-brand,
.sp-navbar .sp-brand{
  font-family:"Poppins",sans-serif;
  font-size:1.3rem;
  font-weight:700;
  letter-spacing:-.02em;
  line-height:1;
  margin-right:.75rem;
  flex-shrink:0;
  text-decoration:none;
}
.sp-brand-mark{color:#fff;}
.sp-brand-accent{color:var(--sp-green);}

.sp-nav-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:.35rem;
  min-width:0;
  flex:1 1 auto;
  margin-left:auto;
}
.sp-nav-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  min-width:0;
  flex:1 1 auto;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.sp-nav-scroll::-webkit-scrollbar{display:none;}

.sp-nav-menu{
  list-style:none;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:.15rem;
  margin:0;
  padding:0;
}
.sp-nav-menu li{margin:0;}
.sp-nav-menu a{
  display:inline-block;
  color:rgba(255,255,255,.78);
  font-size:.875rem;
  font-weight:500;
  padding:.45rem .75rem;
  border-radius:.5rem;
  white-space:nowrap;
  transition:color var(--sp-transition),background var(--sp-transition);
}
.sp-nav-menu a:hover,
.sp-nav-menu a:focus{
  color:#fff;
  background:rgba(255,255,255,.07);
}
.sp-nav-menu .current-menu-item > a,
.sp-nav-menu .current_page_item > a,
.sp-nav-menu .active > a{
  color:#fff;
  background:rgba(255,255,255,.11);
}

.sp-nav-menu .menu-item-has-children{position:relative;}
.sp-nav-menu .sub-menu{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  min-width:200px;
  background:#fff;
  border-radius:var(--sp-radius-sm);
  box-shadow:0 12px 30px rgba(0,0,0,.15);
  padding:8px;
  margin-top:6px;
  z-index:100;
  list-style:none;
}
.sp-nav-menu .sub-menu a{
  color:var(--sp-ink);
  display:block;
  padding:.5rem .75rem;
}
.sp-nav-menu .sub-menu a:hover{background:#f1f5f9;color:var(--sp-green-deep);}
@media (min-width:992px){
  .sp-nav-menu .menu-item-has-children:hover > .sub-menu{display:block;}
}

/* Live dot */
.sp-live-dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:#ef4444;
  margin-left:.35rem;
  vertical-align:middle;
  animation:spPulse 1.5s ease-in-out infinite;
}
@keyframes spPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.35;transform:scale(.75);}
}

/* Nav arrows */
.sp-nav-arrow{
  display:none;
  flex:0 0 auto;
  border:0;
  background:rgba(255,255,255,.13);
  color:#fff;
  width:28px;height:28px;
  border-radius:50%;
  font-size:1.15rem;
  line-height:1;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background var(--sp-transition);
}
.sp-nav-arrow:hover{background:rgba(255,255,255,.25);}
.sp-nav-wrap.has-scroll-left .sp-nav-arrow-left,
.sp-nav-wrap.has-scroll-right .sp-nav-arrow-right{display:inline-flex;}

/* Subscribe button in navbar */
.sp-nav-menu .sp-nav-cta{
  background:var(--sp-green);
  color:#fff !important;
  padding:.45rem 1rem;
  border-radius:.55rem;
  font-weight:600;
  margin-left:.4rem;
}
.sp-nav-menu .sp-nav-cta:hover{background:var(--sp-green-dark);}

/* Mobile toggle */
.sp-nav-toggle{
  display:none;
  background:transparent;
  border:0;
  color:#fff;
  padding:6px;
  margin-left:auto;
}
.sp-nav-toggle svg{display:block;width:24px;height:24px;}

/* ============================================================
   HERO
   ============================================================ */
.sp-hero{
  position:relative;
  padding:4.75rem 0 4.25rem;
  color:#fff;
  background:
    radial-gradient(circle at 12% 18%, rgba(34,197,94,.20), transparent 46%),
    radial-gradient(circle at 88% -10%, rgba(34,197,94,.13), transparent 42%),
    linear-gradient(135deg, var(--sp-dark) 0%, var(--sp-dark-2) 100%);
  overflow:hidden;
}
.sp-hero.has-bg{
  background-size:cover;
  background-position:center;
  background-blend-mode:overlay;
}
.sp-hero::after{
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:22px 22px;
  pointer-events:none;
}
.sp-hero > .container{position:relative;z-index:1;}
.sp-hero .sp-eyebrow{color:#4ade80;}
.sp-hero h1{
  font-size:clamp(1.85rem,4.2vw,3rem);
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
  color:#fff;
  margin:0 0 .75rem;
  max-width:44rem;
}
.sp-hero p{
  color:rgba(255,255,255,.78);
  font-size:1.05rem;
  max-width:38rem;
  margin:0 0 1.5rem;
}
.sp-hero .sp-btn{margin-top:.25rem;}

/* ============================================================
   CARDS
   ============================================================ */
.sp-card{
  background:#fff;
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius);
  box-shadow:var(--sp-shadow-sm);
  overflow:hidden;
  margin-bottom:24px;
}
.sp-card-pad{padding:24px;}
.sp-card table{width:100%;border-collapse:collapse;margin:0;}

/* ============================================================
   FOOTER
   ============================================================ */
.sp-footer{
  background:var(--sp-dark);
  color:#fff;
  margin-top:48px;
}
.sp-footer .container{padding:48px 20px 24px;}
.sp-footer .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;}
.sp-footer h5,.sp-footer h6{
  font-family:"Poppins",sans-serif;
  font-weight:700;
  color:#fff;
  margin-bottom:.85rem;
}
.sp-footer h5{font-size:1.25rem;}
.sp-footer h6{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.6);}
.sp-footer p{color:rgba(255,255,255,.62);font-size:.875rem;line-height:1.7;margin:0 0 .8rem;}
.sp-footer-links{list-style:none;padding:0;margin:0;}
.sp-footer-links li{margin-bottom:.5rem;}
.sp-footer-links a{
  color:rgba(255,255,255,.72);
  font-size:.875rem;
  transition:color var(--sp-transition);
}
.sp-footer-links a:hover{color:#4ade80;}
.sp-footer hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:28px 0 20px;}
.sp-footer .sp-copyright{text-align:center;font-size:.8rem;color:rgba(255,255,255,.55);margin:0;}

/* ============================================================
   WORDPRESS CORE CLASSES
   ============================================================ */
.alignleft{float:left;margin:0 1.5em 1em 0;}
.alignright{float:right;margin:0 0 1em 1.5em;}
.aligncenter{margin:0 auto 1em;display:block;}
.alignwide{margin-left:-60px;margin-right:-60px;max-width:calc(100% + 120px);}
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:100vw;width:100vw;}

.wp-caption{max-width:100%;margin-bottom:1.2em;}
.wp-caption-text{font-size:.8rem;color:var(--sp-muted);text-align:center;margin-top:.4em;font-style:italic;}

.wp-block-image img{border-radius:var(--sp-radius);}
.wp-block-quote{
  border-left:4px solid var(--sp-green);
  padding:.5em 1.2em;
  margin:1.5em 0;
  background:#f8fafc;
  border-radius:0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
  font-style:italic;
  color:#334155;
}
.wp-block-quote cite{display:block;margin-top:.5em;font-size:.85rem;color:var(--sp-muted);font-style:normal;}

.sticky .sp-card::before{
  content:"★ Featured";
  display:block;
  background:var(--sp-green);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:4px 12px;
}

/* Forms */
input[type="text"],input[type="email"],input[type="url"],input[type="password"],
input[type="search"],input[type="number"],input[type="tel"],input[type="date"],textarea,select{
  width:100%;
  padding:.6rem .85rem;
  border:1px solid #dbe3ec;
  border-radius:var(--sp-radius-sm);
  background:#fff;
  font-size:.9rem;
  color:var(--sp-ink);
  transition:border-color var(--sp-transition), box-shadow var(--sp-transition);
}
input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:var(--sp-green);
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}
button,input[type="submit"]{
  background:var(--sp-green);
  color:#fff;
  border:0;
  padding:.6rem 1.25rem;
  border-radius:var(--sp-radius-sm);
  font-weight:600;
  cursor:pointer;
  transition:background var(--sp-transition);
}
button:hover,input[type="submit"]:hover{background:var(--sp-green-dark);}

/* ============================================================
   BLOG LISTING
   ============================================================ */
.sp-posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:26px;}
.sp-post-card{
  background:#fff;
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius);
  overflow:hidden;
  box-shadow:var(--sp-shadow-sm);
  display:flex;
  flex-direction:column;
  transition:transform var(--sp-transition), box-shadow var(--sp-transition);
}
.sp-post-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(16,24,40,.25);}
.sp-post-card .sp-post-thumb{aspect-ratio:16/9;background:#e2e8f0;overflow:hidden;}
.sp-post-card .sp-post-thumb img{width:100%;height:100%;object-fit:cover;}
.sp-post-card .sp-post-body{padding:20px;flex:1;display:flex;flex-direction:column;}
.sp-post-card .sp-post-meta{font-size:.75rem;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:8px;}
.sp-post-card h2{font-size:1.15rem;margin:0 0 10px;line-height:1.3;}
.sp-post-card h2 a{color:#0f172a;text-decoration:none;}
.sp-post-card h2 a:hover{color:var(--sp-green-deep);}
.sp-post-card .sp-post-excerpt{font-size:.875rem;color:#475569;margin:0 0 14px;flex:1;}
.sp-post-card .sp-readmore{font-size:.8rem;font-weight:600;color:var(--sp-green-deep);text-transform:uppercase;letter-spacing:.05em;}

/* Pagination */
.sp-pagination{
  display:flex;
  justify-content:center;
  gap:8px;
  margin:40px 0 20px;
  flex-wrap:wrap;
}
.sp-pagination .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:38px;
  padding:0 12px;
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius-sm);
  background:#fff;
  color:var(--sp-ink);
  font-size:.875rem;
  font-weight:600;
  transition:background var(--sp-transition), color var(--sp-transition);
}
.sp-pagination .page-numbers:hover{background:#f1f5f9;}
.sp-pagination .page-numbers.current{background:var(--sp-green);border-color:var(--sp-green);color:#fff;}

/* ============================================================
   SINGLE POST / PAGE
   ============================================================ */
.sp-single-header{
  background:#fff;
  border-bottom:1px solid var(--sp-line);
  padding:56px 0 40px;
}
.sp-single-header .sp-post-meta{font-size:.8rem;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:12px;}
.sp-single-header h1{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:0 0 12px;}
.sp-single-content{background:#fff;padding:48px 0;}
.sp-single-content .sp-article{
  max-width:760px;
  margin:0 auto;
  font-size:1.02rem;
  line-height:1.75;
  color:#334155;
}
.sp-single-content .sp-article h2{font-size:1.6rem;margin-top:1.6em;}
.sp-single-content .sp-article h3{font-size:1.3rem;margin-top:1.4em;}
.sp-single-content .sp-article ul,.sp-single-content .sp-article ol{padding-left:1.3em;}
.sp-single-content .sp-article li{margin-bottom:.4em;}
.sp-single-content .sp-article img{border-radius:var(--sp-radius);margin:1em 0;}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sp-sidebar{position:sticky;top:80px;align-self:start;}
.sp-widget{
  background:#fff;
  border:1px solid var(--sp-line);
  border-radius:var(--sp-radius);
  padding:20px;
  margin-bottom:20px;
  box-shadow:var(--sp-shadow-sm);
}
.sp-widget h3,.sp-widget h2{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--sp-muted);
  font-weight:700;
  margin:0 0 14px;
}
.sp-widget ul{list-style:none;padding:0;margin:0;}
.sp-widget ul li{margin-bottom:.6rem;padding-bottom:.6rem;border-bottom:1px solid #f1f5f9;font-size:.9rem;}
.sp-widget ul li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991.98px){
  .sp-container,.container{padding:0 16px;}
  .sp-hero{padding:3.5rem 0 3rem;}
  .sp-section{padding:44px 0;}
}
@media (max-width:767.98px){
  body{font-size:15px;}
  h1{font-size:1.75rem;}
  h2{font-size:1.4rem;}
  .sp-hero{padding:3rem 0 2.5rem;}
  .sp-hero h1{font-size:1.75rem;}
  .sp-hero p{font-size:.95rem;}
  .sp-section{padding:36px 0;}
  .sp-card-pad{padding:18px;}
  .sp-footer .container{padding:32px 16px 20px;}
  .sp-footer .row{gap:24px;}
  .alignleft,.alignright{float:none;margin:1em 0;display:block;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* Print */
@media print{
  .sp-navbar,.sp-footer,.sp-nav-toggle{display:none !important;}
  body{background:#fff;color:#000;}
  a{color:#000;text-decoration:underline;}
}
/* ============================================================
   MOBILE MENU
   ============================================================ */
@media (max-width:991.98px){
  .sp-nav-toggle{display:inline-flex;}

  .sp-nav-wrap{
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--sp-dark);
    padding:14px 16px;
    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.25);
    display:none;
  }
  .sp-nav-wrap.sp-nav-open{display:block;}
  .sp-nav-arrow{display:none !important;}

  .sp-nav-scroll{overflow:visible !important;flex-wrap:wrap !important;}

  .sp-nav-menu{
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .sp-nav-menu a{
    display:block;
    padding:.75rem .5rem;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .sp-nav-menu li:last-child a{border-bottom:0;}
  .sp-nav-menu .sub-menu{
    position:static;
    display:block !important;
    background:transparent;
    box-shadow:none;
    padding:0 0 0 16px;
    margin:0;
  }
  .sp-nav-menu .sub-menu a{
    color:rgba(255,255,255,.7);
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .sp-nav-menu .sub-menu a:hover{background:rgba(255,255,255,.06);color:#fff;}
  .sp-nav-menu .sp-nav-cta{margin:12px 0 0;text-align:center;}
}
/* ============================================================
   SECTION HEADERS (Big Wins / Free Preview blocks)
   ============================================================ */

/* Wrapper around each heading pair */
.spb-section {
    padding: 48px 0;
    position: relative;
}

/* Give the subscribe panel a slightly different rhythm */
.spb-section-alt,
.spb-section[style*="background:#fff"] {
    background: #ffffff;
}

/* Eyebrow — small uppercase green label */
.spb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #15803d;
    text-transform: uppercase;
    letter-spacing: .18em;
    font-family: "Inter", system-ui, sans-serif;
    font-weight: 700;
    font-size: .72rem;
    margin: 0 0 10px;
    padding: 0;
}

/* Little green dot before the eyebrow */
.spb-eyebrow::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

/* Main section title — "Jackpot Predictions", "Free Tips", etc. */
.spb-section-title {
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #0f172a;
    margin: 0 0 8px;
    position: relative;
    padding-bottom: 14px;
}

/* Green accent bar under the title */
.spb-section-title::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 56px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

/* Subtitle text — "Full match-by-match analysis..." */
.spb-section-sub {
    color: #64748b;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 0 32px;
}

/* ============================================================
   FLEX HEADER (title left, filter/link right)
   ============================================================ */

.spb-flex-between {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 28px;
}

.spb-flex-between .spb-section-title {
    margin-bottom: 0;
}

.spb-flex-between > div:first-child {
    min-width: 0;
}

/* ============================================================
   DATE PICKER + "View all" LINK
   ============================================================ */

.spb-form-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.spb-form-row input[type="date"] {
    border: 1px solid #dbe3ec;
    border-radius: .6rem;
    background: #fff;
    font-size: .85rem;
    padding: .45rem .7rem;
    color: #334155;
    font-family: "Inter", sans-serif;
    min-width: 150px;
    transition: border-color .15s, box-shadow .15s;
}

.spb-form-row input[type="date"]:focus {
    outline: none;
    border-color: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
}

.spb-form-row button,
.spb-form-row .spb-btn {
    background: #22c55e;
    border: 1px solid #22c55e;
    color: #fff;
    font-weight: 600;
    font-size: .82rem;
    border-radius: .6rem;
    padding: .45rem 1rem;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.spb-form-row button:hover,
.spb-form-row .spb-btn:hover {
    background: #16a34a;
    border-color: #16a34a;
}

.spb-link {
    color: #15803d;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
    transition: color .15s;
}

.spb-link:hover {
    color: #166534;
    text-decoration: underline;
}

/* ============================================================
   DATE HEADINGS INSIDE THE TABLES
   ("Wednesday, 9th September 2026")
   ============================================================ */

.spb-day-block {
    margin-bottom: 32px;
}

.spb-date-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: "Poppins", system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #0f172a;
    margin: 0 0 14px;
    padding: 0;
}

/* Small green dot before each date */
.spb-date-heading::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .15);
}

/* Light green line extending from date to right edge */
.spb-date-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #e8eef3 0%, transparent 100%);
}

/* ============================================================
   CARDS & TABLES (in case you need to touch them too)
   ============================================================ */

.spb-card {
    background: #fff;
    border: 1px solid #e8eef3;
    border-radius: .9rem;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .04),
                0 10px 26px -16px rgba(16, 24, 40, .18);
    overflow: hidden;
    margin-bottom: 24px;
}

.spb-card table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.spb-card thead th {
    background: #f8fafc;
    border-bottom: 1px solid #e8eef3;
    font-size: .68rem;
    letter-spacing: .07em;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    white-space: nowrap;
    padding: .8rem 1rem;
    text-align: left;
}

.spb-card tbody td {
    border-bottom: 1px solid #f1f5f9;
    padding: .72rem 1rem;
    vertical-align: middle;
    color: #334155;
    font-size: .85rem;
}

.spb-card tbody tr:last-child td {
    border-bottom: 0;
}

.spb-card tbody tr {
    transition: background .12s ease;
}

.spb-card tbody tr:hover {
    background: #fafdfb;
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 767.98px) {
    .spb-section {
        padding: 32px 0;
    }

    .spb-section-title {
        font-size: 1.5rem;
        padding-bottom: 12px;
    }

    .spb-section-sub {
        font-size: .92rem;
        margin-bottom: 24px;
    }

    .spb-flex-between {
        align-items: flex-start;
        gap: 14px;
    }

    .spb-flex-between .spb-form-row {
        width: 100%;
    }

    .spb-form-row input[type="date"] {
        flex: 1 1 auto;
        min-width: 0;
    }

    .spb-date-heading {
        font-size: .92rem;
    }
}