/* ═══════════════════════════════════════════════════════
   HAZA SPORTS PRO — SAUDI ARENA Unified CSS
   All plugin pages · Light-first · Dark mode · RTL
   ═══════════════════════════════════════════════════════ */

/* ═══ 1. SHARED BASE (League Page = most complete) ═══ */
/* ═══ SAUDI ARENA — Design Tokens (same as homepage) ═══ */
:root{
--bg:#f5f7fb;--s-low:#eef3f8;--s-cont:#f3f7fb;--s-high:#ffffff;--s-top:#ffffff;
--on-s:#0f172a;--on-s-v:#61758a;--outline:#dbe5ef;
--pri:#0ea86b;--pri-c:rgba(14,168,107,.10);--on-pri:#ffffff;
--sec:#d89b2b;--sec-c:#fff3d6;
--err:#dc2626;--err-c:#fee2e2;
--shadow:0 8px 24px rgba(15,23,42,.05);--shadow-lg:0 18px 38px rgba(15,23,42,.10);
--r:16px;--r-lg:20px;--r-xl:24px;
}
html.dark,html.dark-mode,html[data-theme="dark"]{
--bg:#0f1724;--s-low:#162132;--s-cont:#182436;--s-high:#151f2f;--s-top:#1b283a;
--on-s:#e9f0f8;--on-s-v:#98a8bc;--outline:#273246;
--pri:#19b97a;--pri-c:rgba(25,185,122,.12);--on-pri:#052516;
--sec:#f2b24a;--sec-c:rgba(242,178,74,.14);
--err:#f87171;--err-c:rgba(248,113,113,.12);
--shadow:0 14px 34px rgba(2,6,23,.30);--shadow-lg:0 24px 50px rgba(2,6,23,.42);
}
/* Global resets handled by theme — plugin scopes to .hsp2-arena-root */
.hsp2-arena-root,.hsp2-arena-root *{box-sizing:border-box}
.hsp2-arena-root a{color:inherit;text-decoration:none}
.hsp2-arena-root img{display:block;max-width:100%;object-fit:cover}
.hsp2-arena-root .material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400;direction:ltr;line-height:1}
.no-sb::-webkit-scrollbar{display:none}.no-sb{scrollbar-width:none}
.wrap{max-width:1400px;margin:0 auto;padding:0 16px}
@media(min-width:768px){.wrap{padding:0 24px}}
.fl{font-family:'Lexend','Almarai',sans-serif}
/* Header + .page padding handled by theme arena.css + bridge.css */

/* ═══ LEAGUE HERO ═══ */
.lg-hero{background:var(--s-low);padding:24px 0;margin-bottom:8px}
.lg-hero-in{display:flex;align-items:center;gap:16px}
.lg-hero-logo{width:56px;height:56px;object-fit:contain;flex-shrink:0}
@media(min-width:768px){.lg-hero-logo{width:72px;height:72px}}
.lg-hero-info h1{font-size:24px;font-weight:900}
@media(min-width:768px){.lg-hero-info h1{font-size:32px}}
.lg-hero-info p{font-size:13px;color:var(--on-s-v);font-weight:700}
.lg-hero-meta{display:flex;gap:10px;margin-top:6px}
.lg-hero-tag{font-size:11px;font-weight:800;padding:3px 10px;border-radius:8px;background:var(--pri-c);color:var(--pri)}

/* ═══ SECTION TABS ═══ */
.lg-tabs{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:2px solid var(--s-cont);margin-bottom:24px;position:sticky;top:60px;background:var(--bg);z-index:50;transition:background .3s}
@media(min-width:768px){.lg-tabs{top:68px}}
.lg-tab{flex-shrink:0;padding:12px 18px;font-size:14px;font-weight:800;color:var(--on-s-v);cursor:pointer;border-bottom:3px solid transparent;transition:.2s;white-space:nowrap}
.lg-tab:hover{color:var(--on-s)}
.lg-tab.on{color:var(--pri);border-bottom-color:var(--pri)}

/* ═══ SEC HEAD ═══ */
.sec-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.sec-t{font-size:22px;font-weight:900;display:flex;align-items:center;gap:10px}
.sec-t .material-symbols-outlined{color:var(--pri);font-size:24px}
.sec-link{font-size:13px;font-weight:800;color:var(--pri)}
.sec{margin-bottom:32px;scroll-margin-top:120px}

