/**
 * NewsPortal Pro — Breaking News Ticker Styles
 * 7 Premium Templates — each visually distinct + fully responsive
 */

/* ============================================================
   SHARED BASE
   ============================================================ */
.np-breaking-news {
  --bn-height: 44px;
  position: relative;
  z-index: 100;
  font-family: var(--np-font-body);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: var(--np-bn-bg, var(--np-primary));
  color: var(--np-bn-color, #fff);
  /* Admin-controlled extra padding */
  padding-top:    var(--np-bn-pad-top, 0px);
  padding-bottom: var(--np-bn-pad-bot, 0px);
}
.np-bn__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: np-live-dot-pulse 1.4s ease-in-out infinite;
}
.np-bn__label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(0,0,0,0.22);
  flex-shrink: 0;
  height: var(--bn-height);
}

/* ── Premium SVG icon buttons (shared) ─────────────────────── */
.np-bn__pause, .np-bn__close,
.np-bn__neon-pause, .np-bn__broadcast-pause,
.np-bn__ribbon-pause, .np-bn__holo-pause,
.np-bn__cards-pause, .np-bn__pause-flip,
.np-bn__ribbon-prev, .np-bn__ribbon-next,
.np-bn__prev, .np-bn__next {
  background: none;
  border: none;
  color: currentColor;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  height: var(--bn-height);
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.15s;
  flex-shrink: 0;
}
.np-bn__pause:hover, .np-bn__close:hover,
.np-bn__neon-pause:hover, .np-bn__broadcast-pause:hover,
.np-bn__ribbon-pause:hover, .np-bn__holo-pause:hover,
.np-bn__cards-pause:hover, .np-bn__pause-flip:hover,
.np-bn__ribbon-prev:hover, .np-bn__ribbon-next:hover,
.np-bn__prev:hover, .np-bn__next:hover {
  opacity: 1;
  transform: scale(1.1);
}
.np-bn__controls {
  display: flex;
  align-items: stretch;
  margin-left: auto;
  background: rgba(0,0,0,0.15);
  flex-shrink: 0;
}

@keyframes np-live-dot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* ============================================================
   TICKER-1: CLASSIC SCROLL — Red gradient, left-to-right crawl
   ============================================================ */
