<nav class="fixed bottom-0 left-0 w-full bg-white/90 backdrop-blur-lg border-t border-gray-100 flex justify-around items-center py-3 z-40 shadow-[0_-5px_20px_rgba(0,0,0,0,05)]">
    
    <a href="index.php" class="flex flex-col items-center gap-1.5 transition-all duration-300 <?php echo basename($_SERVER['PHP_SELF'])=='index.php'?'text-sky-500 scale-110':'text-gray-400 hover:text-gray-600'; ?>">
        <div class="relative">
            <i class="fa-solid fa-house-chimney text-lg"></i>
            <?php if(basename($_SERVER['PHP_SELF'])=='index.php'): ?>
                <span class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-sky-500 rounded-full"></span>
            <?php endif; ?>
        </div>
        <span class="text-[10px] font-bold tracking-tight uppercase">Home</span>
    </a>

    <a href="addmoney.php" class="flex flex-col items-center gap-1.5 transition-all duration-300 <?php echo basename($_SERVER['PHP_SELF'])=='addmoney.php'?'text-sky-500 scale-110':'text-gray-400 hover:text-gray-600'; ?>">
        <div class="relative">
            <i class="fa-solid fa-circle-plus text-lg"></i>
            <?php if(basename($_SERVER['PHP_SELF'])=='addmoney.php'): ?>
                <span class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-sky-500 rounded-full"></span>
            <?php endif; ?>
        </div>
        <span class="text-[10px] font-bold tracking-tight uppercase">Add Fund</span>
    </a>

    <a href="order.php" class="flex flex-col items-center gap-1.5 transition-all duration-300 <?php echo basename($_SERVER['PHP_SELF'])=='order.php'?'text-sky-500 scale-110':'text-gray-400 hover:text-gray-600'; ?>">
        <div class="relative">
            <i class="fa-solid fa-bag-shopping text-lg"></i>
            <?php if(basename($_SERVER['PHP_SELF'])=='order.php'): ?>
                <span class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-sky-500 rounded-full"></span>
            <?php endif; ?>
        </div>
        <span class="text-[10px] font-bold tracking-tight uppercase">Orders</span>
    </a>

    <a href="mycode.php" class="flex flex-col items-center gap-1.5 transition-all duration-300 <?php echo basename($_SERVER['PHP_SELF'])=='mycode.php'?'text-sky-500 scale-110':'text-gray-400 hover:text-gray-600'; ?>">
        <div class="relative">
            <i class="fa-solid fa-receipt text-lg"></i>
            <?php if(basename($_SERVER['PHP_SELF'])=='mycode.php'): ?>
                <span class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-sky-500 rounded-full"></span>
            <?php endif; ?>
        </div>
        <span class="text-[10px] font-bold tracking-tight uppercase">Vouchers</span>
    </a>

    <a href="profile.php" class="flex flex-col items-center gap-1.5 transition-all duration-300 <?php echo basename($_SERVER['PHP_SELF'])=='profile.php'?'text-sky-500 scale-110':'text-gray-400 hover:text-gray-600'; ?>">
        <div class="relative">
            <i class="fa-solid fa-user-gear text-lg"></i>
            <?php if(basename($_SERVER['PHP_SELF'])=='profile.php'): ?>
                <span class="absolute -bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-sky-500 rounded-full"></span>
            <?php endif; ?>
        </div>
        <span class="text-[10px] font-bold tracking-tight uppercase">Account</span>
    </a>
</nav>

<a href="<?php echo getSetting($conn, 'fab_link'); ?>" target="_blank" class="fixed bottom-24 right-6 w-14 h-14 bg-[#25D366] rounded-2xl shadow-[0_10px_20px_rgba(37,211,102,0.3)] flex items-center justify-center text-white text-2xl z-50 transition-all hover:scale-110 active:scale-90 rotate-[-5deg] hover:rotate-0">
    <i class="fa-brands fa-whatsapp"></i>
</a>

<div id="loadingModal" class="fixed inset-0 z-[60] flex items-center justify-center bg-white/80 hidden backdrop-blur-md">
    <div class="relative flex items-center justify-center">
        <div class="absolute w-16 h-16 border-4 border-sky-100 rounded-full"></div>
        <div class="w-16 h-16 border-4 border-sky-500 border-t-transparent rounded-full animate-spin"></div>
        <img src="assets/img/logo_small.png" class="absolute w-6 h-6 object-contain opacity-50" onerror="this.style.display='none'">
    </div>
</div>

<div id="notifModal" class="fixed inset-0 z-[70] flex items-center justify-center bg-gray-900/20 hidden backdrop-blur-[4px] p-6">
    <div class="bg-white w-full max-w-sm rounded-[2rem] shadow-[0_20px_50px_rgba(0,0,0,0.1)] p-8 text-center border border-gray-50 transform scale-90 transition-all duration-300" id="notifContent">
        <div id="notifIcon" class="inline-flex items-center justify-center w-20 h-20 rounded-3xl mb-6 shadow-inner"></div>
        <h3 id="notifTitle" class="text-xl font-black text-gray-800 mb-2"></h3>
        <p id="notifMsg" class="text-sm text-gray-400 mb-8 px-4 leading-relaxed font-medium"></p>
        <button onclick="closeNotif()" class="w-full bg-gray-900 text-white py-4 rounded-2xl text-xs font-black tracking-[0.2em] uppercase hover:bg-black transition-all shadow-lg active:scale-95">CONTINUE</button>
    </div>
</div>

<script>
    // Context Menu Disable
    document.addEventListener('contextmenu', e => e.preventDefault());

    function showLoader() { document.getElementById('loadingModal').classList.remove('hidden'); }
    function hideLoader() { document.getElementById('loadingModal').classList.add('hidden'); }

    function showNotif(type, title, msg) {
        const modal = document.getElementById('notifModal');
        const content = document.getElementById('notifContent');
        const iconBox = document.getElementById('notifIcon');
        
        document.getElementById('notifTitle').innerText = title;
        document.getElementById('notifMsg').innerText = msg;

        // Custom Icon & Style Based on Type
        if(type === 'success') {
            iconBox.className = "inline-flex items-center justify-center w-20 h-20 rounded-3xl mb-6 bg-emerald-50 text-emerald-500 text-4xl";
            iconBox.innerHTML = '<i class="fa-solid fa-check-double"></i>';
        } else if(type === 'error') {
            iconBox.className = "inline-flex items-center justify-center w-20 h-20 rounded-3xl mb-6 bg-rose-50 text-rose-500 text-4xl";
            iconBox.innerHTML = '<i class="fa-solid fa-triangle-exclamation"></i>';
        } else {
            iconBox.className = "inline-flex items-center justify-center w-20 h-20 rounded-3xl mb-6 bg-sky-50 text-sky-500 text-4xl";
            iconBox.innerHTML = '<i class="fa-solid fa-circle-info"></i>';
        }

        modal.classList.remove('hidden');
        setTimeout(() => content.classList.replace('scale-90', 'scale-100'), 10);
    }

    function closeNotif() {
        const content = document.getElementById('notifContent');
        content.classList.replace('scale-100', 'scale-90');
        setTimeout(() => document.getElementById('notifModal').classList.add('hidden'), 200);
    }
</script>

<style>
    /* Premium Animations */
    @keyframes spin { to { transform: rotate(360deg); } }
    .animate-spin { animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
    
    /* Navigation Active State Dot */
    nav a.text-sky-500 {
        position: relative;
    }
    
    /* Global White Smooth Theme Font */
    body {
        font-family: 'Inter', sans-serif;
        -webkit-tap-highlight-color: transparent;
    }
</style>