/* ============================================================
   VIDAPI RESPONSIVE VIDEO PLAYER
   Mobile → Desktop → Large TV (LOCKED & SAFE)
============================================================ */

/* ===============================
   PLAYER CONTAINER
=============================== */
.channel-player {
  position: relative;
  width: 100%;

  /* Use dynamic viewport height (fixes mobile browser bugs) */
  min-height: calc(100svh - 120px);

  /* 🔒 Ensure background is black to create side bars */
  background: #000 !important;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  z-index: 1; /* Keep below the sliding door (99999) */
}

/* ===============================
   VIDEO.JS WRAPPER
=============================== */
.channel-player .video-js {
  width: 100% !important;
  height: 100% !important;

  max-width: 100%;
  max-height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Ensure internal engine background doesn't overwrite container */
  background-color: transparent !important;
}

/* ===============================
   ACTUAL VIDEO ELEMENT
=============================== */
.channel-player video {
  width: 100%;
  height: 100%;

  /* 🔒 Pillarbox/Letterbox: Centered with black bars on sides */
  object-fit: contain !important;

  background: #000;
}

/* ===============================
   MOBILE FIX (PHONES)
=============================== */
@media (max-width: 768px) {
  .channel-player {
    min-height: auto;

    /* Force perfect 16:9 on mobile */
    aspect-ratio: 16 / 9;
  }
}

/* ===============================
   TABLET TUNING
=============================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .channel-player {
    min-height: calc(100svh - 100px);
  }
}

/* ===============================
   DESKTOP / TV MODE
=============================== */
@media (min-width: 1025px) {
  .channel-player {
    /* Adjusted to match your 70px nav height door setting */
    min-height: calc(100svh - 70px); 
  }
}

/* ===============================
   LARGE TV / WALL DISPLAY
=============================== */
@media (min-width: 1600px) {
  .channel-player {
    min-height: 100svh;
  }
}