/* refinements.css - UI/UX polish layered on top of the existing stylesheets.
 *
 * Kept as a separate file on purpose: it can be removed in one line without
 * touching styles.css or platform.css, and every rule here is additive.
 * Loaded last so it wins on specificity ties.
 */

/* ── Legal disclaimer ─────────────────────────────────────────────────────
   Financial platforms need this visible, not hidden in a footer link. Styled
   as a calm notice rather than an alarm - it should read as professional
   diligence, which is what an investor is looking for, not as a warning label. */
.faraz-disclaimer {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 48px auto 28px;
  padding: 18px 22px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-right: 3px solid #d4a13c;      /* RTL: accent sits on the reading edge */
  border-radius: 10px;
  background: rgba(148, 163, 184, .06);
  color: #94a3b8;
  font-size: .82rem;
  line-height: 2;
  text-align: justify;
}
.faraz-disclaimer strong { color: #d4a13c; }
.faraz-disclaimer b { color: #cbd5e1; font-weight: 700; }

@media (max-width: 720px) {
  .faraz-disclaimer { margin: 32px 14px 20px; padding: 14px 16px; font-size: .78rem; }
}

/* ── Focus visibility ─────────────────────────────────────────────────────
   Keyboard users could previously not tell where they were. :focus-visible
   shows the ring only for keyboard navigation, so mouse users see no change. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #4a9fd8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Numeric data ─────────────────────────────────────────────────────────
   Prices and percentages jitter horizontally when digits have different widths,
   which is very visible on a live-updating table. Tabular figures lock the
   width; latin digits keep numbers readable inside RTL text. */
.price, .change, .value, td, th,
[class*="price"], [class*="percent"], [class*="change"], [class*="num"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.price, .change, [class*="price"], [class*="percent"] {
  direction: ltr;
  unicode-bidi: plaintext;   /* keeps "-2.5%" from flipping in an RTL context */
}

/* ── Motion polish ────────────────────────────────────────────────────────
   Small, consistent easing on interactive elements. Transform/opacity only,
   so these stay on the compositor and never trigger layout. */
.card, .btn, .tab, .nav-item, [class*="card"] {
  transition: transform .18s cubic-bezier(.34, 1.2, .64, 1),
              box-shadow .18s ease,
              border-color .18s ease;
}
.card:hover, [class*="card"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
}
.btn:active { transform: translateY(1px) scale(.99); }

/* ── Scrollbars ───────────────────────────────────────────────────────────
   The default Windows scrollbar is a bright slab against a dark trading UI. */
* { scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.35) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.30);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.5); background-clip: content-box; }

/* ── Skip link ────────────────────────────────────────────────────────────
   Lets keyboard and screen-reader users jump past the nav. Off-screen until
   focused, so it costs sighted users nothing. */
.skip-link {
  position: absolute;
  right: -9999px;
  top: 8px;
  z-index: 999;
  padding: 10px 18px;
  background: #4a9fd8;
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
}
.skip-link:focus { right: 8px; }

/* ── Selection ─────────────────────────────────────────────────────────── */
::selection { background: rgba(74,159,216,.32); }

/* ── AOS safety net ───────────────────────────────────────────────────────
   AOS hides elements until they scroll into view. If its JS fails to load,
   anything tagged data-aos would stay invisible forever - which on a trading
   page could mean blank panels. This forces content visible when AOS is absent. */
html:not(.aos-ready) [data-aos] { opacity: 1 !important; transform: none !important; }