.pf-card{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:10px 0;border:1px solid transparent;border-radius:12px;position:relative;overflow:hidden;animation:pf-in .35s cubic-bezier(.2,.8,.2,1) both}
.pf-text{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.pf-text strong{font-size:14px;font-weight:700;color:#fff}
.pf-text small{font-size:12.5px;line-height:1.4;opacity:.88;overflow-wrap:anywhere}
.pf-icon{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:16px;font-weight:800;position:relative}
.pf-ok{background:rgba(34,197,139,.12);border-color:rgba(34,197,139,.4)}
.pf-ok .pf-icon{background:#22c58b;color:#04281c;animation:pf-pop .5s cubic-bezier(.2,1.5,.4,1) both}
.pf-wait{background:rgba(59,109,240,.13);border-color:rgba(59,109,240,.45)}
.pf-wait .pf-icon{background:radial-gradient(circle,#fff 0 4px,#3b6df0 5px)}
.pf-wait .pf-icon::before,.pf-wait .pf-icon::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #3b6df0;animation:pf-ring 1.8s ease-out infinite}
.pf-wait .pf-icon::after{animation-delay:.9s}
.pf-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#3b6df0;transform-origin:left center;animation:pf-count 120s linear forwards}
.pf-warn{background:rgba(245,166,35,.12);border-color:rgba(245,166,35,.45)}
.pf-warn .pf-icon{background:#f5a623;color:#2a1a00}
.pf-error{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.45);animation:pf-in .35s cubic-bezier(.2,.8,.2,1) both,pf-shake .4s .15s}
.pf-error .pf-icon{background:#ef4444;color:#fff}
.pf-busy{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.pf-spin{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:#fff;animation:pf-rot .8s linear infinite}
.cashierForm,.cashierSubtitle{animation:pf-fade .3s ease both}
@keyframes pf-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes pf-fade{from{opacity:0}to{opacity:1}}
@keyframes pf-pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pf-ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.6);opacity:0}}
@keyframes pf-count{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes pf-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes pf-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pf-card,.pf-card *,.pf-card *::before,.pf-card *::after,.cashierForm,.cashierSubtitle{animation:none!important}}