/* Google Pay Button Styling */
.gpay-button-fill {
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 1px solid #5f6368;
    min-width: 160px;
}

.gpay-button {
    width: 100%;
    height: 100%;
}

/* Apple Pay Button Styling */
.apple-pay-btn {
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    border: 1px solid #000;
    color: white;
    padding: 0 16px;
    transition: all 0.3s ease;
    min-width: 140px;
}

    .apple-pay-btn:hover {
        background: #333;
        border-color: #333;
    }

    .apple-pay-btn.black {
        background: #000;
        border: 1px solid #000;
        color: #fff;
    }

        .apple-pay-btn.black:hover {
            background: #333;
            border-color: #333;
        }

.apple-pay-button-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.apple-pay-logo {
    width: auto;
    height: 20px;
}

.apple-pay-text {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 500;
    font-size: 16px;
}

/* Ensure proper alignment in payment cards */
.payment-method-card .d-flex.justify-content-between {
    align-items: center;
}

.gpay-card-info-container {
    padding: 0;
    position: relative;
    min-width: 240px;
    height: 40px;
    min-height: 40px;
    border-radius: 4px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    cursor: pointer;
    border: 0px;
}

    .gpay-card-info-container.black,
    .gpay-card-info-animation-container.black {
        background-color: #000;
        box-shadow: none;
        outline: 1px solid #757575;
    }

    .gpay-card-info-container.white,
    .gpay-card-info-animation-container.white {
        background-color: #fff;
        outline: 1px solid #3C4043;
    }

    .gpay-card-info-container.black.border-inset,
    .gpay-card-info-animation-container.black.border-inset {
        outline-offset: -1px;
    }

    .gpay-card-info-container.white.border-inset,
    .gpay-card-info-animation-container.white.border-inset {
        outline-offset: -1px;
    }

    .gpay-card-info-container.black.border-toggle,
    .gpay-card-info-animation-container.black.border-toggle {
        outline: none;
    }

    .gpay-card-info-container.white.border-toggle,
    .gpay-card-info-animation-container.white.border-toggle {
        outline: none;
    }

    .gpay-card-info-container.black.active {
        background-color: #5f6368;
    }

    .gpay-card-info-container.black.hover,
    .gpay-card-info-animation-container.black.hover {
        background-color: #3c4043;
    }

    .gpay-card-info-container.white.active {
        background-color: #fff;
    }

    .gpay-card-info-container.white.focus {
        box-shadow: #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px;
    }

    .gpay-card-info-container.white.hover,
    .gpay-card-info-animation-container.white.hover {
        background-color: #f8f8f8;
    }

    .gpay-card-info-container.color-scheme-default {
        color-scheme: light dark;
    }

.gpay-card-info-iframe {
    border: 0;
    display: block;
    height: 100%;
    margin: auto;
    max-width: 100%;
    width: 240px;
    pointer-events: none;
}

.gpay-card-info-container-fill .gpay-card-info-iframe {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}

