/* kontener */
.epg-wrap{
  --left:280px; --row:72px;

  /* logo */
  --logo-w:100px; --logo-h:50px;

  /* toolbar */
  --tb-gap:8px;
  --date-w:160px; --date-fs:14px; --date-fw:600; --date-radius:10px; --date-px:10px; --date-py:8px;
  --date-bg:#fff; --date-text:#0f172a; --date-border:var(--grid, #e5e7eb);
  --btn-fs:14px; --btn-fw:600; --btn-radius:10px; --btn-px:12px; --btn-py:8px;
  --btn-bg:#0f172a; --btn-text:#ffffff; --btn-border:transparent;
  --btn-bg-hover:#1f2937; --btn-text-hover:#ffffff; --btn-border-hover:transparent;

  /* nawigacja (slider) – KOLORY PRZYCISKÓW */
  --nav-w:44px;
  --nav-bg: rgba(255,255,255,.15);
  --nav-bg-hover: rgba(255,255,255,.25);
  --nav-icon:#0f172a; --nav-icon-hover:#0f172a;

  /* oś czasu */
  --axis-h:28px;      /* wysokość belki godzin */
  --axis-gap:6px;     /* mały odstęp pod osią */

  /* NOW badge */
  --now:#ef4444;
  --now-badge-bg: var(--now);
  --now-badge-color:#fff;
  --now-badge-radius:999px;
  --now-badge-offset:8px;
  --now-badge-px:10px; --now-badge-py:4px;
  --now-badge-fs:12px; --now-badge-fw:700;
  --now-badge-shadow:0 1px 2px rgba(0,0,0,.25);

  background: var(--bg, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.04);
  padding:0px;
  overflow-x:hidden;
  overflow-y:auto;
  position:relative;
}

/* toolbar (sticky na górze) */
.epg-toolbar{
  display:flex; gap:var(--tb-gap,8px); align-items:center;
  margin-bottom:8px;
  position:sticky; top:0; z-index:7; padding-bottom:8px;
  background:linear-gradient(var(--bg, #fff), var(--bg, #fff));
  justify-content: end;
}

/* date input */
.epg-toolbar .epg-date{
  width:var(--date-w);
  font: var(--date-fw) var(--date-fs)/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--date-text);
  background: var(--date-bg);
  border:1px solid var(--date-border);
  border-radius: var(--date-radius);
  padding: var(--date-py) var(--date-px);
  outline: none;
}
.epg-toolbar .epg-date:focus{
  box-shadow: 0 0 0 3px rgba(108, 21, 104, .25);
  border-color: rgba(108, 21, 104, .7);
}
.epg-toolbar .epg-date::-webkit-calendar-picker-indicator{ cursor:pointer }

/* today button */
.epg-toolbar .epg-today{
  font: var(--btn-fw) var(--btn-fs)/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--btn-text);
  background: var(--btn-bg);
  border:1px solid var(--btn-border);
  border-radius: var(--btn-radius);
  padding: var(--btn-py) var(--btn-px);
  cursor:pointer; user-select:none;
}
.epg-toolbar .epg-today:hover,
.epg-toolbar .epg-today:focus{
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  border-color: var(--btn-border-hover);
}


/* === Inline Player Header (Classic mode) === */
.epg-inline-header{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
  padding:16px 12px 16px;
  margin-bottom:8px;
  align-items:stretch;
}
@media (max-width: 900px){
  .epg-inline-header{ grid-template-columns: 1fr; }
}

