@section('metas') 

    <title>MorePaws Perks - Subscribe</title>
    <meta name="description" content="Subscribe Description">
    <meta name="keywords" content="MorePaws pricing, MorePaws perks registration, MorePaws perks sign-up">

@endsection

<x-app-layout>


{{-- ova e za subscribeto --}}
<div class="overflow-hidden w-full relative">
    <section class="py-10 md:py-12">
        <div class="w-full max-w-[600px] lg:max-w-[1270px] px-[20px] md:px-[25px] mx-auto relative">
            <p class="mb-5 md:mb-8">
                <a href="#" class="inline-block bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-5 md:px-10 hover:bg-mainbrownhover transition-all shadow-brownshadow"><img src="{{ Vite::asset('resources/images/icon-arrow-left-white.svg')}}"  width="13" height="14" alt="" class="align-middle mr-3 inline-block -mt-1">Back to packages</a>
            </p>
            <div class="flex flex-row flex-wrap -mx-6 xl:-mx-[75px]">
                <div class="px-6 xl:px-[75px] w-full lg:w-5/12  mb-7 lg:mb-0">
                    <div class="block mb-6">
                        <p class="text-xl md:text-2xl font-bold text-mainblack mb-3 md:mb-4">Personal info</p>
                        <p class="relative pl-9 md:order-last text-base md:text-lg text-maingray mb-1">
                            <svg class="fill-[#6B7280] absolute left-0.5 top-0.5 z-10" width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path  d="M13.7085 11.7096C14.6889 10.9383 15.4045 9.88056 15.7558 8.68358C16.107 7.4866 16.0765 6.2099 15.6683 5.0311C15.2602 3.85231 14.4948 2.83003 13.4786 2.10649C12.4624 1.38296 11.246 0.994141 9.99853 0.994141C8.75108 0.994141 7.53465 1.38296 6.51846 2.10649C5.50228 2.83003 4.73688 3.85231 4.32874 5.0311C3.92061 6.2099 3.89004 7.4866 4.24129 8.68358C4.59254 9.88056 5.30814 10.9383 6.28853 11.7096C4.60861 12.3827 3.14282 13.499 2.04742 14.9396C0.95203 16.3801 0.268095 18.0909 0.0685318 19.8896C0.0540864 20.021 0.0656484 20.1538 0.102557 20.2807C0.139466 20.4075 0.200999 20.5259 0.283643 20.629C0.450551 20.8371 0.693315 20.9705 0.958532 20.9996C1.22375 21.0288 1.48969 20.9514 1.69786 20.7845C1.90602 20.6176 2.03936 20.3749 2.06853 20.1096C2.28812 18.1548 3.22022 16.3494 4.68675 15.0384C6.15328 13.7274 8.05143 13.0027 10.0185 13.0027C11.9856 13.0027 13.8838 13.7274 15.3503 15.0384C16.8168 16.3494 17.7489 18.1548 17.9685 20.1096C17.9957 20.3554 18.113 20.5823 18.2976 20.7467C18.4823 20.911 18.7213 21.0011 18.9685 20.9996H19.0785C19.3407 20.9695 19.5803 20.8369 19.7451 20.6309C19.9099 20.4248 19.9866 20.162 19.9585 19.8996C19.758 18.0958 19.0704 16.3806 17.9694 14.9378C16.8684 13.4951 15.3954 12.3791 13.7085 11.7096ZM9.99853 10.9996C9.20741 10.9996 8.43405 10.765 7.77625 10.3255C7.11845 9.88599 6.60576 9.26128 6.30301 8.53037C6.00026 7.79947 5.92105 6.9952 6.07539 6.21928C6.22973 5.44335 6.61069 4.73062 7.1701 4.17121C7.72951 3.6118 8.44225 3.23084 9.21817 3.0765C9.99409 2.92215 10.7984 3.00137 11.5293 3.30412C12.2602 3.60687 12.8849 4.11956 13.3244 4.77736C13.7639 5.43515 13.9985 6.20851 13.9985 6.99964C13.9985 8.0605 13.5771 9.07792 12.827 9.82806C12.0768 10.5782 11.0594 10.9996 9.99853 10.9996Z"/>
                            </svg>
                            Robert Harrison
                        </p>
                        <p class="relative pl-9 md:order-last text-base md:text-lg text-maingray">
                            <svg  class="fill-[#6B7280] absolute left-0.5 top-1.5 z-10" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 0 2.20435 0 3V13C0 13.7956 0.316071 14.5587 0.87868 15.1213C1.44129 15.6839 2.20435 16 3 16H17C17.7956 16 18.5587 15.6839 19.1213 15.1213C19.6839 14.5587 20 13.7956 20 13V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM16.59 2L10.71 7.88C10.617 7.97373 10.5064 8.04812 10.3846 8.09889C10.2627 8.14966 10.132 8.1758 10 8.1758C9.86799 8.1758 9.73728 8.14966 9.61542 8.09889C9.49356 8.04812 9.38296 7.97373 9.29 7.88L3.41 2H16.59ZM18 13C18 13.2652 17.8946 13.5196 17.7071 13.7071C17.5196 13.8946 17.2652 14 17 14H3C2.73478 14 2.48043 13.8946 2.29289 13.7071C2.10536 13.5196 2 13.2652 2 13V3.41L7.88 9.29C8.4425 9.8518 9.205 10.1674 10 10.1674C10.795 10.1674 11.5575 9.8518 12.12 9.29L18 3.41V13Z"/>
                            </svg>
                            robertharrison@gmail.com
                        </p>
                    </div>

                    <p class="text-xl md:text-2xl font-bold text-mainblack mb-3 md:mb-4">Payment Details</p>

                    <div class="w-full rounded-md border border-solid border-maingreen py-2 px-3 mb-4">
                        <div class="flex flex-row flex-wrap justify-between items-center -mx-2 mb-2">
                            <div class="px-2 py-1">
                                <div class="block">
                                    <label for="remember_me" class="flex items-center">
                                        <input type="radio" class="h-5 w-5 rounded-full  text-maingreen shadow-sm appearance-none focus:outline-none focus:ring-0  border-gray-200 focus:border-indigo-500 focus:ring-indigo-500 mr-2" id="remember_me" name="remember" checked>
                                        <span class="text-lg md:text-xl font-bold text-mainblack">Credit Card</span>
                                    </label>
                                </div>
                            </div>
                            <div class="px-2 py-1">
                                <div class="flex flex-row shrink-1 -mx-2">
                                    <div class="px-2">
                                        <img src="{{ Vite::asset('resources/images/icon-visa.svg')}}"  width="39" height="27" alt="">
                                    </div>
                                    <div class="px-2">
                                        <img src="{{ Vite::asset('resources/images/icon-mastercard.svg')}}"  width="39" height="27" alt="">
                                    </div>
                                    <div class="px-2">
                                        <img src="{{ Vite::asset('resources/images/icon-maestro.svg')}}" width="39" height="27" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <p class="mb-0 text-maingray text-base !leading-tight">Safe money transfer using your bank account. Visa, Mastercard, Maestro</p>
                    </div>

                    <form>
                        <div class="flex flex-row flex-wrap -mx-2">
                            <div class="px-2 py-1 w-full">
                                <div class="mt-0">
                                    <div class="relative z-0 w-full group">
                                        <label for="email" class="text-base leading-snug mb-2 pl-2">Cardholder name</label>
                                        <input id="email" type="email" name="email" class="w-full border-px border-white border-solid bg-white p-4 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder=" ">
                                    </div>
                                </div>
                            </div>

                            <div class="px-2 py-1 w-full">
                                <div class="mt-0">
                                    <div class="relative z-0 w-full group">
                                        <label for="email" class="text-base leading-snug mb-2 pl-2">Card number</label>
                                        <input id="email" type="email" name="email" class="w-full border-px border-white border-solid bg-white p-4 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder=" ">
                                    </div>
                                </div>
                            </div>

                            <div class="px-2 py-1 w-full sm:w-1/2 md:w-1/3">
                                <div class="mt-0">
                                    <div class="relative z-0 w-full group">
                                        <label for="email" class="text-base leading-snug mb-2 pl-2">Month</label>
                                        <input id="email" type="email" name="email" class="w-full border-px border-white border-solid bg-white p-4 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder="MM">
                                    </div>
                                </div>
                            </div>

                            <div class="px-2 py-1 w-full sm:w-1/2 md:w-1/3">
                                <div class="mt-0">
                                    <div class="relative z-0 w-full group">
                                        <label for="email" class="text-base leading-snug mb-2 pl-2">Year</label>
                                        <input id="email" type="email" name="email" class="w-full border-px border-white border-solid bg-white p-4 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder="YY">
                                    </div>
                                </div>
                            </div>

                            <div class="px-2 py-1 w-full sm:w-1/2 md:w-1/3">
                                <div class="mt-0">
                                    <div class="relative z-0 w-full group">
                                        <label for="email" class="text-base leading-snug mb-2 pl-2">CCV</label>
                                        <input id="email" type="email" name="email" class="w-full border-px border-white border-solid bg-white p-4 pr-10 rounded-lg shadow-brownshadow min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder="123">
                                        <svg class="absolute right-3.5 bottom-5" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M5 10.9287H8C8.26522 10.9287 8.51957 10.8234 8.70711 10.6358C8.89464 10.4483 9 10.1939 9 9.92871C9 9.66349 8.89464 9.40914 8.70711 9.2216C8.51957 9.03407 8.26522 8.92871 8 8.92871H5C4.73478 8.92871 4.48043 9.03407 4.29289 9.2216C4.10536 9.40914 4 9.66349 4 9.92871C4 10.1939 4.10536 10.4483 4.29289 10.6358C4.48043 10.8234 4.73478 10.9287 5 10.9287ZM17 0.928711H3C2.20435 0.928711 1.44129 1.24478 0.87868 1.80739C0.316071 2.37 0 3.13306 0 3.92871V12.9287C0 13.7244 0.316071 14.4874 0.87868 15.05C1.44129 15.6126 2.20435 15.9287 3 15.9287H17C17.7956 15.9287 18.5587 15.6126 19.1213 15.05C19.6839 14.4874 20 13.7244 20 12.9287V3.92871C20 3.13306 19.6839 2.37 19.1213 1.80739C18.5587 1.24478 17.7956 0.928711 17 0.928711ZM18 12.9287C18 13.1939 17.8946 13.4483 17.7071 13.6358C17.5196 13.8234 17.2652 13.9287 17 13.9287H3C2.73478 13.9287 2.48043 13.8234 2.29289 13.6358C2.10536 13.4483 2 13.1939 2 12.9287V6.92871H18V12.9287ZM18 4.92871H2V3.92871C2 3.66349 2.10536 3.40914 2.29289 3.2216C2.48043 3.03407 2.73478 2.92871 3 2.92871H17C17.2652 2.92871 17.5196 3.03407 17.7071 3.2216C17.8946 3.40914 18 3.66349 18 3.92871V4.92871Z" fill="#6B7280"/>
                                        </svg>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </form>
                </div>
                <div class="px-6 xl:px-[75px] w-full lg:w-7/12">
                    
                    <div class="w-full border border-solid border-gray-200 p-5 md:p-8 lg:p-10 xl:p-16 xxl:p-20">
                        <p class="text-xl md:text-2xl font-medium text-mainblack mb-3 md:mb-4">Package selected:</p>
                        <div class="flex flex-row flex-wrap -mx-3 mb-2">
                            <div class="px-3 py-1">
                                <div class="block">
                                    <label for="remember_me" class="flex items-center">
                                        <input type="radio" class="h-5 w-5 rounded-full  text-maingreen shadow-sm appearance-none focus:outline-none focus:ring-0  border-gray-200 focus:border-indigo-500 focus:ring-indigo-500 mr-2" id="remember_me" name="a2q34qda" checked>
                                        <span class="text-md md:text-lg font-normal text-mainblack">Premium monthly</span>
                                    </label>
                                </div>
                            </div>

                            <div class="px-3 py-1">
                                <div class="block">
                                    <label for="remember_me" class="flex items-center">
                                        <input type="radio" class="h-5 w-5 rounded-full  text-maingreen shadow-sm appearance-none focus:outline-none focus:ring-0  border-gray-200 focus:border-indigo-500 focus:ring-indigo-500 mr-2" id="remember_me" name="a2q34qda">
                                        <span class="text-md md:text-lg font-normal text-mainblack">Premium anualy</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <p class="mb-0 text-maingreen text-base md:text-lg font-normal !leading-tight">3 months free trial</p>
                        
                        <div class="w-full h-px block my-5 bg-gray-200"></div>

                        <p class="text-xl md:text-2xl font-medium text-mainblack mb-3 md:mb-4">Package description:</p>
                        <div class="flex flex-col">
                            <div class="relative pl-7 text-base md:text-lg text-mainblack pb-3">
                                <svg class="absolute left-1 top-2 z-10" width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.2 1.20039C13.8 0.800391 13.2 0.800391 12.8 1.20039L5.3 8.70039L2.2 5.60039C1.8 5.20039 1.2 5.20039 0.8 5.60039C0.4 6.00039 0.4 6.60039 0.8 7.00039L4.6 10.8004C4.8 11.0004 5 11.1004 5.3 11.1004C5.6 11.1004 5.8 11.0004 6 10.8004L14.2 2.60039C14.6 2.20039 14.6 1.60039 14.2 1.20039Z" fill="#7ABB82"/>
                                </svg>
                                Full use of interactive map
                            </div>

                            <div class="relative pl-7 text-base md:text-lg text-mainblack pb-3">
                                <svg class="absolute left-1 top-2 z-10" width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.2 1.20039C13.8 0.800391 13.2 0.800391 12.8 1.20039L5.3 8.70039L2.2 5.60039C1.8 5.20039 1.2 5.20039 0.8 5.60039C0.4 6.00039 0.4 6.60039 0.8 7.00039L4.6 10.8004C4.8 11.0004 5 11.1004 5.3 11.1004C5.6 11.1004 5.8 11.0004 6 10.8004L14.2 2.60039C14.6 2.20039 14.6 1.60039 14.2 1.20039Z" fill="#7ABB82"/>
                                </svg>
                                Direct messaging
                            </div>
                            <div class="relative pl-7 text-base md:text-lg text-mainblack pb-3">
                                <svg class="absolute left-1 top-2 z-10" width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.2 1.20039C13.8 0.800391 13.2 0.800391 12.8 1.20039L5.3 8.70039L2.2 5.60039C1.8 5.20039 1.2 5.20039 0.8 5.60039C0.4 6.00039 0.4 6.60039 0.8 7.00039L4.6 10.8004C4.8 11.0004 5 11.1004 5.3 11.1004C5.6 11.1004 5.8 11.0004 6 10.8004L14.2 2.60039C14.6 2.20039 14.6 1.60039 14.2 1.20039Z" fill="#7ABB82"/>
                                </svg>
                                Join/host group walks
                            </div>

                            <div class="relative pl-7 text-base md:text-lg text-mainblack pb-3">
                                <svg class="absolute left-1 top-2 z-10" width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.2 1.20039C13.8 0.800391 13.2 0.800391 12.8 1.20039L5.3 8.70039L2.2 5.60039C1.8 5.20039 1.2 5.20039 0.8 5.60039C0.4 6.00039 0.4 6.60039 0.8 7.00039L4.6 10.8004C4.8 11.0004 5 11.1004 5.3 11.1004C5.6 11.1004 5.8 11.0004 6 10.8004L14.2 2.60039C14.6 2.20039 14.6 1.60039 14.2 1.20039Z" fill="#7ABB82"/>
                                </svg>
                                Newsfeed
                            </div>

                            <div class="relative pl-7 text-base md:text-lg text-mainblack pb-0">
                                <svg class="absolute left-1 top-2 z-10" width="15" height="12" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M14.2 1.20039C13.8 0.800391 13.2 0.800391 12.8 1.20039L5.3 8.70039L2.2 5.60039C1.8 5.20039 1.2 5.20039 0.8 5.60039C0.4 6.00039 0.4 6.60039 0.8 7.00039L4.6 10.8004C4.8 11.0004 5 11.1004 5.3 11.1004C5.6 11.1004 5.8 11.0004 6 10.8004L14.2 2.60039C14.6 2.20039 14.6 1.60039 14.2 1.20039Z" fill="#7ABB82"/>
                                </svg>
                                Save money on perks
                            </div>
                        </div>

                        <div class="w-full h-px block my-5 bg-gray-200"></div>

                        <p class="text-xl md:text-2xl font-medium text-mainblack mb-3 md:mb-4">Referral Code:</p>

                        
                        <div class="relative z-0 w-full group">
                            <label for="code" class="text-base leading-snug mb-2 pl-2 hidden">Cardholder name</label>
                            <input id="code" type="text" name="code" class="w-full border-px border-neutral-500 border-solid bg-white p-4 rounded-lg min-h-[56px] placeholder:text-maingray text-black font-medium text-lg leading-tight focus:border-mainbrown !ring-transparent peer" required="" autofocus="" autocomplete="username" placeholder="Enter referral code">
                        </div>

                        <div class="w-full h-px block my-5 bg-gray-200"></div>

                        <p class="text-xl md:text-2xl font-medium text-mainblack mb-3 md:mb-4">Price details:</p>

                        <div class="flex flex-row shrink-1 justify-between items-center font-bold text-base md:text-lg">
                            <div class="py-1">Premium monthly package</div>
                            <div class="py-1">£3.50</div>
                        </div>

                        <div class="flex flex-row shrink-1 justify-between items-center font-bold text-base md:text-lg">
                            <div class="py-1">Tax</div>
                            <div class="py-1">£0.00</div>
                        </div>

                        <div class="w-full h-px block my-5 bg-gray-200"></div>

                        <div class="flex flex-row shrink-1 justify-between items-end font-bold text-base md:text-lg text-maingreen mb-3">
                            <div class="py-1">Total charge:</div>
                            <div class="py-1 text-xl md:text-2xl lg:text-3xl">£3.50</div>
                        </div>

                        <p class="mb-4 text-maingray text-base !leading-tight">This package includes 3 months free trial, you won’t be charged until 20/06/2023</p>
                        <p class="mb-0">
                            <a href="#" class="block w-full text-center bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-5 hover:bg-mainbrownhover transition-all shadow-brownshadow">Checkout</a>
                        </p>
                    </div>
                    
                </div>
            </div>
        </div>
    </section>

