/* ============================================================
   PAID — Web Companion Design System
   Version: 1.0.0
   Derived from: Dashboard, Wallet, Manage & Electricity screens
   Typeface: Poppins
   Primary market: South Africa (ZAR)
   ============================================================ */

/* ------------------------------------------------------------
   1. GOOGLE FONTS
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');


/* ------------------------------------------------------------
   2. DESIGN TOKENS
   ------------------------------------------------------------ */
:root {

  /* ── Brand Colours ─────────────────────────────────────── */
  --paid-red:           #DB2431;   /* gradient left / danger accent      */
  --paid-pink:          #C61B5F;   /* primary interactive: borders, CTAs */
  --paid-purple:        #7E4395;   /* gradient right                     */
  --paid-navy:          #223048;   /* cards, dark surfaces               */

  /* ── Brand Gradient (hero, headers, active cards) ───────── */
  --paid-gradient: linear-gradient(
    135.16deg,
    var(--paid-red)    0%,
    var(--paid-purple) 49.24%
  );
  --paid-gradient-horizontal: linear-gradient(
    90deg,
    var(--paid-red)    0%,
    var(--paid-purple) 100%
  );

  /* ── Neutrals ────────────────────────────────────────────── */
  --color-white:        #FFFFFF;
  --color-off-white:    #F6F6F6;
  --color-light-grey:   #E3E3E3;
  --color-mid-grey:     #BFBFBF;
  --color-black:        #000000;

  /* ── Text ────────────────────────────────────────────────── */
  --text-primary:       rgba(0,   0,   0,    1.00);
  --text-secondary:     rgba(0,   0,   0,    0.80);
  --text-tertiary:      rgba(0,   0,   0,    0.70);
  --text-disabled:      rgba(0,   0,   0,    0.40);
  --text-on-brand:      #FFFFFF;
  --text-on-brand-80:   rgba(255, 255, 255,  0.80);
  --text-on-brand-70:   rgba(255, 255, 255,  0.70);

  /* ── Surfaces / Dividers ─────────────────────────────────── */
  --divider-subtle:     rgba(0,   0,   0,    0.05);
  --divider-medium:     rgba(0,   0,   0,    0.10);
  --surface-glass-20:   rgba(255, 255, 255,  0.20);
  --surface-glass-40:   rgba(255, 255, 255,  0.40);
  --navy-glass-80:      rgba(34,  48,  72,   0.80);

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-card:        0px 2px   7.5px  0px rgba(0, 0, 0, 0.25);
  --shadow-card-lg:     0px 4px   8px    0px rgba(0, 0, 0, 0.10);
  --shadow-nav:         0px -8px  13.2px 0px rgba(0, 0, 0, 0.10);
  --shadow-dark:        0px 0px   8.4px  0px rgba(0, 0, 0, 0.75);

  /* ── Typography ──────────────────────────────────────────── */
  --font:               'Poppins', sans-serif;

  /* Scale */
  --text-h4:            22px;   /* balance, hero numbers    */
  --text-h5:            18px;   /* page / section headings  */
  --text-h5-semi:       14px;   /* semi-bold subheadings    */
  --text-h6:            12px;   /* labels, card text        */
  --text-h7:            8px;    /* micro labels, timestamps */
  --text-label:         10px;   /* description copy         */
  --text-body:          14px;   /* body / card content      */

  /* Weights */
  --weight-regular:     400;
  --weight-semibold:    600;
  --weight-bold:        700;

  /* Line Heights */
  --lh-h4:              1.20;
  --lh-h5:              1.30;
  --lh-h6:              12px;
  --lh-h7:              12px;
  --lh-label:           1.20;
  --lh-body:            18px;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  30px;
  --space-8:  32px;
  --space-10: 40px;

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-pill:   30px;
  --radius-circle: 9999px;

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:    all 0.15s ease;
  --transition-default: all 0.25s ease;
}


/* ------------------------------------------------------------
   3. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background-color: var(--color-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--paid-pink);
  text-decoration: none;
  transition: var(--transition-fast);
}

a:hover {
  text-decoration: underline;
  opacity: 0.85;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: var(--font);
  cursor: pointer;
  border: none;
  background: none;
}


/* ------------------------------------------------------------
   4. TYPOGRAPHY UTILITIES
   ------------------------------------------------------------ */
