/* Internal Streamline Previewer recording module styles */

.streamline-preview-root,
.main-scene.streamline-preview-root,
.streamline-preview-root.slr-no-select,
.streamline-preview-root.slr-no-select * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.streamline-preview-root.slr-no-select::selection,
.streamline-preview-root.slr-no-select *::selection {
  background: transparent;
  color: inherit;
}

.streamline-preview-root.slr-no-select {
  -webkit-tap-highlight-color: transparent;
}

.streamline-preview-root.slr-no-select:focus {
  outline: none;
}

.streamline-ad-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

#creativeLink.slr-overlay-transitioning,
#bl_fif.slr-overlay-transitioning {
  visibility: hidden !important;
  opacity: 0 !important;
}

.streamline-ad-stage.slr-layout-reset {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/*hide the "press play" hero image as soon as Record is clicked*/
body.slr-awaiting-permission #templateContainer,
body.slr-awaiting-permission #hero,
body.slr-awaiting-permission .ready-to-watch-container {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

body.slr-awaiting-permission .record-instructions {
  display: none !important;
}

body.slr-awaiting-permission #contentBody {
  background-image: var(--slr-permission-bg, none) !important;
}

body.slr-recording-active .main-bg,
body.slr-recording-active .header,
body.slr-recording-active .footer,
body.slr-recording-active .remote-container,
body.slr-recording-active .ready-to-watch-container,
body.slr-recording-active .warning-screen,
body.slr-recording-active .mobile-screen,
body.slr-recording-active .flavor-content,
body.slr-recording-active .template-container,
body.slr-recording-active #hero,
body.slr-recording-active .preloader {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.slr-recording-active #contentBody {
  background-image: none !important;
}

body.slr-recording-active .main-scene {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0a0a0a;
}

body.slr-recording-active .main-container.slr-recording-expanded {
  position: fixed !important;
  inset: 0 !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
}

body.slr-recording-active .player-holder.slr-recording-player {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 10 !important;
}

body.slr-recording-active .player-holder.slr-recording-player .video-js {
  width: 100% !important;
  height: 100% !important;
}

body.slr-recording-active #content_video,
body.slr-recording-active .video-js video {
  pointer-events: none;
}

.streamline-preview-root.slr-fullscreen-active,
.main-scene.slr-fullscreen-active {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0a0a;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.streamline-preview-root.slr-fullscreen-active.slr-letterbox-1080p
  .streamline-ad-stage,
.main-scene.slr-fullscreen-active.slr-letterbox-1080p #streamline-ad-stage {
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  aspect-ratio: 16 / 9;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  margin: auto;
}

.slr-rec-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2147483646;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 13px;
  pointer-events: none;
}

.slr-rec-indicator--hidden {
  display: none !important;
}

.slr-rec-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e22;
  animation: slr-pulse 1.2s ease-in-out infinite;
}

@keyframes slr-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}

.slr-rec-indicator-label {
  font-weight: 600;
  letter-spacing: 0.06em;
}

.slr-rec-indicator-time {
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}

.slr-inline-error {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2147483647;
  max-width: min(560px, 92vw);
  padding: 14px 18px;
  background: #3a1414;
  color: #fdd;
  border: 1px solid #822;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
}

.slr-interrupt-banner {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  z-index: 2147483647;
  max-width: min(520px, 92vw);
  padding: 12px 16px;
  background: #2a2410;
  color: #fec;
  border: 1px solid #864;
  border-radius: 8px;
  font-family: system-ui, sans-serif;
  font-size: 14px;
}

.slr-completion-banner {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483647;
  max-width: min(400px, 94vw);
  font-family: system-ui, sans-serif;
}

.slr-completion-banner-inner {
  background: #1a1d24;
  color: #e8eaef;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  border: 1px solid #333842;
}

.slr-completion-banner-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.slr-completion-banner-meta {
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.9;
  margin-bottom: 14px;
}

.slr-completion-banner-download,
.slr-completion-banner-dismiss {
  display: inline-block;
  margin-right: 8px;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 13px;
}

.slr-completion-banner-download {
  background: #2d6cdf;
  color: #fff;
}

.slr-completion-banner-dismiss {
  background: #333842;
  color: #e8eaef;
}

.record-btn.slr-record-btn--disabled,
.record-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

body.slr-recording-active .record-instructions {
  display: none !important;
}

/* Hide the entire record/share button strip during recording */
body.slr-recording-active .record-btn-wrapper,
body.slr-recording-active .share-btn-wrapper,
body.slr-recording-active .header-actions {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/*
 * During recording startup (slr-ad-loading), hide anything that can flash
 * a white or off-colour box before the ad surface is ready:
 *  - #bl_fif / #creativeLink: BL SDK creates these with z-index MAX (2147483647)
 *    and src="about:blank" before content loads.
 *  - VJS chrome: control bar, big-play button, loading spinner, and the poster
 *    element's default empty state can all briefly render white/light.
 * slr-ad-loading is removed in focusAdSurface() once the ad iframe is confirmed present.
 */
body.slr-recording-active.slr-ad-loading #bl_fif,
body.slr-recording-active.slr-ad-loading #creativeLink,
body.slr-recording-active.slr-ad-loading .vjs-control-bar,
body.slr-recording-active.slr-ad-loading .vjs-big-play-button,
body.slr-recording-active.slr-ad-loading .vjs-loading-spinner,
body.slr-recording-active.slr-ad-loading .vjs-modal-dialog {
  opacity: 0 !important;
  pointer-events: none !important;
}