/**
 * Channel player + Electronic Program Guide styles.
 *
 * Sole authoritative Channel CSS runtime asset:
 *   resources/css/channel_player.css
 *
 * Canonical wrapper: .zype-channel-player (adds .alignwide for theme wide column)
 * Layout shell: .zype-channel-player__layout (fills Theme Page / post-content body)
 * Nested EPG region: .zype-channel-player .guide-section.zype-channel-epg
 *
 * Width contract:
 * - Fill the Theme Page content body (alignwide / wide-size tokens).
 * - Do not hard-code plugin max-widths (e.g. legacy 1400px).
 * - Do not add horizontal inset inside an already constrained theme body.
 *
 * Isolation rules:
 * - Do not add html/body/:root/header/nav/main page-level selectors.
 * - Do not style document scrollbars (::-webkit-scrollbar, scrollbar-*).
 * - Scope every rule under .zype-channel-player.
 *
 * Do not enqueue or deploy Channel CSS from dist/.
 */

.zype-channel-player,
.zype-channel-player *,
.zype-channel-player *::before,
.zype-channel-player *::after {
  box-sizing: border-box;
}

.zype-channel-player {
  /*
   * Width contract: fill the Theme Page / post-content body.
   * Prefer theme wide column (header/footer .alignwide), then content-size,
   * then parent width. Do not hard-code pixel max-widths (legacy 1400px).
   */
  --zype-channel-wide: var(
    --wp--style--global--wide-size,
    var(--zype-wide-width, var(--wp--style--global--content-size, 100%))
  );
  color-scheme: dark;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  background-color: #000;
  color: #f5f6f7;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  margin-inline: 0;
  box-sizing: border-box;
}

/*
 * WordPress constrained-layout wide alignment via .alignwide on the root.
 * When the Theme Page body is already .alignwide, width:100% still fills it.
 */
.zype-channel-player.alignwide {
  width: 100%;
  max-width: min(100%, var(--zype-channel-wide));
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
  margin-inline: auto;
  box-sizing: border-box;
}

.zype-channel-player__layout {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        /* Vertical rhythm only — no horizontal inset inside the theme content body. */
        padding: 1rem 0 3rem;
        box-sizing: border-box;
      }

.zype-channel-player .player-section{
        position: relative;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        padding: .2rem;
        backdrop-filter: blur(6px);
        box-shadow: 0 24px 55px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
      }

.zype-channel-player .now-playing{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1rem;
        font-weight: 600;
        color: #f5f6f7;
        margin-bottom: 0.6rem;
        min-height: 1.5rem;
      }

.zype-channel-player .now-playing-label{
        /* Label stays on the left */
        flex-shrink: 0;
      }

.zype-channel-player .now-playing-value{
        /* Value aligns to the right */
        text-align: right;
        flex: 1;
        padding-left: 1rem;
      }

.zype-channel-player .player-wrapper{
        position: relative;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 12px;
        overflow: hidden;
        background: #0b0b10;
      }

/* Bitmovin mount fills the sized player region.
 * Absolute fill is anchored to .player-wrapper (aspect-ratio box).
 * Do not rely on Bitmovin's .aspect-16x9 alone once the mount is positioned. */
.zype-channel-player .player-wrapper > .bitmovinplayer-container,
.zype-channel-player .player-wrapper .bitmovinplayer-container{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        aspect-ratio: auto;
      }

.zype-channel-player .player-wrapper .bmpui-ui-uicontainer,
.zype-channel-player .player-wrapper .bmpui-ui-container{
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
      }

.zype-channel-player .player-actions{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.75rem;
        flex-wrap: nowrap;
        margin-top: 1rem;
      }

.zype-channel-player .custom-controls{
        display: flex;
        gap: 0.5rem;
        align-items: center;
        margin-top: 0;
      }

.zype-channel-player .custom-controls button{
        padding: 0.45rem;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #f5f6f7;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.5rem;
        height: 2.5rem;
        font-size: 0;
        line-height: 0;
        position: relative;
      }

.zype-channel-player .custom-controls button svg{
        width: 1.25rem;
        height: 1.25rem;
        fill: currentColor;
        display: block;
        flex-shrink: 0;
      }

.zype-channel-player .custom-controls button svg[style*="display: none"]{
        display: none !important;
      }

.zype-channel-player .custom-controls button:hover,
.zype-channel-player .custom-controls button:focus-visible{
        background: rgba(255, 255, 255, 0.16);
      }

