/* ======================================================
   GPIR v1.1.0
   Sprint 23.2
   Global Intelligence Command Centre
====================================================== */

/*=====================================================
MARKET INTELLIGENCE RIBBON
FINTECHOISIS
======================================================*/

#fx-ribbon,
#market-ribbon{

    position:relative;

    width:100%;

    padding:0;

    overflow:hidden;

    height:64px;

    display:flex;

    align-items:center;

    z-index:20;
}

#fx-ribbon{

    background:#071A2F;

    border-bottom:1px solid rgba(255,255,255,.08);
}

#market-ribbon{

    background:
        var(--gradient-rich-dark-radial),
        var(--gradient-rich-dark);

    border-top:1px solid rgba(255,255,255,.08);

    border-bottom:1px solid rgba(255,255,255,.08);

    height:88px;

}

/* ======================================================
   Intelligence Navigation
====================================================== */

.intelligence-tabs {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin: 18px 0 12px;

}

.intelligence-tabs span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 10px 18px;

    border-radius: 30px;

    background: rgba(255,255,255,0.06);

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

    color: #ffffff;

    font-size: 0.88rem;

    font-weight: 600;

    letter-spacing: .3px;

    cursor: pointer;

    transition: all .3s ease;

}

.intelligence-tabs span:hover {

    transform: translateY(-2px);

    background: rgba(255,215,0,0.15);

    border-color: #d4af37;

    color: #ffd54a;

    box-shadow: 0 8px 20px rgba(212,175,55,.18);

}

@media (max-width:768px){

    .intelligence-tabs{

        gap:10px;

    }

    .intelligence-tabs span{

        font-size:.80rem;

        padding:8px 14px;

    }

}

/* ==========================================================
   Intelligence Card Thumbnail
========================================================== */

.tile-image{

    width:100%;

    overflow:hidden;

    border-radius:14px;

    margin:18px 0 22px;

    background:#f8fafc;

}

.tile-image img{

    display:block;

    width:100%;

    height:210px;

    object-fit:cover;

    transition:.45s ease;

}

.intelligence-tile:hover .tile-image img{

    transform:scale(1.03);

}

/*=====================================================
LEFT TITLE
======================================================*/

.market-title{

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--color-primary);

    color:#071A2F;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    padding:0 28px;

    height:100%;

    white-space:nowrap;

    flex-shrink:0;

    font-family:var(--font-primary);
}

/*=====================================================
TICKER AREA
======================================================*/

.ticker-wrapper{

    flex:1;

    overflow:hidden;

    position:relative;

    height:100%;

    display:flex;

    align-items:center;

}

/* Scoped to #fx-ribbon specifically: .ticker-track is (unfortunately) also
   used by the Global Announcements ribbon (page.css), with a different
   intended animation. Without this ID scope the two rules collide at
   equal specificity and whichever file loads last silently wins for
   BOTH tickers -- which is exactly what happened before this fix (both
   ran market.css's tickerMove, including the announcements ticker,
   which was built for scrollTicker's non-duplicated-content sweep and
   visibly jump-cut every cycle as a result). Scoping by ID gives each
   ticker a higher-specificity, load-order-independent claim on its own
   animation. */
#fx-ribbon .ticker-track{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:0 18px;

    white-space:nowrap;

    animation:tickerMove 60s linear infinite;

}

/* Set by initializeTickerVisibilityPause() in script.js when the ribbon
   is scrolled off-screen or the tab is backgrounded — a class toggle
   (not an inline style) so it never overrides the :hover pause below. */
#fx-ribbon .ticker-track.gpir-ticker-paused{

    animation-play-state:paused;

}

#fx-ribbon .ticker-track:hover{

    animation-play-state:paused;

}

/*=====================================================
ANNOUNCEMENT CARDS
======================================================*/

.ticker-card{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 20px;

    border-radius:14px;

    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.10);

    text-decoration:none;

    white-space:nowrap;

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.ticker-card:hover{

    transform:translateY(-2px);

    background:rgba(184,134,59,.14);

    border-color:rgba(184,134,59,.4);
}

.ticker-flag{

    font-size:22px;

    line-height:1;

    flex-shrink:0;

    display:inline-flex;

    align-items:center;
}

.ticker-flag .flag-icon{

    width:22px;

    height:auto;

    border-radius:3px;
}

.icon-globe{

    width:18px;

    height:18px;

    color:var(--color-primary);

    vertical-align:middle;

}

.ticker-body{

    display:flex;

    flex-direction:column;

    gap:3px;
}

.ticker-meta{

    display:flex;

    align-items:center;

    gap:8px;
}

.ticker-country{

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    letter-spacing:.04em;
}

.ticker-tag{

    padding:2px 9px;

    border-radius:999px;

    background:rgba(184,134,59,.18);

    color:var(--color-primary);

    font-size:10px;

    font-weight:700;

    letter-spacing:.06em;

    text-transform:uppercase;
}

.ticker-headline{

    display:-webkit-box;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;

    color:rgba(255,255,255,.82);

    font-size:13px;

    font-weight:500;

    white-space:normal;

    width:280px;

    line-height:1.35;
}

/*=====================================================
ITEM
======================================================*/

.ticker-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:0 28px;

    font-size:15px;

    color:#ffffff;

    transition:color var(--transition-normal);

}

.ticker-item:hover{

    color:var(--color-primary);

}

.pair{

    color:#9CA3AF;

    font-weight:600;

}

.rate{

    color:#D4AF37;

    font-weight:700;

    font-size:15px;

}

.separator{

    color:rgba(255,255,255,.25);

    font-size:18px;

}

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

.market-time{

    display:flex;

    align-items:center;

    justify-content:center;

    color:#B8C5D6;

    font-size:12px;

    min-width:170px;

    padding:0 18px;

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

    font-variant-numeric:tabular-nums;

}

#market-ribbon .market-time{

    flex-direction:column;

    gap:1px;

    min-width:128px;

    max-width:128px;

    font-size:10px;

    padding:0 12px;

    text-align:center;

    line-height:1.3;
}

.ticker-last-refresh{

    color:rgba(255,255,255,.4);

    font-size:9px;
}

/* GLOBAL ANNOUNCEMENTS is longer text than LIVE FX RATES, and this
   row's title/refresh sections were eating enough width at the shared
   .market-title/.market-time sizing that the scrolling ticker itself
   -- the actual point of the row -- had visibly less room to be
   read. Scoped smaller here rather than shrinking .market-title
   globally, since the FX ribbon's proportions weren't a problem. */
#market-ribbon .market-title{

    font-size:11px;

    letter-spacing:.5px;

    padding:0 14px;
}

/*=====================================================
ANIMATION
======================================================*/

@keyframes tickerMove{

    0%{

        transform:translateX(0);

    }

    100%{

        transform:translateX(-50%);

    }

}

@media (prefers-reduced-motion: reduce){

    #fx-ribbon .ticker-track{

        animation:none;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
    }

}

/*=====================================================
RESPONSIVE
======================================================*/

@media(max-width:992px){

.market-title{

display:none;

}

.market-time{

display:none;

}

.ticker-item{

padding:0 18px;

font-size:14px;

}

#fx-ribbon,
#market-ribbon{

height:76px;

}

.ticker-card{

padding:8px 16px;

}

.ticker-headline{

width:220px;

font-size:12px;

}

}

@media(max-width:768px){

#fx-ribbon{

height:54px;

}

.ticker-item{

font-size:13px;

gap:8px;

}

.rate{

font-size:13px;

}

}