.text-h4 {
  font-family: var(--font);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h4);
  letter-spacing: 0;
}

.text-h5 {
  font-family: var(--font);
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h5);
  letter-spacing: 0;
}

.text-h5-semi {
  font-family: var(--font);
  font-size: var(--text-h5-semi);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

.text-h6-semibold {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h6);
  letter-spacing: 0;
}

.text-h6-bold {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h6);
  letter-spacing: 0;
}

.text-h6-regular {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h6);
  letter-spacing: 0;
}

.text-h7 {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h7);
  letter-spacing: 0;
}

.text-h7-bold {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h7);
  letter-spacing: 0;
}

.text-label {
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  line-height: var(--lh-label);
  letter-spacing: 0;
}

.text-body {
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: 0;
}

/* Colour modifiers */
.text-on-brand      { color: var(--text-on-brand);    }
.text-on-brand-80   { color: var(--text-on-brand-80); }
.text-on-brand-70   { color: var(--text-on-brand-70); }
.text-secondary     { color: var(--text-secondary);   }
.text-tertiary      { color: var(--text-tertiary);    }
.text-disabled      { color: var(--text-disabled);    }
.text-pink          { color: var(--paid-pink);         }
.text-link {
  color: var(--paid-pink);
  text-decoration: underline;
  cursor: pointer;
}


/* ------------------------------------------------------------
   5. COLOUR UTILITIES
   ------------------------------------------------------------ */
.bg-brand-gradient  { background: var(--paid-gradient);            }
.bg-navy            { background-color: var(--paid-navy);           }
.bg-navy-glass      { background-color: var(--navy-glass-80);       }
.bg-off-white       { background-color: var(--color-off-white);     }
.bg-white           { background-color: var(--color-white);         }
.bg-light-grey      { background-color: var(--color-light-grey);    }


/* ------------------------------------------------------------
   6. LAYOUT
   ------------------------------------------------------------ */
.page-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container--wide  { max-width: 960px;  }
.container--full  { max-width: 100%;   }

/* Gradient hero header — mirrors app's top band */
.page-header {
  background: var(--paid-gradient);
  padding: var(--space-8) var(--space-4) var(--space-7);
  position: relative;
  overflow: hidden;
}

/* Decorative radial overlays matching the app's circle motifs */
.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at -30% -10%, rgba(255,255,255,0.15) 0%, transparent 55%),
    radial-gradient(circle at 110%  20%, rgba(255,255,255,0.10) 0%, transparent 45%);
  pointer-events: none;
}

/* White content card that rises over the gradient */
.page-content-card {
  background: var(--color-white);
  border-top-left-radius:  var(--radius-md);
  border-top-right-radius: var(--radius-md);
  border: 1px solid rgba(255, 75, 75, 0.30);
  flex: 1;
  padding: var(--space-6) var(--space-4) var(--space-7);
}

/* Off-white inner page background (Wallet / Manage screens) */
.page-inner {
  background-color: var(--color-off-white);
  padding: var(--space-7) var(--space-4) var(--space-4);
}


/* ------------------------------------------------------------
   7. BUTTONS
   ------------------------------------------------------------ */

/* ── Base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h5);
  letter-spacing: 0;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-default);
  white-space: nowrap;
  width: 100%;
  text-align: center;
}

/* ── Primary — white bg, pink border  (Top Up)  ── */
.btn-primary {
  background-color: var(--color-white);
  color: var(--paid-pink);
  border: 1px solid var(--paid-pink);
  box-shadow: var(--shadow-card);
}
.btn-primary:hover {
  background-color: var(--paid-pink);
  color: var(--color-white);
  box-shadow: var(--shadow-card-lg);
}
.btn-primary:active { transform: scale(0.98); }

/* ── Secondary — navy, pink border  (Buy / Request)  ── */
.btn-secondary {
  background-color: var(--navy-glass-80);
  color: var(--color-white);
  border: 1px solid var(--paid-pink);
  box-shadow: var(--shadow-card);
}
.btn-secondary:hover  { background-color: var(--paid-navy); box-shadow: var(--shadow-card-lg); }
.btn-secondary:active { transform: scale(0.98); }