</div>



{{-- ova e za payment success --}}
<div class="overflow-hidden w-full relative">
    <section class="py-10 md:py-12">
        <div class="w-full max-w-[1270px] px-[20px] md:px-[25px] mx-auto relative">
            <div class="max-w-full w-[690px] mx-auto border border-solid border-gray-200 p-5 md:p-8 lg:p-10 xl:p-16 xxl:p-20">
                <p class="mb-6 md:mb-8 text-center">
                    <svg class="inline-block" width="100" height="101" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M50.0013 0.916016C22.7305 0.916016 0.417969 23.2285 0.417969 50.4994C0.417969 77.7702 22.7305 100.083 50.0013 100.083C77.2721 100.083 99.5846 77.7702 99.5846 50.4994C99.5846 23.2285 77.2721 0.916016 50.0013 0.916016ZM70.8263 42.0702L47.0263 65.8702C45.043 67.8535 42.068 67.8535 40.0846 65.8702L29.1763 54.9618C27.193 52.9785 27.193 50.0035 29.1763 48.0202C31.1596 46.0369 34.1346 46.0369 36.118 48.0202L43.5555 55.4577L63.8846 35.1285C65.868 33.1452 68.843 33.1452 70.8263 35.1285C72.8096 37.1118 72.8096 40.0869 70.8263 42.0702Z" fill="#22C55E"/>
                    </svg>
                </p>
                <p class="text-xl md:text-2xl font-medium text-mainblack mb-2 text-center">Payment Success</p>
                <p class="mb-16 mb:mb-20 text-maingray text-base !leading-tight text-center">Thank you for  joining the MorePaws community</p>
            

                <p class="text-xl md:text-2xl font-medium text-mainblack mb-2">Package selected:</p>
                <div class="flex flex-row shrink-1 justify-between items-center font-normal text-base md:text-lg">
                    <div class="py-1">Premium monthly</div>
                </div>

                <div class="w-full h-px block my-5 bg-gray-200"></div>

                <div class="flex flex-row shrink-1 justify-between items-end font-bold text-base md:text-lg text-maingreen mb-10">
                    <div class="py-1">Total charge:</div>
                    <div class="py-1 text-xl md:text-2xl lg:text-3xl">£3.50</div>
                </div>
                <p class="mb-6 text-center">
                    <a href="#" class="inline-block w-[250px] max-w-full text-center bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-5 hover:bg-mainbrownhover transition-all shadow-brownshadow">Continue to platform</a>
                </p>
                <p class="mb-0 text-center">
                    <a href="#" class="inline-block text-maingreen text-base md:text-lg">Download receipt</a>
                </p>
            </div>
        </div>
    </section>
