/* ═══════════════════════════════════════════════════════════════
   DESI DHABA IRELAND — Complete Responsive Stylesheet v2
   PWA • 5 Restaurant Themes • Mobile/Tablet/Desktop
   FIXES: Bigger POS icons, complete online ordering styles,
          rider app, deals, categories, hero, sticky cart
   ═══════════════════════════════════════════════════════════════ */

/* ─── RESET & BASE ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{font-family:'DM Sans','Segoe UI',system-ui,sans-serif;line-height:1.5;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:var(--bg);color:var(--text);transition:background .3s,color .3s}
input,select,textarea,button{font-family:inherit;font-size:inherit}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ─── PWA SAFE AREAS ─────────────────────────────────────────── */
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.header{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
.mobile-nav{padding-bottom:max(8px,env(safe-area-inset-bottom))}

/* ─── 5 RESTAURANT-BRAND THEMES (CSS Variables) ──────────────── */
:root,[data-theme="kfc"]{
  --bg:#F5F0EB;--bg2:#EDE6DF;--bg3:#DDD4CA;--card:#FFF;--card-alt:#FBF8F5;
  --primary:#E4002B;--primary-light:#FF1744;--primary-bg:rgba(228,0,43,.06);
  --secondary:#1A1A1A;--secondary-bg:rgba(26,26,26,.05);
  --accent:#C8102E;--accent-bg:rgba(200,16,46,.06);
  --danger:#D50000;--danger-bg:rgba(213,0,0,.06);
  --blue:#1565C0;--blue-bg:rgba(21,101,192,.06);
  --green:#27AE60;--green-bg:rgba(39,174,96,.1);
  --text:#1A1A1A;--text-mid:#3D3D3D;--text-dim:#757575;--text-faint:#ADADAD;
  --border:#E0D8D0;--border-light:#EDE8E2;
  --shadow:0 2px 6px rgba(228,0,43,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(228,0,43,.1);
  --header-bg:#FFF;--sidebar:#1A1A1A;--side-text:#CCC;--side-active:#E4002B;
}
[data-theme="golden"]{
  --bg:#FFF8E7;--bg2:#FFF0CC;--bg3:#FFE4A8;--card:#FFF;--card-alt:#FFFCF2;
  --primary:#DA291C;--primary-light:#E8453A;--primary-bg:rgba(218,41,28,.06);
  --secondary:#FFC72C;--secondary-bg:rgba(255,199,44,.12);
  --accent:#264F36;--accent-bg:rgba(38,79,54,.07);
  --danger:#DA291C;--danger-bg:rgba(218,41,28,.06);
  --blue:#0063A8;--blue-bg:rgba(0,99,168,.06);
  --text:#27251F;--text-mid:#4A4740;--text-dim:#7A7568;--text-faint:#ADA895;
  --border:#F0E4C8;--border-light:#F7EFDA;
  --shadow:0 2px 6px rgba(218,41,28,.06),0 1px 2px rgba(0,0,0,.03);
  --shadow-lg:0 8px 24px rgba(255,199,44,.12);
  --header-bg:#FFF;--sidebar:#27251F;--side-text:#D4C8A8;--side-active:#FFC72C;
}
[data-theme="fiesta"]{
  --bg:#FAF5FC;--bg2:#F3EAF6;--bg3:#E8D9EE;--card:#FFF;--card-alt:#FDF9FE;
  --primary:#702082;--primary-light:#8E24AA;--primary-bg:rgba(112,32,130,.07);
  --secondary:#E91E8C;--secondary-bg:rgba(233,30,140,.08);
  --accent:#00B8D4;--accent-bg:rgba(0,184,212,.07);
  --danger:#F44336;--danger-bg:rgba(244,67,54,.06);
  --blue:#3949AB;--blue-bg:rgba(57,73,171,.06);
  --text:#2D0A3A;--text-mid:#5C2D73;--text-dim:#8B6B9E;--text-faint:#B8A3C5;
  --border:#E2D5EA;--border-light:#F0E8F4;
  --shadow:0 2px 6px rgba(112,32,130,.06),0 1px 2px rgba(0,0,0,.03);
  --shadow-lg:0 8px 24px rgba(112,32,130,.1);
  --header-bg:#FFF;--sidebar:#2D0A3A;--side-text:#C9A0D8;--side-active:#E91E8C;
}
[data-theme="flame"]{
  --bg:#F4F1ED;--bg2:#EBE7E1;--bg3:#DDD8D0;--card:#FFF;--card-alt:#FAF9F7;
  --primary:#1A1A1A;--primary-light:#333;--primary-bg:rgba(26,26,26,.05);
  --secondary:#FF5A00;--secondary-bg:rgba(255,90,0,.08);
  --accent:#D32F2F;--accent-bg:rgba(211,47,47,.06);
  --danger:#D32F2F;--danger-bg:rgba(211,47,47,.06);
  --blue:#0277BD;--blue-bg:rgba(2,119,189,.06);
  --text:#1A1A1A;--text-mid:#404040;--text-dim:#757575;--text-faint:#A8A198;
  --border:#DDD6CC;--border-light:#EBE6DF;
  --shadow:0 2px 6px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(255,90,0,.08);
  --header-bg:#FFF;--sidebar:#1A1A1A;--side-text:#B0A89C;--side-active:#FF5A00;
}
[data-theme="mughal"]{
  --bg:#0D0A07;--bg2:#161210;--bg3:#201A16;--card:#1A1410;--card-alt:#1E1812;
  --primary:#D4A12A;--primary-light:#E8B940;--primary-bg:rgba(212,161,42,.09);
  --secondary:#C0392B;--secondary-bg:rgba(192,57,43,.09);
  --accent:#27AE60;--accent-bg:rgba(39,174,96,.09);
  --danger:#E74C3C;--danger-bg:rgba(231,76,60,.08);
  --blue:#3498DB;--blue-bg:rgba(52,152,219,.08);
  --text:#F0E6D2;--text-mid:#C4B098;--text-dim:#8A7A68;--text-faint:#5A4D40;
  --border:#2A2218;--border-light:#332A1E;
  --shadow:0 2px 6px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
  --shadow-lg:0 8px 24px rgba(212,161,42,.1);
  --header-bg:#1A1410;--sidebar:#0A0705;--side-text:#A89070;--side-active:#D4A12A;
}

/* ─── TYPOGRAPHY ──────────────────────────────────────────────── */
.ff-display{font-family:'Playfair Display',serif}
.fw-400{font-weight:400}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}
.fs-10{font-size:10px}.fs-11{font-size:11px}.fs-12{font-size:12px}.fs-13{font-size:13px}.fs-14{font-size:14px}
.fs-16{font-size:16px}.fs-18{font-size:18px}.fs-20{font-size:20px}.fs-24{font-size:24px}
.text-upper{text-transform:uppercase;letter-spacing:.8px}

/* ─── LAYOUT ──────────────────────────────────────────────────── */
.container{max-width:1400px;margin:0 auto;padding:0 16px}
.container-sm{max-width:560px;margin:0 auto}
.container-md{max-width:960px;margin:0 auto}
.container-lg{max-width:1200px;margin:0 auto}
.flex{display:flex}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-12{gap:12px}.gap-16{gap:16px}
.grid{display:grid}
.w-full{width:100%}.h-full{height:100%}
.overflow-auto{overflow:auto}.overflow-x-auto{overflow-x:auto}
.relative{position:relative}.absolute{position:absolute}.sticky{position:sticky}
.z-10{z-index:10}.z-50{z-index:50}.z-100{z-index:100}
.hidden{display:none}

/* ─── COMPONENTS ──────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);transition:all .15s}
.card:hover{box-shadow:var(--shadow-lg)}
.card-clickable{cursor:pointer}
.card-clickable:active{transform:scale(.98)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:none;border-radius:8px;
  padding:9px 18px;font-weight:600;font-size:13px;cursor:pointer;transition:all .15s;
  background:var(--primary);color:#fff;box-shadow:var(--shadow);white-space:nowrap}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-sm{padding:6px 14px;font-size:12px}.btn-lg{padding:12px 26px;font-size:15px}.btn-xs{padding:4px 10px;font-size:11px}
.btn-secondary{background:var(--secondary)}.btn-danger{background:var(--danger)}
.btn-blue{background:var(--blue);color:#fff}.btn-green{background:var(--green);color:#fff}
.btn-whatsapp{background:#25D366;color:#fff}.btn-outline{background:transparent;border:1.5px solid var(--primary);color:var(--primary)}
.btn-ghost{background:var(--bg2);color:var(--text-dim);box-shadow:none;border:1px solid var(--border)}
.btn-block{width:100%}

.input,.select{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:10px 14px;
  color:var(--text);font-size:13px;outline:none;width:100%;box-sizing:border-box;transition:border .2s}
.input:focus,.select:focus{border-color:var(--primary)}
textarea.input{resize:vertical}

.tag{display:inline-block;padding:3px 9px;border-radius:6px;font-size:10px;font-weight:700;
  letter-spacing:.4px;text-transform:uppercase}
.tag-primary{background:var(--primary-bg);color:var(--primary)}
.tag-danger{background:var(--danger-bg);color:var(--danger)}
.tag-blue{background:var(--blue-bg);color:var(--blue)}
.tag-green{background:var(--green-bg);color:var(--green)}
.tag-secondary{background:var(--secondary-bg);color:var(--secondary)}

.divider{height:1px;background:var(--border);margin:10px 0}

/* ─── HEADER ──────────────────────────────────────────────────── */
.header{background:var(--header-bg);border-bottom:1px solid var(--border);position:sticky;top:0;
  z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.header-inner{display:flex;align-items:center;gap:12px;height:56px;max-width:1400px;margin:0 auto;padding:0 16px}
.logo{font-family:'Playfair Display',serif;font-weight:800;color:var(--primary);letter-spacing:-.3px}
.nav-tabs{display:flex;gap:2px;margin-left:16px}
.nav-tab{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:8px;
  border:none;background:transparent;cursor:pointer;font-weight:600;font-size:12px;
  color:var(--text-dim);transition:all .15s;white-space:nowrap}
.nav-tab:hover{background:var(--bg2);color:var(--text)}
.nav-tab.active{background:var(--primary-bg);color:var(--primary);font-weight:700}

/* ─── THEME PICKER ───────────────────────────────────────────── */
.theme-btn{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:5px 12px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text-dim)}
.theme-dropdown{position:absolute;top:100%;right:0;margin-top:6px;background:var(--card);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;z-index:200;min-width:180px}
.theme-option{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
.theme-option:hover{background:var(--bg2)}
.theme-option.active{background:var(--primary-bg);outline:2px solid var(--primary)}
.theme-swatch{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.1)}

/* ─── MOBILE NAV ─────────────────────────────────────────────── */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:54px;background:var(--header-bg);
  border-top:1px solid var(--border);z-index:100;justify-content:space-around;align-items:center;
  box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:none;
  color:var(--text-dim);cursor:pointer;font-size:9px;font-weight:600;padding:4px 8px;border-radius:6px;transition:.15s}
