/* =========================================
   1. GLOBAL RESET & APP STRUCTURE
   ========================================= */
html, body {
    height: 100%;
    overflow: hidden; /* Handle scrolling in .main-content */
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --tw-shadow: 0 0 #0000 !important;
    --tw-shadow-colored: 0 0 #0000 !important;
    
    /* Leaderboard Tokens */
    --radius: 24px;
    --gold: #D4AF37;
    --silver: #C0C0C0;
    --bronze: #CD7F32;
    --forest-accent: #1e8f4b;
    
    /* New Year 2026 Theme Colors */
    --ny-midnight: #0f172a;
    --ny-purple: #3b0764;
    --ny-accent: #818cf8;
    --ny-gold: #fbbf24;
}

*, *::before, *::after {
    box-shadow: none !important;
}
* {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* --- LOADER FIX (Forces removal) --- */
#app-loading { 
    transition: opacity 0.5s ease-out, visibility 0.5s; 
    opacity: 1; 
    visibility: visible; 
    z-index: 9999;
}
#app-loading.loaded { 
    opacity: 0 !important; 
    visibility: hidden !important; 
    pointer-events: none !important; 
}

/* --- RESPONSIVE LAYOUT CONTAINER --- */
.app-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column; /* Mobile Default: Top Header, Content, Bottom Bar */
    position: relative;
    overflow: hidden;
    background-color: #f9fafb;
}
.dark .app-container {
    background-color: #111827;
}

/* Desktop Layout: Side-by-Side */
@media (min-width: 1024px) {
    .app-container {
        flex-direction: row; 
    }
    /* Hide Mobile Header elements that are redundant on Desktop */
    #sidebar-toggle-btn { display: none !important; }
}

header, nav {
    flex-shrink: 0;
}

.main-content {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    position: relative;
    padding-bottom: 100px; /* Mobile Safe Area for Bottom Bar */
    width: 100%;
    transition: background-color 0.7s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth 700ms transition */
    will-change: background-color;
}

@media (min-width: 1024px) {
    .main-content {
        padding-bottom: 20px; /* Desktop doesn't have bottom bar */
        max-width: 1200px; /* Constrain content width for readability */
        margin: 0 auto;
    }
}

/* =========================================
   2. ANIMATIONS & PERFORMANCE
   ========================================= */
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.page { 
    display: none; 
    animation: slideInRight 0.25s ease-out; 
    will-change: transform, opacity; /* Hint browser for optimization */
}
.page.active { display: block; }

@keyframes pulse-logo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
}
.app-loader-logo {
    animation: pulse-logo 2s infinite ease-in-out;
}

@keyframes pulse-points {
    0% { transform: scale(1); color: #10B981; }
    50% { transform: scale(1.2) rotate(-5deg); color: #34D399; }
    100% { transform: scale(1); color: #10B981; }
}
.points-pulse {
    animation: pulse-points 0.4s ease-out;
}

/* --- LOW DATA / REDUCED MOTION --- */
@media (prefers-reduced-motion: reduce) {
    .leaf, .animate-float, .app-loader-logo, .points-pulse, .page, .hero-particle, .live-pulse {
        animation: none !important;
        transition: none !important;
    }
}

body.low-data-mode .leaf,
body.low-data-mode .animate-float,
body.low-data-mode .hero-particle {
    display: none !important; /* Hide heavy visuals */
}

/* =========================================
   3. SIDEBAR & NAVIGATION (RESPONSIVE)
   ========================================= */
#sidebar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    z-index: 50;
    width: 280px; /* Fixed width */
    height: 100%;
    z-index: 50; 
}
#sidebar::-webkit-scrollbar { display: none; }

#sidebar-overlay { 
    transition: opacity 0.3s ease-in-out; 
    backdrop-filter: blur(2px);
}

/* Desktop Sidebar Behavior */
@media (min-width: 1024px) {
    #sidebar {
        transform: translateX(0) !important; /* Always visible */
        position: relative; /* Not fixed */
        box-shadow: none;
        border-right: 1px solid rgba(0,0,0,0.05);
        background: transparent;
    }
    .dark #sidebar {
        border-right: 1px solid rgba(255,255,255,0.05);
    }
    #sidebar-overlay {
        display: none !important; /* No overlay on desktop */
    }
}

