/* Premium Cinematic Background (No External Links) */
/* Sirf yeh wala rakho */
/* --- Modal Winter Theme --- */

[data-theme="christmas"] .jinx-modal {
    background: rgba(0, 0, 0, 0.7) !important; /* Bahar ka area thora dark taake modal highlight ho */
    backdrop-filter: blur(8px);
}

[data-theme="christmas"] .jinx-modal .modal-content {
    background: rgba(255, 255, 255, 0.1) !important; /* Frosted glass look */
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-top: 5px solid #ffffff !important; /* Upar barf ki moti layer */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.1) !important;
    border-radius: 20px !important;
}

/* Modal Title */
[data-theme="christmas"] #modalTitle {
    color: #ffffff !important;
    font-family: 'Cinzel', serif;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.6) !important;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 15px;
}

/* Modal ke andar jo books hain */
[data-theme="christmas"] .book-card h4 {
    color: #ffffff !important;
    font-size: 0.9rem;
    margin-top: 10px;
    text-align: center;
}

/* Modal Book Wrapper Fix */
[data-theme="christmas"] .modal-book-wrapper {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    border-top: 4px solid #ffffff !important; /* Card ke upar bhi barf */
    border-radius: 10px !important;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-theme="christmas"] .modal-book-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4) !important;
    border-color: #ffffff !important;
}

/* Close Button (Ice look) */
[data-theme="christmas"] .close-modal {
    color: #ffffff !important;
    opacity: 0.8;
    font-size: 35px;
    transition: 0.3s;
}

[data-theme="christmas"] .close-modal:hover {
    opacity: 1;
    transform: rotate(90deg);
    text-shadow: 0 0 10px #ffffff;
}

/* Modal ke andar Loader */
[data-theme="christmas"] .bx-loader-alt {
    color: #ffffff !important;
}

/* Author cards inside modal */
[data-theme="christmas"] .author-card img {
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3) !important;
}

[data-theme="christmas"] .author-card p {
    color: #ffffff !important;
}







[data-theme="christmas"] .jinxed-nav {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
[data-theme="christmas"] .main-content section,
[data-theme="christmas"] .category-section {
    background: rgba(255, 255, 255, 0.03) !important; /* Halka sa white tint */
    backdrop-filter: blur(5px);
    margin-bottom: 20px;
    padding: 20px;
    border-radius: 15px;
}

[data-theme="christmas"] h2.section-title,
[data-theme="christmas"] .section-heading {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
    border-left: 4px solid #ffffff !important; /* Gold ki jagah white bar */
    padding-left: 15px;
}
[data-theme="christmas"] h1, 
[data-theme="christmas"] h2, 
[data-theme="christmas"] .section-title {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2) !important;
    text-transform: uppercase;
    letter-spacing: 2px;
}
[data-theme="christmas"] .btn-login, 
[data-theme="christmas"] .btn-publish {
    background: linear-gradient(135deg, #ffffff 0%, #e0f7fa 100%) !important;
    color: #004d40 !important; /* Dark teal for contrast */
    border: none !important;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6) !important;
}

[data-theme="christmas"] .btn-login:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 0 25px #ffffff !important;
}
[data-theme="christmas"] body {
    margin: 0;
    padding: 0;
    background-color: #000000 !important; /* Pure Black fallback */
    /* Deep Night Charcoal Mesh (No Green) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='.05'/%3E%3Crect width='100%25' height='100%25' fill='%23050505'/%3E%3Ccircle cx='500' cy='500' r='600' fill='url(%23b)'/%3E%3Cdefs%3E%3CradialGradient id='b'%3E%3Cstop offset='0%25' stop-color='%231a1a1a'/%3E%3Cstop offset='100%25' stop-color='%23000000'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* Video ko sahi se fix karne ke liye */
.video-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2; 
    overflow: hidden;
    background: #000;
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; /* Force display */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Video ko dark cinematic look dene ke liye */
    z-index: -1;
}

/* Video container ko temporary hide kar do agar woh error de rahi hai */
.video-bg-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2; /* Content aur canvas ke piche */
    overflow: hidden;
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Video ko stretch nahi hone dega */
}

