/* =========================================================
   ads.css — Advertisement Management System styling
   ========================================================= */

.ad-slot {
  margin: 1.5rem auto;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
}
.ad-slot:empty { display: none; margin: 0; }

.ad-banner-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  display: inline-block;
}

/* ---------- Device targeting ----------
   Default: visible everywhere. Each class hides the slot by
   default and only reveals it inside its matching breakpoint. */
.ad-device-mobile,
.ad-device-tablet,
.ad-device-desktop {
  display: none;
}
@media (max-width: 767.98px) {
  .ad-device-mobile { display: block; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .ad-device-tablet { display: block; }
}
@media (min-width: 992px) {
  .ad-device-desktop { display: block; }
}

/* ---------- Popup ad ---------- */
.ad-popup-modal .modal-content { border-radius: 16px; overflow: hidden; }
.ad-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  background: #fff;
  border-radius: 50%;
  opacity: 1;
  width: 32px;
  height: 32px;
}

/* ---------- Sticky ad ---------- */
.ad-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  background: #fff;
  border-top: 1px solid var(--border, #e9ecef);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
  padding: 8px 40px 8px 12px;
  text-align: center;
}
[data-bs-theme="dark"] .ad-sticky-bar { background: #1a1e27; }
.ad-sticky-bar .ad-slot { margin: 0; }
.ad-sticky-close {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--muted, #6b7280);
  cursor: pointer;
  padding: 4px 8px;
}