/* ==========================================================================
   cfa-invest-wizard.css — investment wizard refresh
   --------------------------------------------------------------------------
   Restyles the existing invest-wizard templates (equity step1–step3 and the
   crowdbond step1plc–step3plc equivalents) to match the cfa-* design system.

   CSS-only on purpose: it hooks the class names those legacy templates already
   emit, so no markup, form field, POST key or validation hook had to move.

   Loaded last in layout.phtml's $cssFiles, so it wins ties against
   designer.css and the earlier cfa-* files.

   Contents
     1. Step indicator — collapse the two competing implementations into one
     2. Wizard shell
     3. Headings
     4. Amount entry
     5. Review panel
     6. Agreement + errors
     7. Buttons
     8. Responsive
   ========================================================================== */

/* ── 1. Step indicator ─────────────────────────────────────────────────────
   Three things were drawing this control at once:

     a) designer.css  — cyan (#00b3fe) circles with an inset ring, plus its own
                        per-item connector on `ol.steps a::after`
     b) cfa-forms-page.css — the design-system circles (cobalt / green / grey)
                        plus a single absolute track on `ol.steps::before`
     c) the templates — which mark the finished step `.visitedlast`, a class
                        neither file styles

   (b) is the one the rest of the platform uses, so it wins. Its circles are
   kept as-is; only its track is replaced. That track is inset by half a circle
   from the list edges, but the circles sit at the centre of equal-width items,
   so it always overshot the first and last step by half an item — the stray
   grey line past step 1 and step 4. Drawing one segment per item, from this
   circle to the next, is self-correcting for a 4- or 5-step wizard alike. */

/* (a) silence the legacy connector and the legacy ring around the circle */
.compinvest-steps ol.steps a::after {
  display: none !important;
}

.compinvest-steps ol.steps > li > a::before {
  box-shadow: none !important;
  position: relative;
  z-index: 1;
}

/* (b) drop the overshooting full-width track */
.compinvest-steps ol.steps::before {
  display: none;
}

