/* mg-inline-form.css — in-article lead form (approved compact spec). Enqueued as a real stylesheet. Namespaced .mgi-* / .mgiForm. Shares the multi-step engine (.mg-ms) via mg-form-extend.js. No CDN. RTL. Spec class map (generic -> real): guru-embed=.mgiForm, guru-card=.mgi-formview, guru-badges=.mgi-pills, guru-badge=.mgi-pill, guru-choices=.mgi-goals, guru-choice=.mgi-goal, guru-choice__icon=.mgi-goal__ic, guru-choice__title=.mgi-goal__t, guru-choice__desc=.mgi-goal__s, guru-title=.mgi-headline. */ .mgiForm{ --mgi-blue:#1e40af; --mgi-dark:#1e3a8a; --mgi-border:#DDE3F0; --mgi-muted:#5A6274; --mgi-err:#D64545; --mgi-purple:#6D28D9; --mgi-purple-bg:#EDE9FE; --mgi-orange:#B45309; --mgi-orange-bg:#FFF3E0; font-family:'Heebo', system-ui, sans-serif; direction:rtl; text-align:right; box-sizing:border-box; width:100%; max-width:720px; margin:20px auto; /* desktop cap */ } .mgiForm *{ box-sizing:border-box; } /* Card: fills the embed (no narrow inner cap, no forced min-height). Both sub-screens live inside; height flows to content. */ .mgiForm .mgi-formview{ width:100%; max-width:none; margin-inline:auto; display:flex; flex-direction:column; background:#fff; border:1px solid #e6ebf5; border-radius:20px; box-shadow:0 14px 40px -16px rgba(30,58,138,.22), 0 2px 6px -3px rgba(30,58,138,.12); padding:28px 32px; } .mgiForm .mgi-screen[hidden]{ display:none; } /* Message row of badges — wrapping flex row, each badge sizes to content. */ .mgiForm .mgi-pills{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:0 0 12px; } .mgiForm .mgi-pill{ display:inline-flex; align-items:center; gap:5px; width:auto; padding:4px 10px; font-size:11.5px; font-weight:700; border-radius:999px; line-height:1; white-space:nowrap; color:var(--mgi-dark); /* clean text, no background */ } .mgiForm .mgi-pill svg{ width:12px; height:12px; flex:0 0 auto; } .mgiForm .mgi-pill--ai{ color:var(--mgi-purple); } .mgiForm .mgi-pill--time{ color:var(--mgi-orange); } /* Rate badge: the important one — KEEPS its background/emphasis + gentle FINITE pulse. */ .mgiForm .mgi-pill--rate{ position:relative; background:#EEF2FF; border:1px solid #C7D2F0; padding:5px 11px; animation:mgi-rate-pulse 1.5s ease-in-out 2 both; } .mgiForm .mgi-pill--rate::after{ content:""; position:absolute; inset:-3px; border-radius:999px; z-index:-1; background:rgba(30,64,175,.25); opacity:0; animation:mgi-rate-glow 1.5s ease-in-out 2 both; } @keyframes mgi-rate-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } } @keyframes mgi-rate-glow{ 0%,100%{ opacity:0; } 50%{ opacity:.55; } } /* Heading (dark blue, 800). */ .mgiForm .mgi-headline{ font-size:20px; font-weight:800; color:#1e3a8a; line-height:1.3; letter-spacing:-.3px; text-align:center; margin:0 0 12px; } /* The ONE feedback line per screen: small, green, at the TOP, above the inputs. Same green accent + subtle fade as the engine's .mg-ms__feedback. */ .mgiForm .mgi-feedback{ margin:0 0 10px; font-size:13px; font-weight:700; line-height:1.45; color:#15803d; text-align:center; } .mgiForm .mgi-feedback.is-play{ animation:mgi-fb-in .26s ease both; } @keyframes mgi-fb-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } } /* Two choice cards — identical, equal width, centered column (icon on top). */ .mgiForm .mgi-goals{ display:flex; gap:12px; margin:0 0 12px; } .mgiForm .mgi-goal{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:12px 10px; cursor:pointer; font-family:inherit; background:#fff; border:1.5px solid var(--mgi-border); border-radius:12px; transition:border-color .12s ease, background .12s ease, box-shadow .12s ease; } .mgiForm .mgi-goal:hover{ border-color:var(--mgi-blue); background:#F6F8FF; } .mgiForm .mgi-goal.is-sel{ border-color:var(--mgi-blue); background:#EEF2FF; box-shadow:0 0 0 3px rgba(30,64,175,.12); } .mgiForm .mgi-goal:focus-visible{ outline:2px solid var(--mgi-blue); outline-offset:2px; } /* Icon slot — inline SVG only (no external load). Swap the inner