.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;
  /* allow wrapping */
  overflow-wrap: break-word;
  /* break long words if needed */
  word-break: break-word;
  color: black;
  /* ensure wrapping even for long strings */
  max-width: 100%;
  margin-bottom: 2px;
  /* optional spacing between lines */
}

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

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

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

/* Channels side-by-side by default */
.channels-container {
  display: flex;
  gap: 20px;
  /* spacing between columns */
}

/* Make it stack vertically when window is ≤ 952px */
@media (max-width: 952px) {
  .channels-container {
    flex-direction: column;
  }

  .channel-column {
    width: 100%;
    /* full width for each column */
  }
}

/* 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;
}

.category-header-wrapper {
    position: relative;
    margin-bottom: 10px;
    border-bottom: 1px solid #000; /* <-- your line */
}

body.dark-mode .category-header-wrapper {
  border-bottom: 1px solid #fff;
}

.category-title {
    text-align: center;
    margin: 0;
}

.toggle-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    
    padding: 4px 10px;
    font-size: 12px;
    cursor: pointer;
}