/* ==========================================================================
   Centenary Baptist Church (CBC Warangal) - Live Stream OBS Slides
   Gold & White Luxury Broadcast Theme
   ========================================================================== */

@font-face {
    font-family: 'Badhorse';
    src: url('../fonts/badhorse.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cinzel';
    src: url('../fonts/Cinzel.ttf') format('truetype');
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Glacial Indifference';
    src: url('../fonts/GlacialIndifference-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Glacial Indifference';
    src: url('../fonts/GlacialIndifference-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* CSS Reset & Canvas Setup */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
}

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #080808;
    font-family: 'Glacial Indifference', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Transparent Root for OBS Camera Overlay Screens */
body.live-screen-body,
body.multicam-screen-body,
body.space-screen-body {
    background: transparent !important;
    background-color: transparent !important;
}

/* Responsive OBS Stage: Center 16:9 canvas */
.stream-stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080808;
    overflow: hidden;
}

.live-stage,
.multicam-stage,
.space-stage {
    background: transparent !important;
    background-color: transparent !important;
}

/* 1920x1080 Fixed Canvas scaled for OBS */
.canvas-1080p {
    position: absolute;
    width: 1920px;
    height: 1080px;
    background: radial-gradient(circle at 50% 48%, #ffffff 0%, #fffef8 45%, #fcf7e9 80%, #f6ebce 100%);
    overflow: hidden;
    transform-origin: center center;
    box-shadow: 0 0 70px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Golden Background Ambient & Animation Layers (Z-Index 1)
   -------------------------------------------------------------------------- */
.bg-fx-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.gold-gradient-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 253, 245, 0.8) 50%, rgba(250, 242, 222, 0.7) 100%);
}

/* Soft Golden Auras / Ethereal Backlights */
.gold-aura {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

.gold-aura-center {
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    width: 1200px;
    height: 720px;
    background: radial-gradient(ellipse at center, rgba(235, 192, 85, 0.28) 0%, rgba(248, 222, 138, 0.16) 40%, rgba(255, 248, 228, 0.05) 70%, transparent 85%);
    filter: blur(55px);
}

.gold-aura-top {
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    width: 440px;
    height: 360px;
    background: radial-gradient(circle, rgba(218, 175, 55, 0.32) 0%, rgba(245, 215, 125, 0.16) 45%, transparent 75%);
    filter: blur(35px);
}

/* Church Architectural Silhouette Tinted with Sacred Gold */
.church-gold-watermark {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url('../imgs/church img 1920x1080 transprent bg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.065;
    filter: sepia(100%) hue-rotate(5deg) saturate(240%) brightness(0.95);
    mix-blend-mode: multiply;
    will-change: transform, opacity;
}

/* Floating Golden Particles Container */
.gold-particle-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gold-particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 245, 200, 1) 0%, rgba(225, 180, 65, 0.85) 45%, rgba(195, 145, 30, 0.2) 75%, transparent 100%);
    box-shadow: 0 0 12px rgba(225, 180, 65, 0.6);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Golden Light Sweep / Shimmer Across Canvas */
.gold-shimmer-sweep {
    position: absolute;
    top: -50%;
    left: -60%;
    width: 220%;
    height: 200%;
    background: linear-gradient(
        115deg,
        transparent 40%,
        rgba(255, 235, 160, 0.08) 46%,
        rgba(240, 200, 90, 0.22) 50%,
        rgba(255, 240, 180, 0.12) 54%,
        transparent 60%
    );
    transform: rotate(5deg);
    pointer-events: none;
    opacity: 0.65;
    will-change: transform;
}

/* Luxury Gold Border Framing */
.gold-frame-border {
    position: absolute;
    inset: 20px;
    border: 1px solid rgba(197, 155, 39, 0.35);
    border-radius: 4px;
    pointer-events: none;
}

.gold-frame-border::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(218, 175, 55, 0.18);
    border-radius: 2px;
}

/* Golden Corner Accents */
.corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: rgba(184, 134, 11, 0.7);
    border-style: solid;
    pointer-events: none;
}

.corner-tl { top: -2px; left: -2px; border-width: 3px 0 0 3px; }
.corner-tr { top: -2px; right: -2px; border-width: 3px 3px 0 0; }
.corner-bl { bottom: -2px; left: -2px; border-width: 0 0 3px 3px; }
.corner-br { bottom: -2px; right: -2px; border-width: 0 3px 3px 0; }

