/* ═══════════════════════════════════════════════════════
   CricBun — Popup / overlay advertisement
   Loaded globally via the main layout (all public pages).
   Uses the global-shell design tokens so it themes with the
   rest of the site (light/dark).

   Structure (see _popup-ad.php + popup-ad.js):
     .popupad-overlay#popupAd   fixed full-screen flex container
       .popupad-backdrop        click-to-close dim layer
       .popupad-dialog          the card (role=dialog)
         .popupad-close         X button
         .popupad-tag           "Advertisement" label
         .popupad-body          image link or raw code

   Visibility: the overlay carries the `hidden` attribute when
   closed (display:none). JS removes it, forces a reflow, then
   adds `.on` so the fade/scale transition runs.

   Layering: sits above content + flash (50) but below the
   mobile nav panel (60), so navigation is never trapped.
   ═══════════════════════════════════════════════════════ */

.popupad-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .28s var(--ease);
}

.popupad-overlay[hidden] {
  display: none;
}

.popupad-overlay.on {
  opacity: 1;
}

.popupad-backdrop {
  position: absolute;
  inset: 0;
  background: oklch(20% .025 238deg / .55);
  cursor: pointer;
}

.popupad-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  transform: translateY(14px) scale(.98);
  transition: transform .28s var(--ease);
}

.popupad-overlay.on .popupad-dialog {
  transform: translateY(0) scale(1);
}

.popupad-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  line-height: 1;
  cursor: pointer;
}

.popupad-close:hover {
  background: var(--paper-2);
}

.popupad-tag {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 2;
  font-size: .48rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper);
  background: oklch(20% .025 238deg / .6);
  padding: 3px 7px;
  border-radius: 5px;
}

.popupad-link {
  display: block;
  line-height: 0;
}

.popupad-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

/* Raw ad code (AdSense / custom HTML) sits in a padded well */
.popupad-code {
  padding: 26px 20px 20px;
}

/* Scroll-lock the page while the popup is open */
body.popupad-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .popupad-overlay,
  .popupad-dialog {
    transition: none;
  }
}