.np-bn--ticker-1 {
  background: linear-gradient(90deg, var(--np-bn-bg, #e63946) 0%, color-mix(in srgb, var(--np-bn-bg, #e63946) 85%, #000) 100%) !important;
}
.np-bn--ticker-1 .np-bn__label {
  background: rgba(0,0,0,0.28);
  border-right: 2px solid rgba(255,255,255,0.2);
  letter-spacing: 2px;
}
.np-bn--ticker-1 .np-bn__scroll-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: var(--bn-height);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.np-bn--ticker-1 .np-bn__scroll-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: np-ticker-scroll var(--np-bn-speed, 40s) linear infinite;
  will-change: transform;
  height: 100%;
}
.np-bn--ticker-1 .np-bn__scroll-track:hover { animation-play-state: paused; }
.np-bn--ticker-1 .np-bn__item {
  color: currentColor;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 0 10px;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.np-bn--ticker-1 .np-bn__item:hover { opacity: 0.8; text-decoration: underline; }
.np-bn--ticker-1 .np-bn__separator { opacity: 0.5; font-size: 9px; }
.np-bn--ticker-1 .np-bn__controls { background: rgba(0,0,0,0.22); }

@keyframes np-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   TICKER-2: SLIDE STACK — Dark navy, 3D flip-clock, editorial
   ============================================================ */
.np-bn--ticker-2 {
  height: 56px;
  --bn-height: 56px;
  background: #1d3557 !important;
  color: #fff !important;
  border-bottom: 2px solid rgba(255,255,255,0.08);
}
.np-bn--ticker-2 .np-bn__label--flip {
  font-size: 11px;
  letter-spacing: 2px;
  padding: 0 18px;
  height: 100%;
  background: var(--np-primary);
  border-right: none;
  gap: 8px;
}
.np-bn--ticker-2 .np-bn__flip-container {
  flex: 1;
  height: 100%;
  overflow: hidden;
  position: relative;
  perspective: 600px;
}
.np-bn--ticker-2 .np-bn__flip-track { position: relative; height: 100%; }
.np-bn--ticker-2 .np-bn__flip-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 24px;
  opacity: 0;
  transform: rotateX(90deg) translateZ(-20px);
  transition: transform 0.55s cubic-bezier(0.4,0,0.2,1), opacity 0.45s;
  backface-visibility: hidden;
}
.np-bn--ticker-2 .np-bn__flip-item.active { opacity: 1; transform: rotateX(0deg) translateZ(0); }
.np-bn--ticker-2 .np-bn__flip-item.exit   { opacity: 0; transform: rotateX(-90deg) translateZ(-20px); }
.np-bn--ticker-2 .np-bn__flip-item a {
  color: #fff; text-decoration: none;
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 500;
  min-width: 0;
}
.np-bn--ticker-2 .np-bn__cat {
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2);
  padding: 2px 9px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
}
.np-bn--ticker-2 .np-bn__text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-bn--ticker-2 .np-bn__arrow { opacity: 0.55; flex-shrink: 0; }
.np-bn--ticker-2 .np-bn__nav {
  display: flex; align-items: center;
  background: rgba(0,0,0,0.25); padding: 0 6px; gap: 2px; flex-shrink: 0;
}
.np-bn--ticker-2 .np-bn__prev,
.np-bn--ticker-2 .np-bn__next,
.np-bn--ticker-2 .np-bn__pause-flip { height: 100%; padding: 0 8px; }
.np-bn--ticker-2 .np-bn__counter {
  font-size: 11px; opacity: 0.55; white-space: nowrap;
  font-variant-numeric: tabular-nums; min-width: 34px; text-align: center;
}

/* ============================================================
   TICKER-3: NEON WIRE — Black glass, pink/cyan neon glows
   ============================================================ */
.np-bn--neon {
  background: rgba(8,4,18,0.97) !important;
  border-top: 1px solid rgba(255,0,128,0.5);
  border-bottom: 1px solid rgba(0,245,255,0.25);
  color: #fff !important;
  position: relative;
}
.np-bn--neon .np-bn__inner {
  display: flex; align-items: center;
  width: 100%; height: var(--bn-height);
  position: relative; z-index: 1;
}
.np-bn--neon .np-bn__label--neon {
  display: flex; align-items: center; gap: 8px;
  padding: 0 18px; height: 100%;
  background: rgba(255,0,128,0.12);
  border-right: 1px solid rgba(255,0,128,0.35);
  color: #ff0080;
  text-shadow: 0 0 12px #ff0080, 0 0 24px rgba(255,0,128,0.5);
  font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  flex-shrink: 0; white-space: nowrap;
}
.np-bn--neon .np-bn__neon-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff0080; box-shadow: 0 0 8px #ff0080, 0 0 16px rgba(255,0,128,0.6);
  animation: np-neon-dot-pulse 1.1s ease-in-out infinite; flex-shrink: 0;
}
.np-bn--neon .np-bn__neon-track-wrap {
  flex: 1; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}
