/* ==========================================================
   GAYZZEE
   CINEMA ON DEMAND
   LIVEKIT CINEMA EXPERIENCE
========================================================== */


/* ==========================================================
   TOOLBAR
========================================================== */

.cinema-live-heading {
  min-width: 0;
}

.cinema-live-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.cinema-live-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;

  min-height: 34px !important;
  padding: 0 12px !important;

  border: 1px solid rgba(185, 88, 255, 0.52) !important;
  border-radius: 9px !important;

  color: #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #572276,
      #311442
    ) !important;

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.045),
    0 6px 18px rgba(0, 0, 0, 0.24) !important;

  font-family: inherit !important;
  font-size: 9px !important;
  font-weight: 800 !important;

  white-space: nowrap;

  cursor: pointer;

  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease;
}

.cinema-live-action > span {
  font-size: 13px;
  line-height: 1;
}

.cinema-live-action > strong {
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
}

.cinema-live-action:hover:not(:disabled) {
  border-color: #ef55d4 !important;

  background:
    linear-gradient(
      135deg,
      #7c2ca0,
      #4c1b69
    ) !important;

  box-shadow:
    0 0 20px rgba(215, 67, 218, 0.2) !important;

  transform: translateY(-1px);
}

.cinema-live-action:disabled {
  color: #73667e !important;

  border-color: rgba(130, 92, 149, 0.22) !important;

  background:
    linear-gradient(
      135deg,
      #211827,
      #18111e
    ) !important;

  box-shadow: none !important;

  opacity: 1 !important;

  cursor: default;
}

.cinema-live-action.is-active {
  color: #ffffff !important;

  border-color: rgba(255, 67, 190, 0.9) !important;

  background:
    linear-gradient(
      135deg,
      #922164,
      #64226e
    ) !important;

  box-shadow:
    0 0 20px rgba(239, 75, 200, 0.16) !important;
}

#cinemaMicButton.is-active {
  border-color: rgba(67, 212, 255, 0.82) !important;

  background:
    linear-gradient(
      135deg,
      #165b78,
      #493076
    ) !important;
}

#cinemaSwitchCamButton {
  background:
    linear-gradient(
      135deg,
      #263f79,
      #3e245e
    ) !important;
}

.cinema-live-action-subtle {
  background:
    linear-gradient(
      135deg,
      #28202f,
      #1b151f
    ) !important;
}

.header-icon-button[aria-label="Webcam"] {
  display: none !important;
}


/* ==========================================================
   ARENA
========================================================== */

.cinema-live-arena {
  position: relative !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr) !important;

  grid-template-rows:
    126px
    minmax(0, 1fr)
    126px !important;

  gap: 11px !important;

  min-height: 0 !important;

  padding: 12px !important;

  border:
    1px solid rgba(157, 88, 199, 0.23) !important;

  border-radius:
    18px !important;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(147, 50, 203, 0.15),
      transparent 39%
    ),
    linear-gradient(
      145deg,
      #120a1c,
      #08050d
    ) !important;

  overflow: hidden !important;
}

.cinema-live-ambient {
  position: absolute;
  z-index: 0;

  left: 50%;
  top: 48%;

  width: 68%;
  height: 68%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(174, 55, 226, 0.17),
      rgba(106, 38, 161, 0.05) 48%,
      transparent 72%
    );

  filter: blur(30px);

  transform:
    translate(-50%, -50%);

  pointer-events: none;

  animation:
    cinemaAmbientPulse 8s ease-in-out infinite;
}

@keyframes cinemaAmbientPulse {
  0%,
  100% {
    opacity: 0.66;
    transform:
      translate(-50%, -50%)
      scale(0.96);
  }

  50% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.04);
  }
}


/* ==========================================================
   CAM ROWS
========================================================== */

