/* ملف الأنماط المشترك للموقع العام — مُحمَّل كملف خارجي قابل للكاش عبر
   المتصفح لكل الصفحات الثمانية بدل تكراره inline في كل استجابة HTML. */
:root{
  --bg:#030F2E; --bg-top:#07173F;
  --card:#0A1D4E; --card-light:#0D2258; --card-dark:#081840;
  --primary:#1E4FD8; --primary-bright:#2E63E8; --primary-deep:#0F2E8F; --royal-dark:#041333;
  --gold:#D7B566; --gold-bright:#E3C57E; --gold-deep:#B8913C; --gold-text:#4A3510;
  --text:#FFFFFF; --text2:#9FB0D8; --text3:#6E7FA8;
  --success:#22C55E; --danger:#E23636; --live:#E0263C;
  --stroke:rgba(255,255,255,.08); --stroke-bright:rgba(255,255,255,.12);
  --r-card:24px; --r-row:20px; --r-tile:16px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Tajawal',sans-serif; color:var(--text); background-color:var(--bg); min-height:100vh; overflow-x:hidden; display:flex; flex-direction:column; }
main{ flex:1; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
section{ padding:64px 0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
/* عناصر Grid/Flex لا تتقلّص تلقائياً أصغر من محتواها الجوهري في CSS —
   بلا هذا، نص طويل غير قابل للف يدفع العمود (وبالتالي الصفحة) أعرض من
   الشاشة على الجوال فيُقصّ بصرياً بدل أن يلتف. */
.grid-2 > *, .grid-3 > *, .grid-4 > *,
.container > *, section > .container{ min-width:0; }

.kicker{ display:inline-flex; align-items:center; gap:10px; font-size:12.5px; font-weight:800; letter-spacing:.5px; color:var(--gold-bright); margin-bottom:10px; }
.kicker::before{ content:''; width:26px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--gold),transparent); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
.section-title{ font-size:28px; font-weight:800; line-height:1.3; }
.section-sub{ font-size:14px; color:var(--text2); margin-top:6px; max-width:560px; line-height:1.7; }
.section-link{ flex-shrink:0; font-size:13px; font-weight:700; color:var(--text2); border:1px solid var(--stroke-bright); border-radius:999px; padding:9px 20px; transition:.2s; }
.section-link:hover{ color:var(--text); border-color:var(--primary-bright); background:rgba(46,99,232,.12); }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 30px; border-radius:999px; font-family:'Tajawal'; font-size:15px; font-weight:700; color:var(--text); cursor:pointer; border:none; transition:.25s; }
.btn-primary{ background:linear-gradient(225deg,var(--primary-bright),var(--primary)); box-shadow:0 10px 30px rgba(30,79,216,.4), inset 0 1px 0 rgba(255,255,255,.18); }
.btn-primary:hover{ filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 14px 36px rgba(30,79,216,.5); }
.btn-gold{ background:linear-gradient(225deg,var(--gold-bright),var(--gold) 50%,var(--gold-deep)); color:var(--gold-text); box-shadow:0 10px 30px rgba(215,181,102,.28), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-gold:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.04); border:1px solid var(--stroke-bright); backdrop-filter:blur(6px); }
.btn-ghost:hover{ border-color:var(--primary-bright); background:rgba(46,99,232,.14); transform:translateY(-2px); }
.chip{ display:inline-flex; align-items:center; height:40px; padding:0 20px; border-radius:999px; font-size:13px; font-weight:500; color:var(--text2); background:var(--card); border:1px solid var(--stroke); }
.chip.active{ background:var(--primary); color:var(--text); font-weight:700; border-color:transparent; }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal{ opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- Navbar ---------- */
header{ position:sticky; top:0; z-index:50; background:rgba(3,15,46,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--stroke); }
.nav{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.nav-brand{ display:flex; align-items:center; gap:12px; }
.nav-brand img{ width:46px; height:46px; object-fit:contain; filter:drop-shadow(0 2px 10px rgba(46,99,232,.5)); }
.nav-brand b{ font-size:17px; font-weight:800; }
.nav-brand small{ display:block; font-size:11px; color:var(--gold); font-weight:500; }
.nav-links{ display:flex; gap:2px; list-style:none; }
.nav-links a{ font-size:14px; font-weight:500; color:var(--text2); padding:9px 15px; border-radius:999px; transition:.2s; }
.nav-links a:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.nav-links a.active{ color:var(--text); background:rgba(46,99,232,.22); font-weight:700; }
.nav-cta{ height:44px; padding:0 24px; font-size:13.5px; }
.nav-toggle{ display:none; background:none; border:1px solid var(--stroke-bright); color:var(--text); border-radius:12px; width:44px; height:44px; font-size:18px; cursor:pointer; }

/* ---------- Match cards (shared) ---------- */
.m-card{ background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-row); padding:22px; transition:.25s; }
.m-card:hover{ border-color:var(--stroke-bright); background:var(--card-light); transform:translateY(-3px); }
.m-card .comp{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--text3); margin-bottom:18px; gap:10px; }
.m-card .comp .res{ font-weight:800; border-radius:999px; padding:3px 13px; font-size:11px; flex-shrink:0; }
.res.win{ color:var(--success); background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.25); }
.res.loss{ color:var(--danger); background:rgba(226,54,54,.12); border:1px solid rgba(226,54,54,.25); }
.res.draw{ color:var(--text2); background:rgba(159,176,216,.1); border:1px solid rgba(159,176,216,.25); }
.res.up{ color:var(--primary-bright); background:rgba(46,99,232,.12); border:1px solid rgba(46,99,232,.3); }
.res.live{ color:#fff; background:var(--live); border:1px solid var(--live); }
.m-teams{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.m-team{ flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; font-size:13px; font-weight:700; text-align:center; min-width:0; }
.m-team span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.m-team img{ width:48px; height:48px; object-fit:contain; }
.m-score{ font-size:24px; font-weight:800; direction:ltr; text-align:center; flex-shrink:0; }
.m-score small{ font-size:11.5px; color:var(--text3); font-weight:500; display:block; }
.m-meta{ margin-top:18px; padding-top:14px; border-top:1px solid var(--stroke); display:flex; justify-content:space-between; font-size:11.5px; color:var(--text3); gap:10px; }
.form-dots{ display:flex; gap:6px; align-items:center; }
.form-dots i{ width:22px; height:22px; border-radius:50%; font-style:normal; font-size:10.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.form-dots i.w{ background:var(--success); box-shadow:0 0 10px rgba(34,197,94,.4); }
.form-dots i.l{ background:var(--danger); box-shadow:0 0 10px rgba(226,54,54,.4); }
.form-dots i.d{ background:var(--text3); }

/* ---------- News cards (shared) ---------- */
.news-tag{ display:inline-block; background:var(--primary); font-size:11.5px; font-weight:700; border-radius:999px; padding:5px 15px; box-shadow:0 4px 14px rgba(30,79,216,.4); }
.news-time{ font-size:11.5px; color:var(--text3); display:block; }
.news-card{ background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-row); overflow:hidden; transition:.25s; display:flex; flex-direction:column; }
.news-card:hover{ transform:translateY(-4px); border-color:var(--stroke-bright); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.news-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--card-light); }
.news-card .body{ padding:18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.news-card h3{ font-size:15.5px; font-weight:800; line-height:1.6; }
.news-card p{ font-size:12.5px; color:var(--text2); line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card .meta{ margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:11.5px; color:var(--text3); }

.news-feature{ position:relative; border-radius:var(--r-card); overflow:hidden; border:1px solid var(--stroke); min-height:440px; display:flex; align-items:flex-end; }
.news-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.6s; }
.news-feature:hover img{ transform:scale(1.04); }
.news-feature .ov{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 25%,rgba(3,15,46,.95)); }
.news-feature .body{ position:relative; padding:28px; max-width:720px; }
.news-feature h3{ font-size:22px; font-weight:800; line-height:1.5; margin:14px 0 8px; }
.news-feature p{ font-size:13.5px; color:var(--text2); line-height:1.75; }
.news-feature .news-time{ margin-top:12px; }
.form-strip{ display:flex; align-items:center; gap:14px; background:var(--card-dark); border:1px solid var(--stroke); border-radius:var(--r-row); padding:16px 22px; flex-wrap:wrap; }
.form-strip span{ font-size:12.5px; color:var(--text2); }

@media (max-width: 560px){
  .news-feature{ min-height:300px; }
  .news-feature .body{ padding:18px; }
  .news-feature h3{ font-size:18px; margin:10px 0 6px; }
  .form-strip{ padding:14px 18px; gap:10px; }
}

/* ---------- Player cards (shared) ---------- */
.player{ position:relative; background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-row); overflow:hidden; text-align:center; transition:.25s; }
.player:hover{ transform:translateY(-5px); border-color:rgba(46,99,232,.4); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.player .ph{ position:relative; background:linear-gradient(180deg,var(--card-light),var(--card-dark)); }
.player .ph::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(10,29,78,.9)); }
.player .ph img{ width:100%; aspect-ratio:1/1.02; object-fit:cover; object-position:top; }
.player .num{ position:absolute; top:12px; right:12px; z-index:1; background:linear-gradient(225deg,var(--primary-bright),var(--primary-deep)); font-size:14px; font-weight:800; min-width:36px; height:36px; padding:0 6px; border-radius:999px; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(30,79,216,.45); }
.player .body{ position:relative; margin-top:-26px; padding:0 12px 18px; }
.player b{ font-size:15px; font-weight:800; display:block; }
.player span{ font-size:12px; color:var(--gold-bright); }
.player small{ display:block; font-size:11px; color:var(--text3); margin-top:3px; }

