/* ClipAd video player controls. One bar along the bottom: play, volume, elapsed, progress, remaining,
   picture-in-picture, fullscreen. No speed button. Sizes follow the reference at three widths
   (card, wide, modal) using container queries so the bar scales with the player. */
.cp-wrap { position: relative; display: block; background: #000; overflow: hidden; }
.cp-wrap > video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; cursor: pointer; }
.cp-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 8px; padding: 22px 10px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0));
  color: #fff; font: 500 10px/1 var(--font-body, system-ui); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.cp-wrap:hover .cp-bar, .cp-wrap:focus-within .cp-bar, .cp-wrap.is-paused .cp-bar, .cp-wrap.is-scrubbing .cp-bar { opacity: 1; pointer-events: auto; }
.cp-btn { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 4px; opacity: .92; }
.cp-btn:hover { opacity: 1; background: rgba(255,255,255,.16); }
.cp-btn svg { width: 14px; height: 14px; display: block; }
.cp-time { flex: none; min-width: 3.2em; text-align: center; letter-spacing: .01em; }
.cp-track { position: relative; flex: 1 1 auto; min-width: 24px; height: 16px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.cp-rail { position: relative; width: 100%; height: 2px; border-radius: 2px; background: rgba(255,255,255,.35); }
.cp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2px; background: #fff; }
.cp-knob { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform .12s ease; }
.cp-track:hover .cp-knob, .cp-wrap.is-scrubbing .cp-knob { transform: scale(1); }
.cp-wrap.is-muted .cp-vol-on, .cp-wrap:not(.is-muted) .cp-vol-off { display: none; }
.cp-wrap.is-playing .cp-ico-play, .cp-wrap:not(.is-playing) .cp-ico-pause { display: none; }
/* Narrow players (cards): drop picture-in-picture to keep the progress bar usable. */
.cp-wrap.cp-sm .cp-pip, .cp-wrap.cp-sm .cp-time { display: none; }
.cp-wrap.cp-sm .cp-bar { gap: 6px; padding: 20px 8px 6px; }
/* Wide players (modal / fullscreen): bigger hit areas and text, like the reference. */
.cp-wrap.cp-lg .cp-bar { gap: 14px; padding: 36px 20px 14px; font-size: 13px; }
.cp-wrap.cp-lg .cp-btn { width: 28px; height: 28px; }
.cp-wrap.cp-lg .cp-btn svg { width: 18px; height: 18px; }
.cp-wrap.cp-lg .cp-track { height: 20px; }
.cp-wrap.cp-lg .cp-rail { height: 3px; }
}
/* Pop-out preview: a fixed 16:9 stage (container queries need a size that does not depend on the video). */
.video-modal .cp-wrap { width: min(960px, 90vw); max-height: 86vh; aspect-ratio: 16 / 9; }
.video-modal .cp-wrap > video { width: 100%; height: 100%; max-width: none; max-height: none; min-width: 0; }
/* Window-filling fallback for "full screen" when the browser refuses the real one. */
.cp-wrap.cp-pseudo-fs { position: fixed !important; inset: 0; width: 100vw !important; height: 100vh !important; max-width: none; max-height: none !important; aspect-ratio: auto !important; z-index: 100000; border-radius: 0 !important; background: #000; }
.cp-wrap.cp-pseudo-fs .clip-expand, .cp-wrap.cp-pseudo-fs .duration-badge { display: none; }
html.cp-no-scroll { overflow: hidden; }

/* The corner expand button is replaced by the bar's full-screen button (it opens the pop-out preview). */
.cp-wrap .clip-expand { display: none; }