/*
 * NP12 Jet Black Dark Mode — dark-mode.css
 * Targets every known tagDiv / Newspaper 12 CSS class.
 * All rules use !important to beat the theme's inline-style injections.
 *
 * Palette:
 *   Background  → #000000  (jet black)
 *   Surface     → #0d0d0d  (cards, sidebars)
 *   Elevated    → #1a1a1a  (header, footer, hover states)
 *   Border      → #2a2a2a
 *   Text        → #e8e8e8  (primary)
 *   Text muted  → #999999  (meta, bylines)
 *   Accent      → #ffffff  (titles, links on hover)
 *   Link        → #cccccc
 */

/* =========================================================
   CSS CUSTOM PROPERTIES  — override tagDiv CSS vars if used
   ========================================================= */
body.np12-dark-mode {
    --td-bg-color:          #000000;
    --td-text-color:        #e8e8e8;
    --td-link-color:        #cccccc;
    --td-header-bg:         #0d0d0d;
    --td-footer-bg:         #0d0d0d;
    --td-border-color:      #2a2a2a;
    --td-module-bg:         #0d0d0d;
    background-color:       #000000 !important;
    color:                  #e8e8e8 !important;
}

/* =========================================================
   HTML / BODY  BASE
   ========================================================= */
body.np12-dark-mode,
html body.np12-dark-mode {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
}

/* =========================================================
   TYPOGRAPHY  — headings, paragraphs, spans
   ========================================================= */
body.np12-dark-mode h1,
body.np12-dark-mode h2,
body.np12-dark-mode h3,
body.np12-dark-mode h4,
body.np12-dark-mode h5,
body.np12-dark-mode h6 {
    color: #ffffff !important;
}

body.np12-dark-mode p,
body.np12-dark-mode span,
body.np12-dark-mode li,
body.np12-dark-mode td,
body.np12-dark-mode th,
body.np12-dark-mode label,
body.np12-dark-mode blockquote,
body.np12-dark-mode cite {
    color: #e8e8e8 !important;
}

body.np12-dark-mode a {
    color: #cccccc !important;
}
body.np12-dark-mode a:hover,
body.np12-dark-mode a:focus {
    color: #ffffff !important;
}

/* =========================================================
   MAIN LAYOUT WRAPPERS
   ========================================================= */
body.np12-dark-mode .td-main-content-wrap,
body.np12-dark-mode #td-outer-wrap,
body.np12-dark-mode .td-outer-wrap,
body.np12-dark-mode #td-main-wrap,
body.np12-dark-mode .td-main-wrap,
body.np12-dark-mode .td-container,
body.np12-dark-mode .td-pb-row,
body.np12-dark-mode .td-pb-span,
body.np12-dark-mode .td-pb-span8,
body.np12-dark-mode .td-pb-span4,
body.np12-dark-mode .td-pb-span3,
body.np12-dark-mode .td-pb-span12,
body.np12-dark-mode .td-content-wrap,
body.np12-dark-mode .td_block_wrap,
body.np12-dark-mode .tdb_block_wrap,
body.np12-dark-mode .td-block-row,
body.np12-dark-mode .wpb_row,
body.np12-dark-mode .vc_row {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
}

/* =========================================================
   HEADER  — all variations tagDiv generates
   ========================================================= */
