/* -webkit-font-smoothing: antialiased is set globally on the old site and must
 * be re-declared per code-component on :host (it does not cross the shadow
 * boundary). */
:host {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * WhyChooseUsChart — OLD creditas-site render (rate-comparison bar chart).
 *
 * Class naming: single-class, no BEM `__` separator; base element rules are
 * nested under the `.wcuc-old` block. State/modifier combinations
 * (`.is-active`, `.wcuc-old.centered`, `.bar.ours`…) stay flat top-level,
 * scoped by `.wcuc-old`. The CTA is `.button` (not `.cta`) to avoid the global
 * `.cta` block from the Cta component. `is-active` is toggled by JS on scroll.
 *
 * Values resolved from the old styled-components + @creditas-ui standard:
 *   colors.neutral.0 #ffffff .10 #f1f3f2 .15 #d6dcd9 .40 #9fada7
 *   colors.neutral.80 #3b4540 .90 #292929  primary.40 #8edb00 primary.60 #4f9e00
 *   breakpoints 2xl=600 4xl=880 5xl=1024 xl=480
 *   maxWidthContainer 1388 + padding 40 = 1428 · chartMaxWidth 392 · max rate 14.06%
 */

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

.wcuc-old {
  display: block;
  width: 100%;
  overflow: visible;
  background: #ffffff;
  color: #292929;
  font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;

  /* ----- Container / Grid ---------------------------------------- */

  .container {
    margin: 0 auto;
    width: 100%;
    max-width: 1428px;
    padding: 64px 16px 72px;

    @media (min-width: 880px) {
      padding: 120px 16px;
    }
  }

  .grid {
    display: grid;
    column-gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: max-content;
    grid-template-areas:
      'content content content content'
      'chart chart chart chart'
      'description description description description'
      'button button button button';

    @media (min-width: 600px) {
      column-gap: 36px;
      grid-template-columns: repeat(8, 1fr);
      grid-template-areas:
        'content content content content content content content content'
        'chart chart chart chart chart chart chart chart'
        'description description description description description description description description'
        'button button button button button button button button';
    }

    @media (min-width: 1024px) {
      column-gap: 24px;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 180px 140px;
      grid-template-areas:
        'chart chart chart chart chart chart content content content content content content'
        'chart chart chart chart chart chart description description description description description description'
        'chart chart chart chart chart chart button button button button button button';
    }
  }

  .area-chart {
    grid-area: chart;
  }
  .area-content {
    grid-area: content;
  }
  .area-description {
    grid-area: description;
  }
  .area-button {
    grid-area: button;
  }

  /* ----- ChartWrapper / InnerChart ------------------------------- */

  .chart-wrapper {
    margin: 0 auto;
    width: 100%;
    max-width: 392px;
    overflow: hidden;
    padding-top: 32px; /* spacingTop.8xl */
    padding-bottom: 80px;
  }

  .inner-chart {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
    height: calc(252px + 55px);

    @media (min-width: 1024px) {
      height: calc(315px + 55px);
    }

    /* baseline rule (neutral.10) */
    &::before {
      content: '';
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background-color: #f1f3f2;

      @media (min-width: 1024px) {
        width: 97%;
      }
    }
  }

  /* ----- Bar ----------------------------------------------------- */

  .bar {
    --bar-h: var(--bar-h-sm);
    position: relative;
    width: 25%;
    max-width: 95px;
    height: 0;
    background: transparent;
    z-index: 1;
    animation: wcuc-old-grow var(--bar-dur, 2s) ease-in-out both
      var(--bar-delay, 0s);
    animation-play-state: paused;

    @media (min-width: 1024px) {
      --bar-h: var(--bar-h-lg);
    }

    /* visible coloured column */
    &::before {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background: currentColor;
      border-radius: 2px 2px 0 0;
      z-index: 2;
    }
  }

  /* ----- Number -------------------------------------------------- */

  .number {
    position: absolute;
    bottom: 100%;
    color: currentColor;
    text-align: right;
    transform: translate3d(0, 50%, 0);
    z-index: 1;
    opacity: 0;
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 12px; /* bodyXsMedium (<1024) */
    line-height: 16px;
    letter-spacing: 0.3px;
    animation: wcuc-old-fade 0.5s ease-in-out both var(--num-delay, 0.5s);
    animation-play-state: paused;

    @media (min-width: 480px) {
      padding-right: 8px;
    }

    @media (min-width: 1024px) {
      font-size: 16px; /* bodyMdMedium */
      line-height: 24px;
    }
  }

  /* ----- Product name text --------------------------------------- */

  .text {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 8px;
    text-align: center;
    color: #292929; /* neutral.90 */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 12px; /* bodyXsMedium */
    line-height: 16px;
    letter-spacing: 0.3px;
  }

  /* ----- Creditas logo (above green bars) ------------------------ */

  .logo {
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-bottom: 10px;
    width: 23px;
    height: 17px;
    transform: translate3d(-50%, 0, 0);
    opacity: 0;
    animation: wcuc-old-fade-logo 1.5s ease both var(--logo-delay, 2s);
    animation-play-state: paused;

    img {
      display: block;
      width: 23px;
      height: auto;
    }
  }

  /* ----- PreTitle (exceptionMdBold, uppercase) ------------------- */

  .pretitle {
    margin: 0 0 16px 0;
    text-transform: uppercase;
    color: #3b4540; /* neutral.80 */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1.5px;

    @media (min-width: 1024px) {
      font-size: 12px; /* exceptionSmBold */
      line-height: 16px;
    }
  }

  /* ----- Title (headingLgLight → headingXlLight) ----------------- */

  .title {
    margin: 0 0 36px 0;
    color: #292929; /* neutral.90 */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0.5px;

    @media (min-width: 1024px) {
      font-size: 40px;
      line-height: 52px;
      margin-bottom: 0;
    }
  }

  /* ----- Description (bodyMdRegular → bodyXlLight → bodyLgRegular) - */

  .description {
    color: #3b4540; /* neutral.80 */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0.3px;
    margin-top: 32px;
    margin-bottom: 32px;

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

    @media (min-width: 1024px) {
      font-weight: 400;
      font-size: 18px;
      line-height: 26px;
      letter-spacing: 0.3px;
      margin: 0;
    }

    > p {
      margin: 0;
    }
    > p + p {
      margin-top: 16px;
    }
    strong,
    b {
      font-weight: 700;
    }
  }

  /* ----- CTA (ButtonCta primary, with arrow) -------------------- */

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 60px;
    width: 100%;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    background-color: #8edb00; /* primary.40 */
    color: #292929; /* neutral.90 */
    font-family: 'Helvetica Now Display', 'Helveticanowdisplay', sans-serif;
    font-weight: 500;
    font-size: 14px; /* bodySmMedium */
    line-height: 20px;
    letter-spacing: 0.3px;
    transition: box-shadow 0.2s ease, background-color 0.2s ease;

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

    &:hover {
      box-shadow: 0 8px 24px rgba(31, 45, 39, 0.16);
    }

    &:focus-visible {
      outline: 2px solid #4f9e00;
      outline-offset: 2px;
    }
  }

  .button-icon {
    width: 20px;
    height: 20px;
  }
}

