/* React integration and local-route overrides for the funnel theme. */

.hw-funnel {
  min-width: 320px;
  overflow-x: hidden;
  background: #fff;
  color: #000;
}

.hw-funnel .header__logo {
  display: block;
}

.hw-funnel .header__back-button {
  background: transparent;
}

.hw-funnel .swiper-wrapper {
  display: block;
  height: auto !important;
  transform: none !important;
}

.hw-funnel .hero {
  isolation: isolate;
}

.hw-funnel .step--zip .btn--primary {
  max-width: 200px;
}

.hw-funnel .swiper-slide {
  display: block !important;
  width: 100% !important;
  opacity: 1 !important;
  transform: none !important;
}

.hw-funnel .step {
  animation: hw-step-in 180ms ease-out;
}

@keyframes hw-step-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hw-funnel .btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.hw-funnel .progress-bar__fill {
  min-width: 0;
  transition: width 220ms ease;
}

.hw-funnel .progress-bar__percentage {
  white-space: nowrap;
}

.hw-funnel .banner--location .icon-stroke-pin {
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
  width: 16px;
}

.hw-funnel .radio__custom-icon {
  display: block;
  fill: currentColor;
  height: 100%;
  width: 100%;
}

.hw-funnel .hw-inline-question {
  border-top: 1px solid #dcdcdc;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
}

.hw-funnel .hw-inline-question legend {
  font-size: 1.1rem;
}

.hw-funnel .step__subtitle {
  color: #767475;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
}

.hw-funnel .zip-control__button {
  border: 0;
}

.hw-funnel .step__secure-text {
  align-items: center;
  color: #767475;
  display: flex;
  font-size: 0.75rem;
  justify-content: center;
  line-height: 1.3;
  margin: 0.25rem auto 0;
  text-align: center;
}

.hw-funnel .step__secure-text::before {
  content: "\1f512";
  font-size: 0.7rem;
  margin-right: 0.35rem;
}

.hw-funnel .tcpa {
  margin-bottom: 0;
}

.hw-funnel .tcpa a {
  color: #6e6e6e;
}

.hw-funnel .hw-plus {
  display: inline-block;
  font-size: 2.75rem;
  font-weight: 300;
  line-height: 0.7;
  margin-right: 0.8rem;
  vertical-align: middle;
}

.hw-funnel .information.is-expanded .expand-collapse__content {
  display: block;
}

.hw-funnel .expand-collapse__icon {
  align-items: center;
  display: inline-flex;
  font-size: 1.75rem;
  font-weight: 400;
  height: 24px;
  justify-content: center;
  line-height: 1;
  width: 24px;
}

.hw-reference-footer {
  background: #f6f5f1;
  border-top: 1px solid #dcdcdc;
  color: #545253;
  font-family: Roboto, sans-serif;
  padding: 2rem 0;
}

.hw-reference-footer__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
}

.hw-reference-footer__logo {
  height: 31px;
  width: 265px;
}

.hw-reference-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1rem;
  justify-content: center;
}

.hw-reference-footer a {
  color: #545253;
  font-size: 0.8125rem;
  text-decoration: underline;
}

.hw-reference-footer p {
  flex-basis: 100%;
  font-size: 0.75rem;
  line-height: 1.4;
  text-align: center;
}

/* Result route */
.hw-result-page {
  align-items: center;
  background: #f6f5f1;
  display: flex;
  font-family: Roboto, sans-serif;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem 1rem;
}

.hw-result-card {
  background: #fff;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.16);
  max-width: 620px;
  padding: 2.5rem;
  text-align: center;
  width: 100%;
}

.hw-result-logo {
  height: 36px;
  margin: 0 auto 2rem;
  width: 300px;
}

.hw-result-check {
  align-items: center;
  background: #014a6f;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 2rem;
  height: 72px;
  justify-content: center;
  margin: 0 auto 1.5rem;
  width: 72px;
}

.hw-result-card h1 {
  color: #434142;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
}

