/*
Theme Name: Soccer Portal Red Pro v2
Author: ChatGPT
Description: Modern football news portal — red/white, sticky header, breaking ticker+block, hero 1+2, Najnovije 2x2, Transfer zona, Transferi page, footer widgets/menu, prefooter CTA, AJAX subscribe, SEO schema, Customizer controls (logo sizes, ticker speed, footer logo size). Footer shows logo on the left.
Version: 2.0.0
Text Domain: soccer-portal-red
License: GPLv2 or later
*/

:root{
  --sp-red:#d20000;
  --sp-red-dark:#a80000;
  --sp-white:#ffffff;
  --sp-gray:#f6f6f6;
  --sp-text:#111111;
  --sp-muted:#6b7280;
  --container:1200px;
  --logo-size:56px;
  --logo-size-shrink:44px;
  --ticker-speed:22s;
  --footer-logo:28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:'Poppins', Arial, sans-serif; color:var(--sp-text); background:#fff; line-height:1.6}
.container{max-width:var(--container); margin:0 auto; padding:0 16px}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}

/* Topbar (Breaking ticker) */
.topbar{background:#b50000; color:#fff; font-size:13px}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0}
.ticker{overflow:hidden; white-space:nowrap; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);}
.ticker-track{display:inline-block; padding-left:100%; animation:ticker var(--ticker-speed) linear infinite}
.ticker a{color:#fff; margin-right:28px; font-weight:600}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* Header */
.header{background:var(--sp-red); color:#fff; position:sticky; top:0; z-index:100; box-shadow:0 2px 8px rgba(0,0,0,.12); transition:all .25s ease}
.header.shrink .header-inner{padding:8px 0}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:16px}
.brand{display:flex; align-items:center; gap:12px}
.brand .site-title{font-weight:800; letter-spacing:.4px; font-size:22px}
.brand .custom-logo{height:var(--logo-size); width:auto; transition:height .25s ease}
.header.shrink .brand .custom-logo{height:var(--logo-size-shrink)}
.header.shrink .brand .site-title{font-size:18px}
.nav{display:flex; align-items:center; gap:16px}
.nav ul, .nav li, .mobile-menu ul, .mobile-menu li{list-style:none; margin:0; padding:0}
.nav li{display:inline-flex}
.nav a{display:inline-flex; align-items:center; gap:6px; line-height:1; position:relative; color:#fff; opacity:.95; font-weight:700; padding:8px 10px; border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.12)}
.nav a::after{content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px; background:transparent; transition:background .2s, transform .2s; transform:scaleX(0)}
.nav a:hover::after, .nav .current-menu-item > a::after{background:#fff; transform:scaleX(1)}
.search-toggle{background:transparent; border:0; color:#fff; font-size:18px; cursor:pointer}
.searchbar{display:none; background:#fff; padding:10px 0; border-bottom:1px solid #eee}
.searchbar .container form{display:flex; gap:10px}
.searchbar input[type="search"]{flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:10px}
.searchbar button{padding:10px 14px; border-radius:10px; border:0; background:var(--sp-red); color:#fff; font-weight:800; cursor:pointer}
.hamburger{display:none; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer}
.mobile-menu{position:fixed; inset:0; background:var(--sp-red); color:#fff; transform:translateY(-100%); transition:transform .25s ease; z-index:120; padding:20px}
.mobile-menu.open{transform:translateY(0)}
.mobile-menu a{display:block; padding:14px 8px; font-size:20px; font-weight:700}
.mobile-menu .close{position:absolute; top:10px; right:14px; font-size:26px; background:transparent; border:0; color:#fff; cursor:pointer}

/* Breaking Block */
.breaking-wrap{margin:18px 0}
.breaking-block{position:relative; border-radius:14px; overflow:hidden; background:#000}
.breaking-block img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; filter:brightness(.85); position:relative; z-index:1}
.breaking-badge{position:absolute; top:12px; left:12px; background:var(--sp-red); color:#fff; padding:6px 10px; border-radius:999px; font-weight:800; font-size:12px; letter-spacing:.5px; z-index:3}
.breaking-content{position:absolute; left:0; right:0; bottom:0; padding:16px; color:#fff; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0)); z-index:2}
.breaking-title{font-size:clamp(20px,2.6vw,32px); font-weight:900; margin:0 0 6px}
.breaking-excerpt{opacity:.95; max-width:900px}

/* Hero */
.hero{margin:24px 0}
.hero-grid{display:grid; grid-template-columns:2fr 1fr; gap:16px}
.hero-main, .hero-side-item{position:relative; overflow:hidden; border-radius:14px; background:#000}
.hero-main img, .hero-side-item img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; filter:brightness(.85)}
.hero-badge{position:absolute; top:10px; left:10px; background:var(--sp-red); color:#fff; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:800}
.hero-title{position:absolute; left:0; right:0; bottom:0; padding:14px; color:#fff; font-size:clamp(18px,2.4vw,28px); font-weight:900; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero-side{display:grid; grid-template-rows:1fr 1fr; gap:16px}
.hero-side .hero-title{font-size:clamp(14px,1.6vw,18px)}

/* Sections & cards */
.section{margin:28px 0}
.section-title{font-size:20px; font-weight:900; border-left:4px solid var(--sp-red); padding-left:10px; margin:0 0 14px}
.grid-2x2{display:grid; grid-template-columns:repeat(2, 1fr); gap:16px}
.card{border-radius:12px; overflow:hidden; border:1px solid #eee; background:#fff}
.card-body{padding:12px}
.card-meta{color:var(--sp-muted); font-size:12px}
.card-title{font-size:16px; font-weight:900; margin:6px 0}
.card-title a{color:var(--sp-red)}
.card-title a:hover{text-decoration:underline}

/* Category block */
.cat-block{display:grid; grid-template-columns:2fr 1.2fr; gap:16px}
.cat-block .big{border-radius:12px; overflow:hidden; border:1px solid #eee; background:#fff}
.cat-block .big .card-body{padding:12px}
.cat-block .small-list .item{display:flex; gap:12px; padding:10px; border:1px solid #eee; border-radius:10px; margin-bottom:12px; background:#fff}
.cat-block .small-list img{width:120px; aspect-ratio:16/9; object-fit:cover; border-radius:8px}

/* Transfer zona */
.transfer-zone{margin:28px 0}
.transfer-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.transfer-tabs{display:flex; gap:8px; flex-wrap:wrap}
.transfer-tabs button{background:#fff; border:1px solid #eee; border-radius:999px; padding:6px 10px; cursor:pointer; font-weight:800}
.transfer-tabs button.active{background:var(--sp-red); color:#fff; border-color:var(--sp-red)}
.transfer-grid{display:grid; grid-template-columns:2fr 1.2fr; gap:16px}
.transfer-featured{border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff}
.transfer-featured img{width:100%; aspect-ratio:16/9; object-fit:cover}
.transfer-featured .body{padding:12px}
.transfer-list .item{display:flex; gap:12px; border:1px solid #eee; background:#fff; border-radius:12px; padding:10px; margin-bottom:12px}
.transfer-list .meta{font-size:12px; color:var(--sp-muted)}
.transfer-title{font-weight:900; margin:2px 0 4px}
.badge{display:inline-block; font-size:11px; padding:3px 8px; border-radius:999px; font-weight:900; letter-spacing:.3px}
.badge.sluzbeno{background:#16a34a; color:#fff}
.badge.pred{background:#2563eb; color:#fff}
.badge.glasina{background:#f59e0b; color:#111}
.badge.propalo{background:#9ca3af; color:#111}

/* Footer */
.prefooter{background:#161616; color:#fff; padding:16px 0; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.prefooter-inner{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.prefooter p{margin:0; font-weight:900}
.prefooter form{display:flex; gap:8px; align-items:center}
.prefooter input[type="email"]{padding:10px 12px; border-radius:10px; border:1px solid #333; background:#0f0f0f; color:#fff; min-width:240px}
.prefooter button{padding:10px 14px; border-radius:10px; border:0; background:var(--sp-red); color:#fff; font-weight:900; cursor:pointer}

.footer{background:#111; color:#ddd; padding:24px 0; margin-top:40px}
.footer-widgets{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-bottom:14px}
.footer .widget-title{color:#fff; font-weight:900; margin:0 0 10px}
.footer .menu{list-style:none; margin:0; padding:0}
.footer .menu li{margin:6px 0}
.footer .menu a{color:#ddd; opacity:.9}
.footer .menu a:hover{opacity:1; text-decoration:underline}
.subfooter{border-top:1px solid rgba(255,255,255,.06); margin-top:10px; padding-top:12px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.footer-brand{display:flex; align-items:center; gap:10px}
.footer-brand .custom-logo{height:var(--footer-logo); width:auto; display:block; filter:brightness(1.1)}
.footer-social a{color:#fff; opacity:.9; margin-right:10px}
.footer-social a:hover{opacity:1; text-decoration:underline}
.back-to-top{position:fixed; right:16px; bottom:16px; width:44px; height:44px; border-radius:999px; background:var(--sp-red); color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; z-index:200}
.back-to-top.show{opacity:1; pointer-events:auto}
.back-to-top:hover{transform:translateY(-2px)}

/* Responsive */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{grid-template-columns:1fr; grid-template-rows:auto}
  .grid-2x2{grid-template-columns:1fr}
  .header-inner{flex-wrap:wrap}
  .nav{display:none}
  .hamburger{display:block}
  .cat-block{grid-template-columns:1fr}
  .transfer-grid{grid-template-columns:1fr}
  .footer-widgets{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .footer-widgets{grid-template-columns:1fr}
  .prefooter-inner{justify-content:center; text-align:center}
  .prefooter form{width:100%; justify-content:center}
}


/* Sponsors row */
.sponsors{background:#111; border-top:1px solid rgba(255,255,255,.06); padding:12px 0}
.sponsors-inner{display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap}
.sponsor img{height:40px; width:auto; display:block}
.sponsors-inner.gray img{filter:grayscale(100%) opacity(.85)}
@media (max-width:600px){
  .sponsor img{height:32px}
}


/* Category Magazine layout */
.cat-header .cat-desc{color:var(--sp-muted)}
.category-hero{margin:24px 0}
.cat-top{display:grid; grid-template-columns:2fr 1fr; gap:16px}
.cat-top .big{position:relative; overflow:hidden; border-radius:14px; background:#000}
.cat-top .big img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; filter:brightness(.85)}
.cat-top .small-list{display:grid; grid-template-rows:repeat(3, 1fr); gap:16px}
.cat-top .small-list .item{position:relative; overflow:hidden; border-radius:12px; background:#000}
.cat-top .small-list img{width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; filter:brightness(.85)}
.category-hero .hero-title{position:absolute; left:0; right:0; bottom:0; padding:12px; color:#fff; font-weight:900; text-shadow:0 2px 8px rgba(0,0,0,.6)}
.category-hero .hero-title.small{font-size:clamp(14px,1.6vw,18px)}

/* Video section */
.video-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:16px}
.video-card{}
.video-thumb{position:relative; display:block; overflow:hidden; border-radius:12px}
.video-thumb img{width:100%; aspect-ratio:16/9; object-fit:cover; filter:brightness(.92)}
.video-thumb .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:rgba(210,0,0,.95); color:#fff; width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:18px; box-shadow:0 6px 18px rgba(0,0,0,.25)}

/* Responsive tweaks */
@media (max-width:900px){
  .cat-top{grid-template-columns:1fr}
  .cat-top .small-list{grid-template-columns:1fr 1fr; grid-template-rows:auto}
  .video-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .cat-top .small-list{grid-template-columns:1fr}
  .video-grid{grid-template-columns:1fr}
}


/* Auth forms */
.auth-wrap{max-width:560px; margin:24px auto}
.auth-card{border:1px solid #eee; border-radius:12px; background:#fff; overflow:hidden}
.auth-card .head{background:var(--sp-red); color:#fff; padding:12px 16px; font-weight:900}
.auth-card .body{padding:16px}
.auth-form{display:grid; gap:12px}
.auth-form label{font-weight:700; font-size:14px}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form select{width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:10px}
.auth-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.auth-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.auth-actions button{padding:10px 14px; border-radius:10px; border:0; background:var(--sp-red); color:#fff; font-weight:900; cursor:pointer}
.auth-note{font-size:13px; color:var(--sp-muted)}
.auth-error{color:#b91c1c; font-weight:700; font-size:14px}
.auth-success{color:#16a34a; font-weight:700; font-size:14px}
.auth-links{display:flex; justify-content:space-between; margin-top:6px; font-size:14px}

/* Header user nav */
.user-nav{display:flex; align-items:center; gap:10px}
.user-nav a.btn, .user-nav button.btn{background:#fff; color:var(--sp-red); border-radius:10px; padding:8px 12px; font-weight:900}
.user-nav .dropdown{position:relative}
.user-nav .dropdown-toggle{background:#fff; color:var(--sp-red); border-radius:10px; padding:8px 12px; font-weight:900; border:0; cursor:pointer}
.user-nav .dropdown-menu{position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid #eee; border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,.12); padding:8px; display:none; min-width:180px; z-index:150}
.user-nav .dropdown-menu a{display:block; padding:10px 12px; border-radius:8px}
.user-nav .dropdown-menu a:hover{background:#f7f7f7}
.user-nav .dropdown.open .dropdown-menu{display:block}


/* User avatar + inline links in header */
.user-nav{display:flex; align-items:center; gap:12px}
.user-chip{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); padding:6px 10px; border-radius:999px}
.user-chip img.avatar{width:28px; height:28px; border-radius:999px; display:block; border:2px solid rgba(255,255,255,.65)}
.user-links{display:flex; align-items:center; gap:8px}
.user-links a{background:#fff; color:var(--sp-red); border-radius:10px; padding:8px 12px; font-weight:900}
.user-links a:hover{opacity:.95}
@media (max-width:900px){
  .user-nav{display:none;}
  .mobile-auth{margin-top:10px; display:grid; gap:8px}
  .mobile-auth a{display:block; background:#fff; color:var(--sp-red); padding:10px 12px; border-radius:12px; font-weight:900; text-align:center}
}

/* ===== User dropdown (avatar) ===== */
.user-nav{display:flex; align-items:center; gap:12px}
.user-dd{position:relative}
.user-btn{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.12); color:#fff; border:0; border-radius:999px; padding:6px 10px; cursor:pointer}
.user-btn .avatar{width:28px; height:28px; border-radius:999px; border:2px solid rgba(255,255,255,.6)}
.user-btn .name{font-weight:900}
.user-btn .caret{transition:transform .2s ease; display:inline-block}
.user-dd.open .user-btn .caret{transform:rotate(180deg)}
.user-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:#fff; color:#111; border:1px solid #eee; border-radius:12px; box-shadow:0 12px 28px rgba(0,0,0,.18); padding:6px; z-index:160; opacity:0; transform:scale(.98); pointer-events:none; transition:opacity .16s ease, transform .16s ease}
.user-dd.open .user-menu{opacity:1; transform:scale(1); pointer-events:auto}
.user-menu a[role="menuitem"], .user-menu button[role="menuitem"]{display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:8px; font-weight:700; color:#111}
.user-menu a[role="menuitem"]:hover, .user-menu button[role="menuitem"]:hover{background:#f6f6f6}
@media (max-width:900px){
  .user-nav{display:none}
  .mobile-auth{margin-top:10px; display:grid; gap:8px}
  .mobile-auth a{display:block; background:#fff; color:var(--sp-red); padding:10px 12px; border-radius:12px; font-weight:900; text-align:center}
}

/* Safety: hide old inline user links if cached */
.user-links{display:none !important}

/* Safety: hide mobile-auth if cached */
.mobile-auth{display:none !important}


/* ===== Profile tabs UI ===== */
.profile-wrap{max-width:980px; margin:24px auto}
.profile-head{display:flex; align-items:center; gap:16px; margin-bottom:16px}
.profile-head .avatar{width:72px; height:72px; border-radius:999px; border:3px solid #fff; box-shadow:0 8px 20px rgba(0,0,0,.12); object-fit:cover}
.profile-head .meta{line-height:1.2}
.profile-head .meta .name{font-weight:900; font-size:20px}
.profile-head .meta .email{color:var(--sp-muted); font-size:14px}
.profile-actions{display:flex; gap:8px; flex-wrap:wrap}
.profile-actions .btn{background:#fff; color:var(--sp-red); border-radius:10px; padding:8px 12px; font-weight:900}
.tabs{display:flex; gap:8px; margin:12px 0 16px; border-bottom:1px solid #eee; flex-wrap:wrap}
.tabs a{padding:10px 12px; border-radius:10px 10px 0 0; font-weight:900; color:#666}
.tabs a.active{background:#fff; color:#111; border:1px solid #eee; border-bottom-color:#fff}
.tab-panel{display:none; border:1px solid #eee; border-radius:0 12px 12px 12px; background:#fff; padding:16px}
.tab-panel.active{display:block}
.tab-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:800px){ .tab-grid{grid-template-columns:1fr} }

/* Avatar control */
.avatar-ctrl{display:flex; align-items:center; gap:8px; margin-top:6px}
.avatar-ctrl .btn{background:var(--sp-red); color:#fff; border:0; padding:8px 12px; border-radius:10px; font-weight:900; cursor:pointer}
.avatar-ctrl .link{background:transparent; color:var(--sp-red); border:0; font-weight:900; cursor:pointer}

/* Bookmark button */
.card{ position: relative; }
.bm-btn{position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:#fff; color:#d00; border:1px solid #eee; cursor:pointer; font-size:18px; box-shadow:0 6px 18px rgba(0,0,0,.14)}
.bm-btn[aria-pressed="true"]{background:var(--sp-red); color:#fff; border-color:var(--sp-red)}
.bm-btn:hover{transform:translateY(-1px)}

/* Notification prefs */
.notif-opts{display:grid; gap:10px}
.notif-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

/* Sessions list */
.sessions{border:1px solid #eee; border-radius:12px; overflow:hidden}
.sessions table{width:100%; border-collapse:collapse}
.sessions th, .sessions td{padding:10px; border-bottom:1px solid #eee; text-align:left; font-size:14px}
.sessions tr:last-child td{border-bottom:0}


.mini-ticker a{color:#fff; text-decoration:none}
.mini-ticker a:hover{text-decoration:underline}

/* Badges */
.badges{display:flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.badge{display:inline-flex; align-items:center; gap:6px; background:#111; color:#fff; padding:4px 8px; border-radius:999px; font-size:12px; font-weight:900}
.badge.skaut{background:#2563eb}
.badge.ultras{background:#d00}

/* Ticker highlight for followed clubs */
.ticker .is-followed a{font-weight:900}
.ticker .is-followed::before{content:'•'; margin-right:6px; color:var(--sp-red)}


/* ===== Leagues UI ===== */
.leagues-wrap{max-width:980px; margin:24px auto}
.league-forms{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:800px){ .league-forms{grid-template-columns:1fr} }
.league-card{background:#fff; border:1px solid #eee; border-radius:12px; padding:16px}
.league-card h3{margin:0 0 10px 0}
.league-list{display:grid; gap:10px; margin-top:12px}
.league-table{border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff}
.league-table table{width:100%; border-collapse:collapse}
.league-table th,.league-table td{padding:10px; border-bottom:1px solid #eee; text-align:left}
.league-actions{display:flex; gap:8px; flex-wrap:wrap}
.btn-red{background:var(--sp-red); color:#fff; border:0; border-radius:10px; padding:8px 12px; font-weight:900; cursor:pointer}

/* Tipovi: streak */
.streak{display:flex; gap:8px; align-items:center; margin:8px 0}
.streak .tag{background:#111; color:#fff; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:900}
.streak .best{background:#d00}

/* Derby specijali */
.specials{display:grid; gap:8px; margin-top:6px}
.specials input[type="text"], .specials input[type="number"]{width:100%; padding:8px 10px; border:1px solid #ddd; border-radius:8px}

/* MOTM widget */
.motm{background:#fff; border:1px solid #eee; border-radius:12px; padding:16px; margin-top:16px}
.motm form{display:flex; gap:8px; flex-wrap:wrap}
.motm input[type="text"]{flex:1; padding:8px 10px; border:1px solid #ddd; border-radius:8px}
.motm button{padding:8px 12px; border-radius:10px; border:0; background:var(--sp-red); color:#fff; font-weight:900}
.motm .results{margin-top:10px}

/* Emoji reakcije */
.reactions{display:flex; gap:8px; align-items:center; margin:16px 0}
.reactions button{display:flex; gap:6px; align-items:center; padding:8px 10px; border:1px solid #eee; background:#fff; border-radius:999px; cursor:pointer}
.reactions .count{font-weight:900}


/* ===== Leaderboard UI ===== */
.lb-wrap{max-width:1000px; margin:24px auto}
.lb-hero{background:linear-gradient(90deg, var(--sp-red), #9b1111); color:#fff; border-radius:16px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.lb-hero .title{font-size:20px; font-weight:900}
.lb-pills{display:flex; gap:8px; flex-wrap:wrap}
.lb-pills button{background:#fff; color:var(--sp-red); border:0; border-radius:999px; padding:8px 12px; font-weight:900; cursor:pointer}
.lb-pills button.active{background:#111; color:#fff}
.lb-panel{display:none; margin-top:14px}
.lb-panel.active{display:block}
.lb-table{border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff}
.lb-table table{width:100%; border-collapse:collapse}
.lb-table th, .lb-table td{padding:10px; border-bottom:1px solid #eee; text-align:left}
.lb-me{background:#fff3f3}
.lb-note{opacity:.75; font-size:13px; margin-top:6px}

/* League table scope toggle */
.scope-toggle{display:flex; gap:6px; align-items:center; margin:8px 0}
.scope-toggle button{padding:6px 10px; border-radius:999px; border:1px solid #eee; background:#fff; cursor:pointer}
.scope-toggle button.active{background:var(--sp-red); color:#fff; border-color:var(--sp-red)}


/* ===== Fan zona ===== */
.fan-wrap{max-width:1100px; margin:24px auto}
.fan-hero{background:linear-gradient(90deg, var(--sp-red), #9b1111); color:#fff; border-radius:16px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.fan-hero .left{display:flex; align-items:center; gap:12px}
.fan-hero img{width:56px; height:56px; border-radius:999px; border:3px solid rgba(255,255,255,.85)}
.fan-hero .meta{line-height:1.1}
.fan-hero .name{font-weight:900; font-size:18px}
.fan-hero .stats{display:flex; gap:8px; flex-wrap:wrap}
.fan-hero .tag{background:#fff; color:var(--sp-red); border-radius:999px; padding:4px 10px; font-weight:900}
.fan-section{margin-top:18px}
.fan-section h2{margin-bottom:10px}
.fan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
@media (max-width:900px){ .fan-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .fan-grid{grid-template-columns:1fr} }


/* ===== Live text commentary ===== */
.spr-live{border:1px solid #eee; background:#fff; border-radius:14px; overflow:hidden; margin:16px 0}
.spr-live .live-bar{display:flex; gap:12px; align-items:center; justify-content:space-between; background:#111; color:#fff; padding:10px 12px}
.spr-live .teams{display:flex; gap:8px; align-items:center; font-weight:900}
.spr-live .score{font-size:20px; font-weight:900}
.spr-live .status{font-weight:900; letter-spacing:.03em}
.spr-live .status.live{color:#ff5a5a}
.spr-live .filters{display:flex; gap:6px; padding:8px 12px; flex-wrap:wrap; border-bottom:1px solid #eee; background:#fafafa}
.spr-live .filters button{border:1px solid #eee; background:#fff; border-radius:999px; padding:6px 10px; cursor:pointer}
.spr-live .filters button.active{background:var(--sp-red); color:#fff; border-color:var(--sp-red)}
.spr-live .timeline{max-height:520px; overflow:auto; padding:6px 4px}
.spr-live .ev{display:grid; grid-template-columns:64px 1fr; gap:8px; padding:8px 10px; border-bottom:1px solid #f2f2f2}
.spr-live .ev .min{font-weight:900; opacity:.8; text-align:right}
.spr-live .ev .txt{line-height:1.35}
.spr-live .ev .badge{display:inline-flex; align-items:center; gap:6px; background:#111; color:#fff; border-radius:999px; padding:2px 8px; font-size:12px; font-weight:900; margin-right:6px}
.spr-live .ev.goal .badge{background:#d00}
.spr-live .ev.cardY .badge{background:#eab308}
.spr-live .ev.cardR .badge{background:#ef4444}
.spr-live .ev.var .badge{background:#2563eb}
.spr-live .ev.key{background:#fff8f8}
.spr-live .foot{display:flex; justify-content:center; padding:8px}
.spr-live .go-live{display:inline-block; background:var(--sp-red); color:#fff; border-radius:999px; padding:6px 12px; font-weight:900; cursor:pointer}


/* === ChatGPT v8: Featured image full width + strict icon sizing on single.php === */

/* Featured image (single.php) */
.single-post img.wp-post-image,
.single img.wp-post-image,
.single-post .post-thumbnail img,
.single .post-thumbnail img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* ICONS — keep tiny, never full width */
/* Applies to common meta wrappers and anything with 'icon' or 'views' in its class name */
.single-post .entry-meta img,
.single-post .post-meta img,
.single-post .entry-footer img,
.single-post .post-info img,
.single-post .post-views img,
.single-post [class*="icon"] img,
.single-post [class*="views"] img,
.single-post .entry-meta svg,
.single-post .post-meta svg,
.single-post .entry-footer svg,
.single-post .post-info svg,
.single-post .post-views svg,
.single-post [class*="icon"] svg,
.single-post [class*="views"] svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex: 0 0 18px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* If icons are font-based */
.single-post .entry-meta .dashicons,
.single-post .post-meta .dashicons,
.single-post .entry-footer .dashicons,
.single-post .post-info .dashicons,
.single-post .post-views .dashicons,
.single-post .entry-meta i,
.single-post .post-meta i,
.single-post .entry-footer i,
.single-post .post-info i,
.single-post .post-views i,
.single-post [class*="icon"] i,
.single-post [class*="views"] i {
    font-size: 16px !important;
    line-height: 1 !important;
    width: 16px !important;
    height: 16px !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* If icons are background images on a span/i */
.single-post .entry-meta [class*="icon"],
.single-post .post-meta [class*="icon"],
.single-post .entry-footer [class*="icon"],
.single-post .post-info [class*="icon"],
.single-post .post-views [class*="icon"],
.single-post [class*="views"] {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center left !important;
}

/* MOBILE: slightly smaller */
@media (max-width: 768px) {
    .single-post .entry-meta img,
    .single-post .post-meta img,
    .single-post .entry-footer img,
    .single-post .post-info img,
    .single-post .post-views img,
    .single-post [class*="icon"] img,
    .single-post [class*="views"] img,
    .single-post .entry-meta svg,
    .single-post .post-meta svg,
    .single-post .entry-footer svg,
    .single-post .post-info svg,
    .single-post .post-views svg,
    .single-post [class*="icon"] svg,
    .single-post [class*="views"] svg {
        width: 14px !important;
        height: 14px !important;
        max-width: 14px !important;
        max-height: 14px !important;
        flex: 0 0 14px !important;
    }
}
/* === End v8 patch === */