/* CBI protected video player (student area + admin preview) */
.cbi-player { --p-gold: #c9a45c; --p-radius: 16px; --p-font: "Cairo", "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif; }
.cbi-player {
  position: relative; background: #000; border-radius: var(--p-radius); overflow: hidden; aspect-ratio: 16 / 9;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none;
  box-shadow: 0 20px 60px rgba(0,0,0,.45); isolation: isolate;
}
.cbi-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cbi-player .p-shield { position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.p-wm { position: absolute; z-index: 3; pointer-events: none; transition: left 2.5s ease, top 2.5s ease; left: 10%; top: 12%; }
.p-wm span { display: inline-block; font: 600 13px/1.2 var(--p-font); color: rgba(255,255,255,.34); text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; letter-spacing: .02em; }
.p-wm-corner { position: absolute; z-index: 3; pointer-events: none; right: 14px; top: 12px; font: 600 11px/1 var(--p-font); color: rgba(255,255,255,.16); }
.p-big {
  position: absolute; z-index: 4; inset: 0; margin: auto; width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); background: rgba(12,11,10,.55);
  backdrop-filter: blur(8px); color: #fff; cursor: pointer; transition: transform .2s, opacity .2s;
}
.p-big:hover { transform: scale(1.06); }
.cbi-player.is-playing .p-big, .cbi-player.is-loading .p-big { opacity: 0; pointer-events: none; }
.cbi-player.is-started.is-paused .p-big { opacity: 1; pointer-events: auto; }
.p-spinner { position: absolute; z-index: 4; inset: 0; margin: auto; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--p-gold); animation: p-spin .8s linear infinite; opacity: 0; pointer-events: none; transition: opacity .2s; }
.cbi-player.is-loading .p-spinner { opacity: 1; }
@keyframes p-spin { to { transform: rotate(360deg); } }
.p-bar {
  position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 30px 12px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; opacity: 0; transition: opacity .25s;
}
.cbi-player:not(.is-started) .p-bar { display: none; }
.cbi-player.is-active .p-bar, .cbi-player.is-paused .p-bar, .cbi-player:focus-within .p-bar { opacity: 1; }
.p-btn { background: none; border: 0; color: #fff; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; border-radius: 8px; flex: none; font: 700 13px var(--p-font); }
.p-btn:hover { background: rgba(255,255,255,.12); }
.p-btn svg { width: 22px; height: 22px; }
.p-play .i-pause, .cbi-player.is-playing .p-play .i-play { display: none; }
.cbi-player.is-playing .p-play .i-pause { display: block; }
.p-mute .i-muted, .cbi-player.is-muted .p-mute .i-vol { display: none; }
.cbi-player.is-muted .p-mute .i-muted { display: block; }
.p-time { font: 600 12.5px var(--p-font); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 4px; color: rgba(255,255,255,.9); }
.p-seek { position: relative; flex: 1; height: 38px; display: flex; align-items: center; min-width: 60px; }
.p-track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 4px; background: rgba(255,255,255,.22); overflow: hidden; }
.p-buf { position: absolute; inset-block: 0; left: 0; background: rgba(255,255,255,.3); width: 0; }
.p-fill { position: absolute; inset-block: 0; left: 0; background: var(--p-gold); width: 0; }
.p-seek input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; margin: 0; }
.p-seek:hover .p-track { height: 6px; }
.p-rate { width: auto; padding: 0 8px; }
.p-error { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.85); color: #fff; text-align: center; padding: 20px; }
.p-error[hidden] { display: none; }
.cbi-player:fullscreen, .cbi-player:-webkit-full-screen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.cbi-player.is-theater { position: fixed; inset: 0; z-index: 1000; border-radius: 0; aspect-ratio: auto; width: 100vw; height: 100dvh; }
html.player-theater, html.player-theater body { overflow: hidden; }