/**
 * BusinessMunch — ads.css
 * Complete Ad Placement System — All Devices
 * ─────────────────────────────────────────────────────────
 * Covers: Mobile (≤480), Tablet (481–1024), Desktop (1025–1279),
 *         Large Desktop (1280–1599), XL (1600+)
 * Networks: AdSense, GAM, Ezoic, Media.net, and any custom code
 * CLS prevention: all containers have explicit min-height reservations
 */

/* ══════════════════════════════════════════════════════════════════
   1. BASE VISIBILITY SYSTEM
   ica-mobile  → mobile only  (≤640px)
   ica-tablet  → tablet only  (641–1024px)
   ica-desktop → desktop only (1025px+)
   These override each other at breakpoints.
   ══════════════════════════════════════════════════════════════════ */

.ica-mobile  { display: none !important; }
.ica-tablet  { display: none !important; }
.ica-desktop { display: block !important; }

@media (min-width: 641px) and (max-width: 1024px) {
  .ica-desktop { display: none !important; }
  .ica-tablet  { display: block !important; }
  .ica-mobile  { display: none !important; }
}

@media (max-width: 640px) {
  .ica-desktop { display: none !important; }
  .ica-tablet  { display: none !important; }
  .ica-mobile  { display: block !important; }
}

/* ══════════════════════════════════════════════════════════════════
   2. GLOBAL AD CONTAINER — shared base
   ══════════════════════════════════════════════════════════════════ */

.bm-ad-unit {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  /* Prevent layout shift when ad loads */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Empty-state hiding — prevents blank space when no ad code is set */
.bm-ad-unit:empty,
.bm-ad-unit:has(.bm-ad-live:empty) {
  display: none !important;
}

.bm-ad-live:empty { display: none !important; }

/* Hide ad unit when AdSense/network injects a hidden ins (unfilled slot) */
.bm-ad-unit:has(.bm-ad-live ins[style*="display: none"]),
.bm-ad-unit:has(.bm-ad-live ins[style*="display:none"]) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.in-content-ad:has(.bm-ad-live ins[style*="display: none"]),
.in-content-ad:has(.bm-ad-live ins[style*="display:none"]) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Standard "Advertisement" label above every ad */
.bm-ad-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #b0b5c3;
  text-align: center;
  margin-bottom: 6px;
  display: block;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════════
   3. LEADERBOARD / BANNER ADS
   — Appear at page top, below nav, or between sections
   ══════════════════════════════════════════════════════════════════ */

/* Desktop Leaderboard — 728×90 */
.bm-ad-leaderboard {
  width: 100%;
  max-width: var(--max, 1120px);
  margin: 20px auto;
  padding: 10px 24px;
  box-sizing: border-box;
  text-align: center;
  background: #f8f9fb;
  border-top: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
  /* CLS fix: reserve space before ad loads */
  min-height: 110px;
}

.bm-ad-leaderboard .bm-ad-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  /* Prevent 728px ad from overflowing on smaller desktops */
  max-width: 728px;
  margin: 0 auto;
  overflow: hidden;
}

/* Article-page top leaderboard */
.bm-ad-leaderboard--article {
  margin: 0 0 20px;
  padding: 12px 0;
  border-radius: 0;
  max-width: 100%;
}

/* Large billboard — 970×90 or 970×250 */
.bm-ad-billboard {
  width: 100%;
  max-width: var(--max, 1120px);
  margin: 24px auto;
  padding: 12px 24px;
  text-align: center;
  background: #f8f9fb;
  border-top: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
  min-height: 110px;
  box-sizing: border-box;
}

.bm-ad-billboard .bm-ad-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  max-width: 970px;
  margin: 0 auto;
  overflow: hidden;
}

@media (max-width: 1024px) {
  .bm-ad-leaderboard .bm-ad-inner,
  .bm-ad-billboard .bm-ad-inner {
    max-width: 728px;
  }
  .bm-ad-leaderboard,
  .bm-ad-billboard {
    min-height: 110px;
    padding: 10px 20px;
  }
}

