/* 🚀 POS 2030 Glass UI - Unified Fintech Slate Theme */
:root { --glass: rgba(15, 23, 42, 0.88); --glass-light: rgba(30, 41, 59, 0.5); --border: rgba(148, 163, 184, 0.15); --accent: #38bdf8; --success: #2dd4bf; --text: #f1f5f9; --text-muted: #94a3b8; }

/* Global & Layout */
body { background: url('https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=1920&auto=format&fit=crop') no-repeat center fixed !important; background-size: cover !important; color: var(--text); font-family: 'Inter', sans-serif; margin: 0; }
::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
.glass-panel { background: var(--glass) !important; backdrop-filter: blur(20px) saturate(160%); border: 1px solid var(--border) !important; border-radius: 28px !important; box-shadow: 0 20px 50px rgba(0,0,0,0.4) !important; overflow: hidden; height: 100%; display: flex; flex-direction: column; }
#sidebar { background: var(--glass) !important; backdrop-filter: blur(20px) saturate(160%); border-right: 1px solid var(--border); }
.bill-header { background: rgba(0,0,0,0.3); padding: 20px; font-weight: 700; border-bottom: 1px solid var(--border); }
.total-display { background: rgba(0,0,0,0.5); color: var(--success); font-size: 2rem; font-weight: 900; padding: 20px; text-align: right; border-top: 1px solid var(--border); }

/* Buttons & Navigation */
.cat-btn-2030 { background: var(--glass-light); border: 1px solid var(--text) !important; color: white; border-radius: 16px; padding: 15px; margin-bottom: 10px; width: 100%; font-weight: 600; text-align: center; transition: all 0.3s ease; }
.cat-btn-2030:hover, .cat-btn-2030.active { background: var(--accent) !important; border-color: transparent; box-shadow: 0 10px 20px rgba(56, 189, 248, 0.3); transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: #0f172a; border: none; font-weight: 700; border-radius: 12px; transition: 0.3s; }
.btn-accent:hover { background: #7dd3fc; color: #0f172a; transform: translateY(-2px); }

/* Product Cards */
.product-card-2030 { background: var(--glass-light) !important; border: 1px solid var(--text) !important; border-radius: 22px !important; min-height: 140px; display: flex; flex-direction: column; justify-content: center; position: relative; padding: 15px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; color: white; }
.product-card-2030:hover { background: rgba(255,255,255,0.1) !important; transform: translateY(-8px) scale(1.02); border-color: var(--accent) !important; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.p-name-2030 { font-weight: 600; font-size: 0.95rem; margin-bottom: 8px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.p-price-2030 { color: var(--success); font-weight: 900; font-size: 1.2rem; }

/* Packet & Delivery Cards */
.packet-card { background: var(--glass-light); border: 1px solid var(--border); border-radius: 16px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; }
.packet-card:hover { transform: translateY(-5px); border-color: var(--accent); background: rgba(56, 189, 248, 0.08); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); }
.packet-icon { width: 42px; height: 42px; background: rgba(56, 189, 248, 0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* Keypad Grid & Buttons */
.keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 5px; }
.keypad-btn { background: rgba(8, 7, 7, 0.87); border: 1px solid var(--border); border-radius: 18px; padding: 18px; font-size: 1.4rem; font-weight: 800; color: rgba(255, 255, 255, 0.9); transition: all 0.3s ease; cursor: pointer; }
.keypad-btn:hover { background: var(--accent) !important; border-color: rgba(255, 255, 255, 0.3); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(56, 189, 248, 0.4); }

/* Badges & Utilities */
.variant-tag-2030 { position: absolute; top: 12px; right: 12px; background: #f17863; font-size: 0.65rem; padding: 4px 10px; border-radius: 50px; font-weight: 900; text-transform: uppercase; box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
.bg-glass-accent { background: rgba(56, 189, 248, 0.15); } .text-accent { color: var(--accent) !important; } .text-indigo { color: var(--accent) !important; }
.bg-indigo { background: var(--accent) !important; } .fw-black { font-weight: 900; } .extra-small { font-size: 0.75rem; } .table-timer { font-family: monospace; }
.nav-section-title span { background: #000; } .cursor-pointer { cursor: pointer; }

/* Media Queries */
@media print { body * { visibility: hidden; } #printArea, #printArea * { visibility: visible; } #printArea { position: absolute; left: 0; top: 0; width: 100%; } }