/* === Live Stream Panel (table.timetable) === */
table.timetable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #111418;
  color: #e7e9ec;
  border-radius: 14px;
  overflow: hidden;           /* keep rounded corners */
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  margin: 16px 0 28px;
  font-size: 16px;
}

/* Header */
table.timetable thead th {
  background: linear-gradient(180deg,#1b2027 0%, #171b21 100%);
  color: #cdd4df;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 14px 16px;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid #2a3038;
}

/* Cells */
table.timetable td {
  padding: 14px 16px;
  border-bottom: 1px solid #242a33;
  vertical-align: middle;
}

/* Zebra + hover */
table.timetable tbody tr:nth-child(odd) { background: #141920; }
table.timetable tbody tr:hover { background: #1a2029; }

/* First col: event name */
table.timetable td:first-child,
table.timetable thead th:first-child {
  width: 44%;
}

/* Time columns */
table.timetable td:nth-child(2),
table.timetable td:nth-child(3) {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;  /* aligned times */
}

/* Status pill (optional) */
.timetable .pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .2px;
  background: #2b3440;
  color: #dfe7f1;
  margin-left: 8px;
}
.pill.live { background: #1e8e3e; color: #fff; }
.pill.soon { background: #e09f2b; color: #111; }

/* Footer link */
.live-stream-footer {
  margin-top: 10px;
  text-align: right;
}
.live-stream-footer a {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #1b66d2;
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(27,102,210,.35);
}
.live-stream-footer a:hover { filter: brightness(1.08); }

/* --- Mobile: stacked cards --- */
@media (max-width: 700px) {
  table.timetable {
    border-radius: 12px;
  }
  table.timetable thead { display: none; }                 /* hide header */
  table.timetable, table.timetable tbody, table.timetable tr,
  table.timetable td { display: block; width: 100%; }
  table.timetable tr {
    background: #141920;
    margin: 12px 0;
    border: 1px solid #222831;
    border-radius: 12px;
    overflow: hidden;
  }
  table.timetable td {
    border: 0;
    border-bottom: 1px solid #222831;
    padding: 12px 14px;
  }
  table.timetable td:last-child { border-bottom: 0; }

  /* show labels from data attributes filled by JS below */
  table.timetable td::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #9aa6b2;
    margin-bottom: 4px;
  }

  /* event name a bit bigger */
  table.timetable td:first-child { font-size: 18px; font-weight: 700; }
}