/* ============================================================
   Moroccan Markets Ticker — widget stylesheet
   Matches the working test.html implementation exactly.
   ============================================================ */

.mmt-ticker-widget {
    direction: rtl;
    font-family: var(--body-family, inherit);
    border: 1px solid rgba(0, 0, 0, .10);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

/* ── Header ─────────────────────────────────────────────── */

.mmt-ticker-header {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1rem;
    background: #f7f7f7;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
}

.mmt-ticker-header-label {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0a0a0a;
}

.mmt-ticker-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
    animation: mmt-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes mmt-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .4;
        transform: scale(.75);
    }
}

/* ── Stage: clips the track ──────────────────────────────── */

.mmt-ticker-stage {
    overflow: hidden;
    width: 100%;
    background: #fff;
    padding: .55rem 0;
}

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

/* ── Track ───────────────────────────────────────────────── */
/*
   LTR infinite marquee.
   JS builds: [copy-A][copy-B]  (identical)
   Total width = 2 × singleWidth

   translateX(0)    → copy-A fully visible at start of stage
   translateX(50%)  → copy-A has moved right by singleWidth;
                      copy-B is exactly where copy-A started → seamless loop
*/

.mmt-ticker-track {
    display: flex;
    flex-direction: row;
    width: max-content;
    align-items: center;
    animation: mmt-ltr var(--mmt-speed, 32s) linear infinite;
    will-change: transform;
}

@keyframes mmt-ltr {
    from {
        transform: translateX(0);
    }

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

/* ── Chips ───────────────────────────────────────────────── */

.mmt-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .28rem 1rem;
    flex-shrink: 0;
    border-left: 1px solid rgba(0, 0, 0, .08);
}

.mmt-ticker-item:first-child {
    border-left: none;
}

.mmt-ticker-company {
    font-size: .82rem;
    font-weight: 700;
    color: #0a0a0a;
    white-space: nowrap;
}

.mmt-ticker-symbol {
    font-size: .70rem;
    font-weight: 500;
    color: #6b7280;
    white-space: nowrap;
}

.mmt-ticker-value {
    font-size: .86rem;
    font-weight: 600;
    color: #0a0a0a;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mmt-ticker-change {
    font-size: .74rem;
    font-weight: 700;
    white-space: nowrap;
    padding: .15em .45em;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

.mmt-ticker-volume {
    font-size: .72rem;
    color: #6b7280;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.mmt-ticker-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .08);
    flex-shrink: 0;
}