/* ===== SHARED RESPONSIVE NAVIGATION STYLES ===== */

@media (max-width: 768px) {
    nav {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--bg-card);
        justify-content: center !important;
        position: relative;
    }

    nav .logo {
        position: static !important;
        transform: none !important;
        margin: 0 auto;
    }

    nav .logo img {
        height: 38px;
    }

    nav .nav-links {
        position: fixed !important;
        top: 1rem;
        right: 1rem;
        bottom: auto !important;
        left: auto !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        z-index: 1002;
    }

    nav .nav-links .btn {
        min-height: 44px;
        width: 44px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    nav .nav-links .btn span {
        display: none;
    }

    nav .nav-links .btn i {
        margin: 0;
        font-size: 1.1rem;
    }
}