/* one connector per gap, centre-to-centre */
.compinvest-steps ol.steps > li::after {
  content: '';
  position: absolute;
  top: calc(var(--fp-step-size, 2rem) / 2);
  left: 50%;
  width: 100%;
  height: var(--fp-step-line, 2px);
  background: var(--cfa-border, #e2e6ef);
  transform: translateY(-50%);
  z-index: 0;
}

.compinvest-steps ol.steps > li:last-child::after {
  display: none;
}

/* (c) the step the investor just completed */
.compinvest-steps ol.steps > li.visitedlast > a::before,
.compinvest-steps ol.steps > li.done > a::before,
.compinvest-steps ol.steps > li.complete > a::before {
  content: '\2713';
  background: var(--cfa-green);
  border-color: var(--cfa-green);
  color: #fff;
}

/* !important because designer.css:2218 sets `li.visitedlast a { color:#00b3fe
   !important }`. Without it the completed label was legacy cyan on the screens
   that mark steps `visitedlast` and green on those using `done`, so the same
   wizard changed colour from step to step. */
.compinvest-steps ol.steps > li.visitedlast > a,
.compinvest-steps ol.steps > li.done > a,
.compinvest-steps ol.steps > li.complete > a {
  color: var(--cfa-green) !important;
}

/* the run of connectors behind the investor is solid green, ahead of them grey */
.compinvest-steps ol.steps > li.visitedlast::after,
.compinvest-steps ol.steps > li.done::after,
.compinvest-steps ol.steps > li.complete::after {
  background: var(--cfa-green);
}

.compinvest-steps {
  max-width: 700px;
  /* breathing room between the rail and the card it belongs to */
  margin: 32px auto 30px;
}

/* ── 2. Wizard shell ───────────────────────────────────────────────────────
   designer.css gives .invest_container a square white box with its own grey
   border; stripped so the rounded card below isn't double-framed. */

.invest_container.compinvest {
  max-width: 900px;
  margin: 0 auto 56px;
  padding: 0 15px;
  background: none;
  border: none;
  box-shadow: none;
}

.compinvest .inlineblock_container {
  display: block;
  width: 100%;
  padding: 0;
}

.compinvest .inv_pro_main,
.compinvest .invest2_content {
  background: #fff;
  border: 1px solid var(--cfa-border, #e2e6ef);
  border-radius: 16px;
  padding: 40px 38px;
  box-shadow: 0 8px 32px rgba(36, 81, 209, .06);
}

.compinvest .invest2_content {
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* The two halves are rarely the same natural height (the entry side grows with
   validation messages, the review side is a fixed list). Stretch both to the
   taller one and let the panel inside fill it, so the card never ends with one
   column hanging in mid-air. */
.compinvest .inv_pro_main > .row {
  align-items: stretch;
  row-gap: 32px;
}

.compinvest .inv_pro_main > .row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  padding-left: 18px;
  padding-right: 18px;
}

/* ── 3. Headings ───────────────────────────────────────────────────────── */

.compinvest .inv_pro_main h2 {
  font-size: 25px;
  font-weight: 700;
  color: var(--cfa-navy, #1B2B6B);
  text-align: center;
  margin: 0 0 28px;
  line-height: 1.3;
}

.compinvest .inv_pro_main h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--cfa-navy, #1B2B6B);
  margin: 0 0 18px;
}

.compinvest .step1_left_title {
  font-size: 14px;
  color: var(--cfa-text-muted, #5a6478);
  padding: 6px 4px 14px;
}

.compinvest .step1_left_title b {
  color: var(--cfa-navy, #1B2B6B);
}

/* ── 4. Amount entry ───────────────────────────────────────────────────────
   designer.css centres .calc_new with `margin: 0 73px`, which both indents the
   field and leaves no gap under it. */

.compinvest .calc_new {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin: 0 0 22px !important;
}

.compinvest input.calc_field {
  width: 100%;
  height: auto;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cfa-navy, #1B2B6B);
  background: #fff;
  border: 1px solid var(--cfa-border, #e2e6ef);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.compinvest input.calc_field::placeholder {
  color: #9aa3b5;
  font-weight: 500;
  letter-spacing: .02em;
}

.compinvest input.calc_field:focus {
  outline: none;
  border-color: var(--cfa-cobalt, #2451D1);
  box-shadow: 0 0 0 3px rgba(36, 81, 209, .12);
}

.compinvest h4.calc_new_or {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #9aa3b5;
}

.compinvest .balance_info {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--cfa-text-muted, #5a6478);
  background: var(--cfa-bg-soft, #f4f6fb);
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 4px;
}

/* ── 5. Review panel ───────────────────────────────────────────────────── */

/* fills whatever height the taller column sets */
.compinvest .step1_right {
  background: var(--cfa-bg-soft, #f4f6fb);
  border-radius: 12px;
  padding: 10px 22px;
  flex: 1 1 auto;
}

.compinvest .inv_row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}

.compinvest .inv_row + .inv_row {
  border-top: 1px solid rgba(226, 230, 239, .9);
}

.compinvest .inv_col {
  float: none;
  width: auto;
  font-size: 14.5px;
  color: var(--cfa-text-muted, #5a6478);
}

.compinvest .inv_col + .inv_col {
  text-align: right;
  color: var(--cfa-navy, #1B2B6B);
}

.compinvest .inv_col b {
  color: var(--cfa-navy, #1B2B6B);
  font-weight: 700;
}

.compinvest .inv_col_bold,
.compinvest .inv_col_bold .inv_col {
  font-weight: 700;
  color: var(--cfa-navy, #1B2B6B);
  font-size: 16px;
}

/* ── 6. Agreement + errors ─────────────────────────────────────────────── */

.compinvest .invest2_agreement {
  background: var(--cfa-bg-soft, #f4f6fb);
  border: 1px solid var(--cfa-border, #e2e6ef);
  border-radius: 12px;
  padding: 18px 20px;
  max-height: 380px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.65;
  color: #374151;
}

.compinvest .aggr-disp {
  margin-top: 18px;
  font-size: 14.5px;
}

.compinvest .agreement-error,
.compinvest .error-msg,
.compinvest .centered_err_msg {
  color: #a12222;
  font-size: 13.5px;
  font-weight: 600;
}

.compinvest .form_select_label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cfa-navy, #1B2B6B);
  margin-bottom: 6px;
  display: inline-block;
}

.compinvest .date-dropdowns select {
  padding: 10px 12px;
  border: 1px solid var(--cfa-border, #e2e6ef);
  border-radius: 8px;
  font-size: 14px;
  color: var(--cfa-navy, #1B2B6B);
  background: #fff;
}

/* Agreement consent row. The native control renders as a small circle here and
   sits badly against multi-line copy, so it is replaced with a square box that
   matches the platform's form controls. The input keeps its name/value — only
   its appearance changes. */
.compinvest .checkbox {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  background: var(--cfa-bg-soft, #f4f6fb);
  border: 1px solid var(--cfa-border, #e2e6ef);
  border-radius: 12px;
  padding: 16px 18px;
}

/* The box and its wording live inside a single <label>, so the gap has to sit
   there — on .checkbox it would only space the label as a whole. Making the
   label the flex row also makes the whole sentence clickable. */
.compinvest .checkbox > label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* #aggr_err is an always-present placeholder the validator fills in; with no
   message it must take no space rather than render as an empty grey strip. */
.compinvest #aggr_err:empty {
  display: none;
}

.compinvest .checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 1.5px solid var(--cfa-border-strong, #c3cad9);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.compinvest .checkbox input[type="checkbox"]:hover {
  border-color: var(--cfa-cobalt, #2451D1);
}

.compinvest .checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(36, 81, 209, .18);
}

.compinvest .checkbox input[type="checkbox"]:checked {
  background: var(--cfa-cobalt, #2451D1);
  border-color: var(--cfa-cobalt, #2451D1);
}

/* tick */
.compinvest .checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* the red state the validator sets when it is left unticked */
.compinvest .checkbox input[type="checkbox"].error-inp {
  border-color: #d05252;
  box-shadow: 0 0 0 3px rgba(208, 82, 82, .14);
}

/* ── 7. Buttons ────────────────────────────────────────────────────────────
   `.inv_continue` is the submit input itself, not a wrapper — treating it as a
   container is what made Continue invisible (transparent background, white
   label). It is the primary action, so it gets the platform's cobalt button;
   "Back to Pitch" is the quiet way out. */

/* designer.css pins these to a fixed box — .inv_continue to 38px tall with a
   34px line-height, .browse-btns to 30px — which, combined with real padding,
   drops the label to the bottom of the button and clips the height. Both need
   an explicit reset, not just new colours. */
.compinvest input.inv_continue,
.compinvest input.browse-btns {
  display: block;
  margin: 0 auto;
  width: auto;
  height: auto;
  min-width: 220px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.compinvest input.inv_continue {
  background: var(--cfa-cobalt, #2451D1);
  border-color: var(--cfa-cobalt, #2451D1);
  color: #fff;
  margin-top: 28px;
}

.compinvest input.inv_continue:hover,
.compinvest input.inv_continue:focus {
  background: #1c41ab;
  border-color: #1c41ab;
  box-shadow: 0 4px 14px rgba(36, 81, 209, .22);
}

.compinvest input.browse-btns,
.compinvest input.bkbtn-position {
  background: #fff;
  color: #374151;
  border-color: var(--cfa-border, #e2e6ef);
  margin-top: 0;
  margin-bottom: 0;
}

.compinvest input.browse-btns:hover {
  background: var(--cfa-bg-soft, #f4f6fb);
}

/* the explanatory note sits between the two actions */
.compinvest .inv_descr {
  margin-top: 26px;
}

.compinvest .inv_descr p {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--cfa-text-muted, #5a6478);
  margin: 0 auto 18px;
  max-width: 520px;
}

.compinvest .blue_link,
.compinvest a.blue_link {
  color: var(--cfa-cobalt, #2451D1);
  font-weight: 600;
  text-decoration: underline;
}

.compinvest input.btn-profile {
  display: inline-block;
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--cfa-cobalt, #2451D1);
  border-radius: 10px;
  background: var(--cfa-cobalt, #2451D1);
  color: #fff;
  cursor: pointer;
}

.compinvest input.btn-profile:hover {
  background: #1c41ab;
}

/* ── 8. Appropriateness assessment ─────────────────────────────────────────
   Step 1 of the same wizard, but a different template tree
   (.formbg > .transation-container). cfa-forms-page.css already styles the
   question cards and the custom checkbox, so only two things are left:

     • designer.css pins .checkbx-label with `position:relative; top:-18px;
       left:45px` — an offset hack from when the box was floated. Against the
       flex checkbox it drags every answer up and to the right, out of line
       with its own box.
     • .igree-btn is still the old slate grey, not the platform's primary.     */

/* The markup nests .formbg > .transation-container > .transaction-preview-con
   > .trans-outer-cont, and several of those carry their own panel styling —
   which stacks up as a card inside a card inside a card. Only the innermost
   panel should read as a surface; the wrappers are pure layout. */
.formbg:has(.transation-container),
.transation-container {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
}

.transation-container .transaction-preview-con {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--cfa-border, #e2e6ef);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(36, 81, 209, .06);
  padding: 32px 30px;
}

.transation-container .trans-outer-cont {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.transation-container .quest-cont {
  border-radius: 12px;
}

/* Outcome banner. Failing stays red; passing is no longer painted with it. */
.transation-container label.font18.questionnaire-pass,
.transation-container label.font18.questionnaire-fail {
  display: block;
  border-radius: 12px;
  padding: 18px 22px;
  margin-bottom: 24px;
  font-size: 17px;
  line-height: 1.55;
}

.transation-container label.font18.questionnaire-pass {
  color: var(--cfa-green, #1c8a4d) !important;
  background: #eefaf1;
  border: 1px solid #b7e0c2;
}

.transation-container label.font18.questionnaire-fail {
  color: var(--cfa-red, #a12222) !important;
  background: #fdecec;
  border: 1px solid #f5c2c2;
}

.transation-container label.font18 {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--cfa-navy, #1B2B6B);
  text-align: center;
  margin-bottom: 26px;
}

/* The answers are a flat run of sibling pairs — .qut-checkbox, .checkbx-label,
   .qut-checkbox, .checkbx-label — with no per-answer wrapper. A two-column grid
   pairs them up automatically: box in column one, wording in column two. Flex
   cannot do it without a wrapper, which is why the two kept landing on separate
   lines. */
.transation-container .quest-cont > div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px 12px;
}

/* Legacy CSS paints this wrapper a solid dark teal, which showed as a second,
   square box behind the rounded checkbox. */
.transation-container .qut-checkbox {
  margin: 0;
  grid-column: 1;
  background: none;
  border: none;
}

/* Each .qut-checkbox holds the input plus an empty <label> that legacy CSS drew
   as yet another box. */
.transation-container .qut-checkbox > label {
  display: none !important;
}

.transation-container .checkbx-label {
  position: static;
  top: auto;
  left: auto;
  margin: 0;
  grid-column: 2;
}

/* cfa-forms-page places the tick with absolute left/top offsets, which leaves
   it sitting high in the box. Centring the pseudo-element with flexbox instead
   removes the magic numbers and stays correct at any box size. */
.transation-container .qut-checkbox input[type="checkbox"] {
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.transation-container .qut-checkbox input[type="checkbox"]:checked::after {
  position: static;
  left: auto;
  top: auto;
  /* the rotated L is optically low against its own bounding box */
  margin-bottom: 2px;
}

.transation-container .quest-cont {
  padding: 20px 22px;
  margin-bottom: 16px;
}

.transation-container .quest-cont > p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--cfa-navy, #1B2B6B);
  margin: 0 0 14px !important;
  margin-left: 0 !important;
}

/* The template carries style="display:block" inline and wraps the button in an
   extra unclassed div, so centring the container does nothing. Centring the
   input itself works regardless of what the wrappers do. */
.transation-container .biform-btn {
  margin-top: 26px;
}

.transation-container input.igree-btn {
  display: block;
  margin-left: auto;
  margin-right: auto;
  min-width: 220px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  background: var(--cfa-cobalt, #2451D1);
  border: 1px solid var(--cfa-cobalt, #2451D1);
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease;
}

.transation-container input.igree-btn:hover {
  background: #1c41ab;
  box-shadow: 0 4px 14px rgba(36, 81, 209, .22);
}

/* ── 9. Responsive ─────────────────────────────────────────────────────────
   The wizard is a long form on a phone, so the rules below aim at: nothing
   overflows the viewport, the two halves stack in reading order, every tap
   target is full-width, and the step indicator stays legible instead of
   squeezing five wrapped labels into 375px. */

/* tablet and below */
@media (max-width: 991px) {
  .compinvest .inv_pro_main,
  .compinvest .invest2_content,
  .transation-container .transaction-preview-con {
    padding: 30px 24px;
  }
}

/* stack the two halves; bootstrap keeps col-sm-6 side by side down to 576px,
   which is too narrow for the amount field and the review list together */
@media (max-width: 767px) {
  .compinvest .inv_pro_main > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .compinvest .inv_pro_main,
  .compinvest .invest2_content,
  .transation-container .transaction-preview-con {
    padding: 24px 18px;
    border-radius: 14px;
  }

  .compinvest .inv_pro_main h2 {
    font-size: 20px;
    margin-bottom: 22px;
  }

  .compinvest .inv_pro_main h3 {
    font-size: 16px;
  }

  .invest_container.compinvest,
  .compinvest-steps {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* full-width tap targets */
  .compinvest input.inv_continue,
  .compinvest input.browse-btns,
  .transation-container input.igree-btn {
    width: 100%;
    min-width: 0;
  }

  /* the share-price / minimum-investment pair reads better stacked */
  .compinvest .step1_left_title {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: left !important;
    padding: 2px 0;
  }

  .compinvest .inv_row {
    padding: 12px 0;
  }

  /* long answers must not push the checkbox off-screen */
  .transation-container .checkbx-label {
    flex: 1 1 calc(100% - 30px);
    font-size: 14px;
  }

  .transation-container .quest-cont {
    padding: 16px 14px;
  }

  .transation-container label.font18 {
    font-size: 18px;
  }

  .transation-container label.font18.questionnaire-pass,
  .transation-container label.font18.questionnaire-fail {
    font-size: 15px;
    padding: 14px 16px;
  }
}

/* cfa-forms-page.css stacks the rail vertically at 640px. A centre-to-centre
   horizontal connector makes no sense once the circles are in a column, and
   leaves stray stubs beside each one. */
@media (max-width: 640px) {
  .compinvest-steps ol.steps > li::after {
    display: none;
  }
}

/* phones: keep the step rail readable rather than five wrapped labels */
@media (max-width: 575px) {
  .compinvest-steps {
    margin-top: 20px;
  }

  /* the rail is a vertical list by now, so every label has its own row and
     stays readable — no need to hide any of them */
  .compinvest-steps ol.steps > li > a {
    font-size: 0.8125rem;
  }

  .compinvest .invest2_agreement {
    max-height: 260px;
    padding: 14px 16px;
    font-size: 13.5px;
  }

  .compinvest .checkbox {
    padding: 14px;
  }

  .compinvest .balance_info,
  .compinvest .step1_right {
    padding: 12px 14px;
  }
}

/* ── 10. Confirmation screen (step5 / step5plc) ────────────────────────────
   The last screen of the wizard still used the old cyan buttons and floated
   summary rows. Same shell classes as the rest of the wizard, so only the
   confirmation-specific pieces need bringing across. */

/* The summary table sits in a stray bootstrap column (col-md-6 offset-md-3)
   inside a plain block, so it took half the width and the buttons flowed up
   beside it. Stacking the section explicitly puts them back underneath. */
.compinvest .inv_method_confirm {
  margin-top: 0;
  color: var(--cfa-text-muted, #5a6478);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.compinvest .inv_method_confirm > [class*="col-"] {
  float: none;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.compinvest .inv_method_confirm > .text-center {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.compinvest .inv_method_confirm span,
.compinvest .inv_method_confirm p {
  float: none;
  width: auto;
}

.compinvest .inv_method_confirm span {
  font-size: 17px;
  font-weight: 700;
  color: var(--cfa-navy, #1B2B6B);
  margin-bottom: 10px;
}

.compinvest .inv_method_confirm p {
  font-size: 14.5px;
  line-height: 1.65;
  text-align: center;
  margin-bottom: 24px;
}

/* two of these sit side by side, one per button */
.compinvest .summary_btn_container {
  display: flex;
  justify-content: center;
  margin: 0;
}

.compinvest a.summary_button,
.compinvest input.summary_button {
  width: auto;
  height: auto;
  min-width: 220px;
  margin: 0;
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 10px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease, box-shadow .15s ease;
  /* the legacy cyan is replaced by the platform's own pair */
  background: #fff;
  border: 1px solid var(--cfa-border, #e2e6ef);
  color: #374151;
}

.compinvest a.summary_button:hover,
.compinvest input.summary_button:hover {
  background: var(--cfa-bg-soft, #f4f6fb);
}

/* the portfolio link is the one to come back to, so it leads */
.compinvest .inv_method_confirm > .text-center > .summary_btn_container:last-child a.summary_button,
.compinvest .inv_method_confirm > .text-center > .summary_btn_container:last-child input.summary_button {
  background: var(--cfa-cobalt, #2451D1);
  border-color: var(--cfa-cobalt, #2451D1);
  color: #fff;
}

.compinvest .inv_method_confirm > .text-center > .summary_btn_container:last-child a.summary_button:hover,
.compinvest .inv_method_confirm > .text-center > .summary_btn_container:last-child input.summary_button:hover {
  background: #1c41ab;
  box-shadow: 0 4px 14px rgba(36, 81, 209, .22);
}

@media (max-width: 575px) {
  .compinvest a.summary_button,
  .compinvest input.summary_button {
    width: 100%;
    min-width: 0;
  }
}