.button-primary {
  border: 0;
  border-radius: var(--kasb-radius-pill);
  min-height: 48px;
  padding-block: 15px;
  padding-inline: 28px;
  background: var(--kasb-brand);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--kasb-dur-tap) var(--kasb-ease-exit);
}
.button-primary:hover { background: var(--kasb-brand-hover); }
.button-primary:active { background: var(--kasb-brand-press); }
.button-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Graphite, never magenta — so the mada and Apple Pay marks stay the most
   saturated thing on the screen. */
.button-pay {
  border: 0;
  border-radius: var(--kasb-radius-lg);
  min-height: 52px;
  padding: 16px;
  width: 100%;
  background: var(--kasb-text);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.button-pay:disabled { opacity: 0.4; cursor: not-allowed; }

/* The amount always carries its result underneath. Never the amount alone. */
.amount-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kasb-space-1);
  min-height: 54px;
  padding-block: 11px;
  border: 1px solid var(--kasb-hairline);
  border-radius: var(--kasb-radius-pill);
  background: var(--kasb-surface);
  color: var(--kasb-text);
  font: inherit;
  cursor: pointer;
}
.amount-chip[aria-pressed="true"] {
  border-color: var(--kasb-brand);
  background: var(--kasb-brand-tint);
}
.amount-chip__amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.amount-chip__result { font-size: 13px; line-height: 1.6; color: var(--kasb-text-2); }

.input,
.textarea {
  width: 100%;
  border: 1px solid var(--kasb-hairline);
  border-radius: var(--kasb-radius-md);
  padding-block: 13px;
  padding-inline: 14px;
  background: var(--kasb-surface);
  color: var(--kasb-text);
  font: inherit;
}
.input { min-height: 48px; }
.textarea { min-height: 96px; resize: vertical; }
.input:focus,
.textarea:focus { border-color: var(--kasb-brand); outline: none; }

/* Icon, word and colour — always all three. Never colour alone. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--kasb-space-2);
  min-height: 32px;
  padding-block: 8px;
  padding-inline: 14px;
  border-radius: var(--kasb-radius-pill);
  font-size: 13px;
}
.status-pill--money { background: var(--kasb-money-tint); color: var(--kasb-money); }
.status-pill--pending { color: var(--kasb-pending); }
.status-pill--error { color: var(--kasb-error); }

/* Radius 14, padding 16. No shadow in the light theme — a hairline border
   carries the separation from the ground instead, in both themes. */
.card {
  border-radius: var(--kasb-radius-lg);
  padding: var(--kasb-space-4);
  background: var(--kasb-surface);
  border: 1px solid var(--kasb-hairline);
}

/* A payment-method mark that is not the real artwork yet. Dashed, muted and
   carrying the word PLACEHOLDER on purpose — the official mada and Apple Pay
   marks require each brand's usage guide, which TODO.md carries as an open
   follow-up. A solid, confident-looking mark here would read as "we have the
   licence" to everyone including us. Promoted out of public/checkout.css when
   the marketing home page became its second caller, the same way .list-row
   was promoted below. */
.mark {
  border: 1px dashed var(--kasb-hairline);
  border-radius: var(--kasb-radius-sm);
  padding: var(--kasb-space-2) var(--kasb-space-3);
  font-size: 11px;
  color: var(--kasb-text-3);
}

/* Radius 11, height 56, padding 11×13 (block×inline) — the same shape
   slice 1's moderation control page drew ad hoc as `.control__row`
   (public/moderation.css); promoted here so the messages list and the
   dashboard's today's-messages list share one definition instead of a
   third copy. Content order in RTL is amount · name · time: the paid
   amount reads first, where a glance lands, then who sent it, then when. */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--kasb-space-3);
  min-height: 56px;
  padding-block: 11px;
  padding-inline: 13px;
  border-radius: 11px;
  background: var(--kasb-surface);
  border: 1px solid var(--kasb-hairline);
}
/* Graphite, not mint and never magenta — a line-item amount is a fact, not
   a status (mint/status-pill--money is for aggregates and outcomes, e.g.
   the dashboard total). font-variant-numeric keeps digits column-aligned;
   direction: ltr plus unicode-bidi: isolate stop RTL from reordering the
   Western numerals without dragging the rest of the row into LTR. */
.list-row__amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}
.list-row__name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-row__time {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--kasb-text-3);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Radius 0, height 64 — flush to the viewport edge, not a floating pill.
   Five tabs; الإشراف carries a count badge once the moderation-filter
   slice has a real number to put in it (see ShellOptions.moderationCount
   in features/app/shell.ts — this slice never renders one). Fixed
   positioning and safe-area padding are the shell's job (public/app.css),
   not this component's — this only draws the bar and its items. */
.tab-bar {
  display: flex;
  align-items: stretch;
  height: 64px;
  border-radius: 0;
  background: var(--kasb-surface);
  border-block-start: 1px solid var(--kasb-hairline);
}
.tab-bar__item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kasb-space-1);
  color: var(--kasb-text-3);
  font-size: 13px;
  line-height: 1.6;
  text-decoration: none;
}
.tab-bar__item[aria-current="page"] { color: var(--kasb-brand); }
/* Positioned relative to the item, not the label, so it sits at a fixed
   corner regardless of the Arabic label's length. */
.tab-bar__badge {
  position: absolute;
  top: 6px;
  inset-inline-end: 22%;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  border-radius: var(--kasb-radius-pill);
  background: var(--kasb-brand);
  color: #fff;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}