/* CTA Pop‑Up Maker – front.css v1.1.0 */
:root {
  --cta-bg: #111827;
  --cta-fg: #f9fafb;
  --cta-title: var(--cta-fg);
  --cta-accent: #3b82f6;
  --cta-accent-contrast: #ffffff;
  --cta-border: rgba(255,255,255,0.12);
  --cta-shadow: 0 20px 40px rgba(0,0,0,.35);
  --cta-radius: 16px;
  --cta-width: 420px;
  --cta-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}
.cta-overlay[data-theme="dark"] {
  --cta-bg: #111827;
  --cta-fg: #f9fafb;
  --cta-title: #f9fafb;
  --cta-accent: #3b82f6;
  --cta-accent-contrast: #ffffff;
  --cta-border: rgba(255,255,255,0.12);
  --cta-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.cta-overlay[data-theme="light"] {
  --cta-bg: #ffffff;
  --cta-fg: #0f172a;
  --cta-title: #0b1220;
  --cta-accent: #3b82f6;
  --cta-accent-contrast: #ffffff;
  --cta-border: rgba(15,23,42,0.12);
  --cta-shadow: 0 20px 40px rgba(2,6,23,.15);
}
.cta-overlay[data-theme="emerald"] {
  --cta-bg: #042f2e;
  --cta-fg: #ecfdf5;
  --cta-title: #ecfdf5;
  --cta-accent: #10b981;
  --cta-accent-contrast: #052e2b;
  --cta-border: rgba(16,185,129,0.25);
  --cta-shadow: 0 20px 40px rgba(4,47,46,.35);
}
.cta-overlay[data-theme="rose"] {
  --cta-bg: #3b0a19;
  --cta-fg: #ffe4e6;
  --cta-title: #ffe4e6;
  --cta-accent: #f43f5e;
  --cta-accent-contrast: #fff1f2;
  --cta-border: rgba(244,63,94,0.28);
  --cta-shadow: 0 20px 40px rgba(63,12,24,.35);
}
.cta-overlay[data-theme="amber"] {
  --cta-bg: #1f1300;
  --cta-fg: #fffbeb;
  --cta-title: #fffbeb;
  --cta-accent: #f59e0b;
  --cta-accent-contrast: #1f1300;
  --cta-border: rgba(245,158,11,0.28);
  --cta-shadow: 0 20px 40px rgba(31,19,0,.35);
}

.cta-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center;
  z-index:999999; animation: cta-fade .25s ease;
}
.cta-overlay.is-open{ display:flex; }
.cta-dialog{
  width: min(var(--cta-width), calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow:auto; background:var(--cta-bg); color:var(--cta-fg);
  border:1px solid var(--cta-border); border-radius:16px;
  box-shadow: var(--cta-shadow);
  font-family: var(--cta-font);
  transform: translateY(12px); opacity:0; animation: cta-pop .25s ease forwards;
}
.cta-header{ padding:18px 20px 8px; }
.cta-title{ margin:0; color: var(--cta-title, var(--cta-fg)); font-size:1.25rem; line-height:1.3; }
.cta-body{ padding:0 20px 16px; opacity:.92; }
.cta-actions{ padding:0 20px 20px; display:flex; gap:10px; flex-wrap:wrap; }
.cta-btn{
  appearance:none; border:0; cursor:pointer;
  padding:12px 16px; border-radius:12px; font-weight:600;
  transition: transform .06s ease, filter .2s ease; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.cta-btn:active{ transform: translateY(1px) scale(.99); }
.cta-btn.primary{ background: var(--cta-accent); color: var(--cta-accent-contrast); }
.cta-btn.secondary{ background: transparent; color: var(--cta-fg); border:1px dashed var(--cta-border); }
.cta-footer-row{ padding:0 20px 18px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.cta-close{ background:transparent; border:0; color:var(--cta-fg); opacity:.7; cursor:pointer; font-size:14px; }
.cta-close:hover{ opacity:1; }
.cta-badge{ font-size:12px; opacity:.6; }
.cta-overlay.br{ justify-content:flex-end; align-items:flex-end; padding:14px; background:transparent; }
.cta-overlay.br .cta-dialog{ box-shadow: 0 10px 24px rgba(0,0,0,.28); }
@keyframes cta-pop{ to{ transform: translateY(0); opacity:1; } }
@keyframes cta-fade{ from{ opacity:0; } to{ opacity:1; } }
.cta-btn:focus, .cta-close:focus{ outline:2px solid var(--cta-accent); outline-offset:2px; }