/**
 * Medpaid — HSA/FSA payment-method content (text + card image) on checkout.
 *
 * Rendered by templates/checkout/hsa-fsa-infocard.php on both the shortcode and
 * Block checkouts. Everything is scoped under .medpaid-checkout-infocard so it
 * neither inherits theme quirks nor leaks out. The image sits in its own box to
 * the left and the text in a box to the right; on narrow widths the text column
 * wraps below the image (flex-wrap, no media queries needed).
 *
 * To tweak the layout for your theme without editing the plugin, add rules
 * targeting these classes in Appearance -> Customize -> Additional CSS.
 */

.medpaid-checkout-infocard {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    box-sizing: border-box;
    margin: 8px 0;
}

.medpaid-checkout-infocard *,
.medpaid-checkout-infocard *::before,
.medpaid-checkout-infocard *::after {
    box-sizing: border-box;
}

/* Image box (left) — fixed to its content so it never stretches. */
.medpaid-checkout-infocard__media {
    flex: 0 0 auto;
    margin: 0;
}

.medpaid-checkout-infocard__media img {
    display: block;
    height: auto;
    max-width: 150px;
    margin: 0;
}

/* Image size options. */
.medpaid-checkout-infocard--img-small .medpaid-checkout-infocard__media img {
    max-width: 110px;
}

.medpaid-checkout-infocard--img-medium .medpaid-checkout-infocard__media img {
    max-width: 150px;
}

.medpaid-checkout-infocard--img-large .medpaid-checkout-infocard__media img {
    max-width: 200px;
}

/* Text box (right) — grows to fill, with a sensible min so it wraps to its own
   row beneath the image on narrow containers instead of squeezing. */
.medpaid-checkout-infocard__text {
    flex: 1 1 240px;
    min-width: 0;
}

.medpaid-checkout-infocard__text p {
    margin: 0 0 0.75em;
}

.medpaid-checkout-infocard__text p:last-child {
    margin-bottom: 0;
}