/* Video ko dark karne ke liye layer (Jinx-App vibe ke liye) */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Halka dark filter */
    z-index: -1;
}

/* Jab video on ho toh body background transparent hona chahiye */



/* 2. Snow Card Fix: Glow Khatam, Solid White Border (Realistic Snow Layer) */
[data-theme="christmas"] .snow-card, 
[data-theme="christmas"] .category-item {
    position: relative !important;
    border-top: 5px solid #ffffff !important; /* Solid White Barf */
    border-radius: 12px !important;
    box-shadow: 
        inset 0 4px 6px rgba(255, 255, 255, 0.4), 
        0 15px 35px rgba(0, 0, 0, 0.9) !important;
    filter: none !important; /* Kisi bhi qism ka blur ya glow delete */
    overflow: visible !important;
    background-color: rgba(0, 0, 0, 0.6) !important; /* Card ka base dark rakho */
}

/* 3. Lottie Snow Container Fix */
.snow-slide-container {
    position: absolute;
    top: -35px; /* Border ke bilkul upar adjust karo */
    right: -10px;
    width: 80px;
    height: 80px;
    z-index: 100 !important;
    pointer-events: none;
    filter: drop-shadow(0 0 0 transparent) !important; /* No Glow */
}

/* 4. Canvas Transparency */
#snow-canvas {
    background: transparent !important;
    pointer-events: none;
    mix-blend-mode: screen; /* Taake sirf white particles dikhein */
}





        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap');

        :root {
            --bg-dark: #0a0101;
            --gold-light: #c5a059;
            --gold-dark: #8e6d2a;
            --menu-tan: #b99470;
            --gold-gradient: linear-gradient(180deg, #f9e2af 0%, #c5a059 50%, #8e6d2a 100%);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

        body {
            background: #0a0101; /* Fallback Black */
            /* Gradient ko 'at top' kiya hai taaki banner ke peeche glow aaye */
            background-image: radial-gradient(circle at top, #3a0101 0%, #0a0101 85%);
            background-attachment: fixed;
            min-height: 100vh;
            color: white;
            overflow-x: hidden;
            margin: 0;
        }

        /* --- Navbar --- */
        .jinxed-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 40px;
            background: rgba(10, 1, 1, 0.95);
            backdrop-filter: blur(15px);
            border-bottom: 2px solid transparent;
            border-image: linear-gradient(90deg, transparent, var(--gold-light), transparent) 1;
            position: sticky;
            top: 0;
            z-index: 1000;
            height: 140px;
        }

        .nav-left .logo img {
            height: 130px;
            filter: drop-shadow(0 0 20px rgba(197, 160, 89, 0.4));
        }

        /* --- Search Bar (Desktop) --- */
        .nav-center { flex: 0 1 450px; }
        .search-box {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(197, 160, 89, 0.3);
            border-radius: 50px;
            padding: 10px 20px;
            transition: 0.3s;
        }
        .search-box input { width: 100%; border: none; background: transparent; outline: none; color: #fff; }
        .search-box i { color: var(--gold-light); font-size: 20px; }

        /* --- Mobile Search Popup --- */
        .mobile-search-trigger { display: none; font-size: 28px; color: var(--gold-light); cursor: pointer; }
        
        .search-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(10, 1, 1, 0.98);
            z-index: 2000;
            display: none;
            flex-direction: column;
            align-items: center;
            padding-top: 100px;
            animation: fadeIn 0.3s ease;
        }
        .search-overlay.active { display: flex; }
        .search-overlay-close { position: absolute; top: 30px; right: 30px; font-size: 45px; color: var(--gold-light); cursor: pointer; }
        .search-overlay .search-box { width: 85%; background: rgba(255,255,255,0.05); border: 1px solid var(--gold-light); }

        /* --- ANIMATED BUTTONS --- */
        .nav-right { display: flex; align-items: center; gap: 15px; }

        .btn-login {
            background: var(--gold-gradient);
            color: #000 !important;
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 800;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 12px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.4), inset 0 -2px 5px rgba(0,0,0,0.2);
            border: none;
            transition: 0.3s;
            white-space: nowrap;
        }

        .btn-login::before {
            content: '';
            position: absolute;
            top: -50%; left: -50%;
            width: 200%; height: 200%;
            background: rgba(255,255,255,0.3);
            transform: rotate(45deg);
            transition: 0.6s;
        }

        .btn-login:hover { transform: scale(1.05); filter: brightness(1.2); }
        .btn-login:hover::before { left: 100%; }

        .btn-publish {
            background: transparent;
            color: var(--gold-light) !important;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 800;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 12px;
            border: 2px solid var(--gold-light);
            box-shadow: 0 0 10px rgba(197, 160, 89, 0.2);
            transition: 0.3s;
            white-space: nowrap;
        }

        .btn-publish:hover {
            background: rgba(197, 160, 89, 0.1);
            box-shadow: 0 0 20px rgba(197, 160, 89, 0.4);
            transform: scale(1.05);
        }

        .menu-icon { font-size: 40px; color: var(--gold-light); cursor: pointer; }

        /* --- Dropdown --- */
        .dropdown-menu {
            display: none; position: absolute; top: 90px; right: 0;
            background: var(--menu-tan); width: 280px; border-radius: 15px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.8); z-index: 1001; border: 2px solid var(--gold-dark);
        }
        .dropdown-menu.active { display: block; animation: slideDown 0.3s ease-out; }
        .dropdown-item { display: block; padding: 15px 25px; color: #000; text-decoration: none; font-weight: 800; text-transform: uppercase; border-bottom: 1px solid rgba(0,0,0,0.1); }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes slideDown { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform: translateY(0); } }

        /* --- Responsive Fixing --- */
        @media (max-width: 992px) {
            .jinxed-nav { height: 100px; padding: 0 15px; }
            .nav-left .logo img { height: 75px; }
            .nav-center { display: none; }
            .mobile-search-trigger { display: block; }
            
            /* Buttons adjustment for small screens */
            .btn-login, .btn-publish {
                padding: 8px 15px;
                font-size: 11px;
            }
            .nav-right { gap: 10px; }
        }

        /* For very small screens (phones) */
        @media (max-width: 480px) {
            .nav-left .logo img { height: 60px; }
            .btn-login, .btn-publish {
                padding: 6px 12px;
                font-size: 10px;
            }
            .menu-icon { font-size: 35px; }
        }
        /* --- NEW STATS PILLS (Safe Mode) --- */
.user-stats-minimal {
    display: flex;
    gap: 25px; /* Space for popping icons */
    align-items: center;
    margin-right: 10px;
}

.stat-pill {
    background: #d9d9d9; 
    height: 32px;
    min-width: 80px;
    border-radius: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; 
    padding-right: 12px;
    border: 1.5px solid var(--gold-light);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.stat-pill img {
    position: absolute;
    left: -15px; 
    top: 50%;
    transform: translateY(-50%);
    height: 40px; /* Slightly larger than pill */
    width: auto;
    z-index: 5;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,0.5));
}

