/* =================================================================
   Express Checkout (Apple Pay / Google Pay / Link) — button dummies.

   BUILD: v7 — Amazon Pay shows its wordmark; dummies use a fixed 2-col grid.

   Stripe's express-checkout buttons render inside iframes that load
   asynchronously, so there's a multi-second gap where the buttons
   look blank.

   express-checkout-buttons.js finds the Stripe container
   #wc-stripe-express-checkout-element (already in the page's initial
   HTML), reveals it, and drops in dummy buttons styled to match the
   real Apple Pay / Google Pay / Link buttons — same shape, text and
   logos — but dimmed (opacity) so they read as "loading, not yet
   clickable". Once the real button iframes have loaded, the JS fades
   the dummies out.

   This file styles the dummies; the container is positioned /
   revealed inline by the JS. Container + wrapper IDs are Stripe's own
   (woocommerce-gateway-stripe).
   ================================================================= */

/* The dummy buttons, laid over the Stripe container (which the JS
   gives position:relative + a min-height while loading). Dimmed as a
   whole so it clearly reads as a not-yet-ready placeholder. */
    #wc-stripe-express-checkout-element {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

   .bip-ece-dummy {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: 12px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

/* One dummy button — matches a real express-checkout button; the
   2-column grid cell sizes it. */
.bip-ece-dummy__btn {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 4px;
    background-color: #000;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Link button — green pill with dark text, vs the black Apple /
   Google buttons. */
.bip-ece-dummy__btn--link {
    background-color: #00d66f;
    color: #011e0f;
}

/* Amazon Pay button — Amazon's yellow, with the official "amazon pay"
   wordmark SVG (set in makeBtn) centered on it. */
.bip-ece-dummy__btn--amazon {
    background-color: #ffd814;
}
.bip-ece-dummy__btn--amazon svg {
    height: 26px;
}

/* The Apple / Google / Link mark sits between the two words. */
.bip-ece-dummy__btn svg {
    display: block;
    height: 20px;
    width: auto;
}

/* Real buttons are ready → fade the dummies, then the JS removes them. */
.bip-ece-dummy.bip-ece-dummy--done {
    opacity: 0;
    pointer-events: none;
}

/* Mobile — one button per row, for both the real Stripe buttons and
   the dummy overlay. The JS reserves the matching (1-column) height. */
@media (max-width: 600px) {
    #wc-stripe-express-checkout-element {
        grid-template-columns: 1fr !important;
    }
    .bip-ece-dummy {
        grid-template-columns: 1fr;
    }
}