/* Adsterra ad styles - kept separate from main stylesheet */
/* NATIVE BANNER ONLY - Block intrusive formats */
.ad-wrapper {
  position: fixed;
  right: 16px;
  bottom: 16px;
  /* let wrapper size itself to the ad content */
  display: inline-block;
  width: auto;
  /* Allow the ad to grow on larger screens but never exceed viewport minus margins */
  max-width: min(calc(100% - 32px), 460px);
  /* Remove fixed aspect-ratio so content can determine height naturally */
  height: auto;
  max-height: 85vh;
  z-index: 2000;
  border-radius: 8px;
  /* Allow the inner .ad-content to handle clipping/scrolling so media can scale correctly */
  overflow: visible;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
  transform: translateY(0);
}

/* Reserve space for the close button so it doesn't overlap ad creative */
.ad-wrapper,
[id^="ad-wrapper-"] {
  padding-top: 44px !important;
  padding-right: 14px !important;
  box-sizing: border-box !important;
}

@media (max-width: 520px) {
  .ad-wrapper,
  [id^="ad-wrapper-"] {
    padding-top: 36px !important;
    padding-right: 10px !important;
  }
}

/* Removed forced positioning on descendants to allow close button to position correctly. */

/* Prevent pop-up styles */
div[id*="pop"],
div[class*="pop"],
div[id*="overlay"],
div[class*="overlay"],
div[id*="modal"],
div[class*="modal"] {
  display: none !important;
}

.ad-wrapper.ad-collapsed {
  transform: translateX(120%);
  opacity: 0;
}
.ad-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  z-index: 2001;
}

/* Ensure media (images/iframes) inside the ad scale down on small screens */
.ad-wrapper img,
.ad-wrapper iframe,
.ad-wrapper object,
.ad-wrapper embed {
  /* Make media fill the available ad width to avoid visual cropping */
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Allow the ad box to scroll if its content is taller than the viewport */
.ad-wrapper .ad-content {
  /* Let inner content use the full wrapper width so media doesn't get cropped */
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: auto;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px; /* match outer wrapper */
  background: transparent;
}

/* Force media inside the inner content to fit the inner width */
.ad-wrapper .ad-content img,
.ad-wrapper .ad-content iframe,
.ad-wrapper .ad-content object,
.ad-wrapper .ad-content embed {
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 520px) {
  .ad-wrapper {
    /* Use a responsive max width on small screens so creatives have enough room */
    width: min(92vw, 460px) !important;
    max-width: 92vw !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    bottom: 10px;
    /* increase mobile max-height to avoid cropping taller creatives */
    max-height: 60vh;
    min-height: 48px;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    background: transparent;
  }
  .ad-content {
    /* allow more vertical space for content on small screens */
    max-height: 54vh;
    overflow-y: auto;
    border-radius: 10px;
    background: transparent;
  }
  .ad-close-btn {
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    font-size: 16px;
  }
}

/* Override inline styles injected by js/adsterra.js to prevent cropping */
[id^="ad-wrapper-"] {
  aspect-ratio: auto !important;
  overflow: visible !important;
  height: auto !important;
  max-height: 90vh !important;
}

[id^="ad-wrapper-"] .ad-content {
  /* Subtract reserved top padding (44px) so inner content fits inside visible white box */
  max-height: calc(90vh - 44px) !important;
  overflow: auto !important;
}

[id^="ad-wrapper-"] iframe,
.ad-wrapper iframe,
.ad-wrapper .ad-content iframe {
  /* allow iframe to use its intrinsic width/height where possible */
  width: auto !important;
  height: auto !important;
  min-height: 150px !important;
  /* keep iframe within ad box by reducing its max-height by reserved top padding */
  max-height: calc(85vh - 44px) !important;
  display: block;
}

/* Ensure close button stays on top */
[id^="ad-wrapper-"] .ad-close-btn,
.ad-wrapper .ad-close-btn {
  z-index: 100001 !important;
}

/* Position close button inside the white box so it never leaves the container */
[id^="ad-wrapper-"] .ad-close-btn,
.ad-wrapper .ad-close-btn {
  top: 10px !important;
  right: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  background: rgba(0, 0, 0, 0.65) !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 520px) {
  /* keep button inside on small screens */
  [id^="ad-wrapper-"] .ad-close-btn,
  .ad-wrapper .ad-close-btn {
    top: 8px !important;
    right: 8px !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
  }
}

/* Mobile: account for smaller reserved padding (36px) */
@media (max-width: 520px) {
  [id^="ad-wrapper-"] .ad-content,
  .ad-wrapper .ad-content {
    max-height: calc(58vh - 36px) !important;
  }

  [id^="ad-wrapper-"] iframe,
  .ad-wrapper iframe,
  .ad-wrapper .ad-content iframe {
    max-height: calc(54vh - 36px) !important;
  }
}

/* Insert a visible title inside the reserved top area */
.ad-wrapper::before,
[id^="ad-wrapper-"]::before {
  content: "Advertising";
  position: absolute;
  top: 12px;
  left: 16px;
  right: 56px; /* leave space for the close button */
  height: 20px;
  line-height: 20px;
  font-weight: 700;
  font-size: 14px;
  color: #222;
  text-align: left;
  background: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

@media (max-width: 520px) {
  .ad-wrapper::before,
  [id^="ad-wrapper-"]::before {
    top: 10px;
    left: 12px;
    right: 48px;
    font-size: 13px;
  }
}