body.np12-dark-mode .td-header-wrap,
body.np12-dark-mode .td-header-style-1,
body.np12-dark-mode .td-header-style-2,
body.np12-dark-mode .td-header-style-3,
body.np12-dark-mode .td-header-style-4,
body.np12-dark-mode .td-header-style-5,
body.np12-dark-mode .td-header-style-6,
body.np12-dark-mode .td-header-style-7,
body.np12-dark-mode .td-header-style-8,
body.np12-dark-mode .td-header-style-9,
body.np12-dark-mode .td-header-style-10,
body.np12-dark-mode .td-header-style-11,
body.np12-dark-mode .td-header-style-12,
body.np12-dark-mode .td-header-top-wrap,
body.np12-dark-mode .td-header-main-menu,
body.np12-dark-mode .td-header-sp-top-widget-area,
body.np12-dark-mode .td-header-sp-logo,
body.np12-dark-mode .td-header-menu-wrap,
body.np12-dark-mode .td-header-menu-wrap-full,
body.np12-dark-mode .td-header-logo-wrap,
body.np12-dark-mode .td-secondary-navigation,
body.np12-dark-mode .tdb_header,
body.np12-dark-mode .tdb_header_logo,
body.np12-dark-mode .tdb_header_menu,
body.np12-dark-mode .tdb_header_search,
body.np12-dark-mode [class*="td-header"],
body.np12-dark-mode [class*="tdb_header"] {
    background-color: #0d0d0d !important;
    border-color:     #2a2a2a !important;
}

body.np12-dark-mode .td-header-wrap *,
body.np12-dark-mode [class*="td-header"] *,
body.np12-dark-mode [class*="tdb_header"] * {
    color:        #e8e8e8 !important;
    border-color: #2a2a2a !important;
}

/* Top bar */
body.np12-dark-mode .td-top-bar-wrap,
body.np12-dark-mode .td_top_bar,
body.np12-dark-mode .top-bar,
body.np12-dark-mode .td-top-bar {
    background-color: #0d0d0d !important;
    border-bottom:    1px solid #2a2a2a !important;
}

/* Sticky header */
body.np12-dark-mode .td-fixed-header,
body.np12-dark-mode .td-header-style-fixed,
body.np12-dark-mode .td-sticky-header,
body.np12-dark-mode .td_affix {
    background-color: #0d0d0d !important;
    box-shadow:       0 2px 8px rgba(0,0,0,0.8) !important;
}

/* =========================================================
   NAVIGATION MENUS
   ========================================================= */
body.np12-dark-mode .sf-menu,
body.np12-dark-mode .sf-menu li,
body.np12-dark-mode .sf-menu > li > a,
body.np12-dark-mode .td-main-menu-logo a,
body.np12-dark-mode .td-main-menu-search,
body.np12-dark-mode nav ul li a,
body.np12-dark-mode .menu-item a {
    background-color: transparent !important;
    color:            #e8e8e8 !important;
}

body.np12-dark-mode .sf-menu li:hover > a,
body.np12-dark-mode .sf-menu li.sfHover > a,
body.np12-dark-mode .sf-menu > li > a:hover {
    color:            #ffffff !important;
    background-color: #1a1a1a !important;
}

/* Dropdown */
body.np12-dark-mode .sf-menu ul,
body.np12-dark-mode .sf-menu .sub-menu,
body.np12-dark-mode .td-sub-menu,
body.np12-dark-mode .mega-menu,
body.np12-dark-mode .td-mega-menu,
body.np12-dark-mode .sf-mega {
    background-color: #0d0d0d !important;
    border:           1px solid #2a2a2a !important;
    box-shadow:       0 4px 16px rgba(0,0,0,0.9) !important;
}

body.np12-dark-mode .sf-menu ul li a,
body.np12-dark-mode .sub-menu li a,
body.np12-dark-mode .td-sub-menu li a {
    background-color: #0d0d0d !important;
    color:            #cccccc !important;
    border-bottom:    1px solid #1a1a1a !important;
}

body.np12-dark-mode .sf-menu ul li a:hover,
body.np12-dark-mode .sub-menu li a:hover {
    background-color: #1a1a1a !important;
    color:            #ffffff !important;
}

/* =========================================================
   BREAKING NEWS / TICKER
   ========================================================= */
body.np12-dark-mode .td-breaking-news-wrap,
body.np12-dark-mode .breaking-news-wrap,
body.np12-dark-mode .td_block_breaking_news,
body.np12-dark-mode .td-ticker-title,
body.np12-dark-mode .td_block_breaking_news .td-breaking-news-inner,
body.np12-dark-mode [class*="breaking"] {
    background-color: #0d0d0d !important;
    border-color:     #2a2a2a !important;
    color:            #e8e8e8 !important;
}

