/* static/v2/css/currency.css */

/* Vars (optional override) */
:root{
  --currency-bg: #f3e8ff;
  --currency-active-bg: #c6affa;
  --currency-active-fg: #ffffff;
  --currency-balance-color: #058533;
}

/* Currency strip */
.v2-currency-card-strip{
  display:flex; flex-wrap:wrap; gap:1rem; justify-content:flex-end;
  margin-top:.5rem; margin-bottom:.5rem;
}

/* Currency card */
.v2-currency-card{
  background: var(--currency-bg);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 1rem;
  padding: .8rem 1.2rem;
  /* width equalizer will set width explicitly via JS; keep min */
  min-width: 110px;
  text-align:center;
  box-shadow: 0 2px 3px rgba(0,0,0,0.06);
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  color:#222;
}
.v2-currency-card:hover{ transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,0.1); }
.v2-currency-card.is-active{
  background: var(--currency-active-bg);
  color: var(--currency-active-fg);
}
.v2-currency-code{ font-size:.95rem; font-weight:600; margin-bottom:.25rem; }
.v2-currency-balance{
  font-size:1.1rem; font-variant-numeric: tabular-nums;
  color: var(--currency-balance-color);
}
.v2-currency-card.is-active .v2-currency-balance{ color: var(--currency-balance-color); }

/* code + flag in one line */
.v2-currency-card .v2-currency-code{
  display:inline-flex; align-items:center; justify-content:center; gap:.4em; line-height:1.1;
}

/* neutralize global img rules */
.v2-currency-card img{ max-width:none!important; width:auto!important; height:auto!important; display:inline-block!important; }

/* flag same height as text */
.v2-currency-card img.v2-flag-currency{ height:1em!important; width:auto!important; vertical-align:-0.1em; }