/* Currency view bar on /compare pages (scripts/fx-view.js) */
.fx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1.25rem 0 1rem; padding: .75rem 1rem; border: 1px solid #e0e4f2; border-radius: 1rem; background: #fff; box-shadow: 0 6px 18px rgba(16, 24, 40, .05); }
.fx-bar-label { font-size: .82rem; font-weight: 800; color: #344054; }
.fx-bar-buttons { display: flex; flex-wrap: wrap; gap: .25rem; padding: .2rem; border-radius: .75rem; background: #f3f4fb; }
.fx-bar-buttons button { min-height: 40px; padding: .4rem .75rem; border: 0; border-radius: .55rem; background: transparent; color: #475467; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.fx-bar-buttons button[aria-pressed="true"] { background: #fff; color: #3730a3; box-shadow: 0 1px 3px rgba(16, 24, 40, .12); }
.fx-bar-buttons button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }
.fx-bar-note { flex: 1 1 100%; margin: 0; font-size: .78rem; line-height: 1.5; color: #667085; }
@media (min-width: 900px) { .fx-bar-note { flex: 1 1 0; } }
.fx-bar-buttons button.is-suggested:not([aria-pressed="true"]) { color: #3730a3; box-shadow: inset 0 0 0 1.5px #a5b4fc; }