/**
 * 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;
}

/* On narrow viewports the inline-flex label + icon row cannot hold every
   gateway logo on one line; long labels wrap under a floated radio and the
   icons crowd the edge. Let the row flow and cap logo footprint so labels
   stay legible and tappable. Card-brand marks (.ppcp-card-icon) sit directly
   under the label like any gateway img, so they are covered too. */
@media (max-width: 600px) {
    .woocommerce-checkout li.wc_payment_method > label,
    ul.wc_payment_methods li.wc_payment_method > label {
        display: inline !important;
        line-height: 1.7 !important;
        white-space: normal !important;
    }
    .woocommerce-checkout li.wc_payment_method label img,
    ul.wc_payment_methods li.wc_payment_method label img,
    .woocommerce-checkout li.wc_payment_method label .ppcp-card-icon {
        max-width: 38px !important;
        max-height: 24px !important;
        margin: 0 4px 3px 0 !important;
        display: inline-block !important;
        vertical-align: middle !important;
        float: none !important;
    }
    .woocommerce-checkout #payment .wc_payment_methods li { padding: 10px 0 !important; }
    ul.wc_payment_methods li.wc_payment_method > input[type="radio"] {
        vertical-align: middle !important;
        margin-right: 8px !important;
    }
}

/* ============================================================================
   Polished, theme-agnostic method rows for the LEGACY WooCommerce checkout.
   Turns Wallet Up gateway rows into clean cards (Image-12 style) so Divi /
   Elementor / classic themes render the same as WC Blocks. Generic to every
   Wallet Up gateway via [class*="payment_method_wallet_up"] — a new method
   inherits this automatically, nothing hardcoded per method. Tokens mirror
   the redesigned donation form for one coherent look.
   ============================================================================ */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
    --wu-accent: #674FBF;
    --wu-border: #e3e6ee;
    --wu-radius: 12px;
    --wu-tint: rgba(103, 79, 191, 0.06);
    --wu-ink: #1b2430;
    --wu-muted: #6b7280;
}
/* the list becomes a clean stack of cards */
.woocommerce-checkout #payment ul.wc_payment_methods {
    list-style: none !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    background: #fff !important;
    border: 1.5px solid var(--wu-border) !important;
    border-radius: var(--wu-radius) !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"]:hover {
    border-color: #c9c3e6 !important;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > input[type="radio"] {
    order: 0 !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 0 0 18px !important;
    accent-color: var(--wu-accent) !important;
}
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > label {
    order: 1 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 16px 18px 16px 12px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    color: var(--wu-ink) !important;
    line-height: 1.35 !important;
}
/* brand icon aligned to the right edge of the row (Image-12) */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > label > img,
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > label .ppcp-card-icon {
    margin-left: auto !important;
    max-height: 24px !important;
    max-width: 46px !important;
}
/* selected row highlight (no per-method colour = coherent, reusable) */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"]:has(input[type="radio"]:checked) {
    border-color: var(--wu-accent) !important;
    box-shadow: 0 0 0 1px var(--wu-accent) inset !important;
    background: var(--wu-tint) !important;
}
/* the expanded panel becomes a clean footer inside the card — a centered flex
   column so the QR card, amount, wallet address + Copy all align dead-centre
   (text-align alone can't centre a fixed-width block like the QR card). */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > .payment_box {
    order: 2 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px !important;
    background: #f7f8fb !important;
    border: 0 !important;
    border-top: 1px solid var(--wu-border) !important;
    border-radius: 0 0 var(--wu-radius) var(--wu-radius) !important;
    color: var(--wu-muted) !important;
    /* Do NOT force `display` here. WooCommerce / CheckoutWC collapse an
       unselected method's .payment_box with inline `display:none`; a
       `display:flex !important` overrides that inline style and leaves every
       WalletUp panel stuck open (and un-closable in CheckoutWC's accordion).
       The flex layout is applied ONLY to the selected row's panel, below. */
}
/* Only the SELECTED WalletUp method shows its panel — as a centred flex column.
   Unselected panels keep the checkout's own collapse, so open/close works. */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"]:has(input[type="radio"]:checked) > .payment_box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
/* belt-and-suspenders: centre the QR display card + any inner wrappers, kill floats */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > .payment_box > *,
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > .payment_box .wallet-up-payment-display,
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > .payment_box .walletup-container,
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > .payment_box .walletup-qr-container,
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > .payment_box .walletup-content {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}

/* WooCommerce BLOCKS checkout: the WalletUp method content lives in
   .wallet-up-individual-method inside the accordion panel — NOT a .payment_box.
   Centre that panel (and its QR card + wallet-address box) the same way, so the
   Blocks checkout matches the classic one. */
.wc-block-components-radio-control-accordion-content .wallet-up-individual-method,
.wp-block-woocommerce-checkout .wallet-up-individual-method {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}
/* Global QR-card centring — applies in BOTH classic and Blocks contexts, so the
   payable card + address never stick to the left regardless of the wrapper. */
.wallet-up-individual-method > *,
.walletup-qr-link,
.wallet-up-payment-display,
.walletup-container,
.walletup-qr-container,
.walletup-content {
    margin-left: auto !important;
    margin-right: auto !important;
    float: none !important;
}
/* kill the theme's little triangle/arrow above the panel */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > .payment_box::before,
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > .payment_box::after {
    display: none !important;
    content: none !important;
}
@media (max-width: 600px) {
    .woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > label {
        padding: 14px 14px 14px 10px !important;
    }
    .woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > input[type="radio"] {
        margin-left: 14px !important;
    }
}

/* Normalize brand marks to a uniform height so wordmarks (Zelle, PayPal.me) and
   square logos (Cash App, Venmo) read as one consistent set (Image-12 crispness). */
.woocommerce-checkout #payment ul.wc_payment_methods li.wc_payment_method[class*="payment_method_wallet_up"] > label > img,
.wallet-up-methods-container .wallet-up-method-icon {
    height: 22px !important;
    width: auto !important;
    max-width: 44px !important;
    object-fit: contain !important;
}

/* Grouped mode: the "WalletUp Pay" sub-method grid → same clean card rows as the
   individual gateways. Higher specificity than the gateway's inline <style>, so
   no !important war; a new method inherits it (data-method is generic). */
.woocommerce-checkout .wallet-up-methods-container,
.wp-block-woocommerce-checkout .wallet-up-methods-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin: 4px 0 !important;
    padding: 0 !important;
}
.woocommerce-checkout .wallet-up-methods-container .wallet-up-method-item,
.wp-block-woocommerce-checkout .wallet-up-methods-container .wallet-up-method-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    background: #fff !important;
    border: 1.5px solid #e3e6ee !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    text-align: left !important;
}
.woocommerce-checkout .wallet-up-methods-container .wallet-up-method-item:hover {
    border-color: #c9c3e6 !important;
}
.woocommerce-checkout .wallet-up-methods-container .wallet-up-method-item.selected,
.wp-block-woocommerce-checkout .wallet-up-methods-container .wallet-up-method-item.selected {
    border-color: #674FBF !important;
    box-shadow: 0 0 0 1px #674FBF inset !important;
    background: rgba(103, 79, 191, 0.06) !important;
}
.woocommerce-checkout .wallet-up-methods-container .wallet-up-method-item .wallet-up-method-name {
    order: 1 !important;
    flex: 1 1 auto !important;
    font-weight: 600 !important;
    color: #1b2430 !important;
    margin: 0 !important;
}
.woocommerce-checkout .wallet-up-methods-container .wallet-up-method-item .wallet-up-method-icon {
    order: 2 !important;
    margin: 0 0 0 auto !important;
}