.cinema-live-row {
  position: relative;
  z-index: 6;

  display: grid !important;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  align-items: stretch;

  gap: 11px;

  min-width: 0;
  min-height: 0;

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.cinema-live-arena.is-cams-hidden .cinema-live-row {
  opacity: 0;
  pointer-events: none;
}

.cinema-live-arena.is-cams-hidden {
  grid-template-rows:
    0
    minmax(0, 1fr)
    0 !important;
}

.cinema-live-arena.is-cams-hidden .cinema-live-player-wrap {
  width: 96% !important;
  max-width: 1180px;
}


/* ==========================================================
   EMPTY CAM SLOT
========================================================== */

.cinema-live-slot {
  position: relative;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  border:
    1px solid rgba(179, 92, 229, 0.29);

  border-radius:
    14px;

  background:
    linear-gradient(
      145deg,
      rgba(37, 20, 49, 0.97),
      rgba(14, 9, 20, 0.99)
    );

  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.025),
    0 8px 26px rgba(0, 0, 0, 0.22);

  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.cinema-live-slot-empty {
  position: absolute;
  inset: 0;

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

  gap: 6px;

  color: #71647c;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(144, 55, 183, 0.085),
      transparent 60%
    );
}

.cinema-live-slot-empty-icon {
  display: grid;
  place-items: center;

  width: 35px;
  height: 35px;

  border:
    1px solid rgba(175, 102, 211, 0.19);

  border-radius:
    11px;

  color:
    #8b759a;

  background:
    rgba(147, 65, 188, 0.07);

  font-size:
    15px;
}

.cinema-live-slot-empty-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cinema-live-slot-empty-copy strong {
  color: #877692;

  font-size: 8px;

  font-weight: 700;

  text-transform: none !important;
}

.cinema-live-slot-empty-copy small {
  display: none;
}


/* ==========================================================
   ACTIVE CAMERA
========================================================== */

.cinema-live-slot.has-camera {
  cursor: pointer;
}

.cinema-live-slot.has-camera:hover {
  border-color:
    rgba(239, 74, 205, 0.86);

  box-shadow:
    0 0 28px rgba(207, 65, 213, 0.23),
    0 10px 28px rgba(0, 0, 0, 0.3);

  transform:
    translateY(-2px)
    scale(1.008);
}

.cinema-live-slot.is-selected {
  border-color:
    #ef4bc8;

  box-shadow:
    0 0 0 1px rgba(239, 75, 200, 0.25),
    0 0 29px rgba(239, 75, 200, 0.27);
}

.cinema-live-slot.is-speaking {
  border-color:
    #46e7bb;

  box-shadow:
    0 0 0 1px rgba(70, 231, 187, 0.32),
    0 0 28px rgba(70, 231, 187, 0.3);

  animation:
    cinemaSpeakerPulse 1.45s ease-in-out infinite;
}

@keyframes cinemaSpeakerPulse {
  0%,
  100% {
    box-shadow:
      0 0 0 1px rgba(70, 231, 187, 0.28),
      0 0 20px rgba(70, 231, 187, 0.18);
  }

  50% {
    box-shadow:
      0 0 0 2px rgba(70, 231, 187, 0.4),
      0 0 34px rgba(70, 231, 187, 0.38);
  }
}

.cinema-live-cam {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  padding: 0;

  border: 0;

  color: #fff;

  background:
    #09060d;

  cursor:
    pointer;

  overflow:
    hidden;
}

.cinema-live-cam-media {
  position: absolute;

  inset: 0;

  display: grid;
  place-items: center;

  overflow: hidden;
}

.cinema-live-cam-video {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit:
    cover;

  background:
    #08050b;
}

.cinema-live-cam-avatar {
  display: grid;

  place-items: center;

  width: 100%;
  height: 100%;

  color:
    #f4eaff;

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(156, 68, 210, 0.4),
      rgba(23, 12, 31, 0.98) 68%
    );

  font-size:
    27px;

  font-weight:
    800;
}

