.rampex-payment-method-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rampex-payment-method-wrapper img,
.rampex-method-wrapper img,
.rampex-method-icon {
    display: inline-block;
    max-height: 24px;
    width: auto;
    height: auto;
    vertical-align: middle;
}

/* Default multi-icon strip (Visa, Mastercard, Amex, Apple Pay, Google Pay, SEPA)
   shown on generic Rampex rows. Tight 5px gap, wraps on small screens.
   !important margins/padding defeat theme stylesheets that inflate spacing
   inside .payment_methods (the cause of the previous "icons too far apart" look). */
.rampex-icon-strip,
.rampex-icon-strip.rampex-icon-strip,
li.wc_payment_method label .rampex-icon-strip,
#payment ul.payment_methods li label .rampex-icon-strip {
    display: inline-flex;
    align-items: center;
    gap: 5px !important;
    flex-wrap: wrap;
    vertical-align: middle;
    margin: 0 !important;
    padding: 0 !important;
}

/* Beat theme stylesheets that add img margins/padding inside .payment_methods.
   A plain ".rampex-icon-strip img" (0,1,1) loses to theme rules like
   "ul.payment_methods li label img" (0,1,4) even with !important, because
   specificity breaks ties between !important declarations. Each selector
   below adds specificity so the most relevant one wins and the real gap
   stays exactly 5px instead of ballooning to 20px+. */
.rampex-icon-strip img,
.rampex-icon-strip.rampex-icon-strip img,
.rampex-method-wrapper .rampex-icon-strip img,
li.wc_payment_method label .rampex-icon-strip img,
.wc_payment_method .rampex-method-wrapper .rampex-icon-strip img,
#payment ul.payment_methods li label .rampex-icon-strip img,
#payment .wc_payment_method .rampex-icon-strip img {
    display: inline-block;
    max-height: 24px;
    width: auto;
    height: auto;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.rampex-method-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Safety net for themes that don't apply our wrapper classes. */
li.wc_payment_method img[src*="rampex-payment-gateway"],
li.wc_payment_method img[src*="/providers/"] {
    max-height: 24px;
    width: auto;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}
