/* custom.css — Bybit-style enhancements for nbibit */
'use strict';

/* Soft text helper */
.soft { color: #8a8f98; }

/* TradingView container */
#tv-chart-container,
#tv-chart-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: 0;
    border-radius: 0 !important;
    display: block;
}

/* Order book row flash animations */
@keyframes ob-flash-up {
    0%   { background: rgba(23, 201, 100, 0.25); }
    100% { background: transparent; }
}
@keyframes ob-flash-dn {
    0%   { background: rgba(239, 68, 68, 0.25); }
    100% { background: transparent; }
}
.ob-row-flash-up { animation: ob-flash-up 0.6s ease-out; }
.ob-row-flash-dn { animation: ob-flash-dn 0.6s ease-out; }

/* Price flash animations */
@keyframes flash-green {
    0%   { color: #17c964; }
    100% { color: inherit; }
}
@keyframes flash-red {
    0%   { color: #ef4444; }
    100% { color: inherit; }
}
.flash-green { animation: flash-green 0.5s ease-out; }
.flash-red   { animation: flash-red 0.5s ease-out; }

/* Pair dropdown — must sit above TradingView iframe */
#pair-selector { position: relative; z-index: 100002; }
.pair-dropdown {
    position: fixed;
    top: 96px;
    left: 16px;
    margin-top: 0;
    background: #16191f;
    border: 1px solid #2a2f3a;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.75);
    z-index: 100000;
    min-width: 180px;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
}
body.pair-menu-open #tv-chart-container,
body.pair-menu-open #tv-chart-container iframe {
    pointer-events: none !important;
}
.pair-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: transparent;
}
.pair-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    font-size: 12px;
    color: #d1d5db;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pair-dropdown-item:hover { background: rgba(247, 166, 0, 0.1); color: #f7a600; }
.pair-dropdown-item.active { background: rgba(247, 166, 0, 0.15); color: #f7a600; }

.lang-flag-img {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    flex-shrink: 0;
}
.lang-dropdown {
    position: fixed;
    top: 44px;
    right: 12px;
    background: #16191f;
    border: 1px solid #2a2f3a;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.75);
    z-index: 100000;
    min-width: 180px;
    padding: 4px;
}
.lang-item {
    display: flex;
    width: 100%;
    text-align: left;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    color: #d1d5db;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
.lang-item:hover { background: rgba(247, 166, 0, 0.1); color: #f7a600; }

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0b0c10; }
::-webkit-scrollbar-thumb { background: #2a2f3a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3f4a; }

/* Hide horizontal scrollbar visual noise on market bar */
.overflow-x-auto::-webkit-scrollbar { height: 4px; }

/* Buy/withdraw button hover glow */
#btn-withdraw {
    box-shadow: 0 0 0 0 rgba(247, 166, 0, 0.4);
    transition: box-shadow 0.3s ease, transform 0.1s ease;
}
#btn-withdraw:hover {
    box-shadow: 0 0 16px 0 rgba(247, 166, 0, 0.45);
}

/* KYC bar subtle pulse */
@keyframes kyc-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.85; }
}
#kyc-bar { animation: kyc-pulse 2.4s ease-in-out infinite; }