.top-gold-accent, .bottom-gold-accent {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85), transparent);
}

.top-gold-accent { top: -1px; }
.bottom-gold-accent { bottom: -1px; }

/* --------------------------------------------------------------------------
   Foreground Slide Content (Z-Index 10)
   -------------------------------------------------------------------------- */
.slide-container {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 38px 58px 42px 58px;
    user-select: none;
}

.top-header,
.center-showcase,
.bottom-footer {
    position: relative;
    z-index: 10;
}

/* --------------------------------------------------------------------------
   Top Header (Church Logo + Name + Warangal)
   -------------------------------------------------------------------------- */
.top-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 2px;
}

.church-logo-wrap {
    position: relative;
    width: 80px;
    height: 78px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-gold-glow {
    position: absolute;
    inset: -14px;
    background: radial-gradient(circle, rgba(235, 185, 60, 0.45) 0%, rgba(245, 215, 120, 0.18) 55%, transparent 80%);
    border-radius: 50%;
    filter: blur(10px);
    z-index: -1;
    pointer-events: none;
}

.church-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(184, 134, 11, 0.25));
}

.church-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    font-weight: 700;
    color: #080808;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.church-location {
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: 5.5px;
    text-transform: uppercase;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   Center Showcase (Vector SVG "SUNDAY WORSHIP" + Psalm Quote)
   -------------------------------------------------------------------------- */
.center-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    text-align: center;
}

.title-svg-wrap {
    width: 860px;
    max-width: 92%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -10px;
    filter: drop-shadow(0 4px 22px rgba(212, 175, 55, 0.22));
    will-change: transform, opacity;
}

.title-svg-wrap svg {
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
}

.title-svg-wrap svg path {
    fill: #050505;
}

.svg-letter {
    transform-origin: center center;
    will-change: transform, opacity;
}

.scripture-quote {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 21px;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: 0.4px;
    margin-top: 44px;
    text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.9);
}

/* --------------------------------------------------------------------------
   Bottom Footer Bar (Timings & Website)
   -------------------------------------------------------------------------- */
.bottom-footer {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: flex-end;
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 17.5px;
    font-weight: bold;
    color: #080808;
    letter-spacing: 0.2px;
}

.footer-timings {
    justify-self: start;
}

.footer-branding {
    justify-self: center;
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #555555;
    letter-spacing: 0.8px;
    text-align: center;
    white-space: nowrap;
    padding-bottom: 2px;
}

.footer-website {
    justify-self: end;
}

.footer-website span {
    font-weight: bold;
}

/* --------------------------------------------------------------------------
   Carousel Multi-Slide Structure & Transitions
   -------------------------------------------------------------------------- */
.carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-track .slide-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    will-change: opacity, transform;
}

.carousel-track .slide-container.active,
.carousel-track.single-mode .slide-container {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    z-index: 5;
}

/* --------------------------------------------------------------------------
   Slide 2: Heritage & Architecture Showcase
   -------------------------------------------------------------------------- */
.slide-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 58px 0 58px;
}

.slide2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 10;
    position: relative;
}

.slide2-header .church-logo-wrap {
    width: 118px;
    height: 114px;
    margin-bottom: 14px;
}

.slide2-header .church-title {
    font-size: 56px;
    letter-spacing: 2.8px;
    font-weight: 700;
}

.slide2-header .church-location {
    font-size: 20px;
    letter-spacing: 7px;
    margin-top: 6px;
    font-weight: 600;
}

.church-motto {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 24px;
    font-weight: normal;
    color: #1a1a1a;
    letter-spacing: 0.8px;
    margin-top: 42px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

.church-since {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #050505;
    letter-spacing: 4.2px;
    text-transform: uppercase;
    margin-top: 8px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85);
}

/* 3D Church Building Graphic */
.slide2-church-wrap {
    position: absolute;
    inset: 0;
    width: 1920px;
    height: 1080px;
    pointer-events: none;
    z-index: 6;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
}

.church-building-img {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1920px;
    height: 1080px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.28));
    will-change: transform, opacity;
}

/* --------------------------------------------------------------------------
   Interactive Controls / HUD (for stream operator preview)
   -------------------------------------------------------------------------- */
