@extends('layouts.main')

@section('content')
<div class="d-flex justify-content-center align-items-center bg-light" style="height: 75vh">
    <div class="bg-white p-5 rounded shadow text-center" style="max-width: 500px; width: 100%;">
        <div class="mb-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="text-danger" width="64" height="64" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zM4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
            </svg>
        </div>
        <h2 class="mb-3 text-danger">Payment Failed ❌</h2>
        <p class="text-muted mb-4">Something went wrong with your payment. Please try again.</p>
        <a href="{{ route('wallet.topupForm') }}" class="btn btn-danger px-4">Try Again</a>
    </div>
</div>
@endsection