/* build fix */
.car-detail-cyclic-images.block {
  scroll-padding-top: 50px;

  @media (width >=1024px) {
    scroll-padding-top: 60px;
  }
}

html[data-scroll-comp="car-detail-cyclic-images"] {
  scroll-padding-top: 50px;
}

.block.car-detail-cyclic-images {
  .image-gallery-carousel {
    padding-block: 32px 32px;

    &.image-gallery-carousel--v1 {
      .content-part .progress-bar-content .progress-bar {
        @media (width >=1024px) {
          margin-top: 0;
        }
      }
    }

    .gallery-heading {
      font-family: var(--body-font-family);
      font-size: 1.5rem;
      line-height: 1.875rem;
      font-style: normal;
      font-weight: 700;
      margin-top: 0;
      margin-bottom: 12px;
    }

    .gallery-subheading {
      font-family: var(--body-font-arena);
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 400;
      line-height: 1rem;
      margin-bottom: 32px;
      margin-top: 0;
    }

    .carousel-image-wrap .carousel-image {
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0;
      overflow: hidden;
      width: 100%;

      img {
        height: auto;
        display: block;
        max-width: 100%;
        width: -webkit-fill-available;
        object-fit: cover;

        @media (width >=768px) {
          height: 437px;
        }

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

        @media (width >=1200px) {
          height: 558px;
        }

        @media (width >=1920px) {
          height: 794px;
        }
      }

      &.hidden {
        width: 0;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        margin: 0;
      }
    }

    .carousel-accordion-heading {
      color: var(--tertiary-black);
      display: flex;
      align-items: flex-start;
      gap: 71px;
      justify-content: space-between;
      border: none;
      background: none;
      padding: 0;
      width: 100%;

      @media (width >=768px) {
        min-height: auto;
      }

      @media (width >=1024px) {
        margin-bottom: 12px;
      }

      &.hidden {
        display: none;
      }

      .carousel-text {
        flex: 1;
      }

      .carousel-text h3 {
        font-family: var(--body-font-arena);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.125rem;
        text-align: start;
        pointer-events: none;
        margin: 0;
      }

      .accordion-toggle {
        width: 24px;
        height: 24px;
        background: url('/icons/poc/add.svg');
        background-size: contain;
        background-repeat: no-repeat;
        pointer-events: none;

        &.toggled-on {
          background-image: url('/icons/poc/nil.svg');
        }

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

    .carousel-expanded-details {
      display: none;
      font-family: var(--body-font-arena);
      font-size: 0.75rem;
      font-style: normal;
      font-weight: 300;
      line-height: 1rem;
      margin-top: 16px;

      &.visible {
        display: block;
      }
    }

    .car-text-content {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    @media (width >=1024px) {
      .carousel-accordion {
        .carousel-accordion-heading:not(.hidden)+.carousel-expanded-details {
          display: block;
        }
      }

      .content-part:has(.heading-part:not(.hidden)) {
        .carousel-expanded-details {
          margin-top: 4px;
        }

        .car-text-content {
          height: unset;
          gap: 20px;
        }

        .progress-bar-content {
          flex-direction: column-reverse;

          .progress-container {
            margin-top: 32px;
          }

          .progress-bar {
            margin-bottom: 0;
          }
        }
      }
    }

    .progress-container {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      gap: 14px;

      @media (width >=768px) {
        gap: 24px;
      }

      @media (width >=1024px) {
        gap: 14.4px;
        margin-bottom: 0;
      }

      @media (width >=1366px) {
        gap: 20px;
      }
    }

    .progress-bar {
      width: 100%;
      height: 1px;
      background: var(--light-grey-shade-8);
      position: relative;
      overflow: hidden;

      @media (width >=1024px) {
        margin-bottom: 40px;
      }
    }

    .progress-bar.active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background: var(--primary-blue-700);
      animation: progress-animation 5s linear infinite;
    }

    &.square {
      .carousel-image-wrap .carousel-image {
        img {
          aspect-ratio: 1 / 1;
        }
      }
    }

    &.portrait {
      .carousel-image-wrap .carousel-image {
        img {
          aspect-ratio: auto;
        }
      }
    }

    &.white {
      background: var(--tertiary-white);
    }

    &.lilywhite {
      background: var(--lily-white);
      padding-block: 32px 34px;
    }
  }

  .image-gallery-carousel--right {
    @media (width >=1024px) {
      flex-direction: row-reverse;
    }

    .gallery-heading {
      padding-top: 2px;
    }
  }

  .cyclic-image-left,
  .cyclic-image-right {
    @media (width >=1024px) {
      display: flex;
      justify-content: space-between;
    }

    &.image-gallery-carousel {
      @media (width >=1024px) {
        padding-block: 96px 96px;
        gap: 25px;
      }
    }

    .content-part {
      margin-top: 20px;

      @media (width >=1024px) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        margin-top: 0px;
      }

      .gallery-heading {
        @media (width >=1024px) {
          font-size: 2.5rem;
          line-height: 48px;
          color: var(--primary-blue-900);
          margin-bottom: 16px;
        }
      }

      .gallery-subheading {
        @media (width >=1024px) {
          font-size: 0.875rem;
          line-height: 20px;
        }
      }

      .progress-bar-content {
        @media (width >=1024px) {
          display: flex;
          flex-direction: column;

          .carousel-accordion.carousel-accordion-heading {
            margin-top: 20px;
          }

          .progress-container {
            justify-content: space-between;
          }
        }

        .carousel-accordion-heading .carousel-text h3 {
          @media (width >=1024px) {
            font-size: 1.5rem;
            line-height: 28px;
            width: 100%;
            font-family: var(--body-font-family);
          }
        }

        .carousel-expanded-details {
          @media (width >=1024px) {
            font-size: 0.875rem;
            font-weight: 400;
            line-height: 20px;
            margin-top: 20px;
            color: var(--secondary-black);
          }

          @media (width >=1920px) {
            margin-top: 20px;
          }
        }

        .car-text-content {
          gap: 16px;

          @media (width >=1024px) {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 442px;
          }
        }

        .accordion-disclaimer-group {
          display: flex;
          flex-direction: column;
          gap: 8px;

          @media (width >=1024px) {
            gap: 16px;
          }

          &.hidden {
            display: none;
          }
        }

        .outside-disclaimer {
          padding-top: 16px;
        }

        .accordion-disclaimer {
          font-family: var(--body-font-family);
          font-weight: 400;
          font-style: italic;
          font-size: 12px;
          line-height: 12px;

          @media (width >=1024px) {
            font-size: 14px;
            line-height: 14px;
          }
        }
      }
    }
  }

  .cyclic-image-right {
    @media (width >=1024px) {
      flex-direction: row-reverse;
      gap: 24px;
    }
  }
}

.car-carousel-slider {
  ul {
    margin-top: 18px;
    align-items: stretch;
    display: flex;

    li {
      @media (width >=768px) {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }

      @media (width >=1024px) {
        gap: 20px;
      }

      @media (width >=1366px) {
        gap: 17px;
      }

      img,
      video {
        width: 100%;
        height: 500px;

        @media (width >=768px) {
          width: 100%;
          height: 561px;
        }

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

        @media (width >=1200px) {
          height: 432px;
        }

        @media (width >=1920px) {
          height: 584px;
        }
      }

      div {
        width: 100%;
        display: flex;
        flex-direction: column;

        @media (width>=768px) {
          width: 100%;
        }
      }
    }
  }
}

.image-gallery-carousel {
  .controls {
    display: none;
    height: 32px;
    position: relative;

    @media (width>=1024px) {
      display: flex;
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      width: 100%;
      z-index: 2;
      justify-content: space-between;
      padding-inline: 22px;
    }

    button {
      border: none;
      background: none;
      height: 2rem;
      width: 2rem;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      z-index: 10;
      position: absolute;
      cursor: pointer;

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

      &:disabled {
        filter: contrast(0.3);
      }
    }

    .splide__arrows-bg {
      width: 64px;
      height: 64px;
      background: var(--grey-shade-1);
      position: relative;
      top: -15px;
    }

    .prev-arrow {
      background-image: url(/icons/slider-arrow-right-white.svg);
      transform: rotate(180deg);
      margin: 12px;
    }

    .next-arrow {
      background-image: url(/icons/slider-arrow-right-white.svg);
      margin: 12px;
    }
  }

  .car-carousel-slider .controls-section .controls.hidden {
    display: none;
  }

  .splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
    @media (width >= 1024px) {
      height: fit-content;
    }
  }

  .splide__track--draggable {
    user-select: none;
  }

  .splide__list {
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin: 0;
    padding: 0;
  }

  .splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    list-style-type: none;
    margin: 0;
    position: relative;
  }

  .splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
}

@keyframes progress-animation {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0);
  }
}