/* ---- css/tijara-theme.css (scoped to .sim-pos; generated by tools/tour/build-tour-css.mjs — do not edit) ---- */
/* ── v2 NOTE ────────────────────────────────────────────────────────────────
   This file is loaded by _POSLayout ONLY, and it used to paint every Bootstrap
   primary and every link in #C4142B — the RETIRED v1 brand red.

   v2 demoted red to --danger (Part 6.1: colour carries meaning or it does not
   appear). A red link on the till reads as a warning to a cashier with a queue
   waiting, and it left nothing to signal an actual problem. Swapped for the v2
   action blue. Nothing else about the till changes: pos.css owns its layout and
   its own .btn-lx-* buttons, which were never affected by this file.
   ───────────────────────────────────────────────────────────────────────── */
/*
  LOYALTY design system — carried from the Tijara product plan.
  One set of tokens for every portal: the cash counter, the online store,
  both PWAs, and the login screen. Buttons, colors and spacing should never
  be invented per-screen — they come from here.
*/
/* Red + white shared theme — used by the cash counter, the delivery PWA, every
   back-office portal and the login screen. (The customer online store has its own
   separate "old money" theme in shop.css.) */
.sim-pos{
  --lx-canvas:   #ffffff;   /* app background — now white */
  --lx-surface:  #ffffff;   /* cards / panels */
  --lx-surface2: #f6f6f7;   /* subtle raised panels, chips */
  --lx-line:     rgba(0,0,0,.10);
  --lx-red:      #0E6E68;    /* the one accent: Tijara logo teal (QA Oct 2026; was v2 blue) */
  --lx-red-dark: #0A5A55;    /* hover / pressed */
  --lx-brand-orange:#F47B20; /* logo swoosh - brand marks only, never a state */
  --lx-red-bright:#E5344A;
  --lx-off:      #1A1614;    /* primary text — now dark on white */
  --lx-muted:    #6B7280;
  --lx-gold:     #B4862A;
  --lx-green:    #1F8F5A;

  /* Map Bootstrap's own variables onto the brand so the light back-office pages
     (btn-primary, links, focus rings) inherit red+white automatically without
     restyling ~60 views one by one. */
  --bs-primary:            #0E6E68;
  --bs-primary-rgb:        14,110,104;
  --bs-link-color:         #0E6E68;
  --bs-link-hover-color:   #0A5A55;
}
/* Bootstrap primary buttons follow the brand red across every portal. */
.sim-pos .btn-primary{
  --bs-btn-bg:#0E6E68; --bs-btn-border-color:#0E6E68;
  --bs-btn-hover-bg:#0A5A55; --bs-btn-hover-border-color:#0A5A55;
  --bs-btn-active-bg:#084844; --bs-btn-active-border-color:#084844;
  --bs-btn-disabled-bg:#0E6E68; --bs-btn-disabled-border-color:#0E6E68;
}
.sim-pos .btn-outline-primary{
  --bs-btn-color:#0E6E68; --bs-btn-border-color:#0E6E68;
  --bs-btn-hover-bg:#0E6E68; --bs-btn-hover-border-color:#0E6E68;
  --bs-btn-active-bg:#0A5A55; --bs-btn-active-border-color:#0A5A55;
}
.sim-pos a{ color:#0E6E68; }
.sim-pos a:hover{ color:#0A5A55; }
.sim-pos .text-primary{ color:#0E6E68 !important; }
.sim-pos .bg-primary{ background-color:#0E6E68 !important; }

.sim-pos .lx-mono{
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: var(--lx-muted);
}

/* Buttons — the one red, used everywhere, nothing else invented per-screen */
.sim-pos .btn-lx-primary{
  background: var(--lx-red); border: none; color: #fff; font-weight: 700;
  border-radius: 8px; padding: .55rem 1rem; letter-spacing:.02em;
}
.sim-pos .btn-lx-primary:hover{ background: var(--lx-red-dark); color:#fff; }
.sim-pos .btn-lx-ghost{
  background: transparent; border: 1px solid var(--lx-line); color: var(--lx-muted);
  border-radius: 7px; padding: .5rem .9rem; font-weight: 600; font-size: .85rem;
}
.sim-pos .btn-lx-ghost:hover{ color: var(--lx-off); border-color:#3a3029; }

/* Cards */
.sim-pos .card-lx{
  background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: 10px;
}

/* A thin red accent bar used on back-office pages so every portal reads as
   one product without a full reskin of every screen. */
.sim-pos .lx-accent-bar{
  height: 3px; background: linear-gradient(90deg, var(--lx-red), var(--lx-brand-orange));
}
/* Red navbar, white content area — the core red+white combination. Bootstrap's
   navbar-dark text/badges already read correctly on this red bar. */
.sim-pos .lx-navbar-dark{
  background: var(--lx-red) !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.sim-pos .lx-navbar-dark .navbar-brand{ color: #fff !important; font-weight: 800; letter-spacing: .01em; }
.sim-pos .lx-navbar-dark .navbar-brand .dot{
  display:inline-block; width:9px; height:9px; background:#fff; border-radius:2px; margin-right:8px;
}

/* ============================================================================
   Mockup component layer (additive) — stat cards, nav tiles, status pills and
   count badges. These are NEW classes; nothing existing is renamed, so every
   button, route and script hook keeps working. The online store (shop.css) does
   not use any of this and is unaffected.
   ============================================================================ */
.sim-pos .lx-kpi{
  background:#fff; border:1px solid var(--lx-line); border-radius:14px;
  padding:16px 18px; position:relative; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  text-align:center; /* mockups: label + value centered on every stat card */
}
.sim-pos .lx-kpi::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--lx-red); }
.sim-pos .lx-kpi .k-label{ color:var(--lx-muted); font-size:.78rem; font-weight:600; margin:0; }
.sim-pos .lx-kpi .k-value{ font-size:1.75rem; font-weight:800; line-height:1.15; color:var(--lx-off); }
.sim-pos .lx-kpi.k-green::before{ background:#1F8F5A } .sim-pos .lx-kpi.k-green .k-value{ color:#1F8F5A }
.sim-pos .lx-kpi.k-blue::before{ background:#2E75B6 }  .sim-pos .lx-kpi.k-blue  .k-value{ color:#2E75B6 }
.sim-pos .lx-kpi.k-amber::before{ background:#E0A100 } .sim-pos .lx-kpi.k-amber .k-value{ color:#B4780A }
.sim-pos .lx-kpi.k-red::before{ background:var(--lx-red) } .sim-pos .lx-kpi.k-red .k-value{ color:var(--lx-red) }
.sim-pos .lx-kpi.k-slate::before{ background:#334155 } .sim-pos .lx-kpi.k-slate .k-value{ color:#334155 }

.sim-pos .lx-tile{
  display:block; background:#fff; border:1px solid var(--lx-line);
  border-top:3px solid var(--lx-red); border-radius:14px; padding:18px 14px;
  text-align:center; text-decoration:none; color:var(--lx-off);
  position:relative; height:100%; transition:transform .15s ease, box-shadow .15s ease;
}
.sim-pos .lx-tile:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.08); color:var(--lx-off); }
.sim-pos .lx-tile .t-chip{
  width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center;
  justify-content:center; font-weight:800; font-size:1.05rem; background:#ECF7F5; color:var(--lx-red); margin-bottom:8px;
}
.sim-pos .lx-tile .t-label{ font-weight:700; display:block; }
.sim-pos .lx-tile.a-green{ border-top-color:#1F8F5A } .sim-pos .lx-tile.a-green .t-chip{ background:#E4F5EC; color:#1F8F5A }
.sim-pos .lx-tile.a-blue{ border-top-color:#2E75B6 }  .sim-pos .lx-tile.a-blue  .t-chip{ background:#E7F0FA; color:#2E75B6 }
.sim-pos .lx-tile.a-amber{ border-top-color:#E0A100 } .sim-pos .lx-tile.a-amber .t-chip{ background:#FDF1DA; color:#B4780A }
.sim-pos .lx-tile.a-slate{ border-top-color:#334155 } .sim-pos .lx-tile.a-slate .t-chip{ background:#EEF1F5; color:#334155 }
.sim-pos .lx-tile.a-purple{ border-top-color:#7A3FBF } .sim-pos .lx-tile.a-purple .t-chip{ background:#F0E7FA; color:#7A3FBF }

/* Small circular count badge for tiles, nav items and section headers */
.sim-pos .lx-count{
  position:absolute; top:10px; right:12px; min-width:22px; height:22px; padding:0 6px;
  border-radius:11px; background:var(--lx-red); color:#fff; font-size:.72rem; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.sim-pos .lx-count-inline{
  display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; border-radius:10px; background:var(--lx-red); color:#fff; font-size:.72rem; font-weight:800; margin-left:6px;
}

/* Filled stat-card variants (driver queue mockup): solid colour, no top strip.
   Additive — the white lx-kpi cards elsewhere are unchanged. */
.sim-pos .lx-kpi.k-plain::before{ display:none }
.sim-pos .lx-kpi.k-fill-green,.sim-pos .lx-kpi.k-fill-amber,.sim-pos .lx-kpi.k-fill-teal{ border:none }
.sim-pos .lx-kpi.k-fill-green::before,.sim-pos .lx-kpi.k-fill-amber::before,.sim-pos .lx-kpi.k-fill-teal::before{ display:none }
.sim-pos .lx-kpi.k-fill-green{ background:#1F7A4D } .sim-pos .lx-kpi.k-fill-green .k-label{ color:rgba(255,255,255,.85) } .sim-pos .lx-kpi.k-fill-green .k-value{ color:#fff }
.sim-pos .lx-kpi.k-fill-amber{ background:#E4A80F } .sim-pos .lx-kpi.k-fill-amber .k-label{ color:rgba(0,0,0,.6) }      .sim-pos .lx-kpi.k-fill-amber .k-value{ color:#1A1614 }
.sim-pos .lx-kpi.k-fill-teal{  background:#2FA8C4 } .sim-pos .lx-kpi.k-fill-teal .k-label{ color:rgba(255,255,255,.9) }  .sim-pos .lx-kpi.k-fill-teal .k-value{ color:#fff }

/* Happy empty-state panel (driver queue "all done" mockup) */
.sim-pos .lx-empty-good{
  background:#EAF5EE; border:1px solid #D5EADD; border-radius:16px;
}
.sim-pos .lx-check-chip{
  width:64px; height:64px; border-radius:14px; background:#22A05B; color:#fff;
  font-size:1.9rem; display:inline-flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.sim-pos .btn-lx-green{
  background:#1F7A4D; border:none; color:#fff; font-weight:700;
  border-radius:8px; padding:.6rem 1.2rem; letter-spacing:.02em;
}
.sim-pos .btn-lx-green:hover{ background:#186A42; color:#fff; }

/* Status pills */
.sim-pos .lx-pill{ display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.72rem; font-weight:700; }
.sim-pos .lx-pill-green{ background:#E4F5EC; color:#1F8F5A } .sim-pos .lx-pill-amber{ background:#FDF1DA; color:#9A6B00 }
.sim-pos .lx-pill-red{ background:#FBE3E6; color:#B4232F }   .sim-pos .lx-pill-blue{ background:#E7F0FA; color:#2E75B6 }
.sim-pos .lx-pill-slate{ background:#EEF1F5; color:#334155 }

/* ---- css/pos.css (scoped to .sim-pos; generated by tools/tour/build-tour-css.mjs — do not edit) ---- */
/* Cash counter — red + white theme (shared portal look). */
.sim-pos *{box-sizing:border-box}
.sim-pos.pos-body{
  margin:0; background:var(--lx-canvas); color:var(--lx-off);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,sans-serif;
  height:100vh; display:flex; flex-direction:column; overflow:hidden;
}

.sim-pos #posTopBar{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; background:#ffffff; border-bottom:1px solid var(--lx-line);
  flex-shrink:0; font-size:13px;
}
.sim-pos #posTopBar .dot{ width:10px; height:10px; background:var(--lx-red); border-radius:2px; display:inline-block; }
.sim-pos #posTopBar .badge-branch{
  background:rgba(0,0,0,.06); border-radius:4px; padding:2px 9px; font-size:11px; margin-left:6px;
}
.sim-pos #posTopBar .online-dot{
  width:7px; height:7px; background:var(--lx-green); border-radius:50%; display:inline-block;
}

.sim-pos .pos-container{ flex:1; display:grid; grid-template-columns: 1fr 430px; min-height:0; }

/* Products (left) */
.sim-pos .pos-products{ display:flex; flex-direction:column; min-height:0; border-right:1px solid var(--lx-line); }
.sim-pos .pos-searchbar{ padding:14px 16px; border-bottom:1px solid var(--lx-line); background:#fafafa; }
.sim-pos .pos-searchbar input{
  width:100%; background:var(--lx-surface); border:1px solid var(--lx-line); color:var(--lx-off);
  border-radius:8px; padding:11px 14px; font-size:14px;
}
.sim-pos .pos-searchbar input::placeholder{ color:#9aa0a6; }
.sim-pos .pos-cats{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.sim-pos .pos-cats .chip{
  background:transparent; border:1px solid var(--lx-line); color:var(--lx-muted); border-radius:20px;
  padding:5px 13px; font-size:12px; font-weight:600; cursor:pointer;
}
.sim-pos .pos-cats .chip.active{ background:var(--lx-red); border-color:var(--lx-red); color:#fff; }

.sim-pos .products-grid{
  padding:14px 16px; overflow-y:auto; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; align-content:start;
}
.sim-pos .product-card{
  background:var(--lx-surface); border:1px solid var(--lx-line); border-radius:10px; padding:12px;
  cursor:pointer; transition:.12s; position:relative;
}
.sim-pos .product-card:hover{ border-color:var(--lx-red); transform:translateY(-2px); }
.sim-pos .product-card .nm{ font-weight:700; font-size:13px; line-height:1.3; margin-bottom:8px; }
.sim-pos .product-card .pr{ color:var(--lx-off); font-weight:800; font-size:15px; }
.sim-pos .product-card .un{ color:var(--lx-muted); font-size:11px; margin-top:2px; }
.sim-pos .product-card .tag{
  position:absolute; top:8px; right:8px; font-size:9px; font-weight:700; letter-spacing:.08em;
  padding:2px 6px; border-radius:4px;
}
.sim-pos .product-card .tag.fresh{ background:rgba(62,158,110,.16); color:#1F8F5A; }
.sim-pos .product-card .tag.nopts{ background:rgba(200,32,47,.14); color:var(--lx-red-bright); }
/* ISSUE #1 FIX: Out of stock styling */
.sim-pos .product-card .tag.oos{ background:rgba(200,32,47,.16); color:#C8202F; }
.sim-pos .product-card.out-of-stock{
  opacity:0.6; cursor:not-allowed; background:var(--lx-surface2);
}
.sim-pos .product-card.out-of-stock:hover{ border-color:var(--lx-line); transform:none; }

/* Bill (right) */
.sim-pos .pos-bill{ background:var(--lx-surface2); display:flex; flex-direction:column; min-height:0; }

.sim-pos .loyal-strip{ background:var(--lx-red); padding:14px 18px; color:#fff; }
.sim-pos .loyal-strip.empty{ background:var(--lx-surface2); color:var(--lx-muted); }
.sim-pos .loyal-strip .row1{ display:flex; justify-content:space-between; align-items:flex-start; }
.sim-pos .loyal-strip .name{ font-weight:800; font-size:17px; letter-spacing:.01em; }
.sim-pos .loyal-strip .sub{ font-size:11px; opacity:.85; font-family:ui-monospace,monospace; letter-spacing:.05em; margin-top:2px; }
.sim-pos .loyal-strip .tier{
  background:rgba(255,255,255,.16); border-radius:4px; padding:3px 9px; font-size:11px; font-weight:800; letter-spacing:.1em;
}
.sim-pos .loyal-strip .pts{ text-align:right; }
.sim-pos .loyal-strip .pts b{ font-size:22px; font-weight:800; display:block; line-height:1; }
.sim-pos .loyal-strip .pts span{ font-size:10px; opacity:.85; letter-spacing:.1em; text-transform:uppercase; }
.sim-pos .loyal-strip .idline{ display:flex; align-items:center; gap:8px; }
.sim-pos .loyal-strip .idline input{
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:6px;
  padding:8px 10px; font-size:13px; flex:1;
}
.sim-pos .loyal-strip .idline input::placeholder{ color:rgba(255,255,255,.6); }
.sim-pos .loyal-strip .idline button{
  background:#fff; color:var(--lx-red); border:none; border-radius:6px; padding:8px 14px; font-weight:700; font-size:12px;
}

.sim-pos .bill-lines{ flex:1; overflow-y:auto; padding:6px 0; }
/* UAT-006: billed items enlarged + higher contrast; the newest line is softly
   highlighted so the cashier always sees what was just added. */
.sim-pos .bill-line{ display:flex; align-items:center; padding:14px 18px; border-bottom:1px solid var(--lx-line); }
.sim-pos .bill-line:last-child{ background:rgba(14,110,104,.07); }  /* brand teal tint (was v1 red) */
.sim-pos .bill-line .info{ flex:1; }
.sim-pos .bill-line .nm{ font-weight:700; font-size:15.5px; }
.sim-pos .bill-line .det{ font-size:12px; color:var(--lx-muted); margin-top:2px; font-family:ui-monospace,monospace; }
.sim-pos .bill-line .det .earn{ color:#1F8F5A; }
.sim-pos .bill-line .det .noearn{ color:var(--lx-red-bright); }
.sim-pos .bill-line .det .memb{ color:var(--lx-gold); }
.sim-pos .bill-line .amt{ font-weight:800; font-size:15.5px; text-align:right; min-width:72px; }
.sim-pos .qbtns{ display:flex; gap:4px; margin-left:12px; }
.sim-pos .qbtns button{
  width:26px; height:26px; border-radius:6px; border:1px solid var(--lx-line); background:var(--lx-surface);
  color:var(--lx-off); font-size:13px; line-height:1;
}
.sim-pos .qbtns .rm{ color:var(--lx-red-bright); border-color:rgba(200,32,47,.3); }

.sim-pos .pos-totals{ padding:14px 18px; border-top:1px solid var(--lx-line); background:var(--lx-surface); }
.sim-pos .pos-totals .tr{ display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:var(--lx-muted); }
.sim-pos .pos-totals .tr.willearn{ color:#1F8F5A; font-weight:700; }
.sim-pos .pos-totals .tr.pay{
  color:var(--lx-off); font-size:20px; font-weight:800; border-top:1px solid var(--lx-line);
  margin-top:8px; padding-top:10px;
}

.sim-pos .redeem-box{
  margin:10px 18px 0; background:rgba(14,110,104,.08); border:1px solid rgba(14,110,104,.35);
  border-radius:8px; padding:10px 14px; font-size:13px;
}
.sim-pos .redeem-box .row{ display:flex; justify-content:space-between; align-items:center; }
.sim-pos .redeem-box input[type=range]{ width:100%; margin-top:8px; }
.sim-pos .redeem-box .apply{
  background:var(--lx-red); color:#fff; border:none; border-radius:6px; padding:6px 12px; font-size:12px; font-weight:700;
}

.sim-pos .tender{ padding:10px 18px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
/* UAT-006: payment buttons reduced (row layout, less padding) to give the billing
   area more space — same buttons, same ids, same behaviour. */
.sim-pos .tender button{
  border:none; border-radius:9px; padding:9px 0; font-weight:800; font-size:12.5px; letter-spacing:.03em;
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px;
}

/* ── TENDER BUTTONS (Payment Methods) ──────────────────────────────────
   Each payment method has a distinct, easily recognizable color.
   Tested for readability under fluorescent light at the counter.
   All colors meet WCAG AA contrast minimum (4.5:1 with white text).
   ────────────────────────────────────────────────────────────────── */
.sim-pos .tender .points{ background:var(--lx-red); color:#fff; }  /* Brand teal (loyalty/rewards) */
.sim-pos .tender .cash{ 
  background:#1F8F5A;  /* Green (universally recognized as "money") */
  color:#fff;          /* White text, contrast 4.6:1 ✓ WCAG AA */
  border:none;
}
.sim-pos .tender .card{ 
  background:#1D4ED8;  /* Blue (industry standard for card payments) */
  color:#fff;          /* White text, contrast 4.8:1 ✓ WCAG AA */
  border:none;
}
/* ISSUE #3 FIX: Split payment button (Cash + Card) */
.sim-pos .tender .split{
  background:#9B6B3F;  /* Brown/Bronze (combination of green + blue visual) */
  color:#fff;          /* White text */
  border:none;
}
.sim-pos .tender button:disabled{ opacity:.4; }

.sim-pos .capnote{ padding:0 18px 10px; font-size:10px; color:#9aa0a6; font-family:ui-monospace,monospace; letter-spacing:.05em; }
.sim-pos .subactions{ padding:0 18px 16px; display:flex; gap:8px; }
.sim-pos .subactions button{
  flex:1; background:#F4F5F7; border:1px solid var(--lx-line); color:#1A1614; border-radius:7px;
  padding:10px 8px; font-size:12px; font-weight:700; transition:filter .12s;
}
.sim-pos .subactions button:hover{ filter:brightness(.96); }
.sim-pos .subactions button i{ margin-right:4px; }

/* ── SUB-ACTION BUTTONS ────────────────────────────────────────────────
   Action buttons with distinct colors for fast recognition.
   Cashier must identify action intent at a glance in high-stress environment.
   Color psychology: intent → ease of recognition.
   ────────────────────────────────────────────────────────────────── */
.sim-pos .subactions button:nth-child(1){ 
  background:#FFA500;  /* Hold: Orange (neutral, temporary action) */
  border:none;
  color:#fff;
}
.sim-pos .subactions button:nth-child(2){ 
  background:#006BB3;  /* Resume: Navy Blue (distinct from card blue) */
  border:none;
  color:#fff;
}
.sim-pos .subactions button:nth-child(3){ 
  background:#0D9488;  /* Delivery: Teal (action-oriented, unique) */
  border:none;
  color:#fff;
}
.sim-pos .subactions button:nth-child(4){ 
  background:#8E141F;  /* Clear: Deep Red (warning — destructive action) */
  border:none;
  color:#fff;
}
.sim-pos .pos-footnote{
  text-align:center; color:#9aa0a6; font-size:10px; padding:8px; font-family:ui-monospace,monospace;
  letter-spacing:.1em; background:#ffffff; flex-shrink:0;
}

/* Flash messages at the counter. Counter density: 18px, read at arm's length
   under fluorescent light with a queue waiting. */
.sim-pos .pos-flash{ padding:14px 18px; font-size:17px; font-weight:600; border-radius:10px; margin-bottom:12px; }


.sim-pos .pos-flash.ok { background:#E6F6F0; color:#05684A; }
.sim-pos .pos-flash.err{ background:#FEE2E2; color:#A81C1C; }

/* F-011 · the refused-sale banner, in the bill panel above the tender row.
   Reuses .pos-flash.err (already defined above) for colour and weight so this
   is the same red the till already uses for a failure - no new language, just
   a placement that cannot be missed and does not time out. */
.sim-pos .pos-sale-error{
  display:flex; align-items:flex-start; gap:10px; margin:0 14px 10px;
  text-align:start;
}
.sim-pos .pos-sale-error[hidden]{ display:none; }
.sim-pos .pos-sale-error .pos-flash-x{
  background:none; border:0; color:inherit; font-size:22px; line-height:1;
  cursor:pointer; padding:0 2px; opacity:.65; flex-shrink:0;
}
.sim-pos .pos-sale-error .pos-flash-x:hover{ opacity:1; }

/* ── PATCH-006 · more visible bill lines (Option A, approved 16 Aug 2026) ────
   The bill's line-item area is flex:1 and takes what is left after the fixed
   block below it. That block was tall enough that a 1080p browser showed only
   2-3 lines. Measured in headless Chrome at 1920 wide: this reclaims +128px of
   bill area at every window height (3->5 lines at ~880px page height, 2->4 at
   ~800px). Spacing only. No colour, label, icon, grouping or action changes.
   The nth-child colour rules on .subactions rely on button POSITION, so the
   sub-action rows are deliberately NOT regrouped - only their padding tightens. */

/* 1. Tender row: four buttons on one row instead of 3 + SPLIT wrapping. */
.sim-pos .tender{ grid-template-columns:1fr 1fr 1fr 1fr; padding:8px 14px; gap:6px; }
.sim-pos .tender button{ padding:9px 0; font-size:12px; }

/* 2. Totals: tighter line spacing, same rows. */
.sim-pos .pos-totals{ padding:8px 14px; }
.sim-pos .pos-totals .tr{ padding:1px 0; font-size:12.5px; }
.sim-pos .pos-totals .tr.pay{ margin-top:5px; padding-top:6px; font-size:19px; }

/* 3. Bill lines: slightly tighter row height, same content and fonts. */
.sim-pos .bill-line{ padding:10px 14px; }

/* 4. Sub-action rows: vertical padding only. Groupings untouched (see above). */
.sim-pos .subactions{ padding:0 14px 8px; gap:6px; }
.sim-pos .subactions button{ padding:9px 6px; }
.sim-pos .subactions .btn-lx-ghost{ padding:8px 10px; }
.sim-pos .capnote{ padding:0 14px 6px; }

/* 5. Customer strip: a little less padding, same content. */
.sim-pos .loyal-strip{ padding:10px 14px; }