/* Position the merchant-owned PayUp layer in the visible viewport, even after scrolling.
   Card issuer authentication windows remain controlled by the issuer/browser. */
#payup_layer{position:fixed!important;left:50%!important;top:calc(50% - 28px)!important;transform:translate(-50%,-50%)!important;max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 88px)!important;overflow:auto!important;overscroll-behavior:contain}
#payup_layer #payup_frame{max-width:100%!important;display:block}
#bg_layer{position:fixed!important;inset:0!important;width:100%!important;height:100%!important}

/* Merchant-owned recovery controls must stay above the PayUp backdrop. */
#otos-close-payment{position:fixed!important;bottom:14px!important;top:auto!important;right:16px!important;left:auto!important;z-index:2147483646!important;transform:none!important}
#otos-payment-help-open{position:fixed!important;bottom:14px!important;left:16px!important;z-index:2147483646!important;min-height:44px;padding:10px 16px;border:1px solid #d6dae0;border-radius:10px;background:#fff;color:#222;font:600 14px/1.4 sans-serif;cursor:pointer}
#otos-payment-help{width:min(440px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:24px;border:0;border-radius:16px;color:#222;background:#fff;box-sizing:border-box}
#otos-payment-help::backdrop{background:#0008}
#otos-payment-help h2{font-size:20px;margin:0 0 18px}
#otos-payment-help p{font-size:14px;line-height:1.7;margin:0 0 14px}
#otos-payment-help .payment-help-note{color:#555}
#otos-payment-help div{display:flex;flex-wrap:wrap;gap:8px}
#otos-payment-help button{flex:1 1 150px;min-height:44px;padding:10px;border:1px solid #ccc;border-radius:9px;font-size:14px;cursor:pointer}
#otos-payment-help [data-payment-help-check]{background:#111;color:#fff;border-color:#111}
@media(max-width:768px){#otos-close-payment,#otos-payment-help-open{display:none!important}}