/* Provider branding follows the wallet on each row, including the ME PAY aggregate. */
[data-history-wallet],
.transaction-row[data-wallet] {
  --history-tint: color-mix(in srgb, var(--history-accent) 12%, white);
  --history-border: color-mix(in srgb, var(--history-accent) 35%, white);
}
[data-history-wallet] .wallet-history-heading h3,
.wallet-history-page .wallet-history-page-header :is(h2, p) {
  color: var(--history-ink);
}
.wallet-history-page .wallet-history-balance {
  background: var(--history-tint);
  border-left: 4px solid var(--history-accent);
}
.wallet-history-page .wallet-history-balance :is(span, strong) {
  color: var(--history-ink);
}
.phone .wallet-history-page .wallet-history-back {
  background: var(--history-tint);
  border-color: var(--history-border);
  color: var(--history-ink);
}
[data-history-wallet] .wallet-history-open {
  background: var(--history-ink);
  border-radius: 50%;
  width: 36px;
  height: 36px;
}
[data-history-wallet] .wallet-history-open img {
  mix-blend-mode: screen;
}
.phone
  [data-history-wallet]
  :is(.wallet-history-open, .wallet-history-back):focus-visible {
  outline-color: var(--history-ink);
}
.transaction-row[data-wallet] .wallet-category-icon {
  background: var(--history-tint);
  border: 1px solid var(--history-border);
}
/* Distinct blue strengths make the source identifiable before reading the label. */
.transaction-row[data-wallet="coris"] .wallet-category-icon {
  background: #003b69;
  border-color: #003b69;
}
.transaction-row[data-wallet="ecobank"] .wallet-category-icon {
  background: #0078a8;
  border-color: #0078a8;
}
.transaction-row[data-wallet="wave"] .wallet-category-icon {
  background: #24c3e9;
  border-color: #16a8d1;
}
.transaction-row:is([data-wallet="coris"], [data-wallet="ecobank"])
  .wallet-category-icon
  img {
  filter: brightness(0) invert(1);
}
.transaction-row[data-wallet] .wallet-transaction-category {
  color: var(--history-ink);
}
/* Amount colours communicate direction consistently across every provider. */
.transaction-row[data-wallet] .transaction-amount {
  color: #c62828;
}
.transaction-row[data-wallet] .transaction-amount.incoming {
  color: inherit;
}
.transaction-row[data-wallet] .transaction-amount .wallet-original-amount {
  color: inherit;
}
.transaction-row[data-wallet] .wallet-transaction-provider {
  color: var(--history-ink);
  background: var(--history-tint);
  border-left: 3px solid var(--history-accent);
  border-radius: 4px;
  align-self: flex-start;
  padding: 3px 6px;
  font-weight: 600;
}
.history-provider-filter {
  position: relative;
  margin: 0 0 24px;
}
.history-provider-filter .label {
  color: var(--history-ink);
}
#historyProviderButton {
  width: 100%;
  text-align: left;
  border-color: var(--history-border);
  box-shadow: var(--control-shadow);
}
#historyProviderValue,
#historyProviderList button {
  display: flex;
  align-items: center;
  gap: 10px;
}
.history-provider-filter img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex: none;
}
#historyProviderList {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--history-border);
  border-radius: 12px;
  background: #fff;
  margin-top: 6px;
  box-shadow: 0 6px 18px #183e481a;
}
#historyProviderList[hidden] {
  display: none;
}
#historyProviderList button {
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: #fff;
  color: #25414a;
  font:
    500 14px Montserrat,
    Arial,
    sans-serif;
  text-align: left;
  cursor: pointer;
}
#historyProviderList button:is(:hover, :focus-visible, [aria-selected="true"]) {
  background: var(--history-tint);
}
.history-balance-provider {
  font-weight: 600;
}