/* Wallet Express Checkout Wrapper */
.ag-opayo-express-checkout {
    border:        1px solid #ddd;
    padding:       1.5em;
    margin-bottom: 2em;
    border-radius: 6px;
    background:    #f8f9fa;
    text-align:    center;
}

/* Section Heading */
.ag-opayo-heading {
    font-size:     1.25em;
    margin-bottom: 1em;
    color:         #222;
}

/* Fix nested Google Pay markup */
#ag-opayo-google-pay-button-container > div {
    width:           100%;
    display:         flex;
    justify-content: center;
}

/* Ensure Google button fills space */
#ag-opayo-google-pay-button-container button {
    width:     100%;
    max-width: 180px;
}

/* Optional: Constrain Apple Pay to same width */
.ag-opayo-wallet-buttons apple-pay-button {
    max-width: 180px;
    width:     100%;
}

/* Bottom placement margin */
.ag-opayo-location-checkout-bottom {
    margin-top: 1.5em;
}

/* Separator */
.ag-opayo-separator {
    text-align: center;
    margin:     2em 0 1em;
    position:   relative;
    font-size:  0.9em;
    color:      #666;
}

.ag-opayo-separator::before,
.ag-opayo-separator::after {
    content:        "";
    display:        inline-block;
    width:          40%;
    height:         1px;
    background:     #ddd;
    vertical-align: middle;
    margin:         0 10px;
}

/* Apple Pay button (native style) */
.apple-pay-button {
    appearance:              -apple-pay-button;
    -webkit-appearance:      -apple-pay-button;
    -apple-pay-button-type:  pay;
    -apple-pay-button-style: black;
}

/* Apple Pay web component adjustments */
apple-pay-button {
    --apple-pay-button-width:         180px;
    --apple-pay-button-height:        50px;
    --apple-pay-button-border-radius: 7px;
    --apple-pay-button-padding:       0px 0px;
    --apple-pay-button-box-sizing:    border-box;
}

/* Mobile Heading Font */
@media (max-width: 480px) {
    .ag-opayo-heading {
        font-size: 1.1em;
    }

    .ag-opayo-wallet-buttons {
        flex-direction: column;
    }
}

/* Fallback Notice */
.ag-apple-pay-fallback {
    background: #f9f9f9;
    border:     1px solid #ddd;
    padding:    1em;
    text-align: center;
    font-size:  0.95em;
    margin-top: 1em;
}

.ag-apple-pay-fallback img {
    margin-top: 0.5em;
}