/* ═══════════════════════ BADGES ═══════════════════════ */

/* ── Base ── */
.lib-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 4px 10px; border-radius: 3px; white-space: nowrap;
  text-decoration: none; transition: opacity .2s;
}

/* 1. Standard Category */
.lib-badge--cat { background: #eef2ff; color: #1e6cf0; }

/* 2. Live Pulsing */
.lib-badge--live { background: #d6173a; color: #fff; }
.lib-badge--live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: live-pulse 1.2s ease-in-out infinite;
}
@keyframes live-pulse { 50% { opacity: 0; } }

/* 3. Breaking News */
.lib-badge--breaking { background: #d6173a; color: #fff; text-transform: uppercase; letter-spacing: 2px; }
.lib-badge--breaking::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #fff;
  animation: live-pulse 0.8s ease-in-out infinite;
}

/* 4. Sponsored */
.lib-badge--sponsored { background: transparent; color: #888; border: 1px solid #ddd; font-size: 10px; text-transform: uppercase; letter-spacing: 2px; }

/* 5. New / Updated */
.lib-badge--new { background: #27ae60; color: #fff; }
.lib-badge--updated { background: #f39c12; color: #fff; }

/* 6. Exclusive */
.lib-badge--exclusive {
  background: linear-gradient(90deg, #7b8cde, #d6173a); color: #fff;
  border-radius: 20px; padding: 4px 14px;
}

/* 7. Opinion */
.lib-badge--opinion { background: #fff8e1; color: #e67e22; border: 1px solid rgba(230,126,18,.3); }

/* 8. Video */
.lib-badge--video { background: #000; color: #fff; gap: 8px; }
.lib-badge--video::before { content: '▶'; font-size: 8px; }

/* 9. Trending */
.lib-badge--trending { background: rgba(214,23,58,.08); color: #d6173a; }
.lib-badge--trending::before { content: '🔥'; font-size: 11px; }

/* 10. Long Read */
.lib-badge--longread { background: #f3f4f6; color: #555; gap: 6px; }
.lib-badge--longread::before { content: '⏱'; font-size: 11px; }

/* 11. Premium */
.lib-badge--premium { background: #1a1a1a; color: #ffd700; }
.lib-badge--premium::before { content: '★'; color: #ffd700; }

/* 12. Community */
.lib-badge--community { background: #e8f5e9; color: #27ae60; }

/* 13. Alert / Warning */
.lib-badge--alert { background: #fff3cd; color: #856404; border: 1px solid rgba(133,100,4,.25); }

/* Tags */
.lib-tag { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; text-decoration: none; transition: background .2s, color .2s; cursor: pointer; }
.lib-tag--outline { background: transparent; border: 1px solid var(--nui-border,#ddd); color: var(--nui-text-muted,#666); }
.lib-tag--outline:hover { background: var(--nui-brand,#d6173a); color: #fff; border-color: var(--nui-brand,#d6173a); }
.lib-tag--solid { background: var(--nui-surface-alt,#f3f4f6); color: var(--nui-text,#333); }
.lib-tag--solid:hover { background: var(--nui-brand,#d6173a); color: #fff; }
.lib-tag--colored { color: #fff; }
.lib-tag--sm { padding: 3px 9px; font-size: 11px; }
.lib-tag--lg { padding: 8px 18px; font-size: 14px; }
.lib-tags { display: flex; flex-wrap: wrap; gap: 8px; }


/* ═══════════════════════ BUTTONS ═══════════════════════ */

/* ── Base ── */
.lib-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 22px; font-size: 14px; font-weight: 700; line-height: 1; text-decoration: none;
  border: none; cursor: pointer; border-radius: 4px; transition: all .2s; white-space: nowrap;
  position: relative; overflow: hidden; font-family: inherit;
}
.lib-btn:focus-visible { outline: 3px solid rgba(214,23,58,.4); outline-offset: 2px; }

/* 1. Primary Filled */
.lib-btn--primary { background: var(--nui-brand,#d6173a); color: #fff; }
.lib-btn--primary:hover { background: #b5102d; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(214,23,58,.3); }

/* 2. Accent Blue */
.lib-btn--accent { background: var(--nui-accent,#1e6cf0); color: #fff; }
.lib-btn--accent:hover { background: #1558cc; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(30,108,240,.3); }

/* 3. Outline */
.lib-btn--outline { background: transparent; color: var(--nui-brand,#d6173a); border: 2px solid var(--nui-brand,#d6173a); }
.lib-btn--outline:hover { background: var(--nui-brand,#d6173a); color: #fff; }

/* 4. Ghost / Text */
.lib-btn--ghost { background: transparent; color: var(--nui-text,#333); padding-left: 0; padding-right: 0; }
.lib-btn--ghost:hover { color: var(--nui-brand,#d6173a); }

/* 5. Dark */
.lib-btn--dark { background: #111; color: #fff; }
.lib-btn--dark:hover { background: #333; }

/* 6. Gradient */
.lib-btn--gradient { background: linear-gradient(90deg, #d6173a, #7b8cde); color: #fff; border-radius: 20px; padding: 10px 28px; }
.lib-btn--gradient:hover { background: linear-gradient(90deg, #b5102d, #5a6bc5); transform: translateY(-1px); }

/* 7. Pill */
.lib-btn--pill { border-radius: 50px; padding: 10px 28px; }
.lib-btn--pill.lib-btn--primary { background: var(--nui-brand,#d6173a); color: #fff; }
.lib-btn--pill.lib-btn--outline { border-color: var(--nui-brand,#d6173a); color: var(--nui-brand,#d6173a); }

/* 8. Arrow CTA */
.lib-btn--arrow { background: transparent; color: var(--nui-text,#111); gap: 12px; padding: 8px 0; border-bottom: 2px solid var(--nui-brand,#d6173a); border-radius: 0; }
.lib-btn--arrow::after { content: '→'; transition: transform .2s; }
[dir="rtl"] .lib-btn--arrow::after { content: '←'; }
.lib-btn--arrow:hover::after { transform: translateX(5px); }
[dir="rtl"] .lib-btn--arrow:hover::after { transform: translateX(-5px); }

/* 9. Icon Button */
.lib-btn--icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; }

/* 10. Loading State */
.lib-btn--loading { pointer-events: none; opacity: .75; }
.lib-btn--loading::after {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* 11. Social Share Buttons */
.lib-btn--share-fb { background: #1877f2; color: #fff; }
.lib-btn--share-tw { background: #000; color: #fff; }
.lib-btn--share-wa { background: #25d366; color: #fff; }
.lib-btn--share-ln { background: #0a66c2; color: #fff; }
.lib-btn--share-cp { background: var(--nui-surface-alt,#f3f4f6); color: var(--nui-text,#333); border: 1px solid var(--nui-border,#ddd); }
.lib-btn--share-fb:hover, .lib-btn--share-tw:hover, .lib-btn--share-wa:hover, .lib-btn--share-ln:hover { filter: brightness(1.12); }

/* 12. Split Button */
.lib-btn-split { display: inline-flex; align-items: stretch; border-radius: 4px; overflow: hidden; }
.lib-btn-split .split-main { padding: 10px 20px; background: var(--nui-brand,#d6173a); color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; }
.lib-btn-split .split-drop { padding: 10px 12px; background: #b5102d; color: #fff; cursor: pointer; border: none; border-left: 1px solid rgba(255,255,255,.2); font-family: inherit; transition: background .2s; }
.lib-btn-split .split-drop:hover { background: #8b0011; }

/* Sizes */
.lib-btn--sm { padding: 7px 16px; font-size: 12px; }
.lib-btn--lg { padding: 14px 32px; font-size: 16px; }
.lib-btn--xl { padding: 18px 40px; font-size: 18px; }
.lib-btn--full { width: 100%; }

/* Dark mode */
[data-theme="dark"] .lib-btn--ghost { color: rgba(255,255,255,.75); }
[data-theme="dark"] .lib-btn--ghost:hover { color: #fff; }
[data-theme="dark"] .lib-btn--arrow { color: rgba(255,255,255,.85); }
[data-theme="dark"] .lib-btn--share-cp { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.1); }


/* ═══════════════════════ TICKERS ═══════════════════════ */

/* Shared base */
.lib-ticker { overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.lib-ticker-track { display: flex; align-items: center; gap: 0; animation: ticker-ltr 20s linear infinite; }
[dir="rtl"] .lib-ticker-track { animation-name: ticker-rtl; }
@keyframes ticker-ltr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ticker-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } }
.lib-ticker:hover .lib-ticker-track { animation-play-state: paused; }
.lib-ticker-item { padding: 0 32px; font-size: 13px; display: inline-flex; align-items: center; gap: 8px; }
.lib-ticker-sep { color: var(--nui-brand,#d6173a); font-size: 18px; }

/* 1. Standard Red Label */
.lib-ticker--standard { background: #fff; border-bottom: 1px solid var(--nui-border,#eee); height: 40px; }
.lib-ticker--standard .ticker-label { background: #d6173a; color: #fff; padding: 0 18px; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; height: 100%; display: flex; align-items: center; flex-shrink: 0; }

/* 2. Dark Breaking */
.lib-ticker--dark-break { background: #111; height: 38px; }
.lib-ticker--dark-break .ticker-label { background: #d6173a; color: #fff; padding: 0 16px; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; height: 100%; display: flex; align-items: center; flex-shrink: 0; }
.lib-ticker--dark-break .lib-ticker-item { color: rgba(255,255,255,.85); font-size: 13px; }
.lib-ticker--dark-break .lib-ticker-sep { color: #d6173a; }

/* 3. Top Bar Slim */
.lib-ticker--topbar { background: #f4f0eb; height: 34px; font-size: 12px; border-bottom: 1px solid #e5e0d8; }
.lib-ticker--topbar .ticker-label { color: #888; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; padding: 0 16px; flex-shrink: 0; }
.lib-ticker--topbar .lib-ticker-item { color: #333; gap: 6px; }

/* 4. Stock Market Style */
.lib-ticker--stocks { background: #0d1117; height: 44px; }
.lib-ticker--stocks .ticker-label { color: rgba(255,255,255,.4); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; padding: 0 16px; flex-shrink: 0; }
.lib-ticker--stocks .lib-ticker-item { color: rgba(255,255,255,.7); gap: 6px; font-family: 'Courier New', monospace; }
.lib-ticker--stocks .tick-sym { font-weight: 700; color: #fff; font-size: 13px; }
.lib-ticker--stocks .tick-up { color: #27ae60; font-size: 12px; }
.lib-ticker--stocks .tick-down { color: #d6173a; font-size: 12px; }

/* 5. Sports Scores */
.lib-ticker--scores { background: #1a1a2e; height: 48px; }
.lib-ticker--scores .ticker-label { background: #d6173a; color: #fff; padding: 0 16px; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; height: 100%; display: flex; align-items: center; flex-shrink: 0; }
.lib-ticker--scores .lib-ticker-item { color: rgba(255,255,255,.7); font-size: 12px; }
.lib-ticker--scores .score-match { display: inline-flex; align-items: center; gap: 8px; }
.lib-ticker--scores .score-team { font-weight: 700; color: #fff; font-size: 12px; }
.lib-ticker--scores .score-num { font-size: 15px; font-weight: 900; color: #d6173a; min-width: 36px; text-align: center; }

/* 6. Weather Bar */
.lib-ticker--weather { background: #e8f4fd; height: 38px; font-size: 12px; border-bottom: 1px solid #c8e3f5; }
.lib-ticker--weather .ticker-label { color: #1a6ca8; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 0 14px; flex-shrink: 0; }
.lib-ticker--weather .lib-ticker-item { color: #2c5f82; gap: 6px; }
.lib-ticker--weather .wx-city { font-weight: 700; }
.lib-ticker--weather .wx-temp { color: #d6173a; font-weight: 700; }

/* 7. Election / Results */
.lib-ticker--election { background: #fff; border: 2px solid #d6173a; height: 44px; }
.lib-ticker--election .ticker-label {
  background: #d6173a; color: #fff; padding: 0 18px; font-size: 11px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; height: 100%; display: flex; align-items: center; flex-shrink: 0;
  position: relative;
}
.lib-ticker--election .lib-ticker-item { font-weight: 600; font-size: 13px; color: #111; }
.lib-ticker--election .el-party { font-weight: 900; }
.lib-ticker--election .el-votes { color: var(--nui-brand,#d6173a); font-weight: 700; }

/* 8. Minimal White */
.lib-ticker--minimal { background: transparent; height: 36px; border-bottom: 1px solid var(--nui-border,#eee); }
.lib-ticker--minimal .ticker-label { font-size: 11px; font-weight: 700; color: var(--nui-text-muted,#888); letter-spacing: 1px; text-transform: uppercase; padding: 0 16px; flex-shrink: 0; border-right: 1px solid var(--nui-border,#eee); }
.lib-ticker--minimal .lib-ticker-item { font-size: 13px; color: var(--nui-text,#333); }
[dir="rtl"] .lib-ticker--minimal .ticker-label { border-right: none; border-left: 1px solid var(--nui-border,#eee); }

/* 9. COVID/Alert Style */
.lib-ticker--alert-bar { background: #fff3cd; height: 40px; border-bottom: 2px solid #ffc107; }
.lib-ticker--alert-bar .ticker-label { background: #ffc107; color: #111; padding: 0 16px; font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; height: 100%; display: flex; align-items: center; flex-shrink: 0; }
.lib-ticker--alert-bar .lib-ticker-item { color: #5c4600; font-size: 13px; font-weight: 600; }

/* 10. Video / Media Ticker */
.lib-ticker--video-bar { background: #0d0d0d; height: 50px; }
.lib-ticker--video-bar .ticker-label { background: #d6173a; color: #fff; padding: 0 18px; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; height: 100%; display: flex; align-items: center; flex-shrink: 0; }
.lib-ticker--video-bar .lib-ticker-item { color: rgba(255,255,255,.7); font-size: 13px; gap: 10px; }
.lib-ticker--video-bar .vid-thumb { width: 36px; height: 28px; border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.lib-ticker--video-bar .vid-thumb img { width: 100%; height: 100%; object-fit: cover; }