/**
 * Doceree HCP Monetization - Public Container & Zero-CLS Responsive Stylesheet
 */

.doceree-ad-slot-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
  margin: 16px auto;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

.doceree-ad-slot-wrapper .datag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Suppress duplicate Advertisement text injected by dc.js inside slot containers */
.datag > p,
.datagob > p {
  display: none !important;
}

.doceree-fallback-creative {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.doceree-ad-slot-wrapper iframe {
  border: 0 !important;
  margin: 0 auto !important;
  display: block !important;
  max-width: 100% !important;
}

/* 1. Super Leaderboard / Billboard (970x250) */
.doceree-slot-billboard {
  min-height: 250px;
  max-width: 970px;
  width: 100%;
}
@media (max-width: 991px) {
  .doceree-slot-billboard {
    min-height: 120px;
    max-width: 100%;
  }
}

/* 2. Center Stream Leaderboard (728x90) */
.doceree-slot-leaderboard {
  min-height: 90px;
  max-width: 728px;
  width: 100%;
}
@media (max-width: 767px) {
  .doceree-slot-leaderboard {
    min-height: 70px;
    max-width: 100%;
  }
}

/* 3. Medium Rectangle / MREC (300x250) */
.doceree-slot-rectangle {
  min-height: 250px;
  width: 300px;
  max-width: 100%;
}

/* 4. Wide Skyscraper (160x600) */
.doceree-slot-skyscraper {
  min-height: 600px;
  width: 160px;
  max-width: 100%;
}
@media (max-width: 1023px) {
  .doceree-slot-skyscraper {
    min-height: 250px;
    width: 300px;
    max-width: 100%;
  }
}

/* 5. Sticky Bottom Rail (728x90 on Desktop, 320x50 on Mobile) */
.doceree-sticky-rail {
  transition: transform 0.25s ease-in-out;
  width: 100% !important;
}
@media (max-width: 767px) {
  .doceree-sticky-rail {
    min-height: 60px !important;
    padding: 4px 0 !important;
  }
  .doceree-sticky-rail .datag {
    min-width: 300px !important;
    min-height: 50px !important;
    max-width: 100% !important;
  }
}

/* Fallback Creative Responsive Scaling */
.real-ad {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.real-ad-billboard {
  max-width: 970px;
  margin: 0 auto;
}
.real-ad-leaderboard {
  max-width: 728px;
  margin: 0 auto;
}
.real-ad-mpu {
  max-width: 300px;
  margin: 0 auto;
}
.real-ad-skyscraper {
  max-width: 160px;
  margin: 0 auto;
}

/* Content Inserter Margin Helpers */
.doceree-content-ad-wrapper {
  margin: 28px auto !important;
  clear: both;
}