.zype-channel-player .epg-zoom-controls{
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        margin-left: 0.25rem;
      }

.zype-channel-player .epg-zoom-controls button{
        padding: 0.3rem;
        border-radius: 6px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #f5f6f7;
        cursor: pointer;
        width: 2rem;
        height: 2rem;
        font-size: 0.95rem;
        line-height: 1;
      }

.zype-channel-player .epg-zoom-controls button:hover,
.zype-channel-player .epg-zoom-controls button:focus-visible{
        background: rgba(255, 255, 255, 0.16);
      }

.zype-channel-player .custom-controls input[type="range"]{
        -webkit-appearance: none;
        appearance: none;
        width: 101px; /* 3/4 of 135px (which was 3/4 of original 180px) */
        height: 6px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 999px;
        outline: none;
      }

.zype-channel-player .custom-controls input[type="range"]::-webkit-slider-thumb{
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #ff5166;
        cursor: pointer;
      }

.zype-channel-player .custom-controls input[type="range"]::-moz-range-thumb{
        width: 14px;
        height: 14px;
        border: none;
        border-radius: 50%;
        background: #ff5166;
        cursor: pointer;
      }

.zype-channel-player .visually-hidden{
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

.zype-channel-player .go-live-btn{
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.9rem;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        background: rgba(255, 255, 255, 0.08);
        color: #f5f6f7;
        cursor: pointer;
        height: 2.5rem;
      }

/* Push the Go to Live button to the right within the action bar */
.zype-channel-player .player-actions .go-live-btn{
        margin-left: auto;
      }

.zype-channel-player .go-live-btn:hover,
.zype-channel-player .go-live-btn:focus-visible{
        background: rgba(255, 255, 255, 0.16);
      }

.zype-channel-player .go-live-btn svg{
        width: 1rem;
        height: 1rem;
        fill: currentColor;
      }

/* Show pointer cursor over the video area */
.zype-channel-player .player-wrapper .bitmovinplayer-container video{
        cursor: pointer;
      }

/* Show Bitmovin UI controls on hover */
.zype-channel-player .player-wrapper .bitmovinplayer-container .bmpui-ui-container{
        opacity: 0;
        transition: opacity 0.2s ease;
      }

.zype-channel-player .player-wrapper:hover .bitmovinplayer-container .bmpui-ui-container,
.zype-channel-player .player-wrapper .bitmovinplayer-container:focus-within .bmpui-ui-container{
        opacity: 1;
      }

.zype-channel-player .guide-section{
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
      }

@media (max-width: 799px) {
  .zype-channel-player .guide-section{
          flex: 1; /* Fill remaining space in main */
          display: flex;
          flex-direction: column;
          min-height: 0; /* Allow flex child to shrink */
        }

}

.zype-channel-player .guide-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
      }

.zype-channel-player .guide-header h3{
        margin: 0;
        font-size: clamp(1.15rem, 1.5vw, 1.55rem);
        font-weight: 600;
      }

.zype-channel-player .guide-status{
        font-size: 0.95rem;
        color: rgba(245, 246, 247, 0.8);
      }

.zype-channel-player .channel-art-container{
        display: none; /* Hidden in horizontal mode */
      }

.zype-channel-player .guide-scroll{
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
      }

.zype-channel-player .guide-track{
        position: relative;
        min-height: auto;
        background: 
          /* Channel artwork area - transparent */
          linear-gradient(
            90deg,
            transparent 0,
            transparent 140px
          ),
          /* Gradient pattern starting after channel artwork - each column = 1/4 hour (15 min = 67.5px) */
          repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.06) 0,
            rgba(255, 255, 255, 0.06) 67.5px,
            rgba(255, 255, 255, 0.03) 67.5px,
            rgba(255, 255, 255, 0.03) 135px
          );
        background-position: 0 0, 140px 0;
        background-size: 140px 100%, 135px 100%;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
        padding: 0 1.5rem 0 0;
      }

.zype-channel-player .timeline-labels{
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        min-width: 100%;
        height: 24px;
        background: #000;
        z-index: 2;
        margin-top: 10px;
        /* Timeline labels extend to full length of guide-track */
      }

.zype-channel-player .timeline-label{
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        font-size: 0.85rem;
        color: rgba(245, 246, 247, 0.75);
        text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
      }