.gpay-card-info-container-fill,
.gpay-card-info-container-fill > .gpay-card-info-container {
    width: 100%;
    height: inherit;
}


    .gpay-card-info-container-fill .gpay-card-info-placeholder-container {
        align-items: center;
        justify-content: center;
        width: 100%;
        padding-top: 3px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .gpay-card-info-container-fill .gpay-card-info-placeholder-svg-container {
        position: relative;
        width: 60%;
        height: inherit;
        max-height: 80%;
        margin-right: -20%;
    }

        .gpay-card-info-container-fill .gpay-card-info-placeholder-svg-container > svg {
            position: absolute;
            left: 0;
            height: 100%;
            max-width: 100%;
        }

.gpay-card-info-animation-container {
    display: flex;
    width: 100%;
    position: absolute;
    z-index: 100;
    height: 40px;
    border-radius: 4px;
}

.gpay-card-info-placeholder-container {
    display: flex;
    width: 100%;
    height: 100%;
    margin: auto;
    justify-content: center;
}

.gpay-card-info-animated-progress-bar-container {
    display: flex;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
}

    .gpay-card-info-animated-progress-bar-container.border-inset {
        z-index: -1;
    }

.gpay-card-info-animated-progress-bar {
    border-radius: 4px 4px 0px 0px;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-name: gpayProgressFill;
    animation-timing-function: cubic-bezier(0.97, 0.33, 1, 1);
    background: #caccce;
    width: 100%;
    height: 3px;
    max-height: 3px;
}

.gpay-card-info-animated-progress-bar-indicator {
    border-radius: 4px 4px 0px 0px;
    max-width: 20px;
    min-width: 20px;
    height: 3px;
    max-height: 3px;
    background: linear-gradient(to right, #caccce 30%, #acaeaf 60%);
    animation-delay: 0.5s;
    animation-duration: 1.7s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: gpayPlaceHolderShimmer;
}

.gpay-card-info-animated-progress-bar.no-radius {
    border-radius: 0;
}

.gpay-card-info-animated-progress-bar-indicator.no-radius {
    border-radius: 0;
}

.gpay-card-info-iframe-fade-in {
    animation-fill-mode: forwards;
    animation-duration: 0.6s;
    animation-name: gpayIframeFadeIn;
}

.gpay-card-info-iframe-show {
    display: block;
    opacity: 1;
}

.gpay-card-info-iframe-hide {
    display: none;
}

.gpay-card-info-animation-container-fade-out {
    animation-fill-mode: forwards;
    animation-duration: 0.6s;
    animation-name: gpayPlaceHolderFadeOut;
}

.gpay-card-info-animation-gpay-logo {
    margin: 13px 7px 0px 39px;
    background-origin: content-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    height: 17px;
    max-height: 17px;
    max-width: 41px;
    min-width: 41px;
}

    .gpay-card-info-animation-gpay-logo.black {
        background-image: url("https://www.gstatic.com/instantbuy/svg/dark_gpay.svg");
    }

    .gpay-card-info-animation-gpay-logo.white {
        background-image: url("https://www.gstatic.com/instantbuy/svg/light_gpay.svg");
    }

    .gpay-card-info-animation-gpay-logo.logo-loading {
        margin: 0;
        height: 42.5%;
        max-height: 42.5%;
        min-height: 42.5%;
        width: 100%;
    }

.logo-loading-container {
    display: flex;
    background-image: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
}

    .logo-loading-container.logo-loading-container-hide {
        display: none;
    }

.gpay-button-static-content-container-loading {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 0;
}

@keyframes gpayPlaceHolderShimmer {
    0% {
        margin-left: 0px;
    }

    100% {
        margin-left: calc(100% - 20px);
    }
}

@keyframes gpayIframeFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes gpayPlaceHolderFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes gpayProgressFill {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.gpay-card-info-container-fill .gpay-card-info-animation-container {
    top: 0;
    width: 100%;
    height: 100%;
}

.gpay-card-info-container-fill .gpay-card-info-animation-gpay-logo {
    background-position: right;
    margin: 0 0 0 0;
    max-width: none;
    width: 25%;
    height: inherit;
    max-height: 50%;
}

    .gpay-card-info-container-fill .gpay-card-info-animation-gpay-logo.logo-loading {
        background-position: center;
        margin: 0;
        height: 42.5%;
        max-height: 42.5%;
        min-height: 42.5%;
        width: 100%;
    }

.gpay-card-info-container.black,
.gpay-button.black {
    outline: 1px solid #757575;
    box-shadow: none;
}

    .gpay-card-info-container.black.border-toggle,
    .gpay-button.black.border-toggle {
        outline: none;
    }

    .gpay-card-info-container.black.focus,
    .gpay-button.black.focus {
        outline: 1px auto Highlight;
        outline: 1px auto -webkit-focus-ring-color;
        box-shadow: none;
    }

.gpay-card-info-container.white,
.gpay-button.white {
    outline: 1px solid #3C4043;
    box-shadow: none;
}

    .gpay-card-info-container.white.border-toggle,
    .gpay-button.white.border-toggle {
        outline: none;
    }

    .gpay-card-info-container.white.focus,
    .gpay-button.white.focus {
        outline: 1px auto Highlight;
        outline: 1px auto -webkit-focus-ring-color;
        box-shadow: none;
    }

.gpay-button {
    background-origin: content-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px;
    border-radius: 4px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 1px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
    cursor: pointer;
    height: 40px;
    min-height: 40px;
    padding: 12px 24px 10px;
    width: 240px;
}

    .gpay-button.gpay-button-size-match-height.black,
    .gpay-button.gpay-button-size-match-height.white,
    .gpay-button-fill > .gpay-button.gpay-button-size-match-height.white,
    .gpay-button-fill > .gpay-button.gpay-button-size-match-height.black {
        box-sizing: border-box;
        padding: 0;
        height: 42.5%;
        min-height: auto;
        outline: none;
        background-color: transparent;
    }

.gpay-button-fill.gpay-button-container-size-match-height {
    height: 40px;
}

.gpay-button.black {
    background-color: #000;
    box-shadow: none;
}

.gpay-button.white {
    background-color: #fff;
}

.gpay-button.black.border-inset,
.gpay-button.black.border-inset {
    outline-offset: -1px;
}

.gpay-button.white.border-inset,
.gpay-button.white.border-inset {
    outline-offset: -1px;
}

.gpay-button.short, .gpay-button.plain {
    min-width: 90px;
    width: 160px;
}

.gpay-button.black.short, .gpay-button.black.plain {
    background-image: url(https://www.gstatic.com/instantbuy/svg/dark_gpay.svg);
}

.gpay-button.white.short, .gpay-button.white.plain {
    background-image: url(https://www.gstatic.com/instantbuy/svg/light_gpay.svg);
}

.gpay-button.black.active {
    background-color: #5f6368;
}

.gpay-button.black.hover {
    background-color: #3c4043;
}

.gpay-button.white.active {
    background-color: #fff;
}

.gpay-button.white.focus {
    box-shadow: #e8e8e8 0 1px 1px 0, #e8e8e8 0 1px 3px;
}

.gpay-button.white.hover {
    background-color: #f8f8f8;
}

.gpay-button-fill, .gpay-button-fill > .gpay-button.white, .gpay-button-fill > .gpay-button.black {
    width: 100%;
    height: inherit;
}

    .gpay-button-fill > .gpay-button.white,
    .gpay-button-fill > .gpay-button.black {
        padding: 12px 15% 10px;
    }

.gpay-button.donate, .gpay-button.book,
.gpay-button.checkout,
.gpay-button.subscribe, .gpay-button.pay,
.gpay-button.order {
    padding: 9px 24px;
}

.gpay-button-fill > .gpay-button.donate,
.gpay-button-fill > .gpay-button.book,
.gpay-button-fill > .gpay-button.checkout,
.gpay-button-fill > .gpay-button.order,
.gpay-button-fill > .gpay-button.pay,
.gpay-button-fill > .gpay-button.subscribe {
    padding: 9px 15%;
}

.gpay-card-info-container.black,
.gpay-button.black {
    outline: 1px solid #757575;
    box-shadow: none;
}

    .gpay-card-info-container.black.border-toggle,
    .gpay-button.black.border-toggle {
        outline: none;
    }

    .gpay-card-info-container.black.focus,
    .gpay-button.black.focus {
        outline: 1px auto Highlight;
        outline: 1px auto -webkit-focus-ring-color;
        box-shadow: none;
    }

.gpay-card-info-container.white,
.gpay-button.white {
    outline: 1px solid #3C4043;
    box-shadow: none;
}

    .gpay-card-info-container.white.border-toggle,
    .gpay-button.white.border-toggle {
        outline: none;
    }

    .gpay-card-info-container.white.focus,
    .gpay-button.white.focus {
        outline: 1px auto Highlight;
        outline: 1px auto -webkit-focus-ring-color;
        box-shadow: none;
    }


.payment-method-card.selected[data-channel-id="859"],
.payment-method-card.selected[data-channel-id="861"],
.payment-method-card.selected[data-channel-id="862"],
.payment-method-card.selected[data-channel-id="864"],
.payment-method-card.selected[data-channel-id="865"],
.payment-method-card.selected[data-channel-id="866"],
.payment-method-card.selected[data-channel-id="867"],
.payment-method-card.selected[data-channel-id="868"],
.payment-method-card.selected[data-channel-id="869"],
.payment-method-card.selected[data-channel-id="870"],
.payment-method-card.selected[data-channel-id="871"],
.payment-method-card.selected[data-channel-id="872"],
.payment-method-card.selected[data-channel-id="873"],
.payment-method-card.selected[data-channel-id="874"],
.payment-method-card.selected[data-channel-id="875"],
.payment-method-card.selected[data-channel-id="876"],
.payment-method-card.selected[data-channel-id="877"],
.payment-method-card.selected[data-channel-id="878"],
.payment-method-card.selected[data-channel-id="879"],
.payment-method-card.selected[data-channel-id="880"],
.payment-method-card.selected[data-channel-id="881"],
.payment-method-card.selected[data-channel-id="882"],
.payment-method-card.selected[data-channel-id="883"],
.payment-method-card.selected[data-channel-id="897"],
.payment-method-card.selected[data-channel-id="898"],
.payment-method-card.selected[data-channel-id="911"] {
    border-color: #e5e7eb !important;
    background-color: transparent !important;
}