/*!
 * APS Market Ticker — visual styles
 *
 * Two distinct variants per the PRD §3.1 inspirations:
 *   .aps-ticker--local   → Editorial / The Maltese Herald (warm light, red rule)
 *   .aps-ticker--global  → Premium fintech / Curmi & Partners (clean white, navy)
 *
 * Plus a standalone share-price card.
 */

/* ----- Shared tokens ----- */
.aps-ticker {
    --aps-up:   #1e8449;
    --aps-down: #b03a2e;
    --aps-flat: #6b7a99;

    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    contain: content;
}


/* ----- Layout: flex row, no overlap ----- */
.aps-ticker__bar {
    display: flex;
    align-items: stretch;
    min-height: 44px; /* touch target */
}

.aps-ticker__label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 8px 14px;
    flex: 0 0 auto;
    max-width: 40%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    z-index: 2;
}

.aps-ticker__label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.aps-ticker__stale-indicator {
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.05em;
    padding: 2px 6px;
    border-radius: 2px;
    background: rgba(0, 0, 0, 0.08);
    text-transform: lowercase;
}

.aps-ticker__viewport {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    min-width: 0;
    /* Edge fade so items don't pop into existence */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.aps-ticker__track {
    display: flex;
    width: max-content;
    align-items: center;
    height: 100%;
    will-change: transform;
    /* animation applied exclusively by JS setupMarquee — no CSS-driven animation
       here avoids a speed mismatch between the CSS duration (raw seconds) and the
       JS px/s calculation during the REST-fetch window. */
}

.aps-ticker__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    align-items: center;
}

.aps-ticker__item {
    display: flex;
    align-items: baseline;
    gap: 0.6em;
    padding: 0 22px;
    white-space: nowrap;
    line-height: 1.4;
}

.aps-ticker__symbol {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.aps-ticker__name {
    font-size: 12px;
    opacity: 0.72;
}

.aps-ticker__price,
.aps-ticker__change,
.aps-ticker__pct {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.aps-ticker__price {
    font-weight: 600;
}

.aps-ticker__delta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    font-size: 13px;
    font-weight: 500;
}

.aps-ticker__pct {
    opacity: 0.85;
    font-size: 12px;
}

.aps-ticker__item--up    { --c: var(--aps-up); }
.aps-ticker__item--down  { --c: var(--aps-down); }
.aps-ticker__item--flat  { --c: var(--aps-flat); }

.aps-ticker__item--up   .aps-ticker__arrow,
.aps-ticker__item--up   .aps-ticker__change,
.aps-ticker__item--down .aps-ticker__arrow,
.aps-ticker__item--down .aps-ticker__change,
.aps-ticker__item--flat .aps-ticker__arrow,
.aps-ticker__item--flat .aps-ticker__change {
    color: var(--c);
}

.aps-ticker__unavailable {
    padding: 12px 22px;
    font-style: italic;
    opacity: 0.7;
    line-height: 1.4;
}

.aps-ticker__footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1.2em;
    padding: 6px 16px;
    font-size: 11px;
    line-height: 1.4;
    border-top: 1px solid currentColor;
    border-top-color: rgba(0, 0, 0, 0.08);
}

.aps-ticker__footer .aps-ticker__source { font-weight: 600; }
.aps-ticker__footer .aps-ticker__as-of  { margin-left: auto; opacity: 0.7; }

