/* ==========================================
   FPC PUBLIC SERMON MEDIA STYLES (Exorcised & Unified)
   ========================================== */

/* --- 1. MAIN PLAYER & ARCHIVE WRAPPERS (Dynamic Backgrounds) --- */
#sermon-archive-wrapper { 
    width: 100%; 
    font-family: 'Inter', sans-serif; 
}

/* Base Layout & LIGHT MODE DEFAULT (Soft Ambient Flow) */
#sermon-player-card { 
    font-family: 'Inter', sans-serif;
    margin-left: auto; margin-right: auto;
    transition: all 0.4s ease; border-radius: 1rem; max-width: 1350px;
    
    /* Exactly fpc-ambient-start */
    background-color: #f8fafc !important;
    background-image: radial-gradient(ellipse at 0% 10%, #dbeafe 0%, transparent 55%), radial-gradient(ellipse at 100% 60%, #eef2ff 0%, transparent 60%), radial-gradient(ellipse at 50% 0%, #ffffff 0%, transparent 70%) !important;
    border: 1px solid rgba(219, 234, 254, 0.8) !important;
    box-shadow: 0 20px 40px -15px rgba(59, 130, 246, 0.15) !important;
}

#sermon-archive-card { 
    font-family: 'Inter', sans-serif;
    margin-left: auto; margin-right: auto;
    transition: all 0.4s ease; border-radius: 1rem; max-width: 1800px;
    
    /* Exactly fpc-ambient-mid */
    background-color: #f8fafc !important;
    background-image: radial-gradient(ellipse at 0% 40%, #eef2ff 0%, transparent 65%), radial-gradient(ellipse at 100% 20%, #dbeafe 0%, transparent 55%), radial-gradient(ellipse at 100% 80%, #f1f5f9 0%, transparent 55%), radial-gradient(ellipse at 5% 90%, #eff6ff 0%, transparent 65%) !important;
    border: 1px solid rgba(203, 213, 225, 0.8) !important;
    box-shadow: 0 10px 30px -10px rgba(71, 85, 105, 0.1) !important;
}

/* DARK MODE OVERRIDE: Solid Midnight Blue */
html.dark #sermon-player-card, 
html.dark #sermon-archive-card {
    background-color: #0f172a !important; background-image: none !important;
    border: 1px solid #1e293b !important; box-shadow: none !important;
}

