/*
 * RewardVid UX follow-up v5
 * Final native-ad rendering, mobile hero art, and compatibility refinements.
 * Loaded after rewardvid-v2.css, rewardvid-v3.css, and rewardvid-v4.css.
 */

/* --------------------------------------------------------------------------
   Native feed advertisements
   -------------------------------------------------------------------------- */
body.rv-app .rv-feed-ad--native .rv-ad-slot--native-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
  background: var(--rv-surface-2) !important;
}

body.rv-app .rv-feed-ad--native .rv-feed-ad__creative {
  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;
  opacity: 1 !important;
  visibility: visible !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  transform: none !important;
}

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

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

body.rv-app .rv-feed-ad--native .video-overlay {
  z-index: 3;
}

/* Keep both native and external creatives aligned with the normal video card. */
body.rv-app .rv-feed-ad .video-post-thumbnail,
body.rv-app .rv-feed-ad .rv-feed-ad__media,
body.rv-app .rv-feed-ad .rv-ad-slot {
  aspect-ratio: 16 / 9 !important;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   Mobile product hero artwork
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  body.rv-app .rv-product-hero__art {
    overflow: visible;
    opacity: .96;
  }

  body.rv-app .rv-product-hero__art img {
    width: min(370px, 300%) !important;
    max-width: none !important;
  }
}

@media (max-width: 479.98px) {
  body.rv-app .rv-product-hero__art {
    right: -22px !important;
    bottom: -16px !important;
    width: 208px !important;
    height: 176px !important;
    min-height: 0 !important;
    opacity: .96 !important;
  }

  body.rv-app .rv-product-hero__art img {
    inset: auto -110px -28px auto !important;
    width: 380px !important;
    max-width: none !important;
    transform: none !important;
    transform-origin: right bottom;
  }

  html[dir="rtl"] body.rv-app .rv-product-hero__art,
  [dir="rtl"] body.rv-app .rv-product-hero__art {
    right: auto !important;
    left: -22px !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 -28px -110px !important;
    transform: none !important;
    transform-origin: left bottom;
  }

  /* Preserve text contrast while allowing the larger artwork to start at the
     lower-right edge of the existing hero without increasing its height. */
  body.rv-app .rv-product-hero__content {
    background: linear-gradient(90deg, rgba(12, 17, 26, .16), transparent 82%);
  }

  html[data-theme="light"] body.rv-app .rv-product-hero__content {
    background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 82%);
  }
}