/* ---------- Products (shared) ---------- */
.product{ background:var(--card); border:1px solid var(--stroke); border-radius:var(--r-row); overflow:hidden; transition:.25s; position:relative; }
.product:hover{ transform:translateY(-5px); border-color:rgba(215,181,102,.35); box-shadow:0 18px 40px rgba(0,0,0,.35); }
.product .new{ position:absolute; top:12px; right:12px; background:linear-gradient(225deg,var(--gold-bright),var(--gold)); color:var(--gold-text); font-size:11px; font-weight:800; border-radius:999px; padding:5px 13px; z-index:1; box-shadow:0 4px 14px rgba(215,181,102,.35); }
.product img{ width:100%; aspect-ratio:1; object-fit:cover; background:var(--card-light); }
.product .body{ padding:16px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.product b{ font-size:14px; font-weight:700; display:block; line-height:1.5; }
.product .price{ font-size:15px; font-weight:800; color:var(--gold-bright); white-space:nowrap; }
.product .price small{ font-size:11px; color:var(--text3); font-weight:500; display:block; text-align:left; }

/* ---------- Museum (shared) ---------- */
.museum-item{ position:relative; border-radius:var(--r-row); overflow:hidden; border:1px solid var(--stroke); aspect-ratio:16/10; display:flex; align-items:flex-end; }
.museum-item img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:.5s; }
.museum-item:hover img{ transform:scale(1.06); }
.museum-item .ov{ position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(3,15,46,.92)); }
.museum-item b{ position:relative; padding:18px; font-size:16px; font-weight:800; display:block; }
.museum-item small{ position:relative; padding:0 18px 16px; font-size:12px; color:var(--text2); display:block; }

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{ position:relative; padding:56px 0 48px; overflow:hidden; border-bottom:1px solid var(--stroke); background:linear-gradient(180deg,var(--bg-top),var(--bg)); }
.page-hero::before{ content:''; position:absolute; inset:0; background:url('/site/images/misc/stadium_strip.png') center/cover; opacity:.1; }
.page-hero .container{ position:relative; }
.page-hero h1{ font-size:clamp(28px, 4vw, 40px); font-weight:800; margin-bottom:8px; }
.page-hero p{ font-size:14.5px; color:var(--text2); max-width:620px; line-height:1.8; }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--text3); margin-bottom:14px; }
.breadcrumb a:hover{ color:var(--text); }

