/* Google Publisher Tag Ad Styles */

.ad-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  text-align: center;
}

/* Set the exact dimensions for each ad slot container */
.ad-container > div {
  width: 100%;
  height: 100%;
}

/* Leaderboard ads (728x90) */
.ad-slot-leaderboard {
  width: 728px;
  height: 90px;
}

/* Rectangle ads (300x250) */
.ad-slot-rectangle {
  width: 300px;
  height: 250px;
}

/* Large rectangle ads (300x600) */
.ad-slot-large-rectangle {
  width: 300px;
  height: 600px;
}

/* Skyscraper ads (160x600) */
.ad-slot-skyscraper {
  width: 160px;
  height: 600px;
}

/* Mobile banner ads */
.ad-slot-mobile-banner {
  width: 320px;
  height: 50px;
}

/* Mobile rectangle ads */
.ad-slot-mobile-rectangle {
  width: 336px;
  height: 280px;
}

/* Lowerboard ads */
.ad-slot-lowerboard {
  width: 728px;
  height: 90px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .ad-slot-leaderboard,
  .ad-slot-lowerboard {
    width: 100%;
    max-width: 728px;
  }

  .ad-slot-rectangle,
  .ad-slot-large-rectangle {
    width: 100%;
    max-width: 300px;
  }

  .ad-container {
    margin: 15px auto;
  }
}

/* Hide ads during loading */
.ad-container:empty {
  display: none;
}

/* Debug mode - shows ad slot boundaries */
.ad-debug .ad-container {
  border: 2px dashed #999;
  background: #f9f9f9;
}

.ad-debug .ad-container::before {
  content: attr(data-slot);
  display: block;
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 2px 5px;
  font-size: 11px;
  color: #666;
  background: rgba(255,255,255,0.9);
  z-index: 1;
}