/* mg-multistep.css — self-contained styles for the [mg_multistep] engine.
   No CDN, no external fonts. Namespace .mg-ms. Brand: #1e40af / #1e3a8a. RTL. */

.mg-ms{
    --mg-primary:#1e40af; --mg-dark:#1e3a8a; --mg-border:#dbe2f5; --mg-muted:#4b5563;
    --mg-bg:#f7f9fd; --mg-error:#d64545;
    --mg-green:#16a34a;      /* graphics: checkmark / progress bar / confetti (3:1 for non-text) */
    --mg-green-text:#15803d; /* feedback TEXT: meets WCAG AA 4.5:1 on white */
    --mg-ink:#1f2937;        /* select control text - dark, distinct from the navy title */
    font-family:'Heebo', system-ui, sans-serif; direction:rtl; text-align:right;
    box-sizing:border-box; max-width:560px; width:100%; margin:0 auto;
    background:#fff; border:1px solid var(--mg-border); border-radius:16px;
    padding:20px 18px; color:var(--mg-dark);
}
.mg-ms *{ box-sizing:border-box; }
.mg-ms__sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Progress bar (endowed) */
.mg-ms__progress{ height:6px; background:#e8eefc; border-radius:999px; overflow:hidden; margin:0 0 18px; }
.mg-ms__bar{ display:block; height:100%; width:15%; background:var(--mg-primary); border-radius:999px; transition:width .25s ease; }

/* Steps */
.mg-ms__step{ border:0; margin:0; padding:0; min-width:0; }
.mg-ms__step[hidden]{ display:none; }
.mg-ms__q{ display:block; font-size:20px; font-weight:800; line-height:1.35; color:var(--mg-dark); margin:0 0 16px; padding:0; }
.mg-ms__q:focus{ outline:none; }
.mg-ms__q:focus-visible{ outline:2px solid var(--mg-primary); outline-offset:3px; border-radius:6px; }

/* Option buttons (choices + ranges) */
.mg-ms__opts{ display:flex; flex-direction:column; gap:10px; }
.mg-ms__opts--choice{ flex-direction:row; flex-wrap:wrap; }
.mg-ms__opts--service{ gap:12px; }
.mg-ms__opt{
    min-height:52px; padding:12px 16px; font-family:inherit; font-size:16px; font-weight:600;
    color:var(--mg-dark); background:#fff; border:1.5px solid var(--mg-border); border-radius:12px;
    cursor:pointer; text-align:right; width:100%; transition:border-color .12s ease, background .12s ease;
}
.mg-ms__opts--choice .mg-ms__opt{ width:auto; flex:1 1 120px; text-align:center; }
.mg-ms__opt:hover{ border-color:var(--mg-primary); background:var(--mg-bg); }
.mg-ms__opt:focus-visible{ outline:2px solid var(--mg-primary); outline-offset:2px; }
.mg-ms__opt.is-sel,
.mg-ms__opt[aria-pressed="true"]{ border-color:var(--mg-primary); background:var(--mg-primary); color:#fff; }
.mg-ms__opt--service{ font-weight:700; }

/* Single-screen Stage 2: intro line + stacked question groups */
.mg-ms__lead{ font-size:14px; font-weight:600; color:var(--mg-muted); margin:0 0 14px; }
.mg-ms__group{ margin:0 0 18px; }
.mg-ms__q2{ display:block; font-size:16px; font-weight:700; color:var(--mg-dark); margin:0 0 10px; }

/* Stage-2 native dropdowns (single-screen enrichment). Custom arrow is an inline
   data-URI SVG (no CDN). RTL: text right-aligned, arrow on the left with clearance. */
.mg-ms__select{
    width:100%; min-height:52px; font-family:inherit; font-size:16px; font-weight:600;
    color:var(--mg-ink); background-color:#fff; border:1.5px solid var(--mg-border);
    border-radius:12px; padding:12px 14px; padding-inline-end:42px; text-align:right; cursor:pointer;
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e3a8a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:left 14px center; background-size:18px;
}
.mg-ms__select:hover{ border-color:var(--mg-primary); }
.mg-ms__select:focus{ outline:none; border-color:var(--mg-primary); box-shadow:0 0 0 4px rgba(30,64,175,.12); }
.mg-ms__select:focus-visible{ outline:2px solid var(--mg-primary); outline-offset:2px; }

/* Text inputs (name / phone / code) */
.mg-ms__field{ display:block; margin:0 0 12px; }
.mg-ms__field span{ display:block; font-size:14px; font-weight:600; color:var(--mg-muted); margin:0 0 6px; }
.mg-ms__field input,
.mg-ms__code{
    width:100%; height:52px; font-family:inherit; font-size:16px; color:var(--mg-dark);
    background:#fff; border:1.5px solid var(--mg-border); border-radius:12px; padding:0 14px; text-align:right;
}
.mg-ms__code{ letter-spacing:.35em; text-align:center; }
.mg-ms__field input:focus,
.mg-ms__code:focus{ outline:none; border-color:var(--mg-primary); box-shadow:0 0 0 4px rgba(30,64,175,.12); }

/* Primary action + link + error + notes */
.mg-ms__next{
    display:inline-flex; align-items:center; justify-content:center; min-height:52px; width:100%;
    margin-top:6px; padding:0 20px; font-family:inherit; font-size:16px; font-weight:700;
    color:#fff; background:var(--mg-primary); border:none; border-radius:12px; cursor:pointer;
}
.mg-ms__next:hover{ background:var(--mg-dark); }
/* Contrast guard: keep the label WHITE and full-opacity in every interactive state
   (beats the global button[type=submit]:hover{opacity:.7} that washes out contrast). */
.mg-ms__next:hover,.mg-ms__next:focus,.mg-ms__next:active,
.mg-ms__prize:hover,.mg-ms__prize:focus,.mg-ms__prize:active{ color:#fff; opacity:1; }
.mg-ms__next:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(30,64,175,.3); }
.mg-ms__link{
    display:block; margin:10px auto 0; padding:8px; background:none; border:none; cursor:pointer;
    font-family:inherit; font-size:13.5px; font-weight:600; color:var(--mg-primary); text-decoration:underline;
}
.mg-ms__link:focus-visible{ outline:2px solid var(--mg-primary); outline-offset:2px; }
.mg-ms__err{ color:var(--mg-error); font-size:13.5px; font-weight:600; margin:8px 0 0; }
.mg-ms__consent{ font-size:12px; line-height:1.5; color:var(--mg-muted); margin:12px 0 0; }
.mg-ms__consent a{ color:var(--mg-primary); font-weight:700; text-decoration:underline; }
.mg-ms__note{ font-size:15px; line-height:1.6; color:var(--mg-muted); margin:0 0 16px; }

/* Thank-you prize link */
.mg-ms__prize{
    display:inline-flex; align-items:center; justify-content:center; min-height:52px; width:100%;
    padding:0 20px; font-size:16px; font-weight:700; color:#fff; background:var(--mg-primary);
    border-radius:12px; text-decoration:none;
}
.mg-ms__prize:hover{ background:var(--mg-dark); color:#fff; }
.mg-ms__prize:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(30,64,175,.3); }

/* ============================================================================
   Deployed sidebar/popup extension (3-stage): constant-height frame + animation.
   Scoped to .mg-ms--ext so the standalone [mg_multistep] engine is unaffected.
   ============================================================================ */
/* Constant frame height across the extension steps (SMS / Stage 2 / Stage 3 /
   thank-you) so the card never jumps size; the single visible step is centered. */
.mg-ms--ext{ position:relative; min-height:512px; display:flex; flex-direction:column; justify-content:center; padding-top:30px; }
.mg-ms--ext .mg-ms__step{ width:100%; }
.mg-ms--ext .mg-ms__step[hidden]{ display:none; }
.mg-ms--ext .mg-ms__group{ margin:0 0 12px; }
/* If a step ever exceeds the frame, scroll inside it (frame stays constant). */
.mg-ms--ext .mg-ms__step:not([hidden]){ max-height:640px; overflow-y:auto; }
/* Thin GREEN progress bar pinned to the top of the frame (out of the centering flow). */
.mg-ms--ext .mg-ms__progress{ position:absolute; top:14px; left:18px; right:18px; margin:0; }
.mg-ms--ext .mg-ms__bar{ background:var(--mg-green); width:12%; }

/* Small GREEN progress-feedback line at the top of a step (slides/fades in). */
.mg-ms__feedback{ margin:0 0 12px; font-size:14px; font-weight:700; line-height:1.4; color:var(--mg-green-text); }
.mg-ms__feedback.is-play{ animation:mg-fb-in .26s ease both; }
@keyframes mg-fb-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* Post-Stage-2 self-drawing GREEN checkmark ring + small scale bounce (CSS-only, no images/CDN). */
.mg-ms__anim{ display:flex; justify-content:center; margin:0 0 10px; }
.mg-ms__anim svg{ width:56px; height:56px; }
.mg-ms__anim-ring{ fill:none; stroke:var(--mg-border); stroke-width:3; transform:rotate(-90deg); transform-origin:center; }
.mg-ms__anim-check{ fill:none; stroke:var(--mg-green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; }
.mg-ms__anim.is-play{ animation:mg-pop .16s ease; }
.mg-ms__anim.is-play .mg-ms__anim-ring{ stroke:var(--mg-green); stroke-dasharray:145; stroke-dashoffset:145; animation:mg-ring .5s ease forwards; }
.mg-ms__anim.is-play .mg-ms__anim-check{ animation:mg-check .45s .38s ease forwards; }
@keyframes mg-ring{ to{ stroke-dashoffset:0; } }
@keyframes mg-check{ to{ stroke-dashoffset:0; } }
@keyframes mg-pop{ 0%{ transform:scale(.85); } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); } }

/* CSS-only confetti burst on thank-you (JS injects the pieces, then removes them ~3s later). */
.mg-ms__confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; border-radius:16px; }
.mg-ms__confetti-pc{ position:absolute; top:-14px; width:8px; height:12px; border-radius:2px; opacity:0; animation:mg-confetti 2.6s ease-in forwards; }
@keyframes mg-confetti{
    0%{ opacity:1; transform:translateY(-10px) translateX(0) rotate(0deg); }
    100%{ opacity:0; transform:translateY(540px) translateX(var(--mg-cf-x,0)) rotate(540deg); }
}

