/* fvtv.css — Full production (scoped to .fv-widget) */
/* Place at: /wp-content/themes/flatsome/fvtv-widget/fvtv.css */

.fv-widget {
  font-family: 'Open Sans', Arial, sans-serif;
  color: #fff;
  box-sizing: border-box;
  --left-name-w: 230px;
  --left-logo-w: 90px;
  --slot-w: 200px;
  --row-h: 82px;
  --viewport-h: 725px;
  --hover-glow-color: rgba(13,39,189,0.46);
  --left-total: calc(var(--left-name-w) + var(--left-logo-w));
  display: block;
  width: 100%;
  max-width: 100%;
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* container */
.fv-widget .fv-container { padding: 12px; width:100%; box-sizing:border-box; background:transparent; position:relative; }

/* viewport */
.fv-widget .fv-viewport {
  height: var(--viewport-h);
  width:100%;
  overflow-x:auto;
  overflow-y:auto;
  position:relative;
  border:7px solid #6d7372;
  background:#0b0c0d;
  box-sizing:border-box;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling: touch;
  isolation:isolate;
  display:block;
}

/* header */
.fv-widget .fv-header {
  display:grid;
  grid-template-columns: var(--left-name-w) var(--left-logo-w) repeat(48, var(--slot-w));
  position:sticky;
  top:0;
  left:0;
  z-index:50;
  background:#000;
  box-shadow:0 2px 6px rgba(0,0,0,0.4);
  min-width: calc(var(--left-total) + 48 * var(--slot-w));
}

/* header spacer */
.fv-widget .header-spacer {
  grid-column:1 / span 2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  background:#262425;
  border-right:2px solid rgba(255,255,255,0.06);
  min-height:var(--row-h);
  box-sizing:border-box;
}
.fv-widget .header-spacer .fixed-image {
  width: calc(var(--left-total) - 16px);
  height: calc(var(--row-h) - 16px);
  object-fit: contain;
  pointer-events: none;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,0.6);
  display:block;
}

/* time labels */
.fv-widget .fv-time {
  padding:8px 6px;
  text-align:center;
  font-size:16px;
  color:#fff;
  border-left: 4px solid rgba(255,255,255,0.04);
  background:#0a0a0a;
  height:var(--row-h);
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
}

/* body rows */
.fv-widget .fv-body { display:block; }

/* rows */
.fv-widget .fv-row {
  display:grid;
  grid-template-columns: var(--left-name-w) var(--left-logo-w) repeat(48, var(--slot-w));
  align-items:center;
  min-height:var(--row-h);
  border-bottom:4px solid #000;
  background:#2b2b29;
  overflow:visible;
  min-width: calc(var(--left-total) + 48 * var(--slot-w));
  position:relative;
  box-sizing:border-box;
}

