.payment-options-header {
    display: flex;
    justify-content: space-between; /* To push left and right elements to edges */
    align-items: center; /* To vertically center items */
    flex-wrap: wrap; /* Allow items to wrap to the next line on smaller screens */
}

.payment-options-header .pull-left,
.payment-options-header .pull-right {
    float: none; /* Override existing floats */
    width: auto; /* Allow content to dictate width */
}

/* Media query for smaller screens if needed, though flex-wrap should handle most cases */
@media (max-width: 767px) { /* Adjust breakpoint as necessary based on Bootstrap's typical 'sm' breakpoint */
    .payment-options-header {
        flex-direction: column; /* Stack items vertically on very small screens */
        align-items: flex-start; /* Align stacked items to the start */
    }
    .payment-options-header .pull-right {
        margin-top: 10px; /* Add some space between stacked items */
    }

    /* New styles for payment option items on mobile */
    .payment-option-item .visible-xs {
        display: flex; /* Make the anchor tag a flex container */
        align-items: center; /* Vertically align items */
        gap: 10px; /* Add some space between the icon and text */
        width: 100%; /* Ensure it takes full width */
        justify-content: flex-start; /* Align content to the start */
    }

    .payment-option-item .visible-xs img,
    .payment-option-item .visible-xs i {
        flex-shrink: 0; /* Prevent icons from shrinking */
    }
}