/* =========================================================
   FPEA_STEP5_CTA_JOURNEY_STYLE_V15_2
   Repeated, consistent next-step opportunities.
   ========================================================= */

/* ---------------- HERO CTA ---------------- */

.fpea-v152-hero-actions {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 11px !important;

  margin-top: 21px !important;
}

.fpea-v152-hero-button {
  min-height: 45px !important;

  padding:
    11px 18px !important;

  border:
    1px solid
    #2688d1 !important;

  border-radius: 12px !important;

  background:
    linear-gradient(
      180deg,
      #3ca7e7 0%,
      #278bd3 100%
    ) !important;

  color: #ffffff !important;

  font: inherit !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  letter-spacing: -0.01em !important;

  box-shadow:
    0 11px 25px
    rgba(38, 137, 207, 0.23) !important;

  cursor: pointer !important;

  transition:
    transform 150ms ease,
    box-shadow 150ms ease !important;
}

.fpea-v152-hero-button:hover {
  transform: translateY(-1px) !important;

  box-shadow:
    0 14px 30px
    rgba(38, 137, 207, 0.28) !important;
}

.fpea-v152-hero-button:focus-visible {
  outline:
    3px solid
    rgba(37, 139, 211, 0.20) !important;

  outline-offset: 3px !important;
}

.fpea-v152-hero-note {
  color: #718794 !important;

  font-size: 9px !important;
  font-weight: 620 !important;
}

/* ---------------- MID-PAGE CTA ---------------- */

.fpea-v152-mid-cta {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto !important;

  align-items: center !important;
  gap: 20px !important;

  margin:
    0 18px 14px !important;
  padding:
    16px 18px !important;

  border:
    1px solid
    rgba(39, 136, 202, 0.14) !important;

  border-radius: 16px !important;

  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(75, 177, 229, 0.17),
      transparent 38%
    ),
    linear-gradient(
      105deg,
      #f2f9fe 0%,
      #e7f4fc 100%
    ) !important;

  box-shadow:
    0 13px 31px
    rgba(27, 96, 136, 0.08) !important;
}

.fpea-v152-mid-copy h3 {
  margin:
    0 0 4px !important;

  color: #143d55 !important;

  font-size: 15px !important;
  font-weight: 860 !important;
  letter-spacing: -0.025em !important;
}

.fpea-v152-mid-copy p {
  margin: 0 !important;

  color: #637e8e !important;

  font-size: 9px !important;
  font-weight: 590 !important;
  line-height: 1.42 !important;
}

.fpea-v152-mid-summary {
  min-width: 205px !important;

  padding:
    9px 14px !important;

  border-left:
    1px solid
    rgba(31, 103, 140, 0.12) !important;
  border-right:
    1px solid
    rgba(31, 103, 140, 0.12) !important;

  text-align: center !important;
}

.fpea-v152-mid-summary strong,
.fpea-v152-mid-summary span {
  display: block !important;
}

.fpea-v152-mid-summary strong {
  color: #173f57 !important;

  font-size: 16px !important;
  font-weight: 880 !important;
  letter-spacing: -0.025em !important;
}

.fpea-v152-mid-summary span {
  margin-top: 4px !important;

  color: #718794 !important;

  font-size: 8px !important;
  font-weight: 640 !important;
}

.fpea-v152-mid-button {
  min-height: 43px !important;

  padding:
    10px 16px !important;

  border:
    1px solid
    #278bd3 !important;

  border-radius: 11px !important;

  background: #2d96dc !important;
  color: #ffffff !important;

  font: inherit !important;
  font-size: 9px !important;
  font-weight: 810 !important;
  white-space: nowrap !important;

  box-shadow:
    0 9px 22px
    rgba(38, 137, 207, 0.19) !important;

  cursor: pointer !important;
}

/* ---------------- MOBILE STICKY CTA ---------------- */

.fpea-v152-sticky {
  display: none !important;
}

