.StripeElement {
    padding: 9px 12px;
}

/* Mobile: make all columns full-width and remove offsets */
@media (max-width: 576px) {
  .form-group.row { display: block; }

  .form-group .col-sm-7,
  .form-group .col-sm-2,
  .form-group .col-sm-4,
  .row > [class*="col-"] {
    float: none !important;      /* BS3 fallback */
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;   /* BS4/5 flex */
    min-width: 0 !important;     /* crucial for flex children on mobile */
  }

  /* Stripe wrappers must fill the line */
  #paymentRequestButton,
  #stripeCreditCard,
  #stripeExpiryDate,
  #stripeCvc {
     padding: 10px !important;      /* add your spacing */
    box-sizing: border-box !important; /* keeps 100% width correct */
    background: #fff;              /* optional, gives the padding a background */
    border-radius: 6px;            /* optional, looks cleaner */

  }

  /* Ensure Stripe host node can expand */
  #paymentRequestButton > .__PrivateStripeElement,
  #stripeCreditCard > .__PrivateStripeElement,
  #stripeExpiryDate > .__PrivateStripeElement,
  #stripeCvc > .__PrivateStripeElement {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
        background: #fff !important;
        padding: 10px;
  }
}