.mobile-nav-item.active{color:var(--primary);background:var(--primary-bg)}
.nav-icon{font-size:18px}.nav-label{font-size:8px;text-transform:uppercase;letter-spacing:.5px}

/* ─── HERO (Online Ordering) ─────────────────────────────────── */
.hero{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:20px}
.hero-glow{position:absolute;top:-30px;right:-30px;width:120px;height:120px;
  background:radial-gradient(circle,var(--primary-bg) 0%,transparent 70%);border-radius:50%;pointer-events:none}

/* ─── CATEGORY SCROLL ────────────────────────────────────────── */
.cat-scroll{display:flex;gap:6px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch}
.cat-scroll::-webkit-scrollbar{height:0}
.cat-btn{flex-shrink:0;padding:7px 16px;border-radius:20px;border:1px solid var(--border);background:var(--card);
  color:var(--text-dim);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.cat-btn:hover{background:var(--bg2)}
.cat-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);box-shadow:0 2px 8px rgba(228,0,43,.2)}

/* ─── ONLINE MENU GRID ───────────────────────────────────────── */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.menu-item{text-align:center;padding:14px 8px;position:relative}
.menu-item.in-cart{background:var(--primary-bg);border-color:rgba(228,0,43,.2)}
.menu-icon{font-size:42px;margin-bottom:6px;line-height:1}
.menu-price{font-family:'Playfair Display',serif;font-weight:800;font-size:14px;color:var(--primary);margin-top:4px}