@media (max-width: 768px) {

  .fpea-v152-hero-actions {
    align-items: stretch !important;
    flex-direction: column !important;

    margin-top: 18px !important;
  }

  .fpea-v152-hero-button {
    width: 100% !important;
    min-height: 50px !important;

    font-size: 12px !important;

    touch-action: manipulation !important;
  }

  .fpea-v152-hero-note {
    text-align: center !important;
  }

  .fpea-v152-mid-cta {
    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 12px !important;

    margin:
      0 11px 13px !important;
    padding: 15px !important;
  }

  .fpea-v152-mid-copy h3 {
    font-size: 17px !important;
    line-height: 1.18 !important;
  }

  .fpea-v152-mid-copy p {
    font-size: 10px !important;
  }

  .fpea-v152-mid-summary {
    display: grid !important;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;

    min-width: 0 !important;

    padding: 11px !important;

    border:
      1px solid
      rgba(31, 103, 140, 0.10) !important;

    border-radius: 11px !important;

    background:
      rgba(255, 255, 255, 0.58) !important;
  }

  .fpea-v152-mid-summary strong {
    grid-column:
      1 / -1 !important;

    font-size: 16px !important;
  }

  .fpea-v152-mid-summary span {
    grid-column:
      1 / -1 !important;

    font-size: 9px !important;
  }

  .fpea-v152-mid-button {
    width: 100% !important;
    min-height: 49px !important;

    font-size: 11px !important;

    touch-action: manipulation !important;
  }

  /*
   * Keep enough page space so the fixed CTA never hides
   * the final content while scrolling.
   */
  .fpea-savings-screen-v15.active
  .fpea-v15 {
    padding-bottom:
      calc(
        92px +
        env(
          safe-area-inset-bottom
        )
      ) !important;
  }

  .fpea-savings-screen-v15.active
  .fpea-v152-sticky:not(
    [data-final-visible="true"]
  ) {
    position: fixed !important;
    z-index: 500 !important;

    right: 12px !important;
    bottom:
      max(
        10px,
        env(
          safe-area-inset-bottom
        )
      ) !important;
    left: 12px !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      auto !important;

    align-items: center !important;
    gap: 11px !important;

    min-height: 65px !important;

    padding:
      9px 9px 9px 14px !important;

    border:
      1px solid
      rgba(255, 255, 255, 0.22) !important;

    border-radius: 16px !important;

    background:
      linear-gradient(
        105deg,
        rgba(20, 74, 116, 0.97),
        rgba(39, 133, 207, 0.97)
      ) !important;

    color: #ffffff !important;

    box-shadow:
      0 18px 45px
      rgba(8, 37, 59, 0.31) !important;

    -webkit-backdrop-filter:
      blur(17px) !important;

    backdrop-filter:
      blur(17px) !important;
  }

  .fpea-v152-sticky-copy {
    min-width: 0 !important;
  }

  .fpea-v152-sticky-copy strong,
  .fpea-v152-sticky-copy span {
    display: block !important;
  }

  .fpea-v152-sticky-copy strong {
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 850 !important;
    letter-spacing: -0.025em !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .fpea-v152-sticky-copy span {
    margin-top: 2px !important;

    color:
      rgba(255, 255, 255, 0.76) !important;

    font-size: 8px !important;
    font-weight: 600 !important;
  }

  .fpea-v152-sticky-button {
    min-height: 46px !important;

    padding:
      10px 13px !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: #ffffff !important;
    color: #2478c5 !important;

    font: inherit !important;
    font-size: 10px !important;
    font-weight: 820 !important;
    white-space: nowrap !important;

    box-shadow:
      0 8px 20px
      rgba(8, 40, 66, 0.20) !important;

    cursor: pointer !important;

    touch-action: manipulation !important;
  }
}

@media (max-width: 380px) {

  .fpea-savings-screen-v15.active
  .fpea-v152-sticky:not(
    [data-final-visible="true"]
  ) {
    right: 8px !important;
    left: 8px !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap: 7px !important;

    padding: 9px !important;
  }

  .fpea-v152-sticky-copy {
    text-align: center !important;
  }

  .fpea-v152-sticky-button {
    width: 100% !important;
  }
}