/* AirtimePap — universal branding. ONE source of truth for the logo and brand colours.
 *
 * On every page:
 *   <link rel="stylesheet" href="/brand.css">
 *   <div class="logo"><span class="bars"><i></i><i></i><i></i><i></i></span><span class="word">AirtimePap</span></div>
 *   (optional context label, e.g. Admin / Dealer: add <span class="logo-suffix">Admin</span> right after .logo)
 *
 * Size it by setting font-size on .logo — everything scales from there.
 * This is the locked logo (ROADMAP): Times New Roman wordmark, all green; 4 baseline bars,
 * 2 short red + 2 tall green.
 */
:root {
  --ap-green: #6FB93D;       /* brand / wordmark */
  --ap-green-deep: #4E8F28;  /* buttons, white text on green */
  --ap-red: #D70C1C;         /* signal bars accent (Airtel) */
  --ap-gold: #CAA24A;        /* points / rewards */
  --ap-ink: #1B2A16;
}

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: .17em;
  font-family: "Times New Roman", Times, serif;
  font-size: var(--ap-logo-size, 28px);   /* size with --ap-logo-size on a parent (logo + suffix scale together) */
  line-height: 1;
  white-space: nowrap;
}
.logo .bars {
  display: inline-flex;
  align-items: flex-end;
  gap: .11em;
  height: .68em;
  align-self: baseline;
}
.logo .bars i {
  width: .135em;
  border-radius: 2px 2px 0 0;
  display: block;
}
.logo .bars i:nth-child(1) { height: 49%; background: var(--ap-red); }
.logo .bars i:nth-child(2) { height: 66%; background: var(--ap-red); }
.logo .bars i:nth-child(3) { height: 83%; background: var(--ap-green); }
.logo .bars i:nth-child(4) { height: 100%; background: var(--ap-green); }
.logo .word {
  font-weight: 400;
  line-height: 1;
  color: var(--ap-green);
  font-size: 1em;
}

/* Context label beside the logo (Admin, Dealer, …) — bold sans-serif, its caps matching the wordmark. */
.logo-suffix {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #5b6470;
  font-weight: 700;
  font-size: calc(var(--ap-logo-size, 28px) * .62);  /* caps ≈ the wordmark's "A" */
  letter-spacing: .01em;
  align-self: baseline;
  margin-left: .9em;                                  /* pushed right, clear of the wordmark */
}

/* The app icon (dark tile with the 4 bars), used wherever a signal icon is needed — never the 📶 emoji.
 *   <img class="ap-icon" src="/img/airtimepap-icon.svg" alt="">
 * It sizes with the text around it. */
.ap-icon { width: 1.15em; height: 1.15em; vertical-align: -.2em; border-radius: .22em; display: inline-block; }

/* Number boxes look the same on every customer page (buy, from abroad, dealers, statement): the "0" in front and the
 * digits in one font and size, sitting on one line, the box itself carrying the border. Pages with the shared header
 * (nav.js adds body.ap-has-tabs) only, so the admin's forms keep their own look. */
body.ap-has-tabs input[inputmode="numeric"] { font-family: "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; letter-spacing: .02em; }
body.ap-has-tabs .phonefield { display: flex; align-items: center; gap: 0; }
body.ap-has-tabs .phonefield:focus-within { border-color: var(--ap-green); }
body.ap-has-tabs .phonefield > span { font-family: "Times New Roman", Times, serif; font-size: 22px; font-weight: 400; color: var(--ap-ink); padding: 0 0 0 14px !important; line-height: 1; }
body.ap-has-tabs .phonefield input { border: 0 !important; outline: none; box-shadow: none; background: transparent; padding: 11px 12px 11px 1px !important; width: 100%; min-width: 0; }
/* Box labels: sentence case and bold on every customer page */
body.ap-has-tabs label { font-weight: 700; text-transform: none; }

/* The share symbol (three connected dots) on every Share button */
.ap-share-i { width: 1em; height: 1em; fill: currentColor; stroke: currentColor; stroke-width: 2; vertical-align: -.12em; flex: 0 0 auto; }

/* Phones: every typing box at least 16px, so iPhone Safari doesn't zoom the page in when one is tapped (that zoom makes
   the page look as if it spills past the screen). Applies on every page that loads brand.css. */
@media (max-width: 999px) {
  input, select, textarea { font-size: 16px !important; }
}
/* "KES" in front of a money box (send, dealers), muted and spaced like the Buy page's */
.phonefield .z.kes { margin-right: 6px; color: #6b7280; }
/* the typing box fills the space beside "0" / "KES" and never runs past the box's edge (it used to, hiding the cursor's end) */
.phonefield input { flex: 1; min-width: 0; width: auto; }