/* ─── DEALS SCROLL ───────────────────────────────────────────── */
.deals-scroll{display:flex;gap:12px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch}
.deals-scroll::-webkit-scrollbar{height:0}
.deal-card{min-width:200px;flex:0 0 200px;text-align:center;position:relative;overflow:hidden}
.deal-save{position:absolute;top:8px;right:-28px;background:var(--danger);color:#fff;font-size:9px;font-weight:800;
  padding:3px 30px;transform:rotate(45deg);letter-spacing:.5px}

/* ─── STICKY CART BAR (Online) ───────────────────────────────── */
.sticky-cart{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);max-width:500px;width:calc(100% - 32px);
  background:var(--card);border:2px solid var(--primary);border-radius:16px;padding:12px 18px;z-index:90;
  box-shadow:0 -4px 20px rgba(228,0,43,.15);cursor:pointer}

/* ═══════════════════════════════════════════════════════════════
   POS — MUCH BIGGER ICONS
   ═══════════════════════════════════════════════════════════════ */
.pos-layout{display:flex;gap:12px;height:calc(100vh - 120px)}
.pos-menu{flex:1 1 65%;min-width:280px;display:flex;flex-direction:column;overflow:hidden}
.pos-bill{flex:0 0 320px;min-width:280px;max-width:380px;display:flex;flex-direction:column;background:var(--card);
  border-radius:12px;border:1px solid var(--border);padding:14px;box-shadow:var(--shadow)}

