/**
 * Constrain gateway icon size on the legacy WooCommerce checkout.
 * Themes vary widely in how they style the radio + label + icon row;
 * some leave the gateway icon at its native PNG/SVG dimensions (which can
 * be 200-500px wide), filling the row vertically and pushing the radio
 * input off-screen. These rules cap the icon to a sane inline-row size.
 *
 * Scope: only the IMG directly under the <label> of a .wc_payment_method.
 * QR codes inside .payment_box are explicitly NOT touched (they need to
 * stay at full size for scanning).
 */

.woocommerce-checkout li.wc_payment_method > label > img,
.woocommerce-checkout .wc_payment_method > label > img,
ul.wc_payment_methods li > label > img {
    max-height: 32px !important;
    max-width: 64px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
    float: none !important;
    box-shadow: none !important;
}

/* Make the label itself a flexible row so icon + text align cleanly */
.woocommerce-checkout li.wc_payment_method > label,
ul.wc_payment_methods li.wc_payment_method > label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    line-height: 1.4 !important;
}

/* Wallet Up sub-method tile icons — server-rendered .wallet-up-method-item
   (with dash, matching WalletUpProGateway::payment_fields) AND React Blocks
   tiles whose inline width/height is sometimes overridden by theme CSS.
   The dot-less .walletup-* aliases stay for any older build that may use
   them. */
.wallet-up-method-item img,
.wallet-up-method-icon,
.walletup-method-item img,
.walletup-method-tile img,
.wallet-up-payment-methods img,
.wallet-up-methods-container img {
    max-height: 48px !important;
    max-width: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: inline-block !important;
}

/* Guard: do NOT affect QR images or in-box display images */
.payment_box img,
.walletup-container img,
.walletup-qr-container img,
.walletup-content img {
    /* leave alone — qr-protect.css handles these */
}

/**
 * Payment method radio focus state.
 * Browsers emit a harsh black `outline` on focused/clicked radio inputs.
 * On the WC checkout that lands as an ugly square frame around the radio
 * dot. Replace it with a soft Wallet Up–purple focus ring that still meets
 * keyboard accessibility requirements (the ring is clearly visible, just
 * not the default black). DO NOT remove focus styling entirely — that
 * breaks keyboard navigation for accessibility.
 */
.woocommerce-checkout input[type="radio"][name="payment_method"],
.woocommerce-checkout input[type="radio"][name="wallet_up_payment_method"],
.wp-block-woocommerce-checkout input[type="radio"][name="radio-control-wc-payment-method-options"],
.wallet-up-payment-methods input[type="radio"],
.wallet-up-methods-container input[type="radio"] {
    outline: none !important;
    border-radius: 50% !important; /* force circular so box-shadow follows the dot shape */
    box-shadow: none;
    transition: box-shadow 120ms ease-in-out;
}
.woocommerce-checkout input[type="radio"][name="payment_method"]:focus,
.woocommerce-checkout input[type="radio"][name="payment_method"]:focus-visible,
.woocommerce-checkout input[type="radio"][name="wallet_up_payment_method"]:focus,
.woocommerce-checkout input[type="radio"][name="wallet_up_payment_method"]:focus-visible,
.wp-block-woocommerce-checkout input[type="radio"][name="radio-control-wc-payment-method-options"]:focus,
.wp-block-woocommerce-checkout input[type="radio"][name="radio-control-wc-payment-method-options"]:focus-visible,
.wallet-up-payment-methods input[type="radio"]:focus,
.wallet-up-payment-methods input[type="radio"]:focus-visible,
.wallet-up-methods-container input[type="radio"]:focus,
.wallet-up-methods-container input[type="radio"]:focus-visible {
    outline: none !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 3px rgba(103, 79, 191, 0.32) !important; /* #674FBF @ 32%, circular thanks to border-radius:50% above */
    border-color: #674FBF !important;
}
/* Also tame the focus state on the wrapping .wc_payment_method <li> some
   themes apply when the inner radio is focused. */
.woocommerce-checkout li.wc_payment_method:focus-within {
    outline: none !important;
    box-shadow: none !important;
}