/* Frontend slip style to match screenshot */
.jsb-slip-title{font-size:48px;margin:0 0 18px;color:#222}
.jsb-slip-top{height:80px;margin-bottom:14px}
.jsb-slip-logo{max-width:140px;display:block;margin-bottom:8px}
.jsb-generated{color:#444;margin-bottom:12px}
.jsb-slip-table{width:100%;border-collapse:collapse;background:#fff}
.jsb-slip-table th{background:#fafafa;padding:22px;text-align:left;font-weight:700;border:1px solid #eee}
.jsb-slip-table td{padding:22px;border:1px solid #eee;vertical-align:middle}
.jsb-img-cell img{max-width:120px;height:auto;display:block}
.jsb-qty-cell input{width:80px;padding:8px;font-size:16px}
.jsb-total-label{text-align:left;padding:18px;font-weight:700;background:#fff;border-top:none}
.jsb-total-value{text-align:right;padding:18px;font-weight:700}
@media (max-width:800px){
    .jsb-slip-title{font-size:36px}
    .jsb-slip-table th, .jsb-slip-table td{padding:12px}
}


/* Keypad visible and styled */
#jsb-keypad-modal{display:block;position:relative;box-shadow:none;margin:12px 0;transform:none;left:auto;top:auto;}
.jsb-keypad-modal{background:#ffffff;color:#000;border:1px solid #ddd;padding:12px;border-radius:8px;max-width:320px}
.jsb-keypad-display{background:#fff;color:#000;border:1px solid #ccc;padding:10px;border-radius:6px;text-align:center;font-weight:700}
.jsb-keypad-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.jsb-keypad-grid button{background:#fff;color:#000;border:1px solid #bbb;padding:12px;border-radius:6px;font-weight:700;cursor:pointer}
.jsb-keypad-grid button:hover{background:#f2f2f2}

/* Compact thumbnails */
.jsb-products-compact{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.jsb-product-thumb{width:88px;border:1px solid #eee;border-radius:6px;padding:6px;text-align:center;cursor:pointer;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,0.03);display:flex;flex-direction:column;align-items:center;justify-content:space-between}
.jsb-product-thumb img{width:64px;height:48px;object-fit:cover;border-radius:4px}
.jsb-prod-label{font-size:12px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}
.jsb-prod-price{font-size:12px;font-weight:700;color:#333;margin-top:6px}

/* Hide big logo on page (only used in generated slip) */
.jsb-slip-top img{display:none !important}

/* Buttons */
#jsb-generate-btn{background:#0b74de;color:#fff;border:none;padding:10px 16px;border-radius:6px;font-weight:700;cursor:pointer}
#jsb-generate-btn:hover{background:#095fb3}
#jsb-download-btn{background:#1c7a3a;color:#fff;border:none;padding:10px 16px;border-radius:6px;font-weight:700;cursor:pointer;display:none;margin-left:8px}
#jsb-download-btn:disabled{opacity:0.6;cursor:not-allowed}

/* Selected panel tweaks */
.jsb-selected-panel{min-height:54px;padding:8px;border:1px dashed #e6e6e6;background:#fafafa;border-radius:6px}
.jsb-selected-item{display:flex;gap:8px;align-items:center;padding:6px 4px}
.jsb-selected-item img{width:36px;height:36px;object-fit:cover;border-radius:4px}
.jsb-sel-label{flex:1;font-size:13px;font-weight:600}
.jsb-sel-qty{min-width:36px;text-align:center;font-weight:700}

@media (max-width:600px){
    .jsb-product-thumb{width:72px}
    .jsb-product-thumb img{width:56px;height:40px}
}


/* v8 keypad and selected list styles */
#jsb-keypad-modal.jsb-keypad-modal { display:block !important; margin:12px auto; max-width:480px; position:relative !important; }
.jsb-keypad-modal .jsb-keypad-display { font-size:18px; padding:8px; text-align:center; background:#f5f5f5; margin-bottom:8px; }
.jsb-keypad-modal .jsb-keypad-grid { display:flex; flex-wrap:wrap; justify-content:center; }
.jsb-keypad-modal .jsb-keypad-grid button { background:#222; color:#fff; border:1px solid #333; padding:10px 12px; margin:6px; border-radius:6px; cursor:pointer; min-width:46px; min-height:40px; }
.jsb-keypad-modal .jsb-keypad-grid button:active, .jsb-keypad-modal .jsb-keypad-grid button:focus, .jsb-keypad-modal .jsb-keypad-grid button:hover { background:#111; color:#fff; outline:none; }

#jsb-selected-list { margin-top:10px; }
.jsb-selected-row { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid #eee; }
.jsb-sel-col { padding:0 6px; }
.jsb-sel-img-col { width:60px; }
.jsb-sel-name { flex:1; }
.jsb-sel-qty, .jsb-sel-unit, .jsb-sel-sub { width:90px; text-align:right; }

/* hide large download nodes if present */
#jsb-generate-download, .jsb-generate-download, .jsb-download-big { display:none !important; }