/* ══════════════════════════════════════════════════════════════════════
   كاشير وهج استديو V2 (POS System) — الهوية البصرية المطوّرة
   الخط الرسمي: Tajawal (تجوّل) بأوزانه الثلاثة:
     - Regular (400): للنصوص العادية، الشروح، تفاصيل السلة
     - Bold (700): للعناوين، الأزرار، أسماء المنتجات والخدمات
     - ExtraBold (800): للأرقام الكبيرة، لوحة الـ PIN، الإجمالي العام
   لوحة الألوان: استديو التصوير الليلي الداكن (Dark Espresso & Warm Amber/Gold)
   ══════════════════════════════════════════════════════════════════════ */
/* Tajawal — local WOFF2 (arabic + latin subsets, weights 400/700/800) */
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/tajawal-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/tajawal-800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Tajawal';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/tajawal-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ──── تدريجات البني الداكن الفاخر لشاشات نقاط البيع ──── */
  --bg: #140D09;          /* بني إسبريسو غامق مريح للعين */
  --grad-bg: linear-gradient(180deg, #180F0A 0%, #110B07 100%);
  --panel: #1D130D;       /* موكا استديو دافئ للواجهات الجانبية */
  --grad-panel: linear-gradient(180deg, #22160F 0%, #19100B 100%);
  --card: #271A12;        /* بطاقات بني محمص */
  --card2: #352318;       /* بطاقات ثانوية بدرجة بنية دافئة */
  --card-hover: #3E2B1E;
  
  --line: #422D1E;        /* حدود بنية راقية وواضحة */
  --line-strong: #5C3E2A;
  
  /* ──── إضاءة الوهج الذهبي ──── */
  --gold: #C9A66B;
  --gold2: #E5C99B;
  --gold-dark: #9F7939;
  --grad-gold: linear-gradient(135deg, #E5C99B 0%, #C9A66B 50%, #9F7939 100%);
  --grad-gold-hover: linear-gradient(135deg, #EED5A7 0%, #D4B277 50%, #AC884A 100%);
  --grad-brown-tile: linear-gradient(180deg, #2D1E15 0%, #20150E 100%);
  --grad-tile-hover: linear-gradient(180deg, #3A281C 0%, #291B12 100%);
  
  --ink: #FAF4ED;         /* أبيض عاجي دافئ عالي الوضوح */
  --ink-soft: #DFCBB8;
  --mute: #A38C77;        /* بني بندقي ناعم للنصوص الثانوية */
  
  --ok: #5EBA84;
  --bad: #E06753;
  --warn: #E5B348;
  
  --r: 14px;
  --font: 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  background: var(--bg);
  background-image: var(--grad-bg);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400; /* Regular للكلام العادي */
  font-size: 15px;
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

body { overscroll-behavior: none; }

button, input, select, textarea {
  font-family: var(--font);
  font-size: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  font-weight: 700; /* Bold للأزرار */
}

[hidden] { display: none !important; }

/* ───────── الشريط العلوي ───────── */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 12px 20px;
  background: rgba(22, 14, 10, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700; /* Bold */
  font-size: 16px;
}

.logo {
  color: var(--bg);
  background: var(--grad-gold);
  padding: 5px 14px;
  border-radius: 9px;
  font-weight: 800; /* ExtraBold لشعار وهج */
  font-size: 17px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(201, 166, 107, 0.3);
}

.top-mid {
  color: var(--mute);
  font-size: 14.5px;
  font-weight: 400; /* Regular */
  display: flex;
  align-items: center;
  gap: 10px;
}
.top-mid b, .top-mid #tUser {
  color: var(--ink);
  font-weight: 700; /* Bold للمستخدم الحالي */
}

.dot { color: var(--gold); }

.top-end { display: flex; gap: 10px; align-items: center; }

.sync {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--card);
  font-size: 13.5px;
  font-weight: 700; /* Bold لحالة المزامنة */
  color: var(--ink-soft);
  transition: all .18s;
}
.sync i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 6px rgba(94, 186, 132, 0.5);
}
.sync.pending i { background: var(--warn); box-shadow: 0 0 6px rgba(229, 179, 72, 0.5); }
.sync.offline i { background: var(--bad);  box-shadow: 0 0 6px rgba(224, 103, 83, 0.5); }

.ghost {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-weight: 700; /* Bold */
  transition: all .18s;
}
.ghost:hover {
  border-color: var(--gold);
  color: var(--gold2);
  background: var(--card2);
}

.btn {
  padding: 14px 20px;
  border-radius: 12px;
  background: var(--grad-gold);
  color: #170F0A;
  font-weight: 700; /* Bold */
  font-size: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
  transition: all .18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn:hover {
  background: var(--grad-gold-hover);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(201, 166, 107, 0.3);
}
.btn:active { transform: translateY(0); }
.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.alt {
  background: var(--card2);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.alt:hover {
  border-color: var(--gold);
  color: var(--gold2);
}

.btn.danger {
  background: linear-gradient(135deg, #E06753 0%, #B83B27 100%);
  color: #FFFFFF;
}

.btn.block { width: 100%; }

/* ───────── شاشات مركزية: الإعداد، الدخول، فتح الوردية ───────── */
.center {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: radial-gradient(circle at center, #26170E 0%, #120B07 100%);
}

.panel {
  width: min(450px, 100%);
  background: var(--grad-panel);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 32px 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.panel h1 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800; /* ExtraBold لعناوين الشاشات */
  color: #FFFFFF;
}

.panel p.sub {
  margin: 0 0 24px;
  color: var(--mute);
  font-size: 14.5px;
  font-weight: 400; /* Regular */
}

.field {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.field label {
  font-size: 13.5px;
  font-weight: 700; /* Bold */
  color: var(--ink-soft);
}

.input, select.input, textarea.input {
  width: 100%;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  font-size: 16px;
  font-weight: 400; /* Regular للإدخال */
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}

.input:focus, select.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.25);
}

.big-num {
  font-size: 34px;
  font-weight: 800; /* ExtraBold للأرقام الكبيرة */
  text-align: center;
  letter-spacing: 2px;
  direction: ltr;
  color: var(--gold2);
}

.users {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.user {
  padding: 18px 10px;
  border-radius: 14px;
  background: var(--card);
  border: 1.5px solid var(--line);
  text-align: center;
  transition: all .18s;
  cursor: pointer;
}
.user:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.user b {
  display: block;
  font-size: 17px;
  font-weight: 700; /* Bold لاسم الكاشير */
  color: var(--ink);
}
.user small {
  color: var(--mute);
  font-size: 13px;
  font-weight: 400; /* Regular للفرع */
}
.user.on {
  border-color: var(--gold);
  background: linear-gradient(180deg, #38251A 0%, #271911 100%);
  box-shadow: 0 0 16px rgba(201, 166, 107, 0.25);
}

.dots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 14px 0 20px;
  direction: ltr;
}
.dots i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: transparent;
  transition: all .18s;
}
.dots i.f {
  background: var(--grad-gold);
  box-shadow: 0 0 10px var(--gold);
}

.pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  direction: ltr;
}

.pad button {
  padding: 18px 0;
  font-size: 24px;
  font-weight: 800; /* ExtraBold لأزرار الأرقام */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  transition: all .12s;
}
.pad button:active {
  background: var(--card2);
  transform: scale(0.96);
  border-color: var(--gold);
}

.err {
  color: var(--bad);
  font-size: 14px;
  font-weight: 700;
  min-height: 22px;
  text-align: center;
  margin-top: 6px;
}

/* ───────── شاشة البيع ونقطة الكاشير ───────── */
.sell {
  display: grid;
  grid-template-columns: 1fr 390px;
  height: calc(100vh - 61px);
}

.catalog {
  overflow: auto;
  padding: 18px;
  background: var(--bg);
}

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  background: var(--bg);
  padding-bottom: 10px;
  z-index: 2;
}

.tab {
  flex: 1;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--card);
  border: 1.5px solid var(--line);
  font-size: 17px;
  font-weight: 700; /* Bold لتبويبات الكتالوج */
  color: var(--ink-soft);
  transition: all .18s;
}
.tab:hover {
  border-color: var(--gold);
}
.tab.on {
  background: var(--grad-gold);
  color: #170F0A;
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(201, 166, 107, 0.35);
}

.search { margin-bottom: 16px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 12px;
}

.tile {
  min-height: 110px;
  padding: 16px 14px;
  border-radius: var(--r);
  background: var(--grad-brown-tile);
  border: 1.5px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
  transition: all .18s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.tile:hover {
  background: var(--grad-tile-hover);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.tile:active { transform: scale(.98); }

.tile .ic { font-size: 26px; }
.tile b {
  font-size: 15px;
  font-weight: 700; /* Bold لاسم الخدمة/المنتج */
  line-height: 1.4;
  color: #FFFFFF;
}
.tile small {
  color: var(--gold2);
  font-size: 14px;
  font-weight: 800; /* ExtraBold لسعر الصنف */
  letter-spacing: 0.3px;
}

.legacy-btn {
  display: block;
  width: 100%;
  margin-top: 24px;
  padding: 15px;
  border-radius: 12px;
  border: 1.5px dashed var(--line);
  color: var(--mute);
  font-size: 15px;
  font-weight: 700; /* Bold */
  transition: all .18s;
}
.legacy-btn:hover {
  border-color: var(--gold);
  color: var(--gold2);
  background: var(--card);
}

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--mute);
  font-weight: 400;
}
.crumb button {
  color: var(--gold);
  font-weight: 700;
}

/* ───────── سلة المشتريات والحساب ───────── */
.cart {
  background: var(--grad-panel);
  border-inline-start: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
}

.cart h2 {
  margin: 0;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 700; /* Bold لعنوان السلة */
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #FFFFFF;
}

.lines {
  flex: 1;
  overflow: auto;
  padding: 10px 14px;
}

.line {
  padding: 14px 8px;
  border-bottom: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
}
.line .n {
  font-size: 15px;
  font-weight: 700; /* Bold لاسم البند بالسلة */
  color: #FFFFFF;
}
.line .d {
  grid-column: 1;
  color: var(--mute);
  font-size: 12.5px;
  font-weight: 400; /* Regular للتفاصيل والخيارات */
}
.line .p {
  font-weight: 800; /* ExtraBold للمبلغ الفرعي */
  color: var(--gold2);
  font-size: 15px;
}
.line .act {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 6px;
}

.qbtn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--card2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 800;
  display: grid;
  place-items: center;
  transition: all .15s;
}
.qbtn:active { background: var(--gold); color: #170F0A; }

.rm {
  margin-inline-start: auto;
  color: var(--bad);
  font-size: 13.5px;
  font-weight: 700;
}

.empty {
  color: var(--mute);
  text-align: center;
  padding: 56px 16px;
  font-size: 15px;
  font-weight: 400;
}

.totals {
  padding: 16px 20px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  background: rgba(18, 11, 7, 0.4);
}

.row {
  display: flex;
  justify-content: space-between;
  font-weight: 400; /* Regular للخصم والمجموع الفرعي */
  font-size: 14.5px;
}

.row.total {
  font-size: 24px;
  font-weight: 800; /* ExtraBold للإجمالي العام */
  color: var(--gold2);
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.mute { color: var(--mute); }

/* ───────── النوافذ والألواح المنبثقة ───────── */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 9, 6, 0.75);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  z-index: 30;
  padding: 16px;
}

.sheet {
  width: min(580px, 100%);
  max-height: 92vh;
  overflow: auto;
  background: var(--grad-panel);
  border: 1.5px solid var(--line-strong);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
}

.sheet h3 {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 800; /* ExtraBold لعناوين النوافذ */
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.x {
  font-size: 22px;
  color: var(--mute);
  cursor: pointer;
  transition: color .15s;
}
.x:hover { color: #FFFFFF; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 11px 16px;
  border-radius: 11px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700; /* Bold للخيارات */
  color: var(--ink-soft);
  transition: all .18s;
  cursor: pointer;
}
.chip:hover { border-color: var(--gold); }
.chip.on {
  border-color: var(--gold);
  background: linear-gradient(180deg, #38251A 0%, #291B13 100%);
  color: var(--gold2);
  box-shadow: 0 0 10px rgba(201, 166, 107, 0.2);
}
.chip small {
  color: var(--mute);
  margin-inline-start: 6px;
  font-weight: 400;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stepper .input { width: 95px; text-align: center; font-weight: 700; }

.live {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.live b {
  font-size: 24px;
  font-weight: 800; /* ExtraBold للسعر المباشر */
  color: var(--gold2);
}

.foot { display: flex; gap: 12px; margin-top: 20px; }
.foot .btn { flex: 1; }

.pays {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.denoms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 16px;
}
.denoms .field { margin: 0; grid-template-columns: 75px 1fr; align-items: center; }

.list-btn {
  display: block;
  width: 100%;
  text-align: right;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  transition: all .18s;
}
.list-btn:hover {
  border-color: var(--gold);
  background: var(--card2);
}

.warnbox {
  background: linear-gradient(135deg, #332014 0%, #24160E 100%);
  border: 1.5px solid #664326;
  color: var(--warn);
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 400;
  margin-bottom: 14px;
  line-height: 1.6;
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card2);
  border: 1px solid var(--gold);
  color: var(--ink);
  padding: 13px 24px;
  border-radius: 99px;
  z-index: 50;
  max-width: 90vw;
  font-weight: 700; /* Bold */
  font-size: 15px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.6);
}
.toast.bad {
  border-color: var(--bad);
  background: #361712;
}

.cart-toggle { display: none; }

/* ───────── دليل اختصارات لوحة المفاتيح ───────── */
kbd {
  display: inline-block;
  padding: 2px 7px;
  font-size: 12px;
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.4;
  color: var(--gold2);
  background: var(--card2);
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  box-shadow: 0 2px 0 #120b07;
  direction: ltr;
}
.shortcuts-guide {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sc-section {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.sc-section h4 {
  margin: 4px 0 8px;
  color: var(--gold);
  font-size: 13.5px;
  font-weight: 700;
}
.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.tile.tile-focus, .tile:focus-visible {
  outline: 2px solid var(--gold) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 0 12px rgba(201, 166, 107, 0.45) !important;
}

/* ───────── الموبايل والشاشات الصغيرة للكاشير ───────── */
@media (max-width: 860px) {
  .sell { grid-template-columns: 1fr; height: auto; }
  .cart {
    position: fixed;
    inset: auto 0 0 0;
    max-height: 78vh;
    border-radius: 24px 24px 0 0;
    border: 1.5px solid var(--line-strong);
    transform: translateY(calc(100% - 68px));
    transition: transform .25s ease-out;
    z-index: 15;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.7);
  }
  .cart.open { transform: none; }
  .catalog { padding-bottom: 96px; }
  .top-mid { display: none; }
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* ───────── الإيصال (طباعة حرارية 80مم) ───────── */
.receipt-print { display: none; }
@media print {
  html, body {
    background: #fff !important;
    background-color: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body > *:not(#receipt) { display: none !important; }
  #receipt {
    display: block !important;
    color: #000 !important;
    background: #fff !important;
    background-color: #fff !important;
    width: 72mm;
    margin: 0 auto;
    padding: 4mm;
    box-sizing: border-box;
    font-family: 'Tajawal', sans-serif;
    font-size: 12px;
    font-weight: 400; /* Regular */
    line-height: 1.4;
  }
  #receipt, #receipt * {
    color: #000 !important;
    text-shadow: none !important;
  }
  #receipt .c { text-align: center; }
  #receipt hr { border: 0; border-top: 1px dashed #000; margin: 6px 0; }
  #receipt table { width: 100%; border-collapse: collapse; }
  #receipt td { padding: 3px 0; vertical-align: top; font-weight: 400; }
  #receipt td:last-child { text-align: left; white-space: nowrap; font-weight: 700; }
  #receipt tr.total td { font-weight: 800; font-size: 14px; }
  #receipt .qr svg { width: 38mm; height: 38mm; margin: 4mm auto 2px; display: block; }
  #receipt .qr div { font-size: 10px; font-weight: 700; }
  #receipt .rlogo {
    display: block;
    max-width: 32mm;
    margin: 0 auto 2mm;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
  @page { size: 80mm auto; margin: 0; }
}

/* سكان الباركود بالكاميرا */
.scan-ov{position:fixed;inset:0;background:rgba(0,0,0,.75);display:grid;place-items:center;z-index:9999}
.scan-box{background:#141210;padding:14px;border-radius:14px;width:min(92vw,420px);text-align:center;color:#fff}
.scan-box video{width:100%;border-radius:10px;background:#000}
.scan-box p{margin:10px 0}
#scanBtn{margin-inline-start:auto}