@media (max-width: 640px) {
  /* Leaderboard not shown on mobile — replaced by mobile banner */
  .bm-ad-leaderboard,
  .bm-ad-billboard {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   4. MOBILE BANNER ADS
   — 320×50, 320×100 — shown only on ≤640px
   ══════════════════════════════════════════════════════════════════ */

.bm-ad-mobile-banner {
  display: none; /* shown via ica-mobile class */
  width: 100%;
  max-width: 360px;
  margin: 12px auto;
  text-align: center;
  /* CLS reserve — 50px banner */
  min-height: 62px;
  box-sizing: border-box;
}

.bm-ad-mobile-banner--large {
  /* 320×100 banner */
  min-height: 112px;
  max-width: 360px;
}

/* Anchor / sticky bottom banner — 320×50 */
.bm-ad-anchor {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.12);
  text-align: center;
  padding: 4px 0 0;
  display: none; /* enabled via JS after load */
  border-top: 1px solid #e0e3ea;
  /* space for tab bar on iOS */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bm-ad-anchor .bm-ad-close {
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 16px;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.bm-ad-anchor.active { display: block; }

/* Prevent anchor ad from covering content — add bottom padding to body */
body.has-anchor-ad {
  padding-bottom: 64px;
}

@media (max-width: 640px) {
  .bm-ad-mobile-banner { display: flex; flex-direction: column; align-items: center; }
  .bm-ad-anchor.active { display: block; }
}

/* ══════════════════════════════════════════════════════════════════
   5. RECTANGLE / BOX ADS — 300×250, 336×280, 300×600
   — Used in sidebar, in-content, and homepage
   ══════════════════════════════════════════════════════════════════ */

.bm-ad-rectangle {
  width: 100%;
  max-width: 336px;
  margin: 0 auto;
  text-align: center;
  /* CLS reserve — medium rectangle */
  min-height: 262px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bm-ad-rectangle--300 {
  max-width: 300px;
  min-height: 262px;
}

/* Half-page ad — 300×600 */
.bm-ad-halfpage {
  width: 100%;
  max-width: 300px;
  text-align: center;
  min-height: 612px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ══════════════════════════════════════════════════════════════════
   6. SIDEBAR AD CONTAINERS
   ══════════════════════════════════════════════════════════════════ */

.bm-sidebar-ad-wrap {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Sidebar 300×250 slot */
.bm-sidebar-ad-250 {
  width: 100%;
  max-width: 300px;
  min-height: 262px;
  background: #f8f9fb;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #eceef2;
}

/* Sidebar 300×600 slot */
.bm-sidebar-ad-600 {
  width: 100%;
  max-width: 300px;
  min-height: 612px;
  background: #f8f9fb;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #eceef2;
  /* Sticky on desktop while reading */
  position: sticky;
  top: 100px;
}

/* Sidebar on tablet — static, not sticky */
@media (max-width: 1024px) {
  .bm-sidebar-ad-600 {
    position: static;
    min-height: 312px; /* 300×300 fallback on tablet */
  }
}

/* Sidebar hidden on mobile — replaced by in-content ads */
@media (max-width: 768px) {
  .bm-sidebar-ad-wrap,
  .bm-sidebar-ad-250,
  .bm-sidebar-ad-600 {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   7. IN-CONTENT ADS
   — Injected between article paragraphs
   ══════════════════════════════════════════════════════════════════ */

.in-content-ad {
  width: 100%;
  margin: 32px 0;
  padding: 14px 0;
  background: #f7f8fa;
  border-top: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.in-content-ad-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #c0c5d8;
  text-align: center;
  margin-bottom: 8px;
}

/* Desktop in-content: 336×280 or 728×90 */
.in-content-ad.ica-desktop {
  min-height: 308px; /* 336×280 + label space */
}

/* Tablet in-content: 336×280 */
.in-content-ad.ica-tablet {
  min-height: 308px;
}

/* Mobile in-content: 300×250 */
.in-content-ad.ica-mobile {
  min-height: 270px; /* 300×250 + label */
  max-width: 100%;
}

/* Prevent ad overflow on all devices */
.in-content-ad ins,
.in-content-ad iframe,
.in-content-ad div[id^="div-gpt-ad"],
.in-content-ad > * {
  max-width: 100% !important;
}

/* Empty state — hide container completely */
.in-content-ad:empty,
.in-content-ad:has(.bm-ad-live:empty) {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ══════════════════════════════════════════════════════════════════
   8. HOMEPAGE FEED ADS
   — Appear between category sections on the homepage
   ══════════════════════════════════════════════════════════════════ */

.bm-homepage-feed-ad {
  width: 100%;
  margin: 24px 0;
  padding: 16px 0;
  text-align: center;
  background: #f8f9fb;
  border-top: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bm-homepage-feed-ad:has(.bm-ad-live:empty) { display: none !important; }

/* Desktop feed: 728×90 */
.bm-homepage-feed-ad.ica-desktop { min-height: 110px; }

/* Tablet feed: 728×90 */
.bm-homepage-feed-ad.ica-tablet { min-height: 110px; }

/* Mobile feed: 300×250 */
.bm-homepage-feed-ad.ica-mobile { min-height: 270px; }

/* ══════════════════════════════════════════════════════════════════
   9. RAIL ADS (LARGE DESKTOP ONLY — ≥1280px)
   — Fixed left/right rails: 120×600 or 160×600
   ══════════════════════════════════════════════════════════════════ */

.bm-rail-ad {
  display: none;
  position: fixed;
  top: 160px;
  width: 120px;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.bm-rail-ad--left  { left: auto; }
.bm-rail-ad--right { right: auto; }

.bm-rail-ad .bm-ad-inner {
  width: 120px;
  min-height: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* 1280–1439px: 120×600 rails */
@media (min-width: 1280px) and (max-width: 1439px) {
  .bm-rail-ad { display: flex; width: 120px; }
  .bm-rail-ad--left  { left: calc(50% - 560px - 132px); }
  .bm-rail-ad--right { right: calc(50% - 560px - 132px); }
  .bm-rail-ad .bm-ad-inner { min-height: 600px; }
}

/* 1440–1599px: 120×600 rails */
@media (min-width: 1440px) and (max-width: 1599px) {
  .bm-rail-ad { display: flex; width: 120px; }
  .bm-rail-ad--left  { left: calc(50% - 610px - 132px); }
  .bm-rail-ad--right { right: calc(50% - 610px - 132px); }
}

/* 1600px+: 160×600 rails */
@media (min-width: 1600px) {
  .bm-rail-ad { display: flex; width: 160px; }
  .bm-rail-ad--left  { left: calc(50% - 660px - 180px); }
  .bm-rail-ad--right { right: calc(50% - 660px - 180px); }
  .bm-rail-ad .bm-ad-inner { width: 160px; min-height: 600px; }
}

/* ══════════════════════════════════════════════════════════════════
   10. PRE-FOOTER AD
   ══════════════════════════════════════════════════════════════════ */

.bm-ad-prefooter {
  width: 100%;
  max-width: var(--max, 1120px);
  margin: 32px auto 0;
  padding: 16px 24px;
  text-align: center;
  background: #f8f9fb;
  border-top: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Desktop: 728×90 */
.bm-ad-prefooter.ica-desktop { min-height: 110px; }
/* Tablet: 468×60 or 728×90 */
.bm-ad-prefooter.ica-tablet  { min-height: 80px; }
/* Mobile: 320×50 */
.bm-ad-prefooter.ica-mobile  { min-height: 62px; }

.bm-ad-prefooter:has(.bm-ad-live:empty) { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   11. MULTIPLEX / NATIVE ADS
   — 1200×300 on desktop, fluid on mobile
   ══════════════════════════════════════════════════════════════════ */

.bm-ad-multiplex {
  width: 100%;
  margin: 24px 0;
  padding: 14px 0;
  text-align: center;
  min-height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bm-ad-multiplex .bm-ad-inner {
  width: 100%;
  max-width: 1200px;
  min-height: 280px;
  display: flex;
  justify-content: center;
}

@media (max-width: 768px) {
  .bm-ad-multiplex { min-height: 200px; }
  .bm-ad-multiplex .bm-ad-inner { min-height: 180px; }
}

/* ══════════════════════════════════════════════════════════════════
   12. CATEGORY PAGE AD SLOTS
   ══════════════════════════════════════════════════════════════════ */

.bm-cat-ad-top {
  width: 100%;
  margin: 16px 0 24px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Desktop: 728×90 */
.bm-cat-ad-top.ica-desktop { min-height: 110px; }
/* Tablet: 728×90 */
.bm-cat-ad-top.ica-tablet  { min-height: 110px; }
/* Mobile: 320×50 */
.bm-cat-ad-top.ica-mobile  { min-height: 62px; }

.bm-cat-ad-inline {
  width: 100%;
  margin: 24px 0;
  padding: 14px 0;
  text-align: center;
  background: #f7f8fa;
  border-top: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Desktop: 300×250 */
.bm-cat-ad-inline.ica-desktop { min-height: 270px; }
/* Mobile: 300×250 */
.bm-cat-ad-inline.ica-mobile  { min-height: 270px; }

.bm-cat-ad-inline:has(.bm-ad-live:empty) { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   13. INTERSTITIAL / OVERLAY AD
   — Full-screen overlay, triggered after scroll threshold
   ══════════════════════════════════════════════════════════════════ */

.bm-ad-interstitial {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99000;
  background: rgba(0,0,0,0.7);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
}

.bm-ad-interstitial.active { display: flex; }

.bm-ad-interstitial-box {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-width: 340px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
  overflow: hidden;
  text-align: center;
}

.bm-ad-interstitial-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f0f0f0;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  font-weight: 700;
  color: #555;
}

.bm-ad-interstitial-timer {
  font-size: 11px;
  color: #aaa;
  margin-bottom: 10px;
  text-align: right;
}

/* ══════════════════════════════════════════════════════════════════
   14. OVERFLOW PREVENTION — Global Safeguards
   Prevents ANY ad from breaking out of its container
   ══════════════════════════════════════════════════════════════════ */

/* Target all common ad iframe / ins containers */
.bm-ad-unit ins.adsbygoogle,
.bm-ad-unit iframe,
.bm-ad-unit > div,
.in-content-ad ins.adsbygoogle,
.in-content-ad iframe,
.bm-sidebar-ad-250 ins.adsbygoogle,
.bm-sidebar-ad-600 ins.adsbygoogle,
.bm-ad-leaderboard ins.adsbygoogle,
.bm-homepage-feed-ad ins.adsbygoogle {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Ezoic ad containers */
.ezoic-ad,
div[id^="ezoic-pub-ad"] {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* Google Ad Manager GPT */
div[id^="div-gpt-ad"] {
  max-width: 100% !important;
  overflow: hidden !important;
}

/* ══════════════════════════════════════════════════════════════════
   15. CLS SKELETON LOADERS
   — Optional: placeholder shimmer while ad loads
   ══════════════════════════════════════════════════════════════════ */

.bm-ad-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: bm-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes bm-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════════════════════════
   16. ARTICLE PAGE — BELOW-TITLE AD (article.css supplement)
   ══════════════════════════════════════════════════════════════════ */

.article-top-ad {
  width: 100%;
  margin: 20px 0;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Desktop: 728×90 leaderboard */
.article-top-ad.ica-desktop {
  min-height: 110px;
  padding: 10px 0;
  background: #f8f9fb;
  border-top: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
}

/* Tablet: 728×90 */
.article-top-ad.ica-tablet {
  min-height: 110px;
  padding: 10px 0;
  background: #f8f9fb;
  border-top: 1px solid #eceef2;
  border-bottom: 1px solid #eceef2;
}

/* Mobile: 300×250 */
.article-top-ad.ica-mobile {
  min-height: 270px;
  padding: 8px 0;
}

.article-top-ad:has(.bm-ad-live:empty) { display: none !important; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   17. AFTER-ARTICLE ADS (before related posts)
   ══════════════════════════════════════════════════════════════════ */

.bm-ad-after-article {
  width: 100%;
  margin: 28px 0 20px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bm-ad-after-article.ica-desktop { min-height: 110px; }
.bm-ad-after-article.ica-tablet  { min-height: 308px; }
.bm-ad-after-article.ica-mobile  { min-height: 270px; }
.bm-ad-after-article:has(.bm-ad-live:empty) { display: none !important; margin: 0 !important; }

/* ══════════════════════════════════════════════════════════════════
   18. HOMEPAGE SIDEBAR SLOTS (right side, 3-col grid)
   ══════════════════════════════════════════════════════════════════ */

.bm-home-sidebar-ad {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bm-home-sidebar-ad .bm-ad-label { margin-bottom: 6px; }

.bm-home-sidebar-ad--250 { min-height: 262px; max-width: 300px; margin: 0 auto 20px; }
.bm-home-sidebar-ad--600 { min-height: 612px; max-width: 300px; margin: 0 auto 20px; }

@media (max-width: 1100px) {
  .bm-home-sidebar-ad { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   19. NEW SLOTS — v1.3.2 COMPLETE AD SYSTEM
   Desktop: 970×250 Hero, Below Title 728×90, Before Comments 728×90
   Sidebar: Top 300×600, Middle 300×250 x2, Bottom 300×250
   Category: Mid-feed 336×280, Before Footer 728×90
   Homepage: Mid-feed 336×280
   ══════════════════════════════════════════════════════════════════ */

/* ── 970×250 Homepage Hero Banner ──────────────────────────────── */
.bm-ad-hero-banner {
  width: 100%;
  max-width: 970px;
  margin: 20px auto;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 272px; /* 250 + label + padding — CLS prevention */
  padding: 10px 0;
  box-sizing: border-box;
}
.bm-ad-hero-banner .bm-ad-label { margin-bottom: 8px; }
.bm-ad-hero-banner:has(.bm-ad-live:empty),
.bm-ad-hero-banner:empty {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* ── Article: Below Title Leaderboard 728×90 ─────────────────── */
.article-leaderboard-ad {
  width: 100%;
  margin: 16px 0 22px;
  text-align: center;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 110px; /* 90 + label — CLS prevention */
  box-sizing: border-box;
}
.article-leaderboard-ad .bm-ad-label { margin-bottom: 6px; }
.article-leaderboard-ad:has(.bm-ad-live:empty),
.article-leaderboard-ad:empty {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* ── Homepage/Category: Mid-feed 336×280 ────────────────────── */
.bm-ad-336x280-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  overflow: hidden;
}
.body-ad-wrap:has(.bm-ad-live:empty),
.body-ad-wrap:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Sidebar: Top 300×600 (always visible, not desktop-only) ─── */
.sidebar-ad-600 {
  width: 100%;
  max-width: 300px;
  min-height: 622px; /* 600 + label — CLS prevention */
  overflow: hidden;
  margin-bottom: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sidebar-ad-600 .sidebar-ad-label { margin-bottom: 6px; }
.sidebar-ad-600:has(.bm-ad-live:empty),
.sidebar-ad-600:empty {
  display: none !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* Sidebar mid slot label */
.sidebar-ad .bm-ad-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #c0c5d8;
  margin-bottom: 6px;
  text-align: center;
  display: block;
}

/* Prevent sidebar slots collapsing when empty */
.sidebar-ad:has(.bm-ad-live:empty) {
  display: none !important;
  margin: 0 !important;
}

/* ── Responsive: Hide hero banner on tablet/mobile ────────────── */
@media (max-width: 1024px) {
  .bm-ad-hero-banner {
    display: none !important;
  }
}

/* ── Article leaderboard on tablet — switch to 300×250 ─────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .article-leaderboard-ad {
    max-width: 336px;
    min-height: 300px;
    margin: 14px auto 20px;
  }
}

/* ── Article leaderboard on mobile — hide (mob_1 handles it) ── */
@media (max-width: 640px) {
  .article-leaderboard-ad {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   20. SPONSORED CONTENT — Mobile Homepage & Article Fixes  v1.4.2
   Root cause: sponsored-section had no dedicated mobile padding/
   margin rules; on 360–400px screens cards were being cut off at
   the right edge and the header badge was overlapping the title
   due to missing gap/wrap declarations at sub-480px width.
   ══════════════════════════════════════════════════════════════════ */

/* Sponsored section — global wrapper spacing */
.sponsored-section {
  margin-top: 28px;
  margin-bottom: 32px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Header row — prevent badge wrapping over title on narrow screens */
.sponsored-header {
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 8px;
}

.sponsored-header-left {
  flex-wrap: wrap;
  row-gap: 6px;
  max-width: 100%;
}

/* On mobile the title + badge sit on the same row — allow wrap */
@media (max-width: 640px) {
  .sponsored-section {
    margin-top: 20px;
    margin-bottom: 24px;
    padding: 0 2px; /* slight inset prevents card bleed on 360px */
  }

  .sponsored-header {
    margin-bottom: 14px;
    padding-bottom: 10px;
  }

  .sponsored-header-left {
    gap: 8px;
    align-items: flex-start;
  }

  /* Horizontal scroll container — fix height so cards don't compress */
  .sponsored-grid {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    gap: 12px !important;
    padding-bottom: 10px !important;
    padding-right: 14px !important; /* trailing space so last card isn't edge-clipped */
    /* Prevent scroll container from collapsing height on iOS Safari */
    min-height: 240px;
    align-items: stretch;
  }

  .sponsored-grid::-webkit-scrollbar { display: none; }

  .sponsored-card {
    flex: 0 0 76vw !important;
    min-width: 220px !important;
    max-width: 300px !important;
    /* Ensure card height is consistent — prevents compressed look */
    display: flex;
    flex-direction: column;
    min-height: 220px;
  }

  .sponsored-card-img {
    height: 110px !important; /* slightly reduced on small screens */
    min-height: 110px !important;
  }

  .sponsored-card-body {
    flex: 1;
    padding: 12px 14px 14px;
  }
}

@media (max-width: 400px) {
  .sponsored-grid {
    gap: 10px !important;
    padding-right: 12px !important;
  }
  .sponsored-card {
    flex: 0 0 82vw !important;
    min-width: 200px !important;
  }
}

/* ── sp-incontent (in-article sponsored widget) ─────────────────
   Missing CSS — these classes are generated in single.php PHP
   but had NO CSS rules in any file. Added here.
   ──────────────────────────────────────────────────────────────── */
.sp-incontent {
  margin: 24px 0;
  padding: 18px 20px;
  background: #fafbff;
  border: 1px solid #e4e8f0;
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
}

.sp-incontent-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eceef4;
}

.sp-incontent-title {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #3d3a4a;
}

.sp-incontent-badge {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #8a6520;
  background: linear-gradient(135deg, #fffbef 0%, #fef0c0 50%, #fde68a 100%);
  border: 1px solid rgba(184,145,58,.35);
  padding: 4px 10px;
  border-radius: 20px;
}

.sp-incontent-grid {
  display: flex;
  flex-direction: row;
  gap: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.sp-incontent-grid::-webkit-scrollbar { display: none; }

.sp-incontent-card {
  flex: 0 0 180px;
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}

.sp-incontent-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  transform: translateY(-2px);
}

.sp-incontent-img {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a3a5c, #2a6090);
  flex-shrink: 0;
}

.sp-incontent-body {
  padding: 10px 12px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sp-incontent-brand {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #b8913a;
  margin-bottom: 4px;
}

.sp-incontent-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  color: #1a1e2e;
  margin-bottom: 6px;
  flex: 1;
}

.sp-incontent-desc {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 8px;
}

.sp-incontent-cta {
  font-size: 11px;
  font-weight: 700;
  color: #1e3a5f;
  margin-top: auto;
}

@media (max-width: 640px) {
  .sp-incontent {
    padding: 14px 16px;
    margin: 18px 0;
  }
  .sp-incontent-card {
    flex: 0 0 160px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   21. AD LABEL NORMALIZATION — Eliminates all inline-style labels
   Ensures every ad wrapper uses the same .bm-ad-label CSS class
   instead of duplicated inline style attributes.
   ══════════════════════════════════════════════════════════════════ */

/* Normalize body-ad-label to match bm-ad-label (they were separate classes
   with identical styles — unify them to reduce specificity conflicts) */
.body-ad-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #b0b5c3;
  text-align: center;
  margin-bottom: 6px;
  display: block;
  width: 100%;
}

/* bm-sidebar-ad-label — same normalization */
.bm-sidebar-ad-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #b0b5c3;
  text-align: center;
  margin-bottom: 6px;
  display: block;
  width: 100%;
}