/* ============================================
   Futures Trading Page - Specific Styles
   Loads trade-option.css for shared styles
   ============================================ */

/* Grid order: Chart(1) → OrderBook(2) → OrderPanel(3) */
/* All three columns match height. Order panel is compact by default; */
/* it grows naturally when TP/SL or More Options are expanded. */
.trade-top-grid { align-items: start; }
.trade-chart-card { order: 1; height: 700px; min-height: 0; }
.trade-orderbook { order: 2; height: 700px; overflow-y: auto; }
.trade-order-panel { order: 3; }

/* --- Compact order panel: trim spacing to fit ~700px without scroll --- */
.trade-order-panel { padding: 16px; }
.trade-order-panel .order-side-toggle { margin-bottom: 12px; }
.trade-order-panel .order-side-btn { padding: 8px; font-size: 13px; }

/* BUG-007: Long/Short active state colors (Futures uses long/short, not buy/sell) */
.order-side-btn.long.active {
  background: rgba(92, 184, 230, 0.15);
  color: #5cb8e6;
}
.order-side-btn.short.active {
  background: rgba(224, 160, 80, 0.15);
  color: #e0a050;
}
.trade-order-panel .leverage-section { margin-bottom: 10px; }
.trade-order-panel .order-type-row { margin-bottom: 10px; }
.trade-order-panel .order-field { margin-bottom: 10px; }
.trade-order-panel .order-field label { margin-bottom: 4px; }
.trade-order-panel .order-input { padding: 8px 0; font-size: 14px; }
.trade-order-panel .input-mode-toggle { margin-bottom: 8px; }
.trade-order-panel .tpsl-section { margin-bottom: 8px; }
.trade-order-panel .tpsl-toggle { padding: 6px 0; }
.trade-order-panel .more-options { margin-bottom: 8px; }
.trade-order-panel .order-summary { padding: 8px 0; margin-bottom: 10px; }
.trade-order-panel .order-summary-row { padding: 3px 0; }
.trade-order-panel .order-summary-row.total { padding-top: 6px; }
.trade-order-panel .order-submit-btn { padding: 12px; margin-bottom: 8px; font-size: 14px; }
.trade-order-panel .order-balance-info { font-size: 11px; }
.order-balance-info-secondary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 11px;
  color: #8a8a9a;
}

