/**
 * LoanSliderOld — self-contained replica of the OLD creditas-site "simulate your
 * loan" slider card. Previously this component injected the whole 234KB legacy
 * CSS blob and rendered opaque `css-*` Emotion hashes; every rule below is the
 * faithful, extracted equivalent for those hashes, rewritten with semantic
 * class names so the component owns its styles (no blob dependency).
 *
 * Source hashes (old site) → semantic classes:
 *   css-kvpnpv  → .loan-slider-old            (white sticky card)
 *   css-9d3wzj  → .loan-slider-old .label
 *   css-1hgts9t → .loan-slider-old .input-row
 *   css-s3vzgc  → .loan-slider-old .field
 *   css-1ddvagz → .loan-slider-old .input     (masked currency field)
 *   css-7aupm   → .loan-slider-old .range     (48px chevron thumb, 2px track)
 *   css-15o8vh4 → .loan-slider-old .cta-link
 *
 * The old site only ships a single desktop breakpoint for this card: base
 * (mobile) and >=1024px. Colors below are the old rgb() tokens as hex:
 *   #8edb00 primary/light · #292929 neutral/100 · #3b4540 neutral/80
 *   #d6dcd9 track grey · #f1f3f2 border grey
 *
 * The old range track fill is a per-value gradient; we drive it live via the
 * `--range-fill` custom property set inline on the element per value.
 */

/* Legacy-parity text rendering + block host (does not cross the shadow
   boundary, so it must be declared on :host per-component). */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: block;
  width: 100% !important;
  color: #292929;
}

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

/* ----- card (form) ----------------------------------------------- */
.loan-slider-old {
  width: 100%;
  position: sticky;
  z-index: 1;
  max-width: 100%;
  padding: 40px 32px;
  border: 1px solid #f1f3f2;
  border-radius: 16px;
  background-color: #ffffff;
  box-shadow: 0 28px 64px rgba(31, 45, 39, 0.16);

  @media (min-width: 1024px) {
    width: 288px;
    padding: 40px 24px;
  }

  /* ----- label ----------------------------------------------------- */
  .label {
    display: block;
    width: 100%;
    margin: 0 0 32px;
    text-align: center;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    letter-spacing: 0.3px;
    color: #3b4540;

    @media (min-width: 1024px) {
      margin-bottom: 40px;
      font-size: 20px;
      font-weight: 300;
      line-height: 28px;
      letter-spacing: 0.5px;
    }
  }

  /* ----- currency input ------------------------------------------- */
  .input-row {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .field {
    cursor: text;
    margin-bottom: 24px;
  }

  .input {
    &,
    &::placeholder {
      font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
      font-size: 32px;
      font-weight: 400;
      line-height: 40px;
      letter-spacing: 0.5px;
    }

    width: 200px;
    height: 60px;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    color: #292929;

    @media (min-width: 1024px) {
      height: 40px;
    }
  }

  /* ----- range slider --------------------------------------------- */
  .range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: auto;
    min-height: 48px;
    margin: 0 0 24px;
    background: transparent;
    outline: none;
    overflow: visible;

    /* Track — dynamic fill: #8edb00 up to --range-fill, then #d6dcd9. */
    &::-webkit-slider-runnable-track {
      width: 100%;
      height: 2px;
      cursor: pointer;
      background: linear-gradient(
        to right,
        #8edb00 0%,
        #8edb00 var(--range-fill, 0%),
        #d6dcd9 var(--range-fill, 0%),
        #d6dcd9 100%
      );
    }

    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 48px;
      height: 48px;
      margin-top: -24px;
      border: none;
      border-radius: 50%;
      background-color: #ffffff;
      background-image: url('https://api.creditas.io/creditas-site/images/chevron-right-left.png');
      background-repeat: no-repeat;
      background-position: center center;
      box-shadow: 0 12px 12px rgba(0, 0, 0, 0.08), 0 0 8px rgba(0, 0, 0, 0.08);
      cursor: grab;
      outline: none;
      position: relative;
    }

    &::-webkit-slider-thumb:active {
      cursor: grabbing;
    }

    /* Firefox: mirror the track + progress + 48px thumb. */
    &::-moz-range-track {
      height: 2px;
      background: #d6dcd9;
    }
    &::-moz-range-progress {
      height: 2px;
      background: #8edb00;
    }
    &::-moz-range-thumb {
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 50%;
      background: #ffffff
        url('https://api.creditas.io/creditas-site/images/chevron-right-left.png')
        no-repeat center center;
      box-shadow: 0 12px 12px rgba(0, 0, 0, 0.08), 0 0 8px rgba(0, 0, 0, 0.08);
      cursor: grab;
      outline: none;
      border: none;
      position: relative;
    }
  }

  /* ----- validation message (old site renders this only on error) -- */
  .error {
    margin: 0 0 8px;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.3px;
    color: #b00020;
    text-align: center;
  }

  /* ----- CTA ------------------------------------------------------- */
  .cta-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 18px 24px;
    border: none;
    border-radius: 16px;
    background-color: #8edb00;
    color: #292929;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.3px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(199, 206, 201, 0.16),
      0 0 1px rgba(165, 174, 167, 0.9);
    transition: box-shadow 0.3s ease-in-out;

    &:hover,
    &:focus {
      box-shadow: 0 16px 12px -8px rgba(0, 0, 0, 0.16),
        0 16px 8px -12px rgba(0, 0, 0, 0.12);
      outline: 0;
    }
  }
}