/* ============================================================
   Cloud-Sync Ad Styles — Centralized Adsterra Ad Containers
   Provides consistent, non-intrusive styling for all ad slots.
   ============================================================ */

/* --- Base Ad Slot --- */
.cs-ad-slot {
  display: none; /* Hidden by default — only shown when successfully loaded */
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

/* Override any global iframe styling rules (such as aspect-ratio or width overrides in blog-global.css) */
.cs-ad-slot iframe,
.blog-post .cs-ad-slot iframe,
.blog-post-body-layout .cs-ad-slot iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* When ad loads successfully, show it */
.cs-ad-slot.cs-ad-loaded {
  display: flex;
  opacity: 1;
  animation: csAdFadeIn 0.35s ease forwards;
}

/* When ad fails to load, keep it hidden */
.cs-ad-slot.cs-ad-failed {
  display: none !important;
}

/* Exact sizes matching the Adsterra ad specifications to prevent extra space */
.cs-ad-slot[data-ad-size="728x90"] {
  width: 728px;
  height: 90px;
}

.cs-ad-slot[data-ad-size="468x60"] {
  width: 468px;
  height: 60px;
}

.cs-ad-slot[data-ad-size="300x250"] {
  width: 300px;
  height: 250px;
}

.cs-ad-slot[data-ad-size="160x600"] {
  width: 160px;
  height: 600px;
}

.cs-ad-slot[data-ad-size="160x300"] {
  width: 160px;
  height: 300px;
}

.cs-ad-slot[data-ad-size="320x50"] {
  width: 320px;
  height: 50px;
}

.cs-ad-slot[data-ad-size="native"] {
  width: 100%;
  height: auto;
  max-height: none;
}

/* --- Inline (in-content) ad slot --- */
.cs-ad-slot--inline.cs-ad-loaded {
  margin: 24px auto;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 10px 8px;
}

/* Ad label for standard slots — only show when loaded */
.cs-ad-slot--inline.cs-ad-loaded::before {
  content: 'Ad';
  position: absolute;
  top: 2px;
  right: 8px;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  pointer-events: none;
  z-index: 1;
}

/* Native ads shouldn't have label overlay on top of content */
.cs-ad-slot--native.cs-ad-loaded::before {
  display: none !important;
}

/* --- Sidebar ad slot (desktop only) --- */
.cs-ad-slot--sidebar {
  position: sticky;
  top: calc(var(--site-header-height, 64px) + 24px);
}

.cs-ad-slot--sidebar.cs-ad-loaded {
  margin-top: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 8px;
}

/* --- Fixed side ads (left/right gutter on ultra-wide) --- */
.cs-ad-side-fixed {
  position: fixed;
  top: calc(var(--site-header-height, 64px) + 24px);
  z-index: 20;
  display: none;
}

.cs-ad-side-fixed--left {
  left: 16px;
}

.cs-ad-side-fixed--right {
  right: 16px;
}

@media (min-width: 1400px) {
  .cs-ad-side-fixed.cs-ad-loaded {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

/* --- Tool result ad --- */
.cs-ad-slot--result.cs-ad-loaded {
  margin: 16px auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  padding: 10px 8px;
}

.cs-ad-slot--result.cs-ad-loaded::before {
  content: 'Sponsored';
  position: absolute;
  top: 2px;
  right: 8px;
  font-size: 9px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  pointer-events: none;
  z-index: 1;
}

/* --- Native banner container --- */
.cs-ad-slot--native.cs-ad-loaded {
  margin: 24px auto;
  border-radius: 8px;
  padding: 4px;
}

/* --- Homepage bottom ad --- */
.cs-ad-slot--homepage.cs-ad-loaded {
  margin: 32px auto 16px;
  border-radius: 8px;
  padding: 8px;
}

/* --- Responsive rules --- */

/* Mobile: hide large banners, show mobile-friendly sizes */
@media (max-width: 767px) {
  .cs-ad-slot[data-ad-size="728x90"] {
    display: none !important;
  }
  .cs-ad-slot[data-ad-size="468x60"] {
    display: none !important;
  }
  .cs-ad-slot--mobile-only.cs-ad-loaded {
    display: flex !important;
  }
}

@media (min-width: 768px) {
  .cs-ad-slot--mobile-only {
    display: none !important;
  }
}

/* Hide sidebar/side-fixed ads on narrow screens */
@media (max-width: 1199px) {
  .cs-ad-side-fixed {
    display: none !important;
  }
}

/* --- Fade-in animation --- */
@keyframes csAdFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Dark/Light theme adjustments --- */
@media (prefers-color-scheme: light) {
  .cs-ad-slot--inline.cs-ad-loaded,
  .cs-ad-slot--result.cs-ad-loaded,
  .cs-ad-slot--sidebar.cs-ad-loaded {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
  }

  .cs-ad-slot--inline.cs-ad-loaded::before,
  .cs-ad-slot--result.cs-ad-loaded::before {
    color: rgba(0, 0, 0, 0.25);
  }
}