/* Legacy-parity text rendering: the old Creditas site sets
 * -webkit-font-smoothing: antialiased globally, which renders type
 * lighter/thinner on macOS. Webflow Code Components live in isolated
 * shadow roots, so this must be declared per-component on :host to
 * inherit into the shadow tree (the property does not cross the
 * shadow boundary). Without it, Blink defaults to subpixel smoothing
 * and identical 400-weight text looks heavier than the old site. */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * LoanSlider — standalone slider card.
 * Extracted from HeroWithSlider; same visual design as `.hero-with-slider__card`.
 *
 * Tokens:
 *   Neutral/Darkest  = #292929
 *   Neutral/Darker   = #3b4540
 *   Neutral/Dark     = #52605a
 *   Neutral/Light    = #d6dcd9
 *   Neutral/Lighter  = #f1f3f2
 *   Neutral/Lightest = #ffffff
 *   Primary/Light    = #8edb00
 *   Primary/Dark     = #4f9e00
 *   Semantic/Danger  = #b00020
 *
 *   Shadow/Small  = 0 0 8px rgba(0,0,0,.08), 0 12px 12px rgba(0,0,0,.08)
 *   Shadow/XSmall = 0 0 1px rgba(165,174,167,.9), 0 2px 5px rgba(199,206,201,.16)
 */

:host {
  display: block;
  width: 100% !important;
}

.loan-slider,
.loan-slider *,
.loan-slider *::before,
.loan-slider *::after {
  box-sizing: border-box;
}

/* ---------- card shell ------------------------------------------ */

.loan-slider {
  display: block;
  background-color: #ffffff;
  border: 1px solid #f1f3f2;
  border-radius: 10px;
  padding: 24px;
  width: 100%;
  max-width: 288px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08), 0 12px 12px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
  color: #292929;

  @media (min-width: 768px) and (max-width: 1023.98px) {
    max-width: 546px;
  }

  @media (min-width: 1024px) {
    max-width: 320px;
  }

  /* ================================================================
     Large card variant (.loan-slider.large)
     Visual spec: Figma node 7110:1488
     Card: 643px wide. Inner controls (slider, amount, button): 240px,
     centered — creating wide breathing room on both sides.
     ================================================================ */

  &.large {
    max-width: 643px;
    /* Use a generous vertical padding to match the Figma proportions */
    padding: 40px 24px;
    align-items: center;

    /* On all breakpoints the large card stays at 643px */
    @media (min-width: 768px) and (max-width: 1023.98px) {
      max-width: 643px;
    }

    @media (min-width: 1024px) {
      max-width: 643px;
    }

    /* Constrain interactive controls to 240px, centered */
    .range,
    .range-labels {
      max-width: 240px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;
    }

    .cta-link {
      max-width: 240px;
      width: 100%;
    }

    /* Remove the tablet constraint that would conflict */
    @media (min-width: 768px) and (max-width: 1023.98px) {
      .range,
      .range-labels {
        max-width: 240px;
      }
      .cta-link {
        max-width: 240px;
      }
    }
  }

  /* ---------- title ----------------------------------------------- */

  .title {
    /* Body/x-large--20/Regular — #52605a */
    margin: 0;
    text-align: center;
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0.5px;
    color: #52605a;
  }

  /* ---------- amount display -------------------------------------- */

  .amount {
    /* Heading/large--32/Regular — Maison Neue Book */
    margin: 0;
    text-align: center;
    font-family: 'Maison Neue Extended', 'Maisonneueextended Book',
      'Maisonneueextended', 'Helvetica Now Display', 'Helveticanowdisplay',
      sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.5px;
    color: #292929;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- range input ----------------------------------------- */

  .range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    margin: 0 auto;
    display: block;

    &::-webkit-slider-runnable-track {
      height: 6px;
      background: linear-gradient(
        to right,
        #8edb00 0%,
        #8edb00 var(--range-fill, 0%),
        #d6dcd9 var(--range-fill, 0%),
        #d6dcd9 100%
      );
      border-radius: 999px;
    }

    &::-moz-range-track {
      height: 6px;
      background: #d6dcd9;
      border-radius: 999px;
    }

    &::-moz-range-progress {
      height: 6px;
      background: #8edb00;
      border-radius: 999px;
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #3b4540;
      border: none;
      box-shadow: 0 0 1px rgba(165, 174, 167, 0.9),
        0 2px 5px rgba(199, 206, 201, 0.16);
      margin-top: -5px;
      cursor: grab;
      transition: transform 0.1s ease;
    }

    &::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #3b4540;
      border: none;
      box-shadow: 0 0 1px rgba(165, 174, 167, 0.9),
        0 2px 5px rgba(199, 206, 201, 0.16);
      cursor: grab;
      transition: transform 0.1s ease;
    }

    &::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }
    &::-moz-range-thumb:hover {
      transform: scale(1.15);
    }
    &:active::-webkit-slider-thumb {
      cursor: grabbing;
      transform: scale(1.2);
    }
    &:active::-moz-range-thumb {
      cursor: grabbing;
      transform: scale(1.2);
    }

    &:focus-visible::-webkit-slider-thumb {
      outline: 2px solid #8edb00;
      outline-offset: 3px;
    }
    &:focus-visible::-moz-range-thumb {
      outline: 2px solid #8edb00;
      outline-offset: 3px;
    }
  }

  @media (min-width: 768px) and (max-width: 1023.98px) {
    .range,
    .range-labels {
      max-width: 296px;
      margin-left: auto;
      margin-right: auto;
    }
    .cta-link {
      max-width: 331px;
      align-self: center;
      width: 100%;
    }
  }

  /* ---------- min / max labels ------------------------------------ */

  .range-labels {
    /* Body/x-small--12/Medium — #52605a */
    display: flex;
    justify-content: space-between;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.3px;
    color: #52605a;
    margin-top: -8px;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- error message --------------------------------------- */

  .error {
    margin: 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: #b00020;
    text-align: center;
    min-height: 20px;
  }

  /* ---------- CTA button ----------------------------------------- */

  .cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 16px;
    background-color: #8edb00;
    color: #292929;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;

    &:hover:not(:disabled) {
      background-color: #7ec300;
    }

    &:active:not(:disabled) {
      transform: translateY(1px);
    }

    &:focus-visible {
      outline: 3px solid #292929;
      outline-offset: 2px;
    }

    &:disabled {
      opacity: 0.4;
      cursor: not-allowed;
      transform: none;
    }
  }
}