/* ================================================================
   Forexit – Trading Page Extra Styles
================================================================ */

/* Active symbol button */
[data-symbol-btn].active-btn,
[data-symbol-btn]:focus {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-dim) !important;
}

/* Price flash animations */
@keyframes priceFlashUp   { 0%,100%{background:transparent} 40%{background:rgba(0,224,150,0.15)} }
@keyframes priceFlashDown { 0%,100%{background:transparent} 40%{background:rgba(255,71,87,0.15)} }
.price-flash-up   { animation: priceFlashUp   0.6s ease; border-radius:4px; }
.price-flash-down { animation: priceFlashDown 0.6s ease; border-radius:4px; }

/* ── Sticky right column on trading page ───────────────────── */
@media (max-width: 900px) {
    .container > div[style*="grid-template-columns:1fr 340px"] {
        grid-template-columns: 1fr !important;
    }
    .card[style*="position:sticky"] { position: relative !important; top: auto !important; }
}

/* ── Auth pages body override ──────────────────────────────── */
.auth-body .page-main { padding-top: 0 !important; }

/* ── Profile grid ──────────────────────────────────────────── */
@media (max-width: 520px) {
    .auth-card,
    .card form > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    .card form > div[style*="grid-template-columns:1fr 1fr"] > div[style*="grid-column:span 2"] {
        grid-column: span 1 !important;
    }
}

/* ── Dashboard compact on small screens ────────────────────── */
@media (max-width: 640px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .stat-value { font-size: 1.4rem !important; }
}

/* ── Contact page grid ─────────────────────────────────────── */
@media (max-width: 768px) {
    .container [style*="grid-template-columns:1fr 480px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Skeleton loading ──────────────────────────────────────── */
.ticker-item .ticker-price.skeleton {
    display: inline-block;
    width: 60px;
    height: 14px;
    border-radius: 3px;
}