/**
 * BGS Email Popup — Core Overlay Styles
 * Author: Bogoshi Tech Space (https://bogoshi.co.za)
 *
 * This file handles ONLY the outer fixed overlay wrapper and open/close state.
 * Template-specific card styles live in templates/{id}/dist/style.css.
 *
 * Uses !important on positioning/display rules so no theme CSS can accidentally
 * hide or misplace the overlay. Everything else is normal specificity.
 */

/* ── Overlay wrapper ───────────────────────────────────────────────────────── */
#bgs-email-popup {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  display: none !important;       /* hidden by default */
  align-items: flex-start !important; /* flex-start + margin:auto on inner avoids Chrome bottom-clipping bug */
  justify-content: center !important;
  padding: 2rem 1.25rem !important;   /* breathing room on all sides */
  background: transparent !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
}

/* Open state — added by popup.js */
#bgs-email-popup.is-open {
  display: flex !important;
}

/* ── Backdrop / scrim ──────────────────────────────────────────────────────── */
#bgs-email-popup .bgs-popup-overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  z-index: 0;
}

/* ── Inner container (holds the template card) ─────────────────────────────── */
#bgs-email-popup .bgs-popup-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: auto;   /* vertically centres when viewport is tall enough */
}

/* ── Entry animation ───────────────────────────────────────────────────────── */
@keyframes bgsPopupIn {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

#bgs-email-popup.is-open .bgs-popup-inner {
  animation: bgsPopupIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Accessibility ─────────────────────────────────────────────────────────── */
/* Prevent body scroll while popup is open — applied by JS */
body.bgs-popup-open {
  overflow: hidden;
}