.upay-mfa-otpx{margin-top:8px}.upay-mfa-otpx *,.upay-mfa-otpx *:before,.upay-mfa-otpx *:after{box-sizing:border-box}.upay-mfa-otpx-wrap{position:relative;display:flex;gap:clamp(5px,2.2vw,8px);justify-content:center;align-items:center;height:54px;transition:gap .45s cubic-bezier(.25,1,.5,1)}.upay-mfa-otpx-box{width:clamp(34px,13vw,42px);min-width:0;flex:0 1 auto;height:52px;padding:0;background:#fff;border:1.5px solid var(--border, #DBDBDB);border-radius:12px;text-align:center;font-family:inherit;font-size:21px;font-weight:700;color:var(--text, #1B1D1F);outline:none;-moz-appearance:none;appearance:none;-webkit-appearance:none;-webkit-text-fill-color:currentColor;transition:transform .55s cubic-bezier(.25,1,.5,1),border-color .35s ease,opacity .35s ease,color .25s ease,box-shadow .35s ease}.upay-mfa-otpx-box:focus{border-color:var(--primary-dark, #00BA9E);box-shadow:0 0 0 3px #00ba9e2e}.upay-mfa-otpx-box:disabled{opacity:.5!important;cursor:not-allowed}.upay-mfa-otpx-box.is-pop{animation:upay-mfa-otpx-pop .18s cubic-bezier(.34,1.56,.64,1)}.upay-mfa-otpx.is-collapsed .upay-mfa-otpx-box{pointer-events:none;animation:none}.upay-mfa-otpx.is-collapsed .is-center{border-color:var(--primary-dark, #00BA9E)}.upay-mfa-otpx.phase-success .is-center{border-color:var(--success, #0f766e)}.upay-mfa-otpx.phase-failure .is-center{border-color:var(--danger, #b91c1c)}.upay-mfa-otpx.phase-failure .upay-mfa-otpx-wrap{animation:upay-mfa-otpx-shake .4s cubic-bezier(.36,.07,.19,.97)}.upay-mfa-otpx-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s ease;z-index:5;pointer-events:none;line-height:0}.upay-mfa-otpx-icon.is-visible{opacity:1}.upay-mfa-otpx-spin{width:22px;height:22px;border:2.5px solid var(--border, #DBDBDB);border-top-color:var(--primary-dark, #00BA9E);border-radius:50%;animation:upay-mfa-otpx-spin .8s linear infinite}.upay-mfa-otpx-check{color:var(--success, #0f766e)}.upay-mfa-otpx-check path{stroke-dasharray:30;stroke-dashoffset:30}.upay-mfa-otpx-icon.is-visible .upay-mfa-otpx-check path{animation:upay-mfa-otpx-draw .45s .1s ease forwards}.upay-mfa-otpx-cross{color:var(--danger, #b91c1c)}.upay-mfa-otpx-help{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.upay-mfa-otpx-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.upay-mfa-otpx-result{margin-top:12px;padding:0 8px;max-width:100%;font-size:14px;font-weight:700;text-align:center;letter-spacing:0;line-height:1.45;overflow-wrap:anywhere;opacity:0;transform:translateY(5px);transition:opacity .3s ease,transform .3s ease}.upay-mfa-otpx-result.is-visible{opacity:1;transform:translateY(0)}.upay-mfa-otpx-result.is-ok{color:var(--success, #0f766e)}.upay-mfa-otpx-result.is-error{color:var(--danger, #b91c1c)}@keyframes upay-mfa-otpx-pop{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes upay-mfa-otpx-spin{to{transform:rotate(360deg)}}@keyframes upay-mfa-otpx-shake{10%,90%{transform:translate(-2px)}20%,80%{transform:translate(3px)}30%,50%,70%{transform:translate(-5px)}40%,60%{transform:translate(5px)}}@keyframes upay-mfa-otpx-draw{to{stroke-dashoffset:0}}@media (max-width: 360px){.upay-mfa-otpx-wrap{gap:5px;height:48px}.upay-mfa-otpx-box{width:clamp(30px,10.5vw,36px);height:46px;font-size:18px}.upay-mfa-otpx-result{font-size:13px}}@media (prefers-reduced-motion: reduce){.upay-mfa-otpx *,.upay-mfa-otpx *:before,.upay-mfa-otpx *:after{transition-duration:.01ms!important;animation-duration:.01ms!important}.upay-mfa-otpx-spin{animation-duration:1.8s!important}}