/* t187 OTP verify animation — scoped. Off: alk_otp_anim_off=1 */
html.alk-oa{
  --alk-oa-red:#c8102e;
  --alk-oa-red-d:#8e0b20;
  --alk-oa-green:#16a34a;
  --alk-oa-green-l:#22c55e;
  --alk-oa-green-bg:#ecfdf3;
}
.alk-oa-sr{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
  inset:auto!important;
}
html.alk-oa .alk-oa-sr,
html.alk-oa.alt-lt .aotp-btn.alk-oa-sr,
html.alk-oa.alt-lt .aq-otp-s2 .aq-otp-btn,
html.alk-oa .aq-otp-s2 .aq-otp-btn,
html.alk-oa .aql-card .s2 .aql-btn.go2{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
  inset:auto!important;min-height:0!important;height:1px!important;
  box-shadow:none!important;background:transparent!important;
}
.alk-oa-box{
  container-type:inline-size;
  position:relative;
  display:flex;
  gap:clamp(8px,2.6cqw,12px);
  justify-content:center;
  align-items:center;
  border:0;
  padding:4px 0 6px;
  margin:4px 0 6px;
  min-width:0;
  min-height:58px;
  direction:ltr;
}
.alk-oa-digit{
  position:relative;
  display:block;
  flex:0 0 auto;
  width:clamp(44px,12.4cqw,56px);
  height:clamp(44px,12.4cqw,56px);
  border-radius:16px;
  background:#f7f7f9;
  box-shadow:inset 0 0 0 2px #dcdce1;
  transition:transform 700ms cubic-bezier(.65,0,.2,1),opacity 450ms ease,box-shadow 250ms ease,background 250ms ease;
}
.alk-oa-digit input{
  width:100%;height:100%;
  background:transparent!important;
  border:0!important;
  border-radius:inherit!important;
  padding:0!important;
  margin:0!important;
  outline:none!important;
  box-shadow:none!important;
  color:#1d1d1f!important;
  -webkit-text-fill-color:#1d1d1f;
  font-size:clamp(20px,6.3cqw,26px);
  font-weight:700;
  text-align:center;
  caret-color:var(--alk-oa-red);
  letter-spacing:0!important;
  transition:opacity 230ms ease,color 250ms ease;
}
.alk-oa-digit input::selection{background:#c8102e33}
.alk-oa-trace{
  position:absolute;inset:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;opacity:0;
  transition:opacity 250ms ease;
}
.alk-oa-trace rect{
  fill:none;stroke:var(--alk-oa-red);stroke-width:3.2;
  stroke-linecap:round;stroke-dasharray:26 74;stroke-dashoffset:18;
}
.alk-oa-box[data-state="idle"] .alk-oa-digit:focus-within{
  background:#fff;
}
.alk-oa-box[data-state="idle"] .alk-oa-digit:focus-within .alk-oa-trace{opacity:1}
.alk-oa-box[data-state="idle"] .alk-oa-digit:focus-within .alk-oa-trace rect{
  stroke-dasharray:20 80;
  animation:alk-oa-trace 2800ms linear infinite;
}
.alk-oa-result{
  position:absolute!important;
  left:50%!important;top:50%!important;
  width:84px!important;height:84px!important;
  margin:-42px 0 0 -42px!important;
  flex:none;
  z-index:2;
  border-radius:22px;
  background:var(--alk-oa-green-bg);
  opacity:0;
  transform:scale(.76);
  transition:opacity 400ms ease,transform 650ms cubic-bezier(.16,1,.3,1),background 250ms ease;
  pointer-events:none;
}
.alk-oa-result-border{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.alk-oa-result-border rect{
  fill:none;stroke:var(--alk-oa-green);stroke-width:3.3;
  stroke-dasharray:100;stroke-dashoffset:100;
  filter:drop-shadow(0 0 3px #22c55e66);
  transition:stroke-dashoffset 800ms cubic-bezier(.4,0,.2,1);
}
.alk-oa-spinner,.alk-oa-check{
  position:absolute;width:46%;height:46%;top:27%;left:27%;
  fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:5;
}
.alk-oa-spinner{stroke:var(--alk-oa-green);opacity:0;animation:alk-oa-spin 850ms linear infinite;transition:opacity 200ms ease}
.alk-oa-spinner circle{stroke-dasharray:14 81}
.alk-oa-check{stroke:#fff}
.alk-oa-check path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 500ms cubic-bezier(.16,1,.3,1)}
.alk-oa-box[data-state="tracing"] .alk-oa-trace{opacity:1}
.alk-oa-box[data-state="tracing"] .alk-oa-trace rect{stroke:var(--alk-oa-green);animation:alk-oa-trace 700ms linear infinite}
.alk-oa-box[data-state="tracing"] .alk-oa-digit,
.alk-oa-box[data-state="merging"] .alk-oa-digit{
  background:var(--alk-oa-green-bg);
  box-shadow:inset 0 0 0 2px var(--alk-oa-green-l);
}
.alk-oa-box[data-state="tracing"] input{color:var(--alk-oa-green)!important;-webkit-text-fill-color:var(--alk-oa-green)}
.alk-oa-box[data-state="merging"] .alk-oa-digit{
  transform:translateX(calc((2 - var(--i)) * 58px)) scale(.94);
  opacity:0;
}
.alk-oa-box[data-state="merging"] input{opacity:0}
.alk-oa-box[data-state="verifying"] .alk-oa-digit,
.alk-oa-box[data-state="success"] .alk-oa-digit{visibility:hidden}
.alk-oa-box[data-state="verifying"] .alk-oa-result,
.alk-oa-box[data-state="success"] .alk-oa-result{opacity:1;transform:scale(1)}
.alk-oa-box[data-state="verifying"] .alk-oa-result-border rect,
.alk-oa-box[data-state="success"] .alk-oa-result-border rect{stroke-dashoffset:0}
.alk-oa-box[data-state="verifying"] .alk-oa-spinner{opacity:1}
.alk-oa-box[data-state="success"] .alk-oa-result{background:var(--alk-oa-green);transform:scale(.92)}
.alk-oa-box[data-state="success"] .alk-oa-result-border rect{stroke:var(--alk-oa-green)}
.alk-oa-box[data-state="success"] .alk-oa-check path{stroke-dashoffset:0;transition-delay:150ms}
.alk-oa-box.is-err .alk-oa-digit{
  background:#fff6f6;
  box-shadow:inset 0 0 0 2px #e5484d;
  animation:alk-oa-shake .35s ease;
}
@keyframes alk-oa-trace{to{stroke-dashoffset:-82}}
@keyframes alk-oa-spin{to{transform:rotate(360deg)}}
@keyframes alk-oa-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* keep resend / titles in Alokala red */
html.alk-oa .aotp-re button,
html.alk-oa .aotp-edit,
html.alk-oa .aq-otp-resend{color:var(--alk-oa-red)}
/* login-theme must not recolor the animated boxes */
html.alk-oa.alt-lt .alk-oa-digit,
html.alk-oa.alt-lt .alk-oa-digit input,
html.alt-lt .alk-oa-digit input,
html.alt-lt .alk-oa-box .alk-oa-digit input{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#1d1d1f!important;
  -webkit-text-fill-color:#1d1d1f;
  caret-color:#c8102e;
}
html.alk-oa.alt-lt .alk-oa-digit,
html.alt-lt .alk-oa-digit{
  background:#f7f7f9!important;
  box-shadow:inset 0 0 0 2px #dcdce1!important;
}
html.alk-oa.alt-lt .alk-oa-box[data-state="idle"] .alk-oa-digit:focus-within,
html.alt-lt .alk-oa-box[data-state="idle"] .alk-oa-digit:focus-within{background:#fff!important}
html.alk-oa.alt-lt .alk-oa-box[data-state="tracing"] .alk-oa-digit,
html.alk-oa.alt-lt .alk-oa-box[data-state="merging"] .alk-oa-digit,
html.alt-lt .alk-oa-box[data-state="tracing"] .alk-oa-digit,
html.alt-lt .alk-oa-box[data-state="merging"] .alk-oa-digit{
  background:#ecfdf3!important;
  box-shadow:inset 0 0 0 2px #22c55e!important;
}
html.alk-oa.alt-lt .alk-oa-box[data-state="tracing"] input,
html.alt-lt .alk-oa-box[data-state="tracing"] input{
  color:#16a34a!important;
  -webkit-text-fill-color:#16a34a;
}
html.alk-oa.alt-lt .alk-oa-box.is-err .alk-oa-digit,
html.alt-lt .alk-oa-box.is-err .alk-oa-digit{
  background:#fff6f6!important;
  box-shadow:inset 0 0 0 2px #e5484d!important;
}
html.alk-oa .aotp .ais-otp-step2 .alk-oa-box{margin:10px 0 8px}
html.alk-oa .aq-otp-step2 .alk-oa-box{margin:8px auto 12px}
@media(prefers-reduced-motion:reduce){
  .alk-oa-box,.alk-oa-box *{
    animation-duration:1ms!important;
    animation-iteration-count:1!important;
    transition-duration:1ms!important;
    transition-delay:0ms!important;
  }
  .alk-oa-box[data-state="merging"] .alk-oa-digit{transform:none}
}

.alk-oa-box:not([data-state="idle"]) .alk-oa-digit input{caret-color:transparent!important}
html.alk-oa .ais-otp-step2:has(.alk-oa-box[data-state="verifying"]) .aotp-re,
html.alk-oa .ais-otp-step2:has(.alk-oa-box[data-state="success"]) .aotp-re,
html.alk-oa .aq-otp-step2:has(.alk-oa-box[data-state="verifying"]) .aq-otp-count,
html.alk-oa .aq-otp-step2:has(.alk-oa-box[data-state="success"]) .aq-otp-count,
html.alk-oa .aq-otp-step2:has(.alk-oa-box[data-state="verifying"]) .aq-otp-actions,
html.alk-oa .aq-otp-step2:has(.alk-oa-box[data-state="success"]) .aq-otp-actions{visibility:hidden}