/* ── Brand — navy + gradient hover  (Add Card / Send Payment)  ── */
.btn-brand {
  background-color: var(--paid-navy);
  color: var(--color-white);
  border: 1px solid var(--paid-pink);
  box-shadow: var(--shadow-card);
}
.btn-brand:hover  { background: var(--paid-gradient); border-color: transparent; }
.btn-brand:active { transform: scale(0.98); }

/* ── Ghost — frosted glass on gradient backgrounds  ── */
.btn-ghost {
  background-color: var(--surface-glass-40);
  color: var(--color-white);
  border: 1px solid var(--surface-glass-40);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background-color: var(--surface-glass-20); }

/* ── Disabled  ── */
.btn-disabled,
.btn:disabled {
  background-color: var(--color-light-grey);
  color: var(--color-mid-grey);
  border: none;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-disabled:hover,
.btn:disabled:hover {
  background-color: var(--color-light-grey);
  color: var(--color-mid-grey);
}

/* ── Pill — currency badge  ── */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  background-color: var(--surface-glass-40);
  color: var(--color-white);
  border: 1px solid var(--surface-glass-40);
  border-radius: var(--radius-pill);
  padding: var(--space-2) var(--space-3);
  width: auto;
}

/* ── Icon circle  (Transfer button)  ── */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--paid-navy);
  border: 1px solid var(--paid-pink);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-dark);
  cursor: pointer;
  transition: var(--transition-fast);
  padding: var(--space-2);
}
.btn-icon:hover { background-color: var(--paid-pink); border-color: var(--paid-pink); }

/* ── Tile — small action grid (Buy / Request / Add Friend)  ── */
.btn-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  background-color: var(--navy-glass-80);
  color: var(--color-white);
  border: 1px solid var(--paid-pink);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h7);
  cursor: pointer;
  transition: var(--transition-default);
  text-align: center;
  min-width: 60px;
  box-shadow: var(--shadow-card);
}
.btn-tile:hover  { background-color: var(--paid-navy); box-shadow: var(--shadow-card-lg); }

.btn-tile--light {
  background-color: var(--color-white);
  color: var(--paid-pink);
  border-color: var(--paid-pink);
}
.btn-tile--light:hover { background-color: rgba(198, 27, 95, 0.06); }


/* ------------------------------------------------------------
   8. LOGO
   ------------------------------------------------------------ */
.brand-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--color-white);
}
.brand-logo:hover { text-decoration: none; opacity: 0.90; }

.brand-logo__img {
  height: 32px;
  width: auto;
}

.brand-logo__wordmark {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h5);
  color: inherit;
}


/* ------------------------------------------------------------
   9. NAVIGATION BAR
   ------------------------------------------------------------ */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--divider-medium);
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.06);
  padding: var(--space-3) var(--space-4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3) var(--space-2);
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h7);
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  transition: var(--transition-fast);
}
.nav-item:hover        { color: var(--paid-pink); }
.nav-item--active {
  color: var(--paid-pink);
  font-weight: var(--weight-bold);
  border-bottom-color: var(--paid-pink);
}

.nav-item__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.80;
}
.nav-item--active .nav-item__icon { opacity: 1; }


/* ------------------------------------------------------------
   10. CARDS
   ------------------------------------------------------------ */

/* ── Base card ── */
.card {
  background-color: var(--color-white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--divider-medium);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  overflow: hidden;
}

/* ── Payment / bank card  (Mastercard / Visa)  ── */
.card-payment {
  background-color: var(--paid-navy);
  border: 1px solid var(--paid-pink);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
  color: var(--color-white);
  background-image: radial-gradient(
    ellipse at 110% 120%,
    rgba(255,255,255,0.12) 0%,
    transparent 60%
  );
  min-height: 108px;
}

.card-payment__network {
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h6);
  color: var(--color-white);
}

.card-payment__number {
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  color: var(--text-on-brand-80);
  letter-spacing: 0.05em;
}

.card-payment__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
}

.card-payment__expiry-label {
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  color: var(--text-on-brand-70);
  line-height: var(--lh-h7);
}

.card-payment__expiry-value {
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  color: var(--color-white);
  line-height: var(--lh-h6);
}

.card-payment__remove {
  font-size: var(--text-h7);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  transition: var(--transition-fast);
  line-height: var(--lh-h7);
}
.card-payment__remove:hover { opacity: 0.70; }

