@extends('layouts.app')

@section('content')
<div class="container d-flex justify-content-center align-items-center vh-100">
    <div class="card shadow-lg p-5 text-center border-danger">
        <div class="error-icon">
            ❌
        </div>
        <h2 class="text-danger mt-3 fw-bold">Payment Failed</h2>
        <p class="mt-2 text-muted">An error occurred while processing your payment. Please try again later.</p>
        <a href="{{ route('seller.membership') }}" class="btn btn-warning btn-lg mt-3">Try Again Later</a>
    </div>
</div>

<style>
    .error-icon {
        font-size: 5rem;
        color: red;
        animation: bounce 0.5s ease-in-out;
    }
    
    @keyframes bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }
</style>
@endsection