@extends('layouts.front')

@push('styles')
<style>
    .payment-section {
        background: linear-gradient(to right, #fceabb, #f8b500);
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .message-box {
        background-color: #ffffff;
        border-left: 8px solid #dc3545;
        max-width: 600px;
    }

    .message-box h2 {
        color: #dc3545;
        font-weight: bold;
    }

    .message-box p {
        font-size: 1.1rem;
        color: #333;
    }
</style>
@endpush

@section('content')

<div class="payment-section text-center py-5">
    <div class="container">
        <div class="message-box mx-auto p-4 rounded shadow">
            <h2 class="text-danger mb-3">❌ Payment Cancelled</h2>
            <p class="lead">You Canceled the payment.</p>
            <a href="{{ route('courses') }}" class="btn btn-danger" style="background: #dc3545;">Try Again</a>
        </div>
    </div>
</div>

@endsection