/* BANK TRANSFER FROM NIGERIA (founder 2026-11-03: "If Nigerians are having issues with payment, they can use
   this option ... add it anywhere needed on the website where payments are collected", and then: "Tell them to
   make the payment, take the receipt and follow up with me to complete the task.").

   ONE stylesheet for every page that takes money, because the block is one component: remove-watermark.html
   (public), remove-badge.html, my-domains.html, upgrade-storage.html and fix-my-website.html all include this
   file and bank-transfer.js, and the account number is written in exactly one place (bank-transfer.js).

   SELF-CONTAINED ON PURPOSE. The public pages load glass.css, which defines no design tokens at all, while the
   app pages load styles.css, which defines them for dark AND light. So every token here carries a dark
   fallback: var(--text, #f2f7ff). On an app page the real token wins and the block follows the theme; on a
   public page the fallback wins and it stays dark. Nothing is hardcoded that a theme should decide.

   Two classes on every rule that app-shell.css could reach (.tbk .tbk-btn, not .tbk-btn): nginx injects
   app-shell.css AFTER the page stylesheets on tanix.app, so a single class loses to it. */
.tbk {
  margin: 18px 0 0;
  padding: 18px 18px 16px;
  border-radius: var(--radius-md, 16px);
  background: var(--bg-elevated, #04112e);
  border: 1px solid var(--border, rgba(70,140,255,0.16));
  font-family: var(--font-body, "Inter", "Segoe UI", sans-serif);
  color: var(--text, #f2f7ff);
  text-align: left;
}
.tbk-head { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.tbk-ic {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  color: #fff; background: linear-gradient(145deg, #1aa564, #0b7a46);
}
.tbk-ic svg { width: 21px; height: 21px; }
.tbk-head strong { display: block; font-size: 1rem; font-weight: 700; color: var(--text, #f2f7ff); }
.tbk-head span { display: block; font-size: 0.82rem; color: var(--text-muted, #a6b8db); }
.tbk-why { margin: 10px 0 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted, #a6b8db); }

/* NAIRA | DOLLARS. Two ways to pay, and only one of them is ever this reader's (bank-transfer.js), so they
   are tabs rather than two panels stacked down the page. The open one is the currency the page is already
   quoting; the other is one tap away for anyone the IP guess put in the wrong country. */
.tbk-tabs {
  display: flex; gap: 6px; margin: 14px 0 0; padding: 4px;
  border-radius: 999px; border: 1px solid var(--border, rgba(70,140,255,0.16));
  background: color-mix(in srgb, var(--text, #f2f7ff) 4%, transparent);
}
.tbk .tbk-tab {
  flex: 1 1 0; min-width: 0; padding: 8px 12px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.86rem; font-weight: 700;
  color: var(--text-muted, #a6b8db); background: transparent; border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease;
}
.tbk .tbk-tab:hover { color: var(--text, #f2f7ff); }
.tbk .tbk-tab.is-on {
  color: var(--text, #f2f7ff);
  background: color-mix(in srgb, var(--accent, #1f7bff) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent, #1f7bff) 45%, transparent);
}
.tbk-pane[hidden] { display: none; }
/* The card tab: one line and one button, because there is no account to copy and no receipt to send. */
.tbk-card { margin: 0; }
.tbk-card .tbk-why { margin: 12px 0 0; }
.tbk .tbk-go { margin: 14px 0 0; }
.tbk-card .tbk-fine:empty { display: none; }

/* The account itself. A definition list, so a screen reader reads "Account number, 3075810408". */
.tbk-rows { margin: 12px 0 0; display: grid; gap: 2px; }
.tbk-rows > div {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--border, rgba(70,140,255,0.16));
}
.tbk-rows > div:first-child { border-top: 0; }
.tbk-rows dt { font-size: 0.86rem; color: var(--text-muted, #a6b8db); }
.tbk-rows dd {
  margin: 0; min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 8px 10px; color: var(--text, #f2f7ff);
}
.tbk-rows dd strong { font-weight: 700; }
.tbk-acct {
  font-family: var(--font-head, "Space Grotesk", "Segoe UI", sans-serif);
  font-size: 1.35rem; letter-spacing: 0.06em;
}
/* The Cashtag is also a link into Cash App. The Zelle address is an email, which is long enough to push the
   copy button off a 320px phone unless it is allowed to break. */
.tbk a.tbk-tag { color: var(--text, #f2f7ff); text-decoration: none; border-bottom: 1px solid currentColor; }
.tbk a.tbk-tag:hover { color: var(--accent-2, #38b6ff); }
.tbk-wrap { word-break: break-all; font-weight: 700; }
.tbk .tbk-copy {
  display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 0.8rem; font-weight: 700;
  color: var(--accent-2, #38b6ff);
  background: color-mix(in srgb, var(--accent-2, #38b6ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2, #38b6ff) 35%, transparent);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.tbk .tbk-copy svg { width: 14px; height: 14px; }
.tbk .tbk-copy:hover { background: color-mix(in srgb, var(--accent-2, #38b6ff) 20%, transparent); }
.tbk .tbk-copy.is-done {
  color: #16a34a;
  border-color: color-mix(in srgb, #16a34a 45%, transparent);
  background: color-mix(in srgb, #16a34a 12%, transparent);
}

/* Pay, keep the receipt, send it to him. Three steps, numbered, because that is the whole instruction. */
.tbk-steps { counter-reset: tbk; list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.tbk-steps li {
  counter-increment: tbk; position: relative;
  padding: 0 0 0 32px; font-size: 0.9rem; line-height: 1.55;
  color: var(--text-muted, #a6b8db);
}
.tbk-steps li::before {
  content: counter(tbk); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, #1f7bff) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, #1f7bff) 45%, transparent);
  color: var(--text, #f2f7ff);
  font-family: var(--font-head, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.76rem;
}
.tbk-steps b { color: var(--text, #f2f7ff); font-weight: 700; }
.tbk-amt { font-family: var(--font-head, "Space Grotesk", sans-serif); letter-spacing: 0.01em; }

.tbk-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.tbk .tbk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: inherit; font-size: 0.88rem; font-weight: 700;
  color: var(--accent-contrast, #fff);
  background: linear-gradient(135deg, #1aa564, #0b7a46);
  border: 1px solid transparent;
}
.tbk .tbk-btn svg { width: 16px; height: 16px; }
.tbk .tbk-btn:hover { filter: brightness(1.08); }
.tbk .tbk-btn.is-quiet {
  color: var(--text, #f2f7ff); background: transparent;
  border-color: var(--border, rgba(70,140,255,0.16));
}
.tbk .tbk-btn.is-quiet:hover { background: color-mix(in srgb, var(--text, #f2f7ff) 7%, transparent); filter: none; }
.tbk-fine { margin: 12px 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--text-muted, #a6b8db); }

@media (max-width: 560px) {
  .tbk { padding: 16px 14px 14px; }
  .tbk-acct { font-size: 1.15rem; }
  .tbk .tbk-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .tbk * { transition: none !important; } }