/* ============================================
   HERO MINI PLAYER — live-channel preview
   Replaces the static "Avengers: Doomsday" mockup
   with a real channel stream from /player/channels.
   Click anywhere on the video → /#pricing.
   "Minimize" button → PiP-style fixed corner.
   ============================================ */

#heroMiniPlayer .tv-screen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Video element — fills the existing tv-screen frame */
#heroMiniPlayer .tv-stream {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 1;
  /* While loading or in error state, keep hidden so fallback shows */
  opacity: 0;
  transition: opacity 0.4s ease;
}

#heroMiniPlayer[data-state="playing"] .tv-stream { opacity: 1; }

/* The whole tv-screen is a link — keep it visually invisible */
#heroMiniPlayer .tv-stream-link {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  z-index: 2;
}

/* Fallback content shown while loading or on stream error */
#heroMiniPlayer .tv-stream-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  text-align: center;
  background: linear-gradient(135deg, #18181c 0%, #0e0e12 100%);
  color: #e5e5e5;
  font-family: 'Inter', sans-serif;
  z-index: 3;
  transition: opacity 0.4s ease;
}
#heroMiniPlayer .tv-stream-fallback span {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}
#heroMiniPlayer .tv-stream-fallback small { font-size: 11px; color: #9ca3af; }
#heroMiniPlayer[data-state="playing"] .tv-stream-fallback { opacity: 0; pointer-events: none; }

/* Bottom overlay strip with LIVE chip + channel name + CTA hint */
#heroMiniPlayer .tv-stream-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  z-index: 4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
#heroMiniPlayer[data-state="playing"] .tv-stream-overlay {
  opacity: 1;
  transform: translateY(0);
}

#heroMiniPlayer .tv-stream-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e50914;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#heroMiniPlayer .tv-stream-live i {
  font-size: 6px;
  animation: tv-stream-pulse 1.4s ease-in-out infinite;
}
@keyframes tv-stream-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

#heroMiniPlayer .tv-stream-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#heroMiniPlayer .tv-stream-cta {
  font-size: 11px;
  color: rgba(240, 165, 0, 0.95);
  white-space: nowrap;
}

/* Minimize button — top-right corner of the screen */
#heroMiniPlayer .tv-stream-mini-btn,
#heroMiniPlayer .tv-stream-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background 0.15s, transform 0.15s;
  opacity: 0;
}
#heroMiniPlayer:hover .tv-stream-mini-btn,
#heroMiniPlayer[data-state="minimized"] .tv-stream-close-btn {
  opacity: 1;
}
#heroMiniPlayer .tv-stream-mini-btn:hover,
#heroMiniPlayer .tv-stream-close-btn:hover {
  background: rgba(229, 9, 20, 0.85);
  transform: scale(1.05);
}
#heroMiniPlayer .tv-stream-close-btn {
  top: 8px;
  right: 48px;  /* sits next to mini button when minimized */
}

/* ===== Minimized (PiP) state — fixed corner, ~280px wide ===== */
#heroMiniPlayer[data-state="minimized"] {
  position: fixed !important;
  bottom: 96px;             /* clear of chat widget at bottom-right */
  right: 24px;
  width: 280px;
  height: 158px;            /* 16:9 */
  z-index: 9998;            /* under chat widget (9999) */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08);
  animation: tv-stream-minimize 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

#heroMiniPlayer[data-state="minimized"] .tv-screen {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #000;
}

#heroMiniPlayer[data-state="minimized"] .tv-stream-overlay {
  padding: 6px 10px;
  font-size: 10px;
}
#heroMiniPlayer[data-state="minimized"] .tv-stream-cta {
  display: none;            /* save room when minimized */
}
#heroMiniPlayer[data-state="minimized"] .tv-stream-mini-btn {
  /* Swap icon to "expand" via CSS — JS also flips the i.class */
  opacity: 1;
}

@keyframes tv-stream-minimize {
  from {
    opacity: 0.6;
    transform: translate(40px, 40px) scale(1.1);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* Mobile: smaller PiP, anchored bottom-left so chat widget on right is unobstructed */
@media (max-width: 768px) {
  #heroMiniPlayer[data-state="minimized"] {
    width: 192px;
    height: 108px;
    bottom: 90px;
    right: 16px;
  }
}

/* Reduced motion — kill animations + transitions in this widget */
@media (prefers-reduced-motion: reduce) {
  #heroMiniPlayer .tv-stream,
  #heroMiniPlayer .tv-stream-overlay,
  #heroMiniPlayer .tv-stream-fallback,
  #heroMiniPlayer .tv-stream-mini-btn,
  #heroMiniPlayer .tv-stream-close-btn {
    transition: none !important;
  }
  #heroMiniPlayer .tv-stream-live i {
    animation: none !important;
  }
  #heroMiniPlayer[data-state="minimized"] {
    animation: none !important;
  }
}