/* =========================================================
   CI PAGES: Blog / Market / Events / Groups / Pages / Watch
   Phase 7a of the Obsidian & Emerald redesign.

   Strategy: .wow_content / .wo_page_hdng / .tag_page_title / .page-margin
   are WoWonder's own generic "content card" classes, reused as-is by
   dozens of page types (blog listing/article, market products, events,
   groups, pages, and more) -- they were hardcoded to a white background
   with no dark-theme support at all. Restyling these few shared classes
   with the existing var(--ci-*) tokens uplifts every page built on them
   at once, instead of hand-restyling each page's markup individually.
   Per-page-type card variants (blog card, product card, group/event
   card) get their own scoped rules below that. No markup changed
   anywhere in this file's scope -- styling only, every real
   feature/AJAX action/form is untouched. */

.wow_content, .wow_sett_content {
  background-color: var(--ci-surface) !important;
  box-shadow: none !important;
  border: 1px solid var(--ci-line) !important;
  border-radius: var(--ci-r-lg) !important;
  color: var(--ci-text-2);
}
.wow_content.negg_padd { border-radius: var(--ci-r-lg) !important; }

.tag_page_title, h2.tag_page_title, h1.tag_page_title {
  color: var(--ci-bone) !important;
  font-family: var(--ci-font-display);
  font-weight: 600;
}

.wo_page_hdng {
  border-bottom: 1px solid var(--ci-line) !important;
  color: var(--ci-bone);
  font-weight: 700;
}
.wo_page_hdng span { background: var(--ci-green) !important; color: var(--ci-on-green) !important; }

/* Blog category pill collapse + list */
.wow_blog_cats { display: flex; flex-wrap: wrap; gap: 8px; }
.wow_blog_cats > a {
  padding: 6px 14px; border-radius: var(--ci-r-pill); font-size: 13px; font-weight: 600;
  background: var(--ci-surface-2); color: var(--ci-text-2); border: 1px solid var(--ci-line);
}
.wow_blog_cats > a.active { background: var(--ci-green) !important; color: var(--ci-on-green) !important; border-color: transparent; }

.search-blog input, #search-blog-input, #product-text {
  background: var(--ci-surface) !important; color: var(--ci-bone) !important;
  border: 1px solid var(--ci-line) !important; border-radius: var(--ci-r-md) !important;
}
.search-blog input::placeholder, #product-text::placeholder { color: var(--ci-text-5) !important; }

/* Blog article card (blog/includes/card-list.phtml) */
.tag_main_blog { position: relative; border-radius: var(--ci-r-lg); overflow: hidden; }
.tag_main_blog .postCategory {
  background: var(--ci-green) !important; color: var(--ci-on-green) !important;
  font-weight: 700; border-radius: var(--ci-r-pill);
}
.tag_main_blog .info { background: var(--ci-surface); }
.tag_main_blog .art-title a { color: var(--ci-bone) !important; font-family: var(--ci-font-display); }
.tag_main_blog .postMeta--author-text, .tag_main_blog .postMeta--author-text a { color: var(--ci-text-4) !important; }

/* Market product card (products/products-list.phtml) */
.product_main { position: relative; }
.mkt-badge {
  border-radius: var(--ci-r-pill); font-weight: 700; font-size: 11px; letter-spacing: .02em;
}
.mkt-badge-sponsored, .mkt-badge-featured { background: var(--ci-surface-2); color: var(--ci-text-2); }
.mkt-badge-deal { background: var(--ci-danger); color: #fff; }
.product_info h2 a { color: var(--ci-bone) !important; }
.mkt-price-row b { color: var(--ci-green-text) !important; font-family: var(--ci-font-display); }
.mkt-price-was { color: var(--ci-text-5); text-decoration: line-through; }
.mkt-rating, .mkt-location, .mkt-seller-name { color: var(--ci-text-4) !important; }
.mkt-save-btn { background: var(--ci-surface); color: var(--ci-text-3); border-radius: 50%; }
.mkt-save-btn.active { color: var(--ci-green) !important; }

/* Group / Page / Event cards -- share .wow_content, only need their
   inner text/meta colors touched since the card shell is covered above. */
.wow_my_groups_info .page_title a, .events-list-name a { color: var(--ci-bone) !important; }
.wow_my_groups_info p, .event-l-info span, .event-l-btns { color: var(--ci-text-4) !important; }

/* Page/Group horizontal suggestion row (page/pages-list.phtml and
   similar "author-block" list items used in several sidebars) */
.author-block .text h3 a { color: var(--ci-bone) !important; }
.author-block .text p { color: var(--ci-text-4) !important; }

/* Load-more buttons, empty states -- shared across every listing page */
.load-more .btn, .empty_state { color: var(--ci-text-3); }
.empty_state svg path[fill="#e3f8fa"] { fill: var(--ci-surface-2); }
.empty_state svg path[fill="#26c6da"] { fill: var(--ci-text-4); }