    <!-- =========================================================
         COMMON FOOTER
    ========================================================== -->
    <footer class="site-footer">
        <div class="footer-top">
            <div class="container">
                <div class="row g-4">
                    <div class="col-lg-4 col-md-6">
                        <a href="<?= base_url('product') ?>" class="footer-brand">
                            APA SALES
                            <span>Sterling Silver Jewelry</span>
                        </a>
                        <p class="footer-desc mt-3">
                            Discover exquisite handcrafted Italian 925 sterling silver chains, custom jewelry, and timeless statement pieces engineered with precision and luxury finishing.
                        </p>
                        <div class="footer-socials mt-3">
                            <a href="javascript:void(0);" title="Instagram"><i class="bi bi-instagram"></i></a>
                            <a href="javascript:void(0);" title="Facebook"><i class="bi bi-facebook"></i></a>
                            <a href="javascript:void(0);" title="Pinterest"><i class="bi bi-pinterest"></i></a>
                            <a href="javascript:void(0);" title="YouTube"><i class="bi bi-youtube"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-2 col-md-6 col-6">
                        <h6 class="footer-heading">Collections</h6>
                        <ul class="footer-links">
                            <li><a href="<?= base_url('product') ?>">All Products</a></li>
                            <li><a href="<?= base_url('chain') ?>">Chain Styles</a></li>
                            <li><a href="<?= base_url('detail') ?>">Product Detail</a></li>
                            <li><a href="<?= base_url('product') ?>">Miami Cuban</a></li>
                            <li><a href="<?= base_url('product') ?>">Anchor Chains</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-2 col-md-6 col-6">
                        <h6 class="footer-heading">Customer Care</h6>
                        <ul class="footer-links">
                            <li><a href="javascript:void(0);">Size & Length Guide</a></li>
                            <li><a href="javascript:void(0);">Silver Care Guide</a></li>
                            <li><a href="javascript:void(0);">Shipping & Returns</a></li>
                            <li><a href="javascript:void(0);">Authenticity Certificate</a></li>
                            <li><a href="javascript:void(0);">Contact Support</a></li>
                        </ul>
                    </div>

                    <div class="col-lg-4 col-md-6">
                        <h6 class="footer-heading">Join The VIP Club</h6>
                        <p class="footer-desc">Subscribe to receive exclusive drops, private sale access, and 10% off your first order.</p>
                        <form class="footer-newsletter mt-3" onsubmit="event.preventDefault(); alert('Thank you for subscribing to APA Sales VIP Club!');">
                            <div class="input-group">
                                <input type="email" class="form-control" placeholder="Enter your email address..." required>
                                <button class="btn btn-gold" type="submit">Subscribe</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="container">
                <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
                    <p class="mb-0 text-muted small">&copy; <?= date('Y') ?> APA Sales. All rights reserved. Crafted with 925 Pure Sterling Silver.</p>
                    <div class="footer-payments">
                        <span class="badge bg-dark border border-secondary px-2 py-1 me-1"><i class="bi bi-shield-lock-fill text-warning me-1"></i> Secure SSL Checkout</span>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <style>
        .site-footer {
            background-color: #121212;
            color: #a3a3a3;
            font-family: "Inter", sans-serif;
            margin-top: 60px;
            border-top: 1px solid #282828;
        }

        .footer-top {
            padding: 70px 0 50px;
        }

        .footer-brand {
            font-family: "Cormorant Garamond", serif;
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 3px;
            color: #ffffff;
            text-decoration: none;
            display: inline-block;
        }

        .footer-brand span {
            display: block;
            font-size: 9px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gold, #b4975a);
            font-family: "Inter", sans-serif;
        }

        .footer-desc {
            font-size: 13px;
            line-height: 1.8;
            color: #888888;
        }

        .footer-heading {
            color: #ffffff;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 22px;
        }

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

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

        .footer-links a {
            color: #888888;
            text-decoration: none;
            font-size: 13px;
            transition: color 0.25s ease, padding-left 0.25s ease;
            display: inline-block;
        }

        .footer-links a:hover {
            color: var(--gold, #b4975a);
            padding-left: 4px;
        }

        .footer-socials a {
            color: #ffffff;
            background: #202020;
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            margin-right: 8px;
            transition: background 0.25s, color 0.25s;
            text-decoration: none;
        }

        .footer-socials a:hover {
            background: var(--gold, #b4975a);
            color: #121212;
        }

        .footer-newsletter .form-control {
            background: #1c1c1c;
            border: 1px solid #333333;
            color: #ffffff;
            font-size: 13px;
            padding: 10px 14px;
        }

        .footer-newsletter .form-control:focus {
            border-color: var(--gold, #b4975a);
            box-shadow: none;
            background: #222222;
            color: #ffffff;
        }

        .btn-gold {
            background: var(--gold, #b4975a);
            color: #181818;
            font-weight: 600;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 0 20px;
            border: none;
            transition: background 0.25s;
        }

        .btn-gold:hover {
            background: #d4bd83;
            color: #181818;
        }

        .footer-bottom {
            background-color: #0b0b0b;
            padding: 22px 0;
            border-top: 1px solid #1f1f1f;
        }
    </style>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- AOS JS -->
    <script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
    <script>
        if (typeof AOS !== 'undefined') {
            AOS.init({
                duration: 800,
                easing: "ease-out-cubic",
                once: true,
                offset: 80,
                mirror: false
            });
        }
    </script>
</body>
</html>
