<nav class="client-bottom-nav">

    {{-- HOME --}}
    <a href="{{ route('client.dashboard') }}"
       class="{{ request()->routeIs('client.dashboard') ? 'active' : '' }}">

        <svg class="nav-icon" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2">
            <path d="M3 10.5L12 3l9 7.5"/>
            <path d="M5.5 9.5V21h13V9.5"/>
            <path d="M9.5 21v-6h5v6"/>
        </svg>

        <span>Home</span>
    </a>


    {{-- EMI CARD --}}
    <a href="{{ route('client.emi-card') }}"
       class="{{ request()->routeIs('client.emi-card') ? 'active' : '' }}">

        <svg class="nav-icon" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2">
            <rect x="3" y="5" width="18" height="14" rx="2"/>
            <path d="M3 10h18"/>
            <path d="M7 15h3"/>
        </svg>

        <span>EMI Card</span>
    </a>


    {{-- LOANS --}}
    <a href="{{ route('client.loans') }}"
       class="{{ request()->routeIs('client.loans*') ? 'active' : '' }}">

        <svg class="nav-icon" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2">
            <path d="M12 3v18"/>
            <path d="M17 7.5c0-1.7-2-3-5-3s-5 1.3-5 3 2 2.5 5 3 5 1.3 5 3-2 3-5 3-5-1.3-5-3"/>
        </svg>

        <span>Loans</span>
    </a>


    {{-- PAYMENTS --}}
    <a href="{{ route('client.payments') }}"
       class="{{ request()->routeIs('client.payments') ? 'active' : '' }}">

        <svg class="nav-icon" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2">
            <rect x="4" y="3" width="16" height="18" rx="2"/>
            <path d="M8 7h8"/>
            <path d="M8 11h8"/>
            <path d="M8 15h5"/>
            <path d="M16 15h.01"/>
        </svg>

        <span>Payments</span>
    </a>


    {{-- SUPPORT --}}
    <a href="{{ route('client.support.index') }}"
       class="{{ request()->routeIs('client.support*') ? 'active' : '' }}">

        <svg class="nav-icon" viewBox="0 0 24 24" fill="none"
             stroke="currentColor" stroke-width="2">

            <path d="M20 11.5a7.5 7.5 0 0 1-7.5 7.5H7l-4 2v-4.5A7.5 7.5 0 1 1 20 11.5Z"/>

            <path d="M8 11h.01"/>
            <path d="M12 11h.01"/>
            <path d="M16 11h.01"/>

        </svg>

        <span>Support</span>
    </a>

</nav>


<style>

    .client-bottom-nav {
        position: fixed;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);

        width: 100%;
        max-width: 520px;

        height: 66px;

        background: rgba(255, 255, 255, 0.98);

        border-top: 1px solid #e7edf4;

        box-shadow:
            0 -8px 25px rgba(31, 41, 55, 0.06);

        display: grid;

        /* 4 → 5 */
        grid-template-columns: repeat(5, 1fr);

        z-index: 9999;

        padding:
            3px 6px
            calc(4px + env(safe-area-inset-bottom));
    }


    .client-bottom-nav a {
        display: flex;
        flex-direction: column;

        align-items: center;
        justify-content: center;

        gap: 4px;

        color: #94a3b8;

        text-decoration: none;

        font-size: 10px;
        line-height: 1.2;

        font-weight: 800;

        transition:
            color 0.2s ease,
            transform 0.2s ease;
    }


    .client-bottom-nav a.active {
        color: #1769e0;
    }


    .client-bottom-nav a:active {
        transform: scale(0.95);
    }


    .client-bottom-nav .nav-icon {
        width: 19px;
        height: 19px;

        display: block;

        flex-shrink: 0;
    }


    @media (max-width: 380px) {

        .client-bottom-nav {
            height: 66px;
        }

        .client-bottom-nav a {
            font-size: 9px;
            gap: 3px;
        }

        .client-bottom-nav .nav-icon {
            width: 18px;
            height: 18px;
        }
    }

</style>