/* =========================================================
   POST / MODULE TILES  (td_module_*, tdb_module_*)
   ========================================================= */
body.np12-dark-mode .td_module_wrap,
body.np12-dark-mode .td-module-container,
body.np12-dark-mode .td-module-meta-info,
body.np12-dark-mode .td-module-title,
body.np12-dark-mode .td-module-title a,
body.np12-dark-mode .td-module-excerpt,
body.np12-dark-mode .td-module-comments,
body.np12-dark-mode [class*="td_module_"],
body.np12-dark-mode [class*="tdb_module_"] {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
}

body.np12-dark-mode .td-module-title a {
    color: #e8e8e8 !important;
}
body.np12-dark-mode .td-module-title a:hover {
    color: #ffffff !important;
}

/* =========================================================
   BLOCKS  (td_block_*, tdb_block_*)
   ========================================================= */
body.np12-dark-mode [class*="td_block_"],
body.np12-dark-mode [class*="tdb_block_"],
body.np12-dark-mode .td_block_inner,
body.np12-dark-mode .td_block_title,
body.np12-dark-mode .td_block_title .block-title,
body.np12-dark-mode .tdm-block,
body.np12-dark-mode .tdb_single_block {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
    border-color:     #2a2a2a !important;
}

body.np12-dark-mode .td_block_title .td-block-title,
body.np12-dark-mode .td-block-title-wrap,
body.np12-dark-mode .td-block-title-wrap .td-wrapper-pulldown-filter,
body.np12-dark-mode .block-title {
    color:        #ffffff !important;
    border-color: #2a2a2a !important;
}

/* Flex blocks */
body.np12-dark-mode .td_flex_block,
body.np12-dark-mode .tdb_flex_block,
body.np12-dark-mode [class*="td_flex_block"],
body.np12-dark-mode [class*="tdb_flex_block"] {
    background-color: #000000 !important;
}

/* =========================================================
   CATEGORY / TAG LABELS
   ========================================================= */
body.np12-dark-mode .td-post-category,
body.np12-dark-mode .td-category,
body.np12-dark-mode .td-category a,
body.np12-dark-mode .td-tags a,
body.np12-dark-mode .post-categories a,
body.np12-dark-mode .td-post-category a {
    background-color: #1a1a1a !important;
    color:            #cccccc !important;
    border-color:     #2a2a2a !important;
}

/* =========================================================
   META INFO  (author, date, views)
   ========================================================= */
body.np12-dark-mode .td-post-date,
body.np12-dark-mode .td-post-author-name,
body.np12-dark-mode .td-post-author-name a,
body.np12-dark-mode .td-post-views,
body.np12-dark-mode .td-post-comments,
body.np12-dark-mode .entry-date,
body.np12-dark-mode .author,
body.np12-dark-mode .byline,
body.np12-dark-mode .td-editor-date,
body.np12-dark-mode .td-author-date,
body.np12-dark-mode .td-info-block,
body.np12-dark-mode time {
    color: #999999 !important;
}

/* =========================================================
   SINGLE POST PAGE
   ========================================================= */
body.np12-dark-mode .post,
body.np12-dark-mode .td-post-content,
body.np12-dark-mode .td-post-header,
body.np12-dark-mode .td-post-title-container,
body.np12-dark-mode .tdb_single,
body.np12-dark-mode .tdb_single_content,
body.np12-dark-mode .tdb_single_title,
body.np12-dark-mode article,
body.np12-dark-mode .entry-content,
body.np12-dark-mode .td-page-content {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
}

body.np12-dark-mode .td-post-content p,
body.np12-dark-mode .entry-content p,
body.np12-dark-mode .td-page-content p {
    color: #e8e8e8 !important;
}

body.np12-dark-mode .td-post-content a,
body.np12-dark-mode .entry-content a {
    color: #aaaaaa !important;
    text-decoration: underline !important;
}
body.np12-dark-mode .td-post-content a:hover,
body.np12-dark-mode .entry-content a:hover {
    color: #ffffff !important;
}

