/*
 * ps_checkout forces every label inside its option to inline.
 * On Falcon that label is the payment card, so PayPal, Pay Later
 * and Pay by Card lose the bordered row used by the other methods.
 * Bootstrap's .card is a column flex; align-items must stay stretch
 * or the icon, title and funding mark sit in the center of the card.
 */
body#checkout .payment-options .ps_checkout-payment-option > label.card {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  line-height: inherit;
  text-align: left;
}

body#checkout .payment-options .ps_checkout-payment-option > label.card > .card-body {
  flex: 0 0 auto;
  width: 100%;
  text-align: left;
}

body#checkout .payment-options .ps_checkout-payment-option > label.card > .card-body .checkout-option__row {
  justify-content: flex-start;
}

body#checkout .payment-options .ps_checkout-payment-option > label.card > .ps_checkout-mark {
  display: flex !important;
  justify-content: flex-start;
  align-items: center;
  align-self: flex-start;
  width: auto;
  max-width: 11rem;
  max-height: 2.5rem;
  margin: 0 0 0.75rem 1.5rem;
  overflow: hidden;
}

body#checkout .payment-options .ps_checkout-payment-option > label.card > .ps_checkout-mark iframe {
  max-height: 2.5rem;
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (max-width: 575.98px) {
  body#checkout .payment-options .ps_checkout-payment-option > label.card > .ps_checkout-mark {
    margin-left: 0.5rem;
  }
}