/* left columns */
.fv-widget .fv-channel-name, .fv-widget .fv-channel-logo {
  position:sticky; top:0; background:#000; color:#fff; display:flex; align-items:center; z-index:40; isolation:isolate; box-sizing:border-box;
}
.fv-widget .fv-channel-name {
  left:0; width:var(--left-name-w); padding:10px; font-weight:600; font-size:16px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-right:1px solid rgba(255,255,255,0.04); background:#000;
}
.fv-widget .fv-channel-name::before{ content:""; position:absolute; inset:0; background:#000; z-index:-1; pointer-events:none; }
.fv-widget .fv-channel-logo { left:var(--left-name-w); width:var(--left-logo-w); justify-content:center; padding:6px; border-right:1px solid rgba(255,255,255,0.04); background:#000; }
.fv-widget .fv-channel-logo img { width: calc(var(--left-logo-w) - 16px); height: calc(var(--row-h) - 16px); object-fit: cover; border-radius:6px; background:#111; border:1px solid rgba(255,255,255,0.04); display:block; }

/* program slot base */
.fv-widget .program-slot {
  display:block;
  margin:6px 6px;
  height: calc(var(--row-h) - 24px);
  line-height: calc(var(--row-h) - 28px);
  padding:0 12px;
  border-radius:6px;
  background:#121213;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:15px;
  box-sizing:border-box;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  transition: box-shadow 220ms ease, background 220ms ease, transform 220ms ease;
  position:relative;
  z-index:10;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.02);
}

/* minimal live highlight */
.fv-widget .program-slot.live {
  box-shadow: 0 0 22px 6px rgba(255,80,80,0.14), 0 8px 24px rgba(0,0,0,0.6);
  border: 2px solid rgba(255,60,60,0.9);
  transform: none;
  z-index: 30;
}

/* large hover */
.fv-widget .program-slot:focus,
.fv-widget .program-slot:hover {
  background: linear-gradient(180deg,#1d1223,#2a1934);
  color:#fff;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.7), 0 0 18px 6px rgba(52,158,158,0.12);
  transform: none;
  z-index:40;
}

/* utility spans */
.fv-widget .span-1{ grid-column: span 1; } .fv-widget .span-2{ grid-column: span 2; }
.fv-widget .span-3{ grid-column: span 3; } .fv-widget .span-4{ grid-column: span 4; }
.fv-widget .span-6{ grid-column: span 6; } .fv-widget .span-12{ grid-column: span 12; }
.fv-widget .span-24{ grid-column: span 24; } .fv-widget .span-48{ grid-column: span 48; }

/* responsive */
@media (max-width:1200px){ .fv-widget { --slot-w:140px; --left-name-w:190px; --left-logo-w:80px; } .fv-widget .fv-channel-name{ font-size:14px; } }
@media (max-width:700px){ .fv-widget { --slot-w:90px; --left-name-w:150px; --left-logo-w:66px; --viewport-h: 725px; } .fv-widget .fv-channel-logo img{ width:46px; height:46px; } }

/* hide playhead inside widget only */
.fv-widget .fv-current-time, .fv-widget #playhead, .fv-widget .playhead,
.fv-widget .now-line, .fv-widget .current-time-line, .fv-widget .guide-playhead {
  display:none !important; pointer-events:none !important;
}

/* subtle active slot */
.fv-row .program-slot.active-slot { box-shadow: 0 8px 30px rgba(0,0,0,0.6); transform: none; }

/* blocked visual */
.fv-row .program-slot.blocked { opacity:0.42; filter:grayscale(40%); pointer-events:none; }

/* ========================================================= */
/* UNIVERSAL PLAYER — WITH YOUR FIXES INCLUDED */
.fv-universal-player {
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  margin:12px 0;
  position:relative; /* <-- THIS fixes placeholder jumping & keeps placeholder inside */
  min-height:720px;
  background:#000;
  border-radius:6px;
  overflow:hidden;
}
/* FORCE OVERRIDE FOR FLATSOME */
.fv-universal-player {
  position: relative !important;
}

.fvtv-universal-shell { width:100%; height:100%; min-height:720px; position:relative; }
.fvtv-player-stage { width:100%; height:100%; min-height:720px; position:relative; background:#000; display:block; }
.fvtv-player-stage iframe, .fvtv-player-stage video, .fvtv-player-stage img {
  display:block; width:100%; height:100%; min-height:720px; border:0; background:#000; object-fit:cover;
}

/* ad overlay */
.fvtv-ad-overlay { position:absolute; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:#000; }

/* player meta */
.fvtv-player-meta { color:#fff; font-size:14px; padding:8px 12px; }

/* Hover card */
.fvtv-hover-card {
  position: absolute;
  z-index:2147483000;
  width:540px;
  max-width:92vw;
  background:linear-gradient(180deg,#141212,#1d1a1a);
  border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,0.6),0 6px 20px rgba(12,12,22,0.6);
  color:#fff;
  display:flex;
  gap:16px;
  padding:16px;
  transform-origin:bottom center;
  transition: transform 200ms cubic-bezier(.2,.9,.25,1), opacity 160ms ease;
  opacity:0;
  pointer-events:none;
  touch-action: manipulation;
  max-height: calc(100vh - 48px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.fvtv-hover-card.fvtv-visible {
  opacity:1;
  pointer-events:auto;
  transform: translateY(0) scale(1);
}

/* Card content */
.fvtv-hover-card .card-left { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:8px; }
.fvtv-hover-card .card-title { font-size:18px; font-weight:900; line-height:1.1; }
.fvtv-hover-card .card-desc { font-size:14px; line-height:1.3; color:#d8dfe6; max-height: calc(1.3em * 6); overflow:hidden; text-overflow:ellipsis; }
.fvtv-hover-card .card-meta { font-size:13px; color:#c6d1d9; }

/* Poster */
.fvtv-hover-card .card-poster {
  width:180px;
  min-width:180px;
  height:280px;
  object-fit:cover;
  border-radius:8px;
  background:#0b0b0b;
  border:1px solid rgba(255,255,255,0.04);
  flex: 0 0 180px;
}

/* Watch button */
.fvtv-hover-card .card-btn {
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 14px;
  background: linear-gradient(180deg,#ff5f5f,#ff3030);
  color: #fff;
  font-weight:900;
  border-radius:10px;
  cursor:pointer;
  border:none;
  box-shadow: 0 6px 24px rgba(255,80,80,0.12), inset 0 -2px 0 rgba(0,0,0,0.15);
  user-select: none;
}

.fvtv-hover-card .card-btn.disabled { opacity:0.5; pointer-events:none; background:linear-gradient(180deg,#555,#333); box-shadow:none; }

/* accessibility focus */
.fv-widget .program-slot:focus { outline: 2px solid rgba(52,158,158,0.9); outline-offset: 2px; }

/* ensure hover card doesn't obstruct important UI on very small screens */
@media (max-width:720px) {
  .fvtv-hover-card { width: calc(100vw - 32px); padding:10px; gap:10px; }
  .fvtv-hover-card .card-poster { display:none; min-width:0; width:0; }
  .fvtv-hover-card .card-desc { max-height: calc(1.3em * 5); }
}

/* small tweaks for focus/keyboard navigation */
.fvtv-hover-card button:focus { outline: 3px solid rgba(255,127,127,0.28); outline-offset: 2px; }

/* ========================================================= */
/* helpful utility for slots that should visually span grid columns */
.fv-widget .program-slot.span-1{ grid-column: span 1; } .fv-widget .program-slot.span-2{ grid-column: span 2; }
.fv-widget .program-slot.span-3{ grid-column: span 3; } .fv-widget .program-slot.span-4{ grid-column: span 4; }
.fv-widget .program-slot.span-6{ grid-column: span 6; } .fv-widget .program-slot.span-12{ grid-column: span 12; }
.fv-widget .program-slot.span-24{ grid-column: span 24; } .fv-widget .program-slot.span-48{ grid-column: span 48; }