/*
 * SHALOBOT — /trading.
 *
 * The page is the site's own dotted ground, and the header carries two things
 * on its right: the language switch, on its own, and the balance of the
 * account in use. Both are drawn in the page's own surfaces and hairlines, so
 * they belong to the background rather than sitting on top of it.
 *
 * The figures: real money in the site's green on every theme; demo in the
 * page's ink — black on the light theme, near-white on charcoal — because a
 * black figure on charcoal cannot be read.
 *
 * Inter, with tabular numbers, so a balance that changes does not shuffle its
 * own width.
 */

.tpage { min-height: 100vh; }
.tnav { border-bottom-color: var(--line); }
.tnav .nav-inner { gap: 14px; position: relative; }

/* The "o" of Shalobot (deriv/door.js). It looks like every other letter on
   purpose. The field the first visit asks for sits under the name, borrowing
   the page's own input colours, so nothing in the header moves; the only
   announcement is a second of colour on the word. */
.door-box { position: absolute; top: calc(100% - 10px); left: var(--gutter); z-index: 5; margin: 0; }
.door-box[hidden] { display: none; }
/* 16px: anything smaller and an iPhone zooms the page in when the field opens. */
.door-key {
  display: block; width: 7.5em;
  padding: 5px 9px; border: 1px solid var(--line-hi); border-radius: 9px;
  background: var(--raise); color: var(--ink); font: inherit; font-size: 16px;
  -webkit-text-security: disc;
}
.door-key:focus { outline: none; }
@keyframes door-lit { 0% { color: var(--ink); } 22%, 70% { color: var(--blue); } 100% { color: var(--ink); } }
.brand-name.lit { animation: door-lit 1s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .brand-name.lit { animation-duration: 1ms; color: var(--blue); } }

.tnav-end { margin-left: auto; display: flex; flex: none; align-items: center; gap: 10px; }
.tnav-end > * { flex: none; }
.tnav .brand { flex: none; }
/* Three quick taps open things here (door.js): no double-tap zoom to eat one. */
.tnav .brand, .tbal-chip { touch-action: manipulation; }

/* What the header gives up, in order, when it cannot fit everything (trading.js
   fitNav): the name beside the mark, then the little arrows, then the words of
   the MT5 logo — its mark stays, so the button is always there. */
.nav-inner.is-short .brand-name { display: none; }
.nav-inner.is-snug .lang-caret, .nav-inner.is-snug .tbal-caret { display: none; }
.nav-inner.is-snug .tnav-lang .lang-btn { padding: 0 8px; }
.nav-inner.is-snug .tbal-chip { padding-right: 12px; }
.nav-inner.is-tight .tmt5 { width: 38px; padding: 0; justify-content: center; }
.nav-inner.is-tight .tmt5 img { width: 19px; height: 18px; object-fit: cover; object-position: left center; }

/* The MetaTrader 5 button: the full logo on a chip like the ones beside it. */
.tmt5 {
  display: inline-flex; align-items: center; flex: none; height: 38px; padding: 0 14px;
  border: 1px solid var(--line-hi); border-radius: 999px; background: var(--raise);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transition: border-color .15s ease, transform .15s ease; -webkit-tap-highlight-color: transparent;
}
.tmt5:hover { border-color: var(--blue); }
.tmt5:active { transform: scale(0.98); }
.tmt5:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tmt5 img { display: block; height: 18px; width: auto; }
.tmt5 .lt { display: none; }
:root[data-theme="light"] .tmt5 .dk { display: none; }
:root[data-theme="light"] .tmt5 .lt { display: block; }

/* The language switch, matched to the chip beside it. */
.tnav-lang:empty { display: none; }
.tnav-lang .lang-btn {
  height: 38px; padding: 0 11px 0 10px;
  border-color: var(--line-hi); background: var(--raise); color: var(--ink);
}
.tnav-lang .lang-btn:hover { border-color: var(--blue); }
.tnav-lang .lang-menu { border-color: var(--line-hi); background: var(--raise); color: var(--ink); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.40); }
.tnav-lang .lang-opt { color: var(--ink); }
.tnav-lang .lang-opt:hover { background: var(--surface-2); }
.tnav-lang .lang-opt.is-on { color: var(--blue); }

.tmain {
  min-height: 100vh;
  padding: 68px var(--gutter) 40px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}

/* ── the account chip ─────────────────────────────────────────────────── */

.tbal { position: relative; font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; }
.tbal[hidden] { display: none; }

.tbal-chip {
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 11px 0 13px;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: var(--raise); color: var(--ink);
  font: inherit; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
  transition: border-color .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tbal-chip:hover { border-color: var(--blue); }
.tbal-chip:active { transform: scale(0.98); }
.tbal-chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.tbal-kind {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-muted);
}
.tbal-amt {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "cv11" 1;
  white-space: nowrap;
}
.tbal.is-real .tbal-amt { color: var(--real); }   /* real money: green */
.tbal.is-demo .tbal-amt { color: var(--ink); }    /* demo: black on light, near-white on charcoal */
.tbal-caret { color: var(--ink-muted); flex: none; transition: transform .15s ease; }
.tbal-chip[aria-expanded="true"] .tbal-caret { transform: rotate(180deg); }

/* The heartbeat of the feed: green and breathing while the socket is live,
   amber while it reopens, grey before the first word from Deriv. */