/* ═══ STANDINGS TABLE ═══ */
.st-card{background:var(--s-high);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden}
.st-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.st-tbl{width:100%;border-collapse:collapse;min-width:580px}
.st-tbl th{font-size:11px;font-weight:800;color:var(--on-s-v);text-transform:uppercase;letter-spacing:.5px;padding:14px 8px;text-align:center;background:var(--s-low)}
.st-tbl th:nth-child(2){text-align:right}
.st-tbl td{padding:14px 8px;font-size:14px;font-weight:700;text-align:center;border-bottom:1px solid rgba(0,0,0,.03);transition:.15s}
html.dark .st-tbl td{border-bottom-color:rgba(255,255,255,.03)}
.st-tbl tr:hover td{background:rgba(0,0,0,.01)}
html.dark .st-tbl tr:hover td{background:rgba(255,255,255,.02)}
.st-tbl tr:last-child td{border-bottom:none}
.st-team{display:flex;align-items:center;gap:10px;text-align:right}
.st-team img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.st-team span{font-weight:900;font-size:15px}
/* Rank circles */
.st-rank{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:11px;font-weight:900;margin:0 auto}
.st-rank-1{background:var(--pri);color:#fff}.st-rank-2,.st-rank-3{border:2px solid var(--pri);color:var(--pri)}
.st-rank-dn{color:var(--err)}
/* Points */
.st-pts{font-family:'Lexend';font-size:18px;font-weight:900;color:var(--pri)}
.st-pts-dn{color:var(--err)}
/* Row highlights */
.st-row-top{background:var(--pri-c)}
html.dark .st-row-top{background:rgba(128,217,150,.04)}
.st-row-dn{background:var(--err-c)}
html.dark .st-row-dn{background:rgba(255,180,171,.04)}
/* Goal diff */
.st-gd-pos{color:var(--pri)}.st-gd-neg{color:var(--err)}

/* ═══ STATS CENTER ═══ */
.stats-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:768px){.stats-grid{grid-template-columns:1fr 1fr 1fr}}

/* Scorers Card (featured) */
.sc-card{background:var(--s-high);border-radius:var(--r-xl);padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
@media(min-width:768px){.sc-card.feat{grid-column:1/-1}}
.sc-glow{position:absolute;top:-40px;right:-40px;width:140px;height:140px;background:rgba(3,109,54,.06);border-radius:50%;filter:blur(40px);transition:.5s}
html.dark .sc-glow{background:rgba(128,217,150,.08)}
.sc-card:hover .sc-glow{transform:scale(1.5)}
.sc-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;position:relative;z-index:1}
.sc-head .material-symbols-outlined{font-size:24px;color:var(--pri)}
.sc-head h3{font-size:18px;font-weight:900}

/* Scorer rows */
.sc-row{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--s-low);border-radius:12px;margin-bottom:8px;position:relative;z-index:1;transition:.15s}
.sc-row:hover{background:var(--s-cont)}
.sc-row.dim{opacity:.7}
.sc-pos{font-family:'Lexend';font-size:14px;font-weight:800;color:var(--on-s-v);min-width:20px;text-align:center}
.sc-row:first-of-type .sc-pos{color:var(--sec)}
.sc-photo{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;border:2px solid var(--s-cont)}
.sc-row:first-of-type .sc-photo{border-color:var(--pri)}
.sc-info{flex:1;min-width:0}
.sc-name{font-size:14px;font-weight:800;display:block}
.sc-club{font-size:11px;color:var(--on-s-v)}
.sc-val{font-family:'Lexend';font-size:22px;font-weight:900;color:var(--pri);min-width:32px;text-align:center}
.sc-val.sec{color:var(--sec)}
.sc-val.dim{color:var(--on-s);font-size:18px}

/* Full list button */
.sc-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:12px;margin-top:12px;background:var(--s-low);border:none;border-radius:12px;font-size:13px;font-weight:800;color:var(--pri);cursor:pointer;font-family:inherit;transition:.2s}
.sc-btn:hover{background:var(--s-cont)}

