/**
 * Quality Payments - Apple Pay / Google Pay express buttons.
 *
 * Shared by the classic / CheckoutWC buttons (built by assets/express.js) and the
 * Blocks express area (build/index.js).
 */

.quality-payments-wallet-wrap { margin: 12px 0 4px; }
/* Wallet rows moved out of the list by express.js live here, still inside the form. */
.quality-payments-hidden-methods { display: none !important; }
/* A list left with no visible rows (wallets-only stores) should not draw an empty box. */
.quality-payments-methods-empty { display: none !important; }

/* Buttons share their row equally. A single visible button fills the row. */
.quality-payments-wallet-buttons { display: flex; flex-direction: row; gap: 10px; }
.quality-payments-wallet-buttons + .quality-payments-wallet-buttons { margin-top: 10px; }

/* Brand buttons must stay black whatever the theme / CheckoutWC button styles say. */
button.quality-payments-wallet-btn,
.quality-payments-wallet-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    width: 100% !important;
    min-width: 0;
    height: 42px !important;
    min-height: 0 !important;
    padding: 0 12px !important;
    margin: 0 !important;
    background: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box;
    box-shadow: none !important;
    cursor: pointer;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    transition: opacity .15s ease;
}
button.quality-payments-wallet-btn:hover,
button.quality-payments-wallet-btn:focus,
.quality-payments-wallet-btn:hover,
.quality-payments-wallet-btn:focus { background: #000 !important; color: #fff !important; opacity: .85; }
.quality-payments-wallet-btn[aria-busy="true"] { opacity: .55; cursor: default; }

/* Official brand marks, sized to the button height at their native proportions.
   flex-shrink: 0 keeps the mark from collapsing when a narrow button also has a word. */
.quality-payments-wallet-btn svg { display: block; width: auto; flex: 0 0 auto; }
.quality-payments-wallet-apple_pay svg { height: 18px; }
.quality-payments-wallet-google_pay svg { height: 20px; }

/* Brand-coloured wallets: glyph + wordmark. */
.quality-payments-wallet-btn .quality-payments-wallet-word {
    margin-left: 7px;
    font: 700 15px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.quality-payments-wallet-cash_app svg { height: 22px; }
.quality-payments-wallet-klarna svg { height: 16px; }
.quality-payments-wallet-afterpay svg { height: 17px; }
/* Cash App Pay look: green button, black tile with a green $, black name. */
button.quality-payments-wallet-cash_app,
.quality-payments-wallet-cash_app { background: #00d64f !important; color: #000 !important; }
button.quality-payments-wallet-cash_app:hover,
button.quality-payments-wallet-cash_app:focus,
.quality-payments-wallet-cash_app:hover,
.quality-payments-wallet-cash_app:focus { background: #00d64f !important; color: #000 !important; }
button.quality-payments-wallet-klarna,
.quality-payments-wallet-klarna { background: #ffa8cd !important; color: #0b051d !important; }
button.quality-payments-wallet-klarna:hover,
button.quality-payments-wallet-klarna:focus,
.quality-payments-wallet-klarna:hover,
.quality-payments-wallet-klarna:focus { background: #ffa8cd !important; color: #0b051d !important; }
button.quality-payments-wallet-afterpay,
.quality-payments-wallet-afterpay { background: #b2fce4 !important; color: #000 !important; }
button.quality-payments-wallet-afterpay:hover,
button.quality-payments-wallet-afterpay:focus,
.quality-payments-wallet-afterpay:hover,
.quality-payments-wallet-afterpay:focus { background: #b2fce4 !important; color: #000 !important; }

/* Narrow screens: let a row wrap, and tighten the icon + word buttons so three fit
   on a phone; a button that still cannot fit drops to its own line. */
.quality-payments-wallet-buttons { flex-wrap: wrap; }
.quality-payments-wallet-btn { min-width: 96px; }
@media (max-width: 480px) {
    button.quality-payments-wallet-btn,
    .quality-payments-wallet-btn { padding: 0 8px !important; }
    .quality-payments-wallet-btn .quality-payments-wallet-word { margin-left: 6px; font-size: 14px; }
    .quality-payments-wallet-cash_app svg { height: 20px; }
    .quality-payments-wallet-klarna svg { height: 16px; }
    .quality-payments-wallet-afterpay svg { height: 18px; }
}

/* Blocks express area: let WooCommerce's grid size the buttons. */
.wc-block-components-express-payment__event-buttons .quality-payments-wallet-btn { height: 42px !important; }