/* POS Grid — BIGGER items */
.pos-grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-content:start;padding:4px 0}
.pos-item{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 8px;
  cursor:pointer;text-align:center;box-shadow:var(--shadow);transition:all .12s;position:relative;min-height:110px;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.pos-item:hover{box-shadow:var(--shadow-lg);border-color:var(--primary);transform:translateY(-2px)}
.pos-item:active{transform:scale(.95)}
.pos-item.in-cart{background:var(--primary-bg);border-color:rgba(228,0,43,.35);box-shadow:0 0 12px rgba(228,0,43,.12)}

/* ★★★ BIGGER POS ICONS — 48px base ★★★ */
.pos-item .item-icon{font-size:48px;margin-bottom:6px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}
.pos-item .item-name{font-size:11px;font-weight:700;line-height:1.2;margin-bottom:3px;min-height:26px;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pos-item .item-price{font-size:14px;font-weight:800;color:var(--primary);font-family:'Playfair Display',serif}
.pos-item .qty-badge{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:11px;
  background:var(--primary);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;
  justify-content:center;box-shadow:0 2px 6px rgba(228,0,43,.3)}

.qty-btn{width:26px;height:26px;border-radius:7px;background:var(--bg2);border:1px solid var(--border);
  color:var(--text);cursor:pointer;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:.1s}
.qty-btn:hover{background:var(--bg3);border-color:var(--primary)}
.qty-btn:active{background:var(--primary);color:#fff}

.bill-item{display:flex;align-items:center;gap:6px;padding:6px 0;border-bottom:1px solid var(--border-light)}
.bill-item-icon{font-size:18px}
.bill-total{font-family:'Playfair Display',serif;font-weight:800;font-size:22px;color:var(--primary)}

/* ─── TABLES ──────────────────────────────────────────────────── */
.table-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.table-card{text-align:center;cursor:pointer}
.table-card.occupied{border-color:rgba(213,0,0,.25);background:var(--danger-bg)}

/* ─── KITCHEN ─────────────────────────────────────────────────── */
.kitchen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.kitchen-card{border-left:4px solid var(--status-color)}
.kitchen-items{background:var(--bg2);border-radius:8px;padding:8px;margin-top:4px}
.kitchen-item{font-size:12px;font-weight:600;padding:3px 0}

/* ─── ADMIN ───────────────────────────────────────────────────── */
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.stat-value{font-family:'Playfair Display',serif;font-weight:800;font-size:22px}
.admin-tabs{display:flex;gap:5px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ─── RECEIPT ─────────────────────────────────────────────────── */
.receipt{max-width:360px;margin:0 auto;border:1px solid rgba(228,0,43,.15)}

/* ─── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.pulse{animation:pulse 2s infinite}
.fade-in{animation:fadeIn .3s ease}
.slide-up{animation:slideUp .4s ease}
.live-dot{width:7px;height:7px;border-radius:4px;background:var(--green);animation:pulse 2s infinite}

/* ─── LOADING ─────────────────────────────────────────────────── */
.spinner{width:28px;height:28px;border:3px solid var(--border);border-top-color:var(--primary);
  border-radius:50%;animation:spin .6s linear infinite;margin:20px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── EMPTY STATES ────────────────────────────────────────────── */
.empty{text-align:center;padding:40px;color:var(--text-faint)}
.empty-icon{font-size:40px;margin-bottom:8px}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

/* ─── EXTRA LARGE (1600px+) ──────────────────────────────────── */
@media(min-width:1600px){
  .pos-grid{grid-template-columns:repeat(7,1fr)}
  .pos-item .item-icon{font-size:52px}
  .pos-item{min-height:120px}
  .menu-grid{grid-template-columns:repeat(6,1fr)}
}

/* ─── LARGE DESKTOP (1200-1599px) ─────────────────────────────── */
@media(min-width:1200px) and (max-width:1599px){
  .pos-grid{grid-template-columns:repeat(6,1fr)}
  .pos-item .item-icon{font-size:48px}
  .pos-item{min-height:110px}
  .menu-grid{grid-template-columns:repeat(5,1fr)}
  .kitchen-grid{grid-template-columns:repeat(3,1fr)}
}

/* ─── DESKTOP (1024-1199px) ──────────────────────────────────── */
@media(min-width:1024px) and (max-width:1199px){
  .pos-grid{grid-template-columns:repeat(5,1fr)}
  .pos-item .item-icon{font-size:44px}
  .pos-item{min-height:100px}
  .menu-grid{grid-template-columns:repeat(4,1fr)}
}

/* ─── TABLET PORTRAIT (768-1023px) ────────────────────────────── */
@media(max-width:1023px){
  .pos-layout{flex-direction:column;height:auto}
  .pos-menu{min-height:50vh}
  .pos-bill{min-width:100%;max-width:100%;flex:none}
  .pos-grid{grid-template-columns:repeat(5,1fr)}
  .pos-item .item-icon{font-size:42px}
  .pos-item{min-height:95px;padding:10px 6px}
  .menu-grid{grid-template-columns:repeat(3,1fr)}
  .settings-grid{grid-template-columns:1fr 1fr}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .header-inner{gap:6px}
  .nav-tab{padding:5px 10px;font-size:11px}
  .logo{font-size:14px}
}

/* ─── MOBILE LARGE (480-767px) ────────────────────────────────── */
@media(max-width:767px){
  .header-inner{height:48px;padding:0 10px}
  .logo-text{display:none}
  .nav-tab{padding:4px 8px;font-size:10px}
  .container{padding:0 10px}
  main{padding:10px;padding-bottom:66px !important}
  .mobile-nav{display:flex}
  .desktop-nav{display:none}
  .pos-grid{grid-template-columns:repeat(4,1fr);gap:6px}
  .pos-item{padding:10px 5px;min-height:90px}
  .pos-item .item-icon{font-size:38px}
  .pos-item .item-name{font-size:10px}
  .pos-item .item-price{font-size:12px}
  .menu-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .menu-icon{font-size:34px}
  .hero{padding:20px;margin-bottom:16px}
  .kitchen-grid{grid-template-columns:1fr}
  .table-grid{grid-template-columns:repeat(3,1fr)}
  .admin-grid{grid-template-columns:repeat(2,1fr)}
  .category-grid{grid-template-columns:repeat(2,1fr)}
  .settings-grid{grid-template-columns:1fr}
  .deal-card{min-width:180px;flex:0 0 180px}
  .admin-stats{grid-template-columns:repeat(2,1fr)}
  .stat-value{font-size:18px}
  .btn-lg{padding:10px 20px;font-size:14px}
  .sticky-cart{bottom:60px;max-width:calc(100% - 24px)}
}

/* ─── MOBILE SMALL (below 480px) ──────────────────────────────── */
@media(max-width:479px){
  .pos-grid{grid-template-columns:repeat(3,1fr)}
  .pos-item .item-icon{font-size:34px}
  .pos-item .item-name{font-size:9px;min-height:20px}
  .pos-item{min-height:80px}
  .menu-grid{grid-template-columns:repeat(2,1fr)}
  .menu-icon{font-size:28px}
  .admin-grid{grid-template-columns:1fr}
  .table-grid{grid-template-columns:repeat(2,1fr)}
  .hero h1{font-size:22px}
  .deal-card{min-width:160px;flex:0 0 160px}
  .sticky-cart{bottom:58px}
}

/* ─── PRINT RECEIPT ───────────────────────────────────────────── */
@media print{
  body{background:#fff !important;color:#000 !important}
  .header,.mobile-nav,.nav-tabs,.theme-btn,.btn{display:none !important}
  .receipt{border:none;box-shadow:none;max-width:80mm;margin:0;padding:10px}
  .receipt *{color:#000 !important;background:transparent !important}
}