.stream-hud {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.stream-stage:hover .stream-hud {
    opacity: 1;
}

.hud-badge {
    background: rgba(20, 18, 12, 0.88);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #f7e7be;
    padding: 7px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: monospace;
    backdrop-filter: blur(8px);
}

.hud-btn {
    background: rgba(20, 18, 12, 0.85);
    color: #f7e7be;
    border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-family: sans-serif;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hud-btn:hover {
    background: rgba(30, 26, 16, 0.95);
    border-color: rgba(235, 192, 85, 0.8);
    color: #ffffff;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Live Cam Screen Overlay (Matches Reference media_1789820252197.png)
   -------------------------------------------------------------------------- */
.live-screen-body {
    background: transparent !important;
    background-color: transparent !important;
}

.live-stage {
    background: transparent !important;
    background-color: transparent !important;
}

.live-canvas {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.livecam-screen {
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent !important;
    padding: 0;
}

/* Sample Underlay for Testing/Previewing Camera Feed in Web Browser (Transparent in OBS) */
.camera-feed-underlay {
    display: none !important;
}

.show-cam-preview .camera-feed-underlay {
    display: block !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(10, 12, 16, 0.45) 0%, rgba(5, 6, 8, 0.85) 100%),
                url('../imgs/church img 1920x1080 transprent bg.png') center bottom / cover no-repeat,
                #12151c !important;
    pointer-events: none;
    z-index: 1;
}

/* Top Left: Broadcast LIVE Pill Badge */
.live-pill-badge {
    position: absolute;
    top: 26px;
    left: 28px;
    display: flex;
    align-items: center;
    gap: 7px;
    background: #000000;
    padding: 5px 14px 5px 12px;
    border-radius: 20px;
    z-index: 25;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
    will-change: transform, opacity;
}

.live-pill-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 0 8px #ff2222;
    animation: livePulse 1.8s infinite ease-in-out;
}

@keyframes livePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.85; }
}

.live-pill-text {
    font-family: 'Glacial Indifference', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 1.2px;
    line-height: 1;
}

/* Top Right: Church Crest Logo Only */
.live-church-crest {
    position: absolute;
    top: 20px;
    right: 28px;
    width: 78px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
    will-change: transform, opacity;
}

.live-crest-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

/* --------------------------------------------------------------------------
   Bottom Cream Bar (Perfect Still Background + Top Gold Border Only)
   -------------------------------------------------------------------------- */
.live-bottom-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 132px;
    background: radial-gradient(circle at 50% 50%, #ffffff 0%, #fffef8 35%, #fbf5e7 70%, #f6ebce 100%);
    overflow: hidden;
    z-index: 25;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

/* Only Top Gold Border Line */
.live-bar-top-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #b38728 0%, #f7e7be 20%, #d4af37 45%, #fff1b8 55%, #d4af37 70%, #aa771c 100%);
    box-shadow: 0 -1px 8px rgba(212, 175, 55, 0.5), 0 1px 3px rgba(212, 175, 55, 0.25);
    z-index: 30;
}

/* Ambient Gold Background FX Layers (Same as Splash Screen) */
.live-bar-fx-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
}

.live-bar-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(253, 248, 235, 0.75) 55%, rgba(247, 235, 206, 0.65) 100%);
}

/* Animated Glowing Gold Orbs inside Bottom Bar */
.live-bar-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

.live-bar-orb-left {
    left: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
    height: 170px;
    background: radial-gradient(ellipse at center, rgba(235, 185, 65, 0.55) 0%, rgba(248, 218, 125, 0.3) 40%, rgba(255, 245, 215, 0.1) 70%, transparent 88%);
    filter: blur(28px);
}

.live-bar-orb-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 720px;
    height: 190px;
    background: radial-gradient(ellipse at center, rgba(235, 185, 65, 0.62) 0%, rgba(248, 218, 125, 0.35) 45%, rgba(255, 245, 215, 0.12) 70%, transparent 88%);
    filter: blur(30px);
}

.live-bar-orb-right {
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    width: 420px;
    height: 170px;
    background: radial-gradient(ellipse at center, rgba(235, 185, 65, 0.55) 0%, rgba(248, 218, 125, 0.3) 40%, rgba(255, 245, 215, 0.1) 70%, transparent 88%);
    filter: blur(28px);
}

