/* Branded video frame (logo, live/recorded state, title, platform over the player) and the live lower third.
   Used by the public site and by the lower-third control page, so the preview there is the real thing. */
/* covers the page for a moment after the Print Screen key (app.js, admin.js) */
.shot-guard { position: fixed; inset: 0; z-index: 2147483647; background: #000; }
img, video { -webkit-touch-callout: none; -webkit-user-drag: none; }
.vframe { position: relative; margin: 0; background: #000; overflow: hidden; container-type: inline-size; }
.vframe__media { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; }
.vframe__media iframe, .vframe__media video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.vframe__blank { position: absolute; inset: 0; background: linear-gradient(160deg, #1d2c44 0%, #050f1e 100%); }
/* permanent channel logo in the top corner (start side) */
.vframe__bug { position: absolute; top: 14px; right: 14px; z-index: 2; pointer-events: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 12px; background: rgba(255,255,255,.92); box-shadow: 0 3px 14px rgba(0,0,0,.4); border-bottom: 3px solid var(--red-600); animation: vframe-bar-in .7s cubic-bezier(.2,.8,.2,1) .2s backwards; }
[dir="ltr"] .vframe__bug { right: auto; left: 14px; }
.vframe__bug img { width: 34px; height: 34px; display: block; }
/* lower third: [logo | state | title | platform]. It steps aside while the pointer is over the player,
   which is exactly when the platform shows its own controls, so it never hides them. */
.vframe__bar { position: absolute; left: 16px; right: 16px; bottom: 18px; z-index: 2; pointer-events: none; display: flex; align-items: stretch; height: 46px; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,.45); transition: opacity .25s ease, transform .25s ease; animation: vframe-bar-in .7s cubic-bezier(.2,.8,.2,1) .4s backwards; }
.vframe:hover .vframe__bar { opacity: 0; transform: translateY(10px); }
.vframe__bar > * { display: flex; align-items: center; gap: 7px; padding: 0 14px; color: #fff; white-space: nowrap; }
.vframe__brand { flex: none; background: #fff; color: var(--navy-900) !important; font-weight: 900; font-size: .95rem; border-bottom: 3px solid var(--red-600); }
.vframe__brand img { width: 26px; height: 26px; display: block; }
.vframe__state { flex: none; background: var(--navy-600); font-size: .78rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.vframe__state .icon { width: 11px; height: 11px; }
.vframe--live .vframe__state { background: var(--red-600); }
.vframe--live .vframe__state .live-dot { display: block; flex: none; border-radius: 50%; background: #fff; width: 8px; height: 8px; animation: pulse-white 1.8s infinite; }
.vframe__title { flex: 1 1 auto; min-width: 0; background: rgba(7,21,40,.9); font-weight: 800; font-size: 1rem; }
.vframe__title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vframe__platform { flex: none; background: rgba(0,0,0,.82); font-size: .76rem; font-weight: 700; }
.vframe__platform .icon { width: 17px; height: 17px; }
.vframe__platform--youtube .icon { color: #ff3b3b; }
.vframe__platform--facebook .icon { color: #5b9bff; }
.vframe__platform--kaltura .icon { color: #8ec9ff; }
.vframe__platform--vimeo .icon { color: #4fc8f0; }
@keyframes vframe-bar-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pulse-white { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.8); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
/* the broadcast's tag next to the logo: [● state | place], changing language every few minutes */
.vframe__tag { position: absolute; top: 21px; right: 72px; z-index: 2; pointer-events: none; display: inline-flex; align-items: stretch; max-width: calc(100% - 88px); height: 36px; border-radius: 6px; overflow: hidden; box-shadow: 0 3px 14px rgba(0,0,0,.4); font-size: .95rem; font-size: clamp(.8rem, 1.7cqw, 1.05rem); font-weight: 800; color: #fff; white-space: nowrap; transition: opacity .3s ease; }
[dir="ltr"] .vframe__tag { right: auto; left: 72px; }
.vframe__tag.is-swap { opacity: 0; }
.vframe__tag > span { display: inline-flex; align-items: center; gap: 8px; padding: 0 13px; }
.vframe__tag > span[hidden] { display: none; }
.vframe__tag-state { flex: none; background: var(--navy-600); text-transform: uppercase; letter-spacing: .02em; }
.vframe--live .vframe__tag-state { background: var(--red-600); }
.vframe--live .vframe__tag-state .live-dot { display: block; flex: none; border-radius: 50%; background: #fff; width: 8px; height: 8px; animation: pulse-white 1.8s infinite; }
.vframe__tag-place { min-width: 0; overflow: hidden; text-overflow: ellipsis; background: var(--navy-900); }
/* the newsroom's line over the broadcast: a red tab with the label, then the text on a white plate */
.vframe__ticker { position: absolute; left: 16px; right: 16px; bottom: 18px; z-index: 2; pointer-events: none; display: flex; flex-direction: column; align-items: flex-start; filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); transition: opacity .25s ease, transform .25s ease; }
.vframe__ticker[hidden], .vframe__ticker-label[hidden] { display: none; }
.vframe__ticker.is-in { animation: vframe-bar-in .55s cubic-bezier(.2,.8,.2,1) backwards; }
.vframe:hover .vframe__ticker { opacity: 0; transform: translateY(10px); }
.vframe__ticker-label { max-width: 100%; padding: 5px 16px; background: var(--red-600); color: #fff; font-weight: 800; font-size: 1rem; font-size: clamp(.82rem, 2cqw, 1.2rem); line-height: 1.35; border-radius: 5px 5px 0 0; }
.vframe__ticker-text { align-self: stretch; padding: 9px 16px; background: #fff; color: var(--navy-900); font-weight: 900; font-size: 1.3rem; font-size: clamp(1rem, 3cqw, 1.9rem); line-height: 1.35; border-radius: 5px; border-bottom: 3px solid var(--red-600); overflow-wrap: anywhere; }
.vframe__ticker-label:not([hidden]) + .vframe__ticker-text { border-start-start-radius: 0; }
/* the control page keeps its preview visible under the pointer */
.vframe--preview { border-radius: var(--radius); }
.vframe--preview:hover .vframe__bar, .vframe--preview:hover .vframe__ticker { opacity: 1; transform: none; }
/* touch screens (no hover to reveal the controls): the bar sits under the video instead of covering it */
@media (hover: none) {
  .vframe__bar, .vframe__ticker { position: static; border-radius: 0; box-shadow: none; animation: none; }
  .vframe__ticker { filter: none; }
  .vframe:hover .vframe__bar, .vframe:hover .vframe__ticker { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .vframe__bar, .vframe__ticker { position: static; border-radius: 0; box-shadow: none; animation: none; }
  .vframe__ticker { filter: none; }
  .vframe__bar { height: 42px; }
  .vframe:hover .vframe__bar, .vframe:hover .vframe__ticker { opacity: 1; transform: none; }
  .vframe__bar > * { padding: 0 10px; }
  .vframe__brand span, .vframe__platform span { display: none; }
  .vframe__title { font-size: .875rem; }
  .vframe__ticker-text { font-size: 1rem; border-radius: 0; }
  .vframe__bug { top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 9px; }
  [dir="ltr"] .vframe__bug { right: auto; left: 10px; }
  .vframe__tag { top: 14px; right: 54px; height: 29px; max-width: calc(100% - 66px); font-size: .78rem; }
  [dir="ltr"] .vframe__tag { right: auto; left: 54px; }
  .vframe__tag > span { padding: 0 9px; gap: 6px; }
  .vframe__bug img { width: 26px; height: 26px; }
}
/* Facebook's player prints its own live badge in that corner: the logo and the tag close up over it */
.vframe--fb-source .vframe__bug { top: 6px; right: 6px; width: 44px; height: 44px; }
.vframe--fb-source .vframe__tag { top: 6px; right: 50px; height: 44px; border-radius: 0 0 0 6px; }
[dir="ltr"] .vframe--fb-source .vframe__bug { right: auto; left: 6px; }
[dir="ltr"] .vframe--fb-source .vframe__tag { right: auto; left: 50px; border-radius: 0 0 6px 0; }
@media (prefers-reduced-motion: reduce) { .vframe__bar, .vframe__bug, .vframe__ticker.is-in { animation: none; } }