/* Bottom sticky ad (mobile-only). Hidden by default, shown only on mobile after
   500px scroll when GAM confirms the slot is filled. The .ad-bottom-sticky element
   is an Elementor container with e-flex/e-con classes that set display:flex. On
   desktop/tablet Elementor suppresses it via elementor-hidden-desktop/tablet with
   !important, but on mobile no equivalent class exists, so !important is required
   here to win over Elementor's stylesheet (which loads after this plugin's CSS).
   See o4m-ad-controls plugin for the JS logic that adds .is-visible. */
.ad-bottom-sticky {
  display: none !important;
}

@media (max-width: 767px) {
  .ad-bottom-sticky {
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0);
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: 30vh;
    overflow: hidden;
    z-index: 99999;
  }

  .ad-bottom-sticky.is-visible {
    display: flex !important;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* Top leaderboard ad. Sticks to its scroll offset position for 3 seconds once on
   desktop/tablet when the user scrolls it into view; no sticky behavior on mobile.
   See o4m-ad-controls plugin for the JS logic that adds .is-sticky. */
.sticky-top-ad {
  position: relative;
  transition: all 0.4s ease;
}

@media (min-width: 768px) {
  .sticky-top-ad.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
  }
}

/* In-Content MREC ad */
.ad-section-block,
.ad-section-block-community,
.ad-end-of-content {
  display: flex;
  justify-content: center;
  margin-bottom: 32px !important;
}

/* The .outco-gam-top-leaderboard class is generated by AdvancedAds as the wrapper
 * div around the GAM ad slot. For responsive slots with size mappings, GPT does not
 * set an explicit width on its container div, causing the AdvancedAds wrapper to
 * collapse to 300px (influenced by other 300x250 ad slots on the page) and cutting
 * off the ad. This sets the minimum width explicitly to match the GPT size mapping
 * breakpoints (728x90 on desktop, 320x50 on mobile). */
.outco-gam-top-leaderboard {
  min-width: 728px;
}

@media (max-width: 767px) {
  .outco-gam-top-leaderboard {
    min-width: 320px;
  }
}

/* Advertisement label displayed above each ad unit via AdvancedAds label setting.
   Hidden by default, shown only when GAM confirms the slot is filled.
   See o4m-ad-controls plugin for the JS logic that adds .ad-filled. */
.outco-adlabel {
  display: none;
}

.ad-filled .outco-adlabel {
  display: block;
  width: 100%;
  color: rgba(0, 0, 0, 0.6);
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
}