.stat-pill span {
    color: #000;
    font-weight: 800;
    font-size: 14px;
}

/* Dropdown Fix: Taaki stats ke peeche na chhupay */
.dropdown-menu {
    top: 100px !important; /* Navbar height ke mutabiq niche kiya */
    z-index: 2000 !important;
}

/* Mobile Responsive: Stats ko mobile pe hide kiya taaki logo ke upar na aayein */
@media (max-width: 992px) {
    .user-stats-minimal { display: none; }
    .jinxed-nav { height: auto; padding: 10px 15px; }
}
/* --- Glowing Aura for Stat Pills --- */
.stat-pill {
    /* Main Neon Border Glow */
    border: 1px solid var(--gold-accent) !important;
    box-shadow: 
        0 0 15px rgba(197, 160, 89, 0.3),            /* Outer soft glow */
        inset 0 0 10px rgba(197, 160, 89, 0.2) !important; /* Inner subtle glow */
    
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.4s ease !important;
}

.stat-pill:hover {
    /* Intense Glow on Hover */
    border-color: #fff !important; 
    box-shadow: 
        0 0 25px var(--gold-accent), 
        0 0 50px rgba(197, 160, 89, 0.4) !important;
    filter: brightness(1.2);
}

/* --- Icon Glow (Bloom Effect) --- */
.stat-pill img {
    filter: 
        drop-shadow(0 0 5px var(--gold-accent)) 
        drop-shadow(0 0 10px rgba(197, 160, 89, 0.5)) !important;
}