.cinema-live-cam-overlay {
  position: absolute;

  inset:
    auto 0 0;

  z-index:
    5;

  display: flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    8px;

  min-height:
    44px;

  padding:
    18px 10px 8px;

  background:
    linear-gradient(
      transparent,
      rgba(3, 2, 6, 0.9)
    );
}

.cinema-live-cam-name {
  overflow:
    hidden;

  color:
    #ffffff;

  font-size:
    9px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.cinema-live-cam-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  flex:
    0 0 auto;

  color:
    #d7c8df;

  font-size:
    10px;
}

.cinema-live-cam-live {
  position:
    absolute;

  top:
    8px;

  left:
    9px;

  z-index:
    5;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    3px 7px;

  border:
    1px solid rgba(255, 255, 255, 0.1);

  border-radius:
    7px;

  color:
    #ffffff;

  background:
    rgba(5, 3, 8, 0.7);

  font-size:
    7px;

  font-weight:
    800;

  letter-spacing:
    0.08em;

  backdrop-filter:
    blur(7px);
}

.cinema-live-cam-live::before {
  content:
    "";

  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    #2de293;

  box-shadow:
    0 0 8px rgba(45, 226, 147, 0.8);
}


/* ==========================================================
   PLAYER
========================================================== */

.cinema-live-player-wrap {
  position:
    relative !important;

  z-index:
    4 !important;

  grid-column:
    1 !important;

  grid-row:
    2 !important;

  display:
    grid !important;

  grid-template-rows:
    minmax(0, 1fr)
    54px !important;

  width:
    87% !important;

  max-width:
    1010px;

  min-width:
    0;

  min-height:
    0;

  justify-self:
    center;

  transition:
    width 180ms ease;
}

.cinema-live-player-wrap .ondemand-screen {
  min-height:
    0;

  border:
    1px solid rgba(204, 111, 255, 0.46);

  border-radius:
    15px;

  background:
    #050407;

  box-shadow:
    0 0 0 6px rgba(136, 57, 205, 0.03),
    0 0 40px rgba(143, 51, 201, 0.21),
    0 26px 55px rgba(0, 0, 0, 0.42);
}


/* ==========================================================
   INTERNAL CAMERA PIP
========================================================== */

.cinema-live-pip {
  position:
    absolute;

  right:
    14px;

  bottom:
    82px;

  z-index:
    40;

  display:
    grid;

  grid-template-rows:
    minmax(0, 1fr)
    39px;

  width:
    clamp(
      235px,
      28%,
      330px
    );

  aspect-ratio:
    16 / 10;

  overflow:
    hidden;

  border:
    1px solid rgba(243, 80, 209, 0.72);

  border-radius:
    14px;

  background:
    #07040a;

  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.68),
    0 0 30px rgba(224, 67, 209, 0.23);

  cursor:
    default;

  user-select:
    none;
}

.cinema-live-pip.is-speaking {
  border-color:
    #46e7bb;

  box-shadow:
    0 18px 52px rgba(0, 0, 0, 0.68),
    0 0 32px rgba(70, 231, 187, 0.34);
}

.cinema-live-pip[hidden] {
  display:
    none !important;
}

.cinema-live-pip-video {
  position:
    relative;

  min-height:
    0;

  overflow:
    hidden;

  background:
    radial-gradient(
      circle at center,
      #291336,
      #08050b 70%
    );
}

.cinema-live-pip-video > video {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;
}

.cinema-live-pip-avatar {
  position:
    absolute;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  color:
    #eadcf2;

  font-size:
    34px;

  font-weight:
    800;
}

.cinema-live-pip-top {
  position:
    absolute;

  top:
    7px;

  left:
    8px;

  right:
    8px;

  z-index:
    5;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    8px;

  cursor:
    move;
}

