/* quantity stepper, scan search suggestions, camera countdown */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.stepper button{width:40px;height:40px;border:0;background:var(--soft);color:var(--primary);font-size:22px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s,transform .12s}
.stepper button:hover{background:color-mix(in srgb,var(--accent) 30%,var(--soft))}
.stepper button:active{transform:scale(.88)}
.stepper .qty{width:52px;border:0;border-radius:0;text-align:center;font-weight:700;box-shadow:none!important;padding:8px 2px;-moz-appearance:textfield}
.stepper .qty::-webkit-outer-spin-button,.stepper .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.scan .combo{flex:1;min-width:0}
.scan .combo-list{max-height:320px}
.cam-bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin:0 0 8px}
.cam-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left}
.cam-bar i.run{animation:camTimer 3s linear forwards}
@keyframes camTimer{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:700px){
  table.t td .stepper{display:inline-flex;vertical-align:middle}
  table.t td .stepper .qty{display:block;width:54px}
  .stepper button{width:46px;height:46px}
}

/* scan target box: only what is inside is read */
.cam-wrap{position:relative;border-radius:12px;overflow:hidden;background:#000;margin-bottom:8px}
.cam-wrap #cam{border-radius:0;height:170px;display:block}
.cam-frame{position:absolute;left:12%;top:27%;width:76%;height:46%;border:2px solid var(--accent);border-radius:8px;box-shadow:0 0 0 999px rgba(0,0,0,.55);pointer-events:none}
.cam-frame::before,.cam-frame::after{content:'';position:absolute;width:16px;height:16px;border:3px solid #fff}
.cam-frame::before{left:-3px;top:-3px;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
.cam-frame::after{right:-3px;bottom:-3px;border-left:0;border-top:0;border-radius:0 0 8px 0}
.cam-frame i{position:absolute;left:6px;right:6px;top:50%;height:2px;background:#ff3b30;box-shadow:0 0 8px #ff3b30;animation:scanLine 1.2s ease-in-out infinite alternate}
@keyframes scanLine{from{top:12%}to{top:88%}}
@media (max-width:700px){.cam-wrap #cam{height:170px}}

.cam-bar i:not(.run){transform:scaleX(0)}
#camGo:disabled{opacity:.6}