/* =========================
   BASE
========================= */

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #f5f8ff;
  font-family: Arial, sans-serif;
}

/* =========================
   WRAPPER
========================= */

.page-wrapper{
  display:flex;
  justify-content:center;
  background:#f5f5f5;
}

.matches-grid{
  width:100%;
  max-width:900px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;
}

.matches-vertical {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* =========================
   GIORNO
========================= */

.day-separator {
  background: linear-gradient(90deg, #1e3a8a, #3b82f6);
  color: white;
  padding: 14px 18px;
  border-radius: 12px;
  font-weight: 700;
  margin: 16px 0;
}

/* =========================
   MATCH ROW
========================= */

.match-row{
  display:flex;
  align-items:stretch;
  gap:12px;
  flex-wrap:nowrap;
}

/* NUOVO WRAPPER INTERNO */
.match-content {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

/* =========================
   MATCH CARD (SINISTRA)
========================= */

.match-card{
  flex:1;
  min-width:0;
}

.match-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

/* =========================
   STATUS
========================= */

.status {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 6px;
}

.status.live { background: #e53935; color: #fff; }
.status.finished { background: #4caf50; color: #fff; }
.status.upcoming { background: #e3f2fd; color: #2196f3; }

.match-row.live .match-card { border-left: 4px solid #ef4444; }
.match-row.finished .match-card { border-left: 4px solid #22c55e; }
.match-row.upcoming .match-card { border-left: 4px solid #3b82f6; }

/* =========================
   MATCH TEAMS (NON COMPRESSO)
========================= */

.match-teams{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.team{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
  white-space:nowrap;
}
.team:first-child {
  justify-content: flex-start;
}

.team:last-child {
  justify-content: flex-end;
  text-align: right;
}

.team span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.team img {
  width: 20px;
  height: 14px;
  border-radius: 2px;
}

/* =========================
   SCORE
========================= */

.score{
  min-width:50px;
  text-align:center;
  font-weight:700;
}

/* =========================
   MATCH INFO (SPINTA A DESTRA)
========================= */

.match-info{
  width:140px;      /* larghezza fissa */
  flex-shrink:0;
}

/* =========================
   BADGE
========================= */

.badge {
  padding: 4px;
  border-radius: 6px;
  font-weight: 600;
}

.badge.live { background: #ffebee; color: #e53935; }
.badge.finished { background: #e8f5e9; color: #4caf50; }
.badge.upcoming { background: #e3f2fd; color: #2196f3; }

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

@media (max-width: 768px){

  .match-row{
    flex-direction:column;
  }

  .match-info{
    width:100%;
  }

}