/* ============================================================
   DNXCOIN AI HUB — ads.css  v6.0
   World-class Ad System — Adsterra Optimized
   ============================================================ */

/* ── BASE AD UNIT ────────────────────────────────────────────*/
.ad-unit {
  position: relative;
  overflow: hidden;
}
.ad-label {
  display: block;
  font-size: 9px;
  letter-spacing: 2.5px;
  color: #475569;
  text-transform: uppercase;
  text-align: center;
  font-family: 'Rajdhani', sans-serif;
  margin-bottom: 5px;
}

/* ── SKELETON LOADER ─────────────────────────────────────────*/
.ad-skel {
  width: 100%;
  height: 100%;
  min-height: inherit;
  border-radius: 8px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.03) 25%,
    rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.03) 75%);
  background-size: 200% 100%;
  animation: skelAnim 1.6s infinite;
}
@keyframes skelAnim {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── STRIP AD (top / footer) ─────────────────────────────────*/
.ad-strip-wrap {
  background: rgba(8, 13, 28, 0.9);
  border-top: 1px solid rgba(0,245,255,.07);
  border-bottom: 1px solid rgba(0,245,255,.07);
  padding: 10px 16px 14px;
  text-align: center;
}
.ad-strip-inner {
  max-width: 728px;
  min-height: 90px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── HERO NATIVE BANNER ──────────────────────────────────────*/
.ad-hero-wrap {
  width: 100%;
  max-width: 680px;
  margin: 2.5rem auto 0;
}
.ad-hero-inner {
  background: rgba(10,15,30,.6);
  border: 1px solid rgba(0,245,255,.1);
  border-radius: 14px;
  padding: 14px 20px;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: border-color .3s;
}
.ad-hero-inner:hover { border-color: rgba(0,245,255,.22); }

/* ── DASHBOARD TOP BANNER ────────────────────────────────────*/
.ad-dash-top {
  background: rgba(8,13,28,.8);
  border: 1px solid rgba(0,245,255,.08);
  border-radius: 12px;
  padding: 12px;
  min-height: 90px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── NATIVE CARD (between tools) ─────────────────────────────*/
.ad-native-card {
  background: linear-gradient(135deg, rgba(124,58,237,.08), rgba(0,245,255,.04));
  border: 1px solid rgba(0,245,255,.12);
  border-radius: 14px;
  padding: 16px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: border-color .3s;
}
.ad-native-card:hover { border-color: rgba(0,245,255,.22); }
.ad-native-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 8px;
  color: #475569;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ── DESKTOP STICKY SIDEBAR ──────────────────────────────────*/
.ad-sidebar-wrap {
  position: sticky;
  top: 88px;
  width: 160px;
  flex-shrink: 0;
  display: none; /* shown on xl screens */
}
.ad-sidebar-inner {
  background: rgba(8,13,28,.7);
  border: 1px solid rgba(0,245,255,.08);
  border-radius: 12px;
  padding: 10px;
  min-height: 600px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* ── AFTER-OUTPUT AD ─────────────────────────────────────────*/
.ad-result-wrap {
  background: linear-gradient(135deg, rgba(0,245,255,.04), rgba(124,58,237,.05));
  border: 1px solid rgba(124,58,237,.15);
  border-radius: 12px;
  padding: 14px;
  margin-top: 18px;
  min-height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn .5s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

/* ── STICKY MOBILE BOTTOM BAR ────────────────────────────────*/
.ad-sticky-mobile {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 8500;
  background: rgba(2,8,23,.97);
  border-top: 1px solid rgba(0,245,255,.15);
  padding: 8px 12px 10px;
  backdrop-filter: blur(16px);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -6px 24px rgba(0,0,0,.6);
  animation: slideUp .35s ease;
}
@keyframes slideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.ad-sticky-mobile .ad-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: #64748b;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.ad-sticky-mobile .ad-close:hover {
  background: rgba(255,0,110,.2);
  color: #ff006e;
  border-color: #ff006e;
}
.ad-sticky-mobile .ad-mob-inner {
  max-width: 320px;
  min-height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── RESPONSIVE RULES ────────────────────────────────────────*/
@media (max-width: 768px) {
  .ad-sticky-mobile    { display: flex; }
  .ad-sidebar-wrap     { display: none !important; }
  body                 { padding-bottom: 72px; }
  .ad-strip-inner      { min-height: 60px; }
}
@media (min-width: 769px) {
  .ad-sticky-mobile    { display: none !important; }
}
@media (min-width: 1300px) {
  .ad-sidebar-wrap     { display: flex; }
}