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

html,body{
width:100%;
overflow-x:hidden;
}

body{
font-family:"Tajawal",sans-serif;
background:#f5f5f5;
color:#222;
}

/* ========== MATCH CARD ========== */

.match-card{
width:100%;
margin:10px 0;
padding:14px;
background:#fff;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
box-shadow:0 2px 8px rgba(0,0,0,.1);
border-radius:10px;
}

/* الفرق */

.match-card .team{
width:40%;
text-align:center;
}

.match-card .team img{
width:55px;
height:55px;
object-fit:contain;
margin-bottom:6px;
}

.match-card .team span{
font-weight:bold;
font-size:14px;
}

/* حالة المباراة */

.match-status{
width:20%;
text-align:center;
}

.status{
padding:6px 14px;
border-radius:20px;
font-size:12px;
font-weight:bold;
}

.status.live{background:#d60000;color:#fff;}
.status.soon{background:#eee;color:#000;}
.status.end{background:#555;color:#fff;}

/* معلومات المباراة */

.match-card .info{
width:100%;
margin-top:10px;
background:#0d6efd;
color:#fff;
padding:8px;
font-size:13px;
display:flex;
justify-content:center;
gap:8px;
border-radius:6px;
}

/* ========== SHARE BOX ========== */

.share-box{
background:#fff;
width:95%;
margin:20px auto;
padding:15px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,.1);
text-align:center;
}

.share-buttons{
display:flex;
justify-content:center;
gap:10px;
}

.share-btn{
padding:10px 18px;
border-radius:25px;
color:#fff;
font-weight:bold;
text-decoration:none;
}

.share-btn.facebook{background:#1877f2;}
.share-btn.whatsapp{background:#25d366;}
.share-btn.telegram{background:#0088cc;}

/* ========== SOCIAL BOXES ========== */

.facebook-page-box,
.youtube-page-box{
width:95%;
max-width:400px;
margin:25px auto;
padding:10px;
background:#fff;
border-radius:14px;
box-shadow:0 6px 15px rgba(0,0,0,.1);
text-align:center;
}

.youtube-page-box iframe{
width:100%;
height:500px;
border-radius:12px;
}

/* ========== CHANNELS ========== */

.channel-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:15px;
}

.channel-card{
background:#fff;
border-radius:12px;
padding:10px;
box-shadow:0 3px 10px rgba(0,0,0,.1);
text-align:center;
}

.channel-card img{
max-width:80px;
margin-bottom:10px;
}

.channel-card video{
width:100%;
border-radius:10px;
}

/* ========== UTILITIES ========== */

.empty,
.error{
text-align:center;
color:#777;
}

a,
a:visited,
a:hover,
a:active{
text-decoration:none!important;
}

/* ========== MOBILE ========== */

@media(max-width:768px){

.main-header{
padding:10px;
}

.main-header h2{
font-size:14px;
}

.menu-btn{
font-size:22px;
}

.match-card{
padding:10px;
}

.match-card .team img{
width:50px;
height:50px;
}

.match-card .team span{
font-size:13px;
}

}
/* ===== FIX TEAMS LAYOUT ===== */

.teams-box{
display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:10px;
width:100%;
padding:10px 0;
}

/* الفريق */

.team{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
flex:1;
}

/* شعار الفريق */

.team img{
width:60px;
height:60px;
object-fit:contain;
}

/* اسم الفريق */

.team h3{
font-size:13px;
margin-top:6px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

/* النتيجة */

.vs{
background:#e30613;
color:#fff;
padding:8px 14px;
border-radius:8px;
font-weight:bold;
font-size:16px;
}
.animated-title {
  font-size: 2.5rem;
  text-align: center;
  color: #ff4500;
  font-weight: bold;
  margin: 30px 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid #ff4500;
}

.animated-title span {
  display: inline-block;
  animation: typing 3s steps(40, end), blink 0.75s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink {
  0%, 50%, 100% { border-color: #ff4500; }
  25%, 75% { border-color: transparent; }
}

.animated-title:hover {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
  color: #ff6347;
}