/* --- Text Glow --- */
.stat-pill span {
    color: #fff !important;
    text-shadow: 
        0 0 8px rgba(255, 255, 255, 0.6), 
        0 0 15px var(--gold-accent) !important;
    font-weight: 800 !important;
}

/* --- Premium Background Glow (Radial Gradient) --- */
.user-stats-minimal::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 100px;
    background: radial-gradient(circle, rgba(197, 160, 89, 0.15) 0%, rgba(0,0,0,0) 70%);
    z-index: -1;
    pointer-events: none;
}

/* --- Tab Active Glow --- */
.tab-btn.active {
    box-shadow: 
        0 0 20px var(--gold-accent), 
        0 0 40px rgba(197, 160, 89, 0.3) !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
/* 1. Overlay: Poori screen ko cover karne ke liye */
.global-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.96); /* Dark background */
    z-index: 99999; /* Sab se upar */
    display: none; /* JS isay flex karega */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.simple-wheel-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    
    /* Layout */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    
    /* Styling */
    background: #1a0505;
    color: #fff;
    text-decoration: none;
    font-family: 'Cinzel Decorative', cursive;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    
    /* Border & Glow */
    border: 1px solid #ff2a00;
    border-radius: 50px; /* Pill shape */
    box-shadow: 0 0 15px rgba(255, 42, 0, 0.4);
    
    transition: all 0.3s ease;
}

.simple-wheel-btn:hover {
    background: #ff2a00;
    color: #000;
    box-shadow: 0 0 25px #ff2a00;
    transform: translateY(-3px);
}

.btn-icon {
    font-size: 18px;
    filter: drop-shadow(0 0 5px #ff2a00);
}

/* Choti si animation taake "Live" lage */
@keyframes pulse-border {
    0% { box-shadow: 0 0 0 0 rgba(255, 42, 0, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 42, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 42, 0, 0); }
}

.simple-wheel-btn {
    animation: pulse-border 2s infinite;
}








/* Search Results Styling */
#searchResults .result-item {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    margin-bottom: 12px;
    border: 1px solid transparent;
    transition: 0.3s;
    text-decoration: none;
    color: white;
}

#searchResults .result-item:hover {
    background: rgba(197, 160, 89, 0.1);
    border-color: var(--gold-light);
    transform: translateX(10px);
}

/* Scrollbar for Results */
#searchResults::-webkit-scrollbar { width: 5px; }
#searchResults::-webkit-scrollbar-thumb { background: var(--gold-light); border-radius: 10px; }

/* Desktop view fix */
@media (min-width: 993px) {
    .nav-center { display: flex; justify-content: center; }
}
/* Har card ke top par barf ki moti teh */
    [data-theme="christmas"] .snow-card,
    [data-theme="christmas"] .category-item,
    [data-theme="christmas"] .luminous-horror-card {
        border-top: 4px solid rgba(255, 255, 255, 0.95) !important;
        border-radius: 12px !important;
        box-shadow: 
            0 -6px 12px -2px rgba(255, 255, 255, 0.5), /* Snow Glow */
            0 10px 20px rgba(0,0,0,0.6) !important;
    }
    
    /* Category item ke upar barf ki reflection */
    [data-theme="christmas"] .category-item::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0; height: 15px;
        background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
        z-index: 2;
        border-radius: 12px 12px 0 0;
    }
    [data-theme="christmas"] .modal-book-wrapper {
    border-top: 3px solid #ffffff !important;
    box-shadow: 0 -4px 10px rgba(255,255,255,0.3);
    border-radius: 8px;
    overflow: hidden;
}

[data-theme="christmas"] .modal-content {
    background: #052211 !important; /* Deep dark green modal */
    border: 1px solid #d4af37;
}













