/* ================================================================
   FOREX — live Buy/Sell rates (loaded after color-fix.css, so a few
   rules need !important to beat the older overrides there)
   ================================================================ */

/* Status line under the heading */
.fx-status { display: inline-flex; align-items: center; gap: 6px; justify-content: center; flex-wrap: wrap;
  font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6rem; }
.fx-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.fx-dot--live    { background: #27AE60; box-shadow: 0 0 0 0 rgba(39,174,96,.6); animation: fxPulse 1.8s infinite; }
.fx-dot--loading { background: #B8860B; }
.fx-dot--error   { background: #E74C3C; }
@keyframes fxPulse { 70% { box-shadow: 0 0 0 7px rgba(39,174,96,0); } 100% { box-shadow: 0 0 0 0 rgba(39,174,96,0); } }
@media (prefers-reduced-motion: reduce) { .fx-dot--live { animation: none; } }

/* Top cards */
.fx-card { font: inherit; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.fx-card .currency-card__code small { font-size: .7em; opacity: .7; font-weight: 600; }
.fx-card__rates { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 2px; font-size: .8rem; }
.fx-card__rates em { font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .5px; opacity: .7; margin-right: 2px; }
.fx-card__rates b { font-family: 'Playfair Display', serif; font-size: .98rem; }
.fx-card.selected .change-up, .fx-card:hover .change-up { color: #6EE7A0; }
.fx-card.selected .change-down, .fx-card:hover .change-down { color: #FF9C8F; }
.fx-flat { color: var(--text-muted); font-size: .72rem; }
.fx-card .change-up, .fx-card .change-down { font-size: .72rem; }

/* Chart */
.fx-chart-box { position: relative; height: 260px; }
.chart-card[hidden] { display: none !important; }

/* Table */
.fx-table thead th { background: #0D1B2A !important; color: #FFFFFF !important; }
.fx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.fx-table td { vertical-align: middle; }
.fx-table .fx-sell, .fx-table .fx-buy { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-table td.fx-sell { color: #8B6508 !important; }
.fx-table td.fx-buy  { color: #1E6B44 !important; }
.fx-table thead th.fx-sell, .fx-table thead th.fx-buy { text-align: right; }
.fx-table td.fx-sell, .fx-table td.fx-buy { text-align: right; font-size: 1rem !important; }
.fx-table .fx-col-live { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fx-table .fx-col-act { text-align: right; }
.fx-cur { display: flex; align-items: center; gap: 10px; }
.fx-flag { font-size: 1.5rem; line-height: 1; }
.fx-cur__text { display: flex; flex-direction: column; line-height: 1.25; }
.fx-cur__text strong { color: var(--navy); }
.fx-cur__name { font-size: .78rem; color: var(--text-muted); }
.fx-cur__unit { display: none; font-size: .7rem; color: var(--text-muted); }
.fx-msg { text-align: center !important; padding: 2rem 1rem !important; color: var(--text-muted) !important; line-height: 1.7; }
.fx-msg a { color: var(--gold-dark); font-weight: 700; }

/* Converter */
.fx-conv { text-align: left; display: flex; flex-direction: column; gap: 10px; }
.fx-conv__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fx-conv__row span { color: rgba(255,255,255,.75); font-size: .82rem; }
.fx-conv__row strong { font-family: 'Playfair Display', serif; color: #E8C872; font-size: 1.5rem; }
.fx-conv .converter-note { text-align: center; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .fx-cards { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .fx-cards { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px;
    padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .fx-cards::-webkit-scrollbar { display: none; }
  .fx-card { flex: 0 0 132px; scroll-snap-align: start; padding: 12px 8px !important; }
  .fx-card .currency-card__flag { font-size: 1.7rem; }
  .fx-chart-box { height: 210px; }
  .chart-card { padding: 1rem !important; }
  .time-btn { padding: 8px 12px; }
}
@media (max-width: 600px) {
  .fx-table .fx-col-live, .fx-table .fx-col-act { display: none; }
  .fx-cur__unit { display: block; }
  .fx-cur__name { display: none; }
  .fx-table thead th { padding: 10px 10px !important; font-size: .72rem !important; }
  .fx-table td { padding: 10px 10px !important; }
  .fx-table td.fx-sell, .fx-table td.fx-buy { font-size: .95rem !important; }
  .fx-flag { font-size: 1.3rem; }
  .fx-table-wrap { overflow-x: visible; }
}