</div>



{{-- ova e za payment error --}}
<div class="overflow-hidden w-full relative">
    <section class="py-10 md:py-12">
        <div class="w-full max-w-[1270px] px-[20px] md:px-[25px] mx-auto relative">
            <div class="max-w-full w-[690px] mx-auto border border-solid border-gray-200 p-5 md:p-8 lg:p-10 xl:p-16 xxl:p-20">
                <p class="mb-6 md:mb-8 text-center">
                    <svg class="inline-block" width="100" height="101" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M50.0013 0.916016C22.7305 0.916016 0.417969 23.2285 0.417969 50.4994C0.417969 77.7702 22.7305 100.083 50.0013 100.083C77.2721 100.083 99.5846 77.7702 99.5846 50.4994C99.5846 23.2285 77.2721 0.916016 50.0013 0.916016ZM68.3471 61.9035C70.3305 63.8869 70.3305 66.8619 68.3471 68.8452C66.3638 70.8285 63.3888 70.8285 61.4055 68.8452L50.0013 57.441L38.5971 68.8452C36.6138 70.8285 33.6388 70.8285 31.6555 68.8452C29.6721 66.8619 29.6721 63.8869 31.6555 61.9035L43.0596 50.4994L31.6555 39.0952C29.6721 37.1118 29.6721 34.1369 31.6555 32.1535C33.6388 30.1702 36.6138 30.1702 38.5971 32.1535L50.0013 43.5577L61.4055 32.1535C63.3888 30.1702 66.3638 30.1702 68.3471 32.1535C70.3305 34.1369 70.3305 37.1118 68.3471 39.0952L56.943 50.4994L68.3471 61.9035Z" fill="#DC2626"/>
                    </svg>
                </p>
                <p class="text-xl md:text-2xl font-medium text-mainblack mb-2 text-center">Payment Failed</p>
                <p class="mb-16 mb:mb-20 text-maingray text-base !leading-tight text-center">There was an error processing your application</p>
            

                <p class="text-xl md:text-2xl font-medium text-mainblack mb-2">Package selected:</p>
                <div class="flex flex-row shrink-1 justify-between items-center font-normal text-base md:text-lg">
                    <div class="py-1">Premium monthly</div>
                </div>

                <div class="w-full h-px block my-5 bg-gray-200"></div>

                <div class="flex flex-row shrink-1 justify-between items-end font-bold text-base md:text-lg text-red-500 mb-10">
                    <div class="py-1">Total charge:</div>
                    <div class="py-1 text-xl md:text-2xl lg:text-3xl">£3.50 <small class="text-base md:text-lg lg:text-xl">(failed)</small></div>
                </div>
                <p class="mb-0 text-center">
                    <a href="#" class="inline-block w-[200px] max-w-full text-center bg-mainbrown text-white font-bold text-xl leading-6 min-h-[48px] rounded-lg py-3 px-5 hover:bg-mainbrownhover transition-all shadow-brownshadow">Try again</a>
                </p>
            </div>
        </div>
    </section>
</div>


</x-app-layout>