@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-warning">
        <div class="cancel-icon">
            ⚠️
        </div>
        <h2 class="text-warning mt-3 fw-bold">Payment Cancelled</h2>
        <p class="mt-2 text-muted">You have cancelled the payment process. If this was a mistake, you can try again.</p>
        <a href="{{ route('seller.membership') }}" class="btn btn-warning btn-lg mt-3">Try Again</a>
    </div>
</div>

<style>
    .cancel-icon {
        font-size: 5rem;
        color: orange;
        animation: shake 0.5s ease-in-out;
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        50% { transform: translateX(5px); }
        75% { transform: translateX(-5px); }
    }
</style>
@endsection