/* Express Payment Buttons - Consistent Width Styling */
#fast-checkout-ideal-btn {
    height: 45px;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0;
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    cursor: pointer;
}

#fast-checkout-ideal-btn img {
    max-height: 100%;
    max-width: 100%;
    display: block;
    margin: auto;
}

/* PayPal Express Button Container */
.buckaroo-paypal-express {
    width: 100%;
    max-width: 350px;
    margin: 10px 0;
    box-sizing: border-box;
    cursor: pointer;
}

/* Apple Pay Button Container */
#apple-pay-wrapper {
    width: 100%;
    max-width: 350px;
    margin: 10px 0;
    box-sizing: border-box;
    cursor: pointer;
}

/* Google Pay Button Container */
#google-pay-wrapper {
    width: 100%;
    max-width: 350px;
    margin: 10px 0;
    box-sizing: border-box;
    cursor: pointer;
}

/* Google Pay Button Element - ensure it fills container */
#google-pay-wrapper > div,
#google-pay-wrapper button {
    width: 100% !important;
    max-width: 100% !important;
}

/* CRITICAL: Override Magento's generic button:hover which uses background: shorthand
   that resets background-repeat/position/size, causing SVG to tile in Safari */
#google-pay-wrapper .gpay-button:hover,
#google-pay-wrapper .gpay-button:focus,
#google-pay-wrapper .gpay-button:focus-visible {
    background-color: #000 !important;           /* Keep black background */
    background-repeat: no-repeat !important;     /* Prevent tiling */
    background-position: center center !important;
    background-size: contain !important;
    background-origin: content-box !important;
    border: 0 !important;                        /* No border on hover */
    outline: 1px solid #757575 !important;       /* Keep outline */
}

/* Safari-specific fixes for Google Pay button rendering issues */
@supports (-webkit-appearance: none) {
    #google-pay-wrapper button,
    #google-pay-wrapper > div {
        /* Force GPU rendering but prevent artifacts */
        -webkit-transform: translateZ(0) scale(1);
        transform: translateZ(0) scale(1);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Prevent text duplication by clipping overflow */
        overflow: hidden !important;
        /* Create new stacking context */
        isolation: isolate;
        /* Force clean text rendering */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Prevent hover effects from causing duplication in Safari */
    #google-pay-wrapper button:hover,
    #google-pay-wrapper > div:hover {
        /* Disable transform on hover to prevent Safari bug */
        -webkit-transform: none !important;
        transform: none !important;
        /* Force repaint with subtle opacity (invisible to user) */
        opacity: 0.9999;
        /* Ensure overflow is still hidden */
        overflow: hidden !important;
    }

    /* Also fix for focus state */
    #google-pay-wrapper button:focus,
    #google-pay-wrapper > div:focus {
        -webkit-transform: none !important;
        transform: none !important;
        overflow: hidden !important;
    }
}

/* Hide Apple Pay wrapper in checkout payment method selection - use Place Order button instead */
.buckaroo_magento2_applepay.payment-method #apple-pay-wrapper {
    display: none !important;
}

/* Apple Pay Button Styling */
#apple-pay-wrapper > apple-pay-button {
    width: 100% !important;
    height: 45px !important;
    -apple-pay-button-style: black;
    -apple-pay-button-type: buy;
    cursor: pointer;
}

/* Express Payment Component Containers - Cursor Pointer */
#apple-pay-catalog-product-view-component,
#apple-pay-catalog-cart-view-component,
#google-pay-catalog-product-view-component,
#google-pay-catalog-cart-view-component,
#paypal-express-button-component,
#fast-checkout-ideal-btn-component {
    cursor: pointer;
}

/* Google Pay Component Container */
#google-pay-catalog-product-view-component,
#google-pay-catalog-cart-view-component {
    width: 100%;
    max-width: 350px;
    margin: 10px 0;
    box-sizing: border-box;
}

/* PayPal Express Cart Container */
.buckaroo-paypal-express .box-tocart {
    cursor: pointer;
}

/* Ensure all payment button containers have consistent centering */
.buckaroo-box-to-cart {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.buckaroo-box-to-cart .fieldset {
    width: 100%;
    max-width: 350px;
}

.buckaroo-box-to-cart .actions {
    width: 100%;
}

/* PayPal Express button component container */
#paypal-express-button-component {
    width: 100%;
    max-width: 350px;
    margin: 10px 0;
    box-sizing: border-box;
}

/* iDIN product page styles */
#buckaroo_idin_product {
    background: #d4eded;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
    border-radius: 5px;
    max-width: 500px;
    height: 55px;
    box-sizing: border-box;
}

#buckaroo_idin_product img {
    height: 45px;
    flex-shrink: 0;
}

#buckaroo_idin_product span {
    flex: 1;
    line-height: 1.2;
    font-size: 13px;
}