/* MVPF — multi-step form engine.
   Kit armor throughout: the Elementor kit styles bare button/input/label and
   restyles every a:hover with the Accent font, which otherwise reshapes the
   option tiles and the footer controls. Anything shape-critical is pinned. */

/* Our controls set their own box model rather than inheriting the theme's.
   Every field is width:100% with padding, so under content-box each one ends
   up wider than the row holding it and the panel overflows the screen.
   Elementor sets border-box globally today, but whether a form fits should
   not depend on a theme. */
.mvpf-wiz,
.mvpf-wiz *,
.mvpf-wiz *::before,
.mvpf-wiz *::after { box-sizing: border-box; }

.mvpf-wiz-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(0, 22, 32, .62);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.mvpf-wiz-open { overflow: hidden; }

/* ── modal entrance ────────────────────────────────────────────────────
   The scrim leads and the panel follows a beat later, so the page behind is
   already receding when the card arrives — it reads as the form coming
   forward rather than the two appearing as one flat layer.

   The panel moves 14px and scales from .97. Any further and it reads as a
   bounce on a form that is about to ask for someone's income; any less and
   the motion is not perceptible enough to be worth running. */
@keyframes mvpf-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mvpf-panel-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes mvpf-scrim-out { to { opacity: 0; } }
@keyframes mvpf-panel-out {
  to { opacity: 0; transform: translateY(8px) scale(.985); }
}

.mvpf-wiz-overlay { animation: mvpf-scrim-in .16s ease-out both; }
.mvpf-wiz-overlay .mvpf-wiz-panel {
  /* cubic-bezier overshoots very slightly at the end — enough to feel like
     the card settles rather than stops dead. */
  animation: mvpf-panel-in .34s cubic-bezier(.16, .84, .34, 1.02) .04s both;
  transform-origin: 50% 0;
  will-change: transform, opacity;
}

/* Leaving is faster than arriving: dismissal should feel immediate. */
.mvpf-wiz-overlay.is-closing { animation: mvpf-scrim-out .14s ease-in both; }
.mvpf-wiz-overlay.is-closing .mvpf-wiz-panel { animation: mvpf-panel-out .14s ease-in both; }

.mvpf-wiz {
  --mvpf-ink: #002738;
  --mvpf-body: #3f4c58;
  --mvpf-muted: #6b7885;
  --mvpf-line: #e2e6ee;
  --mvpf-accent: #c8102e;
  width: 100%;
  max-width: 620px;
  margin: auto;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--mvpf-body);
}
.mvpf-wiz.is-inline { max-width: 100%; margin: 0; }

.mvpf-wiz-panel {
  background: #fff;
  border-radius: 15px;                       /* container */
  overflow: hidden;
  box-shadow: 0 0 15px -4px rgba(0, 39, 56, .35);
}
.mvpf-wiz.is-inline .mvpf-wiz-panel {
  box-shadow: none;
  border: 1px solid var(--mvpf-line);
}

/* head */
.mvpf-wiz-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--mvpf-ink);
  padding: 22px 26px;
}
.mvpf-wiz-headings { flex: 1 1 auto; min-width: 0; }
.mvpf-wiz-title {
  margin: 0 !important;
  color: #fff !important;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}
.mvpf-wiz-sub {
  margin: 6px 0 0 !important;
  color: #a9c1cf;
  font-size: 14px;
  line-height: 1.45;
}
.mvpf-wiz-close {
  flex: none;
  background: none !important;
  border: 0 !important;
  color: #a9c1cf !important;
  font-size: 26px;
  line-height: 1;
  padding: 0 !important;
  cursor: pointer;
  border-radius: 4px;
}
.mvpf-wiz-close:hover { color: #fff !important; }

/* progress */
.mvpf-wiz-progress { padding: 16px 26px 0; }
.mvpf-wiz-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mvpf-muted);
  margin-bottom: 8px;
}
.mvpf-wiz-bar { height: 4px; background: #eef1f5; border-radius: 3px; overflow: hidden; }
.mvpf-wiz-bar-fill {
  height: 100%;
  width: 0;
  background: var(--mvpf-ink);
  border-radius: 3px;
  transition: width .3s ease;
}

/* body */
.mvpf-wiz-body { padding: 22px 26px 6px; }
.mvpf-wiz-q {
  margin: 0 0 6px !important;
  color: var(--mvpf-ink) !important;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}
.mvpf-wiz-help {
  margin: 0 0 18px !important;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--mvpf-muted);
}

