/*
 * Pre-roll ad gate for the movie/series player.
 *
 * By default the real player (own <video>, its controls, and third-party
 * iframe embeds alike) stays invisible + unclickable. It only becomes
 * visible once JS adds the "cmpg-ready" class to #cinemagePlayerCanvas
 * (ad finished / skipped / failed).
 *
 * Safety net: the animation below forces everything visible again after
 * 9 seconds NO MATTER WHAT — even if the ad script is blocked by an
 * ad-blocker, fails to load, or throws an error. This guarantees movies
 * stay watchable for every visitor. Don't remove this without another
 * fallback in place.
 */
.cm-player-canvas .video-placeholder,
.cm-player-canvas .cinemage-video,
.cm-player-canvas .video-controls,
.cm-player-canvas .cinemage-embed{
  visibility:hidden;
  pointer-events:none;
  animation:cmpgFailsafeReveal .01s 9s forwards;
}
.cm-player-canvas.cmpg-ready .video-placeholder,
.cm-player-canvas.cmpg-ready .cinemage-video,
.cm-player-canvas.cmpg-ready .video-controls,
.cm-player-canvas.cmpg-ready .cinemage-embed{
  visibility:visible;
  pointer-events:auto;
}
@keyframes cmpgFailsafeReveal{
  from{visibility:hidden}
  to{visibility:visible}
}

.cmpg-overlay{
  position:absolute;
  inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:16px;
  background:#000;
  color:#fff;
  text-align:center;
  padding:20px;
}
.cm-player-canvas.cmpg-ready .cmpg-overlay{display:none}

.cmpg-badge{
  position:absolute;
  top:14px;
  left:14px;
  font-size:12px;
  letter-spacing:.04em;
  color:#fff;
  background:rgba(255,255,255,.14);
  padding:4px 10px;
  border-radius:4px;
}
.cmpg-start-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:600;
  font-family:inherit;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:14px 26px;
  cursor:pointer;
}
.cmpg-start-btn:hover{background:rgba(255,255,255,.2)}
.cmpg-spinner{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  animation:cmpgSpin .8s linear infinite;
}
@keyframes cmpgSpin{to{transform:rotate(360deg)}}
.cmpg-ad-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;
}
.cmpg-skip-btn{
  position:absolute;
  bottom:16px;
  right:16px;
  font-size:13px;
  font-family:inherit;
  color:#fff;
  background:rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.4);
  border-radius:4px;
  padding:8px 14px;
  cursor:pointer;
}