/*
 * Breaking News TV – Ticker Styles
 * 4 professional broadcast themes: Classic · BBC · CNN · Al Jazeera
 * RTL/LTR native · Responsive · Pure CSS animations
 */

/* ═══════════════════════════════════════════════════════════════
   CSS CUSTOM PROPERTIES (runtime overrides via inline style)
═══════════════════════════════════════════════════════════════ */
:root {
  --bntv-height:  48px;
  --bntv-label-w: 180px;
  --bntv-z:       99990;
  --bntv-font:    system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --bntv-font-ar: 'Segoe UI', 'Cairo', 'Tajawal', Arial, sans-serif;
}

/* ═══════════════════════════════════════════════════════════════
   BASE TICKER STRUCTURE (all themes inherit)
═══════════════════════════════════════════════════════════════ */
.bntv-ticker {
  position:    relative;
  width:       100%;
  height:      var(--bntv-height);
  display:     flex;
  align-items: stretch;
  overflow:    hidden;
  z-index:     var(--bntv-z);
  will-change: transform;
  font-family: var(--bntv-font);
  font-size:   0.88rem;
  line-height: 1;
}

/* ── Positions ── */
.bntv-ticker--top {
  position: fixed;
  top: 0; left: 0; right: 0;
}
.bntv-ticker--bottom {
  position: fixed;
  bottom: 0; left: 0; right: 0;
}
.bntv-ticker--floating {
  position: relative;
  width: 100%;
  margin: 0;
}

/* admin bar offset */
.admin-bar .bntv-ticker--top    { top: 32px; }
.admin-bar .bntv-ticker--bottom { bottom: 0; }
@media screen and (max-width: 782px) {
  .admin-bar .bntv-ticker--top { top: 46px; }
}

/* body padding so content isn't hidden */
body.bntv-has-top-ticker    { padding-top:    var(--bntv-height) !important; }
body.bntv-has-bottom-ticker { padding-bottom: var(--bntv-height) !important; }

/* ── Label block ── */
.bntv-ticker__label {
  display:     flex;
  align-items: center;
  gap:         7px;
  min-width:   var(--bntv-label-w);
  padding:     0 18px;
  font-weight: 800;
  font-size:   0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  position:    relative;
  z-index:     2;
}
.bntv-rtl .bntv-ticker__label {
  font-family:    var(--bntv-font-ar);
  letter-spacing: 0;
  font-size:      0.83rem;
}

/* Arrow cutout */
.bntv-ticker__label::after {
  content:  '';
  position: absolute;
  inset-block: 0;
  width:    20px;
  background: inherit;
}
.bntv-ltr .bntv-ticker__label::after { right: -20px; clip-path: polygon(0 0, 0 100%, 100% 100%, 68% 0); }
.bntv-rtl .bntv-ticker__label::after { left:  -20px; clip-path: polygon(100% 0, 100% 100%, 0 100%, 32% 0); }

/* Live dot */
.bntv-ticker__label-dot {
  display:       inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background:    currentColor;
  animation:     bntv-dot 1.4s ease-in-out infinite;
  flex-shrink:   0;
}
@keyframes bntv-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(.65); }
}

/* ── Viewport & Track ── */
.bntv-ticker__viewport {
  flex:     1;
  overflow: hidden;
  display:  flex;
  align-items: center;
  position: relative;
}
.bntv-ticker__track {
  display:     flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
}

/* ── Items ── */
.bntv-ticker__item {
  display:     inline-flex;
  align-items: center;
  gap:         10px;
  padding:     0 30px 0 18px;
  text-decoration: none;
  font-size:   0.86rem;
  font-weight: 500;
  white-space: nowrap;
  transition:  opacity .2s;
  position:    relative;
}
.bntv-ticker__item + .bntv-ticker__item::before {
  content:  '◆';
  position: absolute;
  font-size: .45rem;
  opacity:   .35;
  top: 50%; transform: translateY(-50%);
}
.bntv-ltr .bntv-ticker__item + .bntv-ticker__item::before { left: 2px; }
.bntv-rtl .bntv-ticker__item + .bntv-ticker__item::before { right: 2px; }

.bntv-ticker__item:hover { opacity: .75; }
.bntv-ticker__title { font-weight: 600; }
.bntv-ticker__time  { font-size: .73rem; opacity: .65; }
.bntv-ticker__cat   { font-size: .7rem;  opacity: .55; font-style: italic; }

/* ── Controls ── */
.bntv-ticker__controls {
  display:     flex;
  align-items: center;
  padding:     0 10px;
  flex-shrink: 0;
  gap:         4px;
}
.bntv-ticker__btn {
  background: none;
  border:     1px solid rgba(255,255,255,.25);
  color:      #fff;
  width: 28px; height: 28px;
  border-radius: 4px;
  cursor:     pointer;
  display:    flex; align-items: center; justify-content: center;
  padding:    0;
  font-size:  13px;
  transition: background .2s, border-color .2s;
}
.bntv-ticker__btn:hover {
  background:   rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.5);
}

/* pause on hover */
.bntv-ticker--pause-hover:hover .bntv-ticker__track {
  animation-play-state: paused;
}