/* Floating Gold Particle Dots inside Bottom Bar */
.live-bar-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 3;
}

.live-bar-particles .gold-particle {
    background: radial-gradient(circle, rgba(255, 252, 235, 1) 0%, rgba(235, 185, 55, 0.95) 45%, rgba(195, 140, 20, 0.45) 75%, transparent 100%);
    box-shadow: 0 0 10px rgba(225, 175, 45, 0.9), 0 0 4px rgba(255, 230, 130, 0.8);
    opacity: 0.85;
}

/* Shimmer Sweep along Bar */
.live-bar-shimmer {
    position: absolute;
    top: -20px;
    left: -60%;
    width: 220%;
    height: 180px;
    opacity: 0.45;
}

/* Bottom Bar Content Row */
.live-bar-content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 32px;
}

/* Bottom Left: Animated Sunday Worship Vector Artwork */
.live-bottom-left {
    width: 280px;
    height: auto;
    display: flex;
    align-items: center;
    will-change: transform, opacity;
}

.sw-vector-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    transform-origin: center center;
    will-change: transform, opacity;
}

.sw-vector-wrap svg {
    width: 100%;
    height: auto;
    overflow: visible;
    display: block;
}

.sw-vector-wrap svg path {
    fill: #000000;
}

/* Bottom Center: Rotating Tithes & Offerings Bank Details */
.live-bottom-center {
    flex: 1;
    max-width: 980px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
}

.live-ticker-wrap {
    overflow: hidden;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-worship-text {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 22px;
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.4px;
    white-space: nowrap;
    text-align: center;
    will-change: transform, opacity;
}

/* Bottom Right: Timings & Website Stacked */
.live-bottom-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    line-height: 1.35;
    will-change: transform, opacity;
}

.live-timing-line,
.live-website-line {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 19px;
    font-weight: normal;
    color: #000000;
    letter-spacing: 0.2px;
}

.live-timing-line {
    font-weight: 600;
}

.live-website-line span {
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Multi-Cam Broadcast Screen (Matches media_1789822623134.png)
   - Cam 1: Top-Left (16:9 ratio, 1280x720) with luxury golden frame
   - Cam 2: Bottom-Right (16:9 ratio, 560x315) with luxury golden frame
   - Bottom-Left: Church Crest + Centenary Baptist Church Warangal + Motto
   - Top-Right: Sunday Worship SVG Logo + Service Timings
   - Middle-Right: multicam-church-img.png sitting above Cam 2
   - Background: Gold & White ambient motion background same as splash screen
   -------------------------------------------------------------------------- */
.multicam-screen-body {
    background: transparent !important;
    background-color: transparent !important;
}

.multicam-screen-body .multicam-stage,
.multicam-screen-body .multicam-canvas {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.multicam-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
}

/* Complete Multi-Cam Background Stack with 100% Transparent Dual Camera Cutouts (No Seams in Cam Areas) */
.multicam-bg-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    clip-path: polygon(
        evenodd,
        0px 0px,
        32px 0px,
        32px 28px,
        1312px 28px,
        1312px 748px,
        32px 748px,
        32px 28px,
        32px 0px,
        1920px 0px,
        1920px 737px,
        1888px 737px,
        1888px 1052px,
        1328px 1052px,
        1328px 737px,
        1888px 737px,
        1920px 737px,
        1920px 1080px,
        0px 1080px,
        0px 0px
    );
    -webkit-clip-path: polygon(
        evenodd,
        0px 0px,
        32px 0px,
        32px 28px,
        1312px 28px,
        1312px 748px,
        32px 748px,
        32px 28px,
        32px 0px,
        1920px 0px,
        1920px 737px,
        1888px 737px,
        1888px 1052px,
        1328px 1052px,
        1328px 737px,
        1888px 737px,
        1920px 737px,
        1920px 1080px,
        0px 1080px,
        0px 0px
    );
}

/* Solid Warm Gold & Ivory Canvas Base (Restores full luminous brightness matching Splash Screen) */
.multicam-canvas-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 48%, #ffffff 0%, #fffef8 45%, #fcf7e9 80%, #f6ebce 100%);
}

