/* paypal-wallet.css -- the wallet button row on the cart page + the "placing your order" overlay (2026-09-28).
   Sits under the green Checkout button; right-aligned like it on desktop, full width on phones. */
.tw-wallet { clear: both; max-width: 360px; margin: 18px 0 8px auto; text-align: center; }
.tw-wallet-or { margin: 0 0 8px; font-size: 13px; color: #555; text-transform: lowercase; }
.tw-wallet-buttons > * { display: block; margin: 0 0 10px; }
.tw-wallet-buttons > [hidden] { display: none; }
.tw-wallet-note { margin: 4px 0 0; font-size: 12px; color: #555; }
.tw-wallet-msg { margin: 8px 0 0; font-size: 14px; color: #a94442; }
.tw-wallet-busy { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; background: rgba(255, 255, 255, .92);
  display: flex; align-items: center; justify-content: center; }
.tw-wallet-busy[hidden] { display: none; }
.tw-wallet-busy p { font-size: 20px; font-weight: bold; }
@media (max-width: 767px) { .tw-wallet { max-width: none; margin: 18px 0 8px; } }

/* the row variant (login page, JR 2026-09-28): a bold lead-in, the buttons in a centred 2-column grid (two lines with
   four buttons; one line crushed Google's, JR); phones keep the stacked full-width column above */
.tw-wallet-row { max-width: 960px; margin: 18px auto 8px; }
.tw-wallet-row .tw-wallet-or { margin: 0 0 12px; font-size: 18px; font-weight: bold; color: #000; text-transform: none; }
@media (min-width: 768px) {
  .tw-wallet-row .tw-wallet-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; gap: 10px; }
  .tw-wallet-row .tw-wallet-buttons > :not([hidden]) { width: auto; min-width: 0; height: 50px; margin: 0; }
  .tw-wallet-row .tw-wallet-note { margin-top: 10px; }
}

/* Apple Pay / Google Pay (stage 2): Apple's element sizes itself from its own CSS variables; Google's button fills its
   holder. Both 50px tall like the row's other buttons (the cart's .cl-actions and the login row set the same height). */
apple-pay-button { --apple-pay-button-width: 100%; --apple-pay-button-height: 50px; --apple-pay-button-border-radius: 4px; height: 50px; }
.tw-googlepay { height: 50px; }
