/*
 * Social AI Advantage 2.0 — page + popup styles (extracted from Elementor)
 *
 * This file holds all CSS formerly carried inline by two Elementor `html`
 * widgets: the hero counter card on page 25676 and the offer controls inside
 * the Elementor Pro popup. The inline <style> blocks were stripped by
 * WordPress KSES when the templates were installed via WP-CLI as user 0, so
 * the styles now live here in the child theme instead.
 *
 * Pairs with social-ai-2.js (same extraction, same conditional enqueue).
 * Enqueue ONLY on page 25676 — these selectors are page/popup specific.
 *
 * Fonts: page uses theme fonts — 'Inter' for headings/numerals/scores/prices,
 * 'Poppins' for body copy, labels, and chip prose (the mockup's display
 * faces are gone). No external URLs in this file.
 */

/* ---------------------------------------------------------------- */
/* Hero counter card (.npmg-cc*) — page 25676                        */
/* ---------------------------------------------------------------- */

.npmg-cc{font-family:'Poppins',sans-serif;color:#FFFFFF;}
.npmg-cc-counter-row{display:flex;align-items:center;gap:16px;margin:14px 0 18px;}
.npmg-cc-num{font-family:'Inter',sans-serif;font-size:58px;font-weight:700;line-height:1;color:#F18F1F;min-width:2ch;font-variant-numeric:tabular-nums;}
.npmg-cc-label{font-size:13px;font-weight:600;line-height:1.4;color:rgba(255,255,255,0.85);text-transform:uppercase;letter-spacing:0.07em;}
.npmg-cc-chips{position:relative;min-height:68px;}
.npmg-cc-chip{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.16);border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.4;color:#FFFFFF;opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;pointer-events:none;}
.npmg-cc-chip.is-on{opacity:1;transform:none;}
.npmg-cc-score{font-family:'Inter',sans-serif;font-weight:700;font-size:15px;color:#F18F1F;white-space:nowrap;}
.npmg-cc-score::before{content:"\2605\00a0";font-size:12px;}

/* ---------------------------------------------------------------- */
/* Popup offer controls (.npmg-oc*) — Elementor Pro popup            */
/* ---------------------------------------------------------------- */

.npmg-oc{font-family:'Poppins',sans-serif;margin:2px 0 6px;}
.npmg-oc-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:#6B7280;margin-bottom:6px;}
.npmg-oc-plan{margin-bottom:16px;}
.npmg-oc-plan-line{display:flex;align-items:baseline;gap:12px;}
#npmgPlanName{font-family:'Inter',sans-serif;font-size:24px;font-weight:600;color:#1C2642;}
#npmgPlanPrice{font-family:'Inter',sans-serif;font-size:17px;font-weight:700;color:#1C2642;}
#npmgPlanChange{margin-left:auto;font-size:13px;font-weight:600;color:#F18F1F;text-decoration:underline;cursor:pointer;}
.npmg-oc-terms{border:0;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap;}
.npmg-oc-terms legend{padding:0;}
.npmg-oc-term{flex:1 1 0;min-width:128px;display:flex;flex-direction:column;gap:2px;border:2px solid #E7E4DC;border-radius:12px;padding:12px 14px;cursor:pointer;background:#FFFFFF;transition:border-color .15s ease,background .15s ease;}
.npmg-oc-term input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.npmg-oc-term.is-checked{border-color:#F18F1F;background:#FFF7EC;}
.npmg-oc-term-name{font-size:14px;font-weight:700;color:#1C2642;}
.npmg-oc-term-note{font-size:12px;font-weight:600;color:#B26A00;}
.npmg-oc-term-price{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:#1C2642;margin-top:4px;}

/* ---------------------------------------------------------------- */
/* Reduced motion                                                    */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion:reduce){.npmg-cc-chip{transition:none;}}

/* ---------------- Checkout modal (inline overlay, JS-toggled) ------------- */
/* The Elementor Pro popup was abandoned: esc_url() on this install strips
   #elementor-action URLs, so the modal is an in-page hidden overlay owned
   entirely by this stylesheet + social-ai-2.js. */
/* !important throughout: Elementor's .e-con drives display/layout via CSS
   variables and the panda theme adds its own container rules — both can
   out-cascade single-class selectors. We own these classes exclusively. */
.npmg-modal-overlay{display:none !important;position:fixed !important;inset:0 !important;z-index:99999 !important;background:rgba(28,38,66,0.66) !important;overflow-y:auto !important;padding:4vh 16px !important;margin:0 !important;max-width:none !important;}
.npmg-modal-overlay.is-open{display:block !important;}
body.npmg-modal-lock{overflow:hidden !important;}
.npmg-modal-overlay .npmg-modal-panel{display:block !important;background:#FFFFFF !important;max-width:640px !important;width:100% !important;margin:0 auto !important;border-radius:14px;padding:32px 28px !important;position:relative !important;box-shadow:0 24px 64px rgba(0,0,0,0.35);}
.npmg-modal-close{position:absolute;z-index:10;top:-14px;right:-14px;width:36px;height:36px;border:1px solid rgba(28,38,66,0.15);border-radius:50%;background:#FFFFFF;color:#1C2642;font-size:22px;line-height:1;cursor:pointer;font-family:'Poppins',sans-serif;box-shadow:0 4px 14px rgba(0,0,0,0.25);}
.npmg-modal-close:hover,.npmg-modal-close:focus{background:rgba(28,38,66,0.16);outline:2px solid #F18F1F;}
@media (prefers-reduced-motion:no-preference){
  .npmg-modal-overlay.is-open .npmg-modal-panel{animation:npmgModalIn .22s ease-out;}
  @keyframes npmgModalIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
}

/* ------------- Deterministic section layout (Elementor emission gaps) -----
   The rebuilt How It Works row and guarantee band rely on these rules rather
   than Elementor's generated container CSS, which failed to emit widths and
   the gradient for these rebuilt containers. We own these classes. */
.npmg-hiw-row{display:flex !important;flex-wrap:wrap !important;justify-content:center !important;align-items:stretch !important;gap:32px 24px !important;max-width:1140px;margin:0 auto !important;}
.npmg-hiw-card{flex:0 1 190px !important;min-width:170px;display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center;}
@media (max-width:1024px){.npmg-hiw-card{flex-basis:44% !important;}}
@media (max-width:640px){.npmg-hiw-card{flex-basis:100% !important;}}

/* How It Works diagram (attachment 25884, 16:9). Width matches .npmg-hiw-row so the
   diagram's edges align with the 5 cards. margin-top replaces a spacer widget so the
   mobile hide takes the gap with it. Hidden <=640px: at 320px wide the labels are
   unreadable and the 5 stacked cards already carry the same content as text. */
.npmg-hiw-diagram{display:block !important;width:100% !important;max-width:1140px !important;margin:48px auto 0 !important;padding:0 !important;}
.npmg-hiw-diagram > .e-con-inner{width:100% !important;max-width:none !important;padding:0 !important;}
.npmg-hiw-diagram .elementor-widget-image,
.npmg-hiw-diagram .elementor-widget-image > .elementor-widget-container{width:100% !important;margin:0 !important;}
.npmg-hiw-diagram img{display:block !important;width:100% !important;height:auto !important;aspect-ratio:16 / 9;border-radius:10px;}
@media (max-width:640px){.npmg-hiw-diagram{display:none !important;}}

/* Lead Validation — one graphic, two crops. Desktop 1.90:1, mobile 1.09:1. Same 640px
   switch as .npmg-hiw-card so the page has a single breakpoint story. */
.npmg-lv-desktop,.npmg-lv-mobile{width:100% !important;max-width:1140px !important;margin:0 auto !important;}
.npmg-lv-desktop img,.npmg-lv-mobile img{display:block !important;width:100% !important;height:auto !important;border-radius:10px;}
.npmg-lv-mobile{display:none !important;}
@media (max-width:640px){
  .npmg-lv-desktop{display:none !important;}
  .npmg-lv-mobile{display:block !important;max-width:100% !important;}
}

.elementor-element.npmg-guarantee,.npmg-guarantee{background-color:#5E2434 !important;background-image:linear-gradient(135deg,#5E2434 0%,#1C2642 100%) !important;background-size:cover !important;}
.npmg-guarantee-card{background:rgba(255,255,255,0.07) !important;border:1px solid rgba(255,255,255,0.16) !important;border-radius:12px !important;padding:20px 22px !important;max-width:520px;margin:0 auto;}

/* Pricing cards: uniform height on desktop; Plus lift via transform so it
   no longer affects layout (was margin-top:-24px, which broke stretch). */
.npmg-price-row{display:flex !important;align-items:stretch !important;}
.npmg-price-card{display:flex !important;flex-direction:column !important;height:auto !important;}
/* Boxed containers wrap children in .e-con-inner — pin through it (and cover
   the unboxed variant too). Trailing spacers after the CTA are suppressed. */
.npmg-price-card > .e-con-inner{display:flex !important;flex-direction:column !important;flex-grow:1 !important;height:auto !important;}
.npmg-price-card > .e-con-inner > .elementor-widget-button,
.npmg-price-card > .elementor-widget-button{margin-top:auto !important;}
.npmg-price-card > .e-con-inner > .elementor-widget-button ~ .elementor-element,
.npmg-price-card > .elementor-widget-button ~ .elementor-element{display:none !important;}
.elementor-element.npmg-price-featured{margin-top:0 !important;transform:translateY(-18px);}
@media (max-width:1024px){.elementor-element.npmg-price-featured{transform:none;}}