/* ExoClick ad slots for tools.love8.me. */

/* ---------- Ad container ---------- */
.ad-slot,
.exoclick-ad-slot,
.exoclick-ad-container,
.ad-center,
.exo-ad-slot {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  min-height: 250px;
  margin: 8px auto 4px !important;
  padding: 0 !important;
  clear: both;
  overflow: visible;
  text-align: center;
}

/* ---------- Inner wrapper ---------- */
.ad-inner {
  width: 100%;
  max-width: 900px;
  min-height: 250px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  text-align: center;
}

/* ---------- ExoClick ins element ---------- */
ins.eas6a97888e2 {
  display: block;
  max-width: 100%;
  min-height: 250px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Center iframes/images inside ad containers */
.ad-inner ins,
.ad-inner iframe,
.ad-inner img,
.ad-inner > div,
.ad-slot iframe {
  max-width: 100%;
  max-height: none;
  margin-left: auto !important;
  margin-right: auto !important;
}

.ad-slot iframe {
  display: block;
}

/* ==========================================================
   Collapse whitespace BEFORE the ad
   ========================================================== */

/* 1. Elements inside main that are directly followed by an ad */
.tool-panel:has(+ .ad-slot),
.page-intro:has(+ .ad-slot),
.content-section:has(+ .ad-slot),
.related-section:has(+ .ad-slot),
.tool-panel:has(+ .exoclick-ad-slot),
.page-intro:has(+ .exoclick-ad-slot),
.content-section:has(+ .exoclick-ad-slot),
.related-section:has(+ .exoclick-ad-slot) {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove residual last-child bottom margin inside page-intro */
.page-intro:has(+ .ad-slot) > :last-child,
.page-intro:has(+ .exoclick-ad-slot) > :last-child {
  margin-bottom: 0 !important;
}

/* 2. main has padding-bottom:48px in tools.css — zero it when an
      outside-main ad immediately follows.  Also zero the last child's
      bottom margin so it doesn't "collapse through" the padding-less main. */
body > main:has(+ .ad-slot),
body > main:has(+ .exoclick-ad-slot) {
  padding-bottom: 0 !important;
}

body > main:has(+ .ad-slot) > *:last-child,
body > main:has(+ .exoclick-ad-slot) > *:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 3. footer has padding-bottom when an after-footer ad follows */
body > footer.site-footer:has(+ .ad-slot),
body > footer.site-footer:has(+ .exoclick-ad-slot) {
  padding-bottom: 6px !important;
}

/* ==========================================================
   Gap AFTER the ad (before the next section)
   Keep a small breathing room.
   ========================================================== */
.ad-slot + section,
.ad-slot + .content-section,
.ad-slot + .related-section,
.ad-slot + .tool-panel,
.exoclick-ad-slot + section,
.exoclick-ad-slot + .content-section,
.exoclick-ad-slot + .related-section,
.exoclick-ad-slot + .tool-panel,
.section-after-ad + section,
.section-after-ad + .content-section,
.section-after-ad + .related-section {
  margin-top: 8px !important;
}

/* ==========================================================
   Mobile (≤ 768px)
   ========================================================== */
@media (max-width: 768px) {
  .ad-slot,
  .exoclick-ad-slot,
  .exoclick-ad-container,
  .ad-center,
  .exo-ad-slot {
    max-width: 300px;
    min-height: 250px;
    margin-top: 2px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
  }

  .ad-inner,
  ins.eas6a97888e2 {
    max-width: 300px;
    min-height: 250px;
  }

  .tool-panel:has(+ .ad-slot),
  .page-intro:has(+ .ad-slot),
  .content-section:has(+ .ad-slot),
  .related-section:has(+ .ad-slot),
  .tool-panel:has(+ .exoclick-ad-slot),
  .page-intro:has(+ .exoclick-ad-slot),
  .content-section:has(+ .exoclick-ad-slot),
  .related-section:has(+ .exoclick-ad-slot) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body > main:has(+ .ad-slot),
  body > main:has(+ .exoclick-ad-slot) {
    padding-bottom: 0 !important;
  }

  body > main:has(+ .ad-slot) > *:last-child,
  body > main:has(+ .exoclick-ad-slot) > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .ad-slot + section,
  .ad-slot + .content-section,
  .ad-slot + .related-section,
  .ad-slot + .tool-panel,
  .exoclick-ad-slot + section,
  .exoclick-ad-slot + .content-section,
  .exoclick-ad-slot + .related-section {
    margin-top: 6px !important;
  }
}