/**
 * Hyvä Themes - https://hyva.io
 * Copyright © Hyvä Themes 2020-present. All rights reserved.
 * This product is licensed per Magento install
 * See https://hyva.io/license
 *
 * Styles taken directly from the original module.
 *
 * @see vendor/paypal/module-braintree-core/view/frontend/web/css/source/_extend.less
 */

.braintree-applepay-container-product {
    display: inline-block;
}

.braintree-applepay-container-product .braintree-apple-pay-button {
    padding: 10px 0;
    margin: 0;
    margin-bottom: 15px;
}

.braintree-apple-pay-button {
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: plain;
    display: block;
    width: auto;
    min-height: 40px;
    border: 1px solid black;
    background-image: -webkit-named-image(apple-pay-logo-black);
    background-size: 100% 60%;
    background-repeat: no-repeat;
    background-color: black;
    background-position: 50% 50%;
    border-radius: 5px;
    padding: 2px;
    margin: 6px auto;
    transition: background-color 0.15s;
    cursor: pointer;
    height: 42px;
}

/**
 * EK: the cart page's own "Proceed to Checkout" / PayPal / Venmo buttons are
 * all full-width, ~44px tall, with a 4px border radius (see
 * Magento_Checkout::php-cart/methods.phtml - #checkout-link-button and the
 * PayPal in-context button both fill their <li class="item">). The Apple Pay
 * shortcut's default styling above (a fixed 200px, center-margined, 5px
 * radius pill) came from the original non-Hyva vendor module and looks
 * inconsistent stacked in that same button list. Scoped to ".cart-summary"
 * specifically (the cart page's summary card - confirmed via DOM inspection
 * to be where this specific shortcut instance renders) rather than the bare
 * ".braintree-apple-pay-button" class, so the minicart drawer's copy of this
 * same button (present on every other page) and the product page's own
 * Apple Pay button keep their existing, separately-intentional styling.
 */
.cart-summary .braintree-applepay-minicart {
    width: 100%;
}

.cart-summary .braintree-apple-pay-button {
    width: 100%;
    min-height: 44px;
    margin: 0;
    border-radius: 4px;
    margin-top: 6px;
}