/* --- Valentines Romantic Theme (Final, with Banner Fix) --- */

/* 1. Global: Valentines ko default theme se override na hone dein */
[data-theme="valentines"] {
    --v-pink: #ff4d6d; /* Primary Romantic Pink */
    --v-glow: rgba(255, 77, 109, 0.5); /* Bloom shadow */
}

/* 2. Body & Background Settings */
[data-theme="valentines"] body {
    background-color: #0f0105 !important; /* Deep Dark Maroon */
    background-image: radial-gradient(circle at top, #4d0011 0%, #0f0105 85%) !important;
}

/* 3. MAIN BANNER: LOCAL IMAGE FORCE FIX */
[data-theme="valentines"] .main-banner.snow-card {
    display: block !important;
    visibility: visible !important;
    /* Zabarasti (Forced) image path + Pinkish/Maroon tint */
    background-image: linear-gradient(to bottom, rgba(77, 0, 17, 0.2), rgba(15, 1, 5, 0.85)), 
                      url('/Jinx-App/public/assets/WebsiteImages/lipbanner.jpg') !important; 
    
    background-size: cover !important;
    background-position: center !important;
    /* Height aur box size ko nahi chhaira (Existing size) */
    border-bottom: 4px solid #ff4d6d !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 20px rgba(255, 77, 109, 0.3) !important;
}

/* 4. Navbar & Content Sections */
[data-theme="valentines"] .jinxed-nav {
    background: rgba(15, 1, 5, 0.95) !important;
    border-bottom: 2px solid transparent !important;
    border-image: linear-gradient(90deg, transparent, #ff4d6d, transparent) 1 !important;
}

[data-theme="valentines"] .main-content section,
[data-theme="valentines"] .category-section {
    background: rgba(255, 77, 109, 0.03) !important;
    border: 1px solid rgba(255, 77, 109, 0.1) !important;
    backdrop-filter: blur(5px);
}

/* 5. Titles & Headings (Love Glow) */
[data-theme="valentines"] h1, 
[data-theme="valentines"] h2, 
[data-theme="valentines"] .section-title,
[data-theme="valentines"] .golden-text, 
[data-theme="valentines"] .section-header h2 {
    color: #ff4d6d !important;
    text-shadow: 0 0 10px rgba(255, 77, 109, 0.5), 0 0 20px rgba(255, 77, 109, 0.2) !important;
    border-left: 4px solid #ff4d6d !important;
    padding-left: 15px;
}

/* 6. Valentines Cards (No Golden Border, Natural & Sharp) */
[data-theme="valentines"] .luminous-horror-card,
[data-theme="valentines"] .snow-card, 
[data-theme="valentines"] .category-item,
[data-theme="valentines"] .modal-book-wrapper {
    background: rgba(26, 5, 10, 0.9) !important;
    border: none !important;
    border-top: 5px solid #ff4d6d !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(255, 77, 109, 0.15) !important;
}

/* hover effect ko preserve kiya ha */
[data-theme="valentines"] .snow-card:hover,
[data-theme="valentines"] .category-item:hover,
[data-theme="valentines"] .luminous-horror-card:hover,
[data-theme="valentines"] .modal-book-wrapper:hover {
    box-shadow: 0 0 25px rgba(255, 77, 109, 0.4) !important;
    transform: translateY(-5px) scale(1.02) !important;
}

/* 7. Stat Pills Glow */
[data-theme="valentines"] .stat-pill {
    background: rgba(255, 77, 109, 0.05) !important;
    border: 1px solid #ff4d6d !important;
    box-shadow: 0 0 10px rgba(255, 77, 109, 0.3) !important;
}

[data-theme="valentines"] .stat-pill span {
    color: #fff !important;
    text-shadow: 0 0 8px #ff4d6d !important;
}

/* Heart Icon Bloom Effect */
[data-theme="valentines"] .stat-pill img {
    filter: drop-shadow(0 0 8px #ff4d6d) !important;
}

/* 8. Hide Snow Container in Valentines */
[data-theme="valentines"] .snow-slide-container {
    display: none !important;
}












/* =========================================
   HALLOWEEN THEME: LOCAL IMAGE FORCE FIX
   ========================================= */

[data-theme="halloween"] {
    --h-orange: #ff6700;
    --h-glow: rgba(255, 103, 0, 0.4);
}

/* 1. Body Background */
[data-theme="halloween"] body {
    background-color: #050505 !important;
    background-image: radial-gradient(circle at top, #1a0800 0%, #050505 85%) !important;
}

/* 2. MAIN BANNER: LOCAL IMAGE RE-FIX */
/* Maine yahan path ko subfolder ke hisab se manually set kiya hai */
[data-theme="halloween"] .main-banner.snow-card {
    display: block !important;
    visibility: visible !important;
    
    /* Yahan maine path change kiya hai taake subfolder handle ho jaye */
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(5,5,5,0.8)), 
                      url('/Jinx-App/public/assets/WebsiteImages/lipbanner.jpg') !important; 
    
    background-size: cover !important;
    background-position: center !important;
    height: 400px !important;
    border-bottom: 4px solid var(--h-orange) !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 20px var(--h-glow) !important;
}

/* 3. Global Halloween Elements */
[data-theme="halloween"] .golden-text, 
[data-theme="halloween"] .section-header h2 {
    color: var(--h-orange) !important;
    text-shadow: 0 0 15px var(--h-orange) !important;
    border-left: 5px solid var(--h-orange) !important;
}

[data-theme="halloween"] .luminous-horror-card, 
[data-theme="halloween"] .snow-card, 
[data-theme="halloween"] .category-item {
    background: rgba(15, 15, 15, 0.95) !important;
    border-top: 4px solid var(--h-orange) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,1), 0 0 15px var(--h-glow) !important;
}

[data-theme="halloween"] .stat-pill {
    background: rgba(255, 103, 0, 0.05) !important;
    border: 1px solid var(--h-orange) !important;
}

[data-theme="halloween"] .stat-pill span {
    color: #fff !important;
    text-shadow: 0 0 10px var(--h-orange) !important;
}

/* Snow effects ko Halloween mein band rakha hai */
[data-theme="halloween"] .snow-slide-container {
    display: none !important;
}











/* --- St. Patrick's Emerald Theme with Clovers --- */

body[data-theme="st_patricks"] {
    background-color: #010a04 !important; /* Bohot dark green, blackish look */
    background-image: radial-gradient(circle at center, #01240c 0%, #010a04 100%) !important;
}

/* 1. BUTTONS: Soft Emerald Gradient with Glow */
body[data-theme="st_patricks"] .btn-login, 
body[data-theme="st_patricks"] .btn-publish,
body[data-theme="st_patricks"] .view-all-gold {
    background: linear-gradient(135deg, #004d1a, #00802b) !important;
    border: 1px solid #00ff44 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(0, 255, 68, 0.2) !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

body[data-theme="st_patricks"] .btn-login:hover,
body[data-theme="st_patricks"] .btn-publish:hover {
    box-shadow: 0 0 25px rgba(0, 255, 68, 0.6) !important;
    transform: translateY(-2px);
}

/* 2. CLOVER (Green Patta) ANIMATION: Targeting Container */
body[data-theme="st_patricks"] .snow-slide-container {
    display: block !important;
    position: absolute !important;
    top: -20px; /* Thora upar adjust kiya ha */
    right: -10px;
    width: 50px !important;
    height: 50px !important;
    z-index: 10 !important;
    pointer-events: none;
    filter: drop-shadow(0 0 5px rgba(0, 255, 68, 0.5));
}

/* 3. Global Greens (preserving image content) */
body[data-theme="st_patricks"] .golden-text, 
body[data-theme="st_patricks"] .section-header h2 {
    color: #00ff44 !important;
    text-shadow: 0 0 8px rgba(0, 255, 68, 0.5) !important;
}

body[data-theme="st_patricks"] .luminous-horror-card, 
body[data-theme="st_patricks"] .category-item {
    background: rgba(0, 20, 10, 0.6) !important;
    border: 1px solid rgba(0, 255, 68, 0.2) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8) !important;
}

body[data-theme="st_patricks"] .stat-pill {
    background: rgba(0, 40, 15, 0.4) !important;
    border: 1px solid rgba(0, 255, 68, 0.3) !important;
}

body[data-theme="st_patricks"] .stat-pill img {
    filter: drop-shadow(0 0 8px #00ff44) !important;
}









/* --- NEW YEAR PREMIUM GOLDEN THEME (NO RED) --- */

/* 1. Global Background & Font Change */
/*body[data-theme="new_year"] {*/
    background-color: #000000 !important; /* Pure Black Background 
    background-image: radial-gradient(circle at center, #1a150a 0%, #000000 100%) !important;
    color: #fcf6ba !important;
    font-family: 'Poppins', sans-serif !important; /* Main text font 
}

 2. PREMIUM FONT: Titles & Headings (Cinzel) 
body[data-theme="new_year"] h1, 
body[data-theme="new_year"] h2, 
body[data-theme="new_year"] .section-title,
body[data-theme="new_year"] .golden-text, 
body[data-theme="new_year"] .section-header h2,
body[data-theme="new_year"] .horror-title {
    font-family: 'Cinzel', serif !important; /* Premium Headings 
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    
     Shimmering Gold Gradient Text 
    background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

 3. Section Headers Bar Fix (Red to Gold) 
body[data-theme="new_year"] .section-header h2,
body[data-theme="new_year"] .golden-text {
    border-left: 4px solid #d4af37 !important; /* Solid Gold Bar 
    padding-left: 15px;
}

 4. BUTTONS: Golden Sparkle (No Red) 
body[data-theme="new_year"] .btn-login, 
body[data-theme="new_year"] .btn-publish,
body[data-theme="new_year"] .view-all-gold {
    background: linear-gradient(135deg, #bf953f, #fcf6ba, #aa771c) !important;
    color: #000 !important; /* Dark text for contrast 
    font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.6) !important;
    font-family: 'Cinzel', serif !important;
    position: relative;
    overflow: hidden;
    transition: 0.3s ease;
}

body[data-theme="new_year"] .btn-login:hover {
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.9) !important;
    transform: translateY(-2px);
}

 Custom Sparkle (Patta) Animation (Pure CSS) 
body[data-theme="new_year"] .snow-slide-container {
    display: block !important;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.6) 0%, rgba(255, 255, 255, 0) 70%) !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5) !important;
    border-radius: 50%;
}

 5. CARDS: Glassmorphism with Gold Border 
body[data-theme="new_year"] .luminous-horror-card, 
body[data-theme="new_year"] .snow-card, 
body[data-theme="new_year"] .category-item,
body[data-theme="new_year"] .modal-book-wrapper {
    background: rgba(15, 15, 15, 0.9) !important;
    border: 1px solid #d4af37 !important; /* Gold Border 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.15) !important;
    border-radius: 12px !important;
}

body[data-theme="new_year"] .luminous-horror-card:hover {
    border-color: #fcf6ba !important;
    box-shadow: 0 0 35px rgba(212, 175, 55, 0.4) !important;
}

 6. STAT PILLS: Silver/Gold Mix 
body[data-theme="new_year"] .stat-pill {
    background: rgba(212, 175, 55, 0.05) !important;
    border: 1px solid #bf953f !important;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
}

body[data-theme="new_year"] .stat-pill span {
    color: #fcf6ba !important;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.5) !important;
}

 7. LUCKY WHEEL BUTTON: Golden Shimmer 
body[data-theme="new_year"] .simple-wheel-btn {
    background: #000 !important;
    color: #fcf6ba !important;
    border: 2px solid #d4af37 !important;
    font-family: 'Cinzel Decorative', cursive;
    animation: pulse-gold-custom 2s infinite;
}

@keyframes pulse-gold-custom {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

 8. AUTHOR CARDS Premium Gold 
body[data-theme="new_year"] .author-img-wrapper {
    border: 2px solid #fcf6ba !important;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
}

body[data-theme="new_year"] .author-name-gold {
    color: #fcf6ba !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.4) !important;
}