.barcode-input {
     font-size: 16px;
     height: 40px;
     padding: 4px;
     background-color: #ffffff !important;
     border: 2px solid #d9ff00 !important;
     font-weight: bold;
 }

 .net-amount-display {
     font-size: 54px !important;
     color: #e5ff00 !important;
     font-weight: 600;
     text-align: center;
     padding-top: 20px;
     padding-bottom: 15px;
 }

 .clear-input-box {
     /* font-size: 28px; */
     /* height: 40px; */
     background-color: lightpink;
     border: 2px solid #f34b21;
     font-weight: bold;
 }

 /* Payment Modal Styles */
 .payment-summary {
     background-color: #f8f9fa;
     border-radius: 5px;
     padding: 15px;
     margin-bottom: 20px;
 }

 .payment-row {
     margin-bottom: 10px;
     padding-bottom: 10px;
     border-bottom: 1px solid #dee2e6;
 }

 .amount-input {
     font-size: 24px;
     font-weight: bold;
     text-align: right;
 }

 .checkout-btn {
     height: 80px;
     font-size: 24px;
     font-weight: bold;
 }

 .negative-balance {
     color: #dc3545;
     font-weight: bold;
 }

 .modal-keypad-btn {
     height: 50px;
     font-size: 18px;
     font-weight: bold;
     background-color: #6c757d;
     color: white;
 }

 .payment-modal {
     background-color: #333333;
 }

 .payment-input {
     font-size: 20px;
     height: 50px;
     background: linear-gradient(135deg, #e3f2fd, #bbdefb);
     border: 2px solid #2196f3;
     font-weight: bold;
 }

 /* Focus styles for better UX */
 .payment-input:focus {
     box-shadow: 0 0 0 0.05rem rgba(13, 110, 253, 0.25);
     border-color: #86b7fe;
     outline: 0;
 }