/* =====================================================================
   Theme B — "cashier" shop page (setting store_shop_layout = cashier).
   Goods on one side, the customer's running invoice on the other, like the
   cashier screen of the management platform. Loaded by that page only.
   Colours come from the store settings (--brand, --accent = dark).
   ===================================================================== */
.tbc { padding-top:18px; padding-bottom:30px; }
body:has(.tbc) .tb-catmenu { display:none; }          /* the page has its own «الأقسام» button */
.tbc-layout { display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:16px; align-items:start; }

/* ─── Goods ──────────────────────────────────────────────────────── */
.tbc-goods { min-width:0; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px; }
.tbc-search { position:relative; margin-bottom:12px; }
.tbc-search .tb-ic { position:absolute; inset-inline-start:14px; top:50%; transform:translateY(-50%); color:var(--muted); }
.tbc-search input {
  width:100%; height:48px; border:1px solid var(--line); border-radius:12px; padding-inline:44px 14px; font-size:15px; background:#fff;
}
.tbc-bar { display:flex; align-items:center; gap:8px; margin-bottom:12px; position:relative; }
.tbc-cats { flex:none; }
.tbc-cats > summary {
  list-style:none; display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border-radius:999px;
  background:var(--accent); color:var(--tb-on-accent); font-weight:800; font-size:14.5px; cursor:pointer; white-space:nowrap;
}
.tbc-cats > summary::-webkit-details-marker { display:none; }
.tbc-cats[open] > summary { background:var(--brand); color:var(--tb-on); }
.tbc-cats-grid {
  position:absolute; z-index:40; inset-inline:0; top:46px; background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:12px; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px;
}
.tbc-cats-grid a {
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 8px; border-radius:12px; border:1px solid var(--line);
  text-align:center; color:var(--ink); font-size:14px;
}
.tbc-cats-grid a:hover { border-color:var(--brand); background:var(--tb-tint); }
.tbc-cats-grid a.on { border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.tbc-cats-grid .tb-cat-img { width:52px; height:52px; }
.tbc-cats-grid small { color:var(--muted); }
.tbc-chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; min-width:0; padding:1px 0; }
.tbc-chips::-webkit-scrollbar { display:none; }
.tbc-chips a {
  flex:none; height:38px; display:inline-flex; align-items:center; padding:0 16px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:#4a514d; font-weight:700; font-size:14px; white-space:nowrap;
}
.tbc-chips a:hover { border-color:var(--brand); color:var(--brand); }
.tbc-chips a.on { background:var(--accent); border-color:var(--accent); color:var(--tb-on-accent); }

