$ordersuccess-width: 700px !default;
$cart-success-message-icon: $icons_check-circle !default;

.page-ordersuccess {
   max-width: $ordersuccess-width;
   margin: 0 auto;

   h1::after {
      margin-left: auto;
      margin-right: auto;
   }

   p {
      text-align: center;
   }

   .btns {
      display: flex;
      justify-content: center;
      padding-top: $spacer-lg;

      .btn + .btn {
         margin-left: calc($grid-gutter-width / 2);
      }
   }

   .order-payment-box {
      text-align: center;
      padding: $spacer-lg 0;
   }


   @media screen and (max-width: $md - 1) {
      h1 {
         font-size: 24px;
      }
   }

   @media screen and (max-width: $sm - 1) {
      .btns {
         flex-wrap: wrap;

         .btn {
            width: 100%;

            + .btn {
               margin-left: 0;
               margin-top: $grid-gutter-width;
            }
         }
      }
   }
}

.cart-success-message {
   margin-bottom: $spacer-lg;

   // todo fix icon vertical align
   @if $cart-success-message-icon {
      border-color: $border-color;

      p::before {
         @include fonticon;

         content: $cart-success-message-icon;
         color: $state-success;
         margin-right: 10px;
         vertical-align: middle;
         line-height: .8;
         position: relative;
         top: -1px;

         @media screen and (max-width: $md - 1) {
            display: none;
            content: none;
         }
      }
   }
}

.payment-transfer {
   .w-text strong {
      text-transform: uppercase;
      color: $black;
      margin-bottom: 10px;
   }

   .alert {
      text-align: center;
      border-color: $border-color;
   }

   .wpj-col-center {
      max-width: 600px;
      margin: auto;

      p {
         text-align: left;
      }
   }
}
