/* Subscription Credit (wallet) top-up UI, shared by the account page and the checkout.
   Mobile-first: single column, 16px inputs (no iOS zoom), >=44px touch targets. */
.wt { text-align: left; font-size: .92rem; color: #212529; max-width: 100%; box-sizing: border-box; }
.wt *, .wt *::before, .wt *::after { box-sizing: border-box; }
.wt-help { margin: 2px 0 8px; color: #555; font-size: .85rem; }
.wt-code { width: 100%; min-height: 48px; padding: 8px 12px; font-size: 16px; font-family: monospace; text-transform: uppercase; letter-spacing: .12em; border: 1px solid #ced4da; border-radius: 6px; }
.wt-code:focus { outline: 2px solid #28a745; outline-offset: 1px; }
.wt-inline-error { color: #dc3545; font-size: .8rem; margin: 4px 0 0; }
.wt-ack { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0; }
.wt-ack input { margin-top: 4px; flex: 0 0 auto; width: 18px; height: 18px; }
.wt-ack label { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-size: .85rem; line-height: 1.35; color: #333; margin: 0; text-align: left; }
.wt-submit { width: 100%; min-height: 46px; font-weight: 600; }
.wt-spinner { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: wt-spin .8s linear infinite; vertical-align: -2px; }
@keyframes wt-spin { to { transform: rotate(360deg); } }
.wt-alert { padding: 12px 14px; margin-top: 8px; border-radius: 6px; font-size: .9rem; }
.wt-alert-success { background: #e9f7ee; border: 1px solid #b7e2c4; }
.wt-alert-error { background: #fdecee; border: 1px solid #f3b8be; color: #842029; }
.wt-actions { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wt-link { background: none; border: 0; color: #1e7e34; text-decoration: underline; padding: 0; cursor: pointer; font-size: .85rem; }
.wt-balance { font-size: 1.8rem; font-weight: 700; line-height: 1.1; color: #212529; }
@media (min-width: 576px) {
  .wt-submit { width: auto; min-width: 180px; }
}

/* Checkout: automated (phone number) is the default; Paybill details are a quiet secondary row that
   replaces the phone form while open. */
.wt-cascade-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 0; margin-top: .25rem; background: none; border: 0; border-top: 1px solid #e3e6ea; color: #1e7e34; font-size: .9rem; font-weight: 600; text-align: left; cursor: pointer; }
.wt-cascade-toggle .fa { font-size: 1.2rem; flex: 0 0 auto; margin-left: 8px; }
.wt-cascade-toggle span { min-width: 0; overflow-wrap: anywhere; }
.wt-hint { display: block; font-weight: 400; color: #666; }
.wt-manual { text-align: left; padding-bottom: 1rem; margin-top: 1rem; }
/* "Back to phone payment": a clear way out of the Paybill panel, spaced away from the payment-method button above. */
.wt-back { display: inline-flex; align-items: center; gap: 8px; margin: .25rem 0 1rem; padding: 8px 14px; min-height: 40px; background: #fff; border: 1px solid #28a745; border-radius: 999px; color: #1e7e34; font-size: .85rem; font-weight: 600; text-align: left; cursor: pointer; }
.wt-back .fa { flex: 0 0 auto; }
.wt-back:active { background: #e9f7ee; }

/* The checkout wizard styles every input inside .wizard-step-fields as a full-width underlined field
   (#msform .wizard-step-fields input). That rule outranks the plain .wt-ack rule and stretched the
   checkbox across the row, squeezing its label to one letter per line - so re-assert it here. */
#msform .wizard-step-fields .wt-ack input[type="checkbox"] {
    width: 18px; height: 18px; flex: 0 0 18px; padding: 0; margin: 3px 0 0; border: initial; letter-spacing: normal;
}

/* Top-up history: each submitted code with a status that moves Validating -> Successful / Failed. */
.wt-history { margin-top: 16px; }
.wt-history-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: #6c757d; margin: 0 0 6px; }
.wt-history-list { list-style: none; margin: 0; padding: 0; border: 1px solid #e3e6ea; border-radius: 6px; }
.wt-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #eef0f2; }
.wt-row:last-child { border-bottom: 0; }
.wt-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.wt-row-main code { font-weight: 700; letter-spacing: .06em; color: #111; background: none; padding: 0; }
.wt-row-time { color: #6c757d; font-size: .78rem; }
.wt-row-msg { flex: 1 0 100%; color: #842029; font-size: .8rem; }
.wt-badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 104px; justify-content: center; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.wt-badge-wait { background: #fff4d6; color: #7a5b00; }
.wt-badge-ok { background: #e2f4e8; color: #1e7e34; }
.wt-badge-bad { background: #fdecee; color: #842029; }
/* A gentle pulse instead of a spinner: it signals "working" without looking like a hung page. */
.wt-dot { width: 8px; height: 8px; border-radius: 50%; background: #e0a800; animation: wt-pulse 1.4s ease-in-out infinite; }
@keyframes wt-pulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .wt-dot { animation: none; } }
@media (max-width: 420px) {
  .wt-row { flex-wrap: wrap; }
  .wt-badge { min-width: 0; }
  .wt-row-main { flex: 1 0 100%; order: 3; }
}

.wt-account-link { margin-top: 10px; min-height: 40px; display: inline-flex; align-items: center; }

/* Top-up history pager */
.wt-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.wt-page-btn { min-height: 40px; min-width: 88px; padding: 0 12px; background: #fff; border: 1px solid #28a745; border-radius: 6px; color: #1e7e34; font-weight: 600; cursor: pointer; }
.wt-page-btn:disabled { border-color: #ced4da; color: #adb5bd; cursor: default; }
.wt-page-info { font-size: .8rem; color: #555; }

/* Checkout payment-method button: M-Pesa and Airtel logos beside the label. */
.wt-method-logos { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-right: 8px; }
.wt-method-label { vertical-align: middle; font-weight: 600; }

/* The checkout wizard styles every input as an underlined, borderless field (#msform .wizard-step-fields input),
   which made the code box look different from the rest of the panel and misaligned. Re-assert the boxed field. */
#msform .wizard-step-fields input.wt-code, #msform .wizard-step-fields textarea.wt-code, input.wt-code, textarea.wt-code {
    display: block; width: 100%; max-width: 100%; height: auto; min-height: 48px; margin: 0; padding: 8px 12px;
    background: #fff; border: 1px solid #ced4da; border-radius: 6px; text-align: left; box-shadow: none;
    font-family: monospace; font-size: 16px; letter-spacing: .12em; color: #212529;
}
#msform .wizard-step-fields input.wt-code:focus, #msform .wizard-step-fields textarea.wt-code:focus, input.wt-code:focus, textarea.wt-code:focus { border-color: #28a745; outline: 2px solid #28a745; outline-offset: 1px; }

/* Lipa na M-Pesa sticker: the Paybill details styled like the poster at a shop counter. */
.wt-sticker { border: 2px solid #43b02a; border-radius: 10px; overflow: hidden; background: #fff; margin-bottom: 16px; }
.wt-sticker-head { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 8px 12px; background: #43b02a; color: #fff; font-size: 1rem; letter-spacing: .06em; }
.wt-sticker-head b { font-weight: 800; }
.wt-sticker-row { padding: 8px 12px 10px; border-top: 1px solid #e1f0dc; }
.wt-sticker-row:first-of-type { border-top: 0; }
.wt-sticker-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; color: #2f7d1f; margin-bottom: 4px; }
.wt-sticker-value { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wt-amount { font-size: 1.25rem; font-weight: 800; color: #111; }
.wt-amount-plan { color: #666; margin-left: auto; }

/* Reference entry: a plain label + an obviously-editable box; the example sits below, clearly not a value. */
.wt-label { display: block; font-weight: 600; font-size: .9rem; margin: 0 0 6px; color: #212529; }
/* The code is typed in capitals with wide spacing; the placeholder is an instruction, so keep it plain. */

/* Character boxes shrink to fit the card (7 boxes + the copy icon must fit a 320px phone); the copy control is a small icon. */
.wt-digits { display: flex; flex: 1 1 auto; flex-wrap: nowrap; gap: 3px; min-width: 0; }
.wt-digit { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; max-width: 34px; height: 34px; border: 1.5px solid #43b02a; border-radius: 4px; background: #f6fbf4; font: 700 1.05rem/1 monospace; color: #111; }
.wt-copy { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid #b7e2c4; border-radius: 50%; background: #fff; color: #1e7e34; cursor: pointer; }
.wt-copy:active, .wt-copy:focus-visible { background: #e9f7ee; outline: 2px solid #43b02a; outline-offset: 1px; }
.wt-icon-done { color: #1e7e34; }
.wt-example { margin: 6px 0 0; font-size: .78rem; color: #868e96; }
.wt-example-chip { margin-left: 4px; font-family: monospace; font-size: .7rem; letter-spacing: .08em; color: #adb5bd; user-select: none; -webkit-user-select: none; }

/* Recent activity on the account page: a quiet, collapsible card. */
.wt-badge-used { background: #eceff1; color: #455a64; }
.wt-row-label { font-weight: 600; color: #212529; }
.wt-history-card { margin-top: 14px; }
textarea.wt-code { resize: none; overflow: hidden; line-height: 1.4; }
.wt-found { margin: 6px 0 0; font-size: .85rem; font-weight: 600; color: #1e7e34; }
.wt-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.wt-pick code { color: inherit; font-weight: 700; letter-spacing: .06em; background: none; padding: 0; }
/* The hint is a sentence, not a code: plain small type so "Paste M-Pesa message or type code" fits on one line on a phone. */
.wt-code::placeholder { text-transform: none; letter-spacing: normal; font-family: Roboto, Arial, sans-serif; font-size: 14px; color: #868e96; }

/* Spinner beside a code that is still being validated: the customer is watching this row for the result. */
.wt-spin { display: inline-block; width: 16px; height: 16px; align-self: center; border: 2px solid #f0d78a; border-top-color: #e0a800; border-radius: 50%; animation: wt-spin .8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .wt-spin { animation-duration: 2.4s; } }

/* Paying from credit: a small confirm card (explicit colours: the checkout wizard greys all text inside its cards). */
#msform .wt-credit-pay { padding: 14px; border: 1px solid #b7e2c4; border-radius: 10px; background: #f6fbf4; text-align: left; color: #212529; }
#msform .wt-credit-pay .wt-back { margin: 0 0 12px; }
#msform .wt-credit-summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #dcefd6; border-bottom: 1px solid #dcefd6; color: #212529; }
#msform .wt-credit-plan { font-size: 1.05rem; font-weight: 600; }
#msform .wt-credit-price { font-size: 1.35rem; font-weight: 800; }
#msform .wt-credit-note { margin: 8px 0 12px; font-size: .85rem; line-height: 1.3; color: #5f6b62; }
#msform .wt-credit-pay .text-danger { line-height: 1.3; margin: 0 0 10px; }

/* Waiting for Safaricom's callback: one large spinner and two short lines instead of a paragraph. */
.wt-waiting { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; padding: 22px 16px; text-align: center; background: #fffaf0; border: 1px solid #f0d78a; border-radius: 10px; }
.wt-spin-lg { display: block; width: 52px; height: 52px; margin-bottom: 6px; border: 5px solid #f3e2a9; border-top-color: #e0a800; border-radius: 50%; animation: wt-spin .9s linear infinite; }
#msform .wt-waiting-title, .wt-waiting-title { font-size: 1.05rem; color: #212529; line-height: 1.3; }
#msform .wt-waiting-line, .wt-waiting-line { font-size: .85rem; line-height: 1.35; color: #5f5a4a; }
@media (prefers-reduced-motion: reduce) { .wt-spin-lg { animation-duration: 2.8s; } }

/* Wait bar: fills over the typical time (7.3 s); if the result is late it becomes a moving stripe instead of sitting at 100%. */
.wt-bar { width: 100%; max-width: 260px; height: 8px; margin: 6px 0 2px; overflow: hidden; background: #f3e2a9; border-radius: 999px; }
.wt-bar-fill { display: block; height: 100%; background: #e0a800; border-radius: 999px; transition: width .2s linear; }
.wt-bar-slow .wt-bar-fill { width: 100% !important; background: repeating-linear-gradient(45deg, #e0a800 0 10px, #f0c23d 10px 20px); background-size: 28px 28px; animation: wt-stripe .8s linear infinite; }
@keyframes wt-stripe { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .wt-bar-slow .wt-bar-fill { animation: none; } .wt-bar-fill { transition: none; } }