<!-- ============================================
     COMPACT MODERN FOOTER
============================================ -->
<footer class="modern-footer">
      
    <div class="footer-container">
        <!-- Main Footer Content -->
        <div class="footer-main">
            <div class="container">
                <div class="row g-3">
                    <!-- About Column -->
                    <div class="col-lg-4 col-md-6">
                        <div class="footer-about">
                            <?php
                            $logoPath = '#';
                            if (file_exists('uploads/logo.png')) $logoPath = 'uploads/logo.png';
                            ?>
                            
                            <h3><?php echo defined('SITE_NAME') ? SITE_NAME : 'BMYO'; ?></h3>
                            <p>Bishnupriya Manipuri Youth Organization dedicated to preserving cultural heritage & empowering youth.</p>
                            <div class="social-icons">
                                <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
                                <a href="#" class="social-icon"><i class="fab fa-whatsapp"></i></a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Links Column -->
                    <div class="col-lg-2 col-md-6">
                        <div class="footer-links">
                            <h4>Quick Links</h4>
                            <ul>
                                <li><a href="index.php"><i class="fas fa-chevron-right"></i> Home</a></li>
                                <li><a href="about.php"><i class="fas fa-chevron-right"></i> About Us</a></li>
                                <li><a href="events.php"><i class="fas fa-chevron-right"></i> Events</a></li>
                                <li><a href="contact.php"><i class="fas fa-chevron-right"></i> Contact</a></li>
                                <li><a href="privacy.php"><i class="fas fa-chevron-right"></i> Privacy</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- Member Links Column -->
                    <div class="col-lg-2 col-md-6">
                        <div class="footer-links">
                            <h4>Member Area</h4>
                            <ul>
                                <?php if (isset($_SESSION['user_id']) && !empty($_SESSION['user_id'])): ?>
                                    <li><a href="dashboard.php"><i class="fas fa-chevron-right"></i> Dashboard</a></li>
                                    <li><a href="profile.php"><i class="fas fa-chevron-right"></i> My Profile</a></li>
                                    <li><a href="id_card.php"><i class="fas fa-chevron-right"></i> ID Card</a></li>
                                    <li><a href="renew.php"><i class="fas fa-chevron-right"></i> Renew</a></li>
                                    <li><a href="logout.php"><i class="fas fa-chevron-right"></i> Logout</a></li>
                                <?php else: ?>
                                    <li><a href="register.php"><i class="fas fa-chevron-right"></i> Register</a></li>
                                    <li><a href="login.php"><i class="fas fa-chevron-right"></i> Login</a></li>
                                    <li><a href="forgot_password.php"><i class="fas fa-chevron-right"></i> Forgot Password</a></li>
                                <?php endif; ?>
                            </ul>
                        </div>
                    </div>
                    
                    <!-- Contact Column -->
                    <div class="col-lg-4 col-md-6">
                        <div class="footer-contact">
                            <h4>Get In Touch</h4>
                            <ul>
                                <li>
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>Manipur, India</span>
                                </li>
                                <li>
                                    <i class="fas fa-phone-alt"></i>
                                    <span><a href="tel:+911234567890">+91 1234567890</a></span>
                                </li>
                                <li>
                                    <i class="fas fa-envelope"></i>
                                    <span><a href="mailto:info@bmyouth.org">info@bmyouth.org</a></span>
                                </li>
                                <li>
                                    <i class="fas fa-clock"></i>
                                    <span>Mon - Sat: 10AM - 6PM</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Newsletter Section - Compact -->
        <div class="footer-newsletter">
            <div class="container">
                <div class="newsletter-wrapper">
                    <div class="newsletter-icon">
                        <i class="fas fa-envelope-open-text"></i>
                    </div>
                    <div class="newsletter-content">
                        <h4>Subscribe to Newsletter</h4>
                        <p>Get latest updates about events</p>
                    </div>
                    <form class="newsletter-form" id="footerNewsletterForm">
                        <div class="input-group">
                            <input type="email" class="form-control" placeholder="Your email" required>
                            <button type="submit" class="btn btn-subscribe">
                                <i class="fas fa-paper-plane"></i> Subscribe
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <!-- Copyright Bottom - Compact -->
        <div class="footer-bottom">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <p class="copyright">© <?php echo date('Y'); ?> <?php echo defined('SITE_NAME') ? SITE_NAME : 'BMYA'; ?>. All rights reserved.</p>
                    </div>
                    <div class="col-md-6">
                        <div class="footer-bottom-links">
                            <a href="terms.php">Terms</a>
                            <span>|</span>
                            <a href="privacy.php">Privacy</a>
                            <span>|</span>
                            <a href="sitemap.php">Sitemap</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

<!-- Scroll to Top Button -->
<button class="scroll-top" id="scrollTopBtn">
    <i class="fas fa-arrow-up"></i>
</button>

<style>
/* ============================================
   COMPACT MODERN FOOTER STYLES
============================================ */
.modern-footer {
    background: linear-gradient(135deg, #0a0a1a 0%, #0f0f2a 50%, #1a1a3e 100%);
    color: #ffffff;
    position: relative;
    margin-top: 40px;
}

/* Footer Container */
.footer-container {
    position: relative;
    z-index: 2;
}

/* Footer Main - Reduced padding */
.footer-main {
    padding: 35px 0 25px;
}

/* Footer About */
.footer-about {
    text-align: left;
}

.footer-about h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #fff, #3498db);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer-about p {
    color: rgba(255,255,255,0.7);
    line-height: 1.5;
    margin-bottom: 12px;
    font-size: 0.8rem;
}