/* Radiant Golden Auras for Multi-Cam Screen */
.gold-aura-multi-left {
    position: absolute;
    left: 35%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 1100px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(235, 192, 85, 0.38) 0%, rgba(248, 222, 138, 0.22) 45%, rgba(255, 248, 228, 0.06) 75%, transparent 90%);
    filter: blur(45px);
    pointer-events: none;
    will-change: transform, opacity;
}

.gold-aura-multi-right {
    position: absolute;
    right: 280px;
    top: 360px;
    transform: translate(50%, -50%);
    width: 680px;
    height: 720px;
    background: radial-gradient(ellipse at center, rgba(235, 192, 85, 0.34) 0%, rgba(248, 222, 138, 0.2) 45%, rgba(255, 248, 228, 0.05) 75%, transparent 85%);
    filter: blur(45px);
    pointer-events: none;
    will-change: transform, opacity;
}

.multicam-layout {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 28px 32px;
    gap: 16px;
    z-index: 10;
    box-sizing: border-box;
}

/* Left Column (1280px) */
.multicam-left-col {
    width: 1280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Right Column (560px) */
.multicam-right-col {
    width: 560px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    position: relative;
}

/* 16:9 Camera Frame Wrappers */
.cam-box-wrap {
    position: relative;
    box-sizing: border-box;
    will-change: transform, opacity;
}

.cam-primary-wrap {
    width: 1280px;
    height: 720px;
    aspect-ratio: 16 / 9;
}

.cam-secondary-wrap {
    width: 560px;
    height: 315px;
    aspect-ratio: 16 / 9;
    position: relative;
    z-index: 25;
}

/* Luxury Metallic Golden Border Frame */
.cam-gold-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border: 3.5px solid #d4af37;
    border-image: linear-gradient(135deg, #b38728 0%, #f7e7be 25%, #d4af37 50%, #fff1b8 70%, #aa771c 100%) 1;
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.45), 0 8px 32px rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    z-index: 25;
}

/* Camera Feed Area (100% Transparent by Default for OBS Studio) */
.cam-feed-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden;
}

/* Mock Camera Feed Visualizer: Hidden by default so OBS camera shines through */
.cam-mock-placeholder {
    display: none !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, #151821 0%, #08090c 100%);
    align-items: center;
    justify-content: center;
}

/* Show mock camera preview only when explicitly requested (?preview=1 or HUD toggle) */
.show-cam-preview .cam-mock-placeholder {
    display: flex !important;
}

.cam-mock-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #f7e7be;
    letter-spacing: 1px;
}

.cam-mock-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e50914;
    box-shadow: 0 0 6px #ff2222;
}

/* Golden Frame Corner Brackets */
.cam-corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: #f7e7be;
    border-style: solid;
    z-index: 30;
    pointer-events: none;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.85);
}

.cam-corner-tl {
    top: -3px;
    left: -3px;
    border-width: 3px 0 0 3px;
}

.cam-corner-tr {
    top: -3px;
    right: -3px;
    border-width: 3px 3px 0 0;
}

.cam-corner-bl {
    bottom: -3px;
    left: -3px;
    border-width: 0 0 3px 3px;
}

.cam-corner-br {
    bottom: -3px;
    right: -3px;
    border-width: 0 3px 3px 0;
}

/* Bottom-Left: Church Identity Footer underneath Cam 1 */
.multicam-church-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 304px;
    width: 100%;
    z-index: 10;
    will-change: transform, opacity;
}

.multicam-logo-wrap {
    width: 86px;
    height: 84px;
    margin-bottom: 8px;
}

.multicam-church-title {
    font-family: 'Cinzel', serif;
    font-size: 42px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 2px;
    line-height: 1.15;
    margin: 0;
}

.multicam-church-loc {
    font-family: 'Cinzel', serif;
    font-size: 19px;
    font-weight: 600;
    color: #111111;
    letter-spacing: 6px;
    margin: 5px 0 6px 0;
}

.multicam-church-motto {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #222222;
    letter-spacing: 0.4px;
    margin: 0;
}

.multicam-branding {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    color: #555555;
    letter-spacing: 0.8px;
    margin-top: 8px;
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
}

/* Top-Right: Sunday Worship SVG + Timings */
.multicam-top-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 6px;
    margin-bottom: auto;
    will-change: transform, opacity;
}

.multicam-sw-wrap {
    width: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform, opacity;
}

