.heading3 {
  font-weight: bold;
}

.channel-column {
  background-color: #ffd95c;
}

/* Hide Now & Next under 500px */
@media (max-width: 300px) {
  .mini-epg {
    display: none !important;
  }
}

/* Wrap Now/Next text instead of truncating */
.mini-epg div {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  color: black;
  max-width: 100%;
  margin-bottom: 2px;
}

/* Make Now & Next text white in dark mode */
body.dark-mode .mini-epg {
  color: #e6e6e6 !important;
}

/* Optional: widen channel name area */
.channel-name {
  min-width: 180px;
  display: inline-block;
}

/* Center category headings */
.channel-category h3 {
  text-align: center;
}

/* Single column centering for Freesat page */
body>.channels-container {
  justify-content: center;
  /* center the column */
}

body>.channels-container .channel-column {
  flex: 0 0 50%;
  /* fixed 50% width */
  max-width: 50%;
  /* ensure it doesn't stretch */
}

/* Responsive stacking for smaller screens */
@media (max-width: 952px) {
  body>.channels-container .channel-column {
    flex: 1 1 100%;
    /* full width */
    max-width: 100%;
  }
}

/* Make the channels list transparent and remove spacing */
.channels-list {
  background-color: transparent;
  padding: -10;
  margin: -10;
}

/* Remove default UL spacing inside each category */
.channel-category ul {
  padding: -10;
  margin: -10;
  list-style: none;
  /* remove bullets if any */
  background-color: transparent;
  /* ensure ul itself is transparent */
}

/* Make each channel link fill the row */
.channel-item a {
  display: flex;
  align-items: center;
  /* vertically center number, logo, name, EPG */
  width: 100%;
  background-color: #e6e6e6
    /* your grey background */
}

body.dark-mode .channel-item a {
  background-color: transparent;
}

body.dark-mode .mini-epg div {
  color: white;
}