/* Global site footer — matches sermon player ambient (light) + midnight (dark) */
.fpc-global-footer {
    border-top: 1px solid rgba(219, 234, 254, 0.8) !important;
    background-color: #f8fafc !important;
    background-image:
        radial-gradient(ellipse at 0% 10%, #dbeafe 0%, transparent 55%),
        radial-gradient(ellipse at 100% 60%, #eef2ff 0%, transparent 60%),
        radial-gradient(ellipse at 50% 0%, #ffffff 0%, transparent 70%) !important;
    box-shadow: 0 -12px 40px -18px rgba(59, 130, 246, 0.15) !important;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
html.dark .fpc-global-footer {
    background-color: #0f172a !important;
    background-image: none !important;
    border-top-color: #1e293b !important;
    box-shadow: none !important;
}

/* ELEMENTOR GLOBAL FIX */
.elementor-section:has(#sermon-player-card), .e-con:has(#sermon-player-card),
.elementor-section:has(#sermon-archive-card), .e-con:has(#sermon-archive-card),
.elementor-section:has(#fpc-light-intro), .e-con:has(#fpc-light-intro) {
    background-color: transparent !important; background-image: none !important;
}

/* --- 2. INNER PLAYER CONTAINERS (The Elevated Audio Bars) --- */

/* LIGHT MODE DEFAULT: Crisp Glassy White + Blue Glow */
.main-player-container, .player-container { 
    border-radius: 12px; transition: all 0.4s ease;
    background: rgba(255, 255, 255, 0.7) !important; 
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8) !important; 
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.2) !important; 
}
.main-player-container { padding: 1.5rem; }
.player-container { padding: 1.25rem; display: flex; align-items: center; gap: 1.25rem; }

/* DARK MODE OVERRIDE: Lighter Slate on Midnight Blue */
html.dark .main-player-container, 
html.dark .player-container { 
    background: #1e293b !important; border: 1px solid #334155 !important; 
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15) !important; backdrop-filter: none;
}

/* DYNAMIC INTERNAL BACKGROUNDS */
.main-player-container .bg-white\/50, .player-container .bg-white\/50 { transition: all 0.3s ease; }
html.dark .main-player-container .bg-white\/50, html.dark .player-container .bg-white\/50 {
    background-color: rgba(15, 23, 42, 0.6) !important; border-color: rgba(51, 65, 85, 0.5) !important;
}

/* --- 3. ARCHIVE ROWS & ACCORDIONS --- */
.archive-sermon-row { width: 100% !important; border-bottom: 1px solid rgba(59, 130, 246, 0.15); transition: opacity 0.5s ease-in; display: block !important; }
.archive-sermon-row:last-child { border-bottom: none; }
.archive-header { cursor: pointer; user-select: none; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.archive-details { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out; width: 100%; }
.archive-details.active { max-height: 1000px; opacity: 1; padding-top: 1rem; padding-bottom: 1rem; }

/* --- 4. CUSTOM PLAYER CONTROLS --- */
.play-btn { color: #5F99FF; transition: transform 0.2s, color 0.2s; outline: none !important; background: none !important; border: none !important; padding: 0; }
.play-btn:hover { transform: scale(1.1) !important; color: #1E40AF !important; }
.progress-area { flex-grow: 1; min-width: 200px; }
.progress-bg { width: 100%; height: 6px; background: #e2e8f0; border-radius: 99px; cursor: pointer; position: relative; }
.progress-fill { height: 100%; background: #5F99FF; border-radius: 99px; width: 0%; transition: width 0.1s linear; }
.skip-control { display: flex; flex-direction: column; align-items: center; font-size: 10px; font-weight: 800; cursor: pointer; user-select: none; padding: 8px 12px; margin: -8px -12px; transition: color 0.3s; }
.speed-btn { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; border-radius: 6px; width: 45px; height: 26px; transition: all 0.3s ease; }
.volume-slider { -webkit-appearance: none; width: 70px; height: 4px; background: #e2e8f0; border-radius: 5px; outline: none; cursor: pointer; }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: #1E40AF; border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.2); border-radius: 50%; }
.volume-num { font-size: 10px; font-weight: 800; min-width: 25px; display: inline-block; text-align: center; }

/* --- 5. FILTERS & HIGHLIGHTS --- */
.filter-dropdown { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.7rem center; background-size: 1em; }
#filter-status { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(8px); cursor: pointer; }
#filter-status:hover { transform: translateY(-2px); background-color: rgba(239, 246, 255, 0.8); }
mark.highlight { background-color: #dbeafe; color: #1e40af; padding: 0 2px; border-radius: 2px; font-weight: 800; }

/* --- 6. ANIMATIONS & EQ --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.fade-in { animation: fadeIn 0.3s ease-out forwards; }
.fade-out { animation: fadeOut 0.3s ease-in forwards; }
@keyframes playPulse { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.32); } 75% { transform: scale(1.12); } }
.pulse-twice { animation: playPulse 380ms ease-in-out 2 !important; }
@keyframes fpcEQ { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.fpc-eq-container { display: inline-flex; align-items: flex-end; gap: 3px; margin-left: 12px; height: 20px; vertical-align: middle; }
.fpc-eq-container.hidden { display: none !important; }
.fpc-eq-bar { width: 4px; border-radius: 2px 2px 0 0; background-color: #3b82f6; transform-origin: bottom; animation: fpcEQ 0.8s infinite ease-in-out; height: 100%; }
.fpc-eq-bar:nth-child(2) { animation-delay: -0.2s; }
.fpc-eq-bar:nth-child(3) { animation-delay: -0.4s; }
/* --- 7. BIBLE SIDECAR & SCROLLBARS --- */
.fpc-no-scroll { overflow: hidden !important; touch-action: none; }
#bible-main-window { position: relative; overflow: hidden; }
#bible-main-window::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; z-index: 55; }
#bible-main-window:has(#bible-scripture-menu-mobile.is-open)::before { opacity: 1; visibility: visible; }
#bible-scripture-menu-mobile { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, visibility 0.3s ease; transform: translateY(100%); opacity: 0; visibility: hidden; pointer-events: none; position: absolute; bottom: 0; left: 0; right: 0; height: 60% !important; background: white; border-top: 1px solid rgba(0,0,0,0.1); box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.2); z-index: 60; }
#bible-scripture-menu-mobile.is-open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
#bible-text-display::-webkit-scrollbar { width: 6px; }
#bible-text-display::-webkit-scrollbar-track { background: transparent; }
#bible-text-display::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
#fpc-volume-container { padding: 12px 16px 8px; }
#fpc-volume-slider { width: 100%; height: 6px; border-radius: 9999px; background: #e2e8f0; outline: none; opacity: 0.8; -webkit-appearance: none; appearance: none; transition: opacity .2s; }
#fpc-volume-slider:hover { opacity: 1; }
#fpc-volume-slider::-webkit-slider-thumb, #fpc-volume-slider::-moz-range-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #3b82f6; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* --- 8. CONTINUE BANNER --- */
#continue-banner { top: 1.5rem; transition: all 0.45s cubic-bezier(0.25, 0.1, 0.25, 1); }
#continue-banner.closing { transform: translate(-50%, -160px) scale(0.92) !important; opacity: 0 !important; }

/* --- 9. RESPONSIVE QUERIES --- */
@media (max-width: 640px) {
    #continue-banner { top: auto; bottom: calc(1.5rem + env(safe-area-inset-bottom)); max-width: 94%; }
    #continue-banner.closing { transform: translate(-50%, 160px) scale(0.92) !important; }
    #fpc-mini-player { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) and (max-width: 1279px) {
    #bible-main-window { width: 80vw !important; max-width: 420px !important; height: 74vh !important; max-height: 660px !important; margin: 0 auto; }
    #bible-sidecar-desktop { width: 260px !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) and (orientation: landscape) {
    #bible-main-window { width: 72vw !important; max-width: 400px !important; height: 68vh !important; max-height: 620px !important; }
}
@media (min-width: 1280px) {
    #bible-main-window { width: 500px !important; height: 800px !important; }
}

/* --- 10. EXPLICIT DARK MODE OVERRIDES (.dark class) --- */
.dark .archive-sermon-row { border-color: #1e293b !important; }
.dark .archive-header:hover { background-color: #1e293b !important; }
.dark .progress-bg, .dark .volume-slider { background: #334155 !important; }
.dark .volume-slider::-webkit-slider-thumb { border-color: #1e293b !important; background: #5F99FF !important; }
.dark #filter-status:hover { background-color: #1e293b !important; }
.dark input, .dark select, .dark option { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; }
.dark #bible-text-display iframe { filter: invert(90%) hue-rotate(180deg); }
.dark #bible-text-display { background-color: #0f172a !important; }
.dark #bible-text-display::-webkit-scrollbar-thumb { background-color: #475569; }
.dark #bible-scripture-menu-mobile { background: #1e293b; border-top-color: #334155; }
.dark #fpc-volume-slider { background: #334155; }
.dark #fpc-volume-slider::-webkit-slider-thumb, .dark #fpc-volume-slider::-moz-range-thumb { background: #60a5fa; }

/* --- 11. ASTRA THEME HEADER OVERRIDES (Weekly Sermons Page) --- */

/* LIGHT MODE DEFAULT: Paint the header with the Ambient Blue flow */
.page-id-1858 .site-header, 
.page-id-1858 .main-header-bar,
.page-id-1858 .ast-theme-transparent-header {
    background-color: #f8fafc !important; 
    background-image: 
        radial-gradient(ellipse at 0% 10%, #dbeafe 0%, transparent 55%),
        radial-gradient(ellipse at 100% 60%, #eef2ff 0%, transparent 60%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.5) !important;
}

/* DARK MODE: Ambient Blue fading into Dark Slate */

/* 1. HEADER BAR: Transitive Split Background */
html.dark .page-id-1858 .site-header, 
html.dark .page-id-1858 .main-header-bar,
html.dark .page-id-1858 .ast-theme-transparent-header,
html.dark .page-id-1858 .ast-mobile-header-wrap .main-header-bar {
    background-image: linear-gradient(90deg, #dbeafe 0%, #dbeafe 10%, #0f172a 40%, #0f172a 100%) !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

/* 2. MOBILE DRAWER: Keep solid for readability */
html.dark .page-id-1858 .ast-mobile-header-content,
html.dark .page-id-1858 .ast-mobile-header-wrap .ast-mobile-header-content,
html.dark .page-id-1858 .main-header-menu,
html.dark .page-id-1858 .ast-header-break-point .main-header-bar {
    background-color: #0f172a !important;
    background-image: none !important;
}

/* 3. MENU LINKS: Text Visibility */
html.dark .page-id-1858 .main-header-menu a,
html.dark .page-id-1858 .ast-header-break-point .main-header-menu a,
html.dark .page-id-1858 .elementor-nav-menu a,
html.dark .page-id-1858 .menu-toggle {
    color: #f1f5f9 !important;
}

/* 4. HAMBURGER ICON: SVG Color */
html.dark .page-id-1858 .ast-mobile-svg, 
html.dark .page-id-1858 .menu-toggle span,
html.dark .page-id-1858 .ast-mobile-header-wrap .ast-mobile-svg {
    fill: #f1f5f9 !important;
}

/* 5. SUB-MENUS */
html.dark .page-id-1858 .ast-header-break-point .main-header-menu ul {
    background-color: #1e293b !important;
}

/* 6. LOGO AREA: Transparency Fix */
@media (max-width: 921px) {
    html.dark .page-id-1858 .site-branding, 
    html.dark .page-id-1858 .ast-site-identity {
        background: transparent !important;
    }
}

/* --- 12. FPC GLOBAL FOOTER --- */
.fpc-custom-footer {
    background-color: #03142e; 
    color: #aeb2b8;            
    padding: 35px 0;           
    font-family: 'Inter', sans-serif; 
    font-size: 15px;           
    letter-spacing: 0.5px;
    width: 100%;
}

.fpc-footer-inner {
    max-width: 1200px;         
    margin: 0 auto;
    padding: 0 30px;           
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.fpc-copyright { flex: 1; text-align: left; }
.fpc-powered   { flex: 1; text-align: center; font-weight: 500; }
.fpc-privacy   { flex: 1; text-align: right; }

.fpc-footer-inner a {
    color: #aeb2b8;
    text-decoration: none;
    transition: color 0.3s ease;
}

.fpc-footer-inner a:hover {
    color: #ffffff; 
}

@media (max-width: 768px) {
    .fpc-footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    .fpc-copyright, .fpc-powered, .fpc-privacy {
        text-align: center;
    }
}

/* --- 13. ELEMENTOR CANVAS (THE FLOOR) --- */

/* LIGHT MODE DEFAULT: Soft Off-White Canvas */
body.page-id-1858,
.page-id-1858 #page,
.page-id-1858 #content {
    background-color: #f8fafc !important;
    transition: background-color 0.4s ease;
}

/* DARK MODE OVERRIDE: Deep Midnight Blue Canvas */
html.dark body.page-id-1858,
html.dark .page-id-1858 #page,
html.dark .page-id-1858 #content {
    background-color: #0f172a !important;
}

/* --- TAG 1: DYNAMIC SECTION (Adapts to Light/Dark) --- */
        @media (prefers-color-scheme: dark) {
            .fpc-dynamic-section, .fpc-dynamic-section > .elementor-container, .fpc-dynamic-section .e-con, .fpc-dynamic-section .elementor-widget-wrap {
                background-color: #0f172a !important; transition: background-color 0.3s ease;
            }
            .fpc-dynamic-section .elementor-heading-title, .fpc-dynamic-section .elementor-widget-text-editor p, 
            .fpc-dynamic-section h1, .fpc-dynamic-section h2, .fpc-dynamic-section h3 { color: #f1f5f9 !important; }
            .fpc-dynamic-section input, .fpc-dynamic-section textarea, .fpc-dynamic-section select {
                background-color: #1e293b !important; color: #f1f5f9 !important; border: 1px solid #334155 !important; border-radius: 0.5rem !important;
            }
        }

        /* --- TAG 2: FORCE LIGHT SECTION (Stays white always) --- */
        .fpc-force-light, .fpc-force-light > .elementor-container, .fpc-force-light .e-con, .fpc-force-light .elementor-widget-wrap {
            background-color: #ffffff !important; transition: background-color 0.3s ease;
        }
        .fpc-force-light .elementor-heading-title, .fpc-force-light p, .fpc-force-light h1, .fpc-force-light h2, .fpc-force-light h3 { color: #0f172a !important; }
        
        /* --- TAG 3: FORCE DARK SECTION (Stays dark always) --- */
        .fpc-force-dark, .fpc-force-dark > .elementor-container, .fpc-force-dark .e-con, .fpc-force-dark .elementor-widget-wrap {
            background-color: #0f172a !important; transition: background-color 0.3s ease;
        }
        .fpc-force-dark .elementor-heading-title, .fpc-force-dark p, .fpc-force-dark h1, .fpc-force-dark h2, .fpc-force-dark h3 { color: #f1f5f9 !important; }

        /* --- THEME 1: AMBIENT FLOW (Soft Blues) --- */
        .fpc-ambient-start { background-color: #f8fafc !important; background-image: radial-gradient(ellipse at 0% 10%, #dbeafe 0%, transparent 55%), radial-gradient(ellipse at 100% 60%, #eef2ff 0%, transparent 60%), radial-gradient(ellipse at 50% 0%, #ffffff 0%, transparent 70%) !important; }
        .fpc-ambient-mid { background-color: #f8fafc !important; background-image: radial-gradient(ellipse at 0% 40%, #eef2ff 0%, transparent 65%), radial-gradient(ellipse at 100% 20%, #dbeafe 0%, transparent 55%), radial-gradient(ellipse at 100% 80%, #f1f5f9 0%, transparent 55%), radial-gradient(ellipse at 5% 90%, #eff6ff 0%, transparent 65%) !important; }
        .fpc-ambient-end { background-color: #f8fafc !important; background-image: radial-gradient(ellipse at 0% 20%, #eff6ff 0%, transparent 55%), radial-gradient(ellipse at 100% 80%, #dbeafe 0%, transparent 65%), radial-gradient(ellipse at 20% 100%, #eef2ff 0%, transparent 55%) !important; }

        /* --- THEME 2: DAWN FLOW (Warm Oranges/Reds) --- */
        .fpc-dawn-start { background-color: #fafaf9 !important; background-image: radial-gradient(circle at 20% -10%, #fffbeb 0%, transparent 70%) !important; }
        .fpc-dawn-mid { background-color: #fafaf9 !important; background-image: radial-gradient(circle at 5% 40%, #fff7ed 0%, transparent 80%), radial-gradient(circle at 95% 60%, #fff1f2 0%, transparent 80%) !important; }
        .fpc-dawn-end { background-color: #fafaf9 !important; background-image: radial-gradient(circle at 80% 110%, #fffbeb 0%, transparent 70%) !important; }

        /* --- THEME 3: SERENE FLOW (Soft Greens) --- */
        .fpc-serene-start { background-color: #f8fafc !important; background-image: radial-gradient(circle at 80% -10%, #ecfdf5 0%, transparent 70%) !important; }
        .fpc-serene-mid { background-color: #f8fafc !important; background-image: radial-gradient(circle at 5% 30%, #f0fdf4 0%, transparent 80%), radial-gradient(circle at 95% 70%, #f0fdfa 0%, transparent 80%) !important; }
        .fpc-serene-end { background-color: #f8fafc !important; background-image: radial-gradient(circle at 10% 110%, #ecfdf5 0%, transparent 70%) !important; }

        /* --- THEME 4: NOBLE FLOW (Deep Purples) --- */
        .fpc-noble-start { background-color: #f8fafc !important; background-image: radial-gradient(circle at 50% -10%, #f5f3ff 0%, transparent 80%) !important; }
        .fpc-noble-mid { background-color: #f8fafc !important; background-image: radial-gradient(circle at 10% 70%, #eef2ff 0%, transparent 80%), radial-gradient(circle at 90% 30%, #fdf4ff 0%, transparent 80%) !important; }
        .fpc-noble-end { background-color: #f8fafc !important; background-image: radial-gradient(circle at 50% 110%, #f5f3ff 0%, transparent 80%) !important; }

        /* --- THEME 5: MONO FLOW (Grays) --- */
        .fpc-mono-start { background-color: #f8fafc !important; background-image: radial-gradient(circle at 10% -20%, #f1f5f9 0%, transparent 70%) !important; }
        .fpc-mono-mid { background-color: #f8fafc !important; background-image: radial-gradient(circle at 0% 50%, #f1f5f9 0%, transparent 80%), radial-gradient(circle at 100% 50%, #e2e8f0 0%, transparent 80%) !important; }
        .fpc-mono-end { background-color: #f8fafc !important; background-image: radial-gradient(circle at 90% 120%, #f1f5f9 0%, transparent 70%) !important; }

        /* --- THEME 6: S CURVE (Intense Blue Mesh) --- */
        .fpc-ambient-flow-start { background-color: #f8fafc !important; background-image: radial-gradient(150% 120% at 0% 0%, transparent 37%, rgba(30, 58, 138, 0.01) 37.5%, rgba(30, 58, 138, 0.03) 38%, rgba(30, 58, 138, 0.01) 38.5%, transparent 39%), radial-gradient(150% 120% at 100% 100%, transparent 37%, rgba(30, 58, 138, 0.01) 37.5%, rgba(30, 58, 138, 0.03) 38%, rgba(30, 58, 138, 0.01) 38.5%, transparent 39%), radial-gradient(ellipse at 20% 30%, #e0e7ff 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, #dbeafe 0%, transparent 60%) !important; }
        .fpc-ambient-flow-mid { background-color: #f8fafc !important; background-image: radial-gradient(150% 120% at 100% 0%, transparent 37%, rgba(30, 58, 138, 0.01) 37.5%, rgba(30, 58, 138, 0.03) 38%, rgba(30, 58, 138, 0.01) 38.5%, transparent 39%), radial-gradient(ellipse at 80% 30%, #e0e7ff 0%, transparent 60%), radial-gradient(ellipse at 20% 70%, #dbeafe 0%, transparent 60%) !important; }
        .fpc-ambient-flow-end { background-color: #f8fafc !important; background-image: radial-gradient(150% 120% at 0% 0%, transparent 37%, rgba(30, 58, 138, 0.01) 37.5%, rgba(30, 58, 138, 0.03) 38%, rgba(30, 58, 138, 0.01) 38.5%, transparent 39%), radial-gradient(ellipse at 50% 10%, #e0e7ff 0%, transparent 60%), radial-gradient(ellipse at 20% 40%, #dbeafe 0%, transparent 50%) !important; }

        /* --- PREVENT ELEMENTOR FROM OVERRIDING GRADIENTS --- */
        [class*="fpc-ambient-"] > .elementor-container, [class*="fpc-ambient-"] > .e-con, [class*="fpc-ambient-"] .elementor-widget-wrap,
        [class*="fpc-dawn-"] > .elementor-container, [class*="fpc-dawn-"] > .e-con, [class*="fpc-dawn-"] .elementor-widget-wrap,
        [class*="fpc-serene-"] > .elementor-container, [class*="fpc-serene-"] > .e-con, [class*="fpc-serene-"] .elementor-widget-wrap,
        [class*="fpc-noble-"] > .elementor-container, [class*="fpc-noble-"] > .e-con, [class*="fpc-noble-"] .elementor-widget-wrap,
        [class*="fpc-mono-"] > .elementor-container, [class*="fpc-mono-"] > .e-con, [class*="fpc-mono-"] .elementor-widget-wrap { background-color: transparent !important; }
        
        [class*="fpc-ambient-"] .elementor-heading-title, [class*="fpc-ambient-"] p,
        [class*="fpc-dawn-"] .elementor-heading-title, [class*="fpc-dawn-"] p,
        [class*="fpc-serene-"] .elementor-heading-title, [class*="fpc-serene-"] p,
        [class*="fpc-noble-"] .elementor-heading-title, [class*="fpc-noble-"] p,
        [class*="fpc-mono-"] .elementor-heading-title, [class*="fpc-mono-"] p { color: #0f172a !important; }
        
        /* --- PARALLAX OVERLAYS --- */
        [class*="fpc-parallax-"] { position: relative; }
        [class*="fpc-parallax-"] > .elementor-container, [class*="fpc-parallax-"] > .e-con { position: relative; z-index: 10; }
        [class*="fpc-parallax-"]::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none; }
        
        .fpc-parallax-ambient::before { background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(30, 58, 138, 0.2) 100%); }
        .fpc-parallax-dawn::before { background: linear-gradient(135deg, rgba(153, 27, 27, 0.45) 0%, rgba(146, 64, 14, 0.5) 100%); }
        .fpc-parallax-serene::before { background: linear-gradient(135deg, rgba(6, 78, 59, 0.45) 0%, rgba(15, 118, 110, 0.5) 100%); }
        .fpc-parallax-noble::before { background: linear-gradient(135deg, rgba(49, 46, 129, 0.5) 0%, rgba(88, 28, 135, 0.55) 100%); }
        .fpc-parallax-mono::before { background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, rgba(51, 65, 85, 0.5) 100%); backdrop-filter: grayscale(100%) brightness(0.9); }

/* ==========================================
   FPC RSVP ENGINE STYLES
   (Extracted from inline <style> blocks in events-rsvp.php)
   ========================================== */

/* --- RSVP MODAL: Guest Row Animation --- */
@keyframes fpcFadeSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fpc-animate-guest { animation: fpcFadeSlideDown 0.3s ease-out forwards; }

/* --- RSVP MODAL: Lock page scroll while modal is open ---
   Only html gets overflow:hidden. Setting it on body too causes Android Chrome
   to swallow all touch-scroll events at the document level, breaking the
   overflow-y:auto scroll container inside the fixed modal overlay.
   The overlay is already position:fixed;inset:0 so background scroll is
   visually blocked without touching the body. */
html.fpc-rsvp-modal-open { overflow: hidden; }

/* --- RSVP MODAL: Sizing, containment, and responsive spacing ---
   Moved out of Tailwind arbitrary-value / responsive utilities (e.g.
   `sm:h-[85vh]`, `sm:rounded-[2rem]`, `sm:border-white/50`, `sm:px-8`) so the
   modal renders correctly regardless of whether tailwind-build.css was
   rebuilt after class changes. Anything that affects whether the form is
   usable on mobile (height, scroll container, safe-area insets) lives here,
   in hand-written CSS, so a forgotten Tailwind rebuild can never silently
   break the RSVP flow on a phone again.

   Mobile uses 100svh (small viewport height) so the shell is sized to the
   viewport as if the browser chrome is always visible, preventing overstretch
   as Android Chrome's URL bar collapses and expands. A 100vh fallback is
   declared first for browsers without svh support. */
.fpc-rsvp-shell {
    height: 100vh;
    height: 100svh;
    max-height: 100svh;
    border-radius: 0;
    border: 0;
}
@media (min-width: 640px) {
    .fpc-rsvp-shell {
        height: 85vh;
        max-height: 85vh;
        border-radius: 2rem;
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
    .dark .fpc-rsvp-shell {
        border-color: rgba(68, 64, 60, 0.5); /* stone-700 @ 50% */
    }
}

/* Scrollable form body. flex:1 + min-height:0 is the combination that lets
   overflow-y:auto activate inside a flex column on Android Chrome / Samsung
   Internet. Padding and gap are baked in here (instead of `p-4 sm:p-8
   gap-5 sm:gap-8`) because the sm: variants for those are not guaranteed
   to be in the compiled Tailwind file. */
.fpc-rsvp-body {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    gap: 1.25rem;
}
@media (min-width: 640px) {
    .fpc-rsvp-body {
        padding: 2rem;
        gap: 2rem;
    }
}

/* Header: compact on mobile, generous on sm+. Padding-top uses safe-area
   inset so notched devices do not overlap the close button. */
.fpc-rsvp-header {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: max(0.75rem, env(safe-area-inset-top));
    padding-bottom: 0.75rem;
}
@media (min-width: 640px) {
    .fpc-rsvp-header {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-top: max(1.5rem, env(safe-area-inset-top));
        padding-bottom: 1.5rem;
    }
}

/* Footer: tight on mobile (so the submit button hugs the bottom edge),
   generous on desktop. Padding-bottom uses safe-area inset so the submit
   button never hides behind the iOS home indicator. */
.fpc-rsvp-footer {
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
@media (min-width: 640px) {
    .fpc-rsvp-footer {
        padding: 2rem;
        padding-bottom: max(2rem, env(safe-area-inset-bottom));
    }
}

/* Secondary helper paragraph in the modal header. Hidden on mobile to give
   the event title more room; shown on sm+. Uses :not(.hidden) so the JS
   toggle (rsvp-engine.js adds .hidden during the success screen) still
   wins with exact-same specificity logic. */
.fpc-rsvp-help-text { display: none; }
@media (min-width: 640px) {
    .fpc-rsvp-help-text:not(.hidden) { display: block; }
}

/* --- CALENDAR: Compact View Mode --- */
#fpc-cal-root.fpc-compact-mode .fpc-day-cell { min-height: 100px !important; padding: 0.5rem !important; }
#fpc-cal-root.fpc-compact-mode .fpc-day-number { font-size: 0.875rem !important; margin-bottom: 0.25rem !important; }
#fpc-cal-root.fpc-compact-mode .fpc-cal-item { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; font-size: 0.65rem !important; }

/* --- SELF-SERVICE RSVP HUB: Strip theme chrome for app-like canvas --- */
body.fpc-self-service-active header,
body.fpc-self-service-active .site-header,
body.fpc-self-service-active #masthead,
body.fpc-self-service-active .elementor-location-header,
body.fpc-self-service-active footer,
body.fpc-self-service-active .site-footer,
body.fpc-self-service-active #colophon,
body.fpc-self-service-active .elementor-location-footer { display: none !important; }

body.fpc-self-service-active .site-content,
body.fpc-self-service-active #content,
body.fpc-self-service-active #main,
body.fpc-self-service-active .page-content,
body.fpc-self-service-active .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}