/* ============================================================
   WIDGETS - IPL Live Scores & Other Widgets
   ============================================================ */

/* ── Cricket Widget ── */
.cricket-widget {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px var(--shadow);
  transition: all 0.3s ease;
}

.cricket-widget:hover {
  box-shadow: 0 4px 16px var(--shadow2);
}

.cricket-widget-title {
  border-top: 4px solid var(--cricket-red);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Match Card ── */
.cricket-match-card {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s;
}

.cricket-match-card:last-child {
  border-bottom: none;
}

.cricket-match-card:hover {
  background: var(--surface2);
  cursor: pointer;
}

.match-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.3;
}

.match-teams {
  font-size: 12px;
  color: var(--text2);
  margin-bottom: 6px;
  font-weight: 600;
}

.match-score {
  font-size: 13px;
  font-weight: 800;
  color: var(--espn-blue);
  margin-bottom: 6px;
}

.match-info {
  font-size: 11px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Match Status Badges ── */
.match-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-live {
  background: var(--cricket-red);
  color: white;
  animation: pulse 2s infinite;
}

.status-upcoming {
  background: var(--cricket-blue);
  color: white;
}

.status-completed {
  background: var(--cricket-gray);
  color: white;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ── Widget States ── */
.widget-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--text3);
  font-size: 13px;
}

.widget-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--text2);
  font-size: 13px;
}

.widget-error {
  padding: 30px 20px;
  text-align: center;
  color: var(--cricket-red);
  font-size: 12px;
  background: rgba(230, 57, 70, 0.05);
  border-radius: 8px;
  margin: 12px;
}

/* ── Refresh Button ── */
.refresh-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  margin-left: auto;
}

.refresh-btn:hover {
  background: var(--espn-blue);
  color: white;
  border-color: var(--espn-blue);
  transform: scale(1.05);
}

/* ── Last Updated ── */
.last-updated {
  padding: 8px 18px;
  font-size: 10px;
  color: var(--text3);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}