/* ======================================================
   GOOGLE ADS SAFE TEST MODE (ads.css)
   ====================================================== */

/* 🔥 TOGGLE HERE (ONLY CHANGE THIS LINE) */

/* 
   0 = LIVE MODE (real ads visible)
   1 = TEST MODE (only box visible, ads hidden safely)
*/
:root {
  --ads-test-mode: 0;   /* 👈 change 1 → 0 before hosting */
}


/* ======================================================
   BASE ADS CONTAINER STYLE
   ====================================================== */

.ads-container {
  max-width: 1100px;
  margin: 15px auto;
  padding: 10px;
  text-align: center;
  border-radius: 12px;
  transition: 0.3s;
}


/* ======================================================
   🧪 TEST MODE (SHOW BOX, HIDE ADS CONTENT)
   ====================================================== */

html[style*="--ads-test-mode: 1"] .ads-container {
  background: rgba(0, 255, 255, 0.2);
  border: 2px dashed aqua;
  min-height: 90px;
}

html[style*="--ads-test-mode: 1"] .ads-container::before {
  content: "ADVERTISEMENT AREA (TEST MODE)";
  display: block;
  font-size: 0.85rem;
  color: aqua;
  margin-bottom: 6px;
  font-weight: bold;
}

/* Hide ads content but keep container (AdSense-safe) */
html[style*="--ads-test-mode: 1"] .ads-container ins.adsbygoogle {
  opacity: 0;
  height: 0;
  overflow: hidden;
}


/* ======================================================
   🌍 LIVE MODE (SHOW REAL ADS)
   ====================================================== */

html[style*="--ads-test-mode: 0"] .ads-container {
  background: transparent;
  border: none;
  min-height: auto;
}

html[style*="--ads-test-mode: 0"] .ads-container::before {
  content: "";
}

html[style*="--ads-test-mode: 0"] .ads-container ins.adsbygoogle {
  opacity: 1;
  height: auto;
}


/* ======================================================
   RESPONSIVE ADS AREA
   ====================================================== */

@media (max-width: 900px) {
  .ads-container {
    max-width: 95%;
  }
}