/* build fix */
@import url('../../commons/blocks/compare-cars/compare-cars.css');

.compare-cars-container {
  &::before,
  &::after {
    display: none;
  }
}

header.show-header + main {
  .compare-cars-wrapper {
    .sticky-pannel {
      top: 0px;
      animation: slide-in 0.5s ease;
    }
    .car-info-wrapper {
      scroll-margin: 0px;
    }
  }
}

.compare-cars-wrapper {
  padding: 0;
  margin-top: 0;
  background: var(--tertiary-white);

  .title-wrapper {
    padding: 40px 0 24px 0;
    .heading {
      margin: 0;
      padding-bottom: 8px;
      font-size: 1.5rem;
      color: var(--secondary-black);
      font-family: var(--body-font-family);
      font-weight: 700;
      line-height: 1.75rem;
      max-width: 459px;

      @media (width >= 1024px) {
        padding-bottom: 16px;
        font-size: 2rem;
        line-height: 2.5rem;
      }
    }
    .description {
      margin: 0;
      font-size: 12px;
      line-height: 1rem;
      font-weight: 300;
      color: var(--tertiary-black);
      font-family: var(--body-heading-font-family);
      max-width: 369px;

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

  .addMoreCars {
    .addcarsBtn {
      background: url(/icons/add-white.svg) var(--primary-blue-700) no-repeat center / contain;

      &:disabled {
        background: url(/icons/add-grey.svg) var(--bars-unselected) no-repeat center / contain;
      }
      @media (width >=1366px) {
        padding: 0;
        width: 40px;
        height: 40px;
      }
    }
  }

  .vehicle-dropdown {
    margin-top: 8.85px;
    padding-bottom: 8px;
    &.car-model {
      padding-bottom: 4.15px;
    }
    &.car-variant {
      padding-bottom: 0px;
    }
    .dropdown-button {
      font-family: var(--body-heading-font-family);
      color: var(--tertiary-black);
      border-bottom: 0.5px solid var(--light-grey-shade-6, #8d8d8d);
      font-size: 14px;
      font-weight: var(--fw-400);
      line-height: 1.125rem;
      padding: 0px 0px 4px 0px;
      min-height: 24px;
      &::after {
        width: 24px;
        height: 24px;
        background-size: 24px;
        top: 0;
      }
      &.default {
        color: var(--inactive-content);
        line-height:  1.125rem;
      }
      &:disabled {
        color: var(--bars-unselected);
      }
    }
    .dropdown-list-container {
      z-index: 99;
    }
    .dropdown-list {
      width: calc(100% - 2px);
      @media (width >=1024px){
        width: 100%;
      }
    }
    .dropdown-list li {
      padding: 8px 12px;
      flex-direction: row;
      font-family: var(--body-heading-font-family);
      color: var(--tertiary-black);
      font-weight: 400;
      line-height: 15px;
      .item-name {
        font-size: 12px;
        line-height: 1rem;
        font-family: var(--body-heading-font-family);
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
      }
      span.item-price {
        font-size: 0.75rem;
        line-height: 1rem;
        font-family: var(--body-heading-font-family);
      }
    }
    .variant-dropdown {
      .dropdown-button {
        text-align: left;
      }
      .dropdown-content {
        padding: 8px 4px;
        margin-top: 0;
        padding-top: 0;
        .dropdown-list li {
          line-height: 15px;
          padding: 0px 4px 0px 4px;
          color: var(--tertiary-black);
          flex-wrap: wrap;
          flex-direction: column;
          @media (width >=1024px){
            flex-direction: row;
            padding: 0px 4px 0px 8px;
          }
          .item-name-group {
              display: flex;
              justify-content: space-between;
              width: 100%;
              flex-direction: column;
              @media (width >= 1024px) {
                flex-direction: row;
              }
              
            .item-name {
              font-size: 12px;
              font-weight: 600;
              line-height: 1rem;
              font-family: var(--body-heading-font-family);
              flex: 1;
            }
            .item-price {
              font-size: 0.75rem;
              font-weight: 400;
              line-height: 1rem;
              font-family: var(--body-heading-font-family);
              padding-block:4px 8px;
              @media (width >= 1024px) {
                padding-block:0px 0px;
              }
            }
          }
          .item-category {
            position: relative;
            font-size: 0.75rem;
            line-height: 1rem;
            font-family: var(--body-font-arena);
            display: none;
            margin-top: 4px;
            @media (width >=1024px){
              position: unset;
              display: block;
            }
          }
          &.hidden {
            display: none;
          }
          &.preselected * {
            color: var(--inactive-content);
          }
        }
        .tabs {
          margin: 8px 4px 8px 4px;
          .tab-button {
            padding: 12px 8px;
            text-transform: uppercase;
            position: relative;
            font-size: 10px;
            font-weight: 400;
            line-height: normal;
            font-family: var(--body-heading-font-family);
            border: none;
            &:after {
              content: '';
              background: var(--dark-color);
              position: absolute;
              width: 100%;
              bottom: 0px;
              height: 1px;
            }
            &.active {
              color: var(--primary-blue-700);
              font-weight: 700;
              border: none;
              &::after {
                position: absolute;
                content: '';
                width: 100%;
                height: 2px;
                bottom: 0px;
                z-index: 1;
                background: var(--primary-blue-700);
              }
            }
          }
        }
        .filters {
          display: flex;
          gap: 4px;
          margin: 0px 4px 12px 4px;
          .filter-button {
            padding: 0px 8px;
            border: 1px solid var(--dark-color);
            border-radius: 0px;
            font-size: 10px;
            font-family: var(--body-font-arena);
            color: var(--neutrals-heading);
            &.active {
              background: var(--primary-blue-700);
            }
            &[data-filter='Strong Hybrid'] {
              display: none;
            }
          }
        }
        .dropdown-list {
          @media (width <1024px){
            width: calc(100% - 4px);
          }
        }
      }
      @media (width < 768px) {
        .add-margin {
          margin-top: 30.5px;
        }
      }
    }
  }

  .search-block-wrapper {
    font-family: var(--body-heading-font-family);

    .anchor-tab {
      gap: 40px;
      border-bottom: 1px solid var(--tertiary-medium-grey);
      width: max-content;
      max-width: 100%;
      @media (width >=768px) {
        max-width: max-content;
      }
      a {
        text-transform: uppercase;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 400;
        padding: 0 0 4px 0;
        border: none;
        color: var(--tertiary-black);
        @media (width >= 1024px) {
          font-weight: 700;
        }
        &.active {
          color: var(--primary-blue-700);
          font-weight: 700;
          @media (width >= 1024px) {
            font-weight: 600;
          }
          &::after {
            border-bottom: 2px solid var(--primary-blue-700);
          }
        }
      }
    }

    &.sticky-pannel {
      background: var(--gradient-6);
      background-color: var(--tertiary-white);
      padding: 40px 20px 24px;
      @media (width >= 1024px) {
        padding: 56px 56px 69px;
      }
      .sticky-title {
        font-family: var(--body-heading-font-family);
      }
      .sticky-sub-title {
        font-family: var(--body-heading-font-family);
        color: var(--tertiary-black);
        font-weight: 500;
        margin-top: 12px;
        padding-bottom: 12px;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
        }
      }
      .sticky-price-wrapper {
        margin-top: 12px;
        .sticky-price-text {
          font-family: var(--body-heading-font-family);
          font-size: 0.75rem;
          line-height: 1.125rem;
          text-transform: inherit;
        }
        .sticky-price {
          font-family: var(--body-heading-font-family);
          font-size: 14px;
          line-height: 18px;
          font-weight: 700;
        }
      }
      .anchor-tab {
        margin-top: 24px;
      }
      .g-sm-2:first-child {
        padding-left: 0;
        @media (width >= 768px) {
          padding-left: 8px;
        }
        @media (width >= 1024px) {
          padding-left: unset;
        }
      }
      .g-sm-4 {
        padding-left: 0;
        @media (width >= 1024px) {
          padding-left: unset;
        }
      }
      .sticky-column {
        img {
          display: flex;
          height: 25px;
          max-width: 100px;
        }
      }
    }
    .search-input-wrapper {
      padding: 12px 0px 4px;
      font-weight: var(--fw-500);
      &::after {
        bottom: 4px;
        top: auto;
        background: url(/icons/search_icon_blue.svg) no-repeat transparent;
        position: absolute;
        z-index: 8;
      }
      input {
        font-family: var(--body-heading-font-family);
        font-size: 14px;
        line-height: 1.25rem;
        padding: 0;
        font-weight: var(--fw-500);
        color: var(--inactive-content);

        &::placeholder {
          font-size: 0.875rem;
          line-height: 1.125rem;
          font-weight: var(--fw-500);
          font-family: var(--body-font-arena);
          color: var(--inactive-content);
          @media (width >= 1024px) {
            font-size: 0.875rem;
            line-height: 1.25rem;
            font-weight: 500;
          }
        }
      }
      .searchdropdown {
        .no-results {
          display: flex;
        }
        &:has(.searchdropdown-list li) {
          .no-results {
            display: none;
          }
        }
      }
      &.close {
        .search-close-btn {
          display: block;
          z-index:9;
          bottom: 4px;
          top: unset;
        }
      }
    }
  }

  .checkbox-wrapper {
    width: 100%;
    justify-content: flex-end;
    gap: 24px;

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

    .checkbox-group {
      font-family: var(--body-font-arena);
      input {
        height: 20px;
        width: 20px;
        &:checked {
          background: url('/icons/checkbox-tick.svg') no-repeat 4px 5px var(--primary-blue-700);
          background-size: 12px;
        }
        @media (width >= 1024px) {
          height: 24px;
          width: 24px;
          &:checked {
            background: url('/icons/checkbox-tick.svg') no-repeat 5px 6px var(--primary-blue-700);
            background-size: 15px;
          }
        }
      }
    }
  }

  .compar-btn {
    border: none;
    clip-path: none;
    background: var(--primary-blue-700);
    font-size: 14px;
    line-height: 18px;
    color: var(--secondary-gray-10);
    padding: 12px 24px;
    margin-block: 40px 16px;
    width: auto;
    font-weight: var(--fw-400);
    &:hover {
      background: var(--primary-blue-900);
    }
    &:disabled {
      background: var(--bars-unselected);
      color: var(--inactive-content);
      &:hover {
        background: var(--bars-unselected);
      }
    }
  }
  .color-disclaimer {
    top: 40px;
    right: unset;
    font-size: 0.75rem;
    line-height: 1rem;
    max-width: 177px;
    color: var(--inactive-content);
    font-family: var(--body-heading-font-family);
  }

  .explore-vehicle-wrapper {
    .exploreVehicle-content {
      gap: 8px;
      .exploreVehicle-text {
        margin-top: 10px;
        color: var(--tertiary-black);
        font-family: var(--body-heading-font-family);
        font-size: 0.75rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1rem;
        text-transform: inherit;

        @media (width >= 1024px) {
          margin-top: 20px;
          font-size: 0.875rem;
          line-height: 1.25rem;
          height: 14px;
        }
      }
      .exploreVehicle-price {
        margin-top: 8px;
        text-align: right;
        font-family: var(--body-heading-font-family);
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 1.125rem;

        @media (width >= 1024px) {
          margin-top: 20px;
          font-size: 0.875rem;
          line-height: 1.25rem;
        }
      }
    }
    .exploreVehicle-btn a {
      border: none;
      text-decoration: underline;
      color: var(--primary-blue-700);
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: 400;
      font-family: var(--body-font-arena);
      position: relative;
      width: max-content;
      justify-content: flex-start;
      height: auto;
      padding: 0px;
      margin-top: 14px;
      padding-right: 17.685px;

      @media (width >= 1024px) {
        margin-top: 21.7px;
        line-height: 1.125rem;
        font-weight: 400;
      }

      &::after {
        content: '';
        position: absolute;
        width: 17.685px;
        height: 17.685px;
        background-image: url(/icons/explore-arrow.svg);
        right: 0px;
        top: 0px;
        background-position: center;
      }
    }
  }

  .car-info-wrapper {
    margin-block: 48px;

    &:last-child {
      margin-block: 0px;
    }

    h3.info-heading {
      font-size: 1.5rem;
      line-height: 1.875rem;
      font-family: var(--body-heading-font-family);
      color: var(--neutrals-headings);
      font-weight: 700;
      letter-spacing: normal;
    }

    .accordion-lists {
      & .accordion-item {
        margin-bottom: 0;
        border-image: linear-gradient(90deg, rgb(241 135 135 / 0%) 0%, #b2b2b2 50.5%, rgb(237 90 90 / 0%) 100%) 1;
        &:first-child {
          .accordion-header {
            padding-top: 0;
          }
        }
        &.active {
          border: none;
          .accordion-btn {
            background-image: url(/icons/minus-blue.svg);
          }
        }
      }

      .accordion-content {
        .title {
          margin-bottom: 20px;
          font-size: 0.875rem;
          line-height: 1.125rem;
          font-family: var(--body-heading-font-family);
          color: var(--inactive-content);
          font-style: normal;
        }
        .detail {
          padding-bottom: 8px;
          border-bottom: 1px solid var(--light-grey-shade-7);
          font-family: var(--body-heading-font-family);
          font-weight: 500;
          line-height: 32px;
          flex:1;
        }
        .g-row.active {
          background: rgba(209, 227, 255, 1);
          scroll-margin-top: 332px;
          padding-block: 8px;
        }
        .column{
          flex: 1;
          justify-content: stretch;
          display: flex;
          flex-direction: column;
          @media (width >=1024px){
            &:nth-last-of-type(1){
              display:flex;
            }
          }
        }
      }

      .accordion-header {
        height: auto;
        padding: 16px 0px;
        align-items: center;
        .accordion-btn {
          background-size: 100%;
          width: 32px;
          height: 32px;
          background-image: url(/icons/add-blue.svg);
        }
        .accordion-header-text {
          font-size: 1rem;
          font-weight: 600;
          line-height: 1.25rem;
          color: var(--primary-main);
          font-family: var(--body-heading-font-family);
        }
      }
    }
    .cards {
      border: 1px solid var(--light-grey-shade-5);
      background: var(--gradient-5);
      padding: 10px 8px 9px;
      align-items: center;
      .content {
        max-width: 289px;
        .title {
          color: var(--tertiary-black);
          font-size: 12px;
          line-height: 1rem;
          font-weight: 600;
          text-transform: uppercase;
        }
        .description {
          color: var(--tertiary-black);
          font-size: 14px;
          line-height: 1.125rem;
          font-weight: 300;
        }
      }
      &:hover {
        .anchor {
          background-color: var(--primary-blue-700);
          background-image: url(/icons/north_east-white.svg);
        }
      }
      .anchor {
        width: 24px;
        height: 24px;
        background-size: 100%;
        transition: all 0.5s ease-in-out;
      }
      &::before {
        display: none;
      }
    }
    .save-and-comparision {
      justify-content: flex-end;
      .btn-save-and-comparision {
        flex-direction: row-reverse;
        color: var(--primary-blue-700);
        text-decoration: underline;
        gap: 2px;
        font-family: var(--body-font-arena);
        padding: 0;
        .save-icon {
          background: url(/icons/download-blue.svg) no-repeat;
          width: 18px;
          height: 18px;
        }
      }
    }
  }

  .car-item {
    .delete-car {
      background-size: 100%;
      left: 0px;
      top: 0px;
      height: 16px;
      width: 16px;
      @media (width >= 1024px) {
        height: 24px;
        width: 24px;
      }
    }
    &#carcard_3 {
      display: none;
    }
    &#carcard_2 {
      display: block;
    }
    .compare-car-img-container {
      padding: 0px;
      img {
        height: 100%;
        max-height: 80px;
      }
    }
    .compare__colors-wrapper {
      margin-top: 15.85px;
      min-width: 100%;
      .compare__colors-list {
        gap: 4px;
        &::before {
          top: 20px;
          font-family: var(--body-font-arena);
          font-feature-settings:
            'liga' off,
            'clig' off;
          font-weight: 400;
          font-size: 0.75rem;
          line-height: 1rem;
        }
        & div {
          border: 1px solid var(--bars-unselected);
          &.selected {
            &::after {
              height: 16px;
              width: 16px;
              background-position: -1px -1px;
            }
            &.selected.compare__colors-white::after {
              background-image: url(/icons/check-grey.svg);
            }
          }
        }
      }
      .slide-icon {
        height: 16px;
        width: 16px;
      }
    }
    .carColor-wrapper {
      @media (width <768px){     
       height: 54px;
      }
      .colorBox {
        gap: 4px;
        margin: 15.85px 0 21.15px;
        padding: 0px;
        .color-btn {
          height: 16px;
          width: 16px;
        }
      }
    }
  }
  .car-separator {
    background: url('/icons/separator.svg') no-repeat top;
  }

  .tooltip-wrapper {
    &.active {
      .tooltip-overlay {
        background: rgba(0, 0, 0, 0);
      }
    }
    .tooltip-content {
      justify-content: flex-start;
      background: var(--gradient-4);
      backdrop-filter: blur(3.5px);
      align-items: center;
      position: absolute;
      box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.12);
      width: 226px;
      height: max-content;
      padding: 8px 8px 8px 8px;
      gap: 8px;
      top: 0;
      left: 0;
      transform: translate(14%, -42%);
      cursor: pointer;
      z-index: 1;

      &::before {
        content: '';
        background: url(/icons/tooltip-arrow.svg) no-repeat;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        clip-path: none;
        width: 14px;
        height: 22px;
        left: -14px;
      }
      &:has(img) {
        padding: 8px 5px 8px 8px;
        width: 217px;
        @media (width>=1024px) {
          width: 273px;
          padding: 8px 8px 8px 8px;
        }
      }
      img {
        width: 72px;
        height: 72px;
        @media (width>=1024px) {
          width: 90px;
          height: 90px;
        }
      }
      .tooltip-desc {
        font-family: var(--body-heading-font-family);
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 300;
      }

      .tooltip-close {
        display: none;
      }
    }
    .tooltip-icon {
      background: none;
      width: 16px;
      height: 16px;
      &::after {
        background-image: url('/icons/tooltip-icon.svg');
        width: 16px;
        height: 16px;
        content: '';
        background-color: transparent;
        background-size: 100%;
      }
    }
  }
  .save-share-modal {
    padding: 56px 16px 40px;
    &::before {
      display: none;
    }
    .close-modal {
      width: 24px;
      height: 24px;
      background-size: 100%;
      margin-bottom: 0;
      position: absolute;
      top: 16px;
      right: 16px;
    }
    .modal-title {
      padding-top: 0;
      padding-bottom: 4px;
      color: var(--tertiary-black);
      font-family: var(--body-heading-font-family);
      font-weight: 600;
      &:nth-child(3) {
        display: none;
      }
    }
    .modal-btn {
      font-size: 14px;
      line-height: 1.125rem;
      color: var(--primary-blue-700);
      text-decoration: underline;
      &::before {
        display: none;
      }
      &.save-pdf {
        padding: 8px 16px;
        border: 1px solid var(--primary-blue-700);
        text-decoration: none;
        width: auto;
        margin-top: 8px;
        margin-bottom: 24px;
        display: none;
        .save-icon {
          display: none;
        }
      }
    }
    .modal-desc {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.125rem;
      color: var(--inactive-content);
      font-family: var(--body-heading-font-family);
    }
    .download-buttons {
      padding-top: 16px;
      padding-bottom: 24px;
      position: relative;
      flex-flow: row wrap;
      justify-content: space-between;

      .modal-btn {
        padding: 0;
        gap: 0;
        width: auto;
        font-family: var(--body-heading-font-family);

        .save-icon {
          width: 19px;
          height: 18px;
          position: relative;
          bottom: -3px;
          background-size: 100%;
        }
      }
    }
    .social-icons {
      padding-top: 16px;
      a {
        padding: 6px 3px;
        border: 0.5px solid var(--light-grey-shade-8);
        background: var(--tertiary-light-grey);
        border-radius: 0;
        img {
          width: 24px;
          height: 24px;
        }
        .clipboard-popup {
          top: 19px;
          z-index: 9;
          background: var(--inactive-content);
        }
      }
    }
    .pdf-saved-msg {
      background: var(--tertiary-toast-arena-green);
      color: var(--primary-toast-arena-green);
      padding: 10px 8px;
      font-size: 14px;
      line-height: 1.125rem;
      font-family: var(--body-heading-font-family);
      margin-bottom: 24px;
      a {
        color: var(--primary-blue-700);
        font-size: 12px;
        line-height: 1rem;
        text-decoration: underline;
      }
    }
  }
  .carousel-360 {
    max-width: 100%;
    max-height: 100%;
    & .splide {
      position: absolute;
      top: 25%;
      transform: translateY(-25%);
      & .splide__track {
        & .splide__list {
          & .splide__slide {
            & .splide__slide__container {
              padding: 12px;
              position: relative;
              background: url('/icons/360view-bg-arena.jpg') 0px 0px / 131.346% 128.276% no-repeat;
              margin-top: 0;
              &:after,
              &::before {
                content: '';
                position: absolute;
                top: 0px;
                bottom: 0px;
                width: 100%;
                height: 100%;
                clip-path: unset;
                display: block;
              }
              &::after {
                right: 0px;
                width: 100%;
                /* background: linear-gradient(93deg, rgba(255, 255, 255, 0.00) 3.05%, rgba(255, 255, 255, 0.80) 60.11%, #FFF 105.22%); */
              }
              &::before {
                left: 0px;
                background: linear-gradient(270deg, rgba(255, 255, 255, 0) 3.05%, rgba(255, 255, 255, 0.8) 60.11%, #fff 105.22%);
                width: 100%;
              }
              .carousel-360-text-wrapper {
                .icon-close {
                  background: url('/icons/close.svg') no-repeat;
                  background-size: 24px 24px;
                  height: 24px;
                  width: 24px;
                  margin: 4px 4px;
                  position: relative;
                  z-index: 1;
                }
                .icon-360 {
                  display: none;
                }
                .titles {
                  justify-content: flex-start;
                  align-items: flex-start;
                  flex-direction: column;
                  position: relative;
                  z-index: 1;
                  .carousel-360-title {
                    margin: 28px 0 0 0;
                  }
                  .carousel-360-title-logo {
                    height: 16px;
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                    display: inline-block;
                  }
                  .carousel-360-sub-title {
                    margin: 0px;
                    margin-top: 8px;
                  }
                }
                .m-carousel-360-title,
                .m-carousel-360-sub-title {
                  display: none;
                }
              }
              & .carousel-360-canvash-wrapper{
                canvas {
                  position: relative;
                  z-index: 1;
                  min-height: 195px;
                }
              }
            }
            &:nth-of-type(2) {
              & .splide__slide__container {
                padding-top: 12px;
                &::before {
                  top: 0px;
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }

          & li:nth-child(3) {
            display: none;
          }
        }
      }
    }
    .carousel-360-canvash-wrapper {
      &::before {
        content: '';
        bottom: 16px;
        left: calc(50% - 15px);
        position: absolute;
        width: 2.5rem;
        height: 2.5rem;
        background: url(/icons/360-icon.png) no-repeat;
        background-size: 100%;
        z-index: 2;
      }
    }
    .carousel-360-backdrop {
      background: var(--tertiary-black);
      opacity: 0.8;
    }
    &::backdrop {
      background: var(--tertiary-black);
      opacity: 0.8;
    }
  }
  .accordion-360-content {
    .exterior-row {
      .column {
        .icons-360View {
          width: 100%;
          justify-content: flex-end;
          .icon-360 {
            display: none;
          }
          .icon-fullscreen {
            margin: 8px 8.05px 0px 0px;

            &::after {
              background: url(/icons/fullscreen-black.svg) no-repeat;
              background-size: 8px 8px;
              width: 8.053px;
              height: 8px;
            }
          }
        }
        .detail {
          background: url(/icons/360view-bg-arena.jpg) 0px 0px no-repeat;
          background-size: contain;
          &:after {
            content: '';
            position: absolute;
            inset: 0 0 0 0;
            background: var(--secondary-gray-10);
            opacity: 0.4;
          }
          &:before {
            content: '';
            bottom: 22px;
            left: calc(50% - 5px);
            position: absolute;
            width: 15px;
            height: 15px;
            background: url(/icons/360-icon.png) no-repeat;
            background-size: 100%;
            z-index: 3;

            @media (width >= 1024px) {
              width: 32px;
              height: 32px;
              bottom: 30px;
              left: calc(50% - 20px);
            }
          }
        }
      }
    }
    canvas {
      position: relative;
      z-index: 1;
      padding: 0 20px;

      @media (width >= 1024px) {
        padding: 39px 28px 22px;
      }
    }
  }
  .hidden {
    display: none;
  }
}

@media (width >=768px) {
  .compare-cars-wrapper {
    .title-wrapper {
      padding: 56px 0px;
    }
    .car-item {
      .compare-car-img-container {
        img {
          max-height: 212.229px;
        }
      }
      .compare__colors-wrapper {
        .slide-icon {
          height: 24px;
          width: 23px;
        }
        .compare__colors-list {
          gap: 24px;
          @media (width <= 768px){
           height: 64px;
          }
          div {
            &.selected {
              &::before {
                margin-top: 6px;
              }
              &::after {
                height: 32px;
                width: 32px;
                background-size: 32px;
              }
            }
          }
        }
      }
      .carColor-wrapper {
        height:64px;
        .colorBox {
          gap: 16px;
          margin: 15.85px 0px 0px 0px;
          align-items: flex-start;
          height: 54px;
          padding: 0px;
          .color-btn {
            height: 32px;
            width: 32px;
          }
        }
      }
      .vehicle-dropdown {
        margin-top: 24px;
        &.car-model {
          margin-bottom: 0px;
          padding-bottom: 0px;
        }
        .dropdown-content {
          padding: 0px;
          padding-right: 4px;

          .dropdown-list li {
            padding: 0px 8px 8px 8px;
          }
          .filters {
            margin: 12px 16px 12px 8px;
          }
          .tabs {
            margin: 16px 12px 8px 8px;
          }
        }
      }
    }
    .g-row:has(.compar-btn) {
      justify-content: end;
    }
    .compar-btn {
      width: fit-content;
      margin-block: 47px 64px;
    }
    .color-disclaimer {
      top: 40px;
      max-width: fit-content;
    }

    .tooltip-wrapper {
      .tooltip-content {
        justify-content: flex-start;
        background: var(--gradient-4);
        backdrop-filter: blur(3.5px);
        align-items: center;
        left: 10px;
        width: 257px;
        .tooltip-desc {
          font-size: 0.875rem;
          line-height: 1.25rem;
          color: var(--tertiary-black);
          font-family: var(--body-heading-font-family);
        }
        &::before {
          width: 14px;
          height: 22px;
          left: -14px;
        }
      }
      .tooltip-icon {
        background: none;
        width: 24px;
        height: auto;
        &::after {
          background-image: url('/icons/tooltip-icon.svg');
          width: 24px;
          height: 24px;
          content: '';
          background-color: transparent;
          top: -18px;
        }
      }
    }
  }
}

@media (width >=1024px) {
  .compare-cars-wrapper {
    .carousel-360 .carousel-360-canvash-wrapper {
      &::before {
        width: 5rem;
        height: 5rem;
        bottom: 4rem;
      }
    }
    .vehicle-dropdown {
      .dropdown-button {
        font-size: 0.875rem;
        line-height: 20px;
        height: 36px;
        font-family: var(--body-heading-font-family);
        &:disabled {
          font-weight: 400;
        }
      }
      .dropdown-list li {
        padding: 12px 16px;
        &:first-child {
          padding-top: 16px;
        }
        .item-name {
          font-size: 0.875rem;
          line-height: 1.25rem;
          font-weight: 600;
        }
        span.item-price {
          font-size: 0.875rem;
          line-height: 1.25rem;
          line-height: 20px;
        }
      }
      .variant-dropdown {
        .dropdown-content {
          .tabs {
            margin: 16px 16px 12px 16px;
            .tab-button {
              font-size: 0.75rem;
              line-height: 1.125rem;
            }
          }
          .filters {
            margin: 12px 16px 16px 16px;
            .filter-button {
              font-size: 14px;
              line-height: 32px;
            }
          }
          .dropdown-list {
            padding: 0px 8px 0px 8px;
            margin-bottom: 8px;
          }
          .dropdown-list li {
            padding: 8px;
            .item-name {
              font-size: 0.875rem;
              line-height: 1.25rem;
            }
            .item-price {
              font-size: 0.875rem;
              line-height: 1.25rem;
            }
            .item-category {
              font-size: 0.875rem;
              line-height: 1.25rem;
            }
          }
        }
      }
    }
    .car-info-wrapper {
      margin-block: 64px;

      &:last-child {
        margin-block: 0px;
      }

      h3.info-heading {
        margin-bottom: 38px;
        letter-spacing: normal;
        line-height: 2.5rem;
        font-size: 32px;
      }
      .accordion-lists {
        .accordion-content {
          .column:first-child {
            padding-left: 0;
          }
          .title {
            font-size: 0.875rem;
            line-height: 1.25rem;
          }
          .detail {
            font-size: 1rem;
            padding-bottom: 12px;
            display: flex;
            flex-direction: column;
            flex: 1;
          }
        }
        .accordion-header {
          padding-left: 0;
          .accordion-header-text {
            font-size: 1.25rem;
            line-height: 1.5rem;
          }
        }
      }
      .cards {
        border: 1px solid var(--light-grey-shade-5);
        background: var(--gradient-5);
        padding: 24px 16px 24px 20px;
        .content {
          max-width: 192px;

          .title {
            color: var(--tertiary-black);
            font-size: 24px;
            line-height: 28px;
            font-weight: 700;
            text-transform: uppercase;
            width: 186px;
            font-family: var(--body-heading-font-family);
          }
          .description {
            color: var(--tertiary-black);
            font-size: 0.75rem;
            line-height: 1.125rem;
            font-weight: 300;
            font-family: var(--body-heading-font-family);
          }
        }
        .anchor {
          width: 48px;
          height: 48px;
          background-size: 100%;
        }
      }
    }
    .carColor-wrapper {
      .colorBox {
        gap: 16px;
        margin: 40px 0 27px;
      }
    }
    .car-item {
      .compare-car-img-container {
        padding: 0px;
        img {
          height: 100%;
          max-height: 212px;
          aspect-ratio: 16 / 9;
        }
      }
      &#carcard_3 {
        display: block;
      }
    }
    .compar-btn {
      width: fit-content;
      margin-block: 64px 75px;
      cursor: pointer;
    }
    .color-disclaimer {
      right: unset;
      top: 0px;
      left: 0px;
      font-size: 0.75rem;
      line-height: 1.125rem;
      max-width: none;
    }
    .save-share-modal {
      max-width: 800px;
      padding: 56px 24px;
      .modal-title {
        font-size: 24px;
        line-height: 1.75rem;
        &:nth-child(3) {
          padding-top: 0;
        }
      }
      .close-modal {
        position: absolute;
        right: 24px;
        top: 24px;
      }
      .modal-btn {
        &.save-pdf {
          margin-top: 12px;
          margin-bottom: 32px;
          padding: 12px 24px;
        }
      }
      .download-buttons {
        padding-top: 24px;
        padding-bottom: 32px;
        gap: 16px;
        justify-content: flex-start;
      }
      .social-icons {
        padding-top: 24px;
        gap: 24px;
      }
    }
    .search-block-wrapper {
      align-items: flex-end;
      &.sticky-pannel {
        padding: 56px 56px 40px;
        .sticky-sub-title {
          font-size: 0.75rem;
          line-height: 1.125rem;
          margin-top: 16px;
          padding-bottom: 16px;
          position: relative;
          &::after {
            width: 100%;
          }
        }
        .sticky-price-wrapper {
          margin-top: 16px;
        }
      }
      .search-input-wrapper {
        width: 100%;
        color: var(--inactive-content);
        input {
          font-size: 0.875rem;
          line-height: 1.25rem;
          color: var(--inactive-content);
          font-weight: var(--fw-500);
          padding-right: 28px;
          &::placeholder {
            color: var(--inactive-content);
            font-weight: var(--fw-500);
          }
        }
      }
      .anchor-tab {
        gap: 80px;
        a {
          font-size: 0.875rem;
          line-height: 1.25rem;
          font-weight: 400;
          padding: 0 0 13px 0;
          color: var(--tertiary-black);
        }
      }
    }
    .accordion-360-content {
      & .interior-row,
      & .exterior-row {
        .column {
          padding: 0;
          .icons-360View {
            width: 100%;
            justify-content: flex-end;
            .icon-360 {
              display: none;
            }
            .icon-fullscreen {
              margin: 21.76px 22.48px 0px 0px;
              &::after {
                background: url(/icons/fullscreen-black.svg) no-repeat;
                background-size: 21.503px 23.124px;
                width: 21.503px;
                height: 23.124px;
              }
            }
          }
        }
      }
      .interior-disclaimer {
        padding-left: 0px;
        margin-top: -24px;
      }
    }
    .carousel-360 {
      & .splide {
        & .splide__track {
          & .splide__list {
            & .splide__slide {
              margin-bottom: 0px;
              & .splide__slide__container {
                position: relative;
                padding: 24px;
                margin-top: 0px;
                min-height: clamp(506px, 80vh, 600px);
                background: url('/icons/360view-bg-arena.jpg') 0px -84.688px / 131.346% 128.276% no-repeat;
                &:after,
                &::before {
                  content: '';
                  position: absolute;
                  top: 0px;
                  bottom: 0px;
                  height: 100%;
                  clip-path: unset;
                  display: block;
                }
                &::after {
                  right: 0px;
                  width: 50%;
                  background: linear-gradient(93deg, rgba(255, 255, 255, 0) 3.05%, rgba(255, 255, 255, 0.8) 60.11%, #fff 105.22%);
                }
                &::before {
                  left: 0px;
                  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 3.05%, rgba(255, 255, 255, 0.8) 60.11%, #fff 105.22%);
                  width: 100%;
                }
                .carousel-360-text-wrapper {
                  position: relative;
                  z-index: 1;

                  .icon-close {
                    margin: 0px;
                  }
                  .titles {
                    justify-content: flex-start;
                    flex-direction: column;
                    .carousel-360-title {
                      margin: 32px 0 0 0px;
                    }
                    .carousel-360-title-logo {
                      height: 30px;
                    }
                    .carousel-360-sub-title {
                      margin: 16px 0px 0px 0px;
                    }
                  }
                  .titles:has(.carousel-360-title) {
                    .carousel-360-title {
                      margin-left: 40px;
                    }
                    .carousel-360-sub-title {
                      margin-left: 40px;
                    }
                  }
                }
                .carousel-360-canvash-wrapper {
                  canvas {
                    min-height: 66.2471%;
                    position: absolute;
                  }
                }
              }
            }
            & li:nth-child(3) {
              display: block;
            }
          }
        }
        .splide__arrows {
          bottom: 28px;
          gap: 16px;
          & .splide__arrow {
            width: 48px;
            height: 48px;
            border: 1px solid var(--primary-text);
            &.splide__arrow--prev {
              background: url(/icons/arrow-prev-carousel.svg) no-repeat center;
            }
            &.splide__arrow--next {
              background: url(/icons/arrow-next-carousel.svg) no-repeat center;
            }
          }
        }
      }
    }
  }
  .accordion-content {
    .g-row.active {
      background: rgba(209, 227, 255, 1);
      scroll-margin: 332px;
      padding-block: 12px;
    }
  }
}

@media (width >=1366px) {
  .compare-cars-wrapper {
    .compar-btn {
      max-height: 42px;
      margin-bottom: 19px;
    }
      .car-info-wrapper {
        .cards {
          padding:24px;
          .content {
            max-width: 289px;
            .title {
              width: 230px;
            }
          }
      }
    }
    .vehicle-dropdown {
      .variant-dropdown {
          .dropdown-content {
            .dropdown-list li{
              padding-right:24px;
            }
          }
      }
    }
  }
}

@media (width >= 768px) and (width <= 1365px) {
  .compare-cars-wrapper {
    & .car-item-row {
      & .g-lg-3 {
        & .explore-vehicle-wrapper {
          flex-direction: column;
          .exploreVehicle-btn a {
            margin-top: 8px;
            width: max-content;
          }
        }
      }
    }
  }
}

@keyframes slide-in {
  0% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}

.quick-cards-container {
  display: none;
}

@media print {
  body {
    .quick-cards-container {
      margin-top: 0;
      break-before: auto;
      .quick-cards-row {
        flex-wrap: wrap;
        .card {
          break-inside: avoid;
        }
      }
    }
    main:has(.block.compare-cars #expand-all:checked) .quick-cards-container {
      padding-top: 80px;
    }

    .header-wrapper.sticky {
      position: static;
      top:0px;
      left:0px;
    }

    .compare-cars-wrapper {
      .g-lg-3 {
        width: 30%;
      }

      .g-lg-4 {
        width: 40%;
      }

      .compar-btn {
        margin-block: 60px 30px;
      }

      & .compare-cars {
        & .car-info-wrapper {
          & .accordion-item {
            flex-wrap: nowrap;
            .accordion-content {
              gap: 16px;
              flex-wrap: nowrap;
              .g-row {
                flex-wrap: nowrap;
                .column {
                     flex: 1;
                    justify-content: stretch;
                    display: flex;
                    flex-direction: column;
                    .detail {
                      display: flex;
                      flex-direction: column;
                      flex: 1;
                    }
                }
              }
            }
          }
        }
      }

      .car-item {
        width: 30% !important;
        &#carcard_3 {
          display: block;
        }
      }

      .blank-item,
      .car-separator {
        display: none;
      }

      .compare__colors-wrapper {
        justify-content: unset;
        .slide-icon {
          display: none;
        }
        & .compare__colors-list {
          flex: 1;
          height: 64px;
          flex-wrap: wrap;
          gap: 4px !important;
          row-gap: 16px !important;
          overflow: unset;
          justify-content: center;
          & div {
            display: flex;
            align-items: center;
            width: 24px !important;
            height: 24px !important;
            transform: none !important;
            overflow: unset;
            justify-content: center;
            &.selected {
              overflow: unset;
              &::before {
                top: 24px;
                font-size: 12px;
                margin-top: unset;
              }
              &::after {
                background-size: 22px !important;
              }
              &:nth-child(n + 8) {
                &::before {
                  top: -16px;
                  left: 50%;
                  transform: translateX(-50%);
                }
              }
            }
          }
        }
      }
      & .explore-vehicle-wrapper {
        align-items: center;
        flex-direction: column;
      }
    }
  }
}