/* choice tiles */
.mvpf-wiz-opts { display: grid; gap: 10px; }
.mvpf-wiz-opts.is-compact { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mvpf-wiz-opt {
  position: relative;
  display: block;
  width: 100%;
  text-align: left !important;
  background: #fff !important;
  /* Inner stroke rather than a border: the tile keeps its exact size whether
     it is idle, hovered or selected, so nothing nudges as you click down a list. */
  border: 0 !important;
  box-shadow: inset 0 0 0 1.5px var(--mvpf-line);
  border-radius: 10px !important;   /* nested element */
  padding: 14px 16px !important;
  cursor: pointer;
  font-family: inherit !important;
  transition: border-color .15s ease, background-color .15s ease;
}
.mvpf-wiz-opt:hover { box-shadow: inset 0 0 0 1.5px var(--mvpf-ink); }
.mvpf-wiz-opt[aria-pressed="true"] {
  background: #f2f7fa !important;
  box-shadow: inset 0 0 0 2px var(--mvpf-ink);
}
.mvpf-wiz-opt-title {
  display: block;
  font-size: 15.5px !important;
  font-weight: 600;
  color: var(--mvpf-ink) !important;
  line-height: 1.3;
}
.mvpf-wiz-opt-desc {
  display: block;
  margin-top: 3px;
  font-size: 13px !important;
  font-weight: 400;
  color: var(--mvpf-muted) !important;
  line-height: 1.4;
}

/* sliders */
.mvpf-wiz-slider-value {
  display: block;
  font-size: 30px;
  font-weight: 700;
  color: var(--mvpf-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 14px;
}
input[type="range"].mvpf-wiz-slider {
  width: 100%;
  height: 28px;
  accent-color: var(--mvpf-ink);
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
.mvpf-wiz-slider-ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mvpf-muted);
  font-variant-numeric: tabular-nums;
}

/* text fields */
.mvpf-wiz-row { display: block; margin-bottom: 14px; }
.mvpf-wiz-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mvpf-muted);
}
.mvpf-wiz-row input,
.mvpf-wiz-row select,
.mvpf-wiz-row textarea {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 10px !important;   /* nested element */
  font-family: inherit !important;
  font-size: 15px !important;
  color: var(--mvpf-ink) !important;
  background: #fff !important;
  /* 1px inner stroke. This has to be the LAST box-shadow in the block — the
     rule previously ended with `box-shadow: none !important`, which silently
     cancelled the stroke and left every field looking borderless. */
  box-shadow: inset 0 0 0 1px var(--mvpf-field-line, #d8dee7) !important;
}
.mvpf-wiz-row input:focus,
.mvpf-wiz-row select:focus,
.mvpf-wiz-row textarea:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--mvpf-ink), 0 0 0 3px rgba(0, 39, 56, .1) !important;
}
/* Checkbox in the consent row gets the same resting outline. */
.mvpf-wiz-consent input[type="checkbox"] {
  box-shadow: inset 0 0 0 1px var(--mvpf-field-line, #d8dee7);
  border-radius: 4px;
}

.mvpf-wiz-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mvpf-body);
}
.mvpf-wiz-consent input { margin-top: 3px; flex: none; }
/* Links follow Accent. They were on --mvpf-ink, which is the headers/buttons
   colour, so a link was indistinguishable from a heading. */
.mvpf-wiz-consent a { color: var(--mvpf-accent); }

.mvpf-wiz-error {
  margin: 10px 0 0 !important;
  min-height: 18px;
  font-size: 13.5px;
  color: var(--mvpf-accent);
}

