/**
 * Market Ticker — front-end styles.
 *
 * Renders a thin, full-width bar of stock prices in RTL. Uses the colour
 * palette from the Module 1 spec:
 *   - Down: #D62027  (slightly muted vs. the site CTA red #F60D1D)
 *   - Up:   #1A9D4D
 *   - Neutral: #6C757D
 *
 * Mobile defaults to 3 visible slots, desktop shows 5. The CSS variables
 * make it easy to override the palette from a child theme if the brand
 * needs adjustment.
 *
 * @since 1.4.0
 */

:root {
    --tikshoret-market-bg:        #F8F9FA;
    --tikshoret-market-fg:        #040A12;
    --tikshoret-market-border:    rgba(0,0,0,0.05);
    --tikshoret-market-up:        #1A9D4D;
    --tikshoret-market-down:      #D62027;
    --tikshoret-market-neutral:   #6C757D;
    --tikshoret-market-muted:     #6C757D;
}

body.dark-mode {
    --tikshoret-market-bg:        #1A1A1A;
    --tikshoret-market-fg:        #F8F9FA;
    --tikshoret-market-border:    rgba(255,255,255,0.05);
    --tikshoret-market-muted:     #9CA3AF;
}

.tikshoret-market-ticker {
    direction: rtl;
    width: 100%;
    background: var(--tikshoret-market-bg);
    color: var(--tikshoret-market-fg);
    border-top: 1px solid var(--tikshoret-market-border);
    border-bottom: 1px solid var(--tikshoret-market-border);
    font-family: "Open Sans", "Arial", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    /* Sit at a comfortable 36px on desktop, smaller on mobile (see media). */
    min-height: 36px;
    overflow: hidden;
}

.tikshoret-market-ticker__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    height: 100%;
    padding: 6px 12px;
    box-sizing: border-box;
    gap: 24px;
}

.tikshoret-market-ticker__slot {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    white-space: nowrap;
    /* Slots fade in/out on rotation. */
    opacity: 1;
    transition: opacity 250ms ease-in-out;
}

.tikshoret-market-ticker__slot--fading {
    opacity: 0;
}

.tikshoret-market-ticker__name {
    font-weight: 600;
}

.tikshoret-market-ticker__symbol {
    font-size: 12px;
    color: var(--tikshoret-market-muted);
    direction: ltr;
    unicode-bidi: isolate;
}

.tikshoret-market-ticker__price {
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}

.tikshoret-market-ticker__change {
    font-weight: 700;
    direction: ltr;
    unicode-bidi: isolate;
}

.tikshoret-market-ticker__change--up    { color: var(--tikshoret-market-up); }
.tikshoret-market-ticker__change--down  { color: var(--tikshoret-market-down); }
.tikshoret-market-ticker__change--flat  { color: var(--tikshoret-market-neutral); }

.tikshoret-market-ticker__arrow {
    font-size: 11px;
    line-height: 1;
}

.tikshoret-market-ticker__placeholder {
    color: var(--tikshoret-market-muted);
    font-size: 12px;
}

/* ---------------------------------------------------------------------
 *  Mobile <992px — tighter padding, smaller fonts, 3 visible slots.
 *  The JS already loads all 5; CSS just hides the extras on small screens
 *  through nth-child rules, and the rotation logic still cycles through
 *  the full set.
 * --------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .tikshoret-market-ticker {
        font-size: 12px;
        min-height: 30px;
    }
    .tikshoret-market-ticker__inner {
        padding: 4px 8px;
        gap: 14px;
    }
    .tikshoret-market-ticker__symbol {
        display: none; /* Save horizontal room — name is enough on mobile. */
    }
    .tikshoret-market-ticker__slot:nth-child(n+4) {
        display: none;
    }
}

/* When loading, all slots are placeholders — we want them visually subdued
 * so the user doesn't see "..." flashing prominently. */
.tikshoret-market-ticker__slot:not(.tikshoret-market-ticker__slot--loaded) {
    opacity: 0.4;
}