.cinema-live-pip-top strong {
  max-width:
    75%;

  padding:
    4px 7px;

  overflow:
    hidden;

  border-radius:
    7px;

  color:
    #ffffff;

  background:
    rgba(4, 3, 7, 0.72);

  font-size:
    9px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  text-transform:
    none !important;

  white-space:
    nowrap;

  backdrop-filter:
    blur(7px);
}

#cinemaCamPipClose {
  display:
    grid;

  place-items:
    center;

  width:
    26px;

  height:
    26px;

  padding:
    0;

  border:
    1px solid rgba(255, 255, 255, 0.14);

  border-radius:
    50%;

  color:
    #ffffff;

  background:
    rgba(6, 4, 10, 0.82);

  font-size:
    17px;

  cursor:
    pointer;
}

.cinema-live-pip-controls {
  display:
    flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    5px 7px;

  border-top:
    1px solid rgba(177, 85, 211, 0.17);

  background:
    #120a18;
}

.cinema-live-pip-controls button {
  height:
    28px;

  min-width:
    32px;

  padding:
    0 7px;

  border:
    1px solid rgba(179, 90, 218, 0.32);

  border-radius:
    7px;

  color:
    #ffffff;

  background:
    #2a1536;

  font-size:
    9px;

  font-weight:
    700;

  cursor:
    pointer;
}

.cinema-live-pip-controls button:hover:not(:disabled) {
  border-color:
    rgba(234, 91, 217, 0.7);

  background:
    #482158;
}

.cinema-live-pip-controls button:disabled {
  opacity:
    0.35;

  cursor:
    default;
}

#cinemaCamPipVolume {
  min-width:
    55px;

  flex:
    1;

  accent-color:
    #e04ac9;
}


/* ==========================================================
   SMALLER DESKTOPS
========================================================== */

@media (max-width: 1380px) {
  .cinema-live-action {
    padding:
      0 9px !important;
  }

  .cinema-live-action > strong {
    font-size:
      8px !important;
  }

  .cinema-live-arena {
    grid-template-rows:
      108px
      minmax(0, 1fr)
      108px !important;
  }

  .cinema-live-player-wrap {
    width:
      90% !important;
  }
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 900px) {
  .cinema-live-toolbar {
    gap:
      4px;
  }

  .cinema-live-action {
    min-height:
      30px !important;

    padding:
      0 7px !important;
  }

  .cinema-live-action > strong {
    display:
      none;
  }

  .cinema-live-action > span {
    font-size:
      14px;
  }

  #cinemaSwitchCamButton {
    display:
      none !important;
  }

  .cinema-live-arena {
    grid-template-rows:
      minmax(0, 1fr)
      88px !important;

    gap:
      7px !important;

    padding:
      7px !important;
  }

  .cinema-live-row-top {
    display:
      none !important;
  }

  .cinema-live-row-bottom {
    grid-row:
      2;

    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );

    gap:
      6px;
  }

  .cinema-live-player-wrap {
    grid-row:
      1 !important;

    width:
      100% !important;
  }

  .cinema-live-slot-empty-copy {
    display:
      none;
  }

  .cinema-live-slot-empty {
    display:
      grid;

    place-items:
      center;
  }

  .cinema-live-pip {
    right:
      8px;

    bottom:
      66px;

    width:
      min(
        245px,
        70%
      );
  }
}


/* GAYZZEE_CINEMAON_DESKTOP_AV_V1 */
@media (min-width: 980px) {
  .cinema-live-cam-media,
  .cinema-live-pip-media {
    isolation: isolate;
  }

  .cinema-live-cam-video,
  .cinema-live-pip-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
  }

  .cinema-live-cam-avatar[hidden],
  .cinema-live-pip-avatar[hidden] {
    display: none !important;
  }

  .cinema-live-pip-controls,
  .cinema-live-pip-controls button,
  #cinemaCamPipVolume {
    position: relative;
    z-index: 20;
    pointer-events: auto;
    touch-action: manipulation;
  }

  #cinemaCamPipVolume {
    cursor: pointer;
  }
}