/* ==========================================================
   GAY PLATFORM 3.0
   PERMANENTE PLAYER BRANDING
========================================================== */

.tv-player-watermark {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 50;

  display: block;

  width: clamp(72px, 8.5%, 170px);
  height: auto;

  object-fit: contain;

  opacity: 0.92;

  pointer-events: none;
  user-select: none;

  filter:
    drop-shadow(
      0 3px 10px
      rgba(0, 0, 0, 0.7)
    );
}


.tv-content-rating {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 50;

  display: grid;
  place-items: center;

  min-width: 54px;
  height: 42px;
  padding: 0 10px;

  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 9px;

  color: #ffffff;

  background:
    rgba(178, 24, 48, 0.93);

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.48),
    0 0 18px rgba(220, 38, 70, 0.2);

  font-family: inherit;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;

  pointer-events: none;
  user-select: none;

  backdrop-filter: blur(5px);
}


/* ==========================================================
   FULLSCREEN
========================================================== */

:fullscreen .tv-player-watermark {
  top: clamp(22px, 2vh, 34px);
  right: clamp(22px, 2vw, 34px);

  width: clamp(100px, 8vw, 180px);
  max-width: 180px;
}

:fullscreen .tv-content-rating {
  top: clamp(22px, 2vh, 34px);
  left: clamp(22px, 2vw, 34px);

  min-width: 72px;
  height: 54px;

  padding: 0 13px;

  border-width: 3px;

  font-size: 25px;
}


:-webkit-full-screen .tv-player-watermark {
  top: 28px;
  right: 28px;

  width: 160px;
  max-width: 180px;
}

:-webkit-full-screen .tv-content-rating {
  top: 28px;
  left: 28px;

  min-width: 72px;
  height: 54px;

  font-size: 25px;
}


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

@media (max-width: 900px) {
  .tv-player-watermark {
    top: 10px;
    right: 10px;

    width: clamp(62px, 15vw, 95px);
  }

  .tv-content-rating {
    top: 10px;
    left: 10px;

    min-width: 45px;
    height: 34px;

    padding: 0 8px;

    font-size: 15px;
  }
}


/* ==========================================================
   CINEMA ON DEMAND
   TV BRANDING - DEFINITIEVE POSITIE
========================================================== */

/* Het oude ▶ ON DEMAND label bovenaan verbergen */
#ondemandScreen .ondemand-pill {
  display: none !important;
}


/* Logo rechtsboven */
#ondemandScreen .tv-player-watermark {
  top: 18px !important;
  right: 18px !important;

  width: clamp(
    90px,
    8.5%,
    165px
  ) !important;

  max-width: 165px !important;

  height: auto !important;

  z-index: 60 !important;
}


/* Bestaande 18+ net links van het logo */
#ondemandScreen .quality-pill {
  position: absolute !important;

  top: 50% !important;
  right: calc(
    clamp(90px, 8.5%, 165px) + 13px
  ) !important;

  transform: translateY(-50%) !important;

  z-index: 61 !important;

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

  min-width: 52px !important;
  height: 32px !important;

  padding: 0 10px !important;

  border:
    2px solid rgba(255, 255, 255, 0.28) !important;

  border-radius: 8px !important;

  color: #ffffff !important;

  background:
    rgba(17, 12, 22, 0.92) !important;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.48) !important;

  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  pointer-events: none !important;
}


/*
 * Omdat .quality-pill oorspronkelijk in .player-topbar zit,
 * plaatsen we de volledige topbar exact rond het logo.
 */
#ondemandScreen .player-topbar {
  position: absolute !important;

  top: 18px !important;
  right: 18px !important;
  left: auto !important;

  width: auto !important;
  height: clamp(
    48px,
    6vw,
    100px
  ) !important;

  z-index: 59 !important;

  display: block !important;

  pointer-events: none !important;
}


/* ==========================================================
   FULLSCREEN
========================================================== */

#ondemandScreen:fullscreen .tv-player-watermark {
  top: 26px !important;
  right: 28px !important;

  width: clamp(
    115px,
    8vw,
    175px
  ) !important;

  max-width: 175px !important;
}


#ondemandScreen:fullscreen .player-topbar {
  top: 26px !important;
  right: 28px !important;

  height: clamp(
    60px,
    7vw,
    110px
  ) !important;
}


#ondemandScreen:fullscreen .quality-pill {
  right: calc(
    clamp(115px, 8vw, 175px) + 15px
  ) !important;

  min-width: 60px !important;
  height: 36px !important;

  font-size: 18px !important;
}


/* Chrome / WebKit fullscreen */
#ondemandScreen:-webkit-full-screen .tv-player-watermark {
  top: 26px !important;
  right: 28px !important;

  width: 160px !important;
}


#ondemandScreen:-webkit-full-screen .player-topbar {
  top: 26px !important;
  right: 28px !important;

  height: 100px !important;
}


#ondemandScreen:-webkit-full-screen .quality-pill {
  right: 175px !important;

  min-width: 60px !important;
  height: 36px !important;

  font-size: 18px !important;
}


/* ==========================================================
   CINEMA ON DEMAND
   DEFINITIEVE TV BRANDING POSITIE
========================================================== */

#ondemandScreen .tv-player-watermark {
  top: 18px !important;
  right: 18px !important;

  width: clamp(90px, 8.5%, 165px) !important;
  max-width: 165px !important;

  z-index: 60 !important;
}


/* 18+ rechts uitgelijnd, direct onder het TV-logo */
#ondemandScreen .tv-rating-under-logo {
  position: absolute !important;

  top: 70px !important;
  right: 18px !important;

  z-index: 61 !important;

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

  min-width: 52px !important;
  height: 32px !important;

  padding: 0 10px !important;

  border: 2px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 8px !important;

  color: #ffffff !important;

  background: rgba(17, 12, 22, 0.92) !important;

  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.48) !important;

  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  transform: none !important;

  pointer-events: none !important;
  user-select: none !important;
}


/* ON DEMAND-label blijft linksboven uit de weg */
#ondemandScreen .player-topbar {
  top: 15px !important;
  left: 15px !important;
  right: 15px !important;

  width: auto !important;
  height: auto !important;

  display: flex !important;
  justify-content: flex-start !important;
}


/* ==========================================================
   FULLSCREEN
========================================================== */

#ondemandScreen:fullscreen .tv-player-watermark {
  top: 26px !important;
  right: 28px !important;

  width: clamp(115px, 8vw, 175px) !important;
  max-width: 175px !important;
}

#ondemandScreen:fullscreen .tv-rating-under-logo {
  top: 92px !important;
  right: 28px !important;

  min-width: 60px !important;
  height: 36px !important;

  font-size: 18px !important;
}


#ondemandScreen:-webkit-full-screen .tv-player-watermark {
  top: 26px !important;
  right: 28px !important;

  width: 160px !important;
}

#ondemandScreen:-webkit-full-screen .tv-rating-under-logo {
  top: 92px !important;
  right: 28px !important;

  min-width: 60px !important;
  height: 36px !important;

  font-size: 18px !important;
}