/* Salt Atlas currency switcher. Inherits colour from its parent,
   so it works on both the dark header and light backgrounds. */
.sa-currency {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: inherit;
}
.sa-currency__face {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.9;
  pointer-events: none;
  transition: opacity .15s ease, background-color .15s ease;
}
.sa-currency__chev { opacity: .7; }
/* The real native <select> sits invisibly on top: accessible, keyboard
   friendly and uses the phone's own picker on mobile. */
.sa-currency select {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* stops iOS zooming in */
}
.sa-currency:hover .sa-currency__face { opacity: 1; background: rgba(127,127,127,.12); }
.sa-currency:focus-within .sa-currency__face { outline: 2px solid #7FA8F2; outline-offset: 2px; }
.sa-currency__sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

[data-currency-note] {
  font-size: 13px;
  color: #56616B;
  margin-top: 12px;
}
[data-currency-note][hidden] { display: none; }