/* Social Icons - Smaller */
.social-icons {
    display: flex;
    gap: 8px;
}

.social-icon {
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.social-icon:hover {
    transform: translateY(-2px);
    background: #3498db;
    color: white;
}

/* Footer Links - Compact */
.footer-links h4, .footer-contact h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 8px;
}

.footer-links h4::after, .footer-contact h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: #3498db;
    border-radius: 2px;
}

.footer-links ul, .footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 6px;
}

.footer-links a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}

.footer-links a i {
    font-size: 8px;
    transition: transform 0.3s ease;
}

.footer-links a:hover {
    color: white;
    transform: translateX(3px);
}

.footer-links a:hover i {
    transform: translateX(2px);
    color: #3498db;
}

/* Footer Contact - Compact */
.footer-contact li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem;
}

.footer-contact li i {
    width: 28px;
    height: 28px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

.footer-contact li:hover i {
    background: #3498db;
    transform: scale(1.05);
}

.footer-contact li a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}

.footer-contact li a:hover {
    color: white;
}

/* Newsletter Section - Compact */
.footer-newsletter {
    background: rgba(255,255,255,0.05);
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.newsletter-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.newsletter-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.newsletter-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.newsletter-content p {
    color: rgba(255,255,255,0.6);
    margin: 0;
    font-size: 0.75rem;
}

.newsletter-form {
    min-width: 280px;
}

.newsletter-form .input-group {
    background: white;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.newsletter-form .form-control {
    border: none;
    padding: 8px 15px;
    font-size: 0.8rem;
}

.newsletter-form .form-control:focus {
    box-shadow: none;
    outline: none;
}

.btn-subscribe {
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border: none;
    padding: 8px 18px;
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.btn-subscribe:hover {
    background: linear-gradient(135deg, #2980b9, #27ae60);
}

/* Footer Bottom - Compact */
.footer-bottom {
    padding: 15px 0;
}

.copyright {
    margin: 0;
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
}

.footer-bottom-links {
    text-align: right;
}

.footer-bottom-links a {
    color: rgba(255,255,255,0.5);
    text-decoration: none;
    font-size: 0.7rem;
    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: white;
}

.footer-bottom-links span {
    color: rgba(255,255,255,0.3);
    margin: 0 8px;
    font-size: 0.7rem;
}

/* Scroll to Top Button - Smaller */
.scroll-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #3498db, #2ecc71);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 3px 10px rgba(52,152,219,0.3);
    font-size: 0.9rem;
}

.scroll-top.show {
    opacity: 1;
    visibility: visible;
}

.scroll-top:hover {
    transform: translateY(-2px) scale(1.05);
}

/* Responsive Footer */
@media (max-width: 991.98px) {
    .newsletter-wrapper {
        flex-direction: column;
        text-align: center;
    }
    
    .newsletter-form {
        width: 100%;
        min-width: auto;
    }
    
    .footer-bottom-links {
        text-align: center;
        margin-top: 8px;
    }
    
    .copyright {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .footer-main {
        padding: 25px 0 15px;
    }
    
    .footer-about, .footer-links, .footer-contact {
        text-align: center;
    }
    
    .footer-links h4::after, .footer-contact h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .footer-links a {
        justify-content: center;
    }
    
    .footer-contact li {
        justify-content: center;
    }
    
    .scroll-top {
        bottom: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 576px) {
    .footer-bottom-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
    
    .footer-bottom-links span {
        display: none;
    }
    
    .footer-bottom-links a {
        padding: 3px 10px;
        background: rgba(255,255,255,0.08);
        border-radius: 15px;
        font-size: 0.65rem;
    }
    
    .newsletter-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
    
    .newsletter-content h4 {
        font-size: 0.85rem;
    }
    
    .newsletter-content p {
        font-size: 0.7rem;
    }
}
</style>

<script>
// ============================================
// SCROLL TO TOP BUTTON
// ============================================
window.addEventListener('scroll', function() {
    const scrollBtn = document.getElementById('scrollTopBtn');
    if (window.scrollY > 300) {
        scrollBtn.classList.add('show');
    } else {
        scrollBtn.classList.remove('show');
    }
});

document.getElementById('scrollTopBtn').addEventListener('click', function() {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

// ============================================
// NEWSLETTER FORM SUBMIT
// ============================================
document.getElementById('footerNewsletterForm')?.addEventListener('submit', function(e) {
    e.preventDefault();
    const email = this.querySelector('input[type="email"]').value;
    if (email && email.includes('@')) {
        alert('Thank you for subscribing to our newsletter!');
        this.reset();
    } else {
        alert('Please enter a valid email address.');
    }
});

// ============================================
// CLOSE MAIN TAG
// ============================================
document.addEventListener('DOMContentLoaded', function() {
    // Close the main tag that was opened in header
    const mainContent = document.querySelector('.main-content');
    if (mainContent && !mainContent.querySelector('.container')) {
        // Do nothing, footer will close properly
    }
});
</script>

</body>
</html>