/* ==========================================================================
   epg.css — TV Guide polish for styles/default
   Restyles the /epg guide page (#epg) and the embedded guide strip on /live
   (.epg-mobile inside live_v2) purely by overriding the existing markup's
   classes — no template changes, no new namespace. Replaces vodlix.css's
   hardcoded colors (#6D905A timer line, #ffc107 active program, #1e1e1e
   tabs/blocks) with customizer variables (--vod-*), hovers included
   (color-mix with rgba fallbacks declared first). vodlix.css is read-only
   and loads before this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page title + reload (/epg)
   -------------------------------------------------------------------------- */
#epg > .d-flex h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  font-weight: 500;
  color: var(--vod-white-color);
}
#epg .reload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-color: color-mix(in srgb, var(--vod-white-color) 30%, transparent);
  color: var(--vod-white-color);
  cursor: pointer;
  transition: background-color 0.15s ease;
}
#epg .reload-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
  background-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
}
#epg .reload-icon i {
  font-size: 18px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Date tabs — pill row (both pages; active tab uses .bg-warning in markup)
   -------------------------------------------------------------------------- */
#epg .epg-date-container,
.epg-mobile .epg-date-container {
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 0;
}
#epg .epg-date-container div,
.epg-mobile .epg-date-container div {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-color: color-mix(in srgb, var(--vod-white-color) 25%, transparent);
  border-radius: 999px;
  padding: 4px 16px !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--vod-grey-text);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
#epg .epg-date-container div:hover,
.epg-mobile .epg-date-container div:hover {
  color: var(--vod-white-color);
  border-color: var(--vod-white-color);
}
#epg .epg-date-container div.bg-warning,
.epg-mobile .epg-date-container div.bg-warning {
  background-color: var(--vod-primary) !important;
  border-color: var(--vod-primary);
  color: var(--vod-white-color);
}
/* "All TV Guide" button on the /live strip — links to the /epg page */
.epg-mobile .epg-date-container .epg-all-guide {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--vod-white-color);
  border-radius: 999px;
  padding: 4px 12px 4px 16px !important;
  font-size: 13px;
  font-weight: 600;
  color: var(--vod-white-color);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.epg-mobile .epg-date-container .epg-all-guide:hover {
  background-color: var(--vod-primary);
  border-color: var(--vod-primary);
  color: var(--vod-white-color);
  text-decoration: none;
}
.epg-mobile .epg-date-container .epg-all-guide .mdi {
  font-size: 16px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Time axis + guide shell
   -------------------------------------------------------------------------- */
#epg .timerLi li,
.epg-mobile .timerLi li {
  font-size: 12px;
  color: var(--vod-grey-text);
}
#epg .epgCard,
.epg-mobile .epgCard {
  background-color: transparent !important;
  border: 0;
}
#epg .scrollbar,
.epg-mobile .scrollbar {
  background-color: transparent !important;
  /* the grid positions programs by pixel offsets — keep it LTR even in RTL */
  direction: ltr;
}
#epg .scrollbar::-webkit-scrollbar-track,
.epg-mobile .scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
#epg .scrollbar::-webkit-scrollbar-thumb,
.epg-mobile .scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.25);
  background: color-mix(in srgb, var(--vod-white-color) 25%, transparent);
}

/* --------------------------------------------------------------------------
   Program blocks
   -------------------------------------------------------------------------- */
#epg .timer-box,
.epg-mobile .timer-box {
  background: var(--vod-menu-bg) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-color: color-mix(in srgb, var(--vod-white-color) 10%, transparent);
  border-radius: 6px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#epg .timer-box:hover,
.epg-mobile .timer-box:hover {
  background: color-mix(in srgb, var(--vod-menu-bg) 80%, white) !important;
  border-color: color-mix(in srgb, var(--vod-white-color) 30%, transparent);
}
#epg .timer-box h3,
.epg-mobile .timer-box h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--vod-white-color);
}
/* duration line — grey instead of warning-yellow; catchup play in primary */
#epg .timer-box .text-warning,
.epg-mobile .timer-box .text-warning {
  color: var(--vod-grey-text) !important;
  font-size: 12px;
}
#epg .timer-box .text-warning .mdi-play,
.epg-mobile .timer-box .text-warning .mdi-play {
  color: var(--vod-primary);
}
/* now airing */
#epg .active-program,
.epg-mobile .active-program {
  color: var(--vod-white-color) !important;
  border: 1px solid var(--vod-primary);
  border-inline-start-width: 3px;
  background: color-mix(in srgb, var(--vod-primary) 14%, var(--vod-menu-bg)) !important;
}
/* already aired */
#epg .past-program,
.epg-mobile .past-program {
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   Current-time indicator
   -------------------------------------------------------------------------- */
#epg .timer-line,
.epg-mobile .timer-line-live {
  width: 2px;
  background: var(--vod-primary);
}
#epg .timer-line::before,
.epg-mobile .timer-line-live::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vod-primary);
}

/* --------------------------------------------------------------------------
   Channel sidebar (/epg)
   -------------------------------------------------------------------------- */
#epg .espnBox {
  background-color: transparent;
  border: 0;
  padding: 0 !important;
}
#epg .epg-cards {
  border-radius: 6px;
  padding-inline: 10px;
  transition: background-color 0.15s ease;
}
#epg .epg-cards:hover {
  background-color: rgba(255, 255, 255, 0.06);
  background-color: color-mix(in srgb, var(--vod-white-color) 6%, transparent);
}
#epg .epg-cards a {
  text-decoration: none;
  min-width: 0;
}
#epg .epg-cards img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 6px;
  background: #000;
}
#epg .epg-cards h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--vod-white-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#epg .divider {
  opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Channel search (/epg sidebar + /live channel list)
   -------------------------------------------------------------------------- */
#epg .ch-search,
.channel-listing .ch-search {
  position: relative;
}
#epg .ch-search .form-control,
.channel-listing .ch-search .form-control {
  background-color: var(--vod-menu-bg);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-color: color-mix(in srgb, var(--vod-white-color) 20%, transparent);
  border-radius: 6px;
  color: var(--vod-white-color);
  padding-inline-end: 40px;
  height: 40px;
}
#epg .ch-search .form-control:focus,
.channel-listing .ch-search .form-control:focus {
  border-color: var(--vod-white-color);
  box-shadow: none;
}
#epg .ch-search .ch-btn,
.channel-listing .ch-search .ch-btn {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  height: 40px;
  color: var(--vod-grey-text);
}
.channel-listing .ch-noresults {
  color: var(--vod-grey-text);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   Program detail modal — align with the vxm look
   -------------------------------------------------------------------------- */
.epgModal .modal-content {
  border: 0;
  border-radius: 8px;
  overflow: hidden;
}
.epgModal .modal-header,
.epgModal .modal-footer {
  border-color: rgba(255, 255, 255, 0.12);
  border-color: color-mix(in srgb, var(--vod-white-color) 12%, transparent);
}
.epgModal .close {
  color: var(--vod-white-color);
  text-shadow: none;
}
.epgModal .modal-body .text-warning {
  color: var(--vod-grey-text) !important;
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #epg .reload-icon,
  #epg .epg-date-container div,
  .epg-mobile .epg-date-container div,
  #epg .timer-box,
  .epg-mobile .timer-box,
  #epg .epg-cards {
    transition: none;
  }
}