.tbal-live { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-faint); }
.tbal.is-live .tbal-live { background: var(--ok); animation: tbal-beat 2.4s ease-in-out infinite; }
.tbal.is-wait .tbal-live { background: var(--amber); }
@keyframes tbal-beat {
  0%, 100% { box-shadow: 0 0 0 0 var(--real-tint); }
  50%      { box-shadow: 0 0 0 5px rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .tbal.is-live .tbal-live { animation: none; } }

/* ── the switcher ─────────────────────────────────────────────────────── */

.tbal-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  min-width: 290px; padding: 6px;
  border: 1px solid var(--line-hi); border-radius: 16px;
  background: var(--raise); color: var(--ink);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.40);
}
.tbal-menu[hidden] { display: none; }

.tbal-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px; border: 0; border-radius: 11px;
  background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.tbal-row:hover, .tbal-row:focus-visible { background: var(--surface-2); outline: none; }
.tbal-row[disabled] { cursor: default; opacity: .55; }
.tbal-row-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tbal-row-k { font-size: 13px; font-weight: 700; color: var(--ink); }
.tbal-row-id { font-size: 12px; color: var(--ink-muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tbal-row-v {
  margin-left: auto; font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap;
}
.tbal-row.is-real .tbal-row-v { color: var(--real); }
.tbal-row.is-demo .tbal-row-v { color: var(--ink); }
.tbal-row-on { width: 16px; height: 16px; flex: none; color: var(--real); visibility: hidden; }
.tbal-row[aria-checked="true"] .tbal-row-on { visibility: visible; }
.tbal-empty { margin: 6px 12px 8px; font-size: 12.5px; color: var(--ink-muted); }

/* No real account yet (trading.js): a red way to open one — in place of the chip when the
   login has no account at all, and under the list's own line when it has only a demo. A
   deep Deriv red that keeps its white words readable (4.8:1). */
.tbal-real {
  display: none; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: 999px;
  background: #d92b36; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none;
  box-shadow: 0 6px 18px rgba(217, 43, 54, 0.3); touch-action: manipulation; transition: filter .15s;
  -webkit-tap-highlight-color: transparent;
}
.tbal-real:hover { filter: brightness(1.07); }
.tbal-real:active { transform: scale(0.98); }
.tbal-real:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tbal-real svg { flex: none; }
.tbal.is-noreal .tbal-chip, .tbal.is-noreal .tbal-menu { display: none; }
.tbal.is-noreal .tbal-real { display: inline-flex; }
.tbal-real--menu { display: flex; height: 40px; margin: 0 6px 6px; box-shadow: none; border-radius: 11px; }

.tbal-foot {
  display: flex; align-items: center; justify-content: flex-end;
  margin-top: 4px; padding: 6px 2px 0; border-top: 1px solid var(--line);
}
.tbal-out {
  padding: 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--danger); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tbal-out:hover, .tbal-out:focus-visible { background: rgba(217, 45, 32, 0.10); outline: none; }

/* ── the states the page can be in before the balances arrive ────────── */

.tstate { width: 100%; max-width: 520px; margin: auto 0; text-align: center; }  /* centred while it is alone */
.tstate[hidden], .tstate > [hidden] { display: none !important; }

.tstate-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--ink-muted); font-size: 14.5px; }
.tspin {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--line-hi); border-top-color: var(--blue);
  animation: tspin .8s linear infinite;
}
@keyframes tspin { to { transform: rotate(360deg); } }

.tconnect {
  padding: 30px 26px 24px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--raise);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
}
.tconnect-mark { display: inline-flex; padding: 9px 14px; border-radius: 12px; background: #ffffff; }
.tconnect-mark img { display: block; height: 20px; width: auto; }
.tconnect h1 { margin: 18px 0 8px; font-size: clamp(22px, 3.2vw, 28px); letter-spacing: -0.02em; line-height: 1.15; }
.tconnect-lede { margin: 0 auto; max-width: 420px; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.tconnect-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.tconnect-actions .btn { justify-content: center; width: 100%; }
.tconnect-fine { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-faint); }

.tnote { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raise); color: var(--ink-muted); font-size: 14.5px; line-height: 1.55; }
.tnote p { margin: 0; }

@media (max-width: 560px) {
  .tnav .brand-name { display: none; }
  .tnav-end { gap: 8px; }
  .tnav-lang .lang-btn { height: 36px; }
  .tbal-chip { height: 36px; gap: 7px; padding: 0 9px 0 11px; }
  .tbal-amt { font-size: 14px; }
  .tmt5 { height: 36px; padding: 0 9px; }
  .tmt5 img { height: 13px; }
  .nav-inner.is-tight .tmt5 { width: 36px; }
  .nav-inner.is-tight .tmt5 img { width: 18px; height: 17px; }
  .tbal-menu { position: fixed; left: 12px; right: 12px; top: 64px; min-width: 0; }
  .tbal-real { height: 36px; padding: 0 10px; gap: 5px; font-size: 12px; }
  .tbal-real--menu { height: 40px; font-size: 12.5px; }
}
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .tnav-end { gap: 6px; }
  .tnav-lang .lang-btn { padding: 0 8px; }
  .tbal-chip { gap: 6px; padding: 0 8px 0 10px; }
  .tmt5 { padding: 0 8px; }
  .tmt5 img { height: 12px; }
  .tbal-kind { font-size: 10px; letter-spacing: .07em; }
  .tbal-amt { font-size: 13.5px; }
  .tbal-real { padding: 0 8px; gap: 4px; font-size: 11.5px; }
  .tbal-real svg { width: 12px; height: 12px; }
  .tbal-real--menu { font-size: 12.5px; }
  .tbal-real--menu svg { width: 14px; height: 14px; }
}