.zype-channel-player .timeline-hour-line{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 1px;
        border-left: 1px dotted rgba(255, 255, 255, 0.2);
        pointer-events: none;
        z-index: 1; /* Lines appear behind content in horizontal mode */
      }

@media (max-width: 799px) {
  .zype-channel-player .epg-zoom-controls{
          display: none;
        }

  .zype-channel-player .timeline-hour-line{
          bottom: auto;
          left: 1rem; /* Match program card left position */
          right: auto;
          width: calc(100% - 2rem); /* Match program card width exactly */
          height: 1px;
          border-left: none;
          border-top: 1px dotted rgba(255, 255, 255, 0.4);
          z-index: 10000; /* Ensure lines appear above all other elements */
          pointer-events: none;
        }

  /* Timeline labels column lines - span full width of timeline labels column */
  .zype-channel-player .timeline-labels-line{
          left: 0;
          right: 0;
          width: 100%; /* Full width of timeline-labels column */
        }

}

.zype-channel-player .channel-label{
        font-size: 0.95rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.75rem;
        color: rgba(255, 255, 255, 0.9);
      }

.zype-channel-player .program-row{
        position: relative;
        min-height: 125px;
      }

.zype-channel-player .epg-row{
        position: relative;
        display: flex;
        align-items: stretch;
        gap: 0; /* no gap so artwork can overlay content if needed */
      }

.zype-channel-player .channel-art{
        position: sticky;
        top: 24px; /* below sticky timeline labels */
        left: 0;
        width: 140px;
        min-height: 125px; /* match program-row (120px cards + 5px) */
        background: #000 url('zypelogo_mini.png') center center / contain no-repeat;
        /* border-radius: 8px; */
        border-right: 2px solid rgba(255, 255, 255, 0.25);
        box-shadow: 6px 0 18px rgba(0, 0, 0, 0.55);
        flex: 0 0 140px; /* reserve artwork width so it's visible */
        z-index: 5;
        cursor: pointer;
      }

.zype-channel-player .channel-art.has-custom-channel-image,
.zype-channel-player .channel-art-container.has-custom-channel-image{
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
      }

/* Program row starts after channel artwork - flex layout naturally positions it */
.zype-channel-player .epg-row .program-row{
        flex: 1;
        margin-left: 0;
        position: relative;
      }

@media (min-width: 800px) {
  .zype-channel-player .program-card{
          height: 120px !important;
          max-height: 120px !important;
        }

}

.zype-channel-player .program-card{
        position: absolute;
        top: 0;
        min-height: 120px;
        border-radius: 12px;
        padding: 1rem 1.1rem;
        background: rgba(48, 56, 72, 0.55);
        color: #f6f7fb;
        border: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: 0 12px 24px rgba(6, 9, 15, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease,
          background 0.2s ease, border-color 0.2s ease;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.35rem;
        white-space: normal;
        filter: saturate(0.7);
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0%,
          black 8%,
          black 92%,
          transparent 100%
        );
        mask-image: linear-gradient(
          to right,
          transparent 0%,
          black 8%,
          black 92%,
          transparent 100%
        );
      }

.zype-channel-player .program-card:hover{
        transform: none;
        background: rgba(55, 66, 84, 0.6);
        border-color: rgba(255, 255, 255, 0.12);
        box-shadow: 0 12px 24px rgba(6, 9, 15, 0.25);
      }

.zype-channel-player .program-card.selected{
        background: rgba(34, 44, 63, 0.75);
        border-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
        filter: none;
        cursor: pointer;
      }

.zype-channel-player .program-card.selected:hover{
        /*transform: translateY(-4px); */
        background: rgba(45, 58, 82, 0.88);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
      }

/* Preserve white borders on hover when playing */
.zype-channel-player .program-card--playing:hover{
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
      }

.zype-channel-player .program-card.selected.program-card--playing:hover,
.zype-channel-player .program-card--live.program-card--playing:hover{
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }

.zype-channel-player .program-card--live{
        background: rgba(34, 44, 63, 0.75);
        border-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
        cursor: pointer;
        filter: none;
      }

/* Currently playing episode - white borders on top and bottom (horizontal mode) */
.zype-channel-player .program-card--playing{
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
      }