/* ----- keyframes ------------------------------------------------ */

@keyframes wcuc-old-grow {
  0% {
    height: 0;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    height: var(--bar-h);
    opacity: 1;
  }
}

@keyframes wcuc-old-fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes wcuc-old-fade-logo {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 10px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

/* ----- state / modifier combinations (scoped by .wcuc-old) ------ */

.wcuc-old .bar + .bar {
  margin-left: 4px;
}

/* bar colours + their number-weight override */
.wcuc-old .bar.ours {
  color: #9fada7; /* primary.60 */

  .number {
    font-weight: 700;
  }
}
.wcuc-old .bar.competitor {
  color: #3b4540; /* neutral.80 */

  .number {
    font-weight: 500;
    color: #3b4540; /* neutral.80 */
  }
}
.wcuc-old .bar.first-comp {
  color: #3b4540; /* neutral.40 */
}
/* main Creditas product highlighted in brand green (primary.60) — overrides
 * .bar.ours by cascade order (same single-class specificity). */
.wcuc-old .bar.first-ours {
  color: #4f9e00; /* primary.60 */
}

/* scroll trigger: is-active starts every animation */
.wcuc-old.is-active {
  .bar,
  .number,
  .logo {
    animation-play-state: running;
  }
}

/* ladder layout (default: single Creditas product) — left-stacked numbers
 * with dashed guide lines running across the chart. */
.wcuc-old:not(.wcuc-old.centered) {
  .number {
    left: var(--number-left);

    &::after {
      content: '';
      position: absolute;
      left: 100%;
      top: 50%;
      transform: translate3d(0, calc(-50% + 1px), 0);
      width: 392px;
      height: 1px;
      border-bottom: dashed 1px currentColor;
    }
  }
  .bar.ours .number {
    padding-right: 4px;
  }
  .bar.competitor .number::after {
    border-bottom-color: #d6dcd9; /* neutral.15 */
  }
}

/* centered layout (second Creditas product present) */
.wcuc-old.centered {
  .number {
    left: auto;
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
  }
  .logo {
    bottom: calc(100% + 20px);
  }
}

/* ----- reduced motion: show final state immediately ------------- */
@media (prefers-reduced-motion: reduce) {
  .wcuc-old .bar {
    height: var(--bar-h);
    animation: none;
  }
  .wcuc-old .number,
  .wcuc-old .logo {
    opacity: 1;
    animation: none;
  }
  .wcuc-old .logo {
    transform: translate3d(-50%, 0, 0);
  }
}