.live-strip{ display:inline-flex; align-items:center; gap:12px; background:rgba(224,38,60,.1); border:1px solid rgba(224,38,60,.35); border-radius:999px; padding:8px 10px 8px 20px; }
.live-dot{ display:inline-flex; align-items:center; gap:7px; background:var(--live); font-size:11.5px; font-weight:800; border-radius:999px; padding:6px 14px; box-shadow:0 0 18px rgba(224,38,60,.5); }
.live-dot i{ width:7px; height:7px; border-radius:50%; background:#fff; animation:pulse 1.2s infinite; }
@keyframes pulse{ 50%{ opacity:.25; } }
.live-strip b{ font-size:13.5px; font-weight:700; }
.live-strip span{ font-size:12px; color:var(--text2); }

.empty-state{ text-align:center; padding:48px 24px; background:var(--card-dark); border:1px dashed var(--stroke-bright); border-radius:var(--r-card); color:var(--text2); font-size:14.5px; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--stroke); background:var(--royal-dark); padding:52px 0 0; margin-top:24px; }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:32px; padding-bottom:38px; }
.foot-brand{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.foot-brand img{ width:50px; height:50px; object-fit:contain; }
.foot-brand b{ font-size:16px; font-weight:800; }
footer p{ font-size:13px; color:var(--text2); line-height:1.85; max-width:310px; }
footer h5{ font-size:14px; font-weight:800; margin-bottom:16px; color:var(--gold-bright); }
footer ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
footer ul a{ font-size:13px; color:var(--text2); transition:.2s; }
footer ul a:hover{ color:var(--text); }
.foot-bottom{ border-top:1px solid var(--stroke); padding:18px 0; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text3); flex-wrap:wrap; gap:8px; }
.made-by{ display:flex; align-items:center; gap:8px; }
.made-by a{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.1); color:var(--gold-bright); padding:5px 13px; border-radius:999px; font-size:11px; font-weight:800; transition:.3s; }
.made-by a:hover{ background:var(--gold-bright); color:var(--royal-dark); }
.made-by a code{ font-size:10px; font-weight:800; letter-spacing:-1px; }
.foot-social{ display:flex; flex-direction:row; gap:10px; }
.foot-social a{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); color:var(--text2); transition:.2s; }
.foot-social a:hover{ background:var(--gold-bright); color:var(--royal-dark); }
.foot-social svg{ width:18px; height:18px; fill:currentColor; }

