/* Generic CTA popup — used for Teams-only events (see
   ca_event_is_teams_only()/ca_render_event_card_row() in functions.php)
   wherever they appear: Events page/homepage cards AND the mega menu's
   "Upcoming Learning Opportunities" list (ca_render_mega_menu_column() in
   includes/mega-menu-render.php).

   Deliberately its own file, loaded unconditionally sitewide (see
   ca_enqueue_popup_assets() in functions.php) rather than folded into
   main.css/main.js — those are only enqueued on ca_is_clean_template()
   pages, but the mega menu (and its Teams-only trigger) appears in the
   header on every page, including regular WPBakery ones. Without this
   split, clicking a Teams-only mega-menu item on any non-clean-template
   page did nothing: the trigger markup was there (wp_footer runs
   everywhere) but neither this CSS nor popup.js's click handling was
   loaded to make it work. */
.ca-popup-overlay { display: none; position: fixed; inset: 0; background: rgba(23,24,42,.72); z-index: 99999; align-items: center; justify-content: center; padding: 24px; }
.ca-popup-overlay.is-open { display: flex; }
.ca-popup-container { max-width: 500px; width: 100%; background: #fff; border-radius: 20px; box-shadow: 0 20px 50px -12px rgba(23,24,42,.35); padding: 48px 44px 44px; position: relative; max-height: 90vh; overflow-y: auto; text-align: center; }
.ca-popup-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border: none; border-radius: 50%; cursor: pointer; font-size: 18px; line-height: 1; color: #495057; }
.ca-popup-close:hover { background: #e9ecef; color: #212529; }
.ca-popup-icon { display: block; font-size: 32px; color: var(--ca-ink-800, #17182a); margin: 0 0 22px; }
.ca-popup-heading { font-size: 28px; font-weight: 700; color: var(--ca-ink-800, #1a1a1a); margin: 0 0 18px; line-height: 1.3; }
.ca-popup-heading-accent { color: var(--ca-coral-pink, #ee486d); }
.ca-popup-body { max-width: 380px; margin: 0 auto 32px; color: #5f5d70; line-height: 1.6; font-size: 15px; }
/* Sized/shaped as an inline CTA (11px radius, 14px/500), not a big standalone
   one (pill) — this is the same visual family as the Events row/list CTAs
   this popup is triggered from (.ca-events-row__cta, .ca-cert-date-card__cta). */
.ca-popup-cta { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-md, 11px); padding: 12px 20px; font-size: 14px; font-weight: 500; background: var(--ca-coral-pink, #ee486d); color: #fff; }
.ca-popup-cta:hover { filter: brightness(.88); }
.ca-popup-cta i { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
/* padding-top needs !important — main.css's own global `p { padding: 0
   !important; }` reset otherwise wins and collapses the gap between the
   divider and this line's text, regardless of specificity. Kept
   !important here too since this file loads alongside main.css on clean
   templates, where that reset still applies globally either way. */
.ca-popup-signin { margin: 28px 0 0; padding-top: 24px !important; border-top: 1px solid #e2dfea; font-size: 14px; color: #807e91; line-height: 1.6; }
.ca-popup-signin-link { color: var(--ca-violet-700, #6c4bbe); text-decoration: underline; font-weight: 600; }

@media (max-width: 900px) {
    .ca-popup-container { padding: 35px 25px 30px; }
    .ca-popup-heading { font-size: 22px; }
}