@extends('layouts.main')

@section('content')
<section class="py-4 py-md-3 banner-c">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-12">
                <h1 class="text-white f-sm-30 f-30 fw-500 mb-0">Payment Failed</h1>
            </div>
        </div>
    </div>
</section>
<section class="payment-failed py-4">
    <div class="container">
        <div class="row">
             <div class="col-md-5 col-sm-6 mx-auto">
                 <div class="card p-4 py-5 text-center">
                     <div>
                         <img src="{{asset('img/payment-failed.svg')}}" class="d-block mx-auto" alt="missing image" width="75px" />
                         <h3 class="mt-3 clr5c">Payment Failed.</h3>
                         <p class="mt-2 clr5c">
                             Sorry, your appointment was not booked.
                         </p>
                         <a href="{{route('appointment.patient-select')}}" class="btn-custom text-decoration-none">Try Again</a>
                     </div>
                 </div>
             </div>
        </div>
    </div>
</section>
@stop
@section('css')
<style>
.btn-custom {
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    border: 0.5px solid #008FC5;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    width: auto;
    padding: 8px 30px;
    background-color: #008FC5;
    transition: .3s;
}
.btn-custom:hover {
    box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  color:#fff;
}
</style>
@endsection