.np-bn--neon .np-bn__neon-track {
  display: flex; align-items: center; height: var(--bn-height);
  white-space: nowrap;
  animation: np-ticker-scroll var(--np-bn-speed, 38s) linear infinite;
  will-change: transform;
}
.np-bn--neon .np-bn__neon-item {
  color: rgba(220,220,255,0.88); text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; gap: 12px; padding: 0 8px;
  transition: color 0.2s, text-shadow 0.2s;
}
.np-bn--neon .np-bn__neon-item:hover { color: #00f5ff; text-shadow: 0 0 12px rgba(0,245,255,0.7); }
.np-bn--neon .np-bn__neon-sep { flex-shrink: 0; }
.np-bn--neon .np-bn__neon-controls {
  display: flex; align-items: center; padding-right: 4px; flex-shrink: 0;
}
.np-bn--neon .np-bn__neon-time {
  padding: 0 14px; font-size: 11px; opacity: 0.45;
  font-variant-numeric: tabular-nums; letter-spacing: 0.5px;
  border-left: 1px solid rgba(255,0,128,0.2);
  height: var(--bn-height); display: flex; align-items: center;
}
.np-bn__neon-border {
  position: absolute; inset: 0; pointer-events: none;
  animation: np-neon-border-anim 3s ease-in-out infinite;
}
.np-bn__neon-scanlines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.012) 2px, rgba(255,255,255,0.012) 3px);
}
@keyframes np-neon-dot-pulse { 0%,100%{opacity:1;box-shadow:0 0 8px #ff0080,0 0 16px rgba(255,0,128,.6)} 50%{opacity:.4;box-shadow:0 0 3px #ff0080} }
@keyframes np-neon-border-anim { 0%,100%{box-shadow:inset 0 0 8px rgba(0,245,255,.08)} 50%{box-shadow:inset 0 0 8px rgba(255,0,128,.08)} }

/* ============================================================
   TICKER-4: BROADCAST CRAWL — CNN/BBC TV lower third style
   ============================================================ */
.np-bn--broadcast {
  height: 54px; --bn-height: 54px;
  background: #0b0c1a !important; color: #fff !important;
  border-top: 3px solid #c8102e;
}
.np-bn--broadcast .np-bn__broadcast-channel {
  display: flex; align-items: center; gap: 9px; padding: 0 16px;
  background: #c8102e; font-weight: 700; font-size: 11px; letter-spacing: 0.8px;
  white-space: nowrap; flex-shrink: 0;
}
.np-bn--broadcast .np-bn__broadcast-logo {
  width: 30px; height: 30px; background: #fff; color: #c8102e;
  border-radius: 4px; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 11px; letter-spacing: -0.5px; flex-shrink: 0;
}
.np-bn--broadcast .np-bn__broadcast-name { color: rgba(255,255,255,0.9); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.np-bn--broadcast .np-bn__broadcast-alert {
  background: var(--np-primary, #e63946); padding: 0 16px;
  font-size: 9px; font-weight: 900; letter-spacing: 2.5px; text-transform: uppercase;
  display: flex; align-items: center; flex-shrink: 0;
  animation: np-broadcast-blink 2.2s ease-in-out infinite; white-space: nowrap;
}
.np-bn--broadcast .np-bn__broadcast-content {
  flex: 1; overflow: hidden; position: relative;
  background: rgba(255,255,255,0.04);
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.np-bn--broadcast .np-bn__broadcast-track {
  display: flex; align-items: center; white-space: nowrap; height: 100%;
  animation: np-ticker-scroll var(--np-bn-speed, 40s) linear infinite;
}
.np-bn--broadcast .np-bn__broadcast-item {
  color: #f0f0f0; text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; gap: 12px; padding: 0 24px;
}
.np-bn--broadcast .np-bn__broadcast-item:hover { color: #fff; }
.np-bn--broadcast .np-bn__broadcast-cat {
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  background: var(--np-accent, #457b9d); color: #fff; padding: 2px 7px; border-radius: 2px; white-space: nowrap;
}
.np-bn--broadcast .np-bn__broadcast-divider { flex-shrink: 0; }
.np-bn--broadcast .np-bn__broadcast-right {
  display: flex; align-items: center;
  background: rgba(0,0,0,0.35); border-left: 1px solid rgba(255,255,255,0.07); flex-shrink: 0;
}
.np-bn--broadcast .np-bn__broadcast-pause { height: var(--bn-height); }
.np-bn--broadcast .np-bn__broadcast-clock {
  padding: 0 16px; font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700;
  letter-spacing: 0.5px; display: flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,0.75); white-space: nowrap;
}
@keyframes np-broadcast-blink { 0%,100%{opacity:1} 50%{opacity:0.65} }

/* ============================================================
   TICKER-5: 3D RIBBON — Deep indigo, 3D rotating panels
   ============================================================ */
.np-bn--ribbon3d {
  height: 62px; --bn-height: 62px;
  background: #0d0d2b !important; color: #fff !important;
  border-top: 2px solid rgba(100,80,255,0.6);
  border-bottom: 1px solid rgba(100,80,255,0.25);
}
.np-bn--ribbon3d .np-bn__label--ribbon {
  display: flex; align-items: center; gap: 9px; padding: 0 20px;
  background: linear-gradient(135deg, #6440e0, #9d4edd);
  font-weight: 900; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  flex-shrink: 0; box-shadow: 4px 0 16px rgba(100,60,230,0.4); white-space: nowrap;
}
.np-bn--ribbon3d .np-bn__ribbon-viewport {
  flex: 1; overflow: hidden; perspective: 800px; position: relative;
}
.np-bn--ribbon3d .np-bn__ribbon-stage {
  position: absolute; inset: 0; perspective: 600px;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d;
}
.np-bn--ribbon3d .np-bn__ribbon3d {
  transform-style: preserve-3d; position: relative; width: 100%;
  transition: transform 0.85s cubic-bezier(0.34,1.56,0.64,1);
}
.np-bn--ribbon3d .np-bn__ribbon-face {
  position: absolute; width: 100%; top: 0; left: 0;
  backface-visibility: hidden; display: flex; align-items: center;
  padding: 0 24px; height: 62px;
}
.np-bn--ribbon3d .np-bn__ribbon-face a {
  color: rgba(220,210,255,0.92); text-decoration: none;
  font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.np-bn--ribbon3d .np-bn__ribbon-cat {
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  background: rgba(160,120,255,0.25); border: 1px solid rgba(160,120,255,0.4);
  color: #c8a6ff; padding: 2px 8px; border-radius: 3px; white-space: nowrap; flex-shrink: 0;
}
.np-bn--ribbon3d .np-bn__ribbon-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-bn--ribbon3d .np-bn__ribbon-controls {
  display: flex; align-items: center; padding: 0 8px; gap: 2px;
  background: rgba(0,0,0,0.3); flex-shrink: 0;
}
.np-bn--ribbon3d .np-bn__ribbon-prev,
.np-bn--ribbon3d .np-bn__ribbon-next,
.np-bn--ribbon3d .np-bn__ribbon-pause {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; width: 30px; height: 30px; padding: 0;
  color: rgba(200,180,255,0.9);
}
.np-bn--ribbon3d .np-bn__ribbon-prev:hover,
.np-bn--ribbon3d .np-bn__ribbon-next:hover,
.np-bn--ribbon3d .np-bn__ribbon-pause:hover { background: rgba(255,255,255,0.16); border-color: rgba(160,120,255,0.5); }

/* ============================================================
   TICKER-6: HOLOGRAM STRIP — Pitch black, cyan holographic
   ============================================================ */
.np-bn--hologram {
  background: rgba(3,4,16,0.99) !important; color: #00f5ff !important;
  border-top: 1px solid rgba(0,245,255,0.35); border-bottom: 1px solid rgba(0,245,255,0.15);
  position: relative;
}
.np-bn--hologram .np-bn__holo-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.np-bn--hologram .np-bn__holo-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,245,255,0.025) 2px, rgba(0,245,255,0.025) 3px);
}
.np-bn--hologram .np-bn__holo-glow {
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: linear-gradient(90deg, transparent 10%, rgba(0,245,255,0.04) 50%, transparent 90%);
  animation: np-holo-scan 3.5s linear infinite;
}
.np-bn--hologram .np-bn__holo-inner {
  display: flex; align-items: center; height: var(--bn-height);
  width: 100%; position: relative; z-index: 1;
}
.np-bn--hologram .np-bn__holo-label {
  display: flex; align-items: center; gap: 9px; padding: 0 18px;
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase;
  color: #00f5ff; text-shadow: 0 0 12px #00f5ff, 0 0 24px rgba(0,245,255,0.4);
  background: rgba(0,245,255,0.05); border-right: 1px solid rgba(0,245,255,0.2);
  height: 100%; flex-shrink: 0; white-space: nowrap;
}
.np-bn--hologram .np-bn__holo-track-wrap {
  flex: 1; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}
.np-bn--hologram .np-bn__holo-track {
  display: flex; align-items: center; white-space: nowrap; height: var(--bn-height);
  animation: np-ticker-scroll var(--np-bn-speed, 45s) linear infinite; will-change: transform;
}
.np-bn--hologram .np-bn__holo-item {
  color: rgba(160,240,255,0.9); text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; gap: 10px; padding: 0 8px;
  transition: color 0.2s, text-shadow 0.2s; letter-spacing: 0.3px;
}
.np-bn--hologram .np-bn__holo-item:hover { color: #fff; text-shadow: 0 0 8px rgba(0,245,255,0.6); }
.np-bn--hologram .np-bn__holo-glitch { position: relative; }
.np-bn--hologram .np-bn__holo-glitch::before {
  content: attr(data-text); position: absolute; top: 0; left: 2px;
  color: rgba(255,0,128,0.38);
  clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
  animation: np-glitch-anim 5s steps(1) infinite 2.5s;
}
.np-bn--hologram .np-bn__holo-sep { opacity: 0.18; letter-spacing: -2px; }
.np-bn--hologram .np-bn__holo-right {
  display: flex; align-items: center;
  background: rgba(0,245,255,0.04); border-left: 1px solid rgba(0,245,255,0.15); flex-shrink: 0;
}
.np-bn--hologram .np-bn__holo-pause { height: var(--bn-height); }
.np-bn--hologram .np-bn__holo-time {
  padding: 0 16px; font-size: 11px; font-variant-numeric: tabular-nums;
  opacity: 0.55; letter-spacing: 1px; display: flex; align-items: center;
  white-space: nowrap; color: #00f5ff;
}
@keyframes np-holo-scan { from{background-position:-200% 0} to{background-position:300% 0} }
@keyframes np-glitch-anim {
  0%   { clip-path:polygon(0 18%,100% 18%,100% 28%,0 28%); transform:translateX(-2px); }
  10%  { clip-path:polygon(0 48%,100% 48%,100% 58%,0 58%); transform:translateX(2px); }
  20%  { clip-path:polygon(0 68%,100% 68%,100% 78%,0 78%); transform:translateX(0); }
  30%,100% { clip-path:none; transform:none; }
}

/* ============================================================
   TICKER-7: STACKED CARDS — Rich dark navy, card stack + thumbs
   ============================================================ */
.np-bn--cards {
  height: 76px; --bn-height: 76px;
  background: #0f172a !important; color: #fff !important;
  overflow: visible !important; z-index: 101;
  border-top: 3px solid var(--np-primary, #e63946);
}
.np-bn--cards .np-bn__cards-label {
  display: flex; align-items: center; gap: 8px; padding: 0 18px;
  font-weight: 800; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  background: var(--np-primary); height: 100%; white-space: nowrap; flex-shrink: 0;
}
.np-bn--cards .np-bn__cards-stage {
  flex: 1; position: relative; height: 100%; overflow: hidden; perspective: 600px;
}
.np-bn--cards .np-bn__card-item {
  position: absolute; inset: 5px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  transition: transform 0.65s cubic-bezier(0.4,0,0.2,1), opacity 0.55s ease;
  backface-visibility: hidden; will-change: transform, opacity; overflow: hidden;
}
.np-bn--cards .np-bn__card-item.active  { transform: translateX(0) scale(1);       opacity: 1; z-index: 3; }
.np-bn--cards .np-bn__card-item.next    { transform: translateX(110%) scale(0.95);  opacity: 0; z-index: 2; }
.np-bn--cards .np-bn__card-item.behind  { transform: translateX(-110%) scale(0.9);  opacity: 0; z-index: 1; }
.np-bn--cards .np-bn__card-item.exit    { transform: translateX(-115%) scale(0.88); opacity: 0; }
.np-bn--cards .np-bn__card-item.enter   { transform: translateX(115%) scale(0.95);  opacity: 0; }
.np-bn--cards .np-bn__card-thumb {
  width: 52px; height: 52px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
}
.np-bn--cards .np-bn__card-thumb img { width:100%; height:100%; object-fit:cover; }
.np-bn--cards .np-bn__card-thumb--placeholder { background: rgba(255,255,255,0.04); }
.np-bn--cards .np-bn__card-body { flex: 1; min-width: 0; }
.np-bn--cards .np-bn__card-cat {
  font-size: 9px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--np-primary); display: block; margin-bottom: 3px;
}
.np-bn--cards .np-bn__card-title {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.92); text-decoration: none;
  display: block; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.np-bn--cards .np-bn__card-title:hover { color: #fff; text-decoration: underline; }
.np-bn--cards .np-bn__card-time {
  font-size: 10px; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 4px; margin-top: 3px;
}
.np-bn--cards .np-bn__cards-right {
  display: flex; align-items: center; flex-direction: column; justify-content: center;
  gap: 8px; padding: 0 14px;
  background: rgba(0,0,0,0.25); border-left: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.np-bn--cards .np-bn__cards-pause { height: auto; padding: 6px; }
.np-bn--cards .np-bn__cards-dots { display: flex; align-items: center; gap: 5px; }
.np-bn--cards .np-bn__dot-indicator {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.25); cursor: pointer;
  transition: background 0.3s, transform 0.3s; border: none;
}
.np-bn--cards .np-bn__dot-indicator.active { background: var(--np-primary); transform: scale(1.4); }

/* ============================================================
   ADMIN PANEL PREVIEW CARDS — distinct per ticker
   (shared helper classes defined in breaking-news.php inline CSS)
   ============================================================ */

/* ============================================================
   RESPONSIVE — all tickers adapt to mobile screens
   ============================================================ */

/* ── 640px: tablet+ layout tweaks ───────────────────────── */
@media (max-width: 640px) {
  /* TICKER-1 */
  .np-bn--ticker-1 .np-bn__label { padding: 0 12px; font-size: 10px; letter-spacing: 1.2px; }
  .np-bn--ticker-1 .np-bn__item { font-size: 12px; }

  /* TICKER-2 */
  .np-bn--ticker-2 { height: 48px; --bn-height: 48px; }
  .np-bn--ticker-2 .np-bn__label--flip { padding: 0 12px; }
  .np-bn--ticker-2 .np-bn__flip-item a { font-size: 12px; gap: 8px; }
  .np-bn--ticker-2 .np-bn__cat { display: none; }
  .np-bn--ticker-2 .np-bn__counter { display: none; }
  .np-bn--ticker-2 .np-bn__nav { padding: 0 4px; }

  /* TICKER-3 */
  .np-bn--neon .np-bn__neon-time { display: none; }
  .np-bn--neon .np-bn__label--neon { padding: 0 12px; }
  .np-bn--neon .np-bn__neon-item { font-size: 12px; }

  /* TICKER-4 */
  .np-bn--broadcast { height: 46px; --bn-height: 46px; }
  .np-bn--broadcast .np-bn__broadcast-name { display: none; }
  .np-bn--broadcast .np-bn__broadcast-channel { padding: 0 10px; gap: 6px; }
  .np-bn--broadcast .np-bn__broadcast-alert { padding: 0 10px; letter-spacing: 1.5px; }
  .np-bn--broadcast .np-bn__broadcast-item { font-size: 12px; padding: 0 14px; }
  .np-bn--broadcast .np-bn__broadcast-cat { display: none; }
  .np-bn--broadcast .np-bn__broadcast-clock { padding: 0 10px; font-size: 11px; }

  /* TICKER-5 */
  .np-bn--ribbon3d { height: 52px; --bn-height: 52px; }
  .np-bn--ribbon3d .np-bn__label--ribbon { padding: 0 14px; font-size: 10px; letter-spacing: 1.5px; }
  .np-bn--ribbon3d .np-bn__ribbon-face { height: 52px; padding: 0 14px; }
  .np-bn--ribbon3d .np-bn__ribbon-face a { font-size: 12px; gap: 8px; }
  .np-bn--ribbon3d .np-bn__ribbon-cat { display: none; }
  .np-bn--ribbon3d .np-bn__ribbon-controls { padding: 0 4px; }
  .np-bn--ribbon3d .np-bn__ribbon-prev,
  .np-bn--ribbon3d .np-bn__ribbon-next,
  .np-bn--ribbon3d .np-bn__ribbon-pause { width: 26px; height: 26px; }

  /* TICKER-6 */
  .np-bn--hologram .np-bn__holo-label { padding: 0 12px; letter-spacing: 1.5px; }
  .np-bn--hologram .np-bn__holo-time { display: none; }
  .np-bn--hologram .np-bn__holo-item { font-size: 12px; }

  /* TICKER-7 */
  .np-bn--cards { height: 64px; --bn-height: 64px; }
  .np-bn--cards .np-bn__cards-label { padding: 0 12px; font-size: 9px; letter-spacing: 1.5px; }
  .np-bn--cards .np-bn__card-thumb { width: 42px; height: 42px; }
  .np-bn--cards .np-bn__card-title { font-size: 12px; }
  .np-bn--cards .np-bn__card-time { display: none; }
  .np-bn--cards .np-bn__cards-right { padding: 0 10px; gap: 6px; }
}

/* ── 440px: small phone ───────────────────────────────── */
@media (max-width: 440px) {
  /* TICKER-1: hide close button, keep pause */
  .np-bn--ticker-1 .np-bn__label { padding: 0 10px; font-size: 9px; }
  .np-bn--ticker-1 .np-bn__close { display: none; }

  /* TICKER-2 */
  .np-bn--ticker-2 { height: 44px; --bn-height: 44px; }
  .np-bn--ticker-2 .np-bn__flip-item { padding: 0 14px; }
  .np-bn--ticker-2 .np-bn__flip-item a { font-size: 11px; }
  .np-bn--ticker-2 .np-bn__nav { padding: 0 2px; }
  .np-bn--ticker-2 .np-bn__prev,
  .np-bn--ticker-2 .np-bn__next { padding: 0 6px; }

  /* TICKER-3 */
  .np-bn--neon .np-bn__label--neon { padding: 0 10px; font-size: 9px; }
  .np-bn--neon .np-bn__neon-item { font-size: 11px; gap: 8px; }

  /* TICKER-4 */
  .np-bn--broadcast { height: 42px; --bn-height: 42px; }
  .np-bn--broadcast .np-bn__broadcast-clock { display: none; }
  .np-bn--broadcast .np-bn__broadcast-item { font-size: 11px; padding: 0 10px; }
  .np-bn--broadcast .np-bn__broadcast-logo { width: 24px; height: 24px; font-size: 9px; }
  .np-bn--broadcast .np-bn__broadcast-channel { padding: 0 8px; gap: 5px; }

  /* TICKER-5 */
  .np-bn--ribbon3d { height: 46px; --bn-height: 46px; }
  .np-bn--ribbon3d .np-bn__ribbon-face { height: 46px; }
  .np-bn--ribbon3d .np-bn__ribbon-face a { font-size: 11px; }
  .np-bn--ribbon3d .np-bn__label--ribbon { padding: 0 10px; letter-spacing: 1px; }

  /* TICKER-6 */
  .np-bn--hologram .np-bn__holo-label { padding: 0 10px; font-size: 9px; letter-spacing: 1.5px; }
  .np-bn--hologram .np-bn__holo-item { font-size: 11px; }

  /* TICKER-7 */
  .np-bn--cards { height: 58px; --bn-height: 58px; }
  .np-bn--cards .np-bn__card-thumb { display: none; }
  .np-bn--cards .np-bn__card-item { padding: 6px 10px; gap: 8px; }
  .np-bn--cards .np-bn__cards-label { padding: 0 10px; }
  .np-bn--cards .np-bn__cards-right { padding: 0 8px; }
}