/* Contract Type Tags */
.type-tag.perp { color: #5cb8e6; background: rgba(92, 184, 230, 0.1); }
.type-tag.futures { color: #f0a050; background: rgba(240, 160, 80, 0.1); }
.type-tag.equity { color: #7c3aed; background: rgba(124, 58, 237, 0.1); }

/* Equity Perps — company name in contract list */
.contract-company { color: #9ca3af; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }

/* Leverage Slider */
.leverage-section { margin-bottom: 16px; }
.leverage-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.leverage-label { font-size: 12px; color: #8a8a9a; font-weight: 500; }
.leverage-value { font-size: 14px; font-weight: 700; color: #5cb8e6; }
.leverage-slider { width: 100%; -webkit-appearance: none; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); outline: none; }
.leverage-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #5cb8e6; cursor: pointer; box-shadow: 0 2px 8px rgba(92,184,230,0.3); }
.leverage-slider-wrap { position: relative; }
.leverage-marks { display: flex; justify-content: space-between; font-size: 10px; color: #9a9aaa; margin-top: 6px; padding: 0 2px; user-select: none; }
.leverage-presets { display: flex; gap: 4px; margin-top: 6px; }
.leverage-preset-btn { flex: 1; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); color: #8a8a9a; font-size: 11px; font-weight: 600; padding: 5px 0; border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.leverage-preset-btn:hover { color: #e0e0e8; border-color: rgba(255,255,255,0.12); }
.leverage-preset-btn.active { color: #5cb8e6; border-color: rgba(92,184,230,0.3); background: rgba(92,184,230,0.06); }

/* Funding Rate Display */
.funding-info { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; margin-bottom: 16px; }
.funding-item { display: flex; flex-direction: column; gap: 2px; }
.funding-item-label { font-size: 10px; color: #5a5a6a; text-transform: uppercase; letter-spacing: 0.3px; }
.funding-item-value { font-size: 12px; font-weight: 600; color: #a8a8b8; font-variant-numeric: tabular-nums; }
.funding-item-value.positive { color: #5cb8e6; }
.funding-item-value.negative { color: #e0a050; }

/* Active Contracts List */
.contracts-tabs { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); overflow-x: auto; }
.contracts-tab { background: none; border: 1px solid rgba(255,255,255,0.08); color: #8a8a9a; font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 6px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
.contracts-tab:hover { background: rgba(255,255,255,0.04); color: #c0c0d0; }
.contracts-tab.active { background: rgba(92,184,230,0.1); border-color: rgba(92,184,230,0.3); color: #5cb8e6; }
.tab-count { font-size: 10px; color: inherit; opacity: 0.7; margin-left: 2px; }
.contracts-search-wrap { padding: 6px 16px; }
.contracts-search { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 6px 12px; font-size: 12px; color: #e0e0e8; outline: none; }
.contracts-search:focus { border-color: rgba(92,184,230,0.3); }
.contracts-search::placeholder { color: #5a5a6a; }
.contracts-scroll { overflow-x: auto; max-height: 500px; overflow-y: auto; }
.contracts-table { min-width: 700px; }
.contracts-list { }
.contracts-loading { padding: 24px; text-align: center; color: #5a5a6a; font-size: 13px; }
.contracts-header { display: grid; grid-template-columns: 2.2fr 1fr 0.8fr 0.9fr 0.8fr 0.8fr 70px; gap: 8px; padding: 8px 16px; font-size: 11px; color: #5a5a6a; text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid rgba(255,255,255,0.06); position: sticky; top: 0; background: #1a1a2e; z-index: 1; }
.contracts-row { display: grid; grid-template-columns: 2.2fr 1fr 0.8fr 0.9fr 0.8fr 0.8fr 70px; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; transition: background 0.15s; }
.contracts-row:hover { background: rgba(255,255,255,0.02); }
.contracts-row.active { background: rgba(92,184,230,0.04); border-left: 3px solid #5cb8e6; }
.contract-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: #e0e0e8; }
.contract-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 28px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.contract-type { font-size: 11px; color: #8a8a9a; font-weight: 400; margin-left: 6px; white-space: nowrap; }
.contract-expiry { font-size: 10px; color: #c9a84c; font-weight: 500; }
.contract-price { font-size: 13px; font-weight: 600; color: #e0e0e8; font-variant-numeric: tabular-nums; }
.contract-change { font-size: 12px; font-weight: 500; }
.contract-change.positive { color: #5cb8e6; }
.contract-change.negative { color: #e0a050; }
.contract-funding { font-size: 12px; font-weight: 500; }
.contract-funding.positive { color: #5cb8e6; }
.contract-funding.negative { color: #e0a050; }
.contract-oi, .contract-vol { font-size: 12px; color: #a8a8b8; font-variant-numeric: tabular-nums; }
.contract-trade-btn { background: rgba(92,184,230,0.08); border: 1px solid rgba(92,184,230,0.2); color: #5cb8e6; font-size: 11px; font-weight: 600; padding: 5px 14px; border-radius: 4px; cursor: pointer; transition: all 0.15s; }
.contract-trade-btn:hover { background: rgba(92,184,230,0.15); border-color: rgba(92,184,230,0.4); }


/* Input Mode Toggle (Quantity / Margin) */
.input-mode-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  padding: 3px;
}
.input-mode-btn {
  flex: 1;
  background: none;
  border: none;
  color: #8a8a9a;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.input-mode-btn:hover { color: #b0b0c0; }
.input-mode-btn.active {
  background: rgba(92,184,230,0.1);
  color: #5cb8e6;
}

/* Margin calc result */
.margin-calc-result {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(92,184,230,0.05);
  border: 1px solid rgba(92,184,230,0.12);
  border-radius: 8px;
  font-size: 12px;
  color: #a8a8b8;
}
.margin-calc-arrow { color: #5cb8e6; font-size: 14px; }
.margin-qty-label { color: #8a8a9a; font-size: 12px; }
.margin-qty-input {
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(255,255,255,0.15);
  color: #e0e0e8;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 70px;
  text-align: center;
  padding: 2px 4px;
  outline: none;
  font-family: inherit;
}
.margin-qty-input:focus { border-bottom-color: #5cb8e6; }
.margin-qty-suffix { color: #8a8a9a; font-size: 11px; }
.margin-calc-value { color: #8a8a9a; font-size: 11px; margin-left: auto; }
.margin-quick-btns { margin-top: 6px; }

/* Price row with BBO */
.price-row-with-bbo {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.price-row-with-bbo .order-input-wrap { flex: 1; }
/* BUG #49/#56: red border on invalid price tick */
.order-input-wrap.input-invalid { border-color: #f85149 !important; }

/* BBO Button */
.bbo-btn {
  background: rgba(92,184,230,0.08);
  border: 1px solid rgba(92,184,230,0.2);
  color: #5cb8e6;
  font-size: 11px;
  font-weight: 700;
  padding: 0 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bbo-btn:hover { background: rgba(92,184,230,0.15); border-color: rgba(92,184,230,0.4); color: #7ccbf0; }
.bbo-btn.flash { background: rgba(92,184,230,0.25); }

/* TP/SL Section */
.tpsl-section { margin-bottom: 14px; }
.tpsl-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
  color: #9a9aaa;
  font-size: 12px;
  font-weight: 500;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.tpsl-toggle:hover { color: #a0a0b0; border-color: rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); }
.tpsl-toggle.active { display: none; }
.tpsl-fields { display: flex; flex-direction: column; gap: 8px; }
.tpsl-row { display: flex; align-items: center; gap: 8px; }
.tpsl-label {
  font-size: 11px;
  font-weight: 700;
  width: 26px;
  min-width: 26px;
  text-align: center;
  padding: 4px 0;
  border-radius: 4px;
}
.tpsl-label.tp { color: #5cb8e6; background: rgba(92,184,230,0.1); }
.tpsl-label.sl { color: #e0a050; background: rgba(224,160,80,0.1); }
.tpsl-input-wrap { flex: 1; }
.tpsl-input { font-size: 13px !important; padding: 8px 0 !important; }
.tpsl-input::placeholder { color: #4a4a5a; font-weight: 400; }
.tpsl-close {
  background: none; border: none; color: #5a5a6a; cursor: pointer;
  font-size: 16px; padding: 4px 6px; line-height: 1; transition: color 0.15s;
}
.tpsl-close:hover { color: #e0a050; }

/* More Options */
.more-options { margin-bottom: 14px; }
.more-options-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 12px;
  color: #8a8a9a;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
  list-style: none;
  transition: color 0.15s;
}
.more-options-summary::-webkit-details-marker { display: none; }
.more-options-summary:hover { color: #a0a0b0; }
.more-options-summary svg { transition: transform 0.2s; }
.more-options[open] .more-options-summary svg { transform: rotate(180deg); }
.more-options-body { padding-top: 10px; }

/* Time in Force */
.tif-field { margin-bottom: 0 !important; }
.tif-field label { margin-bottom: 6px; }
.tif-tabs { display: flex; gap: 4px; }
.tif-btn {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: #8a8a9a;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.tif-btn:hover { color: #a0a0b0; border-color: rgba(255,255,255,0.15); }
.tif-btn.active { color: #5cb8e6; border-color: rgba(92,184,230,0.3); background: rgba(92,184,230,0.06); }

/* Order Insight */
.order-insight-wrap {
  position: relative;
  margin-bottom: 12px;
}
.order-insight-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 12px;
  color: #6ea8cc;
  cursor: pointer;
  transition: color 0.15s;
  user-select: none;
}
.order-insight-trigger:hover { color: #8cc4e8; }
.order-insight-trigger svg { opacity: 0.7; }
.order-insight-popup {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #1e2038;
  border: 1px solid rgba(92,184,230,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  animation: insightFadeIn 0.15s ease;
}
.order-insight-wrap:hover .order-insight-popup,
.order-insight-popup.pinned { display: block; }
@keyframes insightFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.order-insight-content {
  font-size: 12px;
  line-height: 1.6;
  color: #c0c0d0;
}
.order-insight-content strong { color: #e0e0e8; }
.order-insight-content .insight-warn { color: #e6a84c; }
.order-insight-content .insight-risk { color: #e0a050; }
.order-insight-content .insight-ok { color: #5cb8e6; }

/* Position / Orders Tabs */
.trade-your-position { margin-bottom: 16px; }
.pos-tabs { display: flex; gap: 0; }
.pos-tab {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.pos-tab:hover { color: #c8c8d8; }
.pos-tab.active { color: #e0e0e8; border-bottom-color: #5cb8e6; }
.pos-tab-count { font-size: 11px; color: #5cb8e6; font-weight: 600; margin-left: 4px; }
.pos-tab-content { display: none; }
.pos-tab-content.active { display: block; }

/* Cancel button in orders table */
.order-cancel-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid rgba(224,80,80,0.3);
  background: rgba(224,80,80,0.08);
  color: #e05050;
}
.order-cancel-btn:hover { background: rgba(224,80,80,0.18); }
.order-cancel-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.order-status-new { color: #5cb8e6; }
.order-status-partial { color: #e0a050; }
.pos-table-wrap { overflow-x: auto; }
.pos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pos-table thead th {
  color: #7a7a8a;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: right;
}
.pos-table thead th:first-child { text-align: left; }
.pos-table thead th:nth-child(2) { text-align: center; }
.pos-table thead th:last-child { text-align: center; }
.pos-table tbody td {
  padding: 10px 10px;
  color: #c8c8d8;
  font-weight: 500;
  text-align: right;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.pos-table tbody td:first-child { text-align: left; color: #e0e0e8; font-weight: 700; }
.pos-table tbody td:nth-child(2) { text-align: center; }
.pos-table tbody td:last-child { text-align: center; }
.pos-table tbody tr:hover { background: rgba(255,255,255,0.02); }

/* Bug #338 (Quang QA BUG-44 2026-06-08): Side column on Equity Tokens /
   Futures positions table was inheriting the default `.pos-table tbody td`
   right-align and looked misaligned next to the centered Type column.
   On the 3-up trade pages (futures + equity), the Side column is column 3
   on BOTH posTable (Symbol/Type/Side/...) and ordersTable
   (Time/Symbol/Side/...) — so a single nth-child(3) rule covers both.
   Scoped to `body.trade-page-3up` so the trade-option.html positions
   table (where column 3 is `Size`, a numeric value) keeps its right-
   aligned default. */
body.trade-page-3up .pos-table thead th:nth-child(3),
body.trade-page-3up .pos-table tbody td:nth-child(3) {
  text-align: center;
}
.pos-side-long { color: #5cb8e6; font-weight: 700; }
.pos-side-short { color: #e0a050; font-weight: 700; }
.pos-pnl-positive { color: #5cb8e6; font-weight: 600; }
.pos-pnl-negative { color: #e0a050; font-weight: 600; }
.pos-close-btns { display: flex; gap: 4px; justify-content: center; }
.pos-close-btn {
  font-size: 10px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid;
}
.pos-close-limit { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: #a0a0b0; }
.pos-close-limit:hover { background: rgba(255,255,255,0.08); color: #e0e0e8; }
.pos-close-market { background: rgba(224,160,80,0.08); border-color: rgba(224,160,80,0.2); color: #e0a050; }
.pos-close-market:hover { background: rgba(224,160,80,0.15); }

/* AI Chat Model Selector */
.chat-model-select {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: #a8a8b8;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8a9a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
  transition: all 0.15s;
}
.chat-model-select:hover {
  border-color: rgba(92,184,230,0.3);
  color: #e0e0e8;
}
.chat-model-select:focus {
  border-color: rgba(92,184,230,0.4);
}
.chat-model-select option {
  background: #1a1a2e;
  color: #e0e0e8;
}

/* Liquidation Price Warning */
.liq-warning { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(224,160,80,0.06); border: 1px solid rgba(224,160,80,0.12); border-radius: 8px; margin-top: 12px; font-size: 12px; color: #e0a050; }
.liq-warning svg { flex-shrink: 0; }

/* ===== RESPONSIVE =====
   BUG #15: layout-affecting rules now live in trade-option.css under
   `body.trade-page-3up`. Below are only Futures/Equity-specific compact
   adjustments (position table, instrument bar). Boundary aligned with
   the new Narrow breakpoint (<1024px). */

/* Tablet — instrument bar stacks, order panel always visible */
@media (max-width: 1023px) {
  .trade-order-panel { max-width: none; }
  .pos-table { font-size: 11px; }
  .pos-table thead th, .pos-table tbody td { padding: 8px 6px; }

  .instrument-bar { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .inst-bar-metrics { flex-wrap: wrap !important; gap: 6px !important; }
  .inst-metric-divider { display: none !important; }
}

/* Mobile */
@media (max-width: 768px) {
  .instrument-bar { padding: 12px 16px !important; }
  .inst-bar-symbol { font-size: 16px !important; }
  .trade-main { padding: 12px 16px 60px !important; }

  /* Order panel — ensure it never disappears */
  .trade-order-panel { padding: 16px !important; }
  .leverage-marks { font-size: 9px; }

  /* Position table — horizontal scroll */
  .pos-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .pos-table { min-width: 700px; }
  .pos-table thead th, .pos-table tbody td { padding: 8px 8px; font-size: 11px; }

  /* Contract list */
  .contracts-header, .contracts-row { font-size: 11px; padding: 8px 12px; }
  .contracts-scroll { max-height: 300px; }

  /* AI Chat */
  .ai-chat-panel { width: calc(100vw - 32px) !important; right: 16px !important; bottom: 70px !important; max-height: 60vh !important; }

  /* Funding info */
  .funding-info { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }

  /* Leverage presets */
  .leverage-presets { flex-wrap: wrap; }
}

/* Small mobile */
@media (max-width: 480px) {
  .trade-chart-card { height: 400px; }
  .trade-main { padding: 8px 8px 60px !important; }
  .inst-bar-symbol { font-size: 14px !important; }
  .metric-label { font-size: 9px !important; }
  .metric-value { font-size: 12px !important; }

  .price-row-with-bbo { flex-direction: column; gap: 6px; }
  .bbo-btn { width: 100%; padding: 8px 0; text-align: center; }


  .ai-chat-panel { width: calc(100vw - 16px) !important; right: 8px !important; left: 8px !important; bottom: 60px !important; max-height: 70vh !important; }

  /* Contracts table scroll */
  .contracts-header, .contracts-row {
    grid-template-columns: 2fr 1fr 0.8fr 70px;
  }
  .contracts-header span:nth-child(5),
  .contracts-header span:nth-child(6),
  .contracts-row span:nth-child(5),
  .contracts-row span:nth-child(6) {
    display: none;
  }
}

/* ============================================
   Order Confirmation Modal
   ============================================ */
.order-confirm-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.order-confirm-overlay.show { opacity: 1; pointer-events: auto; }

.order-confirm-modal {
  background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; padding: 24px; width: 380px; max-width: 90vw;
  transform: scale(0.95); transition: transform 0.2s;
}
.order-confirm-overlay.show .order-confirm-modal { transform: scale(1); }

.order-confirm-title {
  font-size: 16px; font-weight: 700; color: #e0e0e8; margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.order-confirm-title .side-badge {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.side-badge.long { background: rgba(92,184,230,0.15); color: #5cb8e6; }
.side-badge.short { background: rgba(224,160,80,0.15); color: #e0a050; }

.order-confirm-details { margin-bottom: 20px; }
.order-confirm-row {
  display: flex; justify-content: space-between; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.order-confirm-row:last-child { border-bottom: none; }
.order-confirm-row .label { color: #8a8a9a; }
.order-confirm-row .value { color: #e0e0e8; font-weight: 600; }
.order-confirm-row.total-row { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; margin-top: 4px; }
.order-confirm-row.total-row .label { color: #e0e0e8; font-weight: 700; }
.order-confirm-row.total-row .value { font-weight: 700; font-size: 14px; }

.order-confirm-actions {
  display: flex; gap: 10px;
}
.order-confirm-actions button {
  flex: 1; padding: 12px; border-radius: 8px; font-size: 14px;
  font-weight: 700; cursor: pointer; border: none; transition: all 0.15s;
}
.btn-confirm-cancel {
  background: rgba(255,255,255,0.06); color: #8a8a9a;
}
.btn-confirm-cancel:hover { background: rgba(255,255,255,0.1); color: #e0e0e8; }
.btn-confirm-execute.long {
  background: linear-gradient(135deg, #5cb8e6, #4a9fd4); color: #fff;
}
.btn-confirm-execute.long:hover { background: linear-gradient(135deg, #6cc4f0, #5cb8e6); }
.btn-confirm-execute.short {
  background: linear-gradient(135deg, #e0a050, #c88a40); color: #fff;
}
.btn-confirm-execute.short:hover { background: linear-gradient(135deg, #eab060, #e0a050); }

/* ============================================
   Toast Notifications
   ============================================ */
/* BUG #327: anchor moved from bottom-right to top-right so the toast no
   longer overlaps the TP/SL "not yet available" yellow warning at the
   bottom of the order panel (#tpslUnavailableNotice — kept visible per
   #227) nor the AI Chat FAB (.ai-chat-fab at bottom-right z-index 1000).
   Matches Spot Trading's top-right toast convention (#122 precedent).
   flex-direction: column-reverse is preserved — with the top anchor it
   now places newest toast closest to the anchor (conventional). z-index,
   transform/transition (toast.show slide-in from right) all unchanged.
   The mobile (max-width 480px) override below intentionally keeps
   bottom-stuck because the stacked mobile layout doesn't have the same
   right-column overlap problem. */
.toast-container {
  position: fixed; top: 70px; right: 24px; z-index: 9500;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  background: #1e1e32; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px; padding: 14px 18px; min-width: 300px; max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
  transform: translateX(120%); opacity: 0;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.hide { transform: translateX(120%); opacity: 0; }

.toast-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 14px;
}
.toast.success .toast-icon { background: rgba(92,184,230,0.15); color: #5cb8e6; }
.toast.error .toast-icon { background: rgba(224,100,80,0.15); color: #e06450; }

.toast-body { flex: 1; }
.toast-title { font-size: 13px; font-weight: 700; color: #e0e0e8; margin-bottom: 2px; }
.toast-message { font-size: 12px; color: #8a8a9a; }

.toast-close {
  background: none; border: none; color: #6a6a7a; cursor: pointer;
  font-size: 16px; padding: 4px; line-height: 1; flex-shrink: 0;
}
.toast-close:hover { color: #e0e0e8; }

@media (max-width: 480px) {
  .toast-container { right: 8px; left: 8px; bottom: 70px; }
  .toast { min-width: auto; }
  .order-confirm-modal { padding: 18px; }
}

/* =====================================================================
   TRADE WIZARD
   ===================================================================== */

/* Wizard trigger button in chat header */
.chat-wizard-btn {
  display: flex; align-items: center; gap: 4px;
  background: rgba(92,184,230,0.15); color: #5cb8e6;
  border: 1px solid rgba(92,184,230,0.3); border-radius: 6px;
  padding: 3px 8px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap;
}
.chat-wizard-btn:hover { background: rgba(92,184,230,0.25); border-color: #5cb8e6; }

/* Overlay */
.wizard-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.wizard-overlay.show { opacity: 1; pointer-events: auto; }

/* Modal */
.wizard-modal {
  background: #1a1a2e; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; width: 460px; max-width: 94vw;
  max-height: 88vh; display: flex; flex-direction: column;
  transform: scale(0.95); transition: transform 0.25s ease;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.wizard-overlay.show .wizard-modal { transform: scale(1); }

/* Header */
.wizard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wizard-title {
  font-size: 16px; font-weight: 700; color: #e0e0e8;
  background: linear-gradient(90deg, #5cb8e6, #8dd0f0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.wizard-close {
  background: none; border: none; color: #6b7280; font-size: 22px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.wizard-close:hover { color: #e0e0e8; }

/* Progress dots */
.wizard-progress {
  display: flex; align-items: center; justify-content: center;
  gap: 0; padding: 14px 20px 10px;
}
.wizard-dot {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #6b7280;
  background: rgba(255,255,255,0.05); border: 2px solid rgba(255,255,255,0.08);
  transition: all 0.3s; flex-shrink: 0;
}
.wizard-dot.active { border-color: #5cb8e6; color: #5cb8e6; background: rgba(92,184,230,0.1); }
.wizard-dot.done { border-color: #5cb8e6; background: #5cb8e6; color: #fff; }
.wizard-line {
  width: 24px; height: 2px; background: rgba(255,255,255,0.08);
  flex-shrink: 0; transition: background 0.3s;
}
.wizard-line.done { background: #5cb8e6; }

/* Body */
.wizard-body {
  flex: 1; overflow-y: auto; padding: 16px 20px;
  min-height: 260px;
}
.wizard-body::-webkit-scrollbar { width: 4px; }
.wizard-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Step title + subtitle */
.wz-step-title { font-size: 15px; font-weight: 700; color: #e0e0e8; margin-bottom: 4px; }
.wz-step-sub { font-size: 12px; color: #8a8a9a; margin-bottom: 16px; line-height: 1.4; }

/* Asset grid (Step 1) */
.wz-asset-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.wz-asset-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 8px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.06);
  transition: all 0.2s;
}
.wz-asset-card:hover { border-color: rgba(92,184,230,0.3); background: rgba(92,184,230,0.04); }
.wz-asset-card.selected { border-color: #5cb8e6; background: rgba(92,184,230,0.08); box-shadow: 0 0 12px rgba(92,184,230,0.15); }
.wz-asset-icon {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
}
.wz-asset-name { font-size: 13px; font-weight: 700; color: #e0e0e8; }
.wz-asset-price { font-size: 11px; color: #8a8a9a; }

/* Option cards (Steps 2, 3, 4) */
.wz-option-list { display: flex; flex-direction: column; gap: 10px; }
.wz-option-card {
  padding: 14px 16px; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,0.03); border: 1.5px solid rgba(255,255,255,0.06);
  transition: all 0.2s;
}
.wz-option-card:hover { border-color: rgba(92,184,230,0.3); }
.wz-option-card.selected { border-color: #5cb8e6; background: rgba(92,184,230,0.06); }
.wz-option-card.disabled { opacity: 0.4; pointer-events: none; }
.wz-option-title { font-size: 14px; font-weight: 700; color: #e0e0e8; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.wz-option-tag { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.wz-option-tag.recommended { background: rgba(92,184,230,0.15); color: #5cb8e6; }
.wz-option-tag.advanced { background: rgba(224,160,80,0.15); color: #e0a050; }
.wz-option-desc { font-size: 12px; color: #8a8a9a; line-height: 1.5; }
.wz-option-desc ul { margin: 4px 0 0; padding-left: 16px; }
.wz-option-desc li { margin-bottom: 3px; }

/* Direction cards (Step 4) */
.wz-dir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wz-dir-card {
  padding: 20px 16px; border-radius: 14px; cursor: pointer; text-align: center;
  background: rgba(255,255,255,0.03); border: 2px solid rgba(255,255,255,0.06);
  transition: all 0.25s;
}
.wz-dir-card:hover { border-color: rgba(255,255,255,0.15); }
.wz-dir-card.selected.long { border-color: #5cb8e6; background: rgba(92,184,230,0.08); }
.wz-dir-card.selected.short { border-color: #e0a050; background: rgba(224,160,80,0.08); }
.wz-dir-icon { font-size: 28px; margin-bottom: 8px; }
.wz-dir-label { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.wz-dir-card.long .wz-dir-label { color: #5cb8e6; }
.wz-dir-card.short .wz-dir-label { color: #e0a050; }
.wz-dir-hint { font-size: 11px; color: #8a8a9a; }

/* Leverage & Amount (Step 5) */
.wz-field { margin-bottom: 16px; }
.wz-field-label { font-size: 12px; color: #8a8a9a; margin-bottom: 6px; font-weight: 600; }
.wz-leverage-wrap { display: flex; align-items: center; gap: 10px; }
.wz-lev-slider {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px;
  border-radius: 3px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #22c55e 0%, #eab308 40%, #ef4444 100%);
}
.wz-lev-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: #e0e0e8; border: 2px solid #5cb8e6;
  cursor: pointer; box-shadow: 0 0 6px rgba(92,184,230,0.4);
}
.wz-lev-value {
  min-width: 48px; text-align: center; font-size: 16px;
  font-weight: 800; color: #e0e0e8;
}
.wz-risk-label {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
  margin-top: 6px; display: inline-block;
}
.wz-risk-low { background: rgba(34,197,94,0.15); color: #22c55e; }
.wz-risk-med { background: rgba(234,179,8,0.15); color: #eab308; }
.wz-risk-high { background: rgba(239,68,68,0.15); color: #ef4444; }
.wz-risk-extreme { background: rgba(239,68,68,0.25); color: #ff4444; }

.wz-amount-input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #e0e0e8; font-size: 15px; font-weight: 600;
  outline: none; box-sizing: border-box;
}
.wz-amount-input:focus { border-color: #5cb8e6; }
.wz-pct-btns { display: flex; gap: 6px; margin-top: 8px; }
.wz-pct-btn {
  flex: 1; padding: 6px; border-radius: 6px; font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
  color: #8a8a9a; cursor: pointer; transition: all 0.15s;
}
.wz-pct-btn:hover { border-color: #5cb8e6; color: #5cb8e6; }
.wz-pct-btn.active { border-color: #5cb8e6; background: rgba(92,184,230,0.1); color: #5cb8e6; }

.wz-calc-row {
  display: flex; justify-content: space-between; padding: 6px 0;
  font-size: 12px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wz-calc-label { color: #8a8a9a; }
.wz-calc-value { color: #e0e0e8; font-weight: 600; }

/* Review (Step 6) */
.wz-review-table { width: 100%; }
.wz-review-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.wz-review-row:last-child { border-bottom: none; }
.wz-review-label { font-size: 12px; color: #8a8a9a; }
.wz-review-value { font-size: 13px; color: #e0e0e8; font-weight: 600; }
.wz-review-total { font-size: 14px; font-weight: 800; color: #5cb8e6; }

.wz-info-note {
  font-size: 11px; color: #8a8a9a; background: rgba(92,184,230,0.06);
  border-left: 3px solid #5cb8e6; padding: 8px 10px; border-radius: 4px;
  margin-top: 12px; line-height: 1.4;
}

/* Footer */
.wizard-footer {
  display: flex; gap: 10px; padding: 12px 20px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.wizard-btn {
  flex: 1; padding: 10px; border-radius: 8px; font-size: 13px;
  font-weight: 700; cursor: pointer; transition: all 0.2s; border: none;
}
.wizard-btn-back {
  background: rgba(255,255,255,0.06); color: #8a8a9a;
}
.wizard-btn-back:hover { background: rgba(255,255,255,0.1); color: #e0e0e8; }
.wizard-btn-back.hidden { visibility: hidden; }
.wizard-btn-next {
  background: linear-gradient(135deg, #5cb8e6, #4a9fd4); color: #fff;
}
.wizard-btn-next:hover { background: linear-gradient(135deg, #6cc4f0, #5cb8e6); }
.wizard-btn-next:disabled { opacity: 0.4; cursor: not-allowed; }
.wizard-btn-customize {
  background: rgba(92,184,230,0.12); color: #5cb8e6; border: 1px solid rgba(92,184,230,0.3);
}
.wizard-btn-customize:hover { background: rgba(92,184,230,0.2); border-color: #5cb8e6; }
.wizard-btn-next.submit {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
.wizard-btn-next.submit:hover { background: linear-gradient(135deg, #2dd468, #22c55e); }

/* Live price display */
.wz-live-price {
  text-align: center; padding: 10px; margin-bottom: 14px;
  background: rgba(255,255,255,0.03); border-radius: 8px;
}
.wz-live-price-val { font-size: 22px; font-weight: 800; color: #e0e0e8; }
.wz-live-price-label { font-size: 11px; color: #8a8a9a; margin-top: 2px; }

/* Responsive */
@media (max-width: 768px) {
  .wizard-modal { width: 100%; max-width: calc(100vw - 32px); }
}
@media (max-width: 480px) {
  .wz-asset-grid { grid-template-columns: repeat(2, 1fr); }
  .wizard-modal { border-radius: 12px; }
  .wizard-body { padding: 12px 14px; }
  .wizard-header { padding: 12px 14px 10px; }
  .wizard-footer { padding: 10px 14px 12px; }
}

/* ============================================
   Custom Confirm / Alert Modal
   ============================================ */
.vestex-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  animation: vModalFadeIn .15s ease;
}
@keyframes vModalFadeIn { from { opacity: 0; } to { opacity: 1; } }

.vestex-modal {
  background: #111827;
  border: 1px solid rgba(240,246,252,.1);
  border-radius: 14px;
  padding: 28px 32px 24px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
  animation: vModalSlide .2s ease;
}
@keyframes vModalSlide { from { transform: translateY(-10px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

.vestex-modal-icon {
  margin-bottom: 16px;
}
.vestex-modal-icon svg {
  width: 48px;
  height: 48px;
}

.vestex-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: #f0f6fc;
  margin-bottom: 8px;
}

.vestex-modal-body {
  font-size: 13px;
  color: #8b949e;
  line-height: 1.6;
  margin-bottom: 24px;
}

.vestex-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.vestex-modal-btn {
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, opacity .15s;
  min-width: 100px;
}
.vestex-modal-btn:hover { opacity: .9; }

.vestex-modal-btn.btn-cancel {
  background: rgba(240,246,252,.06);
  color: #8b949e;
  border: 1px solid rgba(240,246,252,.1);
}
.vestex-modal-btn.btn-cancel:hover {
  background: rgba(240,246,252,.1);
  color: #c9d1d9;
}

.vestex-modal-btn.btn-danger {
  background: #e0a050;
  color: #0a0e17;
}
.vestex-modal-btn.btn-danger:hover {
  background: #e8b060;
}

.vestex-modal-btn.btn-primary {
  background: #5cb8e6;
  color: #0a0e17;
}

.vestex-modal-btn.btn-error {
  background: rgba(248,81,73,.15);
  color: #f85149;
  border: 1px solid rgba(248,81,73,.2);
}

/* ============================================
   Shared Instrument Symbol Dropdown
   Used by Futures / Options / Equity pages
   (Spot has its own spot-symbol-* classes)
   ============================================ */
.inst-symbol-selector {
  position: relative;
  display: inline-block;
}

.inst-symbol-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
}

.inst-symbol-btn .inst-bar-symbol {
  margin: 0;
}

.inst-symbol-btn svg {
  color: #5a5a6a;
  transition: transform 0.2s;
  flex-shrink: 0;
}

.inst-symbol-selector.open .inst-symbol-btn svg {
  transform: rotate(180deg);
}

.inst-symbol-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 340px;
  max-height: 460px;
  background: #1a1f2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 100;
  overflow: hidden;
  flex-direction: column;
}

.inst-symbol-selector.open .inst-symbol-dropdown {
  display: flex;
}

.inst-symbol-search {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 12px 14px;
  color: #e0e0e8;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
}

.inst-symbol-search:focus {
  border-bottom-color: rgba(92,184,230,0.3);
}

.inst-symbol-search::placeholder {
  color: #4a4a5a;
}

.inst-symbol-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
  flex-wrap: wrap;
}

.inst-symbol-tab {
  background: none;
  border: none;
  color: #8a8a9a;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}

.inst-symbol-tab:hover {
  color: #e0e0e8;
  background: rgba(255,255,255,0.04);
}

.inst-symbol-tab.active {
  color: #5cb8e6;
  background: rgba(92,184,230,0.1);
}

.inst-symbol-list {
  flex: 1;
  overflow-y: auto;
  max-height: 380px;
}

.inst-symbol-list::-webkit-scrollbar {
  width: 3px;
}

.inst-symbol-list::-webkit-scrollbar-thumb {
  background: rgba(92, 184, 230, 0.3);
  border-radius: 2px;
}

.inst-dd-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
  gap: 8px;
}

.inst-dd-item:hover {
  background: rgba(255,255,255,0.04);
}

.inst-dd-item.active {
  background: rgba(92,184,230,0.08);
}

.inst-dd-item-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.inst-dd-item-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #0a0e17;
}

.inst-dd-item-symbol {
  font-size: 13px;
  font-weight: 600;
  color: #e0e0e8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inst-dd-item-sub {
  font-size: 11px;
  color: #6a6a7a;
  font-weight: 400;
  margin-left: 6px;
}

.inst-dd-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.inst-dd-item-price {
  font-size: 13px;
  color: #a8a8b8;
  font-variant-numeric: tabular-nums;
}

.inst-dd-item-change {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.inst-dd-item-change.positive { color: #5cb8e6; }
.inst-dd-item-change.negative { color: #e0a050; }

.inst-dd-empty {
  padding: 20px 14px;
  text-align: center;
  color: #6a6a7a;
  font-size: 12px;
}

/* BUG #85: Stop order — Stop Price (trigger) field */
.trigger-basis-note {
  color: #6a6a7a;
  font-size: 10px;
  font-weight: 400;
  margin-left: 6px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
#stopPxField .order-input {
  /* Match priceInput styling so the two fields look symmetric */
  font-variant-numeric: tabular-nums;
}
#stopPxTickHint {
  font-variant-numeric: tabular-nums;
}