/* ============================================================
   VENTURA — account screens
   Logical properties only.
   ============================================================ */

.account { max-inline-size: 44rem; }

.tabs { display: flex; gap: var(--s-2); margin-block: var(--s-6) var(--s-5); }
.tab {
  font: inherit; padding: var(--s-3) var(--s-5); cursor: pointer;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-pill); color: var(--ink);
}
.tab.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }

.acc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-block: var(--s-6) var(--s-5);
  padding-block-end: var(--s-4); border-block-end: 1px solid var(--line);
}
.acc-who { font-weight: 500; margin: 0; }
.acc-in h2 { font-size: var(--fs-h4); margin-block: var(--s-7) var(--s-4); }

.bk {
  display: grid; gap: var(--s-2) var(--s-4);
  grid-template-columns: 1fr auto;
  padding: var(--s-4); margin-block-end: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-card);
}
.bk-ref { font-size: var(--fs-body-sm); color: var(--ink-muted); }
.bk-when { font-weight: 500; }
/* text-align: end في اتجاه RTL يعني اليسار، فكان الإجمالي يُحاذى يساراً في
   صفحة عربية. العربية تُحاذى يميناً أو وسطاً ولا شيء ثالث. والرقم معزول
   بـ .num فلا ينقلب داخل الجملة. */
.bk-total { font-weight: 700; text-align: start; }
.bk-state {
  font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--bg); border: 1px solid var(--line);
  color: var(--ink-muted); justify-self: start;
}
html[lang="ar"] .bk-state { letter-spacing: 0; text-transform: none; }
.bk-state.is-paid { background: color-mix(in srgb, var(--olive) 16%, transparent); color: var(--olive); }
.bk-state.is-cancelled { background: color-mix(in srgb, var(--terracotta) 14%, transparent); color: var(--terracotta-dk); }
.bk-actions { grid-column: 1 / -1; display: flex; gap: var(--s-2); }
.acc-empty { color: var(--ink-muted); font-size: var(--fs-body-sm); }