/* trade.css Created Successfully */

/* ── Trade Section & Card Base ── */
/* حل عسكري لإجبار الكرت على أخذ عرض الشاشة بالكامل */
#trade-section {
    width: 30vw !important; /* عرض يساوي عرض الشاشة بالكامل */
    max-width: 30vw !important;
    margin-bottom: 20px !important;
    box-sizing: border-box !important;
}
.trade-section{ font-size:11.5px; font-weight:600; color:#90a4ae; text-transform:uppercase; letter-spacing:.08em; margin-top:8px; text-align:center; display:block; }
.trade-card{ width:100%; border-radius:16px; padding:14px 20px; box-shadow:0 4px 16px rgba(0,0,0,0.05); opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; border:1.5px solid transparent; }
.trade-card.show{ opacity:1; transform:translateY(0); }

/* ── Rows & Columns Layout ── */
.tc-r1{ display:flex; align-items:center; margin-bottom:10px; }
.tc-r2{ display:flex; justify-content:space-between; align-items:center; padding-top:10px; border-top:1px solid rgba(0,0,0,0.05); gap:8px; }
.tc-symbol-wrap{ display:flex; align-items:center; gap:8px; flex:1; }
.tc-profit-wrap{ display:flex; align-items:baseline; gap:5px; flex:1; justify-content:center; }
.tc-return-wrap{ display:flex; align-items:baseline; gap:4px; flex:1; justify-content:flex-end; }
.tc-detail{ display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }

/* ── Elements Typography ── */
.tc-ticker-icon{ width:26px; height:26px; border-radius:6px; background:rgba(0,188,212,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.tc-ticker-icon svg{ width:14px; height:14px; fill:none; stroke-width:2.2; }
.tc-symbol{ font-size:20px; font-weight:800; color:#1b4332; letter-spacing:.03em; }
.tc-profit-lbl, .tc-return-lbl{ font-size:11px; font-weight:600; }
.tc-arrow{ font-size:15px; font-weight:700; }
.tc-profit{ font-size:22px; font-weight:800; line-height:1; }
.tc-return{ font-size:20px; font-weight:800; line-height:1; }
.tc-detail-lbl{ font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:#b0bec5; }
.tc-detail-val{ font-size:13px; font-weight:600; color:#90a4ae; }
.tc-divline{ width:1px; height:26px; background:rgba(0,0,0,0.08); flex-shrink:0; }

/* ── Dynamic Colors (Profit / Loss) ── */
.trade-card.is-profit { background:linear-gradient(160deg,#f0faf2 0%,#e2f5e7 100%); border-color:rgba(67,160,71,.30); }
.is-profit .tc-svg { stroke:#43a047; }
.is-profit .tc-profit-lbl, .is-profit .tc-return-lbl { color:#81c784; }
.is-profit .tc-arrow, .is-profit .tc-profit, .is-profit .tc-return { color:#2e7d32; }

.trade-card.is-loss { background:linear-gradient(160deg,#fff5f5 0%,#ffe8e8 100%); border-color:rgba(220,38,38,.25); }
.is-loss .tc-svg { stroke:#dc2626; }
.is-loss .tc-profit-lbl, .is-loss .tc-return-lbl { color:#ef9a9a; }
.is-loss .tc-arrow, .is-loss .tc-profit, .is-loss .tc-return { color:#dc2626; }
.is-loss .tc-divline { background:rgba(220,38,38,0.12); }

/* ── Responsive ── */
@media (max-width: 768px) {
    #trade-section {    width: 100% !important;
        max-width: 100% !important; }
    .trade-card { padding:12px 14px; border-radius:13px; }
    .tc-r1 { flex-wrap:wrap; gap:4px; }
    .tc-symbol-wrap { flex:0 0 100%; justify-content:center; margin-bottom:2px; }
    .tc-symbol { font-size:16px; }
    .tc-profit-wrap { justify-content:flex-start; gap:3px; }
    .tc-return-wrap { flex:0 0 auto; justify-content:flex-end; gap:3px; }
    .tc-profit-lbl, .tc-return-lbl { font-size:10px; }
    .tc-arrow { font-size:13px; }
    .tc-profit { font-size:16px; }
    .tc-return { font-size:15px; }
    .tc-r2 { gap:4px; overflow:hidden; }
    .tc-detail { min-width:0; }
    .tc-detail-lbl { font-size:9px; }
    .tc-detail-val { font-size:10.5px; word-break:break-word; text-align:center; }
    .tc-divline { height:22px; }
}
@media (max-width: 400px) {
    .tc-profit { font-size:14px; }
    .tc-return { font-size:13px; }
    .tc-detail-val { font-size:9.5px; }
    .tc-divline { display:none; }
}