/* ═══════════════════════════════════════════════════════════════
   THEME 1 — CLASSIC NAVY  (dark navy · red accent)
═══════════════════════════════════════════════════════════════ */
.bntv-theme-classic {
  background:  #1a1a2e;
  color:       #fff;
  box-shadow:  0 3px 16px rgba(0,0,0,.4);
}
.bntv-theme-classic .bntv-ticker__label  { background: #e63946; color: #fff; }
.bntv-theme-classic .bntv-ticker__item   { color: #e8e8f0; }
.bntv-theme-classic .bntv-ticker__item:hover { color: #fff; }
.bntv-theme-classic .bntv-ticker__item + .bntv-ticker__item::before { color: rgba(255,255,255,.3); }

/* ── Style modifiers on classic ── */
.bntv-theme-classic.bntv-ticker--gradient {
  background: linear-gradient(90deg, #1a1a2e 0%, #16213e 55%, #0f3460 100%);
}
.bntv-theme-classic.bntv-ticker--glass {
  background:           rgba(20,20,46,.88);
  backdrop-filter:      blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* ═══════════════════════════════════════════════════════════════
   THEME 2 — NEWSROOM RED  (charcoal · white · red stripe)
═══════════════════════════════════════════════════════════════ */
.bntv-theme-bbc {
  background:   #2b2b2b;
  color:        #fff;
  border-top:   4px solid #bb1919;
  box-shadow:   0 2px 0 0 #bb1919, 0 4px 20px rgba(0,0,0,.5);
  font-family:  Georgia, 'Times New Roman', serif;
  height:       52px;
}
.bntv-theme-bbc .bntv-ticker__label {
  background:  #bb1919;
  color:       #fff;
  font-family: Arial, sans-serif;
  font-size:   0.72rem;
  letter-spacing: .1em;
  min-width:   160px;
}
.bntv-theme-bbc .bntv-ticker__title { font-style: italic; font-weight: 700; letter-spacing: .01em; }
.bntv-theme-bbc .bntv-ticker__item  { color: #f0f0f0; font-size: .87rem; }
.bntv-theme-bbc .bntv-ticker__item:hover { color: #fff; }
.bntv-theme-bbc .bntv-ticker__item + .bntv-ticker__item::before { content: '|'; color: rgba(255,255,255,.3); }
.bntv-theme-bbc .bntv-ticker__time { font-family: Arial, sans-serif; font-style: normal; font-size: .7rem; }
.bntv-theme-bbc .bntv-ticker__label::after { background: #bb1919; }

/* ═══════════════════════════════════════════════════════════════
   THEME 3 — BROADCAST DARK  (black · red · bold American TV)
═══════════════════════════════════════════════════════════════ */
.bntv-theme-cnn {
  background:  #0a0a0a;
  color:       #fff;
  box-shadow:  0 0 0 1px #c00, 0 4px 24px rgba(200,0,0,.25);
  border-top:  3px solid #c00;
  height:      50px;
}
.bntv-theme-cnn .bntv-ticker__label {
  background:      linear-gradient(135deg, #c00 0%, #990000 100%);
  color:           #fff;
  font-size:       0.73rem;
  letter-spacing:  .08em;
  font-weight:     900;
  min-width:       165px;
  text-shadow:     0 1px 2px rgba(0,0,0,.4);
}
.bntv-theme-cnn .bntv-ticker__label::after { background: #c00; }
.bntv-theme-cnn .bntv-ticker__title {
  font-weight: 700;
  font-size:   .9rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.bntv-theme-cnn .bntv-ticker__item  { color: #f5f5f5; }
.bntv-theme-cnn .bntv-ticker__item:hover { color: #ffdddd; }
.bntv-theme-cnn .bntv-ticker__item + .bntv-ticker__item::before { content: '//'; color: #c00; font-size: .7rem; opacity: .8; }
.bntv-theme-cnn .bntv-ticker__time  { color: #aaa; }
.bntv-theme-cnn .bntv-ticker__viewport::before,
.bntv-theme-cnn .bntv-ticker__viewport::after {
  content:  '';
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(200,0,0,.4);
  z-index: 1;
}
.bntv-ltr .bntv-theme-cnn .bntv-ticker__viewport::before { left: 0; }
.bntv-ltr .bntv-theme-cnn .bntv-ticker__viewport::after  { display: none; }

/* ═══════════════════════════════════════════════════════════════
   THEME 4 — ARABIC GOLD  (dark teal · gold · Arabic-first)
═══════════════════════════════════════════════════════════════ */
.bntv-theme-aljazeera {
  background:   #0d1b2a;
  color:        #f0e9d2;
  border-top:   3px solid #c8a84b;
  box-shadow:   0 3px 20px rgba(0,0,0,.6);
  height:       50px;
}
.bntv-theme-aljazeera .bntv-ticker__label {
  background:      #c8a84b;
  color:           #0d1b2a;
  font-family:     var(--bntv-font-ar);
  font-size:       0.85rem;
  font-weight:     900;
  letter-spacing:  0;
  min-width:       170px;
  text-shadow:     none;
}
.bntv-theme-aljazeera .bntv-ticker__label::after { background: #c8a84b; }
.bntv-theme-aljazeera .bntv-ticker__label-dot { background: #0d1b2a; }
.bntv-theme-aljazeera .bntv-ticker__title {
  font-family:     var(--bntv-font-ar);
  font-weight:     600;
  color:           #f0e9d2;
  letter-spacing:  0;
  font-size:       .9rem;
}
.bntv-theme-aljazeera .bntv-ticker__item  { color: #d9cfb8; }
.bntv-theme-aljazeera .bntv-ticker__item:hover { color: #f0e9d2; }
.bntv-theme-aljazeera .bntv-ticker__item + .bntv-ticker__item::before { content: '●'; color: #c8a84b; font-size: .4rem; opacity: .9; }
.bntv-theme-aljazeera .bntv-ticker__time { color: #c8a84b; font-size: .72rem; }

/* watermark line at bottom */
.bntv-theme-aljazeera::after {
  content:    '';
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, transparent, #c8a84b 30%, #c8a84b 70%, transparent);
  opacity:    .4;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  :root { --bntv-label-w: 120px; }
  .bntv-ticker { font-size: .82rem; }
  .bntv-ticker__time,
  .bntv-ticker__cat { display: none; }
  .bntv-ticker__controls { display: none; }
}