/*
 * RewardVid follow-up v5A
 * Native advertisement media, mobile product artwork, and cache-safe UX fixes.
 * Loaded after rewardvid-v2.css through rewardvid-v5.css.
 */

/* --------------------------------------------------------------------------
   Native feed advertisements
   -------------------------------------------------------------------------- */
body.rv-app .rv-feed-ad--native .rv-feed-ad__media,
body.rv-app .rv-feed-ad--native .video-post-thumbnail {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: var(--rv-surface-2) !important;
  isolation: isolate;
}

body.rv-app .rv-feed-ad--native .rv-feed-ad__creative[data-rv-native-ad-image] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

body.rv-app .rv-feed-ad--native .rv-ad-card__placeholder {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: grid !important;
  place-content: center !important;
}

body.rv-app .rv-feed-ad--native.rv-ad-image-ready .rv-ad-card__placeholder {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.rv-app .rv-feed-ad--native.rv-ad-image-failed .rv-feed-ad__creative {
  display: none !important;
}

body.rv-app .rv-feed-ad--native .video-overlay {
  z-index: 3 !important;
  pointer-events: none;
}

body.rv-app .rv-feed-ad--native .rv-feed-ad__badge {
  z-index: 4 !important;
}

/* External network creatives retain the same 16:9 card footprint. */
body.rv-app .rv-feed-ad--external .rv-feed-ad__media,
body.rv-app .rv-feed-ad--external .rv-ad-slot--external {
  width: 100% !important;
  min-width: 0 !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
   Mobile Earn / Promote hero artwork
   Keep the existing hero height while anchoring a larger illustration to the
   lower-right edge instead of placing a small image in a narrow grid column.
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  body.rv-app .rv-product-hero {
    position: relative !important;
    overflow: hidden !important;
  }

  body.rv-app .rv-product-hero__content {
    position: relative !important;
    z-index: 2 !important;
  }

  body.rv-app .rv-product-hero__art {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }

  body.rv-app .rv-product-hero__art img {
    position: absolute !important;
    inset: auto -92px -58px auto !important;
    width: 440px !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    transform-origin: right bottom !important;
  }

  body.rv-app .rv-product-hero--promote .rv-product-hero__art img {
    inset: auto -104px -54px auto !important;
    width: 458px !important;
  }

  html[dir="rtl"] body.rv-app .rv-product-hero__art img,
  [dir="rtl"] body.rv-app .rv-product-hero__art img {
    inset: auto auto -58px -92px !important;
    transform-origin: left bottom !important;
  }

  html[dir="rtl"] body.rv-app .rv-product-hero--promote .rv-product-hero__art img,
  [dir="rtl"] body.rv-app .rv-product-hero--promote .rv-product-hero__art img {
    inset: auto auto -54px -104px !important;
  }
}

@media (max-width: 379.98px) {
  body.rv-app .rv-product-hero__art img {
    inset: auto -88px -54px auto !important;
    width: 410px !important;
  }

  body.rv-app .rv-product-hero--promote .rv-product-hero__art img {
    inset: auto -98px -50px auto !important;
    width: 426px !important;
  }

  html[dir="rtl"] body.rv-app .rv-product-hero__art img,
  [dir="rtl"] body.rv-app .rv-product-hero__art img {
    inset: auto auto -54px -88px !important;
  }

  html[dir="rtl"] body.rv-app .rv-product-hero--promote .rv-product-hero__art img,
  [dir="rtl"] body.rv-app .rv-product-hero--promote .rv-product-hero__art img {
    inset: auto auto -50px -98px !important;
  }
}