/* ==========================================================
   STOCK MARKET ACADEMY
   LIVE MARKET TOPBAR
========================================================== */

.topbar {
    width: 100%;
    padding: 0;
    margin: 0;
    background: #0b3559;
    color: #ffffff;
    overflow: hidden;
}


/* ==========================================================
   REMOVE OLD CONTAINER LIMITS
========================================================== */

.topbar .container {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}


/* ==========================================================
   MAIN TOPBAR
========================================================== */

.market-topbar {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #0b3559;

    overflow: hidden;
}


/* ==========================================================
   INNER CONTENT
========================================================== */

.market-topbar-inner {
    width: 100%;
    max-width: 1600px;
    min-height: 44px;

    margin: 0 auto;

    display: flex;
    align-items: center;

    overflow: hidden;
}


/* ==========================================================
   MARKET LABEL
========================================================== */

.market-topbar-title {
    flex: 0 0 auto;

    height: 44px;
    padding: 0 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    background: #082b49;

    border-right: 1px solid rgba(255,255,255,0.12);

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;

    white-space: nowrap;
}


/* ==========================================================
   SCROLLING MARKET DATA
========================================================== */

.market-topbar-scroll {
    flex: 1 1 auto;

    min-width: 0;

    height: 44px;

    display: flex;
    align-items: center;

    overflow-x: auto;
    overflow-y: hidden;

    scrollbar-width: none;

    white-space: nowrap;
}


.market-topbar-scroll::-webkit-scrollbar {
    display: none;
}


/* ==========================================================
   EACH INDEX
========================================================== */

.market-index-item {
    flex: 0 0 auto;

    min-height: 44px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    border-right: 1px solid rgba(255,255,255,0.10);

    font-size: 12px;

    white-space: nowrap;
}


/* ==========================================================
   INDEX NAME
========================================================== */

.market-index-name {
    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    white-space: nowrap;
}


/* ==========================================================
   INDEX VALUE
========================================================== */

.market-index-value {
    color: #ffffff;

    font-size: 12px;
    font-weight: 800;

    white-space: nowrap;
}


/* ==========================================================
   CHANGE
========================================================== */

.market-index-change {
    display: inline-flex;
    align-items: center;

    gap: 4px;

    font-size: 11px;
    font-weight: 800;

    white-space: nowrap;
}


/* ==========================================================
   POSITIVE
========================================================== */

.market-positive .market-index-change {
    color: #4ade80;
}


/* ==========================================================
   NEGATIVE
========================================================== */

.market-negative .market-index-change {
    color: #fb7185;
}


/* ==========================================================
   NEUTRAL
========================================================== */

.market-neutral .market-index-change {
    color: #cbd5e1;
}


/* ==========================================================
   UPDATED
========================================================== */

.market-topbar-updated {
    flex: 0 0 auto;

    height: 44px;

    padding: 0 15px;

    display: flex;
    align-items: center;

    border-left: 1px solid rgba(255,255,255,0.10);

    color: #cbd5e1;

    font-size: 10px;

    white-space: nowrap;
}


/* ==========================================================
   LOADING / ERROR STATES

   IMPORTANT:
   These are intentionally centered.
========================================================== */

.market-topbar-loading-state,
.market-topbar-error-state {
    width: 100%;
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
}


/* ==========================================================
   STATUS MESSAGE
========================================================== */

.market-status-message {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color: #dbeafe;

    font-size: 12px;
    font-weight: 600;

    text-align: center;
}


/* ==========================================================
   ERROR TEXT
========================================================== */

.market-topbar-error-state
.market-status-message {
    color: #fecaca;
}


/* ==========================================================
   LOADING DOT
========================================================== */

.market-loading-dot {
    width: 8px;
    height: 8px;

    display: inline-block;

    border-radius: 50%;

    background: #60a5fa;

    animation: marketLoadingPulse 1.2s infinite ease-in-out;
}


@keyframes marketLoadingPulse {

    0% {
        opacity: 0.35;
        transform: scale(0.85);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.35;
        transform: scale(0.85);
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .market-topbar-updated {
        display: none;
    }

    .market-index-item {
        padding: 0 13px;
    }

    .market-topbar-title {
        padding: 0 13px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .market-topbar,
    .market-topbar-inner,
    .market-topbar-scroll {
        min-height: 39px;
        height: 39px;
    }


    .market-topbar-title {
        height: 39px;

        padding: 0 11px;

        font-size: 10px;
    }


    .market-index-item {
        min-height: 39px;

        padding: 0 10px;

        gap: 6px;
    }


    .market-index-name {
        font-size: 11px;
    }


    .market-index-value {
        font-size: 11px;
    }


    .market-index-change {
        font-size: 10px;
    }


    .market-topbar-loading-state,
    .market-topbar-error-state,
    .market-status-message {
        min-height: 39px;
    }


    .market-status-message {
        font-size: 11px;
    }

}