.supzy-bottom-nav {
    display: none; /* Hidden by default on desktop and tablet */
}

/* Show only on mobile devices (max-width 767px) */
@media (max-width: 767px) {
    .supzy-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #020617; /* Dark navy */
        border-top: 1px solid rgba(34, 211, 238, 0.15); /* Subtle cyan border */
        justify-content: space-around;
        align-items: center;
        height: 70px;
        z-index: 99999;
        padding-bottom: env(safe-area-inset-bottom, 0); /* Support for notch displays */
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(10px);
    }

    .supzy-bottom-nav .nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #94A3B8; /* Muted text */
        text-decoration: none;
        font-family: 'Tajawal', 'Cairo', sans-serif;
        font-size: 11px;
        font-weight: 600;
        gap: 5px;
        transition: all 0.3s ease;
        flex: 1;
    }

    .supzy-bottom-nav .nav-item svg {
        transition: all 0.3s ease;
    }

    .supzy-bottom-nav .nav-item.active,
    .supzy-bottom-nav .nav-item:hover {
        color: #22D3EE; /* Cyan */
    }

    .supzy-bottom-nav .nav-item.active svg,
    .supzy-bottom-nav .nav-item:hover svg {
        stroke: #22D3EE;
        filter: drop-shadow(0 0 5px rgba(34, 211, 238, 0.5)); /* Neon glow effect */
        transform: translateY(-2px);
    }
    
    /* Ensure content is not hidden behind the bar */
    body {
        padding-bottom: 75px !important;
    }
}