/* foot */
.mvpf-wiz-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 26px 22px;
}
.mvpf-wiz-back,
.mvpf-wiz-next {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 13px 26px !important;
  border-radius: 999px !important;   /* button */
  cursor: pointer;
  border: 0 !important;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.mvpf-wiz-back {
  background: transparent !important;
  color: var(--mvpf-muted) !important;
  box-shadow: inset 0 0 0 1.5px var(--mvpf-line);   /* inner stroke */
}
.mvpf-wiz-back:hover { color: var(--mvpf-ink) !important; box-shadow: inset 0 0 0 1.5px var(--mvpf-ink); }
.mvpf-wiz-next {
  background: var(--mvpf-ink) !important;
  color: #fff !important;
  margin-left: auto;
}
.mvpf-wiz-next:hover { background: #01455f !important; }
.mvpf-wiz-next:disabled { opacity: .4; cursor: not-allowed; }

.mvpf-wiz-legal {
  margin: 0 !important;
  padding: 0 26px 20px;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--mvpf-muted);
}
.mvpf-wiz-legal a { color: var(--mvpf-muted); }

/* success */
.mvpf-wiz-success { text-align: center; padding: 18px 0 26px; }
.mvpf-wiz-check {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #0f7a4f;
  color: #fff;
  font-size: 28px;
  line-height: 56px;
}
.mvpf-wiz-success h4 {
  margin: 0 0 10px !important;
  font-size: 22px;
  font-weight: 700;
  color: var(--mvpf-ink) !important;
}
.mvpf-wiz-success p {
  margin: 0 auto !important;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--mvpf-body);
}

