@extends('storefront::public.layout')

@section('content')

<style>
.crossmark
{
    max-width:100px;
}
    .crossmark-circle {
  stroke: red;
  stroke-width: 4;
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: draw-circle 0.6s ease-out forwards;
  
}

.crossmark-line {
  stroke: red;
  stroke-width: 4;
  stroke-dasharray: 28;
  stroke-dashoffset: 28;
}

.crossmark-line1 {
  animation: draw-line 0.3s 0.6s ease-out forwards;
}

.crossmark-line2 {
  animation: draw-line 0.3s 0.9s ease-out forwards;
}

@keyframes draw-circle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}

</style>
    <section class="order-complete-wrap">
        <div class="container">
            <div class="order-complete-wrap-inner">
                <div class="order-complete">
                            <svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
                        <circle class="checkmark-circle" cx="26" cy="26" r="25" fill="none"/>
                        <path class="checkmark-check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
                    </svg>


                    <h2>{{ trans('storefront::order_complete.order_failed') }}</h2>
                    <span>{{ trans('storefront::order_complete.order_failed_message') }}</span>
                </div>
            </div>
        </div>
    </section>
@endsection 

@push('globals')
    @vite([
        'modules/Storefront/Resources/assets/public/sass/pages/checkout/complete/main.scss',
    ])
@endpush