@media (prefers-reduced-motion:reduce){
    .mg-ms__feedback.is-play{ animation:none; }
    .mg-ms__anim.is-play{ animation:none; }
    .mg-ms__anim.is-play .mg-ms__anim-ring,
    .mg-ms__anim.is-play .mg-ms__anim-check{ animation:none; }
    .mg-ms__anim.is-play .mg-ms__anim-ring{ stroke-dashoffset:0; }
    .mg-ms__anim-check{ stroke-dashoffset:0; }
    .mg-ms__confetti{ display:none; }
}

@media (max-width:600px){
    .mg-ms{ padding:16px 14px; border-radius:14px; }
    .mg-ms__q{ font-size:18px; }
    .mg-ms__opts--choice .mg-ms__opt{ flex:1 1 100%; }
    .mg-ms--ext{ min-height:480px; }
}

/* ============================================================================
   Mortgage LIFE insurance: thank-you offer + sub-flow. BOTH instances (inline +
   sidebar/popup), scoped to .mg-ms--ext. Explicit hex (self-contained, no reliance
   on inline-only vars). The checkmark-animation SIZE stays inline-only (see
   mg-inline-form.css: sidebar keeps 56px). Blue keyword = #1e3a8a.
   ============================================================================ */
.mg-ms--ext .mgi-hl{ color:#1e3a8a; font-weight:700; }

/* Offer block - FIRST on the thank-you = the primary action. */
.mg-ms--ext .mg-ins-offer{ margin:0 0 4px; text-align:right; }
.mg-ms--ext .mg-ins-offer__h{
    margin:0 0 6px; font-size:17px; font-weight:400; line-height:1.5; color:#1f2937;
}
.mg-ms--ext .mg-ins-offer__sub{
    margin:0 0 10px; font-size:13px; font-weight:400; line-height:1.5; color:#6B7280;
}
.mg-ms--ext .mg-ins-offer__list{ list-style:none; margin:0 0 12px; padding:0; }
.mg-ms--ext .mg-ins-offer__li{
    display:flex; align-items:center; gap:8px; margin:0 0 6px;   /* 6px bullet spacing */
    font-size:15px; font-weight:400; line-height:1.5; color:#1f2937;
}
.mg-ms--ext .mg-ins-offer__ic{ flex:0 0 auto; width:16px; height:16px; color:#6B7280; }
.mg-ms--ext .mg-ins-offer__txt{ min-width:0; }

/* THE one primary filled-blue button. White label pinned in EVERY state (beats the
   article link-color rule that caused blue-on-blue, and the global submit:hover opacity). */
.mg-ms--ext .mg-ins-offer__yes{
    display:block; width:100%; min-height:50px; margin:0 0 8px; padding:12px 20px;
    font-family:inherit; font-size:16px; font-weight:700; cursor:pointer;
    color:#fff !important; opacity:1 !important; background:#1e40af; border:1px solid #1e40af; border-radius:12px;
}
.mg-ms--ext .mg-ins-offer__yes:hover,
.mg-ms--ext .mg-ins-offer__yes:focus,
.mg-ms--ext .mg-ins-offer__yes:active,
.mg-ms--ext .mg-ins-offer__yes:visited{ color:#fff !important; opacity:1 !important; background:#1e3a8a; border-color:#1e3a8a; }
.mg-ms--ext .mg-ins-offer__yes:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(30,64,175,.3); }

/* Decline = small muted text link. */
.mg-ms--ext .mg-ins-offer__no{
    display:block; margin:0 auto; padding:6px; background:none; border:0; cursor:pointer;
    font-family:inherit; font-size:13.5px; font-weight:600; color:#5A6274; text-decoration:underline;
}
.mg-ms--ext .mg-ins-offer__no:hover{ color:#1f2937; }
.mg-ms--ext .mg-ins-offer__no:focus-visible{ outline:2px solid #1e40af; outline-offset:2px; }

/* Agent / comparison block - secondary when the offer is present. */
.mg-ms--ext .mg-ms__agent--secondary{ margin-top:12px; padding-top:12px; border-top:1px solid #DDE3F0; }
.mg-ms--ext .mg-ms__agentline{
    margin:0 0 6px; font-size:13px; font-weight:400; line-height:1.5; color:#5A6274; text-align:center;
}
.mg-ms--ext .mg-ms__cmp{ display:block; text-align:center; text-decoration:none; }
/* Secondary CTA = navy text link on transparent (NOT filled). Pinned navy so the article
   link-color rule cannot recolor it. */
.mg-ms--ext .mg-ms__cmp--link{
    margin:8px auto 0; padding:6px; font-size:14px; font-weight:700;
    color:#1e3a8a !important; text-decoration:underline; text-underline-offset:3px;
}
.mg-ms--ext .mg-ms__cmp--link:hover,
.mg-ms--ext .mg-ms__cmp--link:focus,
.mg-ms--ext .mg-ms__cmp--link:visited{ color:#1e3a8a !important; }
/* No offer -> the comparison CTA is the ONE primary filled button (white pinned). */
.mg-ms--ext .mg-ms__cmp--primary{
    display:inline-flex; align-items:center; justify-content:center;
    width:100%; min-height:50px; margin:10px 0 0; padding:12px 20px; border-radius:12px;
    font-size:16px; font-weight:700; color:#fff !important; opacity:1 !important; background:#1e40af;
}
.mg-ms--ext .mg-ms__cmp--primary:hover,
.mg-ms--ext .mg-ms__cmp--primary:focus,
.mg-ms--ext .mg-ms__cmp--primary:active,
.mg-ms--ext .mg-ms__cmp--primary:visited{ color:#fff !important; opacity:1 !important; background:#1e3a8a; }
.mg-ms--ext .mg-ms__cmp--primary:focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(30,64,175,.3); }

/* Selected-option checkmark (gender / smoking). The shared .mg-ms__opt.is-sel already
   fills blue with white text; this adds the CHECK so the click is acknowledged. */
.mg-ms--ext [data-ins-choice] .mg-ms__opt{ position:relative; transition:background-color .12s ease, border-color .12s ease; }
.mg-ms--ext [data-ins-choice] .mg-ms__opt.is-sel{ padding-inline-start:30px; }
.mg-ms--ext [data-ins-choice] .mg-ms__opt.is-sel::before{
    content:""; position:absolute; inset-inline-start:10px; top:50%;
    width:12px; height:7px; margin-top:-5px;
    border-inline-start:2.5px solid #fff; border-bottom:2.5px solid #fff;
    transform:rotate(-45deg); transform-origin:center;
}

/* Age slider 20-100. */
.mg-ms--ext .mg-ms__slider{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:0 0 14px; }
.mg-ms--ext .mg-ms__slider-val{ font-size:26px; font-weight:700; line-height:1.2; color:#1e40af; }
.mg-ms--ext .mg-ms__range{
    width:100%; max-width:340px; height:44px; margin:0; padding:0;
    background:none; border:0; cursor:pointer; accent-color:#1e40af; direction:ltr;
}
.mg-ms--ext .mg-ms__range:focus-visible{ outline:2px solid #1e40af; outline-offset:2px; }

/* National-ID text input + native issue-date input - IDENTICAL box so they line up.
   16px = no iOS zoom. */
.mg-ms--ext .mg-ms__text,
.mg-ms--ext .mg-ms__date{
    box-sizing:border-box; width:100%; height:50px; min-height:50px; padding:0 14px;
    font-family:inherit; font-size:16px; color:#1f2937;
    background:#fff; border:1px solid #DDE3F0; border-radius:12px;   /* NOT a pill radius */
}
.mg-ms--ext .mg-ms__text::placeholder{ color:#8A93A6; }
.mg-ms--ext .mg-ms__text:focus-visible,
.mg-ms--ext .mg-ms__date:focus-visible{ outline:2px solid #1e40af; outline-offset:1px; }
.mg-ms--ext .mg-ms__text[aria-invalid="true"],
.mg-ms--ext .mg-ms__date[aria-invalid="true"]{ border-color:#D92D20; }

/* Native <input type="date">: one field, browser picker. iOS Safari collapses the height
   and applies a pill look unless we pin textfield appearance + explicit height (above). */
.mg-ms--ext .mg-ms__date{
    -webkit-appearance:textfield; appearance:textfield;
    direction:rtl; text-align:right; cursor:pointer;
}
.mg-ms--ext .mg-ms__date::-webkit-date-and-time-value{ text-align:right; }   /* value hugs the RTL side */
/* Calendar icon visible + clickable; direction:rtl already places it on the RTL (left) side. */
.mg-ms--ext .mg-ms__date::-webkit-calendar-picker-indicator{ opacity:.7; cursor:pointer; }
.mg-ms--ext .mg-ms__date::-webkit-calendar-picker-indicator:hover{ opacity:1; }

/* Insurance thank-you: a full sentence, not the big question size. */
.mg-ms--ext .mg-ms__q--ty{ font-size:16px; font-weight:700; line-height:1.6; color:#1f2937; text-align:center; }

/* Sub-flow red field errors (both instances). */
.mg-ms--ext .mg-ms__fielderr{
    margin:4px 0 0; padding:0; font-family:inherit; font-size:13px; font-weight:500;
    line-height:1.4; color:#D92D20; text-align:right; direction:rtl;
}
.mg-ms--ext .mg-ms__fielderr[hidden]{ display:none; }
.mg-ms--ext .mg-ms__fielderr.is-play{ animation:mg-fb-in .2s ease both; }

@media (prefers-reduced-motion:reduce){
    .mg-ms--ext [data-ins-choice] .mg-ms__opt{ transition:none; }
    .mg-ms--ext .mg-ms__fielderr.is-play{ animation:none; }
}
@media (max-width:600px){
    /* Keep each offer bullet to ONE line at 390px (task rule: shrink before changing copy). */
    .mg-ms--ext .mg-ins-offer__li{ font-size:14.5px; }
    .mg-ms--ext .mg-ins-offer__h{ font-size:16px; }
}