/* ------------------------------------------------------------------ *
   Flexipay — visual system

   Ground is deep navy rather than black: it reads as calm and financial
   without the harshness of pure black on cheap LCD screens, and it lets the
   mobile money brand colours sit on top without clashing.

   Jade carries every "money moving in the right direction" moment. Amber is
   reserved for waiting states only, so it never competes with jade.
 * ------------------------------------------------------------------ */

:root {
  --ink:        #12203A;
  --ink-2:      #1B2E4E;
  --ink-3:      #2A4068;
  --paper:      #F6F8FB;
  --paper-dim:  #DCE3ED;
  --slate:      #8496B0;

  --jade:       #12A66E;
  --jade-lift:  #35C68C;
  --jade-ghost: rgba(18, 166, 110, .14);

  --amber:      #E8A33D;
  --rose:       #E4574F;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:    "Inter", system-ui, -apple-system, sans-serif;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  --pad: 20px;
  --tabbar: 68px;
}

* { box-sizing: border-box; }

/* The browser hides [hidden] elements with `display: none` from its own
   stylesheet, which any class-based `display` rule below would outrank.
   Panes are switched with the hidden attribute, so this has to win. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100dvh;
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad) 8px;
}

.logo {
  height: 26px;
  width: auto;
  display: block;
}

.linkbtn {
  background: none;
  border: 0;
  color: var(--slate);
  font: inherit;
  font-size: 13px;
  padding: 6px;
  cursor: pointer;
}

.linkbtn:hover { color: var(--paper); }

/* ---------- Layout ---------- */

.pane {
  padding: 12px var(--pad) 32px;
  max-width: 520px;
  margin: 0 auto;
  animation: rise .32s cubic-bezier(.2, .7, .3, 1) both;
}

.pane.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 56px;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pane { animation: none; }
  * { transition: none !important; }
}

/* ---------- Type ---------- */

.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 16px 0 10px;
}

.display.sm { font-size: 27px; }

.lede {
  color: var(--slate);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 26px;
}

.muted { color: var(--slate); font-size: 15px; line-height: 1.5; }
.muted.small { font-size: 13px; }

.section-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 30px 0 10px;
}

/* ---------- Repayment arc (signature) ---------- */

.arc-card {
  position: relative;
  margin: 8px auto 0;
  max-width: 300px;
}

.arc { width: 100%; display: block; overflow: visible; }

.arc-track,
.arc-fill {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
}

.arc-track { stroke: var(--ink-3); }

.arc-fill {
  stroke: var(--jade);
  stroke-dasharray: 264;      /* full semicircle length, set precisely in JS */
  stroke-dashoffset: 264;
  filter: drop-shadow(0 0 10px var(--jade-ghost));
  transition: stroke-dashoffset 1.1s cubic-bezier(.25, .8, .3, 1);
}

.arc-centre {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.arc-pct {
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.arc-caption {
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 5px;
}

.freedate {
  text-align: center;
  color: var(--slate);
  font-size: 14px;
  margin: 16px 0 26px;
}

.freedate strong {
  color: var(--jade-lift);
  font-weight: 600;
}

/* ---------- Balance and stats ---------- */

.balance {
  background: var(--ink-2);
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.balance-label,
.stat-label {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
}

.balance-amount {
  font-family: var(--display);
  font-weight: 700;
  font-size: 31px;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: 11px;
}

.stat {
  background: var(--ink-2);
  border-radius: var(--r-md);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Payment history ---------- */

.payments { list-style: none; margin: 0; padding: 0; }

.payments li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--ink-3);
}

.payments li:last-child { border-bottom: 0; }

.pay-date { font-size: 14px; }

.pay-via {
  display: block;
  font-size: 12px;
  color: var(--slate);
  margin-top: 2px;
}

.pay-amt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--jade-lift);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.payments .empty {
  border: 0;
  color: var(--slate);
  font-size: 14px;
  padding: 13px 0;
}

/* ---------- Forms ---------- */

.field { display: block; margin-bottom: 16px; }

.field-label {
  display: block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  background: var(--ink-2);
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  color: var(--paper);
  font: inherit;
  font-size: 17px;              /* 17px keeps iOS from zooming on focus */
  padding: 15px 16px;
  font-variant-numeric: tabular-nums;
}

.field input::placeholder { color: #4A5F80; }

.field input:focus {
  outline: none;
  border-color: var(--jade);
  background: var(--ink-2);
}

.field input:focus-visible { outline: 2px solid var(--jade-lift); outline-offset: 2px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 18px;
}

.chip {
  background: var(--ink-2);
  border: 1.5px solid var(--ink-3);
  border-radius: 999px;
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}

.chip:hover { border-color: var(--jade); }

.error {
  color: var(--rose);
  font-size: 14px;
  margin: 0 0 14px;
  line-height: 1.45;
}

/* ---------- Buttons ---------- */

.btn {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -.01em;
  padding: 17px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform .12s ease, background .2s ease;
}

.btn-primary { background: var(--jade); color: #04180F; }
.btn-primary:hover { background: var(--jade-lift); }
.btn-primary:active { transform: scale(.985); }
.btn-primary:disabled { background: var(--ink-3); color: var(--slate); cursor: default; }
.btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

#btn-pay-now { margin-top: 28px; }

.backbtn {
  background: none;
  border: 0;
  color: var(--slate);
  font: inherit;
  font-size: 14px;
  padding: 6px 0;
  margin-bottom: 4px;
  cursor: pointer;
}

.backbtn:hover { color: var(--paper); }

/* ---------- Provider choice ---------- */

.providers { display: flex; flex-direction: column; gap: 11px; }

.provider {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  background: var(--ink-2);
  border: 1.5px solid transparent;
  border-radius: var(--r-lg);
  color: var(--paper);
  font: inherit;
  padding: 15px 18px;
  cursor: pointer;
  text-align: left;
  transition: border-color .18s ease, transform .12s ease;
}

.provider:hover { border-color: var(--ink-3); }
.provider:active { transform: scale(.99); }
.provider:focus-visible { outline: 2px solid var(--jade-lift); outline-offset: 2px; }

.provider-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.provider[data-provider="orange"] .provider-mark {
  background: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 6px;
  object-fit: contain;
}

/* Each provider keeps its own brand colour — customers recognise these
   faster than any label, and the neutral surface lets them stand out. */

.provider-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
}

/* ---------- Waiting and result ---------- */

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--ink-3);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 22px;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

.waiting-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  margin: 0 0 10px;
}

.result-mark {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 30px;
  margin-bottom: 20px;
}

.result-mark.ok   { background: var(--jade-ghost); color: var(--jade-lift); }
.result-mark.fail { background: rgba(228, 87, 79, .15); color: var(--rose); }

#result-action { margin-top: 30px; max-width: 320px; }

/* ---------- Tab bar ---------- */

.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: rgba(18, 32, 58, .94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--ink-3);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 20;
}

.tab {
  background: none;
  border: 0;
  color: var(--slate);
  font: inherit;
  font-size: 11.5px;
  letter-spacing: .01em;
  padding: 11px 4px 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: color .18s ease;
}

.tab-ico {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tab.is-active { color: var(--jade-lift); }
.tab:focus-visible { outline: 2px solid var(--jade-lift); outline-offset: -3px; }

@media (min-width: 560px) {
  .tabs { max-width: 520px; margin: 0 auto; border-radius: 18px 18px 0 0; }
}