/*! adisyo · Restaurant-Kassensystem · https://adisyo.de · https://adisyo.app · (c) adisyo */
.otpw{position:relative;margin:4px 0 18px}
.otp{position:relative;display:flex;gap:10px;justify-content:center;min-height:64px;align-items:center}
.otp i{position:relative;width:52px;height:62px;flex:0 0 auto;border-radius:15px;border:1.5px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:27px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s,transform .5s cubic-bezier(.3,1.3,.5,1),opacity .35s}
.otp i.act{border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 20%,transparent)}
.otp i.act::after{content:"";width:2px;height:28px;border-radius:2px;background:var(--gold);animation:otpBlink 1s steps(1) infinite}
.otp i.on{border-color:color-mix(in srgb,var(--gold) 60%,var(--line));box-shadow:inset 0 -3px 0 var(--gold);animation:otpPop .28s cubic-bezier(.3,1.6,.5,1)}
.otp.bad i{border-color:#e5484d;box-shadow:inset 0 -3px 0 #e5484d;color:#c0373c}
.otp.bad{animation:otpShake .45s}
.otp.stack i{transform:translateX(var(--sx,0)) rotate(var(--sr,0));box-shadow:0 10px 24px -12px rgba(0,0,0,.45);border-color:var(--gold)}
.otp.stack i:nth-child(odd){transition-delay:.04s}
.otp.stack{animation:otpFloat 1s ease-in-out .5s infinite}
.otp.gone i{opacity:0;transform:translateX(var(--sx,0)) scale(.6)}
.otpok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .35s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.otpok.on{opacity:1;transform:none}
.otpok b{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 0 0 6px rgba(34,197,94,.18),0 0 40px 6px rgba(34,197,94,.45);animation:otpGlow 1.4s ease-in-out infinite}
.otpok svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;animation:otpDraw .45s .15s forwards}
.otpmsg{min-height:20px;margin:10px 0 0;text-align:center;font-size:13.5px;font-weight:600;color:#c0373c}
.otpmsg.good{color:#16a34a}
.otpin{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;z-index:2;cursor:text}
.otpalt{display:block;margin:12px auto 0;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;cursor:pointer}
@keyframes otpBlink{50%{opacity:0}}
@keyframes otpPop{from{transform:scale(.82)}}
@keyframes otpShake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}
@keyframes otpFloat{50%{transform:translateY(-4px)}}
@keyframes otpGlow{50%{box-shadow:0 0 0 9px rgba(34,197,94,.1),0 0 56px 10px rgba(34,197,94,.55)}}
@keyframes otpDraw{to{stroke-dashoffset:0}}
@media (max-width:380px){.otp{gap:7px}.otp i{width:44px;height:54px;font-size:23px}}
@media (prefers-reduced-motion:reduce){.otp i,.otp.stack,.otpok b,.otp i.act::after{animation:none!important;transition:none!important}}
.otp:has(i:nth-child(7)){gap:7px}.otp:has(i:nth-child(7)) i{width:40px;height:54px;font-size:22px;border-radius:13px}
@media (max-width:420px){.otp{gap:7px}.otp i{width:44px;height:56px;font-size:23px}.otp:has(i:nth-child(7)) i{width:34px;height:48px;font-size:19px}}