/**
 * ===========================================
 * DIGITAL WALLETS (APPLE PAY, GOOGLE PAY) — SHARED STYLES
 * ===========================================
 * Loaded by every campaign template next to /shared/multi-campaign/multi-campaign.css.
 * The markup itself is injected by /shared/wallet-pay/wallet-pay.js and the
 * provider files next to it (apple-pay.js, google-pay.js).
 */

/* Modal 3 with a wallet selected: the card blocks step aside (logos, saved cards,
   card fields). !important on purpose — tools/saved-cards.js drives those blocks
   with inline display toggles, and this rule must win whatever it last set.
   The billing address block is left alone: it feeds the contact and the receipt. */
#DonationProcessModal3.is-wallet .credit__card,
#DonationProcessModal3.is-wallet #saved_cards_section,
#DonationProcessModal3.is-wallet #card_fields_section {
  display: none !important;
}

/* Modal 3: every payment method on one line, equal widths. The templates' generic
   `label { width: 100%; display: block }` would otherwise stack the options; the
   row (.payment__method__cards, defined in the templates' style.css) wraps on a
   narrow screen. */
.payment__method__cards .payment__method__card {
  flex: 1 1 140px;
  width: auto;
  margin: 0;
}

/* Modal 5: one container per wallet, shown only when that wallet was picked at
   step 3. In the footer it takes the exact place of "Confirm Payment". */
.wallet-pay-button {
  display: flex;
  align-items: center;
}

.modal__footer__finis .wallet-pay-button {
  width: 50%;
  height: 53px;
}

/* The template sizes the footer buttons with `.modal__footer__finis button`
   (half width, 53px, 30px radius, theme background, first/last-child borders),
   rules meant for Back / Confirm that also reach the wallet's own <button>
   inside the container. Undone here for both wallets: full width of the
   container, no theme border or background. Height and pill shape are kept on
   purpose, they match the Back button. */
.modal__footer__finis .wallet-pay-button button,
.modal__footer__finis .wallet-pay-button button:first-child,
.modal__footer__finis .wallet-pay-button button:last-child {
  width: 100%;
  height: 53px;
  border: 0;
  border-radius: 26.5px;
  background: transparent;
  box-shadow: none;
}

/* Mouse focus after a click leaves no ring; keyboard focus keeps the browser's */
.modal__footer__finis .wallet-pay-button button:focus:not(:focus-visible) {
  outline: none;
}

/* While the purchase is running (tools/donationProcess.js showPaymentLoading) */
.wallet-pay-button.is-busy {
  pointer-events: none;
  opacity: 0.6;
}

/* Native Apple Pay button. Safari draws it; the element stays empty. */
.apple-pay-button {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: donate;
  -apple-pay-button-style: black;
  width: 100%;
  height: 53px;
  border: 0;
  border-radius: 26.5px;
  cursor: pointer;
}

/* Google Pay, static button (buttonSizeMode fill): pay.js wraps its <button>
   in a div and gives the button `height: inherit`, so the wrapper carries the
   container's height. "Donate with G Pay" is a background image scaled to the
   content box; Google's own side padding (15%) keeps it clear of the pill ends.
   Black as asked at creation — the footer's theme colour would show otherwise. */
.wallet-pay-button--google_pay > div {
  width: 100%;
  height: 100%;
}

.modal__footer__finis .wallet-pay-button--google_pay button.gpay-button {
  background-color: #000;
}

.modal__footer__finis .wallet-pay-button--google_pay button.gpay-button:hover {
  background-color: #3c4043;
}