/* =========================================
   PLATFORM-NEUTRAL LIVESTREAM OUTPUT
   Video.js + Alkalema presentation overlay
========================================= */

.abrcp-stream-output {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000 !important;
    background-image: none !important;
    box-sizing: border-box;
    direction: rtl;
}

.abrcp-stream-stage {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}


.abrcp-stream-status {
    position: absolute;
    inset: auto 50% 50% auto;
    transform: translate(50%, 50%);
    z-index: 45;
    max-width: min(90vw, 520px);
    padding: 16px 20px;
    border-radius: 14px;
    background: rgba(0,0,0,.72);
    color: #fff;
    text-align: center;
    font-family: var(--abrcp-overlay-font-family, "Noto Kufi Arabic"), sans-serif;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.abrcp-stream-status[hidden] { display:none; }
.abrcp-stream-status-icon { font-size: 24px; margin-bottom: 4px; }
.abrcp-stream-status-title { font-weight: 800; font-size: 14px; }
.abrcp-stream-status-text { margin-top: 5px; font-size: 11px; opacity:.82; line-height:1.8; }
.abrcp-stream-status.is-error { background: rgba(120, 0, 0, .82); }

/* =========================================
   VIDEO PLAYER
========================================= */

/* Prevent the raw HTML5 video element from flashing before Video.js initializes. */
.abrcp-stream-output .live-stream-wrapper {
    width: 100%;
    position: relative;
}

.abrcp-stream-output .live-stream-wrapper[style*="visibility:hidden"] {
    visibility: hidden !important;
}

.abrcp-stream-output .abrcp-vjs-custom.video-js {
    width: var(--stream-player-width,100%) !important;
    max-width: var(--stream-player-max-width,1920px) !important;
    height: auto !important;
    aspect-ratio: var(--stream-player-aspect,16/9);
    max-height: 100vh;
    margin-inline: auto;
    border-radius: 0 !important;
    overflow: hidden;
    background: #000;
}

.abrcp-stream-output .abrcp-vjs-custom.video-js video {
    object-fit: var(--stream-player-object-fit,contain) !important;
    border-radius: 0 !important;
}

/* Keep the Video.js player and wrapper square on all viewport sizes. */
.abrcp-stream-output .live-stream-wrapper,
.abrcp-stream-output .abrcp-vjs-custom.video-js,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-tech {
    border-radius: 0 !important;
}

/* Control bar background */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control-bar {
    background: color-mix(in srgb,var(--stream-player-control-bg,#000000) calc(var(--stream-player-control-opacity,.75)*100%),transparent) !important;
    height: var(--stream-player-control-height,4em);
}

/* All control icons color */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control {
    color: #ffffff !important;
    width: 4em;
}

/* Play button icon */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control .vjs-icon-placeholder:before {
    color: var(--stream-player-play,#ff0000) !important;
    font-size: 2.2em !important;
}

/* Volume icon */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-icon-placeholder:before {
    color: var(--stream-player-volume,#00ffcc) !important;
    font-size: 2.2em !important;
}

/* Fullscreen icon */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    color: var(--stream-player-fullscreen,#ffff00) !important;
}

/* Progress bar played color */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-progress {
    background-color: var(--stream-player-progress,#ff0000) !important;
}

/* Volume level color */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-level {
    background-color: var(--stream-player-volume-level,#00ffcc) !important;
}

/* Robust Video.js 8 SVG/font-icon color overrides.
   Video.js 8 can render icons as inline SVG; color the button, icon
   placeholder, SVG and <use> so both icon modes follow the saved color. */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control .vjs-icon-placeholder,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control .vjs-icon-placeholder svg,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control .vjs-icon-placeholder use {
    color: var(--stream-player-play,#ff0000) !important;
    fill: var(--stream-player-play,#ff0000) !important;
}

.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-mute-control,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-icon-placeholder,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-icon-placeholder svg,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-icon-placeholder use {
    color: var(--stream-player-volume,#00ffcc) !important;
    fill: var(--stream-player-volume,#00ffcc) !important;
}

.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control .vjs-icon-placeholder,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control .vjs-icon-placeholder svg,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control .vjs-icon-placeholder use {
    color: var(--stream-player-fullscreen,#ffff00) !important;
    fill: var(--stream-player-fullscreen,#ffff00) !important;
}

.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control .vjs-icon-placeholder:before,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-icon-placeholder:before,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    color: inherit !important;
}

.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-progress,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-progress:before {
    background-color: var(--stream-player-progress,#ff0000) !important;
    background: var(--stream-player-progress,#ff0000) !important;
}

.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-level,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-level:before {
    background-color: var(--stream-player-volume-level,#00ffcc) !important;
    background: var(--stream-player-volume-level,#00ffcc) !important;
}

/* Big center play button */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-big-play-button {
    background-color: color-mix(in srgb,var(--stream-player-big-bg,#000000) calc(var(--stream-player-big-bg-opacity,.7)*100%),transparent) !important;
    border-color: var(--stream-player-big-border,#ff0000) !important;
    color: var(--stream-player-play,#ff0000) !important;
    font-size: 3em !important;
}

/* =========================================
   LIVE PRESENTATION OVERLAY
========================================= */

.abrcp-stream-card {
    position: absolute;
    z-index: 50;
    box-sizing: border-box;
    width: var(--abrcp-overlay-rect-width,760px);
    max-width: min(90vw, 1100px);
    padding: 20px 28px;
    border-radius: var(--abrcp-overlay-radius, 12px);
    background: var(--abrcp-overlay-bg-rgba, rgba(0, 0, 0, var(--stream-bg-opacity, .62)));
    color: var(--abrcp-overlay-text, #fff);
    text-align: center;
    font-family: "Noto Kufi Arabic", sans-serif;
    transform-origin: center center;
    transform: scale(var(--stream-scale, 1));
    font-size: calc(1rem * var(--stream-font-scale, 1));
    box-sizing: border-box;
    box-shadow: var(--abrcp-overlay-shadow, none);
    opacity: 0;
    transition: opacity var(--abrcp-overlay-fade, var(--stream-fade, 1000ms)) ease;
    line-height: 1.9;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: var(--abrcp-overlay-justify, center);
}

 .abrcp-stream-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: var(--abrcp-overlay-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: var(--abrcp-overlay-bg-image-opacity, 0);
    pointer-events: none;
    z-index: 0;
}
.abrcp-stream-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--abrcp-overlay-bg-image-overlay-color, #000000);
    opacity: var(--abrcp-overlay-bg-image-overlay-opacity, 0);
    pointer-events: none;
    z-index: 0;
}
.abrcp-stream-card > * { position: relative; z-index: 1; }

.abrcp-stream-output.stream-shape-normal .abrcp-stream-card {
    width: var(--abrcp-overlay-rect-width,760px) !important;
    min-width: 0;
    max-width: min(90vw, 1100px) !important;
}

.abrcp-stream-output.stream-shape-square .abrcp-stream-card {
    width: var(--abrcp-overlay-square-width, 420px) !important;
    max-width: none !important;
}

.abrcp-stream-card.is-visible {
    opacity: 1;
}

.abrcp-stream-card[hidden] {
    display: none;
}

.abrcp-stream-card .abrcp-stream-title {
    font-size: 1.05em;
    font-weight: 800;
    margin-bottom: 8px;
    color: var(--abrcp-overlay-text, #fff);
}

.abrcp-stream-card .abrcp-stream-text {
    font-size: 1.25em;
    font-weight: 600;
    color: var(--abrcp-overlay-text, #fff);
    white-space: pre-wrap;
}

.abrcp-stream-card.abrcp-stream-bible .abrcp-stream-title {
    display: none !important;
}
.abrcp-stream-card.abrcp-stream-bible .abrcp-stream-text,
.abrcp-stream-card.abrcp-stream-hymn .abrcp-stream-text {
    font-size: calc(23px * var(--abrcp-overlay-font-factor, 1)) !important;
    font-weight: 700;
    color: var(--abrcp-overlay-text, #fff) !important;
}
.abrcp-stream-card.abrcp-stream-bible .abrcp-stream-ref {
    margin-top: 9px;
    font-size: calc(13px * var(--abrcp-overlay-font-factor, 1)) !important;
    font-weight: 700;
    color: var(--abrcp-overlay-ref, #ffd54a) !important;
    display: block;
    line-height: 1.4;
}
.abrcp-stream-card .abrcp-stream-ref {
    margin-top: 10px;
    font-size: calc(.62em * var(--abrcp-overlay-font-factor, 1));
    font-weight: 700;
    color: var(--abrcp-overlay-ref, #ffd54a) !important;
    display: block;
    line-height: 1.45;
}


/* Shared Overlay announcement typography. Explicit HTML-editor colors are preserved. */
.abrcp-stream-card .abrcp-stream-text h1,
.abrcp-stream-card .abrcp-stream-text h2,
.abrcp-stream-card .abrcp-stream-text h3,
.abrcp-stream-card .abrcp-stream-text h4,
.abrcp-stream-card .abrcp-stream-text h5,
.abrcp-stream-card .abrcp-stream-text h6,
.abrcp-stream-card .abrcp-stream-text p,
.abrcp-stream-card .abrcp-stream-text div,
.abrcp-stream-card .abrcp-stream-text span,
.abrcp-stream-card .abrcp-stream-text li {
    font-family: var(--abrcp-overlay-font-family, "Noto Kufi Arabic"), Tahoma, Arial, sans-serif !important;
    font-weight: var(--abrcp-overlay-font-weight, 500) !important;
    color: inherit;
}
.abrcp-stream-card.is-announcement .abrcp-stream-text > * {
    font-size: inherit !important;
    line-height: inherit !important;
}


/* Overlay entrance animations: animate the entire box (background + text) together. */
@keyframes abrcpOverlayFade{from{opacity:0}to{opacity:1}}
@keyframes abrcpOverlaySlideLeft{from{opacity:0;translate:-56px 0}to{opacity:1;translate:0 0}}
@keyframes abrcpOverlaySlideRight{from{opacity:0;translate:56px 0}to{opacity:1;translate:0 0}}
@keyframes abrcpOverlaySlideTop{from{opacity:0;translate:0 -46px}to{opacity:1;translate:0 0}}
@keyframes abrcpOverlaySlideBottom{from{opacity:0;translate:0 46px}to{opacity:1;translate:0 0}}
@keyframes abrcpOverlayZoom{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
@keyframes abrcpOverlayPop{from{opacity:0;scale:.72}55%{opacity:1;scale:1.04}to{opacity:1;scale:1}}
@keyframes abrcpOverlayBounce{from{opacity:0;translate:0 -28px}45%{opacity:1;translate:0 8px}70%{translate:0 -4px}to{opacity:1;translate:0 0}}
@keyframes abrcpOverlayBlur{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
@keyframes abrcpOverlayFlip{from{opacity:0;transform:perspective(700px) rotateY(-85deg)}to{opacity:1;transform:perspective(700px) rotateY(0)}}
@keyframes abrcpOverlayRotate{from{opacity:0;rotate:-8deg;scale:.94}to{opacity:1;rotate:0deg;scale:1}}
@keyframes abrcpOverlayFadeUp{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes abrcpOverlayFadeDown{from{opacity:0;translate:0 -26px}to{opacity:1;translate:0 0}}
@keyframes abrcpOverlayElasticLeft{from{opacity:0;translate:-70px 0;scale:.94}60%{opacity:1;translate:10px 0;scale:1.01}to{opacity:1;translate:0 0;scale:1}}
@keyframes abrcpOverlayElasticRight{from{opacity:0;translate:70px 0;scale:.94}60%{opacity:1;translate:-10px 0;scale:1.01}to{opacity:1;translate:0 0;scale:1}}
@keyframes abrcpOverlaySwing{from{opacity:0;rotate:-4deg}45%{opacity:1;rotate:4deg}70%{rotate:-2deg}to{opacity:1;rotate:0}}
@keyframes abrcpOverlayPulse{from{opacity:0;scale:.82}60%{opacity:1;scale:1.05}to{opacity:1;scale:1}}
@keyframes abrcpOverlayCurtain{from{opacity:0;scaleX(.1);transform-origin:right center}to{opacity:1;scaleX(1);transform-origin:right center}}
@keyframes abrcpOverlayRise{from{opacity:0;translate:0 60px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes abrcpOverlayDrop{from{opacity:0;translate:0 -60px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes abrcpOverlayTilt{from{opacity:0;rotate:-12deg;scale:.94}to{opacity:1;rotate:0;scale:1}}
.abrcp-stream-output .abrcp-stream-card.is-visible{transition:none!important}
.abrcp-stream-output.stream-anim-none .abrcp-stream-card.is-visible{animation:none!important;opacity:1!important;translate:0 0!important;scale:1!important}
.abrcp-stream-output.stream-anim-smooth-slide .abrcp-stream-card.is-visible{animation:abrcpOverlaySlideLeft var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-fade-in-out .abrcp-stream-card.is-visible{animation:abrcpOverlayFade var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-soft-zoom .abrcp-stream-card.is-visible{animation:abrcpOverlayZoom var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-fade .abrcp-stream-card.is-visible{animation:abrcpOverlayFade var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-slide-left .abrcp-stream-card.is-visible{animation:abrcpOverlaySlideLeft var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-slide-right .abrcp-stream-card.is-visible{animation:abrcpOverlaySlideRight var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-slide-top .abrcp-stream-card.is-visible{animation:abrcpOverlaySlideTop var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-slide-bottom .abrcp-stream-card.is-visible{animation:abrcpOverlaySlideBottom var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-zoom .abrcp-stream-card.is-visible{animation:abrcpOverlayZoom var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
 .abrcp-stream-output.stream-anim-swing .abrcp-stream-card.is-visible{animation:abrcpOverlaySwing var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-pulse .abrcp-stream-card.is-visible{animation:abrcpOverlayPulse var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-curtain .abrcp-stream-card.is-visible{animation:abrcpOverlayCurtain var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-rise .abrcp-stream-card.is-visible{animation:abrcpOverlayRise var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-drop .abrcp-stream-card.is-visible{animation:abrcpOverlayDrop var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-tilt .abrcp-stream-card.is-visible{animation:abrcpOverlayTilt var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
 .abrcp-stream-output.stream-anim-pop .abrcp-stream-card.is-visible{animation:abrcpOverlayPop var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-bounce .abrcp-stream-card.is-visible{animation:abrcpOverlayBounce var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-blur .abrcp-stream-card.is-visible{animation:abrcpOverlayBlur var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-flip .abrcp-stream-card.is-visible{animation:abrcpOverlayFlip var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-rotate .abrcp-stream-card.is-visible{animation:abrcpOverlayRotate var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-fade-up .abrcp-stream-card.is-visible{animation:abrcpOverlayFadeUp var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-fade-down .abrcp-stream-card.is-visible{animation:abrcpOverlayFadeDown var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-elastic-left .abrcp-stream-card.is-visible{animation:abrcpOverlayElasticLeft var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
.abrcp-stream-output.stream-anim-elastic-right .abrcp-stream-card.is-visible{animation:abrcpOverlayElasticRight var(--abrcp-overlay-animation-duration,var(--abrcp-overlay-fade,1000ms)) cubic-bezier(.22,1,.36,1) both!important}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output .abrcp-stream-card.is-visible{animation:abrcpOverlayFade 1ms linear both!important}}

/* =========================================
   POSITIONING — same seven output positions
========================================= */

.abrcp-stream-output.stream-pos-bottom-center .abrcp-stream-card {
    bottom: var(--stream-edge, 7%);
    left: 50%;
    right: auto;
    top: auto;
    transform: translateX(-50%) scale(var(--stream-scale, 1));
}

.abrcp-stream-output.stream-pos-bottom-right .abrcp-stream-card {
    bottom: var(--stream-edge, 7%);
    right: var(--stream-edge, 7%);
    left: auto;
    top: auto;
    transform: scale(var(--stream-scale, 1));
}

.abrcp-stream-output.stream-pos-bottom-left .abrcp-stream-card {
    bottom: var(--stream-edge, 7%);
    left: var(--stream-edge, 7%);
    right: auto;
    top: auto;
    transform: scale(var(--stream-scale, 1));
}

.abrcp-stream-output.stream-pos-top-center .abrcp-stream-card {
    top: var(--stream-edge, 7%);
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%) scale(var(--stream-scale, 1));
}

.abrcp-stream-output.stream-pos-top-right .abrcp-stream-card {
    top: var(--stream-edge, 7%);
    right: var(--stream-edge, 7%);
    left: auto;
    bottom: auto;
    transform: scale(var(--stream-scale, 1));
}

.abrcp-stream-output.stream-pos-top-left .abrcp-stream-card {
    top: var(--stream-edge, 7%);
    left: var(--stream-edge, 7%);
    right: auto;
    bottom: auto;
    transform: scale(var(--stream-scale, 1));
}

.abrcp-stream-output.stream-pos-center-left .abrcp-stream-card {
    top: 50%;
    left: var(--stream-edge, 7%);
    right: auto;
    bottom: auto;
    transform: translateY(-50%) scale(var(--stream-scale, 1));
    transform-origin: left center;
}

.abrcp-stream-output.stream-pos-center-right .abrcp-stream-card {
    top: 50%;
    right: var(--stream-edge, 7%);
    left: auto;
    bottom: auto;
    transform: translateY(-50%) scale(var(--stream-scale, 1));
    transform-origin: right center;
}

.abrcp-stream-output.stream-pos-center-center .abrcp-stream-card {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%) scale(var(--stream-scale, 1));
}

/* Clean overlay mode for OBS/vMix/etc. */
.abrcp-stream-output.abrcp-stream-transparent {
    width: 100vw;
    height: 100vh;
    min-height: 0;
    background: transparent !important;
    pointer-events: none;
}

.abrcp-stream-output.abrcp-stream-transparent .abrcp-stream-card {
    pointer-events: none;
}

/* Keep the presentation inside the actual Video.js video rectangle and never let it cover the player controls. */
.abrcp-stream-output .abrcp-stream-card { z-index: 10 !important; }
.abrcp-stream-output .abrcp-vjs-custom.video-js .abrcp-stream-card {
    position: absolute !important;
    z-index: 10 !important;
    pointer-events: none !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control-bar,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-menu-button-popup .vjs-menu {
    z-index: 1000 !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-big-play-button {
    z-index: 20 !important;
}

/* 4.8.5.158 — Transparent Overlay cards must remain renderable; only the
   background is transparent. The card itself is still used for text output. */
.abrcp-stream-output.abrcp-stream-transparent .abrcp-stream-card:not([hidden]) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    .abrcp-stream-output .abrcp-vjs-custom.video-js {
        position: relative !important;
        border-radius: 0;
    }
    /* Keep the presentation clear of the mobile Video.js controls. */
    .abrcp-stream-output.stream-pos-bottom-center .abrcp-stream-card,
    .abrcp-stream-output.stream-pos-bottom-right .abrcp-stream-card,
    .abrcp-stream-output.stream-pos-bottom-left .abrcp-stream-card {
        bottom: calc(var(--stream-edge, 7%) + 62px);
    }
    .abrcp-stream-card {
        width: min(88vw, 900px);
        max-width: 88vw;
        padding: 9px 12px;
        border-radius: 7px;
        line-height: 1.45;
        box-sizing: border-box;
        pointer-events: none;
        font-size: clamp(11px, .82vw, 15px) !important;
    }
    .abrcp-stream-card .abrcp-stream-title,
    .abrcp-stream-card .abrcp-stream-text {
        font-size: inherit !important;
        line-height: inherit;
    }
    .abrcp-stream-card .abrcp-stream-ref {
        font-size: clamp(9px, .58vw, 13px) !important;
        line-height: 1.35 !important;
        color: #ffd54a !important;
    }
    .abrcp-stream-card .abrcp-stream-text {
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .abrcp-stream-card .abrcp-stream-text > *,
    .abrcp-stream-card .abrcp-stream-text h1,
    .abrcp-stream-card .abrcp-stream-text h2,
    .abrcp-stream-card .abrcp-stream-text h3,
    .abrcp-stream-card .abrcp-stream-text h4,
    .abrcp-stream-card .abrcp-stream-text h5,
    .abrcp-stream-card .abrcp-stream-text h6 {
        font-size: inherit !important;
        line-height: inherit !important;
    }
}

@media (max-width: 480px) {
    .abrcp-stream-output.stream-pos-bottom-center .abrcp-stream-card,
    .abrcp-stream-output.stream-pos-bottom-right .abrcp-stream-card,
    .abrcp-stream-output.stream-pos-bottom-left .abrcp-stream-card {
        bottom: calc(var(--stream-edge, 7%) + 57px);
    }
    .abrcp-stream-card {
        width: 90vw;
        max-width: 90vw;
        padding: 8px 10px;
    }
}

/* 4.8.5.101 — Reliable standalone Stream bootstrap. */
.abrcp-stream-output.abrcp-stream-loading .live-stream-wrapper{visibility:visible!important;}
.abrcp-stream-output.abrcp-stream-loading .video-js{visibility:hidden!important;}
.abrcp-stream-output:not(.abrcp-stream-loading) .video-js{visibility:visible!important;}
.abrcp-stream-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;min-width:260px;max-width:min(88vw,560px);padding:16px 20px;border-radius:14px;background:rgba(0,0,0,.72);color:#fff;text-align:center;font-family:"Noto Kufi Arabic",sans-serif;box-sizing:border-box;box-shadow:0 12px 36px rgba(0,0,0,.28);}
.abrcp-stream-status[hidden]{display:none!important;}
.abrcp-stream-status-icon{font-size:28px;line-height:1.2;margin-bottom:4px}.abrcp-stream-status-title{font-size:15px;font-weight:800}.abrcp-stream-status-text{font-size:11px;line-height:1.8;opacity:.82;margin-top:4px}.abrcp-stream-status.is-error{background:rgba(110,0,0,.86)}

/* 4.8.5.102 — Stream output is video-only; never use the projector sky background. */
html:has(.abrcp-stream-output),
body:has(.abrcp-stream-output),
.abrcp-stream-output {
    background: #000 !important;
    background-image: none !important;
}
.abrcp-stream-output .abrcp-stream-status {
    display: none !important;
}
.abrcp-stream-output .abrcp-stream-status.is-error {
    display: block !important;
}

/* 4.8.5.103 — Stream is video-only; never show plugin status/error overlays. */
.abrcp-stream-output .abrcp-stream-status { display:none !important; visibility:hidden !important; pointer-events:none !important; }


/* 4.8.5.110 — X/Pro service output hardening. Keep Stream/Overlay pages clean
   even if a theme layer injects its normal header/footer around the content. */
html:has(.abrcp-stream-output),
body:has(.abrcp-stream-output) {
    margin: 0 !important;
    padding: 0 !important;
    background: #000 !important;
    overflow: hidden !important;
}
html:has(.abrcp-stream-output) header,
html:has(.abrcp-stream-output) footer,
body:has(.abrcp-stream-output) header,
body:has(.abrcp-stream-output) footer,
body:has(.abrcp-stream-output) .x-header,
body:has(.abrcp-stream-output) .x-footer,
body:has(.abrcp-stream-output) .x-site-header,
body:has(.abrcp-stream-output) .x-site-footer {
    display: none !important;
}
body:has(.abrcp-stream-output) .site,
body:has(.abrcp-stream-output) .x-main,
body:has(.abrcp-stream-output) .x-container,
body:has(.abrcp-stream-output) .x-main-full-width {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
}
.abrcp-stream-output {
    min-height: 100vh !important;
    width: 100vw !important;
}

/* Transparent Overlay output for OBS/vMix/browser sources. Keep the page
   genuinely transparent while leaving normal Stream playback black. */
html:has(.abrcp-stream-output.abrcp-stream-transparent),
body:has(.abrcp-stream-output.abrcp-stream-transparent),
body:has(.abrcp-stream-output.abrcp-stream-transparent) .site,
body:has(.abrcp-stream-output.abrcp-stream-transparent) .x-main,
body:has(.abrcp-stream-output.abrcp-stream-transparent) .x-container,
body:has(.abrcp-stream-output.abrcp-stream-transparent) .x-main-full-width {
    background: transparent !important;
    background-image: none !important;
}
.abrcp-stream-output.abrcp-stream-transparent {
    background: transparent !important;
    min-height: 100vh !important;
    width: 100vw !important;
}


/* 4.8.5.114 — Apply saved Video.js skin directly, matching the working Alkalema TV player CSS. */
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control-bar {
    background: var(--stream-player-control-bg, #000000) !important;
    background-color: var(--stream-player-control-bg, #000000) !important;
    opacity: var(--stream-player-control-opacity, .75) !important;
    height: var(--stream-player-control-height, 4em) !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control .vjs-icon-placeholder:before,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control .vjs-icon-placeholder::before {
    color: var(--stream-player-play, #ff0000) !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-icon-placeholder:before,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-icon-placeholder::before {
    color: var(--stream-player-volume, #00ffcc) !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control .vjs-icon-placeholder::before {
    color: var(--stream-player-fullscreen, #ffff00) !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-progress,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-slider-bar {
    background: var(--stream-player-progress, #ff0000) !important;
    background-color: var(--stream-player-progress, #ff0000) !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-level {
    background: var(--stream-player-volume-level, #00ffcc) !important;
    background-color: var(--stream-player-volume-level, #00ffcc) !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-big-play-button {
    background: var(--stream-player-big-bg, #000000) !important;
    background-color: var(--stream-player-big-bg, #000000) !important;
    border-color: var(--stream-player-big-border, #ff0000) !important;
    color: var(--stream-player-play, #ff0000) !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control .vjs-svg-icon,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-play-control svg { color: var(--stream-player-play,#ff0000) !important; fill: var(--stream-player-play,#ff0000) !important; }
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel .vjs-svg-icon,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-volume-panel svg { color: var(--stream-player-volume,#00ffcc) !important; fill: var(--stream-player-volume,#00ffcc) !important; }
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control .vjs-svg-icon,
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-fullscreen-control svg { color: var(--stream-player-fullscreen,#ffff00) !important; fill: var(--stream-player-fullscreen,#ffff00) !important; }

/* Only force controls visible when the saved Controls setting is enabled. */
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-enabled:not(.abrcp-controls-autohide) .vjs-control-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 4.8.5.122 — Optional auto-hide: Video.js handles user activity/hover.
   Do not force the bar visible when auto-hide is enabled. */
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-autohide.vjs-user-inactive .vjs-control-bar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-autohide.vjs-user-active .vjs-control-bar {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* 4.8.5.121 — Only the Video.js control bar is visible. Prevent the browser-native controls from appearing over it. */
.abrcp-stream-output .abrcp-vjs-custom.video-js video.vjs-tech {
    -webkit-appearance: none !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js video.vjs-tech::-webkit-media-controls,
.abrcp-stream-output .abrcp-vjs-custom.video-js video.vjs-tech::-webkit-media-controls-enclosure,
.abrcp-stream-output .abrcp-vjs-custom.video-js video.vjs-tech::-webkit-media-controls-panel,
.abrcp-stream-output .abrcp-vjs-custom.video-js video.vjs-tech::-webkit-media-controls-overlay-enclosure {
    display: none !important;
}

/* YouTube playback output */
.abrcp-stream-output .abrcp-youtube-player-wrap{width:var(--stream-player-width,100%);max-width:var(--stream-player-max-width,1920px);aspect-ratio:var(--stream-player-aspect,16 / 9);margin:0 auto;position:relative;overflow:hidden;border-radius:0 !important;background:#000;}
.abrcp-stream-output .abrcp-youtube-player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}


/* 4.8.5.160 — Stream reliability / mobile controls. */
.abrcp-stream-connection-status{
    position:absolute;
    left:50%;
    bottom:clamp(64px,9%,104px);
    transform:translateX(-50%);
    z-index:65;
    display:flex;
    align-items:center;
    gap:9px;
    max-width:min(88vw,520px);
    padding:9px 14px;
    border-radius:999px;
    background:rgba(0,0,0,.76);
    color:#fff;
    font:700 12px/1.7 "Noto Kufi Arabic",sans-serif;
    text-align:center;
    box-shadow:0 8px 24px rgba(0,0,0,.22);
    pointer-events:none;
}
/* 5.0.45 — Keep HLS/Video.js buffering and reconnect logic active, but hide the visual connection/loading badge. */
.abrcp-stream-connection-status,
.abrcp-stream-connection-status[hidden]{display:none!important;}
.abrcp-stream-connection-status.is-error{background:rgba(100,0,0,.86);}
.abrcp-stream-connection-spinner{display:inline-block;font-size:16px;line-height:1;animation:abrcp-stream-spin 1s linear infinite;}
@keyframes abrcp-stream-spin{to{transform:rotate(360deg);}}
.abrcp-stream-live-button{
    position:absolute;
    right:14px;
    bottom:clamp(58px,8%,94px);
    z-index:66;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    padding:8px 13px;
    min-height:38px;
    background:rgba(150,0,0,.9);
    color:#fff;
    font:800 12px/1 "Noto Kufi Arabic",sans-serif;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,.24);
    backdrop-filter:blur(4px);
}
.abrcp-stream-live-button:hover,.abrcp-stream-live-button:focus-visible{background:#b30000;outline:none;}
.abrcp-stream-live-button[hidden]{display:none!important;}
@media (max-width:768px){
    .abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control{width:3.25em;}
    .abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control-bar{height:3.5em!important;}
    .abrcp-stream-connection-status{bottom:58px;padding:7px 11px;font-size:10px;max-width:90vw;}
    .abrcp-stream-live-button{right:10px;bottom:54px;min-height:34px;padding:7px 10px;font-size:10px;}
    .abrcp-stream-output .abrcp-youtube-player-wrap iframe{min-height:0;}
}
@media (max-width:480px){
    .abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control{width:3em;}
    .abrcp-stream-live-button{right:8px;bottom:51px;}
}

/* Rotated phones use a landscape viewport wider than 768px. Keep the overlay
   clear of the Video.js control bar in that case as well. */
@media (orientation: landscape) and (max-height: 600px){
    .abrcp-stream-output.stream-pos-bottom-center .abrcp-stream-card,
    .abrcp-stream-output.stream-pos-bottom-right .abrcp-stream-card,
    .abrcp-stream-output.stream-pos-bottom-left .abrcp-stream-card {
        bottom: calc(var(--stream-edge, 7%) + 58px);
    }
    .abrcp-stream-card {
        width: min(88vw, 900px);
        max-width: 88vw;
        padding: 8px 10px;
        line-height: 1.35;
        font-size: clamp(11px, .82vw, 15px) !important;
        pointer-events: none !important;
    }
    .abrcp-stream-card .abrcp-stream-title,
    .abrcp-stream-card .abrcp-stream-text,
    .abrcp-stream-card .abrcp-stream-ref,
    .abrcp-stream-card .abrcp-stream-text > * {
        font-size: inherit !important;
        line-height: inherit !important;
    }
    .abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control-bar {
        z-index: 1000 !important;
    }
    /* Auto-hide remains controlled by Video.js user activity; clicking/tapping the player reactivates the bar. */

}

/* Mobile landscape without native fullscreen: let the page breathe so the
   Video.js control bar stays inside the visible player and remains reachable.
   Fullscreen is intentionally excluded because the fullscreen player owns
   the viewport in that mode. */
@media (max-width: 900px) and (orientation: landscape) {
    html:has(.abrcp-stream-output:not(:fullscreen)),
    body:has(.abrcp-stream-output:not(:fullscreen)) {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        min-height: 100% !important;
    }
    .abrcp-stream-output:not(:fullscreen) {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        align-items: flex-start !important;
    }
    .abrcp-stream-output:not(:fullscreen) .abrcp-stream-stage {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        align-items: flex-start !important;
        justify-content: center !important;
    }
    .abrcp-stream-output:not(:fullscreen) .live-stream-wrapper {
        flex: 0 0 auto !important;
    }
    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
        margin-inline: auto !important;
    }
}

/* 4.8.5.XXX-FINAL — Non-fullscreen phone landscape: the player can occupy the
   full short viewport, which can place an absolute control bar outside the
   visible browser area on some mobile browsers. Keep the Video.js controller
   fixed to the viewport bottom so it is always visible and touchable. */
@media (max-width: 900px) and (orientation: landscape) {
    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js .vjs-control-bar,
    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js.vjs-user-inactive .vjs-control-bar,
    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js.abrcp-controls-autohide .vjs-control-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
        width: 100vw !important;
        height: 3.5em !important;
        margin: 0 !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 2147483646 !important;
    }

    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js .vjs-control,
    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js .vjs-control-bar * {
        pointer-events: auto !important;
    }
}

/* 4.8.5.XXX — Non-fullscreen phone landscape: keep the entire 16:9 player,
   including the Video.js control bar, inside the short viewport. */
@media (max-width: 900px) and (orientation: landscape) {
    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js {
        width: min(100vw, calc((100vh - 12px) * 16 / 9)) !important;
        max-width: none !important;
        height: calc(100vh - 12px) !important;
        max-height: calc(100vh - 12px) !important;
        aspect-ratio: 16 / 9 !important;
        margin: 0 auto !important;
        flex: 0 0 auto !important;
        overflow: hidden !important;
    }

    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js .vjs-control-bar,
    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js.vjs-user-inactive .vjs-control-bar,
    .abrcp-stream-output:not(:fullscreen) .abrcp-vjs-custom.video-js.abrcp-controls-autohide .vjs-control-bar {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        z-index: 1000 !important;
    }
}

/* Android/mobile portrait fullscreen: preserve the complete 16:9 frame. */
@media (max-width:900px) and (orientation: portrait){
    .abrcp-stream-output .abrcp-vjs-custom.video-js:fullscreen,
    .abrcp-stream-output .abrcp-vjs-custom.video-js:-webkit-full-screen,
    .abrcp-stream-output .abrcp-vjs-custom.video-js.vjs-fullscreen-mode{
        position:fixed !important;
        left:50% !important; top:50% !important; right:auto !important; bottom:auto !important;
        width:100vw !important; height:auto !important;
        max-width:none !important; max-height:none !important;
        aspect-ratio:16 / 9 !important;
        margin:0 !important; transform:translate(-50%,-50%) !important;
        border-radius:0 !important; background:#000 !important; overflow:hidden !important;
    }
    .abrcp-stream-output .abrcp-vjs-custom.video-js:fullscreen video.vjs-tech,
    .abrcp-stream-output .abrcp-vjs-custom.video-js:-webkit-full-screen video.vjs-tech,
    .abrcp-stream-output .abrcp-vjs-custom.video-js.vjs-fullscreen-mode video.vjs-tech{
        position:absolute !important; left:0 !important; top:0 !important;
        width:100% !important; height:100% !important;
        max-width:none !important; max-height:none !important; object-fit:contain !important; background:#000 !important;
    }
}

/* 4.8.5.XXX-FINAL — Mobile landscape native fullscreen: fill the entire
   phone viewport instead of preserving the 16:9 contain box that can leave
   black space at the left and right edges. Non-fullscreen playback is untouched. */
@media (max-width: 900px) and (orientation: landscape){
    .abrcp-stream-output .abrcp-vjs-custom.video-js:fullscreen,
    .abrcp-stream-output .abrcp-vjs-custom.video-js:-webkit-full-screen,
    .abrcp-stream-output .abrcp-vjs-custom.video-js.vjs-fullscreen-mode{
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100vh !important;
        max-width:none !important;
        max-height:none !important;
        aspect-ratio:auto !important;
        margin:0 !important;
        border-radius:0 !important;
        background:#000 !important;
        overflow:hidden !important;
    }

    .abrcp-stream-output .abrcp-vjs-custom.video-js:fullscreen video.vjs-tech,
    .abrcp-stream-output .abrcp-vjs-custom.video-js:-webkit-full-screen video.vjs-tech,
    .abrcp-stream-output .abrcp-vjs-custom.video-js.vjs-fullscreen-mode video.vjs-tech{
        width:100vw !important;
        height:100vh !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:cover !important;
    }
}

@media (max-width:768px) {
    /* Mobile portrait: keep overlay typography tied to the saved Overlay Font Size.
       Do not replace it with a viewport-based 14px value; that becomes tiny in
       Android fullscreen. */
    .abrcp-stream-card.abrcp-stream-bible .abrcp-stream-text,
.abrcp-stream-card.abrcp-stream-hymn .abrcp-stream-text {
        font-size: calc(28px * var(--abrcp-overlay-font-factor, 1)) !important;
        color: var(--abrcp-overlay-text, #fff) !important;
    }
    .abrcp-stream-card.abrcp-stream-bible .abrcp-stream-ref {
        font-size: calc(14px * var(--abrcp-overlay-font-factor, 1)) !important;
        color: var(--abrcp-overlay-ref, #ffd54a) !important;
    }
}

@media (max-width:900px) and (orientation: landscape) {
    /* Mobile landscape: use the same readable base as desktop rather than a
       fixed 16px value. */
    .abrcp-stream-card.abrcp-stream-bible .abrcp-stream-text,
.abrcp-stream-card.abrcp-stream-hymn .abrcp-stream-text {
        font-size: calc(28px * var(--abrcp-overlay-font-factor, 1)) !important;
        color: var(--abrcp-overlay-text, #fff) !important;
    }
    .abrcp-stream-card.abrcp-stream-bible .abrcp-stream-ref {
        font-size: calc(14px * var(--abrcp-overlay-font-factor, 1)) !important;
        color: var(--abrcp-overlay-ref, #ffd54a) !important;
    }
}

/* Native Android fullscreen: the player owns the whole phone viewport, so use
   a readable physical font size for the overlay instead of the tiny mobile vw
   typography. */
@media (max-width:900px) and (orientation:landscape) {
  .abrcp-stream-output .abrcp-vjs-custom.video-js:fullscreen .abrcp-stream-card,
  .abrcp-stream-output .abrcp-vjs-custom.video-js:-webkit-full-screen .abrcp-stream-card,
  .abrcp-stream-output .abrcp-vjs-custom.video-js.vjs-fullscreen-mode .abrcp-stream-card {
    font-size:calc(28px * var(--abrcp-overlay-font-factor,1)) !important;
    max-width:90vw !important;
  }
  .abrcp-stream-output .abrcp-vjs-custom.video-js:fullscreen .abrcp-stream-card .abrcp-stream-text,
  .abrcp-stream-output .abrcp-vjs-custom.video-js:-webkit-full-screen .abrcp-stream-card .abrcp-stream-text,
  .abrcp-stream-output .abrcp-vjs-custom.video-js.vjs-fullscreen-mode .abrcp-stream-card .abrcp-stream-text {
    font-size:calc(28px * var(--abrcp-overlay-font-factor,1)) !important;
  }
  .abrcp-stream-output .abrcp-vjs-custom.video-js:fullscreen .abrcp-stream-card .abrcp-stream-ref,
  .abrcp-stream-output .abrcp-vjs-custom.video-js:-webkit-full-screen .abrcp-stream-card .abrcp-stream-ref,
  .abrcp-stream-output .abrcp-vjs-custom.video-js.vjs-fullscreen-mode .abrcp-stream-card .abrcp-stream-ref {
    font-size:calc(14px * var(--abrcp-overlay-font-factor,1)) !important;
  }
}


/* Shared Overlay style state — authoritative variables from Operator/Projector. */
.abrcp-stream-output .abrcp-stream-card{
  width:min(var(--abrcp-overlay-rect-width,760px),86vw)!important;
  min-height:min(var(--abrcp-overlay-rect-height,160px),24vh)!important;
  height:auto!important;
  background:var(--abrcp-overlay-bg-rgba,rgba(0,0,0,.62))!important;
  color:var(--abrcp-overlay-text,#fff)!important;
  border-radius:var(--abrcp-overlay-radius,12px)!important;
  box-shadow:var(--abrcp-overlay-shadow,none)!important;
  transition:opacity var(--abrcp-overlay-fade,var(--stream-fade,1000ms)) ease!important;
}
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-title,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-text,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-text > *,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-ref{
  color:inherit!important;
}
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-ref{color:var(--abrcp-overlay-ref,#ffd54a)!important}
.abrcp-stream-output.stream-shape-square .abrcp-stream-card{
  width:min(var(--abrcp-overlay-square-width,420px),42vw)!important;
  height:min(var(--abrcp-overlay-square-height,420px),72vh)!important;
  max-width:calc(100% - 20px)!important;
  max-height:calc(100% - 20px)!important;
  min-width:0!important;
  min-height:0!important;
  padding:14px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:var(--abrcp-overlay-justify,center)!important;
  align-items:stretch!important;
  overflow:hidden!important;
}
.abrcp-stream-output.stream-shape-square .abrcp-stream-card.is-announcement .abrcp-stream-text{overflow:hidden!important}

@media(max-width:760px){
  .abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card{width:min(var(--abrcp-overlay-rect-width,760px),94vw)!important;min-height:0!important;height:auto!important;}
  .abrcp-stream-output.stream-shape-square .abrcp-stream-card{padding:10px!important;width:min(var(--abrcp-overlay-square-width,420px),78vw)!important;height:min(var(--abrcp-overlay-square-height,420px),78vw)!important;}
}

.abrcp-stream-output.abrcp-overlay-disabled .abrcp-stream-card:not(.is-exiting){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}

/* Responsive overlay card height: keep the background proportional on smaller browser/video sizes.
   The card grows naturally when text needs more room, while vertical alignment remains effective. */
.abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card{
  min-height:min(var(--abrcp-overlay-rect-height,160px),24vh)!important;
  height:auto!important;
  align-items:stretch!important;
  justify-content:var(--abrcp-overlay-justify,center)!important;
}
.abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card .abrcp-stream-title,
.abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card .abrcp-stream-text,
.abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card .abrcp-stream-ref{
  flex:0 0 auto!important;
}


/* Vertical text alignment: keep the rectangle as a flex column so Up / Center / Down work reliably. */
.abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:var(--abrcp-overlay-justify,center)!important;
}

/* Portrait phones: keep the rectangular overlay content-sized so it does not cover most of the video. */
@media (max-width:760px) and (orientation:portrait){
  .abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card{
    min-height:0!important;
    height:max-content!important;
    max-height:none!important;
    padding:6px 10px!important;
    line-height:1.35!important;
    justify-content:center!important;
  }
  .abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card .abrcp-stream-title,
  .abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card .abrcp-stream-text,
  .abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card .abrcp-stream-ref{
    margin-top:0!important;
    margin-bottom:2px!important;
  }
}

/* Portrait overlay: never let a stale saved rectangle height create a large
   background block. The rectangle should wrap the actual text content. */
@media (max-width:760px) and (orientation:portrait){
  .abrcp-stream-output:not(.stream-shape-square) .abrcp-stream-card{
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
  }
}

/* Fullscreen Video.js auto-hide. Keep the controller visible initially and
   whenever the viewer taps/clicks the video, but hide it after inactivity. */
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-autohide:fullscreen.vjs-user-inactive .vjs-control-bar,
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-autohide:-webkit-full-screen.vjs-user-inactive .vjs-control-bar,
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-autohide.vjs-fullscreen-mode.vjs-user-inactive .vjs-control-bar{
  display:flex!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-autohide:fullscreen.vjs-user-active .vjs-control-bar,
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-autohide:-webkit-full-screen.vjs-user-active .vjs-control-bar,
.abrcp-stream-output .abrcp-vjs-custom.video-js.abrcp-controls-autohide.vjs-fullscreen-mode.vjs-user-active .vjs-control-bar{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Manual rectangle dimensions; JS scales the saved box to fit smaller screens. */
.abrcp-stream-output.stream-shape-normal .abrcp-stream-card{
 width:var(--abrcp-overlay-rect-width,760px)!important;
 height:var(--abrcp-overlay-rect-height,140px)!important;
 min-width:0!important;min-height:0!important;
 box-sizing:border-box!important;overflow:hidden!important;
}
.abrcp-stream-output.abrcp-streaming-disabled .abrcp-stream-card{display:none!important}
.abrcp-stream-off-message{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#050505;color:#fff;gap:10px;padding:24px;box-sizing:border-box;font-family:inherit}
.abrcp-stream-off-message[hidden]{display:none!important}
.abrcp-stream-off-icon{width:64px;height:64px;border:2px solid rgba(255,255,255,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:25px;line-height:1;opacity:.9}
.abrcp-stream-off-title{font-size:28px;font-weight:800;line-height:1.3}
.abrcp-stream-off-subtitle{font-size:14px;opacity:.65;line-height:1.6}

/* WorshipStage 5.0.46 — hard Overlay OFF gate and native Video.js controls. */
.abrcp-stream-output[data-abrcp-overlay-feature-off="1"] .abrcp-stream-card:not(.is-exiting),
.abrcp-stream-output.abrcp-overlay-disabled .abrcp-stream-card:not(.is-exiting) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.abrcp-stream-output .abrcp-vjs-custom.video-js .vjs-control-bar {
    pointer-events: auto;
}

/* Modern Title Banner: preserve physical position while revealing the banner. */
@keyframes abrcpBannerReveal {
  0% { opacity:0; clip-path:inset(0 100% 0 0); }
  18% { opacity:1; }
  100% { opacity:1; clip-path:inset(0 0 0 0); }
}
@keyframes abrcpBannerImage {
  0% { transform:scale(1.08) translateX(-1.5%); }
  50% { transform:scale(1.12) translateX(1.5%); }
  100% { transform:scale(1.08) translateX(-1.5%); }
}
@keyframes abrcpBannerText {
  from { opacity:0; transform:translateX(18px); }
  to { opacity:1; transform:translateX(0); }
}
.abrcp-stream-output.stream-anim-modern-banner .abrcp-stream-card.is-visible {
  overflow:hidden!important;
  isolation:isolate;
  opacity:1;
  animation:abrcpBannerReveal var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.22,1,.36,1) both!important;
}
.abrcp-stream-output.stream-anim-modern-banner .abrcp-stream-card.is-visible::before {
  animation:abrcpBannerImage 8s ease-in-out infinite;
  transform-origin:center;
}
.abrcp-stream-output.stream-anim-modern-banner .abrcp-stream-card.is-visible > * {
  animation:abrcpBannerText var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .35);
}
@media(prefers-reduced-motion:reduce) {
  .abrcp-stream-output.stream-anim-modern-banner .abrcp-stream-card.is-visible, .abrcp-stream-output.stream-anim-modern-banner .abrcp-stream-card.is-visible::before, .abrcp-stream-output.stream-anim-modern-banner .abrcp-stream-card.is-visible > * {
    animation:none!important;
    clip-path:none!important;
    opacity:1!important;
    transform:none;
  }
}

/* Modern banner outro: text leaves first, then the background retracts. */
@keyframes abrcpBannerRetract {
  0% { opacity:1; clip-path:inset(0 0 0 0); }
  20% { opacity:1; clip-path:inset(0 0 0 0); }
  100% { opacity:0; clip-path:inset(0 100% 0 0); }
}
@keyframes abrcpBannerTextOut {
  from { opacity:1; transform:translateX(0); }
  to { opacity:0; transform:translateX(-18px); }
}
.abrcp-stream-output.stream-anim-modern-banner .abrcp-stream-card.is-visible.is-exiting {
  animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.65,0,.35,1) both!important;
}
.abrcp-stream-output.stream-anim-modern-banner .abrcp-stream-card.is-visible.is-exiting > * {
  animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;
  animation-delay:0ms;
}

/* Text Shadow controls affect glyphs, independently of the banner background. */
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-title,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-text,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-text *,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-ref {
  text-shadow:var(--abrcp-overlay-text-shadow,0 2px 4px #000000)!important;
}

@property --abrcp-flare-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
/* Original gold lower third: layered gold glass and a screen-blended light sweep. */
@keyframes abrcpGoldSweep {
  from { left:0%; transform:translateX(-50%); --abrcp-flare-angle:0deg; }
  to { left:100%; transform:translateX(-50%); --abrcp-flare-angle:720deg; }
}
@keyframes abrcpGoldReveal {
  from { opacity:0; clip-path:inset(0 100% 0 0); }
  99% { opacity:1; clip-path:inset(0 0 0 0); }
  to { opacity:1; clip-path:none; }
}
.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible {
  overflow:visible!important;
  isolation:isolate;
  animation:abrcpGoldReveal var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.22,1,.36,1) both!important;
  box-shadow:inset 0 -1px 0 rgba(255,216,105,.45)!important;
}
.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible::before {
  background-image:var(--abrcp-overlay-bg-image,none)!important;
  background-size:cover!important;
  opacity:var(--abrcp-overlay-bg-image-opacity,0)!important;
}
.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible::after {
  top:auto!important;bottom:-27px!important;left:0%;right:auto!important;
  width:60px!important;height:60px!important;
  clip-path:none;
  border-radius:0!important;
  transform:translateX(-50%);
  background-image:radial-gradient(circle at center,#fffef0 0%,#fff3b0 8%,#ffda65 15%,rgba(245,176,40,.75) 23%,rgba(224,137,20,.2) 38%,transparent 65%),radial-gradient(ellipse 30px 1px at center,rgba(255,252,214,.95),rgba(255,210,92,.6) 35%,transparent 100%),radial-gradient(ellipse 1px 30px at center,rgba(255,252,214,.95),rgba(255,210,92,.6) 35%,transparent 100%),linear-gradient(45deg,transparent 47%,rgba(255,223,137,.5) 49.5%,rgba(255,247,205,.75) 50%,transparent 52%),linear-gradient(-45deg,transparent 47%,rgba(255,205,105,.3) 49.5%,rgba(255,240,180,.55) 50%,transparent 52%),repeating-conic-gradient(from var(--abrcp-flare-angle,0deg) at center,transparent 0deg 10deg,rgba(255,222,114,.7) 11deg,rgba(255,245,194,.95) 12deg,rgba(230,163,38,.45) 13deg,transparent 14deg 22.5deg)!important;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.08) 0%,rgba(0,0,0,.16) 25%,rgba(0,0,0,.24) 45%,rgba(0,0,0,.3) 55%,#000 55%,#000 100%),radial-gradient(circle,#000 0%,#000 20%,rgba(0,0,0,.55) 43%,transparent 70%),conic-gradient(from var(--abrcp-flare-angle,0deg),rgba(0,0,0,.95) 0deg 22.5deg,rgba(0,0,0,.35) 22.5deg 45deg,rgba(0,0,0,.7) 45deg 67.5deg,rgba(0,0,0,.25) 67.5deg 90deg,rgba(0,0,0,.85) 90deg 135deg,rgba(0,0,0,.4) 135deg 180deg,rgba(0,0,0,.9) 180deg 225deg,rgba(0,0,0,.3) 225deg 270deg,rgba(0,0,0,.65) 270deg 315deg,rgba(0,0,0,.95) 315deg 360deg);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.08) 0%,rgba(0,0,0,.16) 25%,rgba(0,0,0,.24) 45%,rgba(0,0,0,.3) 55%,#000 55%,#000 100%),radial-gradient(circle,#000 0%,#000 20%,rgba(0,0,0,.55) 43%,transparent 70%),conic-gradient(from var(--abrcp-flare-angle,0deg),rgba(0,0,0,.95) 0deg 22.5deg,rgba(0,0,0,.35) 22.5deg 45deg,rgba(0,0,0,.7) 45deg 67.5deg,rgba(0,0,0,.25) 67.5deg 90deg,rgba(0,0,0,.85) 90deg 135deg,rgba(0,0,0,.4) 135deg 180deg,rgba(0,0,0,.9) 180deg 225deg,rgba(0,0,0,.3) 225deg 270deg,rgba(0,0,0,.65) 270deg 315deg,rgba(0,0,0,.95) 315deg 360deg);
  mask-composite:intersect;
  filter:drop-shadow(0 0 5px rgba(255,190,55,.8));
  background-color:transparent!important;
  background-size:100% 100%,100% 100%,100% 100%,65% 65%,45% 45%,100% 100%!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  mix-blend-mode:screen;
  opacity:1!important;
  animation:abrcpGoldSweep var(--abrcp-overlay-shine-duration,10000ms) linear 1 both!important;
  animation-delay:var(--abrcp-overlay-animation-duration,2000ms)!important;
  pointer-events:none;
}
.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible > * {
  animation:abrcpBannerText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;
  animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .35);
}
.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible.is-exiting {
  animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.65,0,.35,1) both!important;
}
.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible.is-exiting > * {
  animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;
  animation-delay:0ms;
}
@media(prefers-reduced-motion:reduce){
  .abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible::before,.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;}
  .abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible::after{opacity:.2!important;}
}

/* Aurora Ribbon: moving illuminated edges with a center-out reveal. */
@keyframes abrcpAuroraReveal {
  from {opacity:0;clip-path:inset(0 50% 0 50%);}
  to {opacity:1;clip-path:inset(0 0 0 0);}
}
@keyframes abrcpAuroraFlow {
  from {background-position:0% 50%;}
  to {background-position:200% 50%;}
}
@keyframes abrcpAuroraText {
  from {opacity:0;transform:translateY(8px);filter:blur(3px);}
  to {opacity:1;transform:translateY(0);filter:blur(0);}
}
.abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible {
  overflow:hidden!important;
  isolation:isolate;
  animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.22,1,.36,1) both!important;
  box-shadow:0 0 18px rgba(61,220,218,.15)!important;
}
.abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible::after {
  inset:0!important;
  border:2px solid transparent;
  border-radius:inherit;
  background:linear-gradient(110deg,#47e6d3,#7387ff,#cf76ff,#f5cf78,#47e6d3) border-box!important;
  background-size:300% 100%!important;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  opacity:.85!important;
  animation:abrcpAuroraFlow 7s linear infinite!important;
  pointer-events:none;
}
.abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible > * {
  animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;
  animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);
}
.abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible > :last-child {animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .4);}
.abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible.is-exiting {
  animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.65,0,.35,1) both!important;
}
.abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible.is-exiting > * {
  animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;
  animation-delay:0ms;
}
@media(prefers-reduced-motion:reduce){
  .abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-aurora-ribbon .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}
}

@keyframes abrcpSpotlightSweep{from{transform:translateX(-140%) skewX(-16deg)}to{transform:translateX(420%) skewX(-16deg)}}
@keyframes abrcpPrismScan{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes abrcpBokehFloat{0%,100%{transform:translate(-8%,-4%) scale(1)}50%{transform:translate(8%,4%) scale(1.12)}}

.abrcp-stream-output.stream-anim-spotlight-sweep .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.22,1,.36,1) both!important;}
.abrcp-stream-output.stream-anim-spotlight-sweep .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-spotlight-sweep .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-spotlight-sweep .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
.abrcp-stream-output.stream-anim-spotlight-sweep .abrcp-stream-card.is-visible::after{top:0!important;bottom:0!important;left:0!important;right:auto!important;width:35%!important;border-radius:0!important;background:linear-gradient(90deg,transparent,rgba(255,203,103,.3) 25%,rgba(255,248,212,.85) 50%,rgba(255,203,103,.3) 75%,transparent)!important;opacity:.9!important;animation:abrcpSpotlightSweep 4s ease-in-out infinite!important;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-spotlight-sweep .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-spotlight-sweep .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-spotlight-sweep .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-prism-scan .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.22,1,.36,1) both!important;}
.abrcp-stream-output.stream-anim-prism-scan .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-prism-scan .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-prism-scan .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
.abrcp-stream-output.stream-anim-prism-scan .abrcp-stream-card.is-visible::after{inset:0!important;border-radius:inherit;background:linear-gradient(90deg,transparent 44%,rgba(78,243,222,.08) 47%,rgba(195,255,248,.95) 49.8%,rgba(104,211,255,.55) 50.2%,rgba(171,126,255,.1) 53%,transparent 57%)!important;opacity:.8!important;mix-blend-mode:screen;animation:abrcpPrismScan 5s linear infinite!important;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-prism-scan .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-prism-scan .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-prism-scan .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-bokeh-glow .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) cubic-bezier(.22,1,.36,1) both!important;}
.abrcp-stream-output.stream-anim-bokeh-glow .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-bokeh-glow .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-bokeh-glow .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
.abrcp-stream-output.stream-anim-bokeh-glow .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(ellipse at 12% 70%,rgba(45,239,214,.75),transparent 23%),radial-gradient(ellipse at 48% 18%,rgba(203,123,255,.7),transparent 27%),radial-gradient(ellipse at 85% 75%,rgba(255,202,96,.8),transparent 23%)!important;opacity:.8!important;animation:abrcpBokehFloat 5s ease-in-out infinite!important;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-bokeh-glow .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-bokeh-glow .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-bokeh-glow .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

@keyframes abrcpAmberDrift{0%,100%{transform:translate(-7%,6%) scale(1)}50%{transform:translate(7%,-6%) scale(1.08)}}
@keyframes abrcpOceanTide{0%,100%{transform:translateX(-8%) scale(1.02)}50%{transform:translateX(8%) scale(1.15)}}
@keyframes abrcpRoseBloom{0%,100%{transform:translateY(5%) scale(.96)}50%{transform:translateY(-5%) scale(1.18)}}

.abrcp-stream-output.stream-anim-bokeh-amber .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-bokeh-amber .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(circle at 12% 80%,rgba(255,176,64,.85),transparent 17%),radial-gradient(circle at 40% 25%,rgba(255,222,149,.7),transparent 22%),radial-gradient(circle at 75% 72%,rgba(239,123,65,.8),transparent 18%),radial-gradient(circle at 92% 18%,rgba(255,237,191,.65),transparent 13%)!important;opacity:.8!important;animation:abrcpAmberDrift 7s ease-in-out infinite!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-bokeh-amber .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-bokeh-amber .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-bokeh-amber .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-bokeh-amber .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-bokeh-amber .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-bokeh-amber .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-bokeh-ocean .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-bokeh-ocean .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(ellipse at 5% 65%,rgba(38,216,249,.85),transparent 25%),radial-gradient(ellipse at 50% 10%,rgba(89,137,255,.8),transparent 30%),radial-gradient(ellipse at 90% 75%,rgba(106,247,226,.75),transparent 25%)!important;opacity:.8!important;animation:abrcpOceanTide 8s ease-in-out infinite!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-bokeh-ocean .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-bokeh-ocean .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-bokeh-ocean .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-bokeh-ocean .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-bokeh-ocean .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-bokeh-ocean .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-bokeh-rose .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-bokeh-rose .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(circle at 18% 20%,rgba(248,151,199,.8),transparent 22%),radial-gradient(circle at 58% 80%,rgba(182,125,255,.8),transparent 25%),radial-gradient(circle at 85% 18%,rgba(255,207,177,.8),transparent 20%)!important;opacity:.8!important;animation:abrcpRoseBloom 6s ease-in-out infinite!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-bokeh-rose .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-bokeh-rose .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-bokeh-rose .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-bokeh-rose .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-bokeh-rose .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-bokeh-rose .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

@keyframes abrcpSilkWave{0%,100%{transform:translate(-6%,3%) skewY(-5deg)}50%{transform:translate(6%,-3%) skewY(5deg)}}
@keyframes abrcpNorthernDance{0%,100%{transform:translateX(-7%) skewX(-10deg)}50%{transform:translateX(7%) skewX(10deg)}}
@keyframes abrcpDustDrift{from{transform:translate(-5%,8%)}to{transform:translate(5%,-8%)}}
@keyframes abrcpGlassShimmer{0%,100%{transform:translateX(-12%) skewX(-12deg)}50%{transform:translateX(12%) skewX(12deg)}}
@keyframes abrcpTrailSlide{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@keyframes abrcpPearlBreath{0%,100%{transform:scale(.97);filter:brightness(.75)}50%{transform:scale(1.12);filter:brightness(1.3)}}

.abrcp-stream-output.stream-anim-silk-waves .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-silk-waves .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:repeating-linear-gradient(165deg,transparent 0%,rgba(137,161,255,.12) 12%,rgba(202,167,255,.65) 18%,rgba(113,227,234,.25) 24%,transparent 34%)!important;opacity:.8!important;animation:abrcpSilkWave 8s ease-in-out infinite alternate!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-silk-waves .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-silk-waves .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-silk-waves .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-silk-waves .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-silk-waves .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-silk-waves .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-northern-lights .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-northern-lights .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:linear-gradient(105deg,transparent 10%,rgba(65,245,173,.65) 23%,transparent 34%,rgba(78,170,255,.7) 47%,transparent 59%,rgba(189,116,255,.65) 73%,transparent 90%)!important;opacity:.8!important;animation:abrcpNorthernDance 9s ease-in-out infinite alternate!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-northern-lights .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-northern-lights .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-northern-lights .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-northern-lights .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-northern-lights .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-northern-lights .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-golden-dust .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-golden-dust .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(circle,rgba(255,224,142,.95) 0 1px,transparent 3px),radial-gradient(circle,rgba(255,184,86,.8) 0 2px,transparent 4px),radial-gradient(circle at 50% 65%,rgba(255,186,85,.18),transparent 60%)!important;background-size:47px 31px,79px 53px,100% 100%!important;background-position:0 0,19px 12px,center!important;opacity:.8!important;animation:abrcpDustDrift 7s ease-in-out infinite alternate!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-golden-dust .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-golden-dust .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-golden-dust .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-golden-dust .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-golden-dust .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-golden-dust .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-liquid-glass .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-liquid-glass .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:repeating-linear-gradient(115deg,transparent 0%,rgba(228,250,255,.1) 20%,rgba(241,255,255,.65) 24%,rgba(172,219,242,.15) 29%,transparent 45%)!important;opacity:.8!important;animation:abrcpGlassShimmer 7s ease-in-out infinite alternate!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-liquid-glass .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-liquid-glass .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-liquid-glass .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-liquid-glass .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-liquid-glass .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-liquid-glass .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-light-trails .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-light-trails .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:linear-gradient(90deg,transparent 20%,rgba(91,237,219,.8) 50%,transparent 80%),linear-gradient(90deg,transparent 15%,rgba(197,145,255,.9) 45%,transparent 75%)!important;background-size:100% 2px,100% 2px!important;background-position:center 15%,center 85%!important;background-repeat:no-repeat!important;opacity:.8!important;animation:abrcpTrailSlide 5s ease-in-out infinite alternate!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-light-trails .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-light-trails .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-light-trails .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-light-trails .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-light-trails .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-light-trails .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-pearl-glow .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-pearl-glow .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(ellipse at 18% 72%,rgba(255,246,215,.75),transparent 30%),radial-gradient(ellipse at 80% 25%,rgba(230,241,255,.7),transparent 35%),radial-gradient(ellipse at 50% 50%,rgba(255,218,177,.3),transparent 45%)!important;opacity:.8!important;animation:abrcpPearlBreath 8s ease-in-out infinite alternate!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-pearl-glow .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-pearl-glow .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-pearl-glow .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-pearl-glow .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-pearl-glow .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-pearl-glow .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

@keyframes abrcpCandleDrift{0%,100%{transform:translate(-7%,6%) scale(1)}50%{transform:translate(7%,-6%) scale(1.08)}}
@keyframes abrcpMoonTide{0%,100%{transform:translateX(-8%) scale(1.02)}50%{transform:translateX(8%) scale(1.15)}}
@keyframes abrcpEmeraldBloom{0%,100%{transform:translateY(5%) scale(.96)}50%{transform:translateY(-5%) scale(1.18)}}

.abrcp-stream-output.stream-anim-candlelight-glow .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-candlelight-glow .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(circle at 12% 80%,rgba(255,176,64,.85),transparent 17%),radial-gradient(circle at 40% 25%,rgba(255,222,149,.7),transparent 22%),radial-gradient(circle at 75% 72%,rgba(239,123,65,.8),transparent 18%),radial-gradient(circle at 92% 18%,rgba(255,237,191,.65),transparent 13%)!important;opacity:.8!important;animation:abrcpCandleDrift 7s ease-in-out infinite!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-candlelight-glow .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-candlelight-glow .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-candlelight-glow .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-candlelight-glow .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-candlelight-glow .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-candlelight-glow .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-moonlight-mist .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-moonlight-mist .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(ellipse at 5% 65%,rgba(188,222,255,.65),transparent 25%),radial-gradient(ellipse at 50% 10%,rgba(220,226,255,.55),transparent 30%),radial-gradient(ellipse at 90% 75%,rgba(169,200,238,.6),transparent 25%)!important;opacity:.8!important;animation:abrcpMoonTide 8s ease-in-out infinite!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-moonlight-mist .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-moonlight-mist .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-moonlight-mist .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-moonlight-mist .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-moonlight-mist .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-moonlight-mist .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

.abrcp-stream-output.stream-anim-emerald-glow .abrcp-stream-card.is-visible{overflow:hidden!important;isolation:isolate;animation:abrcpAuroraReveal var(--abrcp-overlay-animation-duration,2000ms) ease-out both!important;}
.abrcp-stream-output.stream-anim-emerald-glow .abrcp-stream-card.is-visible::after{inset:-20%!important;border-radius:inherit;background:radial-gradient(circle at 18% 20%,rgba(82,225,160,.65),transparent 22%),radial-gradient(circle at 58% 80%,rgba(50,175,159,.65),transparent 25%),radial-gradient(circle at 85% 18%,rgba(194,238,143,.55),transparent 20%)!important;opacity:.8!important;animation:abrcpEmeraldBloom 6s ease-in-out infinite!important;pointer-events:none;}
.abrcp-stream-output.stream-anim-emerald-glow .abrcp-stream-card.is-visible > *{animation:abrcpAuroraText var(--abrcp-overlay-animation-duration,2000ms) ease-out both;animation-delay:calc(var(--abrcp-overlay-animation-duration,2000ms) * .25);}
.abrcp-stream-output.stream-anim-emerald-glow .abrcp-stream-card.is-visible.is-exiting{animation:abrcpBannerRetract var(--abrcp-overlay-animation-duration,2000ms) ease-in-out both!important;}
.abrcp-stream-output.stream-anim-emerald-glow .abrcp-stream-card.is-visible.is-exiting > *{animation:abrcpBannerTextOut calc(var(--abrcp-overlay-animation-duration,2000ms) * .45) ease-in both;animation-delay:0ms;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-emerald-glow .abrcp-stream-card.is-visible,.abrcp-stream-output.stream-anim-emerald-glow .abrcp-stream-card.is-visible::after,.abrcp-stream-output.stream-anim-emerald-glow .abrcp-stream-card.is-visible > *{animation:none!important;clip-path:none!important;opacity:1!important;filter:none!important;}}

@keyframes abrcpGoldProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible > .abrcp-flare-progress{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:3px!important;z-index:2;pointer-events:none;border-radius:0 0 inherit inherit;background:linear-gradient(90deg,#b5781b,#f2c65f,#fff1b2)!important;box-shadow:0 0 6px rgba(255,196,70,.65);transform-origin:left center;animation:abrcpGoldProgress var(--abrcp-overlay-shine-duration,15000ms) linear var(--abrcp-overlay-animation-duration,2000ms) 1 both!important;}
@media(prefers-reduced-motion:reduce){.abrcp-stream-output.stream-anim-gold-shine .abrcp-stream-card.is-visible > .abrcp-flare-progress{animation:none!important;transform:scaleX(1);}}

/* Use the shared font for every overlay line, including plain Bible/hymn text. */
.abrcp-stream-output .abrcp-stream-card,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-title,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-text,
.abrcp-stream-output .abrcp-stream-card .abrcp-stream-ref{
 font-family:var(--abrcp-overlay-font-family,Arial),sans-serif!important;
}

/* Reverse each basic entrance effect for manual and timed overlay closing. */
.abrcp-stream-output.stream-anim-blur .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayBlur var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-bounce .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayBounce var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-curtain .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayCurtain var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-drop .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayDrop var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-elastic-left .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayElasticLeft var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-elastic-right .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayElasticRight var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-fade .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayFade var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-fade-down .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayFadeDown var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-fade-in-out .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayFade var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-fade-up .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayFadeUp var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-flip .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayFlip var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-pop .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayPop var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-pulse .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayPulse var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-rise .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayRise var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-rotate .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayRotate var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-slide-bottom .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlaySlideBottom var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-slide-left .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlaySlideLeft var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-slide-right .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlaySlideRight var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-slide-top .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlaySlideTop var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-smooth-slide .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlaySlideLeft var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-soft-zoom .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayZoom var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-swing .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlaySwing var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-tilt .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayTilt var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}
.abrcp-stream-output.stream-anim-zoom .abrcp-stream-card.is-visible.is-exiting{animation:abrcpOverlayZoom var(--abrcp-overlay-animation-duration,2000ms) ease-in reverse both!important;}