/* Base visibility */
.ai-popup.hidden { display:none; }

/* Dim background */
.ai-popup__backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 10000;
}

/* Modal dialog — responsive + safe sizing */
.ai-popup__dialog {
  position: fixed; z-index: 10001; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff; color:#111;

  /* Width/height guards */
  width: 92vw;              /* never wider than viewport */
  max-width: 560px;         /* desktop cap */
  max-height: 90vh;         /* never taller than viewport */
  overflow: auto;           /* scroll INSIDE the dialog if content is tall */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Content */
.ai-popup__image img {
  display:block;
  width:100%;            /* image never wider than dialog */
  height:auto;
  max-height: 50vh;      /* keep hero images from dominating small screens */
  object-fit: cover;
}
.ai-popup__headline { margin: 16px 20px 8px; font-size: 1.25rem; line-height:1.2; }
.ai-popup__body { margin: 0 20px 16px; line-height:1.5; }
.ai-popup__cta { padding: 0 20px 20px; }
.ai-popup__button {
  display:inline-block; padding:10px 16px; text-decoration:none; border-radius:8px;
  background:#1f4c65; color:#fff; font-weight:600;
}
.ai-popup__close {
  position:absolute; right:10px; top:8px; border:0; background:transparent;
  font-size:24px; line-height:1; cursor:pointer; color:#555;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  .ai-popup__dialog { background:#111; color:#f0f0f0; }
  .ai-popup__button { background:#2f7dd3; }
}

/* Small phones: a tad narrower + tighter spacing */
@media (max-width: 420px) {
  .ai-popup__dialog { width: 88vw; border-radius: 12px; }
  .ai-popup__headline { margin: 12px 14px 6px; font-size: 1.1rem; }
  .ai-popup__body { margin: 0 14px 12px; }
  .ai-popup__cta { padding: 0 14px 16px; }
}

/* Lock page scroll while modal is open */
.ai-no-scroll,
.ai-no-scroll body {
  overflow: hidden !important;
  height: 100% !important;
}