/********* Loader copy from OTW **************** */
/********* Add this class .otw_container_loading to any element **************** */
@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.otw_container_loading{
    position: relative;
}
.otw_container_loading:after {
    content: " ";
    display: block;
    width: 50px;
    height: 50px;
    margin: 0;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
    position: absolute;
    left: calc(50% - 25px);
    top: calc(50% - 25px);
    transform: translate(-50%);
    z-index: 999;
}
.otw_container_loading:before {
    backdrop-filter: blur(2px);
    background-color: rgba(0,0,0,0.1);
    content: "";
    position: absolute;
    inset: 0;
    z-index: 998;
}

/* New CSS for bridgerpay submission */
#apple-pay-button img {
    filter: invert(1) brightness(100) saturate(100%);
}

.wc_payment_method .payment_box.payment_method_bridgerpay_gateway{
    background-color:transparent;
}

/* Base Styling */
.bridgerpay_wallet_button_container {
position: absolute;
/* background: #f0f0f0; */
border: 1px solid #ccc;
min-height: 80px;
/* padding: 10px; */
/* max-width: 400px; */
/* text-align: center; */
z-index: 1000;
}
.payment_method_bridgerpay_wallet_gateway{
    min-height: 80px;
}

/* Make body relative so absolute positioning works */
body {
    position: relative;
    min-height: 100vh;
    margin: 0;
}
.wallet-apple-pay button, apple-pay-button {
--apple-pay-button-width: 5000px;
--apple-pay-button-height: 30px;
--apple-pay-button-border-radius: 5px;
--apple-pay-button-padding: 5px 0px;
}

/* ---------- Hosted Wallet Buttons (Apple Pay / Google Pay) ---------- */
.bridgerpay-hwb-description { margin-bottom: 8px; }

.bridgerpay-hwb-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
}
/* Each wallet is its own flex track that never shrinks below what the SDK
   actually renders. Without `flex: 0 0 auto` these collapse to 0 width (the
   SDK's iframe carries its own inline width, which the flex algorithm is free
   to shrink past) — a zero-width cell takes no space in the row, so the button
   inside overflows and paints on top of the neighbouring wallet. */
.bridgerpay-hwb-cell {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    /* Last-resort containment: a wallet button too narrow for its own label paints
       outside its box and over the next button. Clipping is ugly; overlapping is
       broken. The width clamp in JS should stop this ever being needed. */
    overflow: hidden;
}
.bridgerpay-hwb-apple-pay,
.bridgerpay-hwb-google-pay {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
/* The SDK sizes these itself; just stop them being inline-baseline aligned. */
.bridgerpay-hwb-apple-pay iframe,
.bridgerpay-hwb-google-pay iframe {
    display: block;
}

/* Placeholder shown until the cashier session exists. */
.bridgerpay-hwb-placeholder {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 160px;
    min-height: 40px;
    padding: 0 16px;
    border: none;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: opacity .15s ease;
}
.bridgerpay-hwb-placeholder:hover { opacity: .85; }
/* Inline SVG inherits `color` from the button, so one asset works on black, white
   and outline styles. Google's coloured G keeps its own fills; only its grey wordmark
   was switched to currentColor server-side. */
.bridgerpay-hwb-placeholder__logo {
    display: inline-flex;
    align-items: center;
    height: 55%;
    max-height: 24px;
    color: inherit;
}
.bridgerpay-hwb-placeholder__logo svg,
.bridgerpay-hwb-placeholder__logo img {
    height: 100%;
    width: auto;
    display: block;
    fill: currentColor;
}
/* Both marks are wide lockups ( Pay / G Pay). Sized as a share of the button so they
   track the configured height the way the real buttons do. */
.bridgerpay-hwb-placeholder--apple .bridgerpay-hwb-placeholder__logo { height: 36%; max-height: 18px; }
.bridgerpay-hwb-placeholder--google .bridgerpay-hwb-placeholder__logo { height: 42%; max-height: 22px; }
.bridgerpay-hwb-placeholder__label { white-space: nowrap; }

/* Inline spinner while the session is being created. */
.bridgerpay-hwb-placeholder__spinner { display: none; }
.bridgerpay-hwb-placeholder.is-busy { cursor: progress; opacity: .65; }
.bridgerpay-hwb-placeholder.is-busy .bridgerpay-hwb-placeholder__label,
.bridgerpay-hwb-placeholder.is-busy .bridgerpay-hwb-placeholder__logo { visibility: hidden; }
.bridgerpay-hwb-placeholder.is-busy .bridgerpay-hwb-placeholder__spinner {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: bridgerpay-hwb-spin .7s linear infinite;
}
@keyframes bridgerpay-hwb-spin { to { transform: rotate(360deg); } }

.bridgerpay-hwb-status {
    margin-top: 8px;
    font-size: 0.9em;
    opacity: .8;
}
.bridgerpay-hwb-error {
    margin-top: 8px;
    color: #b32d2e;
}

/* Cell is mounting the real SDK button: placeholder is already gone, so show a
   neutral spinner in its place rather than an empty gap. */
.bridgerpay-hwb-cell.is-loading {
    position: relative;
    min-width: 160px;
    min-height: 40px;
}
.bridgerpay-hwb-cell.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    opacity: .5;
    animation: bridgerpay-hwb-spin .7s linear infinite;
}

/* The loader is applied to <body> by the wallet gateways. Absolute positioning would
   size the backdrop to the whole document and centre the spinner on the document, so
   on a long checkout page the spinner ends up off-screen. Pin both to the viewport. */
body.otw_container_loading::before,
body.otw_container_loading::after {
    position: fixed;
}
body.otw_container_loading::before {
    /* Sits above the checkout so the form cannot be interacted with mid-redirect. */
    z-index: 99998;
}
body.otw_container_loading::after {
    z-index: 99999;
}