/* ── Balance hero  ── */
.card-balance {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.card-balance__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background-color: var(--surface-glass-40);
  border: 1px solid var(--surface-glass-40);
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  white-space: nowrap;
}

.card-balance__label {
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  color: var(--text-on-brand-80);
  line-height: var(--lh-h7);
  white-space: nowrap;
}

.card-balance__amount {
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h4);
  color: var(--color-white);
  white-space: nowrap;
}

/* ── Input card  (Electricity / top-up form)  ── */
.card-input {
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card-lg);
}

.card-input__header {
  background: var(--paid-gradient);
  padding: var(--space-4);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.card-input__hint {
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  color: var(--text-on-brand);
  line-height: var(--lh-h7);
}

.card-input__hint strong { font-weight: var(--weight-bold); }

.card-input__body {
  background: var(--color-white);
  border: 1px solid var(--divider-medium);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: var(--space-4) var(--space-4) var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}


/* ------------------------------------------------------------
   11. FORMS & INPUTS
   ------------------------------------------------------------ */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h7);
  color: var(--text-secondary);
}

/* Underline-style input (matches Figma fields) */
.form-input {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h6);
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--divider-medium);
  padding-bottom: var(--space-2);
  width: 100%;
  outline: none;
  transition: var(--transition-fast);
}
.form-input:focus          { border-bottom-color: var(--paid-pink); color: var(--text-primary); }
.form-input::placeholder   { color: var(--text-tertiary); }

/* Variant on gradient header */
.form-input--on-brand {
  color: var(--color-white);
  border-bottom-color: rgba(255,255,255,0.50);
}
.form-input--on-brand::placeholder { color: var(--text-on-brand-70); }
.form-input--on-brand:focus        { border-bottom-color: var(--color-white); }

/* Phone prefix row */
.form-phone-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-1);
}

.form-phone-prefix {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h6);
  color: var(--text-primary);
  padding-bottom: var(--space-2);
  flex-shrink: 0;
}

/* Amount input (currency + figure) */
.form-amount-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid rgba(255,255,255,0.50);
}

.form-amount-symbol {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-bold);
  color: var(--color-white);
  line-height: var(--lh-h6);
  padding-bottom: var(--space-2);
}

.form-amount-input {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-regular);
  color: var(--color-white);
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  line-height: var(--lh-h6);
}
.form-amount-input::placeholder { color: var(--text-on-brand-80); }


/* ------------------------------------------------------------
   12. SECTION HEADINGS & DIVIDERS
   ------------------------------------------------------------ */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.section-title {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h6);
  color: var(--text-primary);
}

.section-link {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h7);
  color: var(--paid-pink);
  text-decoration: underline;
  cursor: pointer;
  transition: var(--transition-fast);
}
.section-link:hover { opacity: 0.75; }

.section-subtitle {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

hr, .divider {
  border: none;
  border-bottom: 1px solid var(--divider-subtle);
  margin: 0;
}
.divider--medium { border-bottom-color: var(--divider-medium); }


/* ------------------------------------------------------------
   13. AVATAR & CONTACT CHIPS
   ------------------------------------------------------------ */
.avatar {
  width: 45px;
  height: 45px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar--lg { width: 64px; height: 64px; }
.avatar--sm { width: 32px; height: 32px; }

/* Gradient ring (Quick Send border) */
.avatar-ring {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.avatar-ring::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-circle);
  background: var(--paid-gradient);
  z-index: -1;
}

/* Contact chip */
.contact-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.contact-chip:hover { opacity: 0.80; transform: translateY(-2px); }

.contact-chip__name {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h7);
  color: var(--text-primary);
  text-align: center;
  white-space: nowrap;
}

/* Horizontally scrollable row */
.quick-send-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--divider-subtle);
  scrollbar-width: none;
}
.quick-send-row::-webkit-scrollbar { display: none; }


/* ------------------------------------------------------------
   14. TRANSACTION LIST ITEMS
   ------------------------------------------------------------ */
.tx-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--divider-subtle);
}

.tx-item__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tx-item__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tx-item__name {
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: 14px;
  color: var(--text-primary);
}