.aps-ticker__announcer {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Pause on hover. Works because JS sets individual animation-* properties (not
   the shorthand), so animation-play-state is never set inline and this rule wins. */
.aps-ticker:hover .aps-ticker__track {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .aps-ticker__viewport {
        overflow-x: auto;
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* ============================================================ */
/* LOCAL — Editorial / Maltese Herald                            */
/* Warm cream ground, deep red rule, slab-serif name, bold symbol*/
/* ============================================================ */
.aps-ticker--local {
    --aps-up:   #156b3d;
    --aps-down: #a4271b;
    --aps-flat: #4a4a4a;

    background: #faf6ee;
    color: #1a1a1a;
    border-top:    3px solid #b91c1c;
    border-bottom: 1px solid #e5e0d3;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}

.aps-ticker--local .aps-ticker__label {
    background: #1a1a1a;
    color: #fbeec6;
    position: relative;
}
.aps-ticker--local .aps-ticker__label::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #b91c1c;
}

.aps-ticker--local .aps-ticker__name {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    opacity: 0.78;
}

.aps-ticker--local .aps-ticker__item {
    border-right: 1px dotted #d6cfba;
}
.aps-ticker--local .aps-ticker__item:last-child { border-right: 0; }

.aps-ticker--local .aps-ticker__footer {
    background: #f3ecdb;
    color: #5d5238;
    border-top-color: #e5e0d3;
}

.aps-ticker--local .aps-ticker__unavailable {
    color: #5d5238;
}

/* ============================================================ */
/* GLOBAL — Premium fintech / Curmi & Partners                   */
/* Clean white, navy text, subtle dividers, ▲▼ triangles         */
/* ============================================================ */
.aps-ticker--global {
    --aps-up:   #047857;
    --aps-down: #be123c;
    --aps-flat: #475569;

    background: #ffffff;
    color: #0b2545;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
}

.aps-ticker--global .aps-ticker__label {
    background: #ffffff;
    color: #0b2545;
    border-right: 1px solid #e2e8f0;
    position: relative;
}

.aps-ticker--global .aps-ticker__label-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}
.aps-ticker--global .aps-ticker__label-text::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0b2545;
}

.aps-ticker--global .aps-ticker__name {
    opacity: 0.6;
}

.aps-ticker--global .aps-ticker__item {
    border-right: 1px solid #eef2f7;
}
.aps-ticker--global .aps-ticker__item:last-child { border-right: 0; }

.aps-ticker--global .aps-ticker__footer {
    background: #fafbfc;
    color: #475569;
    border-top-color: #e2e8f0;
}

.aps-ticker--global .aps-ticker__unavailable {
    color: #475569;
}

/* ----- Responsive ----- */
@media (max-width: 640px) {
    .aps-ticker__label {
        padding: 8px 10px;
        font-size: 10px;
    }
    .aps-ticker__item {
        padding: 0 14px;
        gap: 0.45em;
    }
    .aps-ticker__name {
        display: none; /* keep tickers compact on mobile */
    }
    .aps-ticker__footer {
        padding: 6px 10px;
        font-size: 10px;
    }
    .aps-ticker__footer .aps-ticker__as-of {
        margin-left: 0;
        flex-basis: 100%;
    }
}

@media (max-width: 380px) {
    .aps-ticker__label {
        max-width: 35%;
        font-size: 9px;
        padding: 8px 8px;
        letter-spacing: 0.05em;
    }
}

/* ============================================================ */
/* Standalone share-price widget                                  */
/* ============================================================ */
.aps-share-price {
    display: inline-block;
    padding: 18px 22px;
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid #e2e8f0;
    color: #0b2545;
    font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
    min-width: 220px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.aps-share-price--inline {
    padding: 4px 8px;
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: 0;
}

.aps-share-price--minimal {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    min-width: 0;
}

.aps-share-price__symbol {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.aps-share-price__name {
    font-size: 13px;
    color: #0b2545;
    margin-bottom: 8px;
    font-weight: 600;
}

.aps-share-price__price {
    font-size: 30px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    margin: 2px 0 4px;
    line-height: 1.1;
}

.aps-share-price__price--up    { color: #047857; }
.aps-share-price__price--down  { color: #be123c; }
.aps-share-price__price--flat  { color: #0b2545; }

/* Currency code shown next to the price, e.g. "0.5700 EUR" (mirrors the indices cards). */
.aps-share-price__ccy {
    font-size: 13px;
    font-weight: 500;
    color: #6b7a99;
    margin-left: 4px;
}

.aps-share-price__change {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

.aps-share-price__change::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.aps-share-price__change--up::before    { border-bottom: 6px solid #047857; }
.aps-share-price__change--down::before  { border-top:    6px solid #be123c; }
.aps-share-price__change--flat::before  { display: none; }

.aps-share-price__change--up    { color: #047857; }
.aps-share-price__change--down  { color: #be123c; }
.aps-share-price__change--flat  { color: #475569; }

.aps-share-price__as-of {
    font-size: 11px;
    color: #6b7a99;
    margin-top: 8px;
}

.aps-share-price__unavailable {
    font-style: italic;
    color: #6b7a99;
}

.aps-ticker__label {
    display: none!important
}

.aps-ticker__footer {
    background-color: #6bbb5c!important;
    color: #fff!important
}

.aps-ticker__track {
    background-color: #f7f9fc!important
}

.aps-ticker--local {
    border-top: 3px solid #6bbb5c!important
}