/**
 * Monetag Banner Ads Styling
 * Production-ready responsive banner containers
 */

.monetag-banner-container {
  margin: 200px auto;
  text-align: center;
  max-width: 300px;
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prevent layout shift */
  contain: layout;
}

.monetag-banner-placeholder {
  width: 300px;
  height: 250px;
  background: #f5f5f5;
  border: 1px dashed #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .monetag-banner-container {
    margin: 150px auto;
    max-width: 100%;
    padding: 0 10px;
  }
  
  .monetag-banner-placeholder {
    max-width: 100%;
    width: 100%;
    height: auto;
    aspect-ratio: 300 / 250;
  }
}

/* Ensure proper spacing from unlock buttons */
.section + .monetag-banner-container {
  margin-top: 200px;
}

.monetag-banner-container + .section {
  margin-top: 200px;
}

/* Performance optimization */
.monetag-banner-container {
  will-change: auto;
  transform: translateZ(0);
}