/**
 * Market Ticker Pro
 * Frontend CSS
 */


.market-ticker {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
    background:#fff;
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
}


.market-track {
    display:flex;
    align-items:center;
    width:max-content;
    animation:mtp-scroll var(--mtp-speed,35s) linear infinite;
}


.market-ticker:hover .market-track {
    animation-play-state:paused;
}


.market-item {
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 24px;
    font-size:14px;
}


.market-name {
    color:#111;
    font-weight:600;
}


.market-change {
    display:flex;
    align-items:center;
    gap:4px;
    font-weight:700;
}


.market-arrow {
    width:12px;
    height:12px;
    fill:currentColor;
}


.market-change.up {
    color:#16803c;
}


.market-change.down {
    color:#c62828;
}


/* Market Status */

.market-status {
    padding:3px 7px;
    border-radius:3px;
    font-size:11px;
    font-weight:600;
}


.market-status.open {
    color:#16803c;
    background:#e8f5e9;
}


.market-status.pre {
    color:#1769aa;
    background:#e3f2fd;
}


.market-status.after {
    color:#c76a00;
    background:#fff3e0;
}


.market-status.closed {
    color:#666;
    background:#eee;
}


/* Animation */

@keyframes mtp-scroll {

    from {
        transform:translateX(0);
    }

    to {
        transform:translateX(-50%);
    }

}


/* License Notice */

.mtp-license-notice {
    padding:12px;
    background:#fff3cd;
    border:1px solid #ffeeba;
    color:#856404;
}


/* Dark Mode */

body.dark-mode .market-ticker {
    background:#111;
    border-color:#333;
}


body.dark-mode .market-name {
    color:#eee;
}


body.dark-mode .market-status.closed {
    background:#333;
    color:#aaa;
}


/* Responsive */

@media(max-width:768px) {

    .market-item {
        padding:8px 14px;
        font-size:12px;
    }


    .market-arrow {
        width:10px;
        height:10px;
    }


    .market-status {
        font-size:10px;
    }


    .market-track {
        animation-duration:
            calc(var(--mtp-speed,35s) * 1.5);
    }

}


/* Inline layout: rotating single-market display, cross-faded via JS
   toggling the "is-active" class on a timer. Items are stacked with
   absolute positioning so the fade doesn't cause a layout jump as
   different markets' text widths differ. */

.market-ticker-inline {
    overflow:visible;
}


.market-inline-list {
    position:relative;
    height:26px;
    display:block;
}


.market-inline-item {
    position:absolute;
    top:0;
    left:0;
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity .5s ease;
}


.market-inline-item.is-active {
    opacity:1;
    visibility:visible;
}


.market-inline-name {
    color:#555;
    font-weight:500;
}


.market-inline-change {
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-weight:700;
}


.market-inline-change.up {
    color:#16803c;
}


.market-inline-change.down {
    color:#c62828;
}


.market-arrow-small {
    width:5px;
    height:9px;
}


.market-status-inline {
    font-size:10px;
    padding:2px 5px;
}


body.dark-mode .market-inline-name {
    color:#ccc;
}


@media(max-width:768px) {

    .market-inline-item {
        font-size:11px;
    }

}