:root{
  --pitch: #0F5132;
  --pitch-dark: #0B3D26;
  --ink: #14201A;
  --sub: #6B7A72;
  --line: #E6E9E4;
  --paper: #F4F5F2;
  --cream: #FFFFFF;
  --amber: #C2520E;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family:'Tajawal','Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- TOP BAR ---------- */
.topbar{
  background:#fff; border-bottom:1px solid var(--line);
}
.topbar-wrap{
  max-width: 1080px; margin:0 auto; padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between;
}
.icon-group{ display:flex; gap:10px; }
.icon-btn{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--paper); color: var(--ink); font-size:15px;
  border: 1px solid var(--line);
}
.icon-btn.dark{ background: var(--ink); color:#fff; border:none; }
.icon-btn.fb{ background:#e9edf5; color:#3b5998; border:none; }
.icon-btn.tw{ background:#e6f4fb; color:#1da1f2; border:none; }

.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{
  color: var(--ink); text-decoration:none; font-size:14px; font-weight:700; opacity:0.75;
}
.nav-links a:hover{ opacity:1; }
.lang-switch{
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px !important;
  font-size: 12px !important;
}

.brand-pill{
  background: var(--amber); color:#fff; border-radius:14px;
  padding: 10px 26px; text-align:center; line-height:1.3;
}
.brand-pill .ar{ font-size:17px; font-weight:800; }
.brand-pill .en{ font-size:11px; opacity:0.9; }

/* ---------- TABS ---------- */
.tabs-wrap{
  max-width:1080px; margin:22px auto 0; padding:0 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.tabs{ display:flex; gap:8px; }
.tab{
  padding:10px 20px; border-radius:10px; font-size:13px; font-weight:700;
  cursor:pointer; background:#fff; color:var(--ink); border:1px solid var(--line);
}
.tab.active{ background: var(--pitch); color:#fff; border-color:var(--pitch); }
.headline-pill{
  background: var(--amber); color:#fff; padding:10px 20px; border-radius:10px;
  font-size:13px; font-weight:700;
}

/* ---------- MATCH LIST ---------- */
.match-list{
  max-width:1080px; margin: 18px auto 50px; padding: 0 20px;
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.match-row{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.match-row:last-child{ border-bottom:none; }

.team{ display:flex; align-items:center; gap:14px; }
.team.right{ justify-content:flex-start; }
.team.left{ justify-content:flex-end; flex-direction:row-reverse; }
.badge{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:15px; color:#fff;
  border: 1px solid var(--line);
}
.team-name{ font-size:15px; font-weight:700; }

.center-col{ text-align:center; }
.center-col .time{ font-size:14px; font-weight:700; color:var(--ink); margin-bottom:8px; }
.status-pill{
  display:inline-block; background: var(--pitch-dark); color:#fff;
  font-size:11px; font-weight:700; padding:6px 16px; border-radius:8px;
}
.status-pill.live{ background: var(--amber); }

.match-foot{
  grid-column: 1 / -1;
  display:flex; justify-content:space-between; align-items:center;
  font-size:11px; color:var(--sub); padding-top:12px; margin-top:2px;
  border-top: 1px dashed var(--line);
}
.match-foot .comp{ display:flex; align-items:center; gap:6px; font-weight:600; }
.match-foot .chan{ display:flex; align-items:center; gap:6px; }

/* ---------- NEWS ---------- */
.news-wrap{ max-width:1080px; margin: 0 auto 60px; padding: 0 20px; }
.news-head{
  display:flex; justify-content:flex-end; margin-bottom:16px;
}
.news-head span{
  background:#fff; border:1px solid var(--line); padding:9px 18px; border-radius:10px;
  font-size:13px; font-weight:700;
}
.news-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
}
@media(max-width: 900px){ .news-grid{ grid-template-columns: repeat(2,1fr); } }
@media(max-width: 520px){ .news-grid{ grid-template-columns: 1fr; } }

.news-card{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.news-img{
  height:150px;
  background: linear-gradient(135deg, #E4EFE8, #CFE6D8);
}
.news-card h4{
  padding: 12px 14px 16px; font-size:13.5px; line-height:1.7; font-weight:700;
}

footer{
  border-top:1px solid var(--line); background:#fff;
  padding: 24px 20px 36px; text-align:center;
}
footer p{ font-size:12px; color:var(--sub); }

/* RTL/LTR tweaks handled automatically via html[dir] + flex-direction:row-reverse above */
html[dir="ltr"] .team.right{ justify-content:flex-start; flex-direction:row; }
html[dir="ltr"] .team.left{ justify-content:flex-end; flex-direction:row-reverse; }