.multicam-sw-wrap svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.multicam-sw-wrap svg path {
    fill: #000000;
}

.multicam-timing-line {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.5px;
    margin-top: 10px;
}

/* Middle-Right: Church Building Image sitting directly above Cam 2 */
.multicam-building-wrap {
    width: 560px;
    max-width: 560px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    position: relative;
    margin-bottom: -2px; /* Foundations sit flush directly behind Cam 2 top gold border */
    z-index: 10;
    will-change: transform, opacity;
}

.multicam-church-img {
    width: 560px;
    max-width: 560px;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}

/* ==========================================================================
   Space Screen (Single 16:9 Cam + Lower Content Canvas + Right Column Stack)
   --------------------------------------------------------------------------
   - Top-Left: Cam 1 (1280x720, 16:9) Primary Feed with gold frame
   - Bottom-Left: Spacious Text Canvas (1280x304) for sermon titles/scriptures
   - Top-Right: Church Logo + CENTENARY BAPTIST CHURCH WARANGAL
   - Middle-Right: Sunday Worship SVG Logo + Timings
   - Bottom-Right: Church Building Image anchored at bottom right
   - Background: Gold & Ivory ambient motion background (same as splash)
   ========================================================================== */
.space-screen-body {
    background: transparent !important;
    background-color: transparent !important;
}

.space-screen-body .space-stage,
.space-screen-body .space-canvas {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.space-screen {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
}

/* Complete Ambient Background Stack for Space Screen with 100% Transparent Primary Camera Cutout */
.space-bg-stack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    clip-path: polygon(
        evenodd,
        0px 0px,
        32px 0px,
        32px 28px,
        1312px 28px,
        1312px 748px,
        32px 748px,
        32px 28px,
        32px 0px,
        1920px 0px,
        1920px 1080px,
        0px 1080px,
        0px 0px
    );
    -webkit-clip-path: polygon(
        evenodd,
        0px 0px,
        32px 0px,
        32px 28px,
        1312px 28px,
        1312px 748px,
        32px 748px,
        32px 28px,
        32px 0px,
        1920px 0px,
        1920px 1080px,
        0px 1080px,
        0px 0px
    );
}

.space-canvas-base {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 48%, #ffffff 0%, #fffef8 45%, #fcf7e9 80%, #f6ebce 100%);
}

.gold-aura-space-text {
    position: absolute;
    left: 36%;
    bottom: 20px;
    transform: translateX(-50%);
    width: 900px;
    height: 320px;
    background: radial-gradient(ellipse at center, rgba(235, 192, 85, 0.32) 0%, rgba(248, 222, 138, 0.16) 45%, rgba(255, 248, 228, 0.04) 75%, transparent 90%);
    filter: blur(45px);
    pointer-events: none;
    will-change: transform, opacity;
}

/* Primary Camera Feed Area (100% Transparent by Default for OBS) */
#spaceCamFeedPrimary {
    background: transparent !important;
    background-color: transparent !important;
}

.space-screen-body .cam-mock-placeholder {
    display: none !important;
}

.space-screen-body.show-cam-preview .cam-mock-placeholder {
    display: flex !important;
}

/* Layout Grid */
.space-layout {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    padding: 28px 32px;
    gap: 16px;
    z-index: 10;
    box-sizing: border-box;
}

/* Left Column (1280px) */
.space-left-col {
    width: 1280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Lower Text Display Area in Empty Space Below Camera */
.space-text-display {
    width: 1280px;
    height: 296px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    will-change: transform, opacity;
}

.space-text-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px 32px 18px 32px;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72) 0%, rgba(253, 248, 238, 0.52) 100%);
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    position: relative;
    overflow: hidden;
}

.space-text-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #b38728 0%, #f7e7be 25%, #d4af37 50%, #fff1b8 75%, #aa771c 100%);
}

.space-text-header {
    display: flex;
    align-items: center;
    gap: 14px;
}

.space-text-badge {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #7a580e;
    background: rgba(212, 175, 55, 0.18);
    border: 1px solid rgba(212, 175, 55, 0.5);
    padding: 4px 14px;
    border-radius: 14px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(212, 175, 55, 0.15);
}

.space-text-accent-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.6), transparent);
}

