/* ═══════════════════════════════════════════════════
   PRO PLAY (proplayco.com) — Shared Stylesheet
   Matches pro-play.tv design exactly
══════════════════════════════════════════════════ */
:root {
  --bg:        #000000;
  --surface:   #0d0d0d;
  --surface-2: #111111;
  --surface-3: #141414;
  --red:       #e8192c;
  --red-dark:  #c4152a;
  --white:     #ffffff;
  --grey:      #999999;
  --muted:     #8e8e8e;
  --border:    rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.14);
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Inter', 'Tajawal', sans-serif;
}

*,*::before,*::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin:0; padding:0; }
html { -webkit-text-size-adjust:none; text-size-adjust:none; scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--white);
  background: var(--bg);
  overflow-x: hidden;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

/* ─── Header ────────────────────────────────────── */
#pp-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  width: 100%;
}
.pp-header-inner {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 5%; height: 56px;
  max-width: 1400px; margin: 0 auto;
}
.pp-logo { margin: 0 auto 0 0; display: flex; align-items: center; gap: 8px; order: -1; flex-shrink: 0; }
.pp-logo a {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--white);
}
.pp-logo-icon {
  width: 34px; height: 34px;
  border: 2px solid rgba(255,255,255,.7);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pp-logo-red { color: var(--red); }
.pp-nav { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.pp-nav a {
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: rgba(255,255,255,.55);
  padding: .5rem .85rem; display: block;
  transition: color .15s; white-space: nowrap;
}
.pp-nav a:hover, .pp-nav a.active { color: var(--white); }
.pp-cta-btn {
  display: inline-flex; align-items: center;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .4rem 1.1rem;
  border-radius: 4px;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.pp-cta-btn:hover { background: var(--red-dark); color: var(--white); }
.pp-hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 8px; flex-shrink: 0; order: -2;
}
.pp-hamburger span { width: 22px; height: 2px; background: var(--white); border-radius: 2px; display: block; transition: transform .2s; }
.pp-mobile-menu {
  display: none;
  flex-direction: column;
  background: #111;
  border-top: 1px solid var(--border);
  padding: .5rem 5%;
}
.pp-mobile-menu.open { display: flex; }
.pp-mobile-menu a { padding: .6rem 0; font-family: var(--font-display); font-size: .88rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.7); border-bottom: 1px solid var(--border); }
.pp-mobile-menu a:last-child { border-bottom: none; }
@media(max-width: 768px) {
  .pp-hamburger { display: flex; }
  .pp-nav, .pp-cta-btn { display: none; }
}

/* ─── Section Header (red bar left + uppercase title) ── */
.pp-sec-hdr {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: 1.2rem;
}
.pp-sec-bar {
  width: 4px; height: 1.4rem;
  background: var(--red); border-radius: 2px; flex-shrink: 0;
}
.pp-sec-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800; text-transform: uppercase;
  color: var(--white); letter-spacing: .04em;
}
.pp-sec-title span { color: var(--red); }
.pp-sec-view-all {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--red);
  border: 1px solid rgba(232,25,44,.4);
  border-radius: 20px;
  padding: .22rem .7rem;
  white-space: nowrap;
  transition: background .15s, color .15s;
  text-decoration: none;
  flex-shrink: 0;
}
.pp-sec-view-all:hover { background: var(--red); color: var(--white); }

