/* Shared quantity wheel. Form owners retain their values, bounds and saves. */
[data-quantity] { cursor:pointer; }
.quantity-picker { --quantity-paper:#f8f9fc; --quantity-ink:#182a3a; --quantity-muted:#687888; --quantity-band:#e8edf4; --quantity-blue:#0087d6; inset:auto 0 max(12px,env(safe-area-inset-bottom)); margin:0 auto; padding:0; width:min(440px,calc(100vw - 20px)); max-height:calc(100dvh - 24px); overflow-x:hidden; overflow-y:auto; overscroll-behavior-x:none; border:1px solid #d4dee8; border-radius:22px; background:var(--quantity-paper); color:var(--quantity-ink); box-shadow:0 18px 80px #001c4566; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
[data-theme="agilent-web-dark"] .quantity-picker { --quantity-paper:#152534; --quantity-ink:#eaf4fc; --quantity-muted:#a7bdcf; --quantity-band:#263b4d; --quantity-blue:#6bcaff; border-color:#395269; }
body:has(#scanCameraPanel:not([hidden])) .quantity-picker { --quantity-paper:#0e151b; --quantity-ink:#f2f6fa; --quantity-muted:#abb9c7; --quantity-band:#24333f; --quantity-blue:#70d0ff; border-color:#34424f; color-scheme:dark; }
.quantity-picker:not([open]) { display:none; }
.quantity-picker-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 10px 8px; border-bottom:1px solid color-mix(in srgb,var(--quantity-muted) 20%,transparent); }
.quantity-picker-header h2 { margin:0; font-size:18px; font-weight:650; }
.quantity-picker-header button { min-width:64px; min-height:44px; padding:8px; border:0; border-radius:10px; background:transparent; color:var(--quantity-blue); box-shadow:none; font-size:16px; }
#quantityPickerDone { font-weight:700; }
.quantity-picker-header button:focus-visible, .quantity-picker-wheel:focus-visible { outline:3px solid var(--quantity-blue); outline-offset:-3px; }
.quantity-picker-context { margin:14px 22px 0; color:var(--quantity-muted); text-align:center; font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.quantity-picker-viewport { position:relative; width:100%; height:240px; margin:8px 0; overflow:hidden; }
.quantity-picker-band { position:absolute; z-index:0; left:16px; right:16px; top:96px; height:48px; border-radius:12px; background:var(--quantity-band); pointer-events:none; }
.quantity-picker-wheel { position:relative; z-index:1; height:240px; padding:96px 0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-y; scroll-snap-type:y mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent); }
.quantity-picker-wheel::-webkit-scrollbar { display:none; }
.quantity-picker-wheel > div { display:flex; align-items:center; justify-content:center; height:48px; min-height:48px; scroll-snap-align:center; color:var(--quantity-ink); font-size:28px; line-height:1; font-variant-numeric:tabular-nums; transform-origin:center; user-select:none; cursor:pointer; }
.quantity-picker-wheel > [aria-selected="true"] { color:var(--quantity-blue); font-size:32px; font-weight:650; }
.quantity-picker-wheel > div > span { display:block; transform-origin:center; }
.quantity-picker-wheel > .quantity-picker-long-value { font-size:20px; }
.quantity-picker-wheel > .quantity-picker-long-value[aria-selected="true"] { font-size:20px; }
.quantity-picker-footer { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:4px; padding:0 16px 20px; color:var(--quantity-muted); font-size:12px; overflow-wrap:anywhere; }
#quantityPickerError { margin:0; color:#db4854; text-align:center; font-size:13px; }
#quantityPickerError:empty { display:none; }
#quantityPickerValue { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
button.return-qty-readout[data-quantity] { min-height:40px; border:0; border-radius:8px; background:transparent; color:inherit; box-shadow:none; }
.spl-qty-stepper button.spl-quantity-value { min-width:44px; padding-inline:8px; }
@media (max-height:480px) { .quantity-picker { inset:8px 0; margin:auto; max-height:calc(100dvh - 16px); } .quantity-picker-header { padding-block:4px; } .quantity-picker-context { margin-top:5px; font-size:12px; } .quantity-picker-viewport { margin-block:0; } .quantity-picker-footer { padding-bottom:8px; } }
@media (prefers-reduced-motion:reduce) { .quantity-picker-wheel { scroll-behavior:auto; } }