/* Active States */
.sidebar-nav-item.active {
    background-color: #ECFDF5;
    color: #059669;
    font-weight: 600;
}
.sidebar-nav-item.active svg { color: #059669; }

.dark .sidebar-nav-item.active {
    background-color: #064E3B;
    color: #A7F3D0;
}
.dark .sidebar-nav-item.active svg { color: #A7F3D0; }

/* Force White Text on Sidebar when background is dark (GreenLens) */
#sidebar.force-dark-text .sidebar-nav-item,
#sidebar.force-dark-text h2, 
#sidebar.force-dark-text p,
#sidebar.force-dark-text i {
    color: rgba(255, 255, 255, 0.9) !important;
}

#sidebar.force-dark-text .sidebar-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

#sidebar.force-dark-text .border-b,
#sidebar.force-dark-text .border-t {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Bottom Nav - Hide on Desktop */
@media (min-width: 1024px) {
    .glass-bottom-bar { display: none !important; }
}

.nav-item.active { color: #10B981; }
.nav-item.active svg { color: #10B981; }
.dark .nav-item.active { color: #34D399; }
.dark .nav-item.active svg { color: #34D399; }

#theme-toggle-btn > span { transition: transform 0.3s ease-in-out; }

/* =========================================
   4. GLASSMORPHISM & CARDS
   ========================================= */
.glass-card {
    background: rgba(255, 255, 255, 0.76);
    border-radius: 1.25rem;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(148, 163, 184, 0.40);
    position: relative;
    overflow: hidden;
}
.dark .glass-card {
    background: rgba(15, 23, 42, 0.80);
    border-color: rgba(55, 65, 81, 0.9);
}

.glass-green-card {
    background: linear-gradient(135deg, rgba(22, 163, 74, 0.95), rgba(5, 150, 105, 0.96));
    border-radius: 1.5rem;
    color: #ECFDF5;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(34, 197, 94, 0.55);
}
.dark .glass-green-card {
    background: linear-gradient(135deg, rgba(5, 122, 85, 0.96), rgba(6, 95, 70, 0.98));
    border-color: rgba(45, 212, 191, 0.60);
}

.glass-bottom-bar {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 50;
}
.dark .glass-bottom-bar {
    background: rgba(15, 23, 42, 0.98);
}

.btn-eco-gradient {
    background-image: linear-gradient(135deg, #10B981, #34D399);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}
.btn-eco-gradient:hover {
    filter: brightness(1.05);
}

/* =========================================
   5. NEW YEAR HERO BANNER (PREMIUM UI)
   ========================================= */
.glass-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    /* Deep Midnight to Purple Gradient */
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    box-shadow: 0 20px 40px -10px rgba(49, 46, 129, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Shimmer Text Animation */
.text-shimmer {
    background: linear-gradient(to right, #818cf8 0%, #c7d2fe 50%, #818cf8 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine 4s linear infinite;
}
@keyframes shine { 
    to { background-position: 200% center; } 
}

/* Floating Particles in Banner */
.hero-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: floatParticle 8s infinite ease-in-out;
}
@keyframes floatParticle {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-20px) scale(1.2); opacity: 0.6; }
}

/* Hero Timer Box Styling */
.hero-timer-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 1rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Confetti Canvas */
#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100; /* Above content */
}

/* =========================================
   6. RESPONSIVE GRIDS (Product, Events, etc.)
   ========================================= */
@media (min-width: 768px) {
    #product-grid, #store-detail-page .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (min-width: 1280px) {
    #product-grid, #store-detail-page .grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Dashboard Impact Grid */
@media (min-width: 768px) {
    #dashboard .grid-cols-3 {
        gap: 1.5rem;
    }
}

/* Events List on Desktop */
@media (min-width: 1024px) {
    #event-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* =========================================
   7. LEADERBOARD DESIGN
   ========================================= */
.leaf-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5; 
    height: 100%;
}

.leaf {
    position: absolute;
    top: -10vh;
    width: 14px;
    height: 18px;
    border-radius: 60% 0 60% 0;
    background: rgba(30, 143, 75, 0.6);
    box-shadow: 0 0 5px rgba(0,0,0,0.1) !important;
    animation: leafFall linear infinite;
}
.dark .leaf {
    background: rgba(52, 211, 153, 0.4);
}

@keyframes leafFall {
    0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; } 
    100% { transform: translateY(120vh) translateX(40px) rotate(180deg); opacity: 0; }
}

.podium-wrapper {
    position: relative;
    margin-bottom: 40px;
    padding-top: 10px;
    z-index: 10;
}

.podium {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: flex-end;
}

.champ {
    text-align: center;
    padding: 15px 5px;
    border-radius: var(--radius);
    width: 32%;
    opacity: 0;
    animation: raise 0.8s ease forwards;
    background: #f9fdfa;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06) !important;
    color: #1a1a1a;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.dark .champ {
    background: #1f2937;
    color: #f3f4f6;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
}

.champ:nth-child(1) { animation-delay: .1s; height: 140px; } 
.champ:nth-child(2) { animation-delay: .2s; height: 170px; z-index: 2; } 
.champ:nth-child(3) { animation-delay: .3s; height: 130px; } 

@keyframes raise {
    0%   { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: -40px auto 10px auto;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1a1a1a;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    border: 3px solid #fff;
    flex-shrink: 0;
}
.dark .badge {
    border-color: #374151;
    color: #000;
}

.badge::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -150%;
    width: 70%;
    height: 200%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent);
    transform: skewX(-25deg);
    animation: shine 3.5s ease-in-out infinite;
}

.gold   { background: var(--gold); }
.silver { background: var(--silver); }
.bronze { background: var(--bronze); }

@keyframes shine {
    0%   { left: -150%; }
    50%  { left: 120%; }
    100% { left: 120%; }
}

.champ-name   { font-weight: 700; line-height: 1.2; margin-bottom: 4px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; }
.champ-points { font-size: 12px; font-weight: 600; color: #555; }
.dark .champ-points { color: #9ca3af; }

.champ-class { 
    font-size: 10px; 
    color: var(--forest-accent);
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.dark .champ-class { color: #34d399; }
.rank { font-size: 10px; opacity: .5; margin-top: 4px; text-transform: uppercase; letter-spacing: 1px;}

.list { display: flex; flex-direction: column; gap: 12px; padding-bottom: 80px; }

.list .item {
    display: flex; justify-content: space-between; align-items: center; padding: 12px 16px;
    border-radius: var(--radius); transition: transform .2s ease; background: #ffffff;
    border: 1px solid #f0f0f0; box-shadow: 0 4px 12px rgba(0,0,0,0.03) !important;
}
.dark .list .item { background: #1f2937; border-color: #374151; box-shadow: none !important; }

.list .item:hover { transform: translateY(-2px); border-color: #e0ffe8; box-shadow: 0 8px 20px rgba(30, 143, 75, 0.08) !important; }
.dark .list .item:hover { border-color: #065f46; }

.user { display: flex; align-items: center; gap: 12px; }
.circle { width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 700; background: #e8f5e9; color: var(--forest-accent); flex-shrink: 0; overflow: hidden; object-fit: cover; }
.dark .circle { background: #064e3b; color: #a7f3d0; }

.user-info { display: flex; flex-direction: column; justify-content: center; }
.user-info strong { font-size: 14px; color: #222; display: flex; align-items: center; }
.dark .user-info strong { color: #f3f4f6; }

.sub-class { font-size: 10px; color: var(--forest-accent); font-weight: 600; display: block; margin-top: 1px; text-transform: uppercase; }
.dark .sub-class { color: #34d399; }
.points-display { font-weight: 700; font-size: 14px; color: #1a1a1a; }
.dark .points-display { color: #e5e7eb; }
.item.is-me { border: 2px solid #10B981; background: #f0fdf4; }
.dark .item.is-me { background: #064e3b; border-color: #34d399; }

/* =========================================
   8. MODALS, UTILITIES & CHATBOT DESKTOP
   ========================================= */
.checkin-completed {
    background: #F3F4F6 !important;
    background-image: none !important;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #E5E7EB !important;
    color: #9CA3AF !important;
    cursor: default !important;
    transform: none !important;
}
.dark .checkin-completed {
    background: #1F2937 !important;
    border-color: #374151 !important;
    color: #6B7280 !important;
}
.checkin-completed .checkin-hide-on-complete { display: none !important; }
.checkin-completed .checkin-show-on-complete { display: flex !important; }
.checkin-completed h3, .checkin-completed span, .checkin-completed i, .checkin-completed p { color: #6B7280 !important; }
.dark .checkin-completed h3, .dark .checkin-completed span, .dark .checkin-completed i, .dark .checkin-completed p { color: #9CA3AF !important; }

/* Modal Transitions */
#camera-modal, #checkin-modal, #chatbot-modal, #eco-quiz-modal, #purchase-modal, #qr-modal {
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
#camera-modal.open, #checkin-modal.open, #chatbot-modal.open, #eco-quiz-modal.open {
    opacity: 1; visibility: visible;
}
#checkin-modal-content, #chatbot-modal-content, #eco-quiz-modal-content {
    transition: transform 0.3s ease-in-out;
}
#checkin-modal.open #checkin-modal-content, 
#chatbot-modal.open #chatbot-modal-content,
#eco-quiz-modal.open #eco-quiz-modal-content {
    transform: translateY(0);
}

/* CHATBOT ON DESKTOP: FLOATING WIDGET */
@media (min-width: 1024px) {
    #chatbot-modal {
        position: fixed;
        top: auto;
        bottom: 100px;
        right: 40px;
        left: auto;
        width: 400px;
        height: 600px;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.15);
        overflow: hidden;
        transform: translateY(20px);
        opacity: 0;
        visibility: hidden;
        border: 1px solid rgba(0,0,0,0.1);
    }
    #chatbot-modal.open {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
}

/* Custom Form & Tabs */
.custom-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.25em; padding-right: 2.5rem;
}
.dark .custom-select {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.leaderboard-switch { border-radius: 9999px; }
.leaderboard-tab-btn { border-radius: 9999px; transition: all 0.2s ease-in-out; }
.leaderboard-tab-btn.active { background-color: #ffffff; color: #10B981; box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important; }
.dark .leaderboard-tab-btn.active { background-color: #1f2937; color: #34D399; }

.slider-container { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.slider-item { scroll-snap-align: center; }
.slider-dot { transition: all 0.3s ease; }
.slider-dot.active { background-color: #10B981; transform: scale(1.25); }
.dark .slider-dot.active { background-color: #34D399; }

/* Avatar Stack */
.avatar-stack { display: flex; align-items: center; }
.avatar-stack img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ffffff; margin-left: -10px; object-fit: cover; }
.dark .avatar-stack img { border-color: #1f2937; }
.avatar-stack img:first-child { margin-left: 0; }
.avatar-stack .more-count { width: 32px; height: 32px; border-radius: 50%; background: #f3f4f6; border: 2px solid #ffffff; margin-left: -10px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #6b7280; z-index: 1; }
.dark .avatar-stack .more-count { background: #374151; border-color: #1f2937; color: #e5e7eb; }

/* Event Poster */
.event-poster-container { position: relative; width: 100%; padding-top: 56.25%; border-radius: 1rem; overflow: hidden; background-color: #f3f4f6; }
.dark .event-poster-container { background-color: #374151; }
.event-poster-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* Quiz & Ticks */
.quiz-option { transition: all 0.2s ease; }
.quiz-option:active { transform: scale(0.98); }
.quiz-option.selected { border-color: #4f46e5; background-color: #eef2ff; }
.dark .quiz-option.selected { border-color: #6366f1; background-color: #312e81; }
.tick-icon { width: 14px; height: 14px; object-fit: contain; display: inline-block; vertical-align: middle; margin-left: 4px; margin-top: -2px; }

/* Sticky Detail Headers */
#department-detail-page, #product-detail-page { padding: 0 !important; background-color: #f9fafb; z-index: 20; }
.dark #department-detail-page, .dark #product-detail-page { background-color: #111827; }

/* Scrollbars */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Nav Item Size */
.nav-item span { font-size: 10px; letter-spacing: 0.2px; font-weight: 700; }
.nav-item.active { color: #10B981 !important; }
.nav-item.active svg { stroke-width: 2.5px; transform: translateY(-2px); transition: transform 0.2s ease; }
.dark .nav-item.active { color: #34D399 !important; }

/* Hover Effects (Desktop Only) */
@media (hover: hover) {
    .bg-white.rounded-3xl:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05) !important; }
}

/* Chatbot UI */
@keyframes slideUp { from { transform: translateY(15px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.animate-slideUp { animation: slideUp 0.35s ease forwards; }

@keyframes float { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.1); } 100% { transform: translate(0,0) scale(1); } }
.animate-float { animation: float 18s infinite ease-in-out; }

.typing-dot { width: 6px; height: 6px; background: #10B981; border-radius: 50%; animation: typingBounce 1.4s infinite ease-in-out both; margin: 0 2px; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingBounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

/* Masonry Grid for Gallery */
.masonry-grid {
    column-count: 2;
    column-gap: 1rem;
}
@media (min-width: 768px) {
    .masonry-grid {
        column-count: 3;
    }
}
@media (min-width: 1024px) {
    .masonry-grid {
        column-count: 4;
    }
}

/* Lightbox Transition */
#gallery-modal {
    transition: opacity 0.3s ease-in-out;
    backdrop-filter: blur(10px);
}

@keyframes breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}
.animate-breathe {
    animation: breathe 6s ease-in-out infinite;
}

/* Custom Utilities for Gallery Shapes */
.rounded-t-full {
    border-top-left-radius: 9999px;
    border-top-right-radius: 9999px;
}
.font-jakarta {
    font-family: 'Plus Jakarta Sans', sans-serif;
}
/* Ensure the header is transparent or blends in GreenLens */
#green-lens .main-content {
    /* The JS handles the BG color */
}
/* Smooth Background Transitions */
.main-content, #sidebar, header {
    transition: background-color 0.7s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
    will-change: background-color;
}

/* =========================================
   9. TOAST NOTIFICATIONS (Mobile Optimized)
   ========================================= */
#app-toast {
    position: fixed;
    bottom: 90px; /* Positions it nicely above the bottom nav */
    left: 50%;
    transform: translateX(-50%); /* Ensures perfect centering */
    z-index: 110; /* Above everything, including sidebar/modals */
    
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    
    min-width: 280px;
    max-width: 90%;
    padding: 14px 20px;
    
    border-radius: 50px; /* Pill shape for modern app feel */
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: white;
    
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    
    opacity: 0;
    animation: toastSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Toast Colors */
.toast-success { background: rgba(16, 185, 129, 0.95); border: 1px solid rgba(16, 185, 129, 1); }
.toast-error   { background: rgba(220, 38, 38, 0.95); border: 1px solid rgba(220, 38, 38, 1); }
.toast-warning { background: rgba(245, 158, 11, 0.95); border: 1px solid rgba(245, 158, 11, 1); }

/* Animation */
@keyframes toastSlideUp {
    from { 
        transform: translate(-50%, 20px); 
        opacity: 0; 
    }
    to { 
        transform: translate(-50%, 0); 
        opacity: 1; 
    }
}

.toast-hiding {
    transition: all 0.3s ease;
    transform: translate(-50%, 20px) !important;
    opacity: 0 !important;
}

/* --- FIX: Keep Happy New Year card fully static --- */
.new-year-fixed,
.new-year-fixed * {
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* =========================================
   10. OJAS 2026 SPECIAL EVENT CARD
   ========================================= */
.glass-card-ojas {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1.5rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 30px -5px rgba(79, 70, 229, 0.15);
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dark .glass-card-ojas {
    background: rgba(30, 27, 75, 0.8); /* Indigo-950/80 */
    border-color: rgba(99, 102, 241, 0.3); /* Indigo-500/30 */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}

.glass-card-ojas:active {
    transform: scale(0.98);
}

/* Live Pulse Animation */
@keyframes pulse-live {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
.live-pulse {
    animation: pulse-live 2s infinite;
}

/* Background Pattern for OJAS Card */
.bg-pattern-dots {
    background-image: radial-gradient(rgba(255,255,255,0.2) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* =========================================
   11. MOVIE TICKETS CARD (NEW)
   ========================================= */
.glass-card-movie {
    background: rgba(255, 255, 255, 0.9);
    border-radius: 1.5rem;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Neon Purple/Pink Glow */
    box-shadow: 0 10px 30px -5px rgba(236, 72, 153, 0.3);
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.dark .glass-card-movie {
    background: rgba(30, 10, 40, 0.8); /* Dark Plum */
    border-color: rgba(236, 72, 153, 0.3); /* Pink-500/30 */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
}

.glass-card-movie:active {
    transform: scale(0.98);
}

/* Cinema Pattern */
.bg-pattern-cinema {
    background-image: radial-gradient(rgba(255,255,255,0.15) 1px, transparent 1px);
    background-size: 15px 15px;
}