/*
 * NaijaMovies V5 Premium — Green Accent Override Layer
 * Applies NaijaMovies green design tokens to all V5 components
 * from np-v5-suite.css, np-community.css, np-fixes.css
 */

/* ─── ROOT OVERRIDES: Map V5 red vars → NaijaMovies green ─── */
:root {
  /* Override any red accent from naijaprey v5 */
  --np-accent:       var(--accent, #00c853);
  --np-accent-hover: var(--accent-h, #00e676);
  --np-accent-dim:   rgba(0,200,83,.15);
  --np-accent-glow:  0 0 20px rgba(0,200,83,.35);

  /* Re-map common V5 vars to green */
  --color-primary:   var(--accent, #00c853);
  --color-primary-h: var(--accent-h, #00e676);
  --btn-bg:          var(--accent, #00c853);
  --btn-hover:       var(--accent-h, #00e676);
  --link-color:      var(--accent, #00c853);
}

/* ─── COMMUNITY MODULE: replace reds with green ─── */
.np-community-wrap .np-join-btn,
.np-comm-cta-btn,
.np-movie-discuss .np-disc-vote-btn.active,
.np-discuss-send,
.np-comm-subscribe-btn,
.np-poll-vote-btn,
.np-tip-btn,
.np-artist-vote-btn,
.np-rec-submit-btn,
.np-paywall-btn,
.np-crypto-btn {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
  border-color: var(--accent, #00c853) !important;
}
.np-community-wrap .np-join-btn:hover,
.np-comm-cta-btn:hover,
.np-discuss-send:hover,
.np-poll-vote-btn:hover,
.np-tip-btn:hover,
.np-rec-submit-btn:hover {
  background: var(--accent-h, #00e676) !important;
  border-color: var(--accent-h, #00e676) !important;
}

/* ─── V5 SUITE COMPONENTS: accent override ─── */
.np-search-result-item:hover,
.np-search-highlight {
  border-color: var(--accent, #00c853) !important;
  color: var(--accent, #00c853) !important;
}
.np-search-submit,
.np-live-search-btn {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
}

/* Hero Carousel dots & controls */
.np-hero-dot.active,
.np-hero-dot:hover {
  background: var(--accent, #00c853) !important;
}
.np-hero-btn-primary {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
  border: none !important;
}
.np-hero-btn-primary:hover {
  background: var(--accent-h, #00e676) !important;
}
.np-hero-play-icon {
  border-color: transparent transparent transparent var(--accent, #00c853) !important;
}

/* UX Suite — progress bar, floating buttons */
.np-reading-progress { background: var(--accent, #00c853) !important; }
.np-back-top:hover,
.np-float-action-btn:hover { background: var(--accent, #00c853) !important; color: #000 !important; }

/* Payment / Paywall */
.np-paywall-badge,
.np-membership-badge { background: var(--accent, #00c853) !important; color: #000 !important; }
.np-paywall-locked-overlay .np-unlock-btn {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
}
.np-price-tag { color: var(--accent, #00c853) !important; }

/* Security badge */
.np-security-badge { border-color: var(--accent, #00c853) !important; color: var(--accent, #00c853) !important; }

/* PWA install banner */
.np-pwa-install-btn {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
}

/* Schema / ratings */
.np-star.filled,
.np-rating-fill { color: var(--accent, #00c853) !important; }

/* Admin Suite panels */
.np-admin-suite-tab.active,
.np-admin-suite-save-btn {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
  border-color: var(--accent, #00c853) !important;
}

/* Recommendation widget */
.np-rec-tag.active,
.np-rec-tag:hover {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
  border-color: var(--accent, #00c853) !important;
}

/* Marketing ads highlight */
.np-ad-badge { background: var(--accent, #00c853) !important; color: #000 !important; }

/* Retention: recently viewed, continue watching strip */
.np-continue-watching-title,
.np-recently-viewed-heading { color: var(--accent, #00c853) !important; }
.np-continue-progress-fill { background: var(--accent, #00c853) !important; }

/* Speed engine skeleton shimmer */
.np-skeleton::after { background: linear-gradient(90deg, transparent, rgba(0,200,83,.12), transparent) !important; }

/* Search suite suggestions */
.np-search-suggestion:hover,
.np-search-suggestion.selected { background: var(--np-accent-dim) !important; border-left: 3px solid var(--accent, #00c853) !important; }

/* Community Plus: premium badge */
.np-premium-badge { background: var(--accent, #00c853) !important; color: #000 !important; }
.np-comm-tier-highlight { border-color: var(--accent, #00c853) !important; }

/* Movie Discussion: upvote / reaction */
.np-reaction-btn.active,
.np-disc-upvote.active { color: var(--accent, #00c853) !important; }

/* ─── GLOBAL FOCUS RINGS ─── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent, #00c853) !important;
  outline-offset: 2px;
}

/* ─── SCROLLBAR (Webkit) ─── */
::-webkit-scrollbar-thumb { background: var(--accent, #00c853); border-radius: 4px; }
::-webkit-scrollbar { width: 6px; height: 6px; background: var(--s2, #0e150e); }

/* ─── SELECTION COLOR ─── */
::selection { background: rgba(0,200,83,.35); color: #fff; }


/* ─── PREMIUM HEADER COMPONENTS ─── */
.hdr-search-premium { position: relative; }
.nm-live-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 340px;
  background: var(--s2, #0e150e); border: 1px solid var(--s5, #1d261d);
  border-radius: 10px; overflow: hidden; z-index: 9999;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.nm-live-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  text-decoration: none; color: var(--text, #e0e0e0); border-bottom: 1px solid var(--s3, #131b13);
  transition: background .15s;
}
.nm-live-item:hover { background: var(--s3, #131b13); }
.nm-live-item img { width: 36px; height: 54px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.nm-live-no-img { width: 36px; height: 54px; background: var(--s3, #131b13); border-radius: 4px; flex-shrink: 0; }
.nm-live-title { font-size: 14px; font-weight: 600; display: block; }
.nm-live-year  { font-size: 11px; color: var(--text-muted, #a0a8a0); }
.nm-live-more  { display: block; padding: 10px 14px; font-size: 12px; text-align: center;
                  color: var(--accent, #00c853); text-decoration: none; background: var(--s1, #0a100a); }

/* Watchlist + Notif icon buttons */
.hdr-icon-btn { position: relative; display: flex; align-items: center; justify-content: center;
                  width: 38px; height: 38px; border-radius: 8px; background: var(--s2,#0e150e);
                  border: 1px solid var(--s4,#182018); color: var(--text-muted,#a0a8a0);
                  text-decoration: none; cursor: pointer; transition: border-color .2s, color .2s; flex-shrink: 0; }
.hdr-icon-btn:hover { border-color: var(--accent,#00c853); color: var(--accent,#00c853); }
.hdr-wl-count {
  position: absolute; top: -5px; right: -5px; background: var(--accent, #00c853);
  color: #000; font-size: 10px; font-weight: 700; width: 16px; height: 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.hdr-notif-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px;
  background: var(--accent, #00c853); border-radius: 50%; display: none;
}
.nm-notif-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px;
  background: var(--s2, #0e150e); border: 1px solid var(--s5, #1d261d); border-radius: 10px;
  overflow: hidden; z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,.6);
}
.nm-notif-header { padding: 10px 14px; font-weight: 700; font-size: 13px;
                    border-bottom: 1px solid var(--s4,#182018); color: var(--accent,#00c853); }
.nm-notif-item { display: flex; flex-direction: column; padding: 10px 14px; border-bottom: 1px solid var(--s3,#131b13);
                  text-decoration: none; color: var(--text,#e0e0e0); transition: background .15s; }
.nm-notif-item:hover { background: var(--s3,#131b13); }
.nm-notif-read { opacity: .55; }
.nm-notif-title { font-size: 13px; font-weight: 500; }
.nm-notif-date  { font-size: 11px; color: var(--text-muted,#a0a8a0); margin-top: 2px; }
.hdr-notif-wrap { position: relative; }

/* ─── READING PROGRESS ─── */
#nm-rp { position: fixed; top: 0; left: 0; height: 3px; z-index: 10000; background: var(--accent,#00c853); transition: width .1s linear; pointer-events: none; }

/* ─── TOC STYLES ─── */
.nm-toc { background: var(--s2,#0e150e); border: 1px solid var(--s5,#1d261d); border-left: 4px solid var(--accent,#00c853);
           border-radius: 8px; padding: 16px 20px; margin: 20px 0; }
.nm-toc-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--accent,#00c853); }
.nm-toc-list { margin: 0; padding-left: 18px; }
.nm-toc-list li { margin-bottom: 5px; }
.nm-toc-list a { color: var(--text-muted,#a0a8a0); font-size: 13px; text-decoration: none; }
.nm-toc-list a:hover { color: var(--accent,#00c853); }

/* ─── IMDB BADGE ─── */
.nm-imdb-badge { display: inline-flex; align-items: center; gap: 6px; background: #f5c518; color: #000;
                  padding: 3px 10px; border-radius: 6px; font-weight: 700; font-size: 13px; }
.nm-imdb-logo  { font-size: 11px; }
.nm-imdb-score { font-size: 16px; }
.nm-imdb-votes { font-size: 11px; opacity: .75; }

/* ─── INFO TABLE ─── */
.nm-info-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0; }
.nm-info-table th { text-align: left; padding: 6px 10px; background: var(--s2,#0e150e); color: var(--text-muted,#a0a8a0); font-weight: 600; white-space: nowrap; width: 35%; }
.nm-info-table td { padding: 6px 10px; border-bottom: 1px solid var(--s3,#131b13); }

/* ─── DOWNLOAD BUTTON ─── */
.nm-download-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent,#00c853);
                    color: #000; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: 14px;
                    text-decoration: none; transition: background .2s; border: none; cursor: pointer; }
.nm-download-btn:hover { background: var(--accent-h,#00e676); }
.nm-dl-badge { background: rgba(0,0,0,.2); padding: 1px 7px; border-radius: 4px; font-size: 11px; }
.nm-dl-count { font-size: 11px; color: var(--text-muted,#a0a8a0); margin-left: 8px; }

/* ─── GENRE BADGES ─── */
.nm-genre-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.nm-genre-badge { background: var(--s3,#131b13); border: 1px solid var(--s5,#1d261d); color: var(--text-muted,#a0a8a0);
                   padding: 3px 10px; border-radius: 20px; font-size: 12px; text-decoration: none; transition: all .2s; }
.nm-genre-badge:hover { border-color: var(--accent,#00c853); color: var(--accent,#00c853); }

/* ─── CAST LIST ─── */
.nm-cast-list { font-size: 13px; }
.nm-cast-list ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0 0; }
.nm-cast-list li { background: var(--s2,#0e150e); border: 1px solid var(--s4,#182018);
                    padding: 3px 10px; border-radius: 20px; font-size: 12px; }

/* ─── SOCIAL SHARE FLOAT ─── */
@media (min-width: 769px) {
  .nm-share-float { display: flex; }
}

/* ─── PAGE VIEW BADGE ─── */
.nm-views-badge { font-size: 12px; color: var(--text-muted,#a0a8a0); }
.nm-views-badge::before { content: '👁 '; }

/* ─── WATCHLIST BUTTON ─── */
.nm-watchlist-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--s3,#131b13);
                     border: 1px solid var(--s5,#1d261d); color: var(--text-muted,#a0a8a0);
                     padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px;
                     text-decoration: none; transition: all .2s; }
.nm-watchlist-btn.in-wl { border-color: var(--accent,#00c853); color: var(--accent,#00c853); }
.nm-watchlist-btn:hover  { border-color: var(--accent,#00c853); color: var(--accent,#00c853); }

/* ─── RESPONSIVE HEADER ICONS ─── */
@media (max-width: 600px) {
  .hdr-notif-wrap { display: none; }
  .nm-live-results { min-width: 260px; left: -60px; }
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM DISCUSSION COMMUNITY STYLES
   ═══════════════════════════════════════════════════════════ */

/* Section wrapper */
.nm-discuss-premium-wrap {
  margin: 32px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--s4, #182018);
  background: var(--s1, #0a100a);
}

/* Section header */
.nm-discuss-section-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--s2, #0e150e);
  border-bottom: 1px solid var(--s4, #182018);
  flex-wrap: wrap;
}
.nm-discuss-section-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--accent, #00c853);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nm-discuss-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #e0e0e0);
}
.nm-discuss-section-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-muted, #a0a8a0);
}
.nm-discuss-count-badge {
  margin-left: auto;
  background: var(--s3, #131b13);
  border: 1px solid var(--s5, #1d261d);
  color: var(--text-muted, #a0a8a0);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* Override discussion inner padding */
.nm-discuss-premium-wrap .np-discuss-wrap {
  border: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* AI Community inner */
.nm-ai-community-wrap { padding: 0; }
.nm-ai-community-wrap .np-aicm-wrap {
  border-top: 1px solid var(--s3, #131b13);
  border-radius: 0;
}

/* Community CTA Strip */
.nm-comm-cta-strip {
  border-top: 1px solid var(--s4, #182018);
  background: linear-gradient(135deg, rgba(0,200,83,.06), rgba(0,200,83,.02));
  padding: 16px 20px;
}
.nm-comm-cta-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.nm-comm-cta-icon { font-size: 24px; flex-shrink: 0; }
.nm-comm-cta-text { flex: 1; min-width: 0; }
.nm-comm-cta-text strong { display: block; font-size: 14px; color: var(--text, #e0e0e0); }
.nm-comm-cta-text small  { display: block; font-size: 12px; color: var(--text-muted, #a0a8a0); }
.nm-comm-cta-btn {
  background: var(--accent, #00c853);
  color: #000;
  padding: 8px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s;
}
.nm-comm-cta-btn:hover { background: var(--accent-h, #00e676); }

/* ── Readers Widget (single post) ── */
.np-readers-widget {
  border: 1px solid var(--s4, #182018) !important;
  border-left: 3px solid var(--accent, #00c853) !important;
  border-radius: 8px !important;
  background: var(--s1, #0a100a) !important;
}

/* ── Trending section on single.php ── */
.nm-trending-section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--s4, #182018);
}
.nm-fire { display: inline-block; animation: nm-fire-pulse 1.5s ease-in-out infinite; }
@keyframes nm-fire-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }

/* ── Card views overlay ── */
.np-card-views {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(0,0,0,.75); padding: 2px 6px;
  border-radius: 4px; font-size: 10px; color: #e0e0e0;
  display: flex; align-items: center; gap: 3px;
}

/* ═══════════════════════════════════════════════════════════
   READERS WIDGET ACCENT COLOURS (green theme)
   ═══════════════════════════════════════════════════════════ */
.np-readers-panel-live    { border-color: var(--accent, #00c853) !important; }
.np-readers-live-dot      { background:   var(--accent, #00c853) !important; }
.np-readers-count         { color:        var(--accent, #00c853) !important; }
.np-readers-panel-global  { border-color: rgba(0,200,83,.35) !important; }

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — NaijaMovies hero banner accent
   ═══════════════════════════════════════════════════════════ */
.nm-heading-accent { color: var(--accent, #00c853); }
.nm-hero-submit {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
  border: none !important;
}
.nm-hero-submit:hover { background: var(--accent-h, #00e676) !important; }

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE — Skeleton loading animation (green tint)
   ═══════════════════════════════════════════════════════════ */
.np-skeleton {
  background: var(--s2, #0e150e);
  position: relative;
  overflow: hidden;
}
.np-skeleton::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,200,83,.08), transparent);
  animation: np-shimmer 1.4s infinite;
}
@keyframes np-shimmer { from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ═══════════════════════════════════════════════════════════
   DOWNLOAD BUTTON — green upgrade
   ═══════════════════════════════════════════════════════════ */
.np-dl-btn {
  background: var(--s3, #131b13) !important;
  border: 1px solid var(--accent, #00c853) !important;
  color: var(--accent, #00c853) !important;
  transition: background .2s, color .2s !important;
}
.np-dl-btn:hover {
  background: var(--accent, #00c853) !important;
  color: #000 !important;
}
.np-dl-4k    { border-color: #f59e0b !important; color: #f59e0b !important; }
.np-dl-1080  { border-color: var(--accent, #00c853) !important; color: var(--accent, #00c853) !important; }
.np-dl-720   { border-color: #3b82f6 !important; color: #3b82f6 !important; }
.np-dl-480   { border-color: #6b7280 !important; color: #6b7280 !important; }


/* ═══════════════════════════════════════════════════════════════════════
   NAIJAMOVIES PRO v5 — COMPLETE LAYOUT FIX
   Covers: readers widget (single.php) + homepage o2 sections
   Brand: --accent:#00c853  backgrounds: --s0 → --s5  gold: --gold:#f5a623
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. READERS WIDGET  (.np-readers-widget)
      3-panel horizontal bar: Live | Today | All-Time
   ───────────────────────────────────────────────────────────────────── */
.np-readers-widget {
  display: flex;
  align-items: stretch;
  background: var(--s1, #0a100a);
  border: 1px solid rgba(0,200,83,.14);
  border-left: 3px solid var(--accent, #00c853);
  border-radius: 10px;
  overflow: hidden;
  margin: 18px 0 20px;
  min-height: 80px;
}

/* Each panel takes equal space */
.np-readers-panel {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  position: relative;
}
/* Live panel gets subtle green tint */
.np-readers-panel-live {
  background: rgba(0,200,83,.04);
}

/* Panel inner: dot on left + content on right */
.np-readers-panel-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* Coloured dot indicator */
.np-readers-dot {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  animation: nm-dot-pulse 2s ease-in-out infinite;
}
.np-dot-live  { background: var(--accent, #00c853); box-shadow: 0 0 8px var(--accent, #00c853); }
.np-dot-month { background: var(--blue, #3d8ef8);   box-shadow: 0 0 8px rgba(61,142,248,.6); }
.np-dot-total { background: var(--gold, #f5a623);   box-shadow: 0 0 8px rgba(245,166,35,.6); }
@keyframes nm-dot-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.55; transform:scale(.82); }
}

/* Panel content column */
.np-readers-panel-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* The big number */
.np-readers-big {
  font-family: var(--fh, 'Montserrat', sans-serif);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 900;
  color: var(--t0, #ecf0ec);
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.np-readers-panel-live .np-readers-big { color: var(--accent, #00c853); }

/* Label under the number */
.np-readers-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--t1, #8a9e8a);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 1px;
}

/* Sub-label (emoji + text) */
.np-readers-sub {
  font-size: 10px;
  color: var(--t2, #526052);
  font-weight: 500;
  margin-top: 1px;
}

/* Vertical separator between panels */
.np-readers-sep {
  width: 1px;
  background: rgba(0,200,83,.10);
  align-self: stretch;
  flex-shrink: 0;
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
  .np-readers-widget {
    flex-direction: column;
    border-left: 3px solid var(--accent, #00c853);
  }
  .np-readers-sep {
    width: auto;
    height: 1px;
    align-self: auto;
  }
  .np-readers-panel { padding: 12px 14px; }
  .np-readers-big   { font-size: 20px; }
}

/* ─────────────────────────────────────────────────────────────────────
   2. HOMEPAGE — Platform label
   ───────────────────────────────────────────────────────────────────── */
.o2-platform-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, #00c853);
  background: rgba(0,200,83,.08);
  border: 1px solid rgba(0,200,83,.20);
  border-radius: 20px;
  padding: 4px 14px;
  margin: 16px 0 4px;
}
.o2-platform-label::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, #00c853);
  box-shadow: 0 0 6px var(--accent, #00c853);
  animation: nm-dot-pulse 1.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   3. TOP 10 SECTION  (.o2-top10-section)
   ───────────────────────────────────────────────────────────────────── */
.o2-top10-section {
  background: var(--s1, #0a100a);
  border: 1px solid rgba(0,200,83,.10);
  border-radius: 10px;
  padding: 20px 18px 16px;
  margin: 8px 0 24px;
}
.o2-top10-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.o2-top10-title {
  font-family: var(--fh, 'Montserrat', sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--t0, #ecf0ec);
  margin: 0;
  letter-spacing: -.01em;
}
.o2-top10-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #00c853);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, #00c853);
  box-shadow: 0 0 8px var(--accent, #00c853);
  animation: nm-dot-pulse 1.8s ease-in-out infinite;
}

/* Scroll wrap: arrows flanking the row */
.o2-scroll-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.o2-scroll-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--s3, #131b13);
  border: 1px solid rgba(0,200,83,.18);
  color: var(--accent, #00c853);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s, transform .16s;
}
.o2-scroll-arrow:hover { background: rgba(0,200,83,.16); transform: scale(1.08); }

/* Scrollable card row */
.o2-top10-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  flex: 1;
  /* hide scrollbar on desktop, keep on mobile */
  scrollbar-width: thin;
  scrollbar-color: rgba(0,200,83,.25) transparent;
}
.o2-top10-row::-webkit-scrollbar { height: 3px; }
.o2-top10-row::-webkit-scrollbar-thumb { background: rgba(0,200,83,.25); border-radius: 2px; }

/* Individual card */
.o2-top10-card {
  flex: 0 0 115px;
  background: var(--s2, #0e150e);
  border: 1px solid rgba(0,200,83,.08);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .25s, border-color .16s;
  cursor: pointer;
}
.o2-top10-card:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(0,200,83,.32);
}
.o2-top10-card a { display: block; text-decoration: none; color: inherit; }

/* Poster */
.o2-top10-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--s3, #131b13);
}
.o2-top10-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.o2-top10-card:hover .o2-top10-thumb img { transform: scale(1.06); }

/* Rank badge */
.o2-rank-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--accent, #00c853);
  color: #000;
  font-size: 10px;
  font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .04em;
  line-height: 1.4;
  z-index: 2;
}

/* Info below poster */
.o2-top10-info { padding: 7px 8px 8px; }
.o2-top10-title-text {
  font-size: 11px;
  font-weight: 700;
  color: var(--t0, #ecf0ec);
  line-height: 1.3;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.o2-top10-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}
.type-year {
  font-size: 9px;
  color: var(--t2, #526052);
  font-weight: 500;
}
.o2-star {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  font-weight: 700;
  color: var(--gold, #f5a623);
}

/* ─────────────────────────────────────────────────────────────────────
   4. TOP THIS WEEK  (.o2-this-week-section)
   ───────────────────────────────────────────────────────────────────── */
.o2-this-week-section {
  background: var(--s1, #0a100a);
  border: 1px solid rgba(0,200,83,.10);
  border-radius: 10px;
  padding: 20px 18px;
  margin: 8px 0 24px;
}
.o2-this-week-section .section-title {
  font-family: var(--fh, 'Montserrat', sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--t0, #ecf0ec);
  margin: 0 0 16px;
}

/* 4-col grid of list items */
.o2-week-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.o2-week-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--s2, #0e150e);
  border: 1px solid rgba(0,200,83,.08);
  border-radius: 6px;
  padding: 9px 10px;
  text-decoration: none;
  transition: background .16s, border-color .16s, transform .25s;
  position: relative;
}
.o2-week-item:hover {
  background: var(--s3, #131b13);
  border-color: rgba(0,200,83,.28);
  transform: translateY(-2px);
}
.o2-week-thumb {
  flex-shrink: 0;
  width: 48px; height: 66px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--s3, #131b13);
}
.o2-week-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.o2-week-info { flex: 1; min-width: 0; }
.o2-week-year {
  font-size: 10px;
  color: var(--accent, #00c853);
  font-weight: 600;
  margin-bottom: 2px;
}
.o2-week-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--t0, #ecf0ec);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.o2-week-type {
  font-size: 10px;
  color: var(--t2, #526052);
}
.o2-week-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold, #f5a623);
  background: rgba(245,166,35,.10);
  border: 1px solid rgba(245,166,35,.18);
  border-radius: 4px;
  padding: 2px 6px;
  align-self: flex-start;
}

/* ─────────────────────────────────────────────────────────────────────
   5. RESPONSIVE — Homepage sections
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .o2-week-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .o2-top10-section,
  .o2-this-week-section  { padding: 14px 12px; }
  .o2-top10-card         { flex: 0 0 98px; }
  .o2-week-grid          { grid-template-columns: repeat(2, 1fr); }
  .o2-scroll-arrow       { display: none; }
  .o2-top10-title,
  .o2-this-week-section .section-title { font-size: 15px; }
}
@media (max-width: 480px) {
  .o2-week-grid  { grid-template-columns: 1fr; }
  .o2-top10-card { flex: 0 0 88px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   NAIJAMOVIES PRO v5 — COMPLETE LAYOUT FIX
   Covers: readers widget (single.php) + homepage o2 sections
   Brand: --accent:#00c853  backgrounds: --s0 to --s5  gold: --gold:#f5a623
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. READERS WIDGET  (.np-readers-widget)
   ───────────────────────────────────────────────────────────────────── */
.np-readers-widget {
  display: flex !important;
  align-items: stretch !important;
  background: var(--s1, #0a100a) !important;
  border: 1px solid rgba(0,200,83,.14) !important;
  border-left: 3px solid var(--accent, #00c853) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin: 18px 0 20px !important;
  min-height: 80px;
}
.np-readers-panel {
  flex: 1;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  position: relative;
}
.np-readers-panel-live { background: rgba(0,200,83,.04); }
.np-readers-panel-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.np-readers-dot {
  flex-shrink: 0;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  animation: nm-dot-pulse 2s ease-in-out infinite;
}
.np-dot-live  { background: var(--accent, #00c853); box-shadow: 0 0 8px var(--accent, #00c853); }
.np-dot-month { background: var(--blue, #3d8ef8);   box-shadow: 0 0 8px rgba(61,142,248,.6); }
.np-dot-total { background: var(--gold, #f5a623);   box-shadow: 0 0 8px rgba(245,166,35,.6); }
@keyframes nm-dot-pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.55; transform:scale(.82); }
}
.np-readers-panel-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.np-readers-big {
  font-family: var(--fh, 'Montserrat', sans-serif);
  font-size: clamp(18px, 2.4vw, 26px);
  font-weight: 900;
  color: var(--t0, #ecf0ec);
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.np-readers-panel-live .np-readers-big { color: var(--accent, #00c853); }
.np-readers-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--t1, #8a9e8a);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: 1px;
}
.np-readers-sub {
  font-size: 10px;
  color: var(--t2, #526052);
  font-weight: 500;
  margin-top: 1px;
}
.np-readers-sep {
  width: 1px;
  background: rgba(0,200,83,.10);
  align-self: stretch;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .np-readers-widget { flex-direction: column !important; }
  .np-readers-sep { width: auto !important; height: 1px; align-self: auto; }
  .np-readers-panel { padding: 12px 14px; }
  .np-readers-big { font-size: 20px !important; }
}

/* ─────────────────────────────────────────────────────────────────────
   2. HOMEPAGE — Platform label
   ───────────────────────────────────────────────────────────────────── */
.o2-platform-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent, #00c853);
  background: rgba(0,200,83,.08);
  border: 1px solid rgba(0,200,83,.20);
  border-radius: 20px;
  padding: 4px 14px;
  margin: 16px 0 4px;
}
.o2-platform-label::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, #00c853);
  box-shadow: 0 0 6px var(--accent, #00c853);
  animation: nm-dot-pulse 1.8s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────────
   3. TOP 10 SECTION  (.o2-top10-section)
   ───────────────────────────────────────────────────────────────────── */
.o2-top10-section {
  background: var(--s1, #0a100a);
  border: 1px solid rgba(0,200,83,.10);
  border-radius: 10px;
  padding: 20px 18px 16px;
  margin: 8px 0 24px;
}
.o2-top10-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.o2-top10-title {
  font-family: var(--fh, 'Montserrat', sans-serif);
  font-size: 17px;
  font-weight: 800;
  color: var(--t0, #ecf0ec);
  margin: 0;
  letter-spacing: -.01em;
}
.o2-top10-live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent, #00c853);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent, #00c853);
  box-shadow: 0 0 8px var(--accent, #00c853);
  animation: nm-dot-pulse 1.8s ease-in-out infinite;
}
.o2-scroll-wrap { display: flex; align-items: center; gap: 6px; }
.o2-scroll-arrow {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--s3, #131b13);
  border: 1px solid rgba(0,200,83,.18);
  color: var(--accent, #00c853);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s, transform .16s;
}
.o2-scroll-arrow:hover { background: rgba(0,200,83,.16); transform: scale(1.08); }
.o2-top10-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 4px 2px 8px;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,200,83,.25) transparent;
}
.o2-top10-row::-webkit-scrollbar { height: 3px; }
.o2-top10-row::-webkit-scrollbar-thumb { background: rgba(0,200,83,.25); border-radius: 2px; }
.o2-top10-card {
  flex: 0 0 115px;
  background: var(--s2, #0e150e);
  border: 1px solid rgba(0,200,83,.08);
  border-radius: 6px;
  overflow: hidden;
  transition: transform .25s, border-color .16s;
  cursor: pointer;
}
.o2-top10-card:hover { transform: translateY(-4px) scale(1.03); border-color: rgba(0,200,83,.32); }
.o2-top10-card a { display: block; text-decoration: none; color: inherit; }
.o2-top10-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  background: var(--s3, #131b13);
}
.o2-top10-thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.o2-top10-card:hover .o2-top10-thumb img { transform: scale(1.06); }
.o2-rank-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--accent, #00c853);
  color: #000;
  font-size: 10px; font-weight: 900;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: .04em;
  line-height: 1.4;
  z-index: 2;
}
.o2-top10-info { padding: 7px 8px 8px; }
.o2-top10-title-text {
  font-size: 11px; font-weight: 700;
  color: var(--t0, #ecf0ec);
  line-height: 1.3;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.o2-top10-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.type-year { font-size: 9px; color: var(--t2, #526052); font-weight: 500; }
.o2-star { display: flex; align-items: center; gap: 2px; font-size: 9px; font-weight: 700; color: var(--gold, #f5a623); }

/* ─────────────────────────────────────────────────────────────────────
   4. TOP THIS WEEK  (.o2-this-week-section)
   ───────────────────────────────────────────────────────────────────── */
.o2-this-week-section {
  background: var(--s1, #0a100a);
  border: 1px solid rgba(0,200,83,.10);
  border-radius: 10px;
  padding: 20px 18px;
  margin: 8px 0 24px;
}
.o2-this-week-section .section-title {
  font-family: var(--fh, 'Montserrat', sans-serif);
  font-size: 17px; font-weight: 800;
  color: var(--t0, #ecf0ec);
  margin: 0 0 16px;
}
.o2-week-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.o2-week-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--s2, #0e150e);
  border: 1px solid rgba(0,200,83,.08);
  border-radius: 6px;
  padding: 9px 10px;
  text-decoration: none;
  transition: background .16s, border-color .16s, transform .25s;
}
.o2-week-item:hover {
  background: var(--s3, #131b13);
  border-color: rgba(0,200,83,.28);
  transform: translateY(-2px);
}
.o2-week-thumb {
  flex-shrink: 0;
  width: 48px; height: 66px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--s3, #131b13);
}
.o2-week-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.o2-week-info { flex: 1; min-width: 0; }
.o2-week-year { font-size: 10px; color: var(--accent, #00c853); font-weight: 600; margin-bottom: 2px; }
.o2-week-title {
  font-size: 12px; font-weight: 700;
  color: var(--t0, #ecf0ec);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 2px;
}
.o2-week-type { font-size: 10px; color: var(--t2, #526052); }
.o2-week-badge {
  flex-shrink: 0;
  font-size: 11px; font-weight: 800;
  color: var(--gold, #f5a623);
  background: rgba(245,166,35,.10);
  border: 1px solid rgba(245,166,35,.18);
  border-radius: 4px;
  padding: 2px 6px;
  align-self: flex-start;
}

/* ─────────────────────────────────────────────────────────────────────
   5. RESPONSIVE
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .o2-week-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .o2-top10-section, .o2-this-week-section { padding: 14px 12px; }
  .o2-top10-card  { flex: 0 0 98px; }
  .o2-week-grid   { grid-template-columns: repeat(2, 1fr); }
  .o2-scroll-arrow { display: none; }
  .o2-top10-title,
  .o2-this-week-section .section-title { font-size: 15px; }
}
@media (max-width: 480px) {
  .o2-week-grid  { grid-template-columns: 1fr; }
  .o2-top10-card { flex: 0 0 88px; }
}