.space-text-headline {
    font-family: 'Cinzel', serif;
    font-size: 34px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 1.5px;
    line-height: 1.18;
    margin: 4px 0 6px 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.space-text-body {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 18.5px;
    font-weight: 600;
    color: #222222;
    line-height: 1.42;
    letter-spacing: 0.3px;
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
}

.space-text-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(212, 175, 55, 0.25);
}

.space-text-speaker {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #8a6515;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.space-branding {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 10.5px;
    font-weight: 600;
    color: #666666;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Right Column (560px) */
.space-right-col {
    width: 560px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Top-Right: Church Header */
.space-church-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 4px;
    will-change: transform, opacity;
}

.space-logo-wrap {
    width: 76px;
    height: 74px;
    margin-bottom: 8px;
}

.space-church-title {
    font-family: 'Cinzel', serif;
    font-size: 32px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 1.5px;
    line-height: 1.15;
    margin: 0;
}

.space-church-loc {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 600;
    color: #111111;
    letter-spacing: 5px;
    margin: 4px 0 0 0;
}

/* Middle-Right: Sunday Worship SVG + Timings */
.space-sw-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    will-change: transform, opacity;
}

.space-sw-wrap {
    width: 330px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
    will-change: transform, opacity;
}

.space-sw-wrap svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.space-sw-wrap svg path {
    fill: #000000;
}

.space-timing-line {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.5px;
    margin-top: 8px;
}

/* Bottom-Right: Church Building Image */
.space-building-wrap {
    width: 560px;
    max-width: 560px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: visible;
    position: relative;
    z-index: 10;
    will-change: transform, opacity;
}

.space-church-img {
    width: 560px;
    max-width: 560px;
    height: auto;
    display: block;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
}

/* ==========================================================================
   End Card Broadcast Screen (Closing Title in Badhorse font + Bible verse)
   --------------------------------------------------------------------------
   - Ambient Background: Matches Splash Screen 1:1 with golden particles & sweep
   - Top Header: Church Logo + CENTENARY BAPTIST CHURCH WARANGAL
   - Center Showcase: Badhorse Script Closing Title + Divider + Benediction Verse
   - Bottom Footer: Service Timings + Axe Media Branding + Website
   ========================================================================== */
.endcard-screen-body {
    background-color: #0d0e12;
}

.endcard-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.endcard-header {
    margin-top: 4px;
    will-change: transform, opacity;
}

.endcard-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: -16px;
    will-change: transform, opacity;
}

.endcard-title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 4px 18px rgba(212, 175, 55, 0.28));
    will-change: transform, opacity;
}

.endcard-title-text {
    font-family: 'Badhorse', cursive, serif;
    font-size: 86px;
    font-weight: normal;
    color: #1a150e;
    letter-spacing: 2px;
    line-height: 1.15;
    margin: 0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 3px 12px rgba(212, 175, 55, 0.2);
}

.endcard-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 580px;
    margin: 22px 0 18px 0;
    opacity: 0.88;
}

.endcard-divider .divider-line {
    flex: 1;
    height: 1.5px;
}

.endcard-divider .divider-line.left {
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85));
}

.endcard-divider .divider-line.right {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.85), transparent);
}

.endcard-divider .divider-cross {
    margin: 0 16px;
    font-size: 18px;
    color: #c49a2a;
    text-shadow: 0 0 8px rgba(235, 192, 85, 0.5);
}

