@charset "utf-8";

.streamerCountdownBackdrop { position: fixed; inset: 0px; z-index: 1200; background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: 0.25s ease-out 0s 1 normal none running streamerFadeIn; }

.streamerCountdownNumber { font-size: 120px; font-weight: 900; color: rgb(255, 255, 255); line-height: 1; animation: 0.4s ease-out 0s 1 normal none running streamerCountdownPop; }

[class*="is-mobile"] .streamerCountdownNumber { font-size: 80px; }

.streamerCountdownLabel { font-size: 18px; font-weight: 600; color: rgba(255, 255, 255, 0.65); margin-top: 16px; letter-spacing: 0.08em; text-transform: uppercase; }

.streamerPreparingBackdrop { position: fixed; inset: 0px; z-index: 1200; background: rgba(0, 0, 0, 0.75); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: 0.2s ease-out 0s 1 normal none running streamerFadeIn; }

.streamerPreparingLabel { font-size: 16px; color: rgba(255, 255, 255, 0.8); margin-top: 20px; font-weight: 500; letter-spacing: 0.04em; }

.streamerBroadcastDraggable { position: fixed; top: calc(var(--desktop-header-full-height) + 50px); bottom: 5vh; width: 72px; z-index: 999; cursor: default; }

[dir="ltr"] .streamerBroadcastDraggable { left: 10vw; }

[dir="rtl"] .streamerBroadcastDraggable { right: 10vw; }

.layout-bc:has(.streamerBroadcastDraggable.react-draggable-dragging) .layout-content-holder-bc { opacity: 0.5; }

.streamerControlsBar { width: 100%; height: 100%; padding: 24px 16px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative; border-radius: 40px; background: rgba(var(--b-sc),.2); overflow: hidden; }

.streamerControlsBar::before { content: ""; position: absolute; inset: 0px; background: rgba(var(--b),1); z-index: -1; }

.streamerControlActions { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }

.feedStreamViewerViewerCountUnique { color: rgba(var(--b-sc),1); display: inline-flex; align-items: center; background: rgba(var(--b-sc),.3); border-radius: var(--border-radius); gap: 4px; padding: 2px 4px; font-size: 12px; }

.feedStreamViewerViewerCountDivider { width: 1px; height: 12px; }

.streamStreamerCount { padding: 2px 7px; display: flex; justify-content: center; align-items: center; gap: 5px; border-radius: var(--border-radius); background: rgba(var(--b-sc),.3); color: rgba(var(--b-sc),1); font-size: 12px; }

.stopStreamButton.ds-btn.ds-btn-size--md .btn__icon { width: 13px; height: 13px; }

.streamerControlsBarDragHandler { width: 100%; margin-bottom: 5px; padding: 10px 0px; display: flex; justify-content: center; align-items: center; color: rgba(var(--b-sc),.8); }

[class*="is-web"] .streamerControlsBarDragHandler:hover { cursor: grab; color: rgba(var(--b-sc),1); }

[class*="is-web"] .streamerControlsBarDragHandler:active { cursor: grabbing; }

.streamerLiveBadge { flex-shrink: 0; width: 100%; margin-bottom: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; }

.streamerLiveBadgeIcon.CMSIconSVGWrapper { width: 30px; height: 25px; color: rgb(225, 47, 47); }

.streamerLiveLabel { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(var(--b-sc),1); }

.streamerCameraPiP { position: fixed; bottom: 24px; right: 24px; z-index: 1150; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; border: 3px solid rgba(255, 255, 255, 0.25); box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 20px; background: rgb(0, 0, 0); animation: 0.35s ease-out 0s 1 normal none running streamerFadeIn; }

[class*="is-mobile"] .streamerCameraPiP { width: 160px; height: 160px; bottom: 16px; right: 16px; }

.streamerCameraPiPVideo { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.streamerRecordingDot { display: block; width: 12px; height: 12px; border-radius: 50%; background: rgb(225, 47, 47); animation: 1.4s ease-in-out 0s infinite normal none running streamerPulse; }

.streamerModalBody { padding: 16px 0px; font-size: 14px; color: rgba(var(--b-sc),.65); }

[class*="is-web"] .streamerSaveModal { min-width: 500px; }

.streamerSaveModal .ds-popup__header-content, .streamerSaveModal .streamerModalBody { text-align: center; }

.streamerModalActions { width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }

.streamerModalActions button { width: 100%; }

[class*="is-web"] .streamerModalActions { max-width: 300px; margin: 0px auto; }

[class*="is-mobile"] .streamerModalActions { padding-bottom: 16px; }

.streamerEndingBar { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1100; height: 52px; background: rgba(10, 10, 15, 0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: 500; gap: 8px; }