Display a list of payment or delivery methods as a button style [CSS]

Let's say your payment methods don't have prices and you want to display them as buttons rather than a list. In that case, you need to add the following CSS code to your user.css file.

.ph-payment-price-box,
.ph-shipping-price-box {
    display: none;
}
.ph-checkout-box-action {
    display: flex;
    align-items: baseline;
}
.ph-shipping-title-box,
.ph-payment-title-box {
    width: 33%;
}
.ph-shipping-title-box label,
.ph-payment-title-box label {
    padding: 1em;
    background: white;
    border: 1px solid grey;
    border-radius: 5px;
}
.ph-shipping-title-box label:has(input[type="radio"]:checked),
.ph-payment-title-box label:has(input[type="radio"]:checked) {
    border: 1px solid blue;
    box-shadow: 0px 0px 0px 2px blue;
}

The standard list of payment methods looks like this:

Phoca Cart - Payment method list in checkout - default

After the change in CSS file it will look like this: Phoca Cart - Payment method list in checkout - buttons