/* =====================================================
   Currency switcher (js/currency.js)
   - Top bar: the balance pill doubles as the switcher. A small caret sits after
     the balance and an invisible <select> covers the pill, so tapping the balance
     opens USD / GHS / NGN. It takes almost no room on a 360px phone.
   - Me page: a "Currency" row in the Display group with three buttons
   Colours from css/theme.css: purple (--green / --purple), sea blue (--ink), white.
   ===================================================== */

/* ----- Top bar: balance pill + caret ----- */
.balance-pill.cur-pill { position: relative; cursor: pointer; }
.cur-switch { display: inline-flex; align-items: center; flex-shrink: 0; }
.cur-switch select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  border-radius: 999px;
  font-size: 16px;            /* stops iOS zooming in when the list opens */
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* The list itself uses the page colours */
.cur-switch option { color: var(--text); background: var(--card); }
.cur-caret {
  width: 9px;
  height: 6px;
  margin-left: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.9;
}
/* Keyboard focus on the hidden select shows on the pill */
.balance-pill.cur-pill:focus-within { outline: 2px solid #fff; outline-offset: 2px; }

/* "≈" when the rates are the fixed backup ones */
.cur-approx {
  display: none;
  position: absolute;
  top: -6px;
  right: -4px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  color: var(--purple-deep, #5b21b6);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(20, 48, 107, 0.35);
}
.cur-switch.approx .cur-approx { display: block; }

/* ----- Me page row ----- */
.me-item.cur-row { grid-template-columns: 30px minmax(0, 1fr) auto; cursor: default; }
.cur-row-text { display: flex; flex-direction: column; min-width: 0; }
.cur-row-text small { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }
.cur-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  background: var(--purple-soft);
  border: 1px solid var(--line);
}
.cur-seg button {
  border: none;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 10px;
  min-height: 34px;
  border-radius: 999px;
  cursor: pointer;
}
.cur-seg button.on { background: var(--grad); color: #fff; }
.cur-seg button:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
.theme-dark .cur-seg button:not(.on) { color: var(--aqua); }
@media (max-width: 360px) {
  .cur-seg button { padding: 7px 8px; }
}

/* Currency bar at the top of the Me page, above Zenna Loyalty (same glass as the loyalty banner) */
.me-cur-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 12px 0; padding: 10px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.18); color: #fff;
}
.me-cur-text { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.me-cur-text .icon { width: 22px; height: 22px; flex: none; }
.me-cur-text > span { display: flex; flex-direction: column; min-width: 0; }
.me-cur-text small { font-weight: 500; font-size: 0.78rem; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-cur-bar .cur-seg { flex: none; background: rgba(255, 255, 255, 0.2); }
.me-cur-bar .cur-seg button:not(.on) { color: #fff !important; }