@media (max-width: 560px) {
  /* ── phone: a dialog, not a takeover ──────────────────────────────────
     Geometry only — colours, type and components are unchanged from every
     other breakpoint. The panel was edge-to-edge and full-height, which
     reads as a page you were sent to; inset with the site visible behind it
     reads as something that opened on top of what you were doing. */

  .mvpf-wiz-overlay { padding: 14px; align-items: center; }

  .mvpf-wiz-panel {
    width: 100%;
    border-radius: 15px;
    /* The card is bounded by the screen and scrolls INSIDE itself, so the
       header, the progress and the buttons stay put while the questions
       move. Scrolling the whole panel took the progress bar off-screen and
       left the visitor with no sense of where they were. */
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);
    display: flex;
    flex-direction: column;
    /* The CARD scrolls, as one piece. Giving the question area its own scroll
       put a second scrollbar inside a phone-sized dialog and capped the
       disclosure at a height that cut it off mid-sentence — which is not a
       thing to do to consent text. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mvpf-wiz-head { flex: none; padding: 15px 20px; align-items: center; }
  .mvpf-wiz-title { font-size: 17px !important; }
  .mvpf-wiz-sub { font-size: 12.5px !important; margin-top: 2px !important; }
  .mvpf-wiz-close { align-self: flex-start; }

  .mvpf-wiz-progress { flex: none; padding: 14px 20px 0; }
  .mvpf-wiz-bar { height: 6px; border-radius: 999px; }

  .mvpf-wiz-body { padding: 18px 20px 6px; }
  .mvpf-wiz-q { font-size: 20px; text-align: center; }
  .mvpf-wiz-help { text-align: center; margin-bottom: 18px !important; }
  .mvpf-wiz-slider-value { font-size: 26px; }

  /* Order, not DOM: the long disclosure sits above the action rather than
     stranded beneath it, without disturbing the reading order for anyone on
     a screen reader. */
  .mvpf-wiz-head     { order: 1; }
  .mvpf-wiz-progress { order: 2; }
  .mvpf-wiz-body     { order: 3; }
  .mvpf-wiz-legal    { order: 4; }
  .mvpf-wiz-pb       { order: 5; }
  .mvpf-wiz-foot     { order: 6; }

  .mvpf-wiz-legal {
    flex: none;
    padding: 14px 20px 0 !important;
    margin: 0 !important;
    font-size: 11px;
  }

  /* Buttons reach across the card instead of hugging one corner — a thumb at
     the bottom of a phone shouldn't have to aim for a target in a corner. */
  .mvpf-wiz-foot {
    flex: none;
    padding: 16px 20px 18px;
    gap: 10px;
    border-top: 1px solid var(--mvpf-line);
    margin-top: 14px;
  }
  .mvpf-wiz-back, .mvpf-wiz-next { flex: 1 1 0; text-align: center; }
  /* On the first step Back is hidden, and reserving its half of the row left
     Continue looking like it had been shoved to one side. Collapse it and let
     the one available action own the width. */
  .mvpf-wiz-foot .mvpf-wiz-back[style*="hidden"] { display: none; }

  .mvpf-wiz-pb { flex: none; margin: 0; padding: 14px 20px 0; border-top: 0; }

  /* It is a card at this size too, so it arrives like one. */
  .mvpf-wiz-overlay .mvpf-wiz-panel { transform-origin: 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .mvpf-wiz-bar-fill, .mvpf-wiz-opt, .mvpf-wiz-next, .mvpf-wiz-back { transition: none !important; }
  /* Someone who has asked for less motion still needs the form to appear.
     The fade stays (it carries no movement); the travel and scale go. */
  .mvpf-wiz-overlay .mvpf-wiz-panel,
  .mvpf-wiz-overlay.is-closing .mvpf-wiz-panel {
    animation: mvpf-scrim-in .01s linear both !important;
    transform: none !important;
  }
  .mvpf-wiz-overlay { animation-duration: .01s !important; }
}

/* file step (Second Look) */
.mvpf-wiz-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.mvpf-wiz-file-label {
  display: inline-block;
  padding: 13px 24px !important;
  border: 1.5px dashed var(--mvpf-line) !important;
  border-radius: 999px !important;   /* button */
  background: #fff !important;
  color: var(--mvpf-ink) !important;
  font-size: 14px !important;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.mvpf-wiz-file-label:hover { border-color: var(--mvpf-ink) !important; background: #f7fafc !important; }
.mvpf-wiz-file-input:focus-visible + .mvpf-wiz-file-label { outline: 2px solid #f4af38; outline-offset: 2px; }
.mvpf-wiz-file-status { margin: 12px 0 0 !important; font-size: 13.5px; color: var(--mvpf-muted); min-height: 20px; }
.mvpf-wiz-file-status.is-ok    { color: #0f7a4f; font-weight: 600; }
.mvpf-wiz-file-status.is-error { color: #c8102e; }
.mvpf-wiz-file-status.is-busy  { color: var(--mvpf-ink); }

/* Trigger Button Form widget — base look; the widget's Style tab overrides it. */
.mvpf-form-trigger {
  display: inline-block;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2 !important;
  position: relative;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;   /* button */
  background: #002738;
  color: #fff;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* Inner stroke: pinned to the button's own bounds, so a 2px stroke does not
   make the button 4px larger the way a CSS border would. Sits above the fill
   and below the label, and never intercepts clicks. */
.mvpf-form-trigger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--mvpf-stroke-w, 0) var(--mvpf-stroke-s, solid) var(--mvpf-stroke-c, transparent);
  pointer-events: none;
}
.mvpf-form-trigger:hover { background: #01455f; }
.mvpf-form-trigger:focus-visible { outline: 2px solid #f4af38; outline-offset: 2px; }

/* Inline Form: header hidden when the page already provides its own heading. */
.mvpf-wiz-noheader .mvpf-wiz-head { display: none; }
.mvpf-wiz-noheader .mvpf-wiz-progress { padding-top: 22px; }

/* Answer tiles are <button>s, so the Elementor kit's uppercase button styling
   lands on them and shouts every option. Pin the natural case. */
.mvpf-wiz-opt,
.mvpf-wiz-opt-title,
.mvpf-wiz-opt-desc {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Trigger Button "Alignment" control. The widget writes --mvpf-btn-w on the
   wrap (auto for left/center/right, 100% for Justified) and Elementor media-
   queries that per breakpoint, so the button inherits the right width at every
   device size. Justified fills the widget box, not the container — same as
   Elementor's own Button widget, so a widget with a custom Advanced → Width
   still honours it. */
.mvpf-form-trigger { width: var(--mvpf-btn-w, auto); }

/* Kit armor for links inside the form. The Elementor kit styles every `a` and
   `a:hover` with the global Accent font (16px/500), which blew the consent and
   legal links up to larger than the sentence containing them. Links here follow
   their own text and change colour only. */
.mvpf-wiz a,
.mvpf-wiz a:hover,
.mvpf-wiz a:focus,
.mvpf-wiz-consent a,
.mvpf-wiz-consent a:hover,
.mvpf-wiz-legal a,
.mvpf-wiz-legal a:hover {
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
}

/* ── affixed inputs ($ and %) ──────────────────────────────────────────
   The mark sits INSIDE the control so the field reads as one object. The
   stroke moves to the wrapper and the input goes bare, otherwise there are
   two nested outlines and the focus ring lands on the wrong edge. */
.mvpf-wiz-affix {
  position: relative;
  display: block;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--mvpf-field-line, #d8dee7);
  transition: box-shadow .15s ease;
}
.mvpf-wiz-affix:focus-within {
  box-shadow: inset 0 0 0 1.5px var(--mvpf-ink), 0 0 0 3px rgba(0, 39, 56, .1);
}
.mvpf-wiz-affix-mark {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--mvpf-muted);
  pointer-events: none;
}
.mvpf-wiz-affix--pre .mvpf-wiz-affix-mark { left: 14px; }
.mvpf-wiz-affix--suf .mvpf-wiz-affix-mark { right: 14px; }
.mvpf-wiz-row .mvpf-wiz-affix input {
  box-shadow: none !important;
  background: transparent !important;
}
.mvpf-wiz-row .mvpf-wiz-affix input:focus { box-shadow: none !important; }
.mvpf-wiz-affix--pre input { padding-left: 30px !important; }
.mvpf-wiz-affix--suf input { padding-right: 32px !important; }

/* two fields that belong to one question */
.mvpf-wiz-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mvpf-wiz-pair .mvpf-wiz-row { margin-bottom: 0; }
.mvpf-wiz-help--tight { margin: 12px 0 0 !important; font-size: 13px; }
@media (max-width: 520px) {
  .mvpf-wiz-pair { grid-template-columns: 1fr; }
}

/* ── partner lockup ────────────────────────────────────────────────────
   Milestone is MVP's parent company and Find My Rate is their tool. The
   supplied artwork is white-only, so it is only ever placed on navy. */
.mvpf-wiz-pb {
  display: flex;
  justify-content: center;
  padding: 16px 26px 20px;
  /* Hairline rather than a filled band: the mark is an attribution, not a
     section of the form, and a solid block would pull more weight than the
     questions above it. */
  border-top: 1px solid var(--mvpf-line);
  margin: 4px 26px 0;
}
/* 94px = 118 less 20%. One declaration covers every breakpoint; nothing else
   sizes the lockup, so this is the only number to change. */
.mvpf-wiz-pb-img { display: block; width: 94px; height: auto; }

/* ── field-level problems ──────────────────────────────────────────────
   Shown on blur, not per keystroke: telling someone their name is invalid
   while they are still typing it is worse than saying nothing. */
.mvpf-wiz-fielderr {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #b42318;
}
.mvpf-wiz-fielderr:empty { display: none; }
.mvpf-wiz-row.has-error input,
.mvpf-wiz-row.has-error select,
.mvpf-wiz-row.has-error .mvpf-wiz-affix {
  box-shadow: inset 0 0 0 1.5px #d92d20 !important;
}

/* Characters-remaining hint. Informational, so it must not read as the error
   state that shares the same element. */
.mvpf-wiz-row.is-nearlimit .mvpf-wiz-fielderr { color: var(--mvpf-muted); }
.mvpf-wiz-row.is-nearlimit.has-error .mvpf-wiz-fielderr { color: #b42318; }