/* ─── League Rail ────────────────────────────────── */
#pp-rail-section {
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 1rem 0;
}
#pp-rail-inner { padding: 0 5%; }
#pp-rt {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 8px 4px 22px; /* extra bottom for live badges */
}
#pp-rt::-webkit-scrollbar { display: none; }
/* Arrow buttons */
.pp-rt-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18);
  color: #fff; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; font-size: 1.2rem; line-height: 1;
  transition: background .18s;
  flex-shrink: 0;
}
.pp-rt-arrow:hover { background: var(--red); }
.pp-rt-prev { left: -8px; }
.pp-rt-next { right: -8px; }
/* each link */
#pp-rt a {
  flex-shrink: 0;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.pp-tile {
  width: 130px; height: 130px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  transition: transform .18s, filter .18s;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.pp-tile:hover {
  transform: translateY(-3px) scale(1.06);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.6));
}
.pp-tile img {
  width: 90px; height: 90px; object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.pp-tile img.pp-logo-white {
  filter: brightness(0) invert(1);
}
/* Live on PRO PLAY badge */
.pp-tile-live {
  display: block;
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #e8192c;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2px 7px;
  border-radius: 20px;
  pointer-events: none;
  line-height: 1.5;
  border: 1.5px solid #111;
}
.pp-tile-name { display: none; }
#pp-rt a > span { display: none; }
@media(max-width: 600px) {
  #pp-rt { gap: 18px; }
  .pp-tile { width: 96px !important; height: 96px !important; background: #1a1a1a !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 12px !important; }
  .pp-tile img { width: 68px !important; height: 68px !important; }
  .pp-rt-arrow { width: 28px !important; height: 28px !important; font-size: 1rem !important; }
  .pp-tile-live { font-size: .48rem; padding: 1.5px 5px; bottom: -10px; }
}

/* ─── Home Scores Slider (pp-hs-*) ─────────────── */
#pp-hs-section {
  background: var(--bg);
  padding: 2rem 5% 2.4rem;
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
#pp-hs-rail {
  display: flex; gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0 8px;
  -ms-overflow-style: none;
}
#pp-hs-rail::-webkit-scrollbar { display: none; }
/* ── Fixtures slider cards (slim horizontal layout) ── */
.pp-hs-card {
  flex-shrink: 0; width: 270px;
  background: var(--surface-3);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  padding: .5rem .8rem;
  cursor: pointer;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: .3rem;
}
.pp-hs-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(232,25,44,.18);
}
/* Top row: league badge + name + status */
.pp-hs-top { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.pp-hs-lbadge { width: 12px; height: 12px; object-fit: contain; flex-shrink: 0; }
.pp-hs-lnm { font-size: .55rem; color: #666; font-family: var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.pp-hs-st { font-size: .55rem; font-weight: 700; font-family: var(--font-display); border-radius: 3px; padding: .05rem .2rem; flex-shrink: 0; margin-left: auto; }
/* Body: single horizontal row — team1 | score | team2 */
.pp-hs-body { display: flex; align-items: center; gap: .3rem; min-width: 0; }
/* Each team: logo + name side by side */
.pp-hs-tm {
  display: flex; align-items: center; gap: .3rem;
  flex: 1; min-width: 0;
}
.pp-hs-tm2 { flex-direction: row-reverse; }
.pp-hs-cr { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.pp-hs-tn {
  font-size: .7rem; color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-display); font-weight: 700;
  flex: 1; min-width: 0;
}
.pp-hs-tm2 .pp-hs-tn { text-align: right; }
.pp-hs-sc {
  font-size: 1rem; font-weight: 900; color: var(--white);
  min-width: 36px; text-align: center; letter-spacing: .04em;
  flex-shrink: 0; font-family: var(--font-display);
}
@media(max-width:500px) {
  .pp-hs-card { width: 230px; }
  .pp-hs-cr { width: 18px; height: 18px; }
  .pp-hs-tn { font-size: .65rem; }
  .pp-hs-sc { font-size: .9rem; min-width: 30px; }
}

/* ─── Live Scores (pp-ls-*) ─────────────────────── */
.pp-bf { font-family: var(--font-display) !important; font-style: normal; }
.pp-if { font-family: var(--font-body) !important; }

.pp-ls-lg { margin-bottom: 1rem; border-radius: 10px; overflow: hidden; background: var(--surface); }
.pp-ls-lh { display: flex; align-items: center; gap: .4rem; padding: .5rem .8rem; background: var(--surface-2); border-bottom: 1px solid var(--border); min-width: 0; }
.pp-ls-lb { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.pp-ls-ln { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-family: var(--font-display); }
.pp-ls-lc { color: #555; font-size: .7rem; margin-left: .4rem; font-family: var(--font-body); }
.pp-ls-lactions { display: flex; align-items: center; gap: .4rem; margin-left: auto; flex-shrink: 0; }
.pp-ls-watch { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--red); border: 1px solid rgba(232,25,44,.4); border-radius: 20px; padding: .2rem .6rem; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; font-family: var(--font-display); }
.pp-ls-watch:hover { background: var(--red); color: var(--white); }
.pp-ls-fav-btn { background: none; border: none; cursor: pointer; font-size: .95rem; color: #555; padding: 0 .2rem; line-height: 1; transition: color .15s; flex-shrink: 0; }
.pp-ls-fav-btn:hover { color: #f5c518; }
.pp-ls-row { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; border-bottom: 1px solid rgba(255,255,255,.04); cursor: pointer; transition: background .15s; }
.pp-ls-row:hover { background: rgba(255,255,255,.04); }
.pp-ls-row:last-child { border-bottom: none; }
.pp-ls-favrow { background: rgba(245,197,24,.04); }
.pp-ls-favrow:hover { background: rgba(245,197,24,.08); }
.pp-ls-st { min-width: 42px; text-align: center; font-size: .7rem; font-weight: 700; font-family: var(--font-display); letter-spacing: .04em; border-radius: 4px; padding: .18rem .35rem; flex-shrink: 0; }
.pp-ls-live { background: rgba(232,25,44,.15); color: var(--red); }
.pp-ls-ns { background: rgba(255,255,255,.06); color: #777; }
.pp-ls-ft { background: transparent; color: #444; }
.pp-ls-mx { flex: 1; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.pp-ls-tm { display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 0; }
.pp-ls-tm2 { justify-content: flex-end; flex-direction: row-reverse; }
.pp-ls-cr { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.pp-ls-tn { font-size: .83rem; color: var(--white); font-family: var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-ls-favtm { color: #f5c518 !important; }
.pp-ls-sc { min-width: 52px; text-align: center; font-size: .95rem; font-weight: 800; color: var(--white); letter-spacing: .06em; flex-shrink: 0; font-family: var(--font-display); }
.pp-ls-teamfavs { display: flex; flex-direction: column; gap: 0; flex-shrink: 0; }
.pp-ls-teamfavs .pp-ls-fav-btn { font-size: .8rem; padding: .05rem; }
.pp-ls-arr { color: #333; font-size: 1rem; flex-shrink: 0; }
#pp-ls-upd { text-align: right; color: #333; font-size: .65rem; font-family: var(--font-body); margin-top: .6rem; padding-right: .2rem; }

/* Date nav */
.pp-ls-datenav { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem; }
.pp-ls-arrow { background: rgba(255,255,255,.07); border: 1px solid transparent; border-radius: 50%; color: rgba(255,255,255,.5); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; flex-shrink: 0; transition: background .2s, color .2s; }
.pp-ls-arrow:hover { background: rgba(255,255,255,.15); color: var(--white); }
.pp-ls-datetabs { display: flex; gap: .4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1; }
.pp-ls-dtab { background: rgba(255,255,255,.07); border: 1px solid transparent; border-radius: 20px; color: rgba(255,255,255,.5); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .38rem 1rem; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; flex-shrink: 0; font-family: var(--font-display); }
.pp-ls-dtab.pp-ls-active { background: var(--red); border-color: var(--red); color: var(--white); }

/* Detail panel */
.pp-ls-dld { background: #111; border-radius: 10px; margin-bottom: 1rem; overflow: hidden; border: 1px solid rgba(232,25,44,.2); }
.pp-ls-dlh { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; background: #1a0a0b; gap: .5rem; }
.pp-ls-dlteam { font-size: .88rem; font-weight: 700; color: var(--white); flex: 1; font-family: var(--font-display); }
.pp-ls-dltr { text-align: right; }
.pp-ls-dlscore { text-align: center; min-width: 80px; flex-shrink: 0; }
.pp-ls-dlscore .pp-bf { font-size: 1.4rem; color: var(--white); display: block; }
.pp-ls-dlst { font-size: .7rem; font-weight: 700; font-family: var(--font-display); border-radius: 4px; padding: .15rem .4rem; display: inline-block; margin-top: .3rem; }
.pp-ls-dlbody { padding: .8rem 1.2rem; }
.pp-ls-dlvenue { font-size: .75rem; color: #555; font-family: var(--font-body); text-align: center; margin-bottom: .8rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.pp-ls-dlsec { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #888; margin: .8rem 0 .5rem; font-family: var(--font-display); }
.pp-ls-dlevts { display: flex; flex-direction: column; gap: .3rem; }
.pp-ls-evt { display: flex; align-items: center; gap: .4rem; font-size: .82rem; font-family: var(--font-body); }
.pp-ls-evtr { flex-direction: row-reverse; }
.pp-ls-evtmin { min-width: 32px; color: #555; font-size: .75rem; flex-shrink: 0; }
.pp-ls-ico { font-size: .85rem; flex-shrink: 0; }
.pp-ls-evtnm { color: #ccc; flex: 1; }
.pp-ls-evtr .pp-ls-evtnm { text-align: right; }
.pp-ls-evtsc { color: var(--red); font-weight: 700; font-size: .78rem; font-family: var(--font-display); flex-shrink: 0; }
.pp-ls-dlht { font-size: .75rem; color: #555; font-family: var(--font-body); text-align: center; margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.06); }
@media(max-width:600px) {
  .pp-ls-tn { font-size: .75rem; }
  .pp-ls-sc { min-width: 44px; font-size: .85rem; }
  .pp-ls-cr { width: 16px; height: 16px; }
  .pp-ls-dlteam { font-size: .78rem; }
  .pp-ls-watch { font-size: .58rem; padding: .12rem .35rem; letter-spacing: .02em; }
  .pp-ls-lc { display: none; }
}

/* ─── BW Challenge Banner ────────────────────────── */
#pp-bw { }
#pp-bw a { display: block; text-decoration: none; }
.pp-bw-outer {
  position: relative; overflow: hidden;
  background: #0a0a0a;
  padding: 3.5rem 5%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.pp-bw-glow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pp-bw-glow-1 { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(232,25,44,.18) 0%, transparent 70%); top: -100px; right: 10%; }
.pp-bw-glow-2 { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, rgba(232,25,44,.1) 0%, transparent 70%); bottom: -80px; left: 5%; }
.pp-bw-left { position: relative; z-index: 1; max-width: 640px; }
.pp-bw-tags { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.pp-bw-tag-red { font-family: var(--font-display); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .3rem .7rem; border-radius: 20px; color: var(--white); background: var(--red); }
.pp-bw-tag-outline { border: 1px solid rgba(255,255,255,.25); color: #ccc; font-family: var(--font-display); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .3rem .7rem; border-radius: 20px; }
.pp-bw-ht { margin: 0 0 .8rem; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 800; text-transform: uppercase; color: var(--white); letter-spacing: .03em; line-height: .95; }
.pp-bw-p { color: #8e8e8e; font-size: .95rem; line-height: 1.65; margin: 0 0 1.4rem; max-width: 480px; }
.pp-bw-pills { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.pp-bw-pill { border: 1px solid rgba(255,255,255,.2); color: #ccc; font-family: var(--font-display); font-size: .75rem; padding: .3rem .8rem; border-radius: 20px; }
.pp-bw-btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--white); color: #000; font-family: var(--font-display); font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: .7rem 1.8rem; border-radius: 6px; }
.pp-bwi { position: relative; z-index: 1; flex-shrink: 0; }
.pp-bw-icon-box { width: 180px; height: 180px; border-radius: 16px; background: linear-gradient(135deg,#1a0a0b,#2d0d0f); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(232,25,44,.3); }
@media(max-width:600px) { .pp-bwi { display: none !important; } }

/* ─── Footer Mode Switch — hidden on proplayco.com ─── */
.pp-footer-mode-switch {
  display: none;
}
.pp-fms-wrap {
  display: inline-flex; align-items: center; gap: .65rem;
}
.pp-fms-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  transition: color .25s;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.pp-fms-label.sports { color: #444; }
.pp-fms-label.ent    { color: #444; text-decoration: none; }
/* pill track */
.pp-fms-track {
  width: 52px; height: 26px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}
/* knob */
.pp-fms-knob {
  width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #ff6b5b, #e8192c 60%, #a80f1e);
  box-shadow: 0 1px 5px rgba(232,25,44,.55);
  position: absolute;
  top: 50%; transform: translateY(-50%);
  left: 3px;
  transition: left .3s cubic-bezier(.65,0,.35,1);
}
.pp-fms-track.ent-active .pp-fms-knob {
  left: calc(100% - 23px);
}
/* active labels */
.pp-fms-wrap.sports-active .pp-fms-label.sports { color: #fff; }
.pp-fms-wrap.ent-active    .pp-fms-label.ent    { color: #e8192c; }

/* ─── Footer ─────────────────────────────────────── */
#pp-footer {
  background: #1a1a1a;
  border-top: 1px solid rgba(255,255,255,.08);
  display: block; padding: 0; margin: 0;
}
.pp-footer-inner { max-width: 1400px; margin: 0 auto; padding: 3rem 5% 0; }
#pp-fg {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem; margin-bottom: 2.5rem;
}
.pp-footer-logo-link {
  font-family: var(--font-display);
  font-size: 2rem; font-weight: 800;
  color: var(--white); text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
  margin-bottom: .8rem;
}
.pp-footer-tagline { color: #8e8e8e; font-size: .88rem; line-height: 1.7; max-width: 280px; margin: 0 0 1.4rem; }
.pp-app-btns { display: flex; flex-direction: column; gap: .5rem; }
.pp-app-btn {
  display: inline-flex; align-items: center; gap: .7rem;
  background: #111; border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px; padding: .55rem 1rem;
  text-decoration: none; color: var(--white);
  width: 160px; box-sizing: border-box;
  transition: border-color .2s;
}
.pp-app-btn:hover { border-color: rgba(255,255,255,.4); }
.pp-app-btn-text { line-height: 1.2; }
.pp-app-btn-small { font-size: .58rem; color: #8e8e8e; font-family: var(--font-body); }
.pp-app-btn-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
.pp-footer-col h4 {
  font-family: var(--font-display);
  font-size: 1rem; font-weight: 700;
  text-transform: uppercase; color: var(--white);
  margin: 0 0 1rem; letter-spacing: .06em;
}
.pp-footer-col a {
  display: block; color: #8e8e8e;
  font-size: .88rem; line-height: 2;
  text-decoration: none; font-family: var(--font-body);
  transition: color .15s;
}
.pp-footer-col a:hover { color: var(--white); }
#pp-fb {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 1rem;
}
.pp-footer-bot {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.2rem 0 2rem; margin-top: 0;
}
.pp-footer-bot-inner { }
.pp-copyright { color: #555; font-size: .8rem; font-family: var(--font-body); }
.pp-social-row { display: flex; gap: .5rem; }
.pp-sob {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--surface); border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--white); text-decoration: none;
  transition: background .2s;
}
.pp-sob:hover { background: var(--red) !important; }
body.light-theme .pp-sob { background: rgba(0,0,0,.08) !important; border-color: rgba(0,0,0,.12) !important; color: #333 !important; }
body.light-theme .pp-sob:hover { background: var(--red) !important; color: #fff !important; }
@media(max-width:700px) { #pp-fg { grid-template-columns: 1fr !important; gap: 1.8rem !important; } }

/* ─── Utilities ──────────────────────────────────── */
.pp-section { padding: 2rem 5%; border-top: 1px solid rgba(255,255,255,.07); }
.pp-section-full { padding: 2rem 5%; }

/* Section heading red bar on content sections */
.pp-content-hdr {
  display: flex; align-items: center; gap: .6rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: .6rem; margin-bottom: 1.4rem;
}
.pp-content-hdr-inner { display: flex; align-items: center; gap: .6rem; }

/* Highlight video cards */
.hl-card { flex-shrink: 0; width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .18s, transform .18s; }
.hl-card:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.hl-thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.hl-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.hl-card:hover .hl-thumb img { transform: scale(1.04); }
.hl-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); }
.hl-play-btn { width: 44px; height: 44px; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,.35); }
.hl-dur { position: absolute; bottom: .5rem; right: .5rem; background: rgba(0,0,0,.75); color: var(--white); font-size: .7rem; font-weight: 600; padding: .15rem .45rem; border-radius: 4px; }
.hl-body { padding: .7rem 1rem; }
.hl-title { font-size: .83rem; font-weight: 700; color: var(--white); margin-bottom: 4px; line-height: 1.3; }
.hl-meta { display: flex; align-items: center; justify-content: space-between; }
.hl-league { font-size: .72rem; color: var(--white); }
.hl-time { font-size: .72rem; color: #555; }

/* News/social elfsight wrapper */
#pp-news { border-top: 1px solid rgba(255,255,255,.1); }
#pp-news .pp-news-inner { padding: 2rem 5% 2.5rem; background: var(--bg); }

/* League page section */
#pp-lg-header { background: #111; border-bottom: 1px solid var(--border); padding: 1.6rem 5%; }
.pp-lg-header-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; }
.pp-lg-logo { width: 80px; height: 80px; object-fit: contain; border-radius: 14px; background: rgba(255,255,255,.05); padding: .5rem; flex-shrink: 0; }
.pp-lg-name { font-family: var(--font-display); font-size: clamp(1.8rem,5vw,2.8rem); font-weight: 800; text-transform: uppercase; color: var(--white); letter-spacing: .03em; margin: 0 0 .2rem; }
.pp-lg-country { font-size: .82rem; color: #555; font-family: var(--font-body); }
/* League sections — always visible (no tabs, scrollable layout) */
.pp-lg-section { padding: 1.5rem 5%; max-width: 1400px; margin: 0 auto; display: block; }
.pp-lg-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.pp-lg-tbl-wrap::-webkit-scrollbar { display: none; }
.pp-lg-tbl { width: 100%; border-collapse: collapse; min-width: 480px; }
.pp-lg-tbl th { font-size: .65rem; font-weight: 700; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; color: #555; padding: .5rem .4rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.pp-lg-tbl th.th-team { text-align: left; padding-left: .4rem; }
.pp-lg-tbl td { font-size: .82rem; font-family: var(--font-body); color: #ccc; padding: .5rem .4rem; text-align: center; border-bottom: 1px solid rgba(255,255,255,.04); }
.pp-lg-tbl td.td-team { text-align: left; padding-left: .4rem; }
.pp-lg-tbl tr:hover td { background: rgba(255,255,255,.03); }
.pp-lg-tbl .td-rnk { color: #555; font-size: .75rem; min-width: 20px; }
.pp-lg-tbl .td-pts { color: var(--white); font-weight: 700; font-family: var(--font-display); font-size: .9rem; }
.pp-lg-tbl .td-crest { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; margin-right: .4rem; border-radius: 2px; }
.pp-lg-match { display: flex; align-items: center; padding: .65rem 0; border-bottom: 1px solid rgba(255,255,255,.04); gap: .5rem; }
.pp-lg-match:last-child { border-bottom: none; }
.pp-lg-match-status { min-width: 50px; text-align: center; font-family: var(--font-display); font-size: .78rem; font-weight: 700; flex-shrink: 0; }
.pp-lg-match-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .28rem; }
.pp-lg-match-team { display: flex; align-items: center; gap: .4rem; }
.pp-lg-match-crest { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.pp-lg-match-name { font-size: .82rem; color: #ddd; font-family: var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-lg-match-score { display: flex; flex-direction: column; align-items: flex-end; gap: .28rem; flex-shrink: 0; }
.pp-lg-match-sc { font-size: .88rem; font-weight: 800; color: var(--white); font-family: var(--font-display); line-height: 1; }
.pp-lg-videos { display: grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap: 14px; }
.pp-lg-vid-card { background: #0d0d0d; border: 1px solid rgba(255,255,255,.07); border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color .2s, transform .2s; }
.pp-lg-vid-card:hover { border-color: var(--red); transform: translateY(-3px); }
.pp-lg-vid-thumb { position: relative; width: 100%; padding-bottom: 56.25%; overflow: hidden; background: #111; }
.pp-lg-vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-lg-vid-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.3); }
.pp-lg-vid-play-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(232,25,44,.9); display: flex; align-items: center; justify-content: center; }
.pp-lg-vid-info { padding: .65rem .8rem; }
.pp-lg-vid-title { font-size: .78rem; color: #ddd; font-family: var(--font-body); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pp-lg-vid-ch { font-size: .65rem; color: #555; margin-top: .25rem; font-family: var(--font-body); }
.pp-lg-sec-hdr { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.pp-lg-sec-bar { width: 4px; height: 1.4rem; background: var(--red); border-radius: 2px; flex-shrink: 0; }
.pp-lg-sec-title { margin: 0; font-size: 1.1rem; font-weight: 800; text-transform: uppercase; color: var(--white); letter-spacing: .04em; font-family: var(--font-display); }
.pp-lg-loading { color: #555; font-family: var(--font-body); font-size: .85rem; padding: 2rem; text-align: center; }

/* Watch page */
#pp-watch-hero { background: #000; }
.pp-watch-player { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.pp-watch-player iframe, .pp-watch-player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Footer grid — both #pp-fg (index/play/team) and .pp-footer-grid (others) ── */
#pp-fg,
.pp-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 3rem; margin-bottom: 2.5rem;
}
@media(max-width:700px) {
  #pp-fg, .pp-footer-grid { grid-template-columns: 1fr !important; gap: 1.8rem !important; }
}
.pp-footer-bot-inner {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 1rem;
}
/* Social icons (watch.html uses .pp-social / .pp-social-btn) */
.pp-social { display: flex; gap: .5rem; }
.pp-social-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: #111; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  color: var(--white); text-decoration: none;
  transition: background .2s;
}
.pp-social-btn:hover { background: var(--red); }
/* Live badge (watch.html title bar) */
.live-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(232,25,44,.12);
  border: 1px solid rgba(232,25,44,.3);
  color: var(--red);
  font-family: var(--font-display);
  font-size: .65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
  padding: .18rem .55rem; border-radius: 20px;
}
.live-dot {
  width: 6px; height: 6px;
  background: var(--red); border-radius: 50%;
  animation: livepulse 1.2s ease-in-out infinite;
  display: inline-block;
}
@keyframes livepulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.65)} }
/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg,#1a1a1a 25%,#222 50%,#1a1a1a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* Search button */
.pp-search-btn {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  color: rgba(255,255,255,.5);
  background: none; border: none;
  cursor: pointer; flex-shrink: 0;
  transition: color .15s;
}
.pp-search-btn:hover { color: var(--white); }
/* hs-st colour helpers on home slider cards */
.pp-hs-st.pp-ls-live { color: var(--red); background: rgba(232,25,44,.1); }
.pp-hs-st.pp-ls-ns  { color: #888; background: transparent; }
.pp-hs-st.pp-ls-ft  { color: #555; background: transparent; }

/* ─── Search Widget ──────────────────────────────── */
.pp-search-wrap { position:relative; }
.pp-search-btn { background:none; border:none; color:rgba(255,255,255,.6); cursor:pointer; padding:6px; display:flex; align-items:center; }
.pp-search-btn:hover { color:#fff; }
.pp-search-box { display:none; position:absolute; right:0; top:100%; width:280px; background:#111; border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:8px 10px; z-index:200; }
.pp-search-box.open { display:flex; gap:6px; }
.pp-search-input { flex:1; background:transparent; border:none; outline:none; color:#fff; font-family:Inter,sans-serif; font-size:.85rem; }
.pp-search-results { position:absolute; right:0; top:calc(100% + 4px); width:320px; background:#111; border:1px solid rgba(255,255,255,.1); border-radius:10px; max-height:380px; overflow-y:auto; z-index:300; display:none; }
.pp-search-results.open { display:block; }
.pp-sr-item { padding:10px 14px; display:flex; align-items:center; gap:10px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.05); text-decoration:none; color:inherit; }
.pp-sr-item:hover { background:rgba(255,255,255,.04); }
.pp-sr-item:last-child { border-bottom:none; }
.pp-sr-type { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#e8192c; width:40px; flex-shrink:0; }
.pp-sr-title { font-size:.82rem; color:#fff; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-sr-sub { font-size:.68rem; color:#555; flex-shrink:0; margin-left:auto; padding-left:.5rem; }
.pp-sr-section { padding:5px 14px 3px; font-family:'Barlow Condensed',sans-serif; font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; color:#444; border-bottom:1px solid rgba(255,255,255,.04); }

/* ─── Dark/Light Theme ───────────────────────────── */
body.light-theme {
  --bg: #f0f0f0;
  --surface: #ffffff;
  --surface-2: #e8e8e8;
  --surface-3: #dedede;
  --border: rgba(0,0,0,.12);
  --border-strong: rgba(0,0,0,.22);
  --text: #111111;
  --muted: #555555;
  --dim: #777777;
  --white: #111111;
  color: #111111;
  background: #f0f0f0;
}

/* Header */
body.light-theme #pp-header,
body.light-theme header { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,.1) !important; }
body.light-theme .pp-logo a,
body.light-theme .pp-logo span { color: #111 !important; }
body.light-theme .pp-logo img { filter: invert(1); }
body.light-theme .pp-nav a { color: #444 !important; }
body.light-theme .pp-nav a:hover,
body.light-theme .pp-nav a.active { color: #111 !important; }
body.light-theme .pp-icon-btn,
body.light-theme button[onclick="toggleTheme()"],
body.light-theme button[onclick="toggleLang()"],
body.light-theme .pp-search-btn { background: rgba(0,0,0,.07) !important; color: #111 !important; border-color: rgba(0,0,0,.12) !important; }
body.light-theme .pp-mobile-menu { background: #fff !important; }
body.light-theme .pp-mobile-menu a { color: #333 !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .pp-cta-btn { background: #e8192c; color: #fff !important; }
body.light-theme .pp-login-btn { color: #111 !important; }

/* Search overlay */
body.light-theme #pp-search-overlay { background: rgba(255,255,255,.97) !important; }
body.light-theme #pp-si { background: #f0f0f0 !important; color: #111 !important; border-color: rgba(0,0,0,.15) !important; }
body.light-theme #pp-sr { background: #fff !important; }
body.light-theme .pp-sr-item { border-color: rgba(0,0,0,.06) !important; }
body.light-theme .pp-sr-item:hover { background: rgba(0,0,0,.04) !important; }
body.light-theme .pp-sr-title { color: #111 !important; }

/* Main surfaces */
body.light-theme .pp-section,
body.light-theme section,
body.light-theme main,
body.light-theme .pp-content { background: #f0f0f0 !important; }

/* Cards / surface blocks */
body.light-theme .pp-card,
body.light-theme .pp-match-card,
body.light-theme .hl-card,
body.light-theme .hl-meta,
body.light-theme .ls-card,
body.light-theme .pp-ls-lg,
body.light-theme .pp-ls-lh,
body.light-theme .pp-ls-row,
body.light-theme .pp-md-wrap,
body.light-theme .pp-ls-dtabs,
body.light-theme #pp-ls-detail { background: #ffffff !important; color: #111 !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-ls-lg { background: #ffffff !important; }
body.light-theme .pp-ls-lh { background: #f2f2f2 !important; border-color: rgba(0,0,0,.07) !important; }
body.light-theme .pp-ls-row:hover { background: #f5f5f5 !important; }
body.light-theme .pp-ls-lnm,
body.light-theme .pp-ls-cnm { color: #111 !important; }
body.light-theme .pp-ls-tnm { color: #111 !important; }
body.light-theme .pp-ls-ns { color: #555 !important; }
body.light-theme .pp-ls-ft { color: #888 !important; }
body.light-theme .pp-ls-dlvenue { color: #444 !important; }
body.light-theme .pp-md-slbl { color: #777 !important; }
body.light-theme .pp-md-sv { color: #111 !important; }
body.light-theme .pp-ls-dtab { color: #555 !important; background: #eee !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-ls-dtab.pp-md-tab-act { background: #e8192c !important; color: #fff !important; }

/* League cards */
body.light-theme .pp-lg-card { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-lg-card:hover { background: #f5f5f5 !important; }
body.light-theme .pp-lg-name { color: #111 !important; }

/* Match cards (watch/league pages) */
body.light-theme .pp-mc { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-mc-teams,
body.light-theme .pp-mc-team,
body.light-theme .pp-mc-score,
body.light-theme .pp-mc-time { color: #111 !important; }
body.light-theme .pp-mc-league { color: #777 !important; }
body.light-theme .pp-mc-status { color: #555 !important; }

/* Section headings */
body.light-theme .pp-sh,
body.light-theme .pp-section-title,
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4 { color: #111 !important; }
body.light-theme .pp-sh::before { background: #e8192c !important; }

/* Standings table */
body.light-theme .pp-stnd-tbl { background: #fff !important; }
body.light-theme .pp-stnd-row { border-color: rgba(0,0,0,.06) !important; color: #111 !important; }
body.light-theme .pp-stnd-row:hover { background: #f5f5f5 !important; }
body.light-theme .pp-stnd-hdr { background: #efefef !important; color: #555 !important; }
body.light-theme .pp-stnd-rnk { color: #777 !important; }
body.light-theme .pp-stnd-tnm { color: #111 !important; }


/* Hero banners — keep dark for readability */
body.light-theme .pp-hero { filter: brightness(.85); }
body.light-theme .pp-hero-text { color: #fff !important; text-shadow: 0 2px 8px rgba(0,0,0,.6); }

/* Footer */
body.light-theme footer,
body.light-theme .pp-footer { background: #ffffff !important; border-top: 1px solid rgba(0,0,0,.1) !important; color: #555 !important; }
body.light-theme .pp-footer a,
body.light-theme footer a { color: #333 !important; }
body.light-theme .pp-footer a:hover,
body.light-theme footer a:hover { color: #111 !important; }
body.light-theme .pp-footer-logo,
body.light-theme footer .pp-logo a { color: #111 !important; }
body.light-theme .pp-footer-tagline,
body.light-theme footer p { color: #666 !important; }
body.light-theme .pp-footer-copy { color: #888 !important; }

/* Highlight cards */
body.light-theme .hl-title { color: #111 !important; }
body.light-theme .hl-ch { color: #777 !important; }

/* Play page games */
body.light-theme .pp-game-card { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-game-title { color: #111 !important; }
body.light-theme .pp-game-desc { color: #555 !important; }

/* Auth modals */
body.light-theme .pp-modal,
body.light-theme .pp-modal-box { background: #fff !important; color: #111 !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-modal input,
body.light-theme .pp-modal select,
body.light-theme .pp-modal textarea { background: #f5f5f5 !important; color: #111 !important; border-color: rgba(0,0,0,.15) !important; }
body.light-theme .pp-modal label { color: #333 !important; }

/* League page header */
body.light-theme #pp-lg-header { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme #pp-lg-title { color: #111 !important; }
body.light-theme #pp-lg-country { color: #777 !important; }

/* News/social */
body.light-theme #pp-news,
body.light-theme #pp-news .pp-news-inner { background: #f0f0f0 !important; }

/* Date tabs on scores page */
body.light-theme .pp-date-tab { background: #eee !important; color: #555 !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-date-tab.pp-date-active { background: #e8192c !important; color: #fff !important; }
body.light-theme .pp-date-nav { color: #555 !important; }

/* Generic text */
body.light-theme p,
body.light-theme span:not(.pp-ls-live):not(.pp-badge),
body.light-theme div { color: inherit; }
body.light-theme .pp-muted,
body.light-theme .muted { color: #777 !important; }

/* Home fixture cards */
body.light-theme .pp-hs-card { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-hs-card:hover { border-color: #e8192c !important; background: #fafafa !important; }
body.light-theme .pp-hs-tn { color: #333 !important; }
body.light-theme .pp-hs-sc { color: #111 !important; }
body.light-theme .pp-hs-lnm { color: #555 !important; }
body.light-theme #pp-hs-section { background: #f0f0f0 !important; }


/* Watch Live match cards on home page */
body.light-theme .pp-wl-card,
body.light-theme [class*="pp-wl"] { background: #fff !important; border-color: rgba(0,0,0,.1) !important; color: #111 !important; }

/* League card tiles in home slider */
body.light-theme .pp-lg-card { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; box-shadow: none !important; }
body.light-theme .pp-lg-name { color: #111 !important; }
body.light-theme #pp-lg-rail { background: #f0f0f0 !important; }

/* Dark promo sections */
body.light-theme .pp-promo,
body.light-theme [style*="background:#0"],
body.light-theme [style*="background: #0"],
body.light-theme [style*="background:#1"],
body.light-theme [style*="background: #1"] { background: #f0f0f0 !important; color: #111 !important; }

/* Scores page rows */
body.light-theme .pp-sc-row,
body.light-theme .pp-sc-group { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }

/* Watch page sections */
body.light-theme #pp-wl-section,
body.light-theme #pp-wl-rail { background: #f0f0f0 !important; }

/* League tiles (pp-tile) — light theme: keep solid bg color, adjust name color */
body.light-theme .pp-tile { box-shadow: 0 3px 10px rgba(0,0,0,.18) !important; }
body.light-theme .pp-tile-name { color: rgba(255,255,255,.95) !important; }

/* Search box */
body.light-theme .pp-search-box { background: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
body.light-theme .pp-search-box input { color: #111 !important; background: transparent !important; }
body.light-theme .pp-search-box input::placeholder { color: #999 !important; }

/* Slider arrows */
body.light-theme .pp-slider-arrow { background: rgba(0,0,0,.15) !important; color: #fff !important; }
body.light-theme .pp-slider-arrow:hover { background: rgba(0,0,0,.28) !important; }

/* Watch live match tiles on home */
body.light-theme .pp-mc-card,
body.light-theme .pp-match-tile { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-mc-card *,
body.light-theme .pp-match-tile * { color: #111 !important; }

/* ─── Arabic / RTL ───────────────────────────────── */
body.rtl { direction: rtl; }
body.rtl .pp-header-inner { flex-direction: row-reverse; }
body.rtl .pp-nav { flex-direction: row-reverse; }
body.rtl .pp-bw-outer { flex-direction: row-reverse; }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — Comprehensive fix (all pages)
   Added: league page, footer, header, watch, scores, play, body bg
══════════════════════════════════════════════════════════════════════ */

/* ── Global body / page background ── */
body.light-theme { background: #f0f0f0 !important; color: #111 !important; }
body.light-theme main,
body.light-theme .page-wrap { background: #f0f0f0 !important; }

/* ── Header ── */
body.light-theme #pp-header { background: #ffffff !important; border-bottom: 1px solid rgba(0,0,0,.1) !important; }
body.light-theme #pp-header .pp-nav a { color: #333 !important; }
body.light-theme #pp-header .pp-nav a:hover,
body.light-theme #pp-header .pp-nav a.active { color: #e8192c !important; }
body.light-theme .pp-logo a,
body.light-theme .pp-logo span { color: #111 !important; }
body.light-theme .pp-logo-icon svg { stroke: #111 !important; }
body.light-theme .pp-hamburger span { background: #111 !important; }
body.light-theme .pp-mobile-menu { background: #ffffff !important; border-top: 1px solid rgba(0,0,0,.1) !important; }
body.light-theme .pp-mobile-menu a { color: #333 !important; border-color: rgba(0,0,0,.07) !important; }
body.light-theme .pp-cta-btn { background: #e8192c !important; color: #fff !important; }
body.light-theme #pp-header a[style*="color:rgba(255"] { color: #444 !important; }
body.light-theme .pp-sb { background: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
body.light-theme #pp-si { color: #111 !important; background: transparent !important; }
body.light-theme #pp-si::placeholder { color: #999 !important; }
body.light-theme #pp-sr { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; box-shadow: 0 4px 16px rgba(0,0,0,.12) !important; }
body.light-theme .pp-sr-item { border-color: rgba(0,0,0,.06) !important; }
body.light-theme .pp-sr-item:hover { background: #f5f5f5 !important; }
body.light-theme .pp-sr-title { color: #111 !important; }
body.light-theme .pp-sr-type { color: #e8192c !important; }
body.light-theme #pp-theme-btn,
body.light-theme #pp-lang-btn { background: rgba(0,0,0,.07) !important; color: #333 !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme #pp-theme-btn:hover,
body.light-theme #pp-lang-btn:hover { background: rgba(0,0,0,.12) !important; }
body.light-theme #pp-theme-btn svg,
body.light-theme #pp-theme-btn svg path,
body.light-theme #pp-theme-btn svg circle { stroke: #333 !important; }

/* ── Footer ── */
body.light-theme #pp-footer,
body.light-theme footer { background: #ffffff !important; border-top: 1px solid rgba(0,0,0,.1) !important; }
body.light-theme .pp-footer-inner { color: #555 !important; }
body.light-theme .pp-footer-logo-link { color: #111 !important; }
body.light-theme .pp-footer-tagline { color: #777 !important; }
body.light-theme .pp-footer-col h4 { color: #111 !important; }
body.light-theme .pp-footer-col a { color: #555 !important; }
body.light-theme .pp-footer-col a:hover { color: #e8192c !important; }
body.light-theme .pp-footer-bot,
body.light-theme #pp-fb { background: #ffffff !important; border-top: 1px solid rgba(0,0,0,.08) !important; }
body.light-theme .pp-sob { background: #f0f0f0 !important; color: #333 !important; }
body.light-theme .pp-social-row .pp-sob svg { stroke: #333 !important; }
body.light-theme .pp-copyright { color: #888 !important; }
body.light-theme .pp-app-btn { background: #111 !important; color: #fff !important; border-color: rgba(0,0,0,.15) !important; }
body.light-theme .pp-app-btn:hover { background: #333 !important; }
body.light-theme .pp-app-btn-small,
body.light-theme .pp-app-btn-name { color: #fff !important; }

/* ── League page header ── */
body.light-theme #pp-lg-header { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .pp-lg-header-inner { color: #111 !important; }
body.light-theme .pp-lg-name { color: #111 !important; }
body.light-theme .pp-lg-country { color: #777 !important; }
body.light-theme .pp-lg-logo-ph { background: rgba(0,0,0,.06) !important; border-color: rgba(0,0,0,.1) !important; }

/* ── League page sections ── */
body.light-theme .pp-lg-section { background: transparent !important; }
body.light-theme .pp-lg-section + .pp-lg-section { border-color: rgba(0,0,0,.08) !important; }
body.light-theme .pp-lg-sec-hdr { background: transparent !important; }
body.light-theme .pp-lg-sec-title { color: #111 !important; }
body.light-theme .pp-lg-sec-bar { background: #e8192c !important; }
body.light-theme .pp-lg-loading { color: #777 !important; }

/* ── League fixtures rail ── */
body.light-theme .pp-lg-fix-card { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-lg-fix-name { color: #333 !important; }
body.light-theme .pp-lg-fix-score-row { color: #111 !important; }
body.light-theme .pp-lg-fix-status { color: #777 !important; }

/* ── League highlights (video cards) ── */
body.light-theme .pp-lg-videos { background: transparent !important; }
body.light-theme .pp-lg-vid-card { background: #ffffff !important; border: 1px solid rgba(0,0,0,.08) !important; border-radius: 10px !important; }
body.light-theme .pp-lg-vid-card:hover { border-color: rgba(232,25,44,.3) !important; }
body.light-theme .pp-lg-vid-info { background: #ffffff !important; }
body.light-theme .pp-lg-vid-title { color: #111 !important; }
body.light-theme .pp-lg-vid-ch { color: #777 !important; }

/* ── League standings table ── */
body.light-theme .pp-lg-tbl-wrap { background: #ffffff !important; border-radius: 10px !important; overflow: hidden !important; }
body.light-theme .pp-lg-tbl { background: #ffffff !important; }
body.light-theme .pp-lg-tbl thead tr { background: #f5f5f5 !important; }
body.light-theme .pp-lg-tbl th { color: #666 !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .pp-lg-tbl td { color: #111 !important; border-color: rgba(0,0,0,.05) !important; }
body.light-theme .pp-lg-tbl tr:hover { background: #fafafa !important; }
body.light-theme .td-rnk { color: #777 !important; }
body.light-theme .td-pts { color: #111 !important; font-weight: 700 !important; }
body.light-theme .td-team-inner span { color: #111 !important; }

/* ── Watch Live match cards (league + watch pages + index rail) ── */
body.light-theme .pp-wl-card { background: #ffffff !important; border-color: rgba(0,0,0,.12) !important; }
body.light-theme .pp-wl-card:hover { border-color: rgba(232,25,44,.3) !important; box-shadow: 0 6px 20px rgba(0,0,0,.12) !important; }
body.light-theme .pp-wl-info { background: #ffffff !important; }
body.light-theme .pp-wl-title { color: #111 !important; }
body.light-theme .pp-wl-league,
body.light-theme .pp-wl-meta { color: #777 !important; }
body.light-theme .pp-wl-thumb { background: #e5e5e5 !important; }
body.light-theme .pp-wl-overlay { background: rgba(0,0,0,.5) !important; }
/* Inner divs of JS-built watch-live cards (index.html rail) */
body.light-theme .pp-wl-card > div:last-child { background: #ffffff !important; }
body.light-theme .pp-wl-card > div:last-child div { color: #111 !important; }
body.light-theme .pp-wl-card > div:last-child div:last-child { color: #888 !important; }
body.light-theme .pp-wl-card > div:first-child { background: #e8e8e8 !important; }
body.light-theme .pp-wl-no-live { color: #999 !important; }
body.light-theme .pp-lg-no-live { color: #999 !important; background: rgba(0,0,0,.03) !important; border-radius: 8px !important; padding: .8rem !important; }

/* ── Scores page ── */
body.light-theme #pp-sc-wrap,
body.light-theme .pp-sc-wrap { background: #f0f0f0 !important; }
body.light-theme .pp-sc-group { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .pp-sc-group-hdr { background: #f5f5f5 !important; border-color: rgba(0,0,0,.08) !important; color: #444 !important; }
body.light-theme .pp-sc-row { background: #ffffff !important; border-color: rgba(0,0,0,.06) !important; }
body.light-theme .pp-sc-row:hover { background: #fafafa !important; }
body.light-theme .pp-sc-tnm { color: #111 !important; }
body.light-theme .pp-sc-sc { color: #111 !important; }
body.light-theme .pp-sc-time { color: #555 !important; }
body.light-theme .pp-sc-lg { color: #888 !important; }
body.light-theme .pp-sc-date-tabs { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-sc-date-tab { background: #eee !important; color: #555 !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-sc-date-tab.active,
body.light-theme .pp-sc-date-tab.pp-date-active { background: #e8192c !important; color: #fff !important; }

/* ── Play page ── */
body.light-theme .play-hero { background: #f0f0f0 !important; }
body.light-theme .play-hero h1 { color: #111 !important; }
body.light-theme .play-hero p { color: #555 !important; }
body.light-theme .play-hero-tag { background: rgba(232,25,44,.08) !important; border-color: rgba(232,25,44,.25) !important; color: #e8192c !important; }
body.light-theme .games-section { background: #f0f0f0 !important; }
body.light-theme .game-card { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .game-card:hover { border-color: rgba(232,25,44,.3) !important; }
body.light-theme .game-card h2 { color: #111 !important; }
body.light-theme .game-card p { color: #555 !important; }
body.light-theme .gc-tag-outline { border-color: rgba(0,0,0,.2) !important; color: #555 !important; }
body.light-theme .gc-pill { border-color: rgba(0,0,0,.15) !important; color: #555 !important; }
body.light-theme .game-card-btn:not(.red) { background: #111 !important; color: #fff !important; }
body.light-theme .bw-game-tile { background: #ffffff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .bw-game-tile h4 { color: #111 !important; }
body.light-theme .bw-game-tile p { color: #555 !important; }
body.light-theme #bw-games-container { background: #f5f5f5 !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .game-embed-section { background: #f5f5f5 !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .game-embed-header h3 { color: #111 !important; }

/* ── Home page sections ── */
body.light-theme #pp-highlights-section,
body.light-theme .pp-highlights-wrap { background: #f0f0f0 !important; }
body.light-theme .hl-card { background: #ffffff !important; border: 1px solid rgba(0,0,0,.08) !important; }
body.light-theme .hl-card:hover { border-color: rgba(232,25,44,.3) !important; }
body.light-theme .hl-title { color: #111 !important; }
body.light-theme .hl-ch { color: #777 !important; }
body.light-theme #pp-wl-section { background: #f0f0f0 !important; }

/* ── Generic dark containers overrides ── */
body.light-theme [style*="background:#0d0d0d"],
body.light-theme [style*="background: #0d0d0d"],
body.light-theme [style*="background:#111"],
body.light-theme [style*="background: #111"],
body.light-theme [style*="background:#0a0a0a"],
body.light-theme [style*="background: #0a0a0a"] { background: #f5f5f5 !important; }
body.light-theme [style*="color:#777"],
body.light-theme [style*="color: #777"],
body.light-theme [style*="color:#666"],
body.light-theme [style*="color: #666"],
body.light-theme [style*="color:#aaa"],
body.light-theme [style*="color: #aaa"],
body.light-theme [style*="color:#555"],
body.light-theme [style*="color: #555"] { color: #555 !important; }
body.light-theme [style*="color:#fff"],
body.light-theme [style*="color: #fff"] { color: #111 !important; }

/* ── Twitframe / social widget container ── */
body.light-theme #pp-lg-social-feed { background: #ffffff !important; border-radius: 12px !important; }
body.light-theme #pp-lg-sec-updates { background: transparent !important; }

/* ── Watch page header/banners ── */
body.light-theme #pp-wl-hero,
body.light-theme .pp-wl-hero { filter: brightness(.92) !important; }
body.light-theme #pp-wl-section-hdr { background: #f0f0f0 !important; }
body.light-theme .pp-wl-cat-tab { background: #eee !important; color: #555 !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-wl-cat-tab.active { background: #e8192c !important; color: #fff !important; }

/* ── Match detail modal ── */
body.light-theme .pp-md-wrap { background: #ffffff !important; color: #111 !important; }
body.light-theme .pp-md-bar { background: #f5f5f5 !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-md-title { color: #111 !important; }
body.light-theme .pp-md-close { background: rgba(0,0,0,.07) !important; color: #333 !important; }
body.light-theme .pp-md-slbl { color: #777 !important; }
body.light-theme .pp-md-sv { color: #111 !important; }

/* ── Ensure text in dark style= inline attrs render correctly ── */
body.light-theme .pp-section-hdr span,
body.light-theme .pp-sh-title { color: #111 !important; }
body.light-theme .pp-sh-bar { background: #e8192c !important; }

/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Big Fix Batch May 2026
   ═══════════════════════════════════════════════════════════════ */

/* Banner (hero slider) full-width color in light mode */
body.light-theme #pp-hero { background: #e0e0e0 !important; }
body.light-theme .pp-slide-overlay { background: linear-gradient(90deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.1) 50%, transparent 100%) !important; }
body.light-theme .pp-slide-overlay-bottom { background: linear-gradient(to top, rgba(240,240,240,.6) 0%, transparent 50%) !important; }
body.light-theme .pp-slide-title { color: #111 !important; text-shadow: 0 1px 4px rgba(255,255,255,.6) !important; }
body.light-theme .pp-slide-sub { color: rgba(0,0,0,.7) !important; }

/* Logo in banner: invert to dark */
body.light-theme .pp-slide .pp-logo img { filter: invert(1); }

/* Scores page — ensure white background throughout */
body.light-theme #pp-scores { background: #f0f0f0 !important; }
body.light-theme .pp-ls-lg { background: #ffffff !important; border: 1px solid rgba(0,0,0,.07) !important; }
body.light-theme .pp-ls-lh { background: #f5f5f5 !important; }
body.light-theme .pp-ls-row { background: transparent !important; }
body.light-theme .pp-ls-row:hover { background: #f0f0f0 !important; }
body.light-theme .pp-ls-tnm,
body.light-theme .pp-ls-lnm,
body.light-theme .pp-ls-cnm { color: #111 !important; }
body.light-theme .pp-ls-ns { color: #555 !important; }
body.light-theme .pp-ls-datenav { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .pp-ls-datenav button { color: #333 !important; background: #f5f5f5 !important; }
body.light-theme .pp-ls-datenav button.active { background: #e8192c !important; color: #fff !important; }

/* Games Hub (play.html) — fix black-on-black text in light mode */
body.light-theme .gh-tab-bar { background: #f0f0f0 !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .gh-tab { color: #555 !important; }
body.light-theme .gh-tab.active { color: #e8192c !important; border-color: #e8192c !important; }
body.light-theme .gh-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .gh-card-title { color: #111 !important; }
body.light-theme .gh-card-sub { color: #666 !important; }
body.light-theme .gh-card-meta { color: #555 !important; }
body.light-theme .gh-member-name { color: #333 !important; }
body.light-theme .gh-member-pts { color: #555 !important; }
body.light-theme .gh-member-rank { color: #666 !important; }
body.light-theme .gh-h2h-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .gh-h2h-vs { color: #111 !important; }
body.light-theme .gh-h2h-score { color: #555 !important; }
body.light-theme .gh-leaderboard-row { background: transparent !important; color: #111 !important; }
body.light-theme .gh-leaderboard-row:hover { background: #f5f5f5 !important; }
body.light-theme .gh-player-modal-box { background: #fff !important; border-color: rgba(0,0,0,.1) !important; }
body.light-theme .gh-form-row input { background: #f5f5f5 !important; color: #111 !important; border-color: rgba(0,0,0,.15) !important; }
body.light-theme .gh-spin-ring { border-color: rgba(0,0,0,.12) !important; }
body.light-theme .gh-quiz-opt { background: #f5f5f5 !important; border-color: rgba(0,0,0,.12) !important; color: #111 !important; }
body.light-theme .gh-quiz-opt:hover:not(:disabled) { background: #eee !important; }

/* My PRO banner — keep dark always for readability */
body.light-theme .mp-hero-banner { background: #07080f !important; }
body.light-theme .mp-hb-base { background: linear-gradient(135deg,#07080f 0%,#0d1023 60%,#07080f 100%) !important; }
body.light-theme .mp-hb-bottom { background: linear-gradient(to top,#07080f,transparent) !important; }
body.light-theme .mp-hero-banner .mp-hb-name,
body.light-theme .mp-hero-banner .mp-hb-handle,
body.light-theme .mp-hero-banner .mp-hb-badge,
body.light-theme .mp-hero-banner .mp-score-card { color: inherit !important; }
/* Rest of mypro page body */
body.light-theme .mp-page { background: #f0f0f0 !important; }
body.light-theme .mp-stat-card { background: #ffffff !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .mp-stat-label { color: #666 !important; }
body.light-theme .mp-stat-val { color: #111 !important; }
body.light-theme .mp-section-title { color: #111 !important; }
body.light-theme .mp-team-badge { background: #fff !important; border-color: rgba(0,0,0,.08) !important; }
body.light-theme .mp-team-name { color: #111 !important; }
body.light-theme .mp-settings-card { background: #fff !important; }
body.light-theme .mp-settings-row { border-color: rgba(0,0,0,.06) !important; }
body.light-theme .mp-settings-label { color: #555 !important; }
body.light-theme .mp-settings-val { color: #111 !important; }