/* ============================================================
TAC9MA — FINAL UNIFIED HEIGHT + ALIGNMENT FIX
============================================================ */

:root {
--blue: #0C1F6B;
--gold: #FFD700;
--white: #FFFFFF;
--red: #C62828;
--bar-height: 50px;
--badge-width: 150px;
--badge-height: 28px;
}

/* ================= GLOBAL RESET ================= */
#ticker-wrapper,
#ticker-wrapper *,
.ticker-rows {
box-sizing: border-box;
margin: 0;
padding: 0;
}

#sticky-wrapper {
background: var(--blue);
padding: 0 !important;
margin: 0 !important;
}

/* Make BOTH containers stack the same way */
#ticker-wrapper,
.ticker-rows {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 !important;
margin: 0 !important;
}

/* ================= GOLD DIVIDER ================= */
.gold-divider {
height: 2px !important;
border: none !important;
background: var(--gold);
margin: 0 !important;
padding: 0 !important;
display: block !important;
}

/* ================= ROW ================= */
.ticker-bar {
display: flex;
align-items: center;
height: var(--bar-height);
min-height: var(--bar-height);
max-height: var(--bar-height);
width: 100%;
background: var(--blue);
color: var(--white);
font-family: Arial, Helvetica, sans-serif;
padding-left: 20px !important;
padding-right: 10px !important;
overflow: hidden;
}

/* Collapse only when hidden */
#breaking-bar[style*="display: none"],
#admin-bar[style*="display: none"] {
display: none !important;
}

/* ================= BADGES ================= */
.badge-breaking,
.admin-badge,
.live-indicator {
display: flex;
align-items: center;
justify-content: center;
width: var(--badge-width);
height: var(--badge-height);
margin-right: 20px !important;
font-weight: 900;
font-size: 13px;
letter-spacing: .5px;
border-radius: 4px;
flex-shrink: 0;
}

.badge-breaking {
background: var(--red);
color: #fff;
}

.admin-badge {
background: var(--gold);
color: #111;
}

.live-indicator {
background: var(--red);
color: #fff;
animation: blink 1s infinite;
}

@keyframes blink {
0%,100% { filter: brightness(1); }
50% { filter: brightness(0.6); }
}

/* ================= TEXT AREA ================= */
.ticker-inner {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
font-weight: 700;
font-size: 15px;
display: block;
padding-left: 0;
padding-right: 20px;
}

/* ================= SCROLLING WRAPPER ================= */
.scroll-wrapper {
display: inline-block;
white-space: nowrap;
}

/* ================= INDIVIDUAL ITEMS ================= */
.ticker-item {
display: inline-block;
white-space: nowrap;
padding-right: 60px;
margin-right: 10px;
}

/* ================= KEYFRAMES ================= */
@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300%);
  }
}

/* ================= ADMIN ================= */
#admin-text {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation: scroll-left 35s linear infinite;
color: var(--gold);
}

/* ================= LIVE SPEED (ROWS) ================= */
#live-row-1.scrolling {
animation: scroll-left 380s linear infinite;
}

#live-row-2.scrolling {
animation: scroll-left 485s linear infinite;
}

/* ================= PAUSE ON HOVER ================= */
.ticker-bar:hover #live-row-1,
.ticker-bar:hover #live-row-2 {
animation-play-state: paused !important;
}

/* Hide divider if preceding bar is hidden */
#breaking-bar[style*="display: none"] + .gold-divider,
#admin-bar[style*="display: none"] + .gold-divider {
display: none !important;
}

/* ================= TWO BLUE TICKERS ================= */
.ticker-1:hover .ticker-inner,
.ticker-2:hover .ticker-inner {
animation-play-state: paused !important;
}

/* ================= TWO LIVE TICKER LINKS ================= */
.ticker-link {
text-decoration: none;
color: inherit;
}

.ticker-link:hover {
text-decoration: none;
color: inherit;
}

.ticker-icon {
margin-right: 6px;
}

.ticker-item {
cursor: pointer;
}

/* ================= LIVE ROW CLIP FIX ================= */
.ticker-1 .ticker-inner,
.ticker-2 .ticker-inner {
overflow: hidden;
position: relative;
flex: 1;
}

/* Ensure animated content stays inline */
#live-row-1,
#live-row-2 {
display: inline-block;
white-space: nowrap;
width: max-content;
}

/* Keep LIVE badge above ticker text */
.live-indicator {
position: relative;
z-index: 5;
}

/* LIVE ticker spacing fix */
.ticker-1 .ticker-inner,
.ticker-2 .ticker-inner {
overflow: hidden;
flex: 1;
padding-left: 20px;
}

/* The scrolling content inside */
#live-row-1 .ticker-item,
#live-row-2 .ticker-item {
display: inline-block;
white-space: nowrap;
}