.tbc-sec { border:1px solid var(--line); border-radius:12px; margin-top:10px; overflow:hidden; }
.tbc-sec h2 {
  margin:0; display:flex; align-items:center; justify-content:space-between; font-size:15.5px; font-weight:800;
  padding:11px 14px; background:#fafaf9; border-bottom:1px solid var(--line);
}
.tbc-sec h2 small { color:var(--muted); font-weight:600; font-size:12.5px; }
/* Wide, horizontal rows: two columns on a computer, one on a phone. */
.tbc-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.tbc-item {
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid #f0f1ef; min-width:0;
}
.tbc-list .tbc-item:nth-child(odd) { border-inline-end:1px solid #f0f1ef; }
.tbc-item.in { background:var(--tb-tint); }
.tbc-item.is-out { opacity:.55; }
.tbc-img { flex:none; width:58px; height:58px; border-radius:10px; overflow:hidden; background:#f3f4f2; }
.tbc-img img { width:100%; height:100%; object-fit:contain; }
.tbc-info { flex:1; min-width:0; }
.tbc-name { display:block; font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbc-code { font-size:11.5px; color:#9aa19c; font-family:ui-monospace,monospace; direction:ltr; text-align:end; }
[dir=rtl] .tbc-code { text-align:right; }
.tbc-code .out { color:#b91c1c; font-family:inherit; }
.tbc-prices { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:3px; font-weight:800; font-size:14.5px; color:var(--brand); font-variant-numeric:tabular-nums; }
.tbc-prices small { color:var(--muted); font-weight:600; font-size:11.5px; }
.tbc-prices .c { color:var(--ink); }
.tbc-add { flex:none; display:flex; flex-direction:column; gap:5px; }
.tbc-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:3px; min-width:84px; height:32px; padding:0 10px;
  border-radius:9px; border:1px solid var(--brand); background:#fff; color:var(--brand); font-weight:800; font-size:13px; cursor:pointer;
  font-family:inherit;
}
.tbc-btn.unit { background:var(--brand); color:var(--tb-on); }
.tbc-btn.carton { border-color:var(--accent); color:var(--accent); }
.tbc-btn:hover { filter:brightness(.95); }
.tbc-btn:disabled { opacity:.4; cursor:not-allowed; }
.tbc-more { color:var(--muted); text-align:center; }

/* ─── The invoice ────────────────────────────────────────────────── */
.tbc-panel {
  background:#fff; border:1px solid var(--line); border-radius:var(--r); position:sticky; top:96px;
  display:flex; flex-direction:column; max-height:calc(100vh - 112px);
}
.tbc-panel-head { display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); }
.tbc-panel-head b { display:flex; align-items:center; gap:7px; font-size:16px; flex:1; }
.tbc-panel-head b .tb-ic { color:var(--brand); }
.tbc-n { font-size:12.5px; color:var(--muted); }
.tbc-close { display:none; }
.tbc-empty { margin:0; padding:40px 16px; text-align:center; color:var(--muted); font-size:14px; }
.tbc-lines { overflow-y:auto; flex:1 1 auto; min-height:0; }
.tbc-line { padding:10px 14px; border-bottom:1px solid #f0f1ef; }
.tbc-line-top { display:flex; align-items:flex-start; gap:8px; }
.tbc-line-top .nm { flex:1; min-width:0; font-weight:700; font-size:14px; }
.tbc-line-top .nm small { display:block; font-weight:500; font-size:11px; color:#9aa19c; font-family:ui-monospace,monospace; }
.tbc-rm { border:0; background:none; color:#9aa19c; cursor:pointer; padding:2px; border-radius:6px; }
.tbc-rm:hover { color:#b91c1c; background:#fdecec; }
.tbc-line-unit { display:flex; align-items:center; gap:8px; margin-top:5px; font-size:12px; }
.tbc-tag { padding:2px 9px; border-radius:7px; background:var(--tb-tint-2); color:var(--brand-2); font-weight:800; font-size:12px; }
.tbc-tag.c { background:var(--accent); color:var(--tb-on-accent); }
.tbc-line-row { display:flex; align-items:center; gap:8px; margin-top:7px; }
.tbc-step { display:flex; align-items:center; border:1px solid var(--line); border-radius:9px; overflow:hidden; }
.tbc-step button { width:32px; height:32px; border:0; background:#fff; display:grid; place-items:center; cursor:pointer; color:var(--ink); }
.tbc-step button:hover { background:var(--tb-tint); color:var(--brand); }
.tbc-step .q { min-width:36px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; }
.tbc-price { font-size:12.5px; color:var(--muted); white-space:nowrap; }
.tbc-total { margin-inline-start:auto; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tbc-sum { padding:10px 14px 14px; border-top:1px solid var(--line); flex:none; }
.tbc-sum .sum-row { display:flex; justify-content:space-between; padding:4px 0; font-size:14px; color:#4a514d; }
.tbc-sum .sum-row .ok { color:var(--ok, #15803d); }
.tbc-sum .sum-row.total { font-size:18px; font-weight:900; color:var(--ink); border-top:1px solid var(--line); margin-top:4px; padding-top:9px; }
.tbc-free { font-size:12.5px; color:var(--brand-2); background:var(--tb-tint); border-radius:8px; padding:6px 9px; margin:4px 0; display:flex; gap:6px; align-items:center; }
.tbc-pay { margin-top:10px; border-radius:12px !important; }
.tbc-pay:disabled { opacity:.45; cursor:not-allowed; }
.tbc-mbar, .tbc-scrim { display:none; }
.tbc.busy .tbc-panel, .tbc.busy .tbc-mbar { opacity:.75; transition:opacity .15s; }

/* ─── Narrower screens ───────────────────────────────────────────── */
@media (max-width:1180px) {
  .tbc-layout { grid-template-columns:minmax(0,1fr) 340px; }
  .tbc-list { grid-template-columns:minmax(0,1fr); }
  .tbc-list .tbc-item:nth-child(odd) { border-inline-end:0; }
}
@media (max-width:900px) {
  .tbc { padding-top:10px; padding-bottom:84px; }
  .tbc-layout { grid-template-columns:minmax(0,1fr); }
  .tbc-goods { padding:10px; margin-inline:-6px; }
  /* The invoice becomes a bottom sheet, opened from the bar. */
  .tbc-panel {
    position:fixed; z-index:96; inset-inline:0; bottom:0; top:auto; border-radius:20px 20px 0 0; max-height:85vh;
    transform:translateY(105%); visibility:hidden; transition:transform .25s, visibility .25s; box-shadow:0 -10px 40px rgba(0,0,0,.2);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tbc-panel.open { transform:none; visibility:visible; }
  .tbc-close { display:grid; }
  .tbc-scrim { position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.38); }
  .tbc-scrim.open { display:block; }
  .tbc-mbar {
    display:flex; align-items:center; gap:8px; position:fixed; z-index:72; inset-inline:10px;
    bottom:calc(var(--tb-bar-h, 0px) + env(safe-area-inset-bottom) + 8px);
    background:#141416; color:#fff; border-radius:14px; padding:8px 8px 8px 12px; box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  [dir=rtl] .tbc-mbar { padding:8px 12px 8px 8px; }
  .tbc-mbar.empty { opacity:.92; }
  .tbc-mbar-sum { flex:1; min-width:0; border:0; background:none; color:inherit; text-align:start; cursor:pointer; font-family:inherit; padding:0; }
  .tbc-mbar-sum small { display:block; font-size:11.5px; color:#c9cbc9; }
  .tbc-mbar-sum b { font-size:17px; font-variant-numeric:tabular-nums; }
  .tbc-mbar .tbc-pay { margin:0; height:42px; padding:0 20px; }
  .tb-toast { bottom:150px; }
}
@media (max-width:700px) {
  .tbc-bar { gap:6px; }
  .tbc-cats > summary { padding:0 12px; }
  .tbc-cats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:60vh; overflow-y:auto; }
  .tbc-item { gap:9px; padding:9px 8px; align-items:flex-start; }
  .tbc-img { width:52px; height:52px; }
  .tbc-name { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:14px; }
  .tbc-btn { min-width:72px; height:34px; }
}
/* Latin product names inside Arabic pages: cut at the end of the name, not its start. */
.tbc-name { unicode-bidi:plaintext; }
[dir=rtl] .tbc-name { text-align:right; }
.tbc-pay { display:inline-flex; align-items:center; justify-content:center; gap:8px; }

/* ─── Categories first (setting store_shop_entry = categories, 2026-10-20) ───
   Search and the «الأقسام» switch on one line; the shop opens on category cards. */
.tbc-top { display:flex; align-items:center; gap:8px; margin-bottom:12px; position:relative; }
.tbc-top .tbc-search { flex:1; min-width:0; margin-bottom:0; }
.tbc-switch > summary { height:48px; border-radius:12px; padding:0 16px; gap:7px; font-size:15px; }
.tbc-switch .tbc-cats-grid { top:56px; }
.tbc-entry h1 { font-size:20px; font-weight:900; margin:4px 2px 12px; }
.tbc-entry-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.tbc-entry-card {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:22px 10px; min-height:150px;
  border:1px solid var(--line); border-radius:14px; background:#fff; color:var(--ink); text-align:center;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.tbc-entry-card:hover { border-color:var(--brand); box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.tbc-entry-card .tbc-entry-ic { width:72px; height:72px; }
.tbc-entry-card b { font-size:16px; font-weight:800; line-height:1.35; }
.tbc-entry-card small { color:var(--muted); font-size:12.5px; }
@media (max-width:700px) {
  .tbc-top { gap:6px; }
  .tbc-switch > summary { padding:0 12px; font-size:14px; }
  .tbc-entry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .tbc-entry-card { min-height:128px; padding:16px 8px; }
  .tbc-entry-card .tbc-entry-ic { width:60px; height:60px; }
  .tbc-entry-card b { font-size:14.5px; }
}
/* The «الأقسام» switch list: compact rows so every category fits without scrolling on a phone. */
.tbc-switch .tbc-cats-grid a { flex-direction:row; justify-content:flex-start; gap:8px; padding:8px 10px; text-align:start; }
.tbc-switch .tbc-cats-grid .tb-cat-img { width:38px; height:38px; flex:none; font-size:16px; }
.tbc-switch .tbc-cats-grid b { flex:1; min-width:0; font-size:13.5px; line-height:1.3; }
.tbc-switch .tbc-cats-grid small { flex:none; }
@media (max-width:700px) {
  .tbc-switch .tbc-cats-grid { grid-template-columns:minmax(0,1fr); gap:6px; max-height:70vh; }
}