.hw-result-card p {
  color: #545253;
  font-size: 1rem;
  line-height: 1.55;
  margin: 1rem auto 0;
  max-width: 500px;
}

.hw-result-card .btn {
  display: block;
  margin: 2rem auto 0;
  max-width: 280px;
}

@media (max-width: 767.98px) {
  .hw-funnel .hero__background {
    min-height: 100%;
  }

  .hw-funnel .hero__wrapper {
    width: 100%;
  }

  .hw-funnel .hero__content {
    width: 100%;
  }

  .hw-funnel .form {
    min-height: 430px;
  }

  .hw-funnel .step__content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hw-funnel .checkbox--group label {
    margin-bottom: 0.75rem;
  }

  .hw-funnel .hw-inline-question {
    margin-top: 1rem;
    padding-top: 1rem;
  }

  .hw-reference-footer__inner {
    flex-direction: column;
  }

  .hw-reference-footer__logo {
    height: 28px;
    width: 238px;
  }

  .hw-result-card {
    padding: 2rem 1.25rem;
  }
}

@media (min-width: 768px) {
  .hw-funnel .swiper--form {
    min-height: 385px;
  }

  .form-in-progress .hw-funnel .swiper--form {
    min-height: 470px;
  }

  .hw-funnel .form .step__content {
    min-height: 385px;
  }

  .form-in-progress .hw-funnel .form .step__content {
    min-height: 450px;
  }

  .hw-funnel .hw-inline-question .radio__button {
    display: inline-block;
    margin-right: 0.75rem;
    width: calc(50% - 0.5rem);
  }
}

/* --- Neutral content slots ------------------------------------------------
   Two slots that previously held third-party imagery. Sizes and positions
   match the images they replaced so the header and the partner grid keep
   their original layout.                                                    */

/* Header badge slot. .header__badge in funnel.css still supplies the box
   (30x82.5, 44x120 on md+); this rule only styles the text inside it, since
   the slot now holds a <span> instead of an <svg>. */
.hw-trust-badge {
  align-items: center;
  color: #4a4a4a;
  display: flex;
  font-size: 0.6875rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}

/* Partner list items: previously 140px-wide images, now text. The width is
   kept so the grid and line wrapping match the previous layout. */
.hw-partner-claim {
  align-items: center;
  color: #000;
  display: flex;
  font-size: 0.9375rem;
  font-weight: 500;
  justify-content: center;
  line-height: 1.3;
  min-height: 54px;
  text-align: center;
  width: 140px;
}

@media (min-width: 768px) {
  .hw-trust-badge {
    font-size: 0.8125rem;
  }

  .hw-partner-claim {
    font-size: 1rem;
  }
}

.hw-handoff {
  align-items: flex-start;
  background: #fff;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  overflow-y: auto;
  padding: 4rem 1rem 2rem;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

.hw-handoff__card {
  max-width: 420px;
  text-align: center;
  width: 100%;
}

.hw-handoff__icon {
  align-items: center;
  background: #f2f2f2;
  border-radius: 50%;
  color: #014a6f;
  display: flex;
  height: 116px;
  justify-content: center;
  margin: 0 auto 2rem;
  width: 116px;
}

.hw-handoff__title {
  color: #1a1a1a;
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.hw-handoff__text {
  color: #4a4a4a;
  font-size: 1.0625rem;
  line-height: 1.4;
  margin: 0 0 2rem;
}

.hw-handoff__bar {
  background: #ececec;
  border-radius: 2px;
  height: 4px;
  margin: 0 auto 1rem;
  max-width: 260px;
  overflow: hidden;
}

.hw-handoff__bar span {
  animation: hwHandoffBar 1.4s ease-in-out infinite;
  background: #014a6f;
  display: block;
  height: 100%;
  width: 40%;
}

@keyframes hwHandoffBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.hw-handoff__note {
  color: #767475;
  font-size: 0.875rem;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hw-handoff__bar span { animation: none; width: 100%; }
}