.tx-item__timestamp {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h7);
  color: var(--text-disabled);
  white-space: nowrap;
}

.tx-item__amount {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h6);
  color: var(--text-primary);
  white-space: nowrap;
}
.tx-item__amount--credit { color: var(--paid-pink); }

.tx-period-label {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h7);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}


/* ------------------------------------------------------------
   15. MENU LIST  (Manage screen)
   ------------------------------------------------------------ */
.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.menu-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--divider-subtle);
  cursor: pointer;
  transition: var(--transition-fast);
}
.menu-item:hover .menu-item__title { color: var(--paid-pink); }

.menu-item__row {
  display: flex;
  align-items: center;
  gap: 5px;
}

.menu-item__icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-item__title {
  font-family: var(--font);
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h6);
  color: var(--text-primary);
  transition: var(--transition-fast);
}

.menu-item__description {
  font-family: var(--font);
  font-size: var(--text-label);
  font-weight: var(--weight-regular);
  line-height: var(--lh-label);
  color: var(--text-tertiary);
  padding-left: 17px;
}


/* ------------------------------------------------------------
   16. BADGES
   ------------------------------------------------------------ */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-bold);
  line-height: var(--lh-h7);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.badge--brand   { background: var(--paid-gradient);         color: var(--color-white);    }
.badge--navy    { background: var(--paid-navy);             color: var(--color-white);    border: 1px solid var(--paid-pink); }
.badge--outline { background: transparent;                  color: var(--paid-pink);      border: 1px solid var(--paid-pink); }
.badge--subtle  { background: var(--color-off-white);       color: var(--text-secondary); }


/* ------------------------------------------------------------
   17. ALERTS
   ------------------------------------------------------------ */
.alert {
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h7);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
}
.alert--info    { background: rgba(34,  48,  72,  0.08); color: var(--paid-navy); border-left: 3px solid var(--paid-navy); }
.alert--brand   { background: rgba(198, 27,  95,  0.08); color: var(--paid-pink); border-left: 3px solid var(--paid-pink); }
.alert--success { background: rgba(39,  174, 96,  0.08); color: #27AE60;          border-left: 3px solid #27AE60; }
.alert--error   { background: rgba(219, 36,  49,  0.08); color: var(--paid-red);  border-left: 3px solid var(--paid-red); }


/* ------------------------------------------------------------
   18. PAGE FOOTER
   ------------------------------------------------------------ */
.page-footer {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-family: var(--font);
  font-size: var(--text-h7);
  font-weight: var(--weight-regular);
  line-height: var(--lh-h7);
  color: var(--text-tertiary);
  border-top: 1px solid var(--divider-subtle);
}
.page-footer a { color: var(--paid-pink); }


/* ------------------------------------------------------------
   19. UTILITY HELPERS
   ------------------------------------------------------------ */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.gap-1        { gap: var(--space-1); }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.gap-6        { gap: var(--space-6); }
.mt-2         { margin-top: var(--space-2); }
.mt-4         { margin-top: var(--space-4); }
.mt-6         { margin-top: var(--space-6); }
.mt-8         { margin-top: var(--space-8); }
.mb-2         { margin-bottom: var(--space-2); }
.mb-4         { margin-bottom: var(--space-4); }
.mb-6         { margin-bottom: var(--space-6); }
.p-4          { padding: var(--space-4); }
.w-full       { width: 100%; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ------------------------------------------------------------
   20. RESPONSIVE
   ------------------------------------------------------------ */

/* Tablet ≥ 600px */
@media (min-width: 600px) {
  .container {
    padding: 0 var(--space-6);
  }
  .page-header {
    padding: var(--space-10) var(--space-6) var(--space-8);
  }
  .btn {
    width: auto;
  }
}

/* Desktop ≥ 960px */
@media (min-width: 960px) {
  :root {
    --text-h4:      28px;
    --text-h5:      22px;
    --text-h5-semi: 16px;
    --text-h6:      14px;
    --text-h7:      11px;
    --text-label:   12px;
    --text-body:    16px;
  }

  .container       { max-width: 520px; }
  .container--wide { max-width: 1100px; }

  .navbar {
    padding: var(--space-3) var(--space-8);
  }

  .page-header {
    padding: var(--space-10) var(--space-8) var(--space-8);
  }

  .quick-send-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}