/* ═══ NEWS ═══ */
.news-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:600px){.news-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.news-grid{grid-template-columns:1fr 1fr 1fr}}
.news-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;height:300px;display:block}
@media(min-width:600px){.news-hero{grid-column:1/-1;height:380px}}
.news-hero img{position:absolute;inset:0;width:100%;height:100%;transition:.6s}
.news-hero:hover img{transform:scale(1.04)}
.news-hero-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(2,6,23,.76) 0%,rgba(2,6,23,.18) 60%,transparent 100%);display:flex;align-items:flex-end;padding:20px}
@media(min-width:768px){.news-hero-ov{padding:28px}}
.news-hero h3{font-size:20px;font-weight:900;color:#fff;line-height:1.55}
@media(min-width:768px){.news-hero h3{font-size:26px}}

.news-card{display:flex;gap:14px;background:var(--s-high);border-radius:var(--r);padding:12px;transition:.2s;box-shadow:var(--shadow)}
.news-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.news-card-img{width:90px;height:75px;border-radius:12px;overflow:hidden;flex-shrink:0}
.news-card-img img{width:100%;height:100%}
.news-card-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.news-card-body h4{font-size:14px;font-weight:800;line-height:1.55}
.news-card-body span{font-size:10px;color:var(--on-s-v);margin-top:4px}

/* ═══ MATCHES — horizontal scroll ═══ */
.mx-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}
.mx-track::-webkit-scrollbar{display:none}.mx-track{scrollbar-width:none}
.mx-card{flex-shrink:0;width:260px;scroll-snap-align:start;background:var(--s-high);border-radius:var(--r-xl);padding:18px;box-shadow:var(--shadow);transition:.2s;border:1px solid transparent}
@media(min-width:768px){.mx-card{width:280px}}
.mx-card:hover{transform:translateY(-3px);border-color:var(--pri);box-shadow:var(--shadow-lg)}
.mx-card.live{border-color:var(--pri);background:var(--pri-c)}
html.dark .mx-card.live{background:rgba(128,217,150,.05)}
.mx-top{display:flex;justify-content:space-between;font-size:11px;font-weight:800;color:var(--on-s-v);margin-bottom:14px}
.mx-live{color:var(--pri);display:flex;align-items:center;gap:4px}
.mx-live-dot{width:6px;height:6px;border-radius:50%;background:var(--pri);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.mx-teams{display:flex;justify-content:space-between;align-items:center}
.mx-team{display:flex;flex-direction:column;align-items:center;gap:6px;width:35%}
.mx-team img{width:44px;height:44px;object-fit:contain}
.mx-team span{font-size:13px;font-weight:900;text-align:center}
.mx-mid{text-align:center;flex:1}
.mx-score{font-family:'Lexend';font-size:28px;font-weight:900;direction:ltr}
.mx-score.live-sc{color:var(--pri)}
.mx-vs{font-family:'Lexend';font-size:18px;font-weight:800;color:var(--on-s-v)}
.mx-time{font-size:10px;color:var(--on-s-v);margin-top:4px}

/* ═══ BOTTOM NAV (mobile only) ═══ */
.bnav{position:fixed;bottom:0;left:0;width:100%;z-index:100;background:var(--s-high);border-top:1px solid rgba(0,0,0,.04);padding:8px 16px 20px;display:flex;justify-content:space-around;align-items:center;box-shadow:0 -4px 16px rgba(0,0,0,.04)}
html.dark .bnav{border-top-color:rgba(255,255,255,.03);box-shadow:0 -4px 24px rgba(0,0,0,.3)}
@media(min-width:992px){.bnav{display:none}}
.bnav-item{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--on-s-v);font-size:10px;font-weight:800;opacity:.5;transition:.2s;cursor:pointer;padding:4px 12px;border-radius:12px}
.bnav-item:hover{opacity:.8}
.bnav-item.on{opacity:1;color:var(--pri);background:var(--pri-c)}
html.dark .bnav-item.on{background:rgba(128,217,150,.1)}
.bnav-item .material-symbols-outlined{font-size:22px}

/* ═══ FOOTER (same as homepage — desktop only) ═══ */
.ftr{background:var(--s-low);padding:40px 24px;margin-top:48px;transition:background .3s}
@media(max-width:991px){.ftr{display:none}}
.ftr-in{max-width:1400px;margin:0 auto}
.ftr-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.ftr-brand .logo{font-size:24px;margin-bottom:12px;display:block}
.ftr-brand p{font-size:13px;color:var(--on-s-v);line-height:1.7;margin-bottom:16px}
.ftr-col h5{font-size:14px;font-weight:800;margin-bottom:12px}.ftr-col a{display:block;font-size:13px;color:var(--on-s-v);padding:5px 0;font-weight:600;transition:.15s}.ftr-col a:hover{color:var(--pri)}
.ftr-bottom{text-align:center;padding-top:20px;border-top:1px dashed rgba(0,0,0,.06)}
html.dark .ftr-bottom{border-top-color:rgba(255,255,255,.04)}
.ftr-bottom span{font-size:12px;color:var(--on-s-v)}