/* Post title */
body.np12-dark-mode .entry-title,
body.np12-dark-mode .td-post-title h1,
body.np12-dark-mode .td-post-header .entry-title,
body.np12-dark-mode .tdb_single_title h1 {
    color: #ffffff !important;
}

/* Author box */
body.np12-dark-mode .td-author-box,
body.np12-dark-mode .td-author-info,
body.np12-dark-mode .tdb_single_author {
    background-color: #0d0d0d !important;
    border:           1px solid #2a2a2a !important;
    color:            #e8e8e8 !important;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
body.np12-dark-mode .td-pb-span4 aside,
body.np12-dark-mode .td-sidebar,
body.np12-dark-mode .widget,
body.np12-dark-mode .widget-title,
body.np12-dark-mode .widgettitle,
body.np12-dark-mode aside.widget-area,
body.np12-dark-mode .widget_block {
    background-color: #0d0d0d !important;
    color:            #e8e8e8 !important;
    border-color:     #2a2a2a !important;
}

body.np12-dark-mode .widget-title,
body.np12-dark-mode .widgettitle,
body.np12-dark-mode .widget .block-title {
    color:        #ffffff !important;
    border-color: #2a2a2a !important;
}

body.np12-dark-mode .widget ul li,
body.np12-dark-mode .widget ol li {
    border-color: #1a1a1a !important;
    color:        #cccccc !important;
}
body.np12-dark-mode .widget ul li a,
body.np12-dark-mode .widget ol li a {
    color: #cccccc !important;
}

/* =========================================================
   FOOTER
   ========================================================= */
body.np12-dark-mode .td-footer-wrapper,
body.np12-dark-mode .td_footer_wrapper,
body.np12-dark-mode .tdb_footer,
body.np12-dark-mode [class*="td-footer"],
body.np12-dark-mode [class*="tdb_footer"],
body.np12-dark-mode .footer-container,
body.np12-dark-mode footer {
    background-color: #0d0d0d !important;
    border-top:       1px solid #2a2a2a !important;
    color:            #999999 !important;
}

body.np12-dark-mode .td-footer-wrapper *,
body.np12-dark-mode [class*="td-footer"] *,
body.np12-dark-mode [class*="tdb_footer"] *,
body.np12-dark-mode footer * {
    color:        #999999 !important;
    border-color: #2a2a2a !important;
}

body.np12-dark-mode .td-footer-wrapper a,
body.np12-dark-mode footer a {
    color: #888888 !important;
}
body.np12-dark-mode .td-footer-wrapper a:hover,
body.np12-dark-mode footer a:hover {
    color: #ffffff !important;
}

/* =========================================================
   FORMS, INPUTS, SEARCH
   ========================================================= */
body.np12-dark-mode input,
body.np12-dark-mode input[type="text"],
body.np12-dark-mode input[type="email"],
body.np12-dark-mode input[type="search"],
body.np12-dark-mode input[type="password"],
body.np12-dark-mode input[type="url"],
body.np12-dark-mode textarea,
body.np12-dark-mode select,
body.np12-dark-mode .td-search-input,
body.np12-dark-mode .td-search-field,
body.np12-dark-mode .td-search-wrap input {
    background-color: #1a1a1a !important;
    color:            #e8e8e8 !important;
    border:           1px solid #2a2a2a !important;
}

body.np12-dark-mode input::placeholder,
body.np12-dark-mode textarea::placeholder {
    color: #666666 !important;
}

body.np12-dark-mode input:focus,
body.np12-dark-mode textarea:focus,
body.np12-dark-mode select:focus {
    border-color: #555555 !important;
    outline:      none !important;
}

/* Search popup */
body.np12-dark-mode .td-search-background,
body.np12-dark-mode .td-search-wrap,
body.np12-dark-mode .td-search-close,
body.np12-dark-mode .td-full-screen-header-style-search {
    background-color: rgba(0, 0, 0, 0.98) !important;
}

/* =========================================================
   BUTTONS
   ========================================================= */
body.np12-dark-mode button,
body.np12-dark-mode .td-load-more-button,
body.np12-dark-mode .td-read-more a,
body.np12-dark-mode .td_block_ajax_pagination .pages a,
body.np12-dark-mode .page-nav a,
body.np12-dark-mode .page-nav span {
    background-color: #1a1a1a !important;
    color:            #e8e8e8 !important;
    border:           1px solid #2a2a2a !important;
}

body.np12-dark-mode button:hover,
body.np12-dark-mode .td-load-more-button:hover,
body.np12-dark-mode .td-read-more a:hover {
    background-color: #2a2a2a !important;
    color:            #ffffff !important;
}

/* =========================================================
   PAGINATION
   ========================================================= */
body.np12-dark-mode .td_block_inner .td-load-more-wrap,
body.np12-dark-mode .page-numbers,
body.np12-dark-mode .page-numbers a,
body.np12-dark-mode .nav-links a,
body.np12-dark-mode .pagination a,
body.np12-dark-mode .td-page-numbers {
    background-color: #0d0d0d !important;
    color:            #cccccc !important;
    border-color:     #2a2a2a !important;
}

body.np12-dark-mode .page-numbers.current,
body.np12-dark-mode .td-page-numbers .current {
    background-color: #1a1a1a !important;
    color:            #ffffff !important;
}

/* =========================================================
   TABLES
   ========================================================= */
body.np12-dark-mode table,
body.np12-dark-mode table th,
body.np12-dark-mode table td {
    background-color: #0d0d0d !important;
    color:            #e8e8e8 !important;
    border-color:     #2a2a2a !important;
}

body.np12-dark-mode table tr:nth-child(even) td {
    background-color: #111111 !important;
}

/* =========================================================
   CODE BLOCKS
   ========================================================= */
body.np12-dark-mode code,
body.np12-dark-mode pre,
body.np12-dark-mode pre code {
    background-color: #111111 !important;
    color:            #cccccc !important;
    border:           1px solid #2a2a2a !important;
}

/* =========================================================
   BLOCKQUOTE
   ========================================================= */
body.np12-dark-mode blockquote {
    background-color: #0d0d0d !important;
    border-left:      4px solid #444444 !important;
    color:            #cccccc !important;
}

/* =========================================================
   COMMENTS
   ========================================================= */
body.np12-dark-mode #comments,
body.np12-dark-mode .comment-list,
body.np12-dark-mode .comment,
body.np12-dark-mode .comment-body,
body.np12-dark-mode .comment-meta,
body.np12-dark-mode .comment-content,
body.np12-dark-mode .comment-form,
body.np12-dark-mode .commentlist,
body.np12-dark-mode #respond,
body.np12-dark-mode .td-post-comments {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
    border-color:     #2a2a2a !important;
}

body.np12-dark-mode .comment-list li,
body.np12-dark-mode .comment-list .comment {
    border-color: #1a1a1a !important;
}

/* =========================================================
   TAGDIV COMPOSER ROWS / SECTIONS
   The theme injects inline background-color per row.
   These rules override the most common patterns.
   ========================================================= */
body.np12-dark-mode .vc_row[style*="background"],
body.np12-dark-mode .td-pb-row[style*="background"],
body.np12-dark-mode .wpb_row[style*="background"],
body.np12-dark-mode section[style*="background"] {
    background-color: #000000 !important;
    background-image: none !important;
}

/* Specifically target the "Light" skin sections tagDiv creates */
body.np12-dark-mode .tds-skin-light,
body.np12-dark-mode .tds-skin--light,
body.np12-dark-mode [class*="skin-light"],
body.np12-dark-mode [class*="td_skin_white"],
body.np12-dark-mode [class*="td-skin-white"] {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
}

/* =========================================================
   SCROLL-TO-TOP BUTTON
   ========================================================= */
body.np12-dark-mode #td-scroll-to-top,
body.np12-dark-mode .td-scroll-up {
    background-color: #1a1a1a !important;
    color:            #ffffff !important;
    border:           1px solid #333333 !important;
}

/* =========================================================
   MODALS / POPUPS  (login, sign-in)
   ========================================================= */
body.np12-dark-mode .td-modal-overlay,
body.np12-dark-mode .td-modal-wrap,
body.np12-dark-mode .td-modal,
body.np12-dark-mode .td_block_modal,
body.np12-dark-mode .td-signin-modal {
    background-color: #0d0d0d !important;
    color:            #e8e8e8 !important;
    border-color:     #2a2a2a !important;
}

/* =========================================================
   BREADCRUMBS
   ========================================================= */
body.np12-dark-mode .td-breadcrumb,
body.np12-dark-mode .breadcrumb,
body.np12-dark-mode .td-crumb-container {
    color:        #999999 !important;
    border-color: #2a2a2a !important;
}

body.np12-dark-mode .breadcrumb a,
body.np12-dark-mode .td-breadcrumb a {
    color: #888888 !important;
}

/* =========================================================
   RELATED POSTS
   ========================================================= */
body.np12-dark-mode .td-related-wrap,
body.np12-dark-mode .td-related-title,
body.np12-dark-mode .td_block_related_posts,
body.np12-dark-mode .related-posts {
    background-color: #000000 !important;
    border-color:     #2a2a2a !important;
    color:            #e8e8e8 !important;
}

/* =========================================================
   SOCIAL ICONS
   ========================================================= */
body.np12-dark-mode .td-social-sharing,
body.np12-dark-mode .td-post-sharing,
body.np12-dark-mode .td-social-buttons,
body.np12-dark-mode [class*="td-social"] {
    background-color: transparent !important;
}

/* =========================================================
   TAGS  (post tags list)
   ========================================================= */
body.np12-dark-mode .td-post-small-box,
body.np12-dark-mode .td-tags-and-cats,
body.np12-dark-mode .post-tags a,
body.np12-dark-mode .tags a {
    background-color: #111111 !important;
    color:            #cccccc !important;
    border:           1px solid #2a2a2a !important;
}

/* =========================================================
   WOOCOMMERCE (if active)
   ========================================================= */
body.np12-dark-mode .woocommerce,
body.np12-dark-mode .woocommerce-page,
body.np12-dark-mode .woocommerce .products .product,
body.np12-dark-mode .woocommerce ul.products li.product {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
    border-color:     #2a2a2a !important;
}

body.np12-dark-mode .woocommerce .price,
body.np12-dark-mode .woocommerce .amount {
    color: #ffffff !important;
}

/* =========================================================
   NEWSPAPER 12 SPECIFIC — Cloud Library / tdb_ components
   ========================================================= */
body.np12-dark-mode [class^="tdb_"],
body.np12-dark-mode [class*=" tdb_"] {
    background-color: #000000 !important;
    color:            #e8e8e8 !important;
    border-color:     #2a2a2a !important;
}

/* Card-style tdb blocks */
body.np12-dark-mode .tdb_module_wrap,
body.np12-dark-mode .tdb-module-container,
body.np12-dark-mode .tdb-module-meta-info {
    background-color: #0d0d0d !important;
}

/* Category pages tdb header */
body.np12-dark-mode .tdb_category_header,
body.np12-dark-mode .tdb_page_title {
    background-color: #0d0d0d !important;
    color:            #ffffff !important;
}

/* =========================================================
   HR / DIVIDERS
   ========================================================= */
body.np12-dark-mode hr,
body.np12-dark-mode .td-divider {
    border-color:     #2a2a2a !important;
    background-color: #2a2a2a !important;
}

/* =========================================================
   OVERRIDE INLINE STYLE BACKGROUNDS
   The JS handles most of these, but as a CSS fallback
   we blank inline-style backgrounds on key containers.
   ========================================================= */

/* Any element tagDiv forces white/light inline */
body.np12-dark-mode [style*="background-color: #fff"],
body.np12-dark-mode [style*="background-color:#fff"],
body.np12-dark-mode [style*="background-color: white"],
body.np12-dark-mode [style*="background-color: rgb(255, 255, 255)"],
body.np12-dark-mode [style*="background-color:rgb(255,255,255)"],
body.np12-dark-mode [style*="background-color: #ffffff"],
body.np12-dark-mode [style*="background-color:#ffffff"],
body.np12-dark-mode [style*="background-color: #f9f9f9"],
body.np12-dark-mode [style*="background-color: #f8f8f8"],
body.np12-dark-mode [style*="background-color: #f5f5f5"],
body.np12-dark-mode [style*="background-color: #eeeeee"],
body.np12-dark-mode [style*="background-color: #e9e9e9"] {
    background-color: #000000 !important;
}

/* Light text overrides */
body.np12-dark-mode [style*="color: #000"],
body.np12-dark-mode [style*="color:#000"],
body.np12-dark-mode [style*="color: black"],
body.np12-dark-mode [style*="color: #111"],
body.np12-dark-mode [style*="color: #222"],
body.np12-dark-mode [style*="color: #333"],
body.np12-dark-mode [style*="color: #444"] {
    color: #e8e8e8 !important;
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
body.np12-dark-mode ::-webkit-scrollbar {
    width:  8px;
    height: 8px;
}
body.np12-dark-mode ::-webkit-scrollbar-track {
    background: #000000;
}
body.np12-dark-mode ::-webkit-scrollbar-thumb {
    background:    #333333;
    border-radius: 4px;
}
body.np12-dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #555555;
}

/* =========================================================
   IMAGES  — slight darkening to reduce eye-strain
   ========================================================= */
body.np12-dark-mode img:not([src*=".svg"]) {
    filter: brightness(0.92) contrast(1.02);
}

/* =========================================================
   SELECTION
   ========================================================= */
body.np12-dark-mode ::selection {
    background-color: #333333;
    color:            #ffffff;
}

/* =========================================================
   EXCEPTION — Custom-colored TagDiv buttons (e.g. LIVE SHOW)
   The theme sets background-color and hover via .tdi_XXX
   inline <style> scoped rules. The broad button override
   above stomps those. We carve them back out here.
   ========================================================= */

/* tdm-btn / tds-button: preserve whatever the theme set */
body.np12-dark-mode .tdm-btn,
body.np12-dark-mode .tds-button1,
body.np12-dark-mode .tds-button2,
body.np12-dark-mode .tds-button3,
body.np12-dark-mode .tds-button4,
body.np12-dark-mode .tds-button5,
body.np12-dark-mode .tds-button6,
body.np12-dark-mode [class*="tds-button"],
body.np12-dark-mode .tdm-block-button a,
body.np12-dark-mode .tdm_block_button a {
    background-color: revert !important;
    color:            revert !important;
    border:           revert !important;
}

/* But make sure the text inside them stays readable */
body.np12-dark-mode .tdm-btn .tdm-btn-text,
body.np12-dark-mode [class*="tds-button"] .tdm-btn-text,
body.np12-dark-mode .tdm-block-button a span {
    color: inherit !important;
}

/* Also un-stomp the column wrapper (.td-pb-span3) that contains it —
   only when it's inside the header, so we don't break page layouts.
   The issue: .td-pb-span3 gets background:#000 which shows as a box
   around the button in the header. */
body.np12-dark-mode .td-header-wrap .td-pb-span3,
body.np12-dark-mode [class*="td-header"] .td-pb-span3,
body.np12-dark-mode [class*="tdb_header"] .td-pb-span3,
body.np12-dark-mode .td-header-wrap .vc_column_container,
body.np12-dark-mode [class*="td-header"] .vc_column_container,
body.np12-dark-mode [class*="tdb_header"] .vc_column_container,
body.np12-dark-mode .td-header-wrap .wpb_column,
body.np12-dark-mode [class*="td-header"] .wpb_column,
body.np12-dark-mode [class*="tdb_header"] .wpb_column {
    background-color: transparent !important;
}