@extends('Client.layouts.layout')
@section('title', __('trans.success')  )
@section('content')

    <div class="container" style="padding-bottom: 100px;">
        <div id='card' class="animated fadeIn">
          <div id='upper-side'>

                <div class="row text-center justify-content-center">
                    <img src="https://medad.bh/error-payment.jpg" class="img-cover" alt="payment" style="width: 100%;">
                </div>
            </h3>
          </div>
          <div id='lower-side'>
            <p id='message'>
                 Your payment didn't go through.Please try a different payment method or try again later 
            </p>

            <div class="row text-center justify-content-center">
                <a href="/" class="btn btn-dark" style="padding: 10px 60px !important; background: #000; color: #fff; text-decoration: none; border: 0px; outline: 0px;">
                    Shop
                </a>
            </div>
          </div>
        </div>
    </div>

@endsection

@push('css')
    <script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
    <style>

        
        #card {
          border: 1px solid #ff0000;
          border-radius: 10px;
          position: relative;
          top: 60px;
          max-width: 100%;
          width: 420px;
          display: block;
          margin: auto;
          text-align: center;
          font-family: 'Source Sans Pro', sans-serif;
        }
        
        #upper-side {
          padding: 1em;
          display: block;
          color: #fff;
          border-top-right-radius: 8px;
          border-top-left-radius: 8px;
        }
        
        #checkmark {
          font-weight: lighter;
          fill: #fff;
          margin: -3.5em auto auto 20px;
        }
        
        #status {
          font-weight: lighter;
          text-transform: uppercase;
          letter-spacing: 2px;
          font-size: 1em;
          margin-top: -.2em;
          margin-bottom: 0;
        }
        
        #lower-side {
          padding: 2em 2em 2em 2em;
          background: #fff;
          display: block;
          border-bottom-right-radius: 8px;
          border-bottom-left-radius: 8px;
        }
        
        #message {
          margin-top: -.5em;
          color: #757575;
          letter-spacing: 1px;
        }
        
        #contBtn {
          position: relative;
          top: 1.5em;
          text-decoration: none;
          background: #ff0000;
          color: #fff;
          margin: auto;
          padding: .8em 3em;
          -webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
          -moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
          box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.21);
          border-radius: 25px;
          -webkit-transition: all .4s ease;
        		-moz-transition: all .4s ease;
        		-o-transition: all .4s ease;
        		transition: all .4s ease;
        }
        
        #contBtn:hover {
          -webkit-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
          -moz-box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
          box-shadow: 0px 15px 30px rgba(50, 50, 50, 0.41);
          -webkit-transition: all .4s ease;
        		-moz-transition: all .4s ease;
        		-o-transition: all .4s ease;
        		transition: all .4s ease;
        }
    </style>
@endpush