.epg-inline-info{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.epg-inline-channel{
  display:flex;
  align-items:center;
  gap:14px;
}

.epg-inline-logo{
  width: 96px;
  height: 48px;
  object-fit: contain;
  background: transparent;
}

.epg-inline-titles{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}

.epg-inline-channel-title{
  font:700 18px/1.15 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--title, #0f172a);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.epg-inline-now-title{
  font:700 26px/1.25 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--axis, #0f172a);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.epg-inline-times{
  display:flex;
  align-items:center;
  gap:10px;
}

.epg-inline-start, .epg-inline-end{
  font:600 13px/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--meta, #64748b);
  white-space:nowrap;
}

.epg-inline-progress{
  position:relative;
  flex:1 1 auto;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid var(--grid, #e5e7eb);
  background: rgba(255,255,255,.15);
}

.epg-inline-progressbar{
  height:100%;
  width:0%;
  background: #ffffff;
  transition: width .25s linear;
  border-radius:20px;
}

.epg-inline-desc{
  font:400 14px/1.45 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--meta, #334155);
  max-width: 58ch;
}

.epg-inline-note{
  font:600 13px/1.35 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--meta, #64748b);
}

.epg-inline-player{
  width:100%;
}

/* Hide inline header in Cards template */
.epg-wrap.tpl-cards .epg-inline-header{
  display:none !important;
}

/* --- STAGE: dwukolumnowy układ (lewa szyna + scroller) --- */
.epg-stage{
  position:relative;
  display:grid;
  grid-template-columns: var(--left) 1fr;
  align-items:start;
  column-gap:0;
}

/* lewy rail (nie przewija się horyzontalnie) */
.epg-left-rail{
  position:relative;
  padding-top: calc(var(--axis-h, 28px) + var(--axis-gap, 6px));
}
.epg-left-rail .epg-left{
  position:static;
  display:flex; align-items:center; gap:10px;
  padding:8px; min-height:var(--row);
  border-bottom:1px solid var(--grid, #e5e7eb);
  background: transparent;
  z-index:1;
  border-radius:20px;
  justify-content:center;
}
.epg-left img{ width:var(--logo-w,100px); height:var(--logo-h,50px); object-fit:contain; }
.epg-left .title{
  font:600 14px/1.2 Montserrat, system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--axis, #0f172a)
}

/* prawa kolumna – scroller osi i torów */
.epg-scroll{
  position:relative;
  overflow-x:auto; overflow-y:hidden; -ms-overflow-style:none; scrollbar-width:none;
  margin-left:var(--nav-w,44px);
  margin-right:var(--nav-w,44px);

  /* FADE po bokach */
  --fade: 56px;
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,1) var(--fade),
    rgba(0,0,0,1) calc(100% - var(--fade)),
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.epg-scroll::-webkit-scrollbar{ height:0; width:0 }

/* Stany: wyłącz fade po stronie dosuniętej do końca */
.epg-scroll.is-at-start{
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--fade)), transparent 100%);
}
.epg-scroll.is-at-end{
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, #000 var(--fade), #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 100%);
}
.epg-scroll.is-at-start.is-at-end{
  -webkit-mask-image: none;
  mask-image: none;
}

