/* ── Apple Pay Button ───────────────────────────────────────────────────── */

/*
 * We use a <div role="button"> instead of <button> to avoid WooCommerce theme
 * CSS rules that target button elements inside .payment_box and hide them.
 * -webkit-appearance: -apple-pay-button works on any element in Safari/iOS.
 */

#ax-applepay-btn-wrap {
    margin-top: 12px;
    display: none; /* JS sets to block when Apple Pay is available */
}

#ax-applepay-pay-btn {
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: buy;
    -apple-pay-button-style: black;

    /* Force dimensions — some themes collapse empty/non-button elements */
    display: block !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;

    /* Black fallback background — visible if webkit appearance hasn't rendered yet */
    background-color: #000 !important;

    /* Reset anything the theme might inject */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 4px !important;
    outline: none;
    box-sizing: border-box !important;
    cursor: pointer !important;

    /* Prevent text selection on click */
    user-select: none;
    -webkit-user-select: none;
}

#ax-applepay-pay-btn:focus-visible {
    outline: 2px solid #0070c9;
    outline-offset: 2px;
}

/* ── Fallback wordmark for non-Safari browsers (Chrome/Edge/Firefox) ────────
 * These engines ignore -webkit-appearance:-apple-pay-button and would otherwise
 * render a featureless black box. We paint an  Pay wordmark instead. In Safari
 * the native button renders, so the @supports rule below hides this glyph to
 * avoid any double render. */
#ax-applepay-pay-btn .ax-ap-fallback,
#ax-applepay-express-btn .ax-ap-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 100%;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 600;
    font-size: 19px;
    line-height: 1;
    pointer-events: none; /* clicks belong to the button, not the label */
}

#ax-applepay-pay-btn .ax-ap-fallback svg,
#ax-applepay-express-btn .ax-ap-fallback svg {
    display: block;
}

@supports (-webkit-appearance: -apple-pay-button) {
    /* Safari renders the real Apple Pay button — hide our fallback wordmark. */
    #ax-applepay-pay-btn .ax-ap-fallback,
    #ax-applepay-express-btn .ax-ap-fallback {
        display: none !important;
    }
}

/* Message shown on non-Safari / non-Apple devices */
#ax-applepay-unavailable p {
    color: #c00;
    font-size: 0.875em;
    margin: 8px 0 0;
}

/* ── Express checkout block (Shopify-style, above the checkout form) ──────── */

#ax-express-checkout {
    margin: 0 0 28px;
    text-align: center;
}

#ax-express-checkout .ax-express-label {
    font-size: 15px;
    opacity: 0.75;
    margin-bottom: 14px;
}

#ax-applepay-express-btn {
    /* Native Apple Pay button — WHITE, to match the express strip */
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: buy;
    -apple-pay-button-style: white;

    display: block !important;
    width: 100%;
    max-width: 420px;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    background-color: #fff !important;

    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    outline: none;
    box-sizing: border-box !important;
    cursor: pointer !important;
    user-select: none;
    -webkit-user-select: none;
}

#ax-applepay-express-btn:focus-visible {
    outline: 2px solid #0070c9;
    outline-offset: 2px;
}

/* Dark  Pay wordmark on the white express button (non-Safari fallback) */
#ax-applepay-express-btn .ax-ap-fallback {
    color: #000;
}

/* OR divider */
#ax-express-checkout .ax-express-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    opacity: 0.6;
    font-size: 13px;
    letter-spacing: 0.08em;
}

#ax-express-checkout .ax-express-or::before,
#ax-express-checkout .ax-express-or::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
}