/* SecureView embedded blocks. Nothing here may put transform / opacity / filter / clipping on the
   video or its ancestors: that would take the frame off the protected overlay. Effects on SIBLINGS
   drawn above the video (skeleton, cover) are fine: the overlay stays and they are blended on top. */
.sv-block { position: relative; display: block; width: 100%; margin: 0; -webkit-user-select: none; user-select: none; }
.sv-frame { position: relative; width: 100%; }
.sv-media { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }

.sv-skeleton { position: absolute; inset: 0; background: #eef1f4; }
.sv-kind-image .sv-skeleton {
  background: linear-gradient(100deg, #eceff3 30%, #f6f7f9 50%, #eceff3 70%) 0 0 / 300% 100%;
  animation: sv-shimmer 1.4s linear infinite;
}
.sv-kind-html .sv-skeleton {
  background:
    repeating-linear-gradient(180deg, rgba(160, 170, 182, .18) 0 0.95em, transparent 0.95em 1.7em) 0 0.35em / 100% 100% no-repeat;
  font-size: 18px;
}
@keyframes sv-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.sv-placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center; box-sizing: border-box; overflow: hidden;
  background: #f3f4f6; border: 1px dashed #c3cad3; color: #4b5563; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sv-ph-icon { width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 4px; position: relative; margin-top: 8px; opacity: .7; }
.sv-ph-icon::before { content: ""; position: absolute; left: 3px; right: 3px; top: -11px; height: 10px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }
.sv-ph-title { font-weight: 600; color: #1f2937; }
.sv-ph-text { max-width: 46ch; }
.sv-ph-action { margin-top: 4px; font: inherit; color: #fff; background: #1f5fbf; border: 0; border-radius: 6px; padding: 6px 14px; text-decoration: none; cursor: pointer; }
.sv-ph-login { background: #f4f7fb; }

/* cover: shown by the animation guard while an unsafe effect (fade, blur, rotation...) is active
   around the block. The video is hidden meanwhile, so a capture can only see the cover. */
.sv-cover { position: absolute; inset: 0; display: none; overflow: hidden; background: #e7ebf0; pointer-events: none; }
.sv-cover-img { position: absolute; inset: -32px; background: center / cover no-repeat; filter: blur(18px) saturate(1.1); }
.sv-kind-html .sv-cover {
  background-image: repeating-linear-gradient(180deg, rgba(160, 170, 182, .16) 0 0.95em, transparent 0.95em 1.7em);
  background-position: 0 0.35em; background-repeat: no-repeat; font-size: 18px;
}
.sv-covered .sv-cover { display: block; }
.sv-cover.sv-cover-fade { opacity: 0; transition: opacity .18s linear; }

/* transparent hotspots over links inside text blocks (they draw nothing, so protection is kept) */
.sv-links { position: absolute; inset: 0; pointer-events: none; }
.sv-link { position: absolute; display: block; pointer-events: auto; cursor: pointer; background: transparent; }
.sv-link:focus { outline: none; }
.sv-link:focus-visible { outline: 2px solid #1f5fbf; outline-offset: 1px; }

/* the whole image is a transparent zoom button */
.sv-zoom { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.sv-zoom:focus { outline: none; }
.sv-block:has(.sv-zoom:focus-visible) { outline: 2px solid #1f5fbf; outline-offset: 3px; }

.sv-block:fullscreen { display: flex; align-items: center; justify-content: center; width: 100vw; height: 100vh; background: #000; }
.sv-block:fullscreen .sv-frame { aspect-ratio: auto !important; width: 100%; height: 100%; background: #000 !important; }
.sv-block:fullscreen .sv-zoom { cursor: zoom-out; }
.sv-block:fullscreen .sv-links { display: none; }

.sv-hidden { display: none !important; }