/* przyciski slidera – PŁASKIE KOLORY */
.epg-nav{
  position:absolute; top:0; bottom:0; width:var(--nav-w,44px);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer; z-index:6; padding:0; margin:0;
  background: var(--nav-bg);
  transition: background-color .15s ease;
  margin-top:calc(var(--axis-h, 28px) + 6px);
  border-radius:20px;
  border:1px solid var(--grid, #e5e7eb);
}
.epg-prev{ left:var(--left); }
.epg-next{ right:0; }
.epg-nav:hover{ background: var(--nav-bg-hover); }
.epg-nav[disabled]{ opacity:1; pointer-events:none; }
.epg-nav[disabled] svg{ width:18px; height:18px; fill:var(--nav-icon); opacity:0 }
.epg-nav svg{ width:18px; height:18px; fill:var(--nav-icon); opacity:.9 }
.epg-nav:hover svg{ fill:var(--nav-icon-hover); opacity:1 }

/* grid, oś i siatka – wyłącznie w scrollerze */
.epg-grid{ position:relative; padding-top:0; }

/* odsunięcie osi i torów od przycisku prev */
.epg-axis{ 
  position:relative;
  height: var(--axis-h, 28px);
  z-index:4;
  border-bottom:1px solid var(--grid, #e5e7eb);
  background: var(--bg, #fff);
  margin-bottom: var(--axis-gap, 6px);
  padding-left: calc(var(--nav-w, 44px) + 5px);
}
.epg-rows{
  position: relative;
  padding-left: calc(var(--nav-w, 44px) + 5px);
}

.epg-axis-track{ height:100%; position:relative }
.epg-axis-track .tick{
  position:absolute; top:0; height:100%;
  border-left:1px solid var(--grid, #e5e7eb);
  font:500 11px/1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color: var(--axis, #0f172a);
  padding-left:10px; transform:translateX(-.5px); white-space:nowrap;
}

/* rzędy torów */
.epg-row{
  position:relative;
  min-height:var(--row);
  border-bottom:1px solid var(--grid, #e5e7eb);
}

/* tor i KAFELKI */
.epg-track{ position:relative; }
.epg-block{
  position:absolute; top:8px; height:calc(var(--row) - 16px);
  border-radius:10px; border:1px solid var(--block-border, #e5e7eb);
  background: var(--block-bg, #f8fafc);
  overflow:hidden; padding:8px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center;
  transition: box-shadow .15s ease, border-color .15s ease, background-color .15s ease, transform .06s ease;
}
.epg-block .name{ 
  font:600 12px/1.25 Montserrat,system-ui,-apple-system,Segoe UI,Roboto; 
  color: var(--title, #0f172a);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin:0;
}
.epg-block .meta{ 
  font:500 10px/1.3  Montserrat,system-ui,-apple-system,Segoe UI,Roboto; 
  color: var(--meta, #64748b); margin:0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.epg-block:hover{ box-shadow: 0 6px 16px rgba(0,0,0,.12) }

/* linia „now” + plakietka */
.epg-nowline{
  position:absolute; top:0; bottom:0; width:2px;
  background: var(--now, #ef4444);
  z-index:8;
  transition: left 600ms cubic-bezier(.2,.7,.2,1);
  will-change: left;
}
/* pierwszy „snap” bez animacji */
.epg-nowline.is-instant{ transition: none !important; }

/* szanuj preferencje użytkownika */
@media (prefers-reduced-motion: reduce){
  .epg-nowline{ transition:none !important; }
}
.epg-nowline::before{
  content: attr(data-label);
  position:absolute; left:50%;
  transform: translateX(-50%);
  top: calc(
    ((var(--axis-h, 28px)
      - (var(--now-badge-py,4px) * 2 + var(--now-badge-fs,12px) * 1.2)
    ) / 2) - 3px
  );
  background: var(--now-badge-bg, var(--now, #ef4444));
  color: var(--now-badge-color,#fff);
  font: var(--now-badge-fw,700) var(--now-badge-fs,12px)/1.2 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  padding: var(--now-badge-py,4px) var(--now-badge-px,10px);
  border-radius: var(--now-badge-radius,999px);
  box-shadow: var(--now-badge-shadow,0 1px 2px rgba(0,0,0,.25));
  white-space: nowrap;
  pointer-events:none;
}
.epg-nowline::after{
  content:"";
  position:absolute; left:50%; transform: translateX(-50%);
  top: calc(
    ((var(--axis-h, 28px)
      - (var(--now-badge-py,4px) * 2 + var(--now-badge-fs,12px) * 1.2)
    ) / 2)
    + (var(--now-badge-py,4px) * 2 + var(--now-badge-fs,12px) * 1.2)
    - 1px
  );
  width: 2px; height: 6px;
  background: var(--now, #ef4444);
  pointer-events: none;
}

/* ===== Hover-expand: pływający klon kafelka ===== */
.epg-fly{
  position:absolute;
  z-index:20;                /* ponad wszystkim */
  min-height:calc(var(--row) - 16px);
  max-width: 520px;          /* bezpieczny limit szerokości */
  border-radius:10px;
  border:1px solid var(--block-border, #e5e7eb);
  background: var(--block-bg, #f8fafc);
  padding:10px;
  box-sizing:border-box;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  overflow:visible;          /* pokaż całą treść */
  pointer-events:auto;       /* żeby nie znikało przy przejściu kursorem */
}
.epg-fly .name,
.epg-fly .meta{
  white-space: normal;       /* pełna treść, bez elipsy */
  overflow: visible;
  text-overflow: clip;
  margin:0;
}



/* Expanded look jak "prawdziwy" kafelek */
.epg-block.is-expanded{ overflow: visible; } /* pozwala wyjść poza własną szerokość */

.epg-block .epg-expand{
  position:absolute; top:0; left:0; height:100%;
  /* szerokość ustawiamy w JS (target px) */
  border-radius:10px; border:1px solid var(--block-border, #e5e7eb);
  background: var(--nav-bg-hover);
  border-radius:10px;
  padding:8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  pointer-events:none;               /* nie powiększa obszaru hoveru */
  z-index: 10;                       /* nad oryginalną treścią */
  box-sizing: border-box;
  display:flex; flex-direction:column; justify-content:center;
  max-width:400px;
}

.epg-block .epg-expand .name,
.epg-block .epg-expand .meta{
  white-space: normal;               /* pełna treść, bez elipsy */
  overflow: visible;
  text-overflow: clip;
  margin:0;
}


/* === Template: Cards (image timeline) === */
.epg-wrap.tpl-cards .epg-left-rail,
.epg-wrap.tpl-cards .epg-grid,
.epg-wrap.tpl-cards .epg-axis,
.epg-wrap.tpl-cards .epg-nav,
.epg-wrap.tpl-cards .epg-nowline { display: none !important; }

.epg-wrap.tpl-cards .epg-stage { padding: 0; }

.cards-wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 8px 0 12px;
}

/* 1 kolumna domyślnie */
.card{
  position: relative;
  border-radius: 24px;
  background: var(--block-bg, #fbbf24); /* żółte tło jak w szkicu */
  border: 1px solid var(--block-border, rgba(0,0,0,.08));
  overflow: hidden;
  box-shadow: var(--fly-shadow, 0 10px 24px rgba(0,0,0,.12));
  flex: 1 1 100%;
}

@media (min-width: 600px){
  /* 2 kolumny */
  .card{ flex: 1 1 calc(50% - 20px); }
}
@media (min-width: 900px){
  /* 3 kolumny */
  .card{ flex: 1 1 calc(33.333% - 20px); }
}

.card-cap{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 16px 0;
  font:700 12px/1.1 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#fff; text-transform:uppercase; letter-spacing:.02em;
}

.card-img{
  position:relative; aspect-ratio:16/9;
  margin:10px 16px; border-radius:20px; overflow:hidden; background:#111827;
}
.card-img>img{ width:100%; height:100%; object-fit:cover; display:block; }

/* fioletowy overlay progresu od lewej (kolor z Avady) */
.card-progress{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background: var(--awb-custom_color_4);
  mix-blend-mode:multiply; transition:width .3s linear;
}

/* logo kanału w prawym górnym rogu */
.card-logo{
  position:absolute; top:10px; right:10px;
  max-height:30px; max-width:70px; object-fit:contain;
}

.card-body{ padding:0 16px 16px; }
.card-title{
  margin:2px 0 4px;
  font:700 18px/1.25 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial !important;
  color:var(--title,#0f172a);
}
.card-desc{
  margin:0;
  font:400 14px/1.45 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:var(--meta,#334155);
}

/* Toggle: hide top toolbar */
.epg-wrap[data-hide-toolbar="1"] .epg-toolbar{
  display: none !important;
}

.epg-wrap[data-hide-toolbar="1"] .epg-stage{ margin-top: 0; }

/* Cards: układ bez lewej kolumny i bez scroller’a siatki */
.epg-wrap.tpl-cards .epg-stage{
  padding: 0;
  display: block;            /* zamiast grid */
  grid-template-columns: none !important; /* gdyby styl był narzucony wyżej */
}

.epg-wrap.tpl-cards .epg-scroll{
  display: none !important;  /* całkiem usuń kontener siatki z layoutu */
}

/* (opcjonalnie) jeśli kiedyś zostawimy grid, to karty mają rozpiąć się na całą szerokość */
.epg-wrap.tpl-cards .cards-wrap{
  margin-left: 0;
  grid-column: 1 / -1;       /* na wypadek gdy .epg-stage zostanie gridem */
}
/* ===== Overlay Player (added) ===== */
#epg-player-overlay { position: fixed; inset: 0; display: none; z-index: 9999; }
#epg-player-overlay.is-open { display: block; }
.epg-player-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.epg-player-dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(92vw,1000px); background: var(--epg-fly-bg,#111); border-radius: var(--epg-radius,12px); box-shadow: 0 10px 40px rgba(0,0,0,0.35); overflow: hidden; }
.epg-player-close { position: absolute; right: 8px; top: 8px; width: 36px; height: 36px; border: 0; border-radius: 18px; background: rgba(255,255,255,0.14); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.epg-player-close:hover { background: rgba(255,255,255,0.22); }
.epg-player-aspect { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; }
.epg-player-aspect video { width: 100%; height: 100%; display: block; object-fit: contain; }


/* Click affordance for watchables (URL hidden for guests) */
.epg-clickable {
  cursor: pointer;
  transition: filter .15s ease, box-shadow .15s ease;
}
.epg-clickable:hover {
  background:#6c1568;
}
.epg-player-close {
	z-index:1;
}
.epg-player-aspect.epg-inline-aspect,
.epg-inline-video {
	border-radius:20px;
}


.epg-wrap[data-player-mode="inline"]{
  --epg-inline-sticky-top: 130px;   /* kiedy ma się „odkleić” (próg) */
  --epg-inline-sticky-right: 20px;  /* od prawej */
  --epg-inline-sticky-bottom: 20px; /* od dołu */
  --epg-inline-sticky-w: 350px;     /* szerokość mini-playera */
}
.epg-inline-header {
	transition: all 0.2s linear 0.2s;
}


/* opcjonalnie: jak już jest "przyklejony", dodaj cień */
.epg-inline-header.is-sticky{
  background: rgba(0,0,0,.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border-radius:20px;
  transition: all 0.2s linear 0.2s;
  display:flex;
  flex-direction:column-reverse;
  
  right: var(--epg-inline-sticky-right, 20px);
  bottom: var(--epg-inline-sticky-bottom, 20px);
  top: auto !important;
  left: auto !important;

  width: var(--epg-inline-sticky-w, 350px) !important;
  max-width: calc(100vw - (2 * var(--epg-inline-sticky-right, 20px)));

  max-height: calc(100vh - 40px);
}


.epg-inline-header.is-sticky .epg-inline-channel-title{
  font: 700 14px/1.15 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.epg-inline-header.is-sticky .epg-inline-now-title{
  font: 700 18px/1.18 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

.epg-inline-header.is-sticky .epg-inline-desc{
  font: 400 12px/1.35 Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;
  max-height: calc(3 * 1.35em);
  max-width: 44ch;
}


.epg-inline-header{
  opacity: 1;
  transition: opacity 160ms ease;
  will-change: opacity;
}

.epg-inline-header.is-fading{
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .epg-inline-header{ transition: none !important; }
}

/* === FORCE opacity fade in both directions (override old transition delay) === */
.epg-inline-header,
.epg-inline-header.is-sticky{
  transition:
    opacity 160ms ease,
    border-radius 200ms ease,
    box-shadow 200ms ease,
    background-color 200ms ease,
    backdrop-filter 200ms ease !important;
}

/* stan przejściowy (fade-out) */
.epg-inline-header.is-fading{
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .epg-inline-header,
  .epg-inline-header.is-sticky{
    transition: none !important;
  }
}


.epg-scroll{
  overflow-y: visible !important;
}


.epg-axis{
  position: sticky;
  padding-top:10px;
  z-index: 6;
}

.is-axis-fixed {
	background: rgba(0,0,0,.6);
	z-index:9999999999;
	box-shadow: 0 8px 24px rgba(0,0,0,.8);
	padding-top:150px;
	top:0px !important;
	padding-bottom:20px;
}