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

/* ===== LOAD CUSTOM FONT ===== */
@font-face{
  font-family:"CalibriLight";
  src:url("/fonts/Calibri-Light.woff") format("woff");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}
/* ===== BODY ===== */
body{
  font-family:"CalibriLight", Segoe UI, Arial, sans-serif;
  background:#fff;
  color:#111;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  animation:fadeInPage .35s ease-out;
}
@keyframes fadeInPage{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
html[lang="ar"] body{
  font-family:Tajawal,Arial;
}


/* ===== CONTAINER ===== */
.container{
  max-width:1200px;
  width:100%;
  margin:5px auto 5px;
padding:  5px;
  flex:1;
}


/* ===== HEADER ===== */
.main-header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:1000;
border-bottom:2px solid #6a0dad;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:40px;
}
.logo img{height:35px}


nav{
  display:flex;
  gap:25px;
  align-items:center;
}
nav a{
font-weight:700;
  color:#6a0dad;
  text-decoration:none;
}
nav a:hover{
border-bottom:1px solid #6a0dad;
}


.lang-switch{
  font-weight:700;
}

.burger{
  display:none;
  font-size:24px;
  background:none;
  border:none;
  cursor:pointer;
  color:#6a0dad;
}


/* ===== MOBILE MENU ===== */
@media(max-width:900px){
  .burger{display:block}
  
}

/* ===== TITLES ===== */
.section-title{
  margin:28px 0 14px;
  font-size:20px;
  font-weight:800;
  color:#6a0dad;
  border-bottom:2px solid #6a0dad;
  padding-bottom:6px;
}

/* ===== CARDS ===== */
.card{
  background:#fff;
  border:1px solid #ccc;
  border-radius:12px;
  padding:2px;
  margin:6px 2px;
}

/* ===== TWO COLUMNS ===== */
.two-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
@media(max-width:900px){
  .two-cards{grid-template-columns:1fr}
}

/* ===== MEDIA GRID (FIXED) ===== */
.media-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(275px,1fr));
  gap:12px;
}
.media-item{
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:10px;
  border:1px solid #eee;
  background:#000;
}
.media-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ===== STATS ===== */
.stats-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}

/* ===== SPONSORS ===== */
.sponsors-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;
}
.sponsor{
  height:80px;
  border:1px solid #ddd;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fafafa;
  font-weight:700;
}

/* ===== TEAMS ===== */
.teams-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:14px;
}
@media(max-width:900px){
  .teams-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){
  .teams-grid{grid-template-columns:repeat(2,1fr)}
}
.team-card{
  text-align:center;
  border:1px solid #ddd;
  border-radius:12px;
  padding:10px;
  background:#fafafa;
}
.team-card img{
  width:72px;
  height:72px;
  object-fit:contain;
  margin-bottom:6px;
}
.team-name{
  font-weight:800;
  font-size:14px;
}

/* ===== FOOTER ===== */
footer{
  margin-top:auto;
  background:#6a0dad;
  color:#fff;
  text-align:center;
  padding:14px;
  font-weight:700;
}

/* ===== ADMIN TOP BAR ===== */
.admin-bar{
  margin:12px 0 18px;
  padding:12px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fafafa;
  border:1px solid #ddd;
  border-radius:10px;
}


.admin-title a{
  font-weight:900;
  font-size:18px;
  color:#6a0dad;
  text-decoration:none;
}

.admin-user{
  font-weight:700;
}

.admin-user a{
  color:#6a0dad;
  font-weight:900;
  text-decoration:none;
}
/* ===================================
   MATCH ROW HOVER EFFECT
=================================== */

.matches-table tr{
  transition:background .2s ease, transform .15s ease;
}

.matches-table tr:hover{
  background:#f5f0fb;
  transform:translateX(4px);
}
html[dir="rtl"] .matches-table tr:hover{
  transform:translateX(-4px);
}
/* ===================================
   STANDINGS ROW HOVER
=================================== */

.standings-row{
  transition:background .2s ease, transform .15s ease;
}

.standings-row:not(.header):hover{
  background:#f5f0fb;
  transform:translateX(4px);
}

html[dir="rtl"] .standings-row:not(.header):hover{
  transform:translateX(-4px);
}
.card{
  transition:transform .2s ease, box-shadow .2s ease;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
select{
  position:relative;
  transition:border-color .2s ease;
}

select:hover{
  border-bottom-color:#6a0dad;
}


button,
select,
input,
textarea {
  font-family: inherit;
}