/* ---------- Shared grids ---------- */
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }

@media (max-width: 1020px){
  .container{ padding:0 20px; }
  .grid-4{ grid-template-columns:repeat(3,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:28px 20px; }
  .nav{ height:68px; }
  .nav-links{ display:none; position:absolute; top:68px; right:0; left:0; background:rgba(3,15,46,.98); flex-direction:column; padding:16px 20px; gap:6px; border-bottom:1px solid var(--stroke); max-height:calc(100vh - 68px); overflow-y:auto; }
  .nav-links.open{ display:flex; }
  .nav-links a{ display:block; padding:13px 15px; }
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .nav-cta{ display:none; }
}
@media (max-width: 780px){
  section{ padding:48px 0; }
  .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); }
  .section-title{ font-size:23px; }
}
@media (max-width: 560px){
  .container{ padding:0 16px; }
  section{ padding:40px 0; }
  .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; }
  .section-head{ margin-bottom:22px; }
  .section-link{ padding:8px 16px; font-size:12.5px; }
  .foot-grid{ grid-template-columns:1fr; gap:30px; text-align:start; }
  .foot-bottom{ flex-direction:column; text-align:center; gap:12px; }
  footer p{ max-width:none; }
}
@media (max-width: 380px){
  .nav-brand small{ display:none; }
  .btn{ padding:0 22px; font-size:14px; }
}