.endcard-verse-wrap {
    max-width: 1060px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.endcard-verse-text {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 24px;
    font-weight: 400;
    font-style: italic;
    color: #383020;
    line-height: 1.62;
    letter-spacing: 0.4px;
    margin: 0;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.endcard-verse-ref {
    font-family: 'Cinzel', serif;
    font-size: 16px;
    font-weight: 700;
    color: #9d771f;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-top: 14px;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* ==========================================================================
   Offering & Tithes Lower Strip Overlay (120px Height for OBS Studio)
   ========================================================================== */
.offering-screen-body {
    width: 100vw;
    height: 120px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent !important;
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offering-stage {
    position: relative;
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden;
}

/* Luxury Metallic Gold Outer Pill Border Container */
.offering-pill-container {
    position: relative;
    width: calc(100% - 48px);
    max-width: 1740px;
    height: 104px;
    border-radius: 52px;
    padding: 2.5px;
    background: linear-gradient(135deg, #b38728 0%, #f7e7be 25%, #d4af37 50%, #fff1b8 75%, #aa771c 100%);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 0 22px rgba(212, 175, 55, 0.45);
    box-sizing: border-box;
    will-change: transform, opacity;
}

/* Inner Pill Canvas */
.offering-pill-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(135deg, #ffffff 0%, #fffef6 40%, #fcf7e7 75%, #f6ebd0 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px 0 24px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Ambient Gold Radiance inside Pill */
.offering-gold-aura {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

.offering-aura-left {
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    width: 350px;
    height: 180px;
    background: radial-gradient(ellipse, rgba(235, 192, 85, 0.35) 0%, transparent 70%);
    filter: blur(25px);
}

.offering-aura-center {
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 160px;
    background: radial-gradient(ellipse, rgba(248, 222, 138, 0.3) 0%, transparent 70%);
    filter: blur(30px);
}

/* Diagonal Light Sweep across Pill */
.offering-shimmer {
    position: absolute;
    top: -50%;
    left: -60%;
    width: 220%;
    height: 200%;
    background: linear-gradient(
        115deg,
        transparent 40%,
        rgba(255, 235, 160, 0.12) 46%,
        rgba(240, 200, 90, 0.32) 50%,
        rgba(255, 240, 180, 0.16) 54%,
        transparent 60%
    );
    transform: rotate(5deg);
    pointer-events: none;
    animation: shimmerSweep 7s ease-in-out infinite;
}

/* Pill Content Sections */
.offering-section {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
}

/* Left Section: Church Logo + Offering Badge + Account Holder */
.offering-left-sec {
    gap: 16px;
    flex-shrink: 0;
}

.offering-logo-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offering-logo-glow {
    position: absolute;
    inset: -6px;
    background: radial-gradient(circle, rgba(235, 192, 85, 0.5) 0%, transparent 75%);
    border-radius: 50%;
    filter: blur(6px);
}

.offering-logo-img {
    position: relative;
    height: 64px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.18));
}

.offering-title-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.offering-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #2b2210 0%, #151109 100%);
    border: 1px solid rgba(212, 175, 55, 0.7);
    padding: 3px 12px;
    border-radius: 20px;
    width: fit-content;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.offering-badge-icon {
    color: #eac055;
    font-size: 13px;
    line-height: 1;
}

.offering-badge-text {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #f7e7be;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.offering-church-name {
    font-family: 'Cinzel', serif;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    letter-spacing: 1.2px;
    margin-top: 3px;
    white-space: nowrap;
}

/* Vertical Gold Hairline Dividers */
.offering-divider {
    width: 1.5px;
    height: 56px;
    background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.3) 15%, rgba(179, 135, 40, 0.85) 50%, rgba(212, 175, 55, 0.3) 85%, transparent 100%);
    margin: 0 18px;
    flex-shrink: 0;
}

/* Center Details: Account Number, IFSC, Branch */
.offering-details-sec {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    justify-content: space-evenly;
}

.offering-data-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.offering-label {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #8c6a1b;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.offering-val-acc {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.16);
    border: 1.5px solid rgba(212, 175, 55, 0.55);
    border-radius: 8px;
    padding: 3px 14px;
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #0b0c0e;
    letter-spacing: 2px;
    box-shadow: inset 0 1px 3px rgba(212, 175, 55, 0.2);
    white-space: nowrap;
}

.offering-val-ifsc {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 21px;
    font-weight: 700;
    color: #111111;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.offering-val-branch {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: #1a1a1a;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Right Section: Cheerful Giver Verse + Axe Media Branding */
.offering-right-sec {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    text-align: right;
    flex-shrink: 0;
}

.offering-verse-bubble {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 14px;
    font-style: italic;
    color: #4a3d1e;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.offering-verse-ref {
    font-family: 'Cinzel', serif;
    font-size: 11px;
    font-weight: 700;
    color: #9d771f;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-style: normal;
    margin-top: 2px;
}

.offering-branding {
    font-family: 'Glacial Indifference', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #666666;
    letter-spacing: 0.8px;
    margin-top: 4px;
    white-space: nowrap;
}

/* Offering Operator HUD */
.offering-hud {
    position: absolute;
    top: 6px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 100;
}

.offering-stage:hover .offering-hud {
    opacity: 1;
}