/**
 * Center funnel quote-results content on wide screens.
 * Loaded globally so production/CDN cache cannot miss dynamically injected CSS.
 */

#phf-funnel-modal .modal-body,
#funnel-flow-root {
  width: 100% !important;
  box-sizing: border-box;
}

#phf-funnel-modal #funnel-flow-root {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  min-height: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
}

.quote-results-layout,
#quote-results-root {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}

#phf-funnel-modal .quote-results-layout,
#funnel-flow-root .quote-results-layout {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#phf-funnel-modal #phf-funnel,
#funnel-flow-root #phf-funnel,
.quote-results-layout #phf-funnel,
#quote-results-root #phf-funnel {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

#phf-funnel-modal #phf-funnel > .container,
#funnel-flow-root #phf-funnel > .container,
.quote-results-layout #phf-funnel > .container,
#quote-results-root #phf-funnel > .container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
  float: none !important;
}

/* Single stacked column; nowrap stops flex-wrap spilling sections into off-screen side columns under the inline max-height:80vh, :not(.container) spares the regular funnel steps. */
#phf-funnel-modal #phf-funnel.min-height__cstm:not(.container),
#funnel-flow-root #phf-funnel.min-height__cstm:not(.container),
#quote-results-root #phf-funnel.min-height__cstm:not(.container) {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow-x: hidden !important;
  /* Drop the inline max-height:80vh so results grow naturally and the modal-body (100vh scroll) is the sole scroller, not a nested one. */
  max-height: none !important;
}

/* Below lg, stack profile (col-lg-3) over products (col-lg-9); the row is a class-less inline flex, reached via its .your-profile child. */
@media (max-width: 991px) {
  #phf-funnel-modal .options > div:has(> .your-profile),
  #funnel-flow-root .options > div:has(> .your-profile),
  #quote-results-root .options > div:has(> .your-profile) {
    flex-direction: column !important;
  }

  /* Side gutters on the results wrapper so content isn't edge-to-edge; inner Services lists keep their own alignment. */
  #phf-funnel-modal #phf-funnel.min-height__cstm:not(.container),
  #funnel-flow-root #phf-funnel.min-height__cstm:not(.container),
  #quote-results-root #phf-funnel.min-height__cstm:not(.container) {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Center the current-cover card; its Services lists stay left-aligned. */
  #phf-funnel-modal .current-cover,
  #funnel-flow-root .current-cover,
  #quote-results-root .current-cover {
    text-align: center !important;
  }
  /* .fund-desc ships its own text-align:justify in the bundle, so override it directly. */
  #phf-funnel-modal .current-cover .fund-desc,
  #funnel-flow-root .current-cover .fund-desc,
  #quote-results-root .current-cover .fund-desc {
    text-align: center !important;
  }
  #phf-funnel-modal .current-cover .options__item__list-block,
  #funnel-flow-root .current-cover .options__item__list-block,
  #quote-results-root .current-cover .options__item__list-block {
    text-align: left !important;
  }

  /* Reason step: parent .insurance__block is place-items:center, shrinking #phf-reason to content; force it full-width so the select fills instead of collapsing to min-content. */
  #phf-reason {
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  #phf-reason [data-cy='reason-select'] {
    width: 100% !important;
    max-width: 400px !important;
  }
}

/* The retention form's inputs carry CF7's class:form-control, which the theme paints
   @gray (#f1f1f1) — 1.1:1 on white, so prefilled values read as empty fields. */
#online-retention-form-container .form-control,
#onlineRetentionModalCenter .form-control {
  color: #1a154c;
}

/* The theme floats every div.wpcf7 into a 75% column with a 90px gutter — sized for a
   page, it strands 40% of the modal as dead space to the right of the fields. */
#onlineRetentionModalCenter .wpcf7 {
  float: none;
  width: 100%;
  padding-right: 0;
}

/* Bootstrap 3 expects .close before the title; this modal renders it after, so the
   full-width block title pushes the float onto its own line, past the header edge. */
#onlineRetentionModalCenter .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#onlineRetentionModalCenter .modal-header .modal-title {
  width: auto;
}

/* div.wpcf7 input{width:100%} stretches the consent box to the full column, which fills
   the line and wraps its own label underneath. CF7 omits .first here, so its margin stays. */
#onlineRetentionModalCenter .wpcf7-acceptance input[type='checkbox'] {
  width: auto;
  /* div.wpcf7 input adds margin-bottom:15px, which drags the box off the text's line.
     Negative right margin absorbs the   the form tag hard-codes before the label. */
  margin: 0 -4px 0 0;
  /* vertical-align centres on the x-height, leaving the box 1px low against the label. */
  vertical-align: middle;
  position: relative;
  top: -1px;
}
/* The box sits in an inline-block, so its own alignment decides where the text meets it. */
#onlineRetentionModalCenter .wpcf7-list-item {
  margin-left: 0;
  vertical-align: middle;
}

/* .btn clamps to height:21px with padding-bottom:3px — shorter than its own line-height,
   so the label sits on the bottom edge. Cancel escapes the clamp, hence the mismatch. */
#onlineRetentionModalCenter .wpcf7-submit,
#onlineRetentionModalCenter #onlineRetention-btn {
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  line-height: 1.4;
}

/* Footer row inside the form — Cancel is portalled in beside the submit. */
#onlineRetentionModalCenter .retention-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #e5e5e5;
  margin: 15px 0 0;
  padding: 15px 0;
}
/* The form tag wraps the submit in <br>s, which survive as empty flex items. */
#onlineRetentionModalCenter .retention-actions br {
  display: none;
}
#onlineRetentionModalCenter .retention-actions #onlineRetention-btn,
#onlineRetentionModalCenter .retention-actions .wpcf7-submit {
  /* Equal halves: basis 0 so the content width stops deciding the split. */
  flex: 1 1 0;
  width: auto;
  /* div.wpcf7 input's margin-bottom:15px is centred with the box, riding it 7px high. */
  margin: 0;
}
#onlineRetentionModalCenter .retention-actions #onlineRetention-btn {
  order: -1;
  /* .d-inline-flex would otherwise left-align the label once the button is stretched. */
  justify-content: center;
}