<div class="col-md-8">
    <!-- Quick Actions -->
    <div class="card shadow-sm border rounded-4">
        <div class="card-body p-4">
            <h6 class="fw-bold mb-3">Quick Actions</h6>

            <div class="row g-2 text-center">

                <div class="col-6 col-md-3">
                    <a href="{{ route('user.transfer.local') }}"
                        class="qa-item text-decoration-none d-flex flex-column align-items-center justify-content-center p-3 rounded-3 gap-2">
                        <div class="qa-icon bg-primary">
                            <i class="fa-solid fa-exchange-alt text-white"></i>
                        </div>
                        <small class="fw-medium text-dark" style="font-size:.78rem;">Transfer</small>
                    </a>
                </div>

                <div class="col-6 col-md-3">
                    <a href="{{ route('user.transfer.international') }}"
                        class="qa-item text-decoration-none d-flex flex-column align-items-center justify-content-center p-3 rounded-3 gap-2">
                        <div class="qa-icon bg-success">
                            <i class="fa-solid fa-file-invoice text-white"></i>
                        </div>
                        <small class="fw-medium text-dark" style="font-size:.78rem;">Pay Bills</small>
                    </a>
                </div>

                <div class="col-6 col-md-3">
                    <a href="{{ route('user.profile.index') }}"
                        class="qa-item text-decoration-none d-flex flex-column align-items-center justify-content-center p-3 rounded-3 gap-2">
                        <div class="qa-icon bg-info">
                            <i class="fa-solid fa-user text-white"></i>
                        </div>
                        <small class="fw-medium text-dark" style="font-size:.78rem;">Profile</small>
                    </a>
                </div>

                <div class="col-6 col-md-3">
                    <a href="{{ route('user.support.index') }}"
                        class="qa-item text-decoration-none d-flex flex-column align-items-center justify-content-center p-3 rounded-3 gap-2">
                        <div class="qa-icon bg-warning">
                            <i class="fa-solid fa-headset text-white"></i>
                        </div>
                        <small class="fw-medium text-dark" style="font-size:.78rem;">Support</small>
                    </a>
                </div>

            </div>
        </div>
    </div>

    <style>
        .qa-item {
            /* background: #f7f8fa; */
            transition: background .15s, transform .15s, box-shadow .15s;
            height: 100%;
        }

        .qa-item:hover {
            background: #eef0f438;
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
        }

        .qa-icon {
            width: 46px;
            height: 46px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }
    </style>

</div>
