/* Shared numeric entry surface for desktop, tablet and phone. */
.modal-overlay:has(.price-keypad-grid) { padding:12px; box-sizing:border-box; }
.modal-overlay:has(.price-keypad-grid) .modal-content { width:100%; max-width:390px!important; max-height:calc(100dvh - 24px); overflow:auto; border:1px solid #e4e7eb; border-radius:10px!important; background:#fff; box-shadow:0 12px 40px #1822301a; }
.modal-overlay:has(.price-keypad-grid) .modal-header { background:#fff; color:#29233d; border-bottom:1px solid #edf0f2; padding:14px 18px; }
.modal-overlay:has(.price-keypad-grid) .modal-body { padding:16px!important; }
.modal-overlay:has(.price-keypad-grid) .modal-title { font-size:16px; font-weight:600; }
#priceDisplay,#drawerStartDisplay,#squareCashReceived,#closeDrawerCounted,.promo-keypad output { color:#111!important; background:#fff!important; border:0!important; padding:12px 0 20px!important; margin:0!important; font-size:clamp(32px,8vw,44px)!important; font-weight:400!important; text-align:center; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; line-height:1.2; }
.price-keypad-grid,.promo-keys { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:12px!important; width:100%; max-width:none!important; margin:0!important; }
.price-keypad-grid .key-button,.promo-keys button,#keypad .key { min-width:0; min-height:52px; height:76px!important; padding:0!important; border:1px solid transparent!important; border-radius:4px!important; background:#eeecf6!important; color:#29233d!important; font-size:25px!important; font-weight:400!important; box-shadow:none!important; touch-action:manipulation; cursor:pointer; }
.price-keypad-grid button:active,.promo-keys button:active,#keypad .key:active { background:#e2daf8!important; transform:none!important; }
.price-keypad-grid button:focus-visible,.promo-keypad button:focus-visible,#keypad .key:focus-visible { outline:3px solid #7c50f5; outline-offset:2px; }
.price-keypad-grid [data-action="backspace"],.promo-keys [data-key="⌫"] { grid-column:3; grid-row:4; }
.price-keypad-grid [data-action="sign"],.promo-keys [data-key="sign"] { grid-column:3; grid-row:5; }
.price-keypad-grid [data-action="clear"],.promo-keys [data-key="clear"] { grid-column:1; grid-row:4; }
.price-keypad-grid [data-action="backspace"],.price-keypad-grid [data-action="sign"],.price-keypad-grid [data-action="clear"],.promo-keys [data-key="⌫"],.promo-keys [data-key="sign"],.promo-keys [data-key="clear"] { font-size:22px!important; background:#fff!important; }
.price-keypad-grid [data-value="0"],.promo-keys [data-key="0"] { grid-row:4; grid-column:2; }
.price-keypad-grid [data-value="00"],.price-keypad-grid [data-action="doublezero"],.promo-keys [data-key="00"] { grid-row:5; grid-column:2; }
.price-keypad-grid [data-value="."],.promo-keys [data-key="."] { grid-row:5; grid-column:1; }
.price-keypad-grid .action:not([data-action]),#verifyPinBtn,#drawerStartConfirmBtn,#squareCashConfirmBtn,#closeDrawerSaveBtn,.promo-keypad footer button:last-child { grid-column:1 / -1!important; width:100%; min-height:52px; margin-top:8px; background:#7c50f5!important; border:1px solid #7c50f5!important; border-radius:6px!important; color:#fff!important; font-size:16px!important; font-weight:600!important; touch-action:manipulation; }
.price-keypad-grid:has(.pin-key) [data-value="0"] { grid-column:2; }
.promo-keypad { width:min(370px,calc(100vw - 24px)); padding:16px; box-sizing:border-box; border:1px solid #e4e7eb; border-radius:10px; box-shadow:0 12px 40px #1822301a; }
.promo-keypad header { background:#fff; color:#29233d; padding:0 0 12px; }
.promo-keypad header button { color:#29233d; min-width:44px; min-height:44px; }
.promo-keypad footer { margin:8px 0 0; border:0; }
.promo-keypad footer button[data-key="cancel"] { display:none; }
#keypad { gap:8px; }
@media(max-width:380px),(max-height:600px) { .price-keypad-grid,.promo-keys { gap:6px!important; } .price-keypad-grid .key-button,.promo-keys button,#keypad .key { height:48px!important; min-height:44px; font-size:22px!important; } .modal-overlay:has(.price-keypad-grid) .modal-body { padding:12px!important; } }
#modalGiftCardAmount,#modalPercentageValue { width:100%; box-sizing:border-box; padding:12px 0; border:0; background:#fff; color:#111; font-size:36px; text-align:center; font-variant-numeric:tabular-nums; }
#discountInputModal:has(.price-keypad-grid) #confirmDiscountApply { width:100%; min-height:52px; background:#7c50f5; color:#fff; border:0; border-radius:6px; }
#drawerStartClearBtn { display:none; }
#squareCashStep > div:has(> #squareCashConfirmBtn) { flex-direction:column-reverse; }
#squareCashBackBtn { min-height:44px; }

/* The reference uses a quiet three-column lavender surface and a purple outline action. */
.price-keypad-grid .action:not([data-action]) { grid-row:6; }
.price-keypad-grid [data-action="backspace"],.promo-keys [data-key="⌫"] { border:3px solid #443165!important; background:#fff!important; }
#keypad [data-key="Clear"] { grid-row:4; grid-column:1; background:#fff!important; }
#keypad [data-key="0"] { grid-row:4; grid-column:2; }
#keypad [data-key="Delete"] { grid-row:4; grid-column:3; background:#fff!important; border:3px solid #443165!important; }
#phoneDisplay { color:#515365; font-weight:400; font-variant-numeric:tabular-nums; }
.pos-number-dialog { box-sizing:border-box; width:min(460px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); margin:auto; padding:20px; border:1px solid #e9e6f0; border-radius:12px; background:#fff; color:#29233d; box-shadow:0 18px 60px #28203826; overflow:auto; font-family:Inter,system-ui,sans-serif; }
.pos-number-dialog::backdrop { background:#17112355; }
.pos-number-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; }
.pos-number-dialog button { font:inherit; cursor:pointer; touch-action:manipulation; }
.pos-number-dialog header button { width:44px; height:44px; border:0; border-radius:4px; color:#443165; background:#eeecf6; font-size:24px; }
.pos-number-dialog output { display:block; padding:22px 0 28px; text-align:center; color:#515365; font-size:clamp(30px,8vw,48px); font-weight:400; line-height:1.2; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.pos-number-keys { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.pos-number-keys button { min-width:0; min-height:70px; border:0; border-radius:4px; background:#eeecf6; color:#29233d; font-size:24px; font-weight:400; }
.pos-number-keys button[data-key="clear"] { background:#fff; }
.pos-number-keys button[data-key="confirm"] { margin:6px 18px; min-height:58px; background:#fff; border:4px solid #443165; border-radius:10px; font-size:34px; }
.pos-number-dialog button:hover { filter:brightness(.97); }
.pos-number-dialog button:active { background:#e2daf8; }
.pos-number-dialog button:focus-visible { outline:3px solid #7c50f5; outline-offset:2px; }
.pos-number-tools { display:flex; gap:8px; margin-top:12px; }
.pos-number-tools button { flex:1; min-height:44px; border:1px solid #eeecf6; border-radius:4px; background:#fff; color:#443165; font-size:20px; }
.pos-number-error { color:#b42318; font-size:14px; margin:12px 0 0; }
.pos-number-error:empty { display:none; }
.pos-number-save { width:100%; min-height:48px; margin-top:16px; border:0; border-radius:4px; background:#7c50f5; color:#fff; font-size:15px; }
@media(max-width:380px),(max-height:650px) { .pos-number-dialog { padding:12px; } .pos-number-keys { gap:8px; } .pos-number-keys button { min-height:48px; } .pos-number-keys button[data-key="confirm"] { min-height:44px; margin:2px 14px; } .pos-number-dialog output { padding:12px 0 16px; } }