.hero {
  position: relative;

  .hero-container {
    height: 100%;
    background-color: var(--nexa-primary-main);
    aspect-ratio: 9 / 16;

    @media (width >= 768px) {
      aspect-ratio: 16 / 9;
    }

    .hero-media {
      &.hero-default-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;

        picture,
        video {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
        }

        img,
        video {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      /* --- Splide Arrows --- */
      .splide__arrows {
        position: absolute;
        top: 50%;
        z-index: 5;
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 var(--spacing-l);

        .splide__arrow {
          position: relative;
          width: 54px;
          height: 54px;
          background: transparent;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;

          &::before {
            content: '';
            display: block;
            width: 25px;
            height: 25px;
            background: center / contain no-repeat;
            position: relative;
            z-index: 2;
            filter: invert(1);
          }

          &:disabled {
            opacity: 0;
            pointer-events: none;
          }

          &.splide__arrow--prev::before {
            background-image: url('/genuine-accessories/icons/arrow_forward_FILL_black.svg');
            transform: rotate(180deg);
          }

          &.splide__arrow--next::before {
            background-image: url('/genuine-accessories/icons/arrow_forward_FILL_black.svg');
          }
        }

        /* --- Circular Progress Ring --- */
        .arrow-timeline {
          position: absolute;
          inset: 0;
          z-index: 1;
          width: 54px; /* match viewBox size */
          height: 54px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          pointer-events: none;

          svg {
            display: block;
            width: 100%;
            height: 100%;
            transform: rotate(90deg); /* start progress at bottom */

            circle {
              fill: none;
              stroke-width: 3;
            }

            .progress-bg {
              stroke: transparent;
            }

            .progress-bar {
              stroke: var(--progress-bar);
              stroke-linecap: round;
              transition: stroke-dashoffset 0.1s linear;
            }
          }
        }
      }

      /* --- Splide Slide Tracker --- */
      .splide__track {
        overflow: hidden;
        position: relative;

        .splide__list {
          display: flex !important;
          margin: 0;
          padding: 0;
          list-style: none;
          transition: transform 0.4s ease;

          .splide__slide {
            flex: 0 0 100%;
            position: relative;

            img,
            video {
              width: 100%;
              height: auto;
              object-fit: cover;
              display: block;
            }
          }
        }
      }

      /* --- Splide Pagnation --- */
      .splide__pagination {
        bottom: 52px;
        padding: var(--spacing-xsmall);
        gap: var(--spacing-xsmall);
        border-radius: 16px;
        background-color: var(--color-opacity-14);

        & li {
          .splide__pagination__page {
            background-color: var(--color-opacity-35);

            &.is-active {
              background-color: var(--tertiary-color);
            }
          }
        }
      }
    }

    .hero-content {
      height: fit-content;
      position: absolute;
      top: var(--nav-height);
      padding: 0 var(--spacing-l);

      @media (width < 1024px) {
        width: 100%;
      }

      @media (width >= 1024px) {
        padding: 0 56px;
      }

      .hero-search-bar {
        width: 100%;
        margin-top: var(--sizing-xl);
        position: relative;
        display: flex;
        align-items: center;

        @media (width >= 1024px) {
          display: none;
        }

        .icon-search {
          cursor: pointer;
          position: absolute;
          left: 16px;
          width: 16px;
          height: 16px;
          background: center / contain no-repeat url('/genuine-accessories/icons/search.svg');
        }

        input {
          cursor: pointer;
          width: 100%;
          height: 42px;
          padding: 3px var(--sizing-m) 3px calc(16px + 16px + 8px);
          align-items: center;
          gap: var(--spacing-xsmall);
          background: var(--input-gradient);
          font-size: var(--fs-small);
          font-weight: var(--fw-400);
          line-height: var(--lh-medium);
          border: none;
          outline: none;

          &::placeholder {
            color: var(--secondary-color);
          }
        }
      }

      &.hero-default-content {
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        flex-direction: column;

        &.hero-content--center {
          @media (width >= 1024px) {
            top: 50%;
            transform: translate(-50%, -50%);
          }

          .hero-content-title * {
            margin-top: var(--sizing-xl);
            font-size: var(--fs-xxlarge);
            font-weight: var(--fw-300);
            color: var(--background-color);
            text-align: center;

            @media (width >= 1024px) {
              margin-top: 0;
              font-size: 64px;
              font-weight: var(--fw-300);
              line-height: 64px;
            }
          }

          .select-vehicle-btn {
            margin-top: 77px;
            background-color: transparent;
            border: none;
            outline: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 13px;

            @media (width >= 1024px) {
              margin-top: 52px;
              gap: 32px;
            }

            .plus-icon {
              width: 46px;
              height: 46px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              border-radius: 100%;
              background: var(--select-btn);
              backdrop-filter: blur(2px);
              cursor: pointer;

              @media (width >= 1024px) {
                width: 92px;
                height: 92px;
              }

              &::before {
                content: '';
                display: inline-block;
                width: 24px;
                height: 24px;
                background: center / contain no-repeat url('/genuine-accessories/icons/add_white.svg');
                transform: rotate(270deg);

                @media (width >= 1024px) {
                  width: 40px;
                  height: 40px;
                }
              }
            }

            .label {
              color: var(--background-color);
              font-size: 15.097px;
              font-style: normal;
              font-weight: var(--fw-400);
              line-height: var(--lh-large);
              padding: var(--sizing-2xs) 30px;

              @media (width >= 1024px) {
                font-size: var(--fs-xxlarge);
                font-weight: var(--fw-300);
              }
            }
          }
        }

        &.hero-content--left {
          @media (width >= 1024px) {
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            align-items: flex-start;
          }

          .hero-content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            @media (width >= 1024px) {
              align-items: flex-start;
            }

            .hero-content-title * {
              margin-top: var(--sizing-xl);
              font-size: var(--fs-xlarge);
              font-weight: var(--fw-400);
              line-height: var(--lh-xlarge);
              color: var(--background-color);
              text-align: center;
              max-width: 275px;

              @media (width >= 1024px) {
                font-size: var(--fs-xxxlarge);
                line-height: var(--lh-40);
                max-width: 321px;
                text-align: left;
              }
            }

            .hero-action-container {
              display: flex;
              flex-direction: row;
              align-items: center;
              gap: var(--spacing-18);
              margin-top: var(--spacing-small);

              @media (width >= 1024px) {
                margin-top: var(--spacing-medium);
              }

              .hero-cta {
                background-color: var(--tertiary-color);
                color: var(--neutrals-sub-texts-paragraphs);
                border: 1px solid var(--tertiary-color);
                max-height: 40px;
                min-width: 152px;

                @media (width >= 1024px) {
                  min-width: 189px;
                }
              }

              .select-vehicle-btn {
                background-color: transparent;
                outline: none;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                border: 1px solid var(--tertiary-color);
                color: var(--tertiary-color);
                max-height: 40px;
                min-width: 152px;

                @media (width >= 1024px) {
                  min-width: 189px;
                }

                .label {
                  padding: 0 var(--spacing-xsmall);
                }

                .arrow-icon {
                  display: inline-flex;
                  align-items: center;
                  justify-content: center;
                  cursor: pointer;

                  &::before {
                    content: '';
                    display: inline-block;
                    width: 20px;
                    height: 20px;
                    background: center / contain no-repeat url('/genuine-accessories/icons/arrow_back.svg');
                    transform: rotate(180deg);

                    @media (width >= 1024px) {
                      width: 24px;
                      height: 24px;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .hero-selected-vehicle-content {
        display: flex;
        margin-top: 32px;

        @media (width >= 1024px) {
          margin: 52px auto 0;
        }

        .hero-content-title p {
          display: none;
          color: var(--secondary-color);
          font-size: var(--fs-medium);
          font-weight: var(--fw-300);
          line-height: var(--lh-medium);
        }
      }
    }
  }

  .banner__cta {
    bottom: var(--sizing-xl);
    right: var(--container-margin);
    position: absolute;
    padding: 0 var(--container-margin);
    width: 100%;
    left: 0;
    display: inline-flex;
    flex-direction: row-reverse;

    @media (width >= 768px) {
      bottom: 31px;
    }

    @media (width >= 1024px) {
      position: absolute;
      bottom: 54px;
    }

    .banner__ctalink {
      color: var(--tertiary-color);
      font-feature-settings: var(--font-settings);
      font-weight: var(--fw-300);
      font-size: var(--fs-xsmall);
      line-height: var(--lh-large);
      text-decoration: underline;
      text-decoration-skip-ink: none;
      font-style: italic;
      display: inline-block;
      white-space: normal;
      word-break: break-word;
      border: unset;
      background: transparent;

      @media (width >= 768px) {
        font-size: 1.1rem;
        line-height: var(--lh-xsmall);
      }

      @media (width >= 1024px) {
        font-size: var(--fs-xsmall);
        line-height: var(--lh-large);
      }
    }
  }

  /* Popup container */
  .termsConditionPopup {
    display: none;
    position: absolute;
    bottom: 100%;
    right: 16px;
    transform: translateY(-16px);
    background: var(--subtext-grey);
    color: var(--tertiary-color);
    width: 231px;
    min-height: 215px;
    padding: var(--spacing-xsmall) var(--spacing-12);
    box-shadow: 0 2px 7px 0 var(--ui-divider-low);
    z-index: 9;

    @media (width >= 1024px) {
      right: var(--container-margin);
    }

    ::after {
      content: '';
      background-image: url('/genuine-accessories/icons/tandcpopup_arrow.svg');
      background-repeat: no-repeat;
      background-position: center;
      display: block;
      bottom: -17px;
      position: absolute;
      width: 20px;
      height: 20px;
      right: 18px;
    }

    .termsConditionPopup__list {
      padding-inline: 15px 0;

      ul {
        list-style-type: disc;

        li {
          color: var(--tertiary-white);
          margin-top: 0;
          font-family: var(--nexa-font);
          font-size: var(--fs-xxsmall);
          font-style: normal;
          font-weight: var(--fw-300);
          line-height: var(--lh-17);
        }
      }
    }
  }

  .termsConditionPopup.showTermsPopup {
    display: block;
  }
}