/* Ensure white borders override selected and live styles */
.zype-channel-player .program-card.selected.program-card--playing,
.zype-channel-player .program-card--live.program-card--playing{
        border-top: 2px solid #ffffff !important;
        border-bottom: 2px solid #ffffff !important;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        border-right: 1px solid rgba(255, 255, 255, 0.08);
      }

.zype-channel-player .program-card--live:hover{
        /*transform: translateY(-4px); */
        background: rgba(45, 58, 82, 0.88);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
      }

.zype-channel-player .program-card--future{
        background: rgba(34, 44, 63, 0.75);
        border-color: rgba(255, 255, 255, 0.05);
        box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
        cursor: default;
        filter: none;
      }

.zype-channel-player .program-card--future:hover{
        /*transform: translateY(-4px); */
        background: rgba(45, 58, 82, 0.88);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
      }

.zype-channel-player .program-card--too-old{
        background: rgba(34, 34, 34, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
        cursor: not-allowed;
        opacity: 0.6;
        filter: grayscale(30%);
      }

.zype-channel-player .program-card--too-old:hover{
        background: rgba(34, 34, 34, 0.6);
        border-color: rgba(255, 255, 255, 0.05);
        cursor: not-allowed;
        transform: none;
      }

.zype-channel-player .program-title{
        font-size: 1.05rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.zype-channel-player .program-meta{
        font-size: 0.9rem;
        color: rgba(230, 232, 235, 0.85);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.zype-channel-player .program-duration{
        font-size: 0.8rem;
        color: rgba(230, 232, 235, 0.65);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

.zype-channel-player .program-episode{
        font-size: 0.8rem;
        color: rgba(230, 232, 235, 0.65);
      }

.zype-channel-player .program-card::after{
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: 100%;
        transform: translate(-50%, 10px);
        background: rgba(14, 16, 24, 0.92);
        color: #f5f6f7;
        padding: 0.65rem 0.8rem;
        border-radius: 8px;
        font-size: 0.85rem;
        line-height: 1.3;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
        white-space: normal;
        min-width: 200px;
        max-width: 320px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 10;
      }

.zype-channel-player .program-card:hover::after{
        opacity: 1;
        transform: translate(-50%, -4px);
      }

.zype-channel-player .epg-thumbnail{
        position: absolute;
        width: 240px;
        height: 135px;
        background: rgba(0, 0, 0, 0.9);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.2);
        z-index: 9999;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        bottom: 2rem;
        right: 2rem;
        top: auto;
        left: auto;
      }

/* Ensure thumbnail is positioned within player wrapper's visual area */
.zype-channel-player .player-wrapper .epg-thumbnail{
        position: absolute;
        top: auto;
        left: auto;
        bottom: 1rem;
        right: 1rem;
      }

.zype-channel-player .epg-thumbnail.active{
        opacity: 1;
      }

.zype-channel-player .epg-thumbnail img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

.zype-channel-player .epg-thumbnail::after{
        content: attr(data-title);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0.5rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 500;
        text-align: center;
      }

.zype-channel-player .current-time-indicator{
        position: absolute;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(180deg, rgba(255, 81, 102, 0.2), #ff5166);
        box-shadow: 0 0 12px rgba(255, 81, 102, 0.45);
        z-index: 999; /* ensure visible above overlays */
        pointer-events: none;
      }

.zype-channel-player .current-time-indicator::before{
        content: "Live";
        position: absolute;
        top: -26px;
        left: 50%;
        transform: translateX(-50%);
        background: #ff5166;
        color: #fff;
        font-size: 0.7rem;
        padding: 0.3rem 0.4rem;
        border-radius: 5px;  
        letter-spacing: 0.08em;
        margin-top: 18px; /* move label down slightly */
      }

.zype-channel-player .empty-state{
        padding: 1.5rem;
        border-radius: 12px;
        border: 1px dashed rgba(255, 255, 255, 0.2);
        background: rgba(16, 19, 28, 0.75);
        text-align: center;
        font-size: 0.95rem;
        color: rgba(245, 246, 247, 0.75);
      }

@media (max-width: 799px) {
  /* Vertical EPG Layout */
  .zype-channel-player__layout {
          overflow-x: hidden;
          overflow-y: visible;
          display: flex;
          flex-direction: column;
          padding: 1rem 0 0; /* Remove bottom padding; keep full content-body width */
        }

  .zype-channel-player .player-section{
          flex-shrink: 0; /* Don't shrink player section */
        }

  /* Hide "Go Live" text and make button same size as other controls in vertical mode */
  .zype-channel-player .go-live-btn{
          padding: 0.45rem;
          min-width: 2.5rem;
          height: 2.5rem;
          font-size: 0;
          line-height: 0;
          gap: 0;
        }

  .zype-channel-player .go-live-btn svg{
          width: 1.25rem;
          height: 1.25rem;
        }

  /* Channel artwork container - shown only in vertical mode */
  .zype-channel-player .channel-art-container{
          display: flex !important;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 80px;
          min-height: 80px;
          background-color: #000;
          background-image: url('zypelogo_mini.png');
          background-position: center center;
          background-size: contain;
          background-repeat: no-repeat;
          border-bottom: 2px solid rgba(255, 255, 255, 0.25);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
          cursor: pointer;
          margin-top: 1rem;
        }

  .zype-channel-player .channel-art-container.has-custom-channel-image{
          background-size: cover;
        }

  .zype-channel-player .guide-scroll{
          overflow-x: hidden;
          overflow-y: auto;
          flex: 1; /* Fill remaining space in guide-section */
          min-height: 0; /* Allow flex child to shrink */
    max-height: 60vh; /* Internal EPG scroll; page remains scrollable */
  }

  .zype-channel-player .guide-track{
          position: relative;
          padding: 0;
          min-width: auto;
          min-height: auto;
          width: 100%;
          max-width: 100%;
          display: flex;
          flex-direction: row;
          align-items: flex-start;
          box-sizing: border-box;
          background: #000;
        }

  .zype-channel-player .timeline-labels{
          position: sticky;
          left: 0;
          top: auto;
          width: 80px;
          height: auto;
          min-width: 80px;
          flex-shrink: 0;
          background: #000;
          z-index: 2;
          display: flex;
          flex-direction: column;
          padding: 1rem 0.5rem;
          padding-top: 1rem; /* Removed channel artwork offset */
          margin-top: 0;
          /* Sticky positioning works as containing block for absolutely positioned lines */
        }

  .zype-channel-player .timeline-label{
          position: absolute;
          top: auto;
          left: auto;
          transform: none;
          writing-mode: horizontal-tb;
          text-orientation: mixed;
          margin-bottom: 0;
          padding: 0.25rem 0.5rem;
          font-size: 0.85rem;
          color: rgba(245, 246, 247, 0.75);
          text-shadow: 0 0 8px rgba(0, 0, 0, 0.85);
          white-space: nowrap;
          text-align: center;
        }

  .zype-channel-player .epg-row{
          flex-direction: column;
          position: relative;
          flex: 1;
          min-width: 0;
          width: 100%; /* Full width since channel art is hidden */
          box-sizing: border-box;
        }

  /* Hide channel artwork in vertical mode */
  .zype-channel-player .channel-art{
          display: none;
        }

  .zype-channel-player .epg-row .program-row{
          margin-left: 0;
          margin-top: 1rem; /* Match timeline labels padding-top */
        }

  .zype-channel-player .program-row{
          position: relative;
          min-height: auto;
          width: 100%;
          box-sizing: border-box;
          overflow: visible; /* Ensure timeline lines are not clipped */
          /* Program row starts after channel artwork in vertical mode */
        }

  .zype-channel-player .program-card{
          position: absolute;
          left: 1rem !important;
          top: auto;
          width: calc(100% - 2rem) !important;
          z-index: 1; /* Lower than timeline lines to ensure lines are visible */
          box-sizing: border-box;
          padding: 1rem 1.1rem;
          margin: 0;
          background: rgba(48, 56, 72, 0.55);
          border: 1px solid rgba(255, 255, 255, 0.08);
          box-shadow: 0 12px 24px rgba(6, 9, 15, 0.25);
          cursor: pointer;
          filter: saturate(0.7);
          -webkit-mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 5%,
            black 95%,
            transparent 100%
          );
          mask-image: linear-gradient(
            to bottom,
            transparent 0%,
            black 5%,
            black 95%,
            transparent 100%
          );
        }

  .zype-channel-player .program-card:hover{
          transform: none;
          background: rgba(55, 66, 84, 0.6);
          border-color: rgba(255, 255, 255, 0.12);
          box-shadow: 0 12px 24px rgba(6, 9, 15, 0.25);
        }

  .zype-channel-player .program-card.selected{
          background: rgba(34, 44, 63, 0.75);
          border-color: rgba(255, 255, 255, 0.05);
          box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
          filter: none;
          cursor: pointer;
        }

  .zype-channel-player .program-card.selected:hover{
          background: rgba(45, 58, 82, 0.88);
          border-color: rgba(255, 255, 255, 0.15);
          box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
        }

  /* Preserve white borders on hover when playing (vertical mode) */
  .zype-channel-player .program-card--playing:hover{
          border-top: none !important;
          border-bottom: none !important;
          border-left: 2px solid #ffffff !important;
          border-right: 2px solid #ffffff !important;
        }

  .zype-channel-player .program-card.selected.program-card--playing:hover,
  .zype-channel-player .program-card--live.program-card--playing:hover{
          border-top: none !important;
          border-bottom: none !important;
          border-left: 2px solid #ffffff !important;
          border-right: 2px solid #ffffff !important;
        }

  .zype-channel-player .program-card--live{
          background: rgba(34, 44, 63, 0.75);
          border-color: rgba(255, 255, 255, 0.05);
          box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
          cursor: pointer;
          filter: none;
        }

  .zype-channel-player .program-card--live:hover{
          background: rgba(45, 58, 82, 0.88);
          border-color: rgba(255, 255, 255, 0.15);
          box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
        }

  /* Currently playing episode - white borders on left and right (vertical mode) */
  .zype-channel-player .program-card--playing{
          border-top: none !important;
          border-bottom: none !important;
          border-left: 2px solid #ffffff !important;
          border-right: 2px solid #ffffff !important;
        }

  /* Ensure white borders override selected and live styles in vertical mode */
  .zype-channel-player .program-card.selected.program-card--playing,
  .zype-channel-player .program-card--live.program-card--playing{
          border-top: none !important;
          border-bottom: none !important;
          border-left: 2px solid #ffffff !important;
          border-right: 2px solid #ffffff !important;
        }

  .zype-channel-player .program-card--future{
          background: rgba(34, 44, 63, 0.75);
          border-color: rgba(255, 255, 255, 0.05);
          box-shadow: 0 16px 32px rgba(6, 9, 15, 0.45);
          cursor: default;
          filter: none;
        }

  .zype-channel-player .program-card--future:hover{
          background: rgba(45, 58, 82, 0.88);
          border-color: rgba(255, 255, 255, 0.15);
          box-shadow: 0 24px 45px rgba(0, 0, 0, 0.55);
        }

  .zype-channel-player .program-card--too-old{
          background: rgba(34, 34, 34, 0.6);
          border-color: rgba(255, 255, 255, 0.05);
          cursor: not-allowed;
          opacity: 0.6;
          filter: grayscale(30%);
        }

  .zype-channel-player .program-card--too-old:hover{
          background: rgba(34, 34, 34, 0.6);
          border-color: rgba(255, 255, 255, 0.05);
          cursor: not-allowed;
          transform: none;
        }

  .zype-channel-player .current-time-indicator{
          position: absolute;
          left: 1rem;
          right: 1rem;
          top: 0;
          bottom: auto;
          width: auto;
          height: 2px;
          background: linear-gradient(90deg, rgba(255, 81, 102, 0.2), #ff5166);
          box-shadow: 0 0 12px rgba(255, 81, 102, 0.45);
          z-index: 999;
        }

  .zype-channel-player .current-time-indicator::before{
          content: "Live";
          position: absolute;
          top: -26px;
          left: 95%;
          transform: none;
          background: #ff5166;
          color: #fff;
          font-size: 0.7rem;
          padding: 0.3rem 0.4rem;
          border-radius: 5px;  
          letter-spacing: 0.08em;
          white-space: nowrap;
        }

}

@media (max-width: 799px) {
  .zype-channel-player__layout {
          padding: 1.5rem 0 2.5rem;
        }

  .zype-channel-player .guide-track{
          padding: 0 0 0 1.1rem;
        }

  .zype-channel-player .program-card{
          min-height: 100px;
          padding: 0.85rem;
        }

  .zype-channel-player .program-card::after{
          display: none;
        }

}

@media (max-width: 640px) {
  /* Vertical EPG Layout */
  .zype-channel-player .current-time-indicator::before{
          left: 93%;
        }

}

@media (max-width: 520px) {
  /* Vertical EPG Layout */
  .zype-channel-player .current-time-indicator::before{
          left: 90%;
        }

}