.dealer-locator-filter-container {
  padding: 48px 0 48px;
  @media (width >=1024px) {
    padding: 48px 0 80px;
  }
}

.dealer-locator-container .filter-container,
.filter-container-group {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 16px;
}

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

.sheduleTestDriveButton,
.scheduleVisitButton {
  cursor: pointer;
}

.dealer-locator-filter-container .btd-tabs {
  display: flex;
  gap: 8px;
  .btd-cta,
  .bdc-cta {
    color: var(--neutrals-headings);
    text-align: center;
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: 1.25rem;
    border-bottom: 1px solid #ccc;
    padding: 0 10px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    @media (width <= 360px) {
      padding: 0 0 16px;
    }
    .bdc-cta-inner-div {
      padding: 0 35px;
      @media (width <=360px) {
        padding: 0 25px;
      }
    }
  }

  .btd-cta.active,
  .bdc-cta.active {
    color: var(--primary-blue-700);
    font-weight: var(--fw-700);
    border-bottom: 2px solid var(--primary-blue-700);
  }
}

.dealer-locator-filter-container .heading-sub-heading {
  margin: 24px 0 40px;

  .main-heading {
    margin: 0;
    p {
      margin: 0;
      color: var(--neutrals-headings);
      font-family: var(--body-font-family);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: var(--fw-700);
      line-height: 1.125rem;
    }
  }

  p {
    color: var(--tertiary-black);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: 1rem;
    margin-top: 5px;
    margin-bottom: 0;
  }
}

.dealer-locator-container .filter-container .filter-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-bottom: 1px solid var(--inactive-content);
  position: relative;
  flex-basis: 47.5%;
  .error-message-pincode {
    font-family: var(--body-font-arena);
    font-size: 0.625rem;
    font-weight: var(--fw-400);
    color: var(--primary-red);
    position: absolute;
    top: 105%;
    line-height: 1rem;
    padding-top: 4px;
    @media (width >=1024px) {
      font-size: 0.875rem;
      line-height: 1.25rem;
      padding-top: 8px;
    }
  }
}

.dealer-locator-container .filter-container .filter-group.pin-code-grp,
.dealer-locator-container .filter-container .filter-group custom-select {
  position: relative;
  display: flex;
  align-items: center;
  @media (width >=768px) {
    z-index: 3;
  }
}

.dealer-locator-container .filter-container .filter-group custom-select::after {
  content: '';
  height: 24px;
  width: 24px;
  position: absolute;
  right: 0;
  bottom: 4px;
  z-index: -1;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12.0005 12.9462L16.6005 8.34619L17.6543 9.39994L12.0005 15.0537L6.3468 9.39994L7.40055 8.34619L12.0005 12.9462Z" fill="black"/></svg>');
}

.dealer-locator-container .filter-container .search-button {
  cursor: pointer;
  width: 100%;
}

.dealer-locator-container .filter-container .filter-group label {
  color: var(--tertiary-black);
  font-family: var(--body-font-arena);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: var(--fw-700);
  line-height: 1.125rem;
  margin-bottom: 8px;
}

.dealer-locator-container .filter-container .filter-group input {
  padding-left: 0;
}
.dealer-locator-filter:not(.service-workshop) .visiting-block custom-select {
  pointer-events: none;
}
.dealer-locator-container .filter-container .filter-group custom-select,
.dealer-locator-container .filter-container .filter-group input {
  border: none;
  background: transparent;
  outline: none;
  width: 100%;
  margin: 0;
  appearance: none;
  color: var(--tertiary-black);
  font-family: var(--body-font-arena);
  font-size: 0.875rem;
  font-weight: var(--fw-500);
  line-height: 1.125rem;
  height: 26px;
  @media (width >=1024px) {
    font-size: 0.75rem;
  }
}

.dealer-locator-container .filter-container .filter-group custom-select .select-hide {
  display: none;
  &::after {
    display: none;
  }
}

.dealer-locator-container .filter-container .filter-group custom-select .select-show {
  display: flex;
  flex-direction: column;
  position: absolute;
  max-height: 380px;
  overflow-y: auto;
  left: 0;
  top: 100%;
  width: 100%;
  background: var(--tertiary-white);
  box-shadow: 0 0 12px 0 rgb(0 0 0 / 12%);
  z-index: 10;
  padding-right: 10px;
  margin: 0;
}

.dealer-locator-container .filter-container .filter-group custom-select .select-show::-webkit-scrollbar {
  width: 10px;
  margin: 4px 0;
}

.dealer-locator-container .filter-container .filter-group custom-select .select-show::-webkit-scrollbar-track {
  background: white;
  width: 5px;
  border-left: 4px solid var(--secondary-gray-20);
}

.dealer-locator-container .filter-container .filter-group custom-select .select-show::-webkit-scrollbar-thumb {
  background: var(--primary-blue-700);
  border-right: 6px solid white;
}

.dealer-locator-container .filter-container .filter-group custom-select .select-show .explore-less {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
}

.dealer-locator-container .filter-container .filter-group custom-select .select-show .explore-less::after {
  content: '';
  height: 1.25rem;
  width: 1.25rem;
  background-image: url('../../icons/expand_less.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: auto;
  opacity: 0.5;
}

.dealer-locator-container .filter-container .filter-group custom-select .select-show .explore-less:hover {
  cursor: pointer;
}
.dealer-locator-filter:not(.service-workshop) .visiting-block custom-select::after {
  display: none;
}
.dealer-locator-container .filter-container .filter-group .select-items .custom-option {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  gap: 0.5rem;
  width: 100%;
  cursor: pointer;

  .select__option.selected {
    color: var(--primary-blue-700);
    font-weight: var(--fw-500);
  }
  .select__icon {
    content: ' ';
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url(/icons/checkbox-outline.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    &.selected {
      background-image: url(/icons/checkbox-selected-icon.svg);
    }
  }
  &.hidden {
    display: none;
  }
}

.dealer-locator-container .filter-container .filter-group .select-items .custom-option .select__option {
  font-family: var(--body-font-arena);
  font-size: 0.875rem;
  font-weight: var(--fw-400);
  line-height: 1.125rem;
  color: var(--tertiary-black);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  @media (width >=1024px) {
    font-size: 0.75rem;
  }
}

.dealer-locator-container .filter-container .filter-group .select-items .custom-option:hover {
  .select__option {
    color: var(--primary-blue-700);
    font-weight: var(--fw-500);
  }

  .select__icon {
    background-image: url(/icons/checkbox-selected-icon.svg);
  }
}

.dealer-locator .card-header {
  display: none;
  padding-top: 48px;
  position: relative;

  * {
    color: var(--Neutrals-Headings, #1d1d1d);
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--fw-700);
    line-height: 1.25rem;
    margin: 0;
  }
  .d-location-name {
    text-transform: uppercase;
  }
}

.dealer-locator .explore-cta-mob {
  display: none;
  width: 100%;
  justify-content: right;
  padding: 0;

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

.dealer-locator .explore-cta-web {
  display: none;

  @media (width >=768px) {
    display: flex;
  }
}

.dealer-locator .explore-cta-mob,
.dealer-locator .explore-cta-web {
  border: none;
  cursor: pointer;
  background: none;
}

.dealer-locator .explore-cta-mob a,
.dealer-locator .explore-cta-web a {
  font-family: var(--body-font-arena);
  font-size: 0.875rem;
  font-weight: var(--fw-400);
  line-height: 1.125rem;
  color: var(--primary-blue-700);
  display: flex;
  align-items: center;
  text-decoration: underline;
  padding-left: 0;
  padding-right: 0;

  @media (width >=768px) {
    font-size: 0.625rem;
    line-height: 0.6875rem;
  }

  @media (width >=1200px) {
    font-size: 0.875rem;
  }
}

.dealer-locator .map-header {
  margin-bottom: 2.5rem;
  margin-top: 0;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;

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

  @media (width >=768px) {
    margin-bottom: 3.375rem;
  }

  span h1,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--neutrals-headings);
    font-size: 24px;
    font-weight: var(--fw-700);
    line-height: normal;
    margin: 0;

    @media (width >=768px) {
      font-size: 32px;
      line-height: 38px;
    }
  }

  .cardDealer {
    border: none;
    background: none;
    content: '';
    height: 1rem;
    width: 1rem;
    display: inline-block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none"><path d="M6.68708 14.4359L0.231445 8.00004L6.68708 1.56421L7.63616 2.51038L2.12943 8.00004L7.63616 13.4897L6.68708 14.4359Z" fill="%23575A5E"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    margin-top: 6px;

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

.dealer-locator-container .filter-container .filter-group custom-select .select-selected {
  cursor: pointer;
  position: relative;
  width: 100%;
  font-family: var(--body-font-family), sans-serif;
  font-size: 0.875rem;
  color: var(--primary-main);
  font-weight: var(--fw-500);
  line-height: 1.125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-transform: capitalize;
  /* Style corrections for button element */
  background-color: transparent;
  border: none;
  padding: 0;
  text-align: left;
  @media (width >=768px) {
    font-size: 0.625rem;
    line-height: 0.8125rem;
  }

  @media (width >=1200px) {
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

.dealer-locator-container .filter-container .filter-group .filter-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  cursor: pointer;
}

.dealer-locator-container .filter-container #locator-icon {
  right: 0rem;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><g opacity="0.5"><mask id="mask0_4041_10255" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect x="0.126953" width="23.873" height="24" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_4041_10255)"><path d="M11.318 22.2501V20.5193C9.24566 20.3052 7.5011 19.4859 6.08431 18.0616C4.66751 16.6373 3.85259 14.8834 3.63956 12.8001H1.91797V11.3001H3.63956C3.85259 9.21676 4.66751 7.46293 6.08431 6.0386C7.5011 4.61426 9.24566 3.79501 11.318 3.58085V1.8501H12.81V3.58085C14.8823 3.79501 16.6269 4.61426 18.0437 6.0386C19.4605 7.46293 20.2754 9.21676 20.4884 11.3001H22.21V12.8001H20.4884C20.2754 14.8834 19.4605 16.6373 18.0437 18.0616C16.6269 19.4859 14.8823 20.3052 12.81 20.5193V22.2501H11.318ZM12.064 19.0501C13.9871 19.0501 15.6284 18.3668 16.9878 17.0001C18.3472 15.6334 19.027 13.9834 19.027 12.0501C19.027 10.1168 18.3472 8.46676 16.9878 7.1001C15.6284 5.73343 13.9871 5.0501 12.064 5.0501C10.1409 5.0501 8.49963 5.73343 7.14019 7.1001C5.78076 8.46676 5.10104 10.1168 5.10104 12.0501C5.10104 13.9834 5.78076 15.6334 7.14019 17.0001C8.49963 18.3668 10.1409 19.0501 12.064 19.0501Z" fill="black"/></g></g></svg>');
  background-size: cover;
}

.dealer-locator-container .error-message-smallRadius {
  display: none;
  background-color: var(--System-Colours-Secondary-blue, #d1e3ff);
  padding: 1rem;
  font-family: var(--body-font-family);
  color: var(--System-Colours-Primary-blue, #19458b);
  font-size: 0.75rem;
  font-weight: var(--fw-400);
  line-height: 1rem;
  margin-top: 1rem;

  @media (width >=768px) {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 1rem 1.5rem;
    margin-right: 3.5rem;
  }

  @media (width >=1200px) {
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-top: 24px;
  }
}

.dealer-locator-container .dealers-container {
  padding: 24px 0 16px;
  margin: 0 -20px 0 0;
  .dealer-cards {
    .dealer-card .book-my-car-cta {
      display: none;
    }

    @media (width >=768px) {
      transition: transform 0.5s ease-in-out;
    }

    @media (width >= 1024px) {
      flex-wrap: nowrap;
    }
  }

  @media (width >=768px) {
    position: relative;
    overflow: hidden;
  }
  @media (width >= 1024px) {
    padding: 40px 0 24px;
    margin: 0 -56px 0 0;
  }
}

.dealers-container .dealer-cards .dealer-card {
  border-top: 1px solid var(--light-grey-shade-5);
  border-left: 1px solid var(--light-grey-shade-5);
  border-right: 1px solid var(--light-grey-shade-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  flex-shrink: 0;
  margin-bottom: 16px;

  .dealer-card-content {
    padding: 1rem;
    position: relative;

    .dealer-title {
      display: flex;
      gap: 1.1875rem;
      justify-content: space-between;
      padding-bottom: 12px;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        height: 0.45px;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
        bottom: 0;
        left: 0;
        right: 0;
      }

      .dealer-title-text {
        margin: 0;
        color: var(--neutrals-headings);
        font-family: var(--body-font-family);
        font-size: 1rem;
        font-style: normal;
        font-weight: var(--fw-600);
        line-height: 1.25rem;
        display: -webkit-box;
        max-width: 100%;
        height: 40px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .header-right {
        width: 50px;
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: end;

        .dealer-distance {
          color: var(--neutrals-headings);
          text-align: right;
          font-family: var(--body-font-arena);
          font-size: 0.75rem;
          font-style: normal;
          font-weight: var(--fw-400);
          line-height: 1rem;
          white-space: nowrap;
          position: relative;
        }

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

      .bookmark-icon.active {
        background-image: url('/icons/bookmark-filled.svg');
        background-repeat: no-repeat;
        background-position: center;
        display: inline-block;
        height: 24px;
        width: 24px;
      }
      .bookmark-icon {
        display: none;
        width: 24px;
        height: 24px;
        border: none;
        cursor: pointer;
        background: url('/icons/bookmark_icon.svg');

        &.bookmarked {
          background: url('/icons/bookmark_icon-active.svg');
        }
        img {
          display: none;
        }
      }
    }

    .dealer-location {
      display: flex;
      gap: 0.75rem;
      padding-top: 12px;
      align-items: baseline;

      .dealer-address {
        color: var(--tertiary-black);
        font-family: var(--body-font-arena);
        font-style: normal;
        font-weight: var(--fw-400);
        line-height: 1.125rem;
        display: block;
        display: -webkit-box;
        max-width: 100%;
        flex-grow: 1;
        height: 36px;
        font-size: var(--body-font-size-xxxs);
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        @media (width >=1024px) {
          font-size: 0.75rem;
        }
      }

      .action-cta {
        display: flex;
        align-items: center;

        a {
          font-family: var(--body-font-arena);
          color: var(--primary-blue-700);
          font-size: 0.75rem;
          font-weight: var(--fw-400);
          line-height: 1.25rem;
          cursor: pointer;
          padding: 0;
          text-decoration: underline;
          @media (width >=1024px) {
            font-size: 0.875rem;
            line-height: 1.25rem;
          }
        }

        .arrow-icon {
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M15.9603 10.8674L9.50689 17.5098L8.69136 16.7064L15.1448 10.064L9.01656 10.1331L9.01265 8.98308L17.0815 8.89211L17.1679 17.0171L16.026 17.0384L15.9603 10.8674Z" fill="%23171C8F"/></svg>');
          background-repeat: no-repeat;
          background-position: center;
          display: inline-block;
          width: 0.75rem;
          height: 0.75rem;
          transform: scale(0.75);
          margin-left: 0.25rem;
          transition: all 0.2s linear;
        }

        &:hover .arrow-icon {
          transform: scale(1.2);
          transform-origin: bottom left 0;
        }
      }
    }

    .contact-block {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      justify-content: center;
      flex-grow: 1;

      .contact-phone {
        display: flex;
        align-items: center;
        gap: 4px;

        a {
          font-family: var(--body-font-arena);
          color: var(--tertiary-black);
          font-size: 0.75rem;
          font-weight: var(--fw-400);
          line-height: 1rem;
          cursor: pointer;
          @media (width >=1024px) {
            font-size: 0.875rem;
            line-height: 1.25rem;
          }
        }

        .phone-icon {
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M11.1051 6.84286C11.0715 5.72402 10.6641 4.77406 9.88291 3.99298C9.10173 3.2118 8.15177 2.80439 7.03304 2.77075V1.89575C7.71359 1.91072 8.35074 2.05019 8.94447 2.31415C9.53831 2.5782 10.057 2.93195 10.5005 3.37538C10.9439 3.81891 11.2976 4.33754 11.5616 4.93127C11.8257 5.52511 11.9652 6.1623 11.9801 6.84286H11.1051ZM8.77181 6.84286C8.73817 6.37541 8.5568 5.97622 8.2277 5.64527C7.89861 5.31443 7.50038 5.13403 7.03304 5.10409V4.22909C7.74276 4.25903 8.34738 4.52469 8.84691 5.02606C9.34654 5.52754 9.61317 6.13313 9.64681 6.84286H8.77181ZM11.3395 11.9583C10.2402 11.9583 9.13581 11.7027 8.02631 11.1915C6.9169 10.6803 5.89665 9.95917 4.96556 9.02817C4.03825 8.09707 3.319 7.0777 2.80781 5.97004C2.29661 4.86249 2.04102 3.75906 2.04102 2.65977C2.04102 2.48477 2.09935 2.33797 2.21602 2.21936C2.33268 2.10084 2.47852 2.04159 2.65352 2.04159H4.55606C4.70335 2.04159 4.83329 2.08966 4.94587 2.18581C5.05845 2.28187 5.13006 2.40058 5.16068 2.54194L5.49508 4.25825C5.51822 4.4175 5.51336 4.55434 5.4805 4.66877C5.44754 4.7832 5.38843 4.87931 5.30316 4.95709L3.95595 6.26856C4.17276 6.66562 4.42048 7.04124 4.69912 7.39542C4.97766 7.7495 5.27924 8.08769 5.60387 8.40998C5.92393 8.73013 6.2642 9.02744 6.6247 9.3019C6.9852 9.57636 7.37448 9.83176 7.79254 10.0681L9.10154 8.74773C9.19283 8.65275 9.30337 8.58615 9.43316 8.54794C9.56286 8.50983 9.69766 8.5005 9.83756 8.51994L11.4573 8.84981C11.6046 8.8887 11.7248 8.96386 11.818 9.07527C11.9111 9.18669 11.9577 9.31308 11.9577 9.45444V11.3458C11.9577 11.5208 11.8984 11.6666 11.7799 11.7833C11.6613 11.8999 11.5145 11.9583 11.3395 11.9583ZM3.54193 5.44067L4.58304 4.44448C4.6017 4.42951 4.61386 4.40895 4.61949 4.38279C4.62513 4.35664 4.62421 4.33233 4.61672 4.30988L4.36312 3.00627C4.35563 2.97643 4.34256 2.95402 4.32389 2.93904C4.30522 2.92407 4.28092 2.91659 4.25097 2.91659H3.00352C2.98106 2.91659 2.96234 2.92407 2.94737 2.93904C2.93249 2.95402 2.92506 2.97273 2.92506 2.99519C2.9549 3.3938 3.02014 3.79873 3.12077 4.20998C3.22129 4.62133 3.36168 5.03156 3.54193 5.44067ZM8.61693 10.482C9.00359 10.6622 9.40686 10.8 9.82677 10.8954C10.2468 10.9907 10.6392 11.0473 11.0041 11.0653C11.0265 11.0653 11.0453 11.0578 11.0602 11.0429C11.0752 11.0279 11.0827 11.0092 11.0827 10.9867V9.75952C11.0827 9.72958 11.0752 9.70527 11.0602 9.68661C11.0453 9.66794 11.0228 9.65486 10.993 9.64738L9.76799 9.39829C9.74554 9.39081 9.7259 9.38988 9.70908 9.39552C9.69226 9.40116 9.67447 9.41331 9.6557 9.43198L8.61693 10.482Z" fill="%23939393"/></svg>');
          background-repeat: no-repeat;
          background-position: center;
          display: inline-block;
          width: 0.875rem;
          height: 0.875rem;
          background-size: cover;
        }
      }

      .contact-email {
        display: flex;
        align-items: center;
        position: relative;
        gap: 4px;
        min-height: 28px;

        a {
          font-family: var(--body-font-family);
          color: var(--secondary-main);
          font-size: 0.75rem;
          font-weight: var(--fw-400);
          line-height: 1rem;
          cursor: pointer;
          @media (width >=1024px) {
            font-size: 0.875rem;
            line-height: 1.25rem;
          }
        }

        .email-icon {
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2.51351 11.375C2.21882 11.375 1.9694 11.2729 1.76523 11.0688C1.56107 10.8646 1.45898 10.6152 1.45898 10.3205V3.67952C1.45898 3.38484 1.56107 3.13542 1.76523 2.93125C1.9694 2.72708 2.21882 2.625 2.51351 2.625H11.4878C11.7825 2.625 12.0319 2.72708 12.2361 2.93125C12.4402 3.13542 12.5423 3.38484 12.5423 3.67952V10.3205C12.5423 10.6152 12.4402 10.8646 12.2361 11.0688C12.0319 11.2729 11.7825 11.375 11.4878 11.375H2.51351ZM7.00065 7.32535L2.33398 4.34131V10.3205C2.33398 10.3729 2.3508 10.4159 2.38444 10.4495C2.41808 10.4832 2.4611 10.5 2.51351 10.5H11.4878C11.5402 10.5 11.5832 10.4832 11.6169 10.4495C11.6505 10.4159 11.6673 10.3729 11.6673 10.3205V4.34131L7.00065 7.32535ZM7.00065 6.41667L11.5776 3.5H2.42367L7.00065 6.41667ZM2.33398 4.34131V3.5V10.3205C2.33398 10.3729 2.3508 10.4159 2.38444 10.4495C2.41808 10.4832 2.4611 10.5 2.51351 10.5H2.33398V4.34131Z" fill="%23939393"/></svg>');
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          display: inline-block;
          width: 0.875rem;
          height: 0.875rem;
        }

        .copy-icon {
          margin-left: 0.5rem;
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6.0385 11.6667C5.70172 11.6667 5.41667 11.5501 5.18333 11.3167C4.95 11.0834 4.83333 10.7984 4.83333 10.4616V2.87191C4.83333 2.53514 4.95 2.25008 5.18333 2.01675C5.41667 1.78341 5.70172 1.66675 6.0385 1.66675H11.6282C11.9649 1.66675 12.25 1.78341 12.4833 2.01675C12.7167 2.25008 12.8333 2.53514 12.8333 2.87191V10.4616C12.8333 10.7984 12.7167 11.0834 12.4833 11.3167C12.25 11.5501 11.9649 11.6667 11.6282 11.6667H6.0385ZM6.0385 10.6667H11.6282C11.6795 10.6667 11.7265 10.6454 11.7692 10.6026C11.8119 10.5599 11.8333 10.5129 11.8333 10.4616V2.87191C11.8333 2.82058 11.8119 2.77358 11.7692 2.73091C11.7265 2.68814 11.6795 2.66675 11.6282 2.66675H6.0385C5.98717 2.66675 5.94017 2.68814 5.8975 2.73091C5.85472 2.77358 5.83333 2.82058 5.83333 2.87191V10.4616C5.83333 10.5129 5.85472 10.5599 5.8975 10.6026C5.94017 10.6454 5.98717 10.6667 6.0385 10.6667ZM3.70517 14.0001C3.36839 14.0001 3.08333 13.8834 2.85 13.6501C2.61667 13.4167 2.5 13.1317 2.5 12.7949V4.20525H3.5V12.7949C3.5 12.8462 3.52139 12.8932 3.56417 12.9359C3.60683 12.9787 3.65383 13.0001 3.70517 13.0001H10.2948V14.0001H3.70517Z" fill="%23171C8F"/></svg>');
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          display: inline-block;
          width: 0.875rem;
          height: 0.875rem;
          cursor: pointer;

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

        .success-message-email {
          display: none;
          background: rgba(23, 28, 143, 0.2);
          padding: 0.5rem 0.75rem;
          color: var(--primary-blue-700);
          font-family: var(--body-font-arena);
          font-size: 0.75rem;
          font-weight: var(--fw-300);
          line-height: 1rem;
          white-space: nowrap;
          text-align: center;
          margin-left: 4px;
          @media (width >=1024px) {
            font-size: 0.875rem;
            line-height: 1.25rem;
          }
        }
      }

      .contact-timing {
        font-family: var(--body-font-family);
        color: var(--secondary-main);
        font-size: 0.75rem;
        font-weight: var(--fw-400);
        line-height: 1rem;
        display: flex;
        align-items: center;
        gap: 4px;
        @media (width >=1024px) {
          font-size: 0.875rem;
          line-height: 1.25rem;
        }
        .dealer-state {
          color: var(--primary-toast-arena-green);
        }

        .timing-icon {
          background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M9.02657 9.64067L9.6414 9.02584L7.43815 6.82259V4.08325H6.56315V7.17711L9.02657 9.64067ZM7.00167 12.5416C6.23517 12.5416 5.51471 12.3961 4.84028 12.1053C4.16585 11.8144 3.57921 11.4196 3.08036 10.9209C2.58151 10.4223 2.18655 9.83589 1.89546 9.16175C1.60448 8.48761 1.45898 7.76734 1.45898 7.00094C1.45898 6.23444 1.60443 5.51397 1.89532 4.83954C2.18621 4.16511 2.58098 3.57847 3.07963 3.07963C3.57828 2.58078 4.16468 2.18581 4.83882 1.89473C5.51296 1.60374 6.23323 1.45825 6.99963 1.45825C7.76613 1.45825 8.4866 1.6037 9.16103 1.89459C9.83546 2.18547 10.4221 2.58025 10.9209 3.0789C11.4198 3.57755 11.8148 4.16395 12.1058 4.83809C12.3968 5.51222 12.5423 6.23249 12.5423 6.9989C12.5423 7.7654 12.3969 8.48586 12.106 9.16029C11.8151 9.83472 11.4203 10.4214 10.9217 10.9202C10.423 11.4191 9.83662 11.814 9.16248 12.1051C8.48835 12.3961 7.76807 12.5416 7.00167 12.5416ZM7.00065 11.6666C8.29371 11.6666 9.39475 11.2121 10.3038 10.303C11.2128 9.39402 11.6673 8.29297 11.6673 6.99992C11.6673 5.70686 11.2128 4.60582 10.3038 3.69679C9.39475 2.78777 8.29371 2.33325 7.00065 2.33325C5.7076 2.33325 4.60655 2.78777 3.69753 3.69679C2.7885 4.60582 2.33398 5.70686 2.33398 6.99992C2.33398 8.29297 2.7885 9.39402 3.69753 10.303C4.60655 11.2121 5.7076 11.6666 7.00065 11.6666Z" fill="%23939393"/></svg>');
          background-repeat: no-repeat;
          background-position: center;
          display: inline-block;
          background-size: cover;
          width: 0.875rem;
          height: 0.875rem;
        }
      }
    }
  }

  .cta-actions-container {
    padding: 8px 16px 16px;
    display: flex;
    gap: 0.75rem;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      height: 1px;
      background-color: var(--light-grey-shade-5);
      bottom: 0;
      z-index: 0;
    }
  }

  .button {
    letter-spacing: 0;
    flex: 1;
    font-weight: var(--fw-400);
  }

  .continue-box {
    background: linear-gradient(184deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 24px;
    border-bottom: 1px solid var(--light-grey-shade-5);

    .continue-txt {
      color: var(--tertiary-black);
      font-family: var(--body-font-arena);
      font-size: 0.75rem;
      font-style: normal;
      font-weight: var(--fw-400);
      line-height: 1rem;
      @media (width >=1024px) {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }

    .continue-btn {
      color: var(--primary-blue-700);
      font-family: var(--body-font-arena);
      font-size: 0.75rem;
      font-style: normal;
      font-weight: var(--fw-400);
      line-height: 1rem;
      text-decoration-line: underline;
      padding: 0;
      background: transparent;
      border: none;
      cursor: pointer;
      @media (width >=1024px) {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
    }
  }
}

.dealers-container .dealer-cards .dealer-card:last-child {
  @media (width >=768px) {
    margin-right: 3.5rem;
  }
}

.dealers-container.mapView .dealer-cards .dealer-card:last-child {
  @media (width >=768px) {
    margin-right: 0;
  }
}

.dealers-container .dealer-cards .dealer-card .dealer-locator-container .carousel-arrow {
  display: flex;
  gap: 1.5rem;
  width: 100%;
  justify-content: right;
  padding-right: 3.5rem;

  .prev-btn {
    content: '';
    height: 2rem;
    width: 2rem;
    background-image: url('../../icons/dealer_carousel_nextArrow.svg');
    transform: rotate(180deg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;

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

  .prev-btn.inactive {
    cursor: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }

  .next-btn {
    content: '';
    height: 2rem;
    width: 2rem;
    background-image: url('../../icons/dealer_carousel_nextArrow.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;

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

  .next-btn.inactive {
    cursor: none;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.5;
  }
}

.dealer-locator-container .dealers-container.mapView {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 48px;
  width: 100%;

  .dealer-cards {
    order: 2;
  }

  .map-container {
    width: 100%;
    aspect-ratio: 320/330;

    #mmi_alert0,
    #mLogo0,
    #mmi_menu0,
    .maplibregl-control-container {
      display: none;
    }
  }

  .dealer-card.focused {
    border: 1px solid var(--Primary-Variations-Primary, #171c8f) !important;
    background-color: var(--secondary-gray-90);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  @media (width >=768px) {
    flex-direction: row;
    gap: 0.75rem;
    padding-top: clamp(24px, 7vh, 80px);

    .dealer-cards {
      order: unset;
      display: flex;
      flex-direction: column;
      aspect-ratio: unset;
      overflow: auto;
      max-height: 400px;
      min-height: 400px;
      flex-basis: 30.69%;
      padding-right: 12px;
    }

    .dealer-cards::-webkit-scrollbar {
      width: 4px;
    }

    .dealer-cards::-webkit-scrollbar-track {
      background: var(--secondary-gray-20);
    }

    .dealer-cards::-webkit-scrollbar-thumb {
      background: var(--primary-blue-700);
    }

    .map-container {
      aspect-ratio: unset;
      max-height: 24rem;
      flex-basis: 64%;

      .maplibregl-canvas-container {
        min-height: 100%;
      }
    }
  }

  @media (width >=1200px) {
    .dealer-cards {
      max-height: 550px;
      min-height: 550px;
    }

    .map-container {
      max-height: 550px;
      min-height: 550px;
    }
  }
}

.dealer-locator-container .dealers-container.mapView .dealer-cards.map-view-cards {
  .dealer-card.map-view-card {
    position: relative;
    border: none;

    .dealer-title {
      display: flex;
      align-items: center;
      padding-bottom: 0;

      &::after {
        display: none;
      }

      .dealer-title-text {
        font-size: 1rem;
        font-style: normal;
        font-weight: var(--fw-600);
        line-height: 1.125rem;
        height: 38px;

        @media (width >=768px) and (width < 1200px) {
          min-width: 10rem;
        }
      }
    }

    .dealer-distance {
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: var(--fw-400);
      color: var(--primary-main);
    }

    .dealer-location {
      gap: 0.75rem;

      .dealer-address {
        color: var(--primary-main);
      }
    }

    .cta-actions-container {
      padding: 16px 16px 45px;
    }

    .bottom-action-container {
      position: absolute;
      bottom: 0;
      background-color: var(--secondary-gray-20);
      border-bottom: 2px solid var(--secondary-gray-1000);
      width: 100%;
      cursor: pointer;
      z-index: 2;

      .wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .wrapper .toggle-arrow {
        width: 100%;
        height: 1rem;
        margin-top: 2px;
        padding-bottom: 1px;
        transform: rotate(180deg);
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M14.2047 5.56417L7.76884 12L1.33301 5.56417L2.27917 4.618L7.76884 10.1078L13.2585 4.618L14.2047 5.56417Z" fill="black"/></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    }

    @media (width >=768px) {
      .dealer-card-content {
        padding: 1rem;

        .dealer-distance {
          position: relative;
          top: 0;
          right: 0;
        }

        .dealer-location {
          margin-top: var(--space-14px);
          gap: 52px;

          .action-cta a {
            font-size: 14px;
            line-height: 20px;
          }
        }

        .contact-block {
          a,
          .dealer-state,
          .dealer-time {
            font-size: 12px;
            line-height: 20px;
          }
        }
      }
    }
  }

  .dealer-card.map-view-card.closed {
    position: relative;
    background-color: var(--tertiary-white);
    max-height: 170px;
    min-height: 170px;
    overflow: hidden;
    transition: all 0.2s linear;
    margin-bottom: 0;

    .contact-block .contact-email,
    .contact-block .contact-timing {
      margin-top: 1.75rem;
      font-size: 12px;
      line-height: 20px;
    }

    .bottom-action-container {
      padding: 0 2px;
      position: absolute;
      bottom: 0;
      background-color: var(--secondary-gray-20);
      border-bottom: 2px solid var(--secondary-gray-1000);

      .wrapper {
        width: 100%;
        padding: 2px;
      }

      .wrapper .toggle-arrow {
        transform: rotate(0);
        display: block;
        width: 100%;
      }
    }

    @media (width >=768px) {
      max-height: 11.25rem;
      min-height: 11.25rem;
    }
    &:has(.bottom-action-container .workshop-highlight) {
      min-height: 13.75rem;
      max-height: 13.75rem;
    }
  }
}

@media (width >=768px) {
  .dealer-locator-container .filter-container .filter-group:first-child {
    border-left: none;
    padding-left: 0;
  }

  .dealer-locator-container .filter-container .filter-group:nth-last-child() {
    .select-items {
      left: 0;
    }
  }

  .dealer-locator-container .filter-container .filter-group label {
    margin-bottom: 0;
    font-size: 0.625rem;
    line-height: 0.6875rem;
  }

  .dealer-locator-container .filter-container .filter-group .filter-icon {
    top: 50%;
  }

  .dealer-locator .filter-container .pincode-block #pincode {
    min-width: 80px;
  }
}

@media (width >=768px) {
  .grid-container {
    display: none !important;
  }

  @media (width >=1200px) {
    .dealer-locator-container .filter-container .filter-group label {
      font-size: 0.75rem;
      line-height: 1.25rem;
    }

    .dealer-locator-container .filter-container .filter-group .filter-icon {
      width: 20px;
      height: 20px;
    }
  }
}

/* arena media query */
@media (width >=768px) {
  .dealer-locator-filter-container .btd-tabs {
    .bdc-cta-inner-div {
      padding: 0 77px;
    }
  }
  .dealer-locator-filter-container .heading-sub-heading {
    margin-top: 40px;
  }

  .dealer-locator-container .filter-container .search-button {
    cursor: pointer;
    height: 40px;
    width: 100%;
    padding: 20px;
  }

  .dealer-locator-container .filter-container .filter-group {
    padding-bottom: 0;
    padding-left: 0;
    border-left: none;
    border-bottom: 1px solid #939393;
    margin-right: 0;
    margin-bottom: 0;
    gap: 24px 0px;
  }
  .dealer-locator-container .filter-container,
  .filter-container-group {
    gap: 24px;
  }
  .dealer-locator-container .filter-container .filter-group label {
    font-size: 0.875rem;
    font-style: normal;
    font-weight: var(--fw-700);
    line-height: 20px;
    white-space: nowrap;
  }

  .dealer-locator-container .dealers-container.mapView .dealer-cards.map-view-cards {
    justify-content: flex-start;
    gap: 10px;
  }

  .dealer-locator-container .dealers-container.mapView .dealer-cards.map-view-cards .button {
    flex-grow: 1;
    padding-left: 5px;
    padding-right: 5px;
    white-space: inherit;
  }

  .dealer-locator-container .filter-container .filter-group custom-select,
  .dealer-locator-container .filter-container .filter-group input {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-bottom: 8px;
    padding-top: 8px;
    height: 38px;
  }

  .dealer-locator-container .filter-container .filter-group custom-select .select-selected {
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
    padding-right: 25px;
  }

  .dealer-locator .card-header {
    justify-content: space-between;
    align-items: baseline;

    * {
      font-size: 22px;
      line-height: 24px;
    }

    .explore-cta-web {
      display: flex;
      align-items: baseline;
      align-self: flex-end;

      a {
        font-size: 14px;
        line-height: 18px;
      }
    }
    .d-location-name {
      text-transform: uppercase;
    }
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .dealer-card-content {
    padding: 24px;
    flex-grow: 1;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .dealer-card-content .dealer-title {
    padding-bottom: 24px;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .dealer-card-content .dealer-title .dealer-title-text {
    height: 42px;
    font-size: 18px;
    font-weight: var(--fw-600);
    line-height: 20px;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .dealer-location {
    padding-top: 20px;
    gap: 60px;

    .action-cta a {
      font-size: 0.875rem;
      font-style: normal;
      font-weight: var(--fw-400);
      line-height: 1.25rem;
      text-decoration: underline;
    }

    .arrow-icon {
      height: 18px !important;
      width: 18px !important;
    }
  }

  .dealers-container.mapView .dealer-cards.map-view-cards .dealer-card.map-view-card .dealer-card-content {
    padding: 16px;

    .dealer-location {
      padding-top: 0;

      .dealer-address {
        font-size: 12px;
        line-height: 18px;
        height: 38px;
      }
    }
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .dealer-location .dealer-address {
    font-size: 16px;
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: 20px;
    height: 42px;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .contact-block {
    margin-top: 16px;
    gap: 16px;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .contact-block .contact-phone {
    .phone-icon {
      height: 20px;
      width: 20px;
    }

    a {
      font-size: 1rem;
      line-height: 20px;
    }
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .contact-block .contact-email {
    .email-icon {
      height: 20px;
      width: 20px;
    }

    a {
      font-size: 1rem;
      line-height: 20px;
    }
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .contact-block .contact-timing {
    .timing-icon {
      height: 20px;
      width: 20px;
    }

    .dealer-state,
    .dealer-time {
      font-size: 1rem;
      line-height: 20px;
    }
  }

  .dealers-container .dealer-cards.map-view-cards .dealer-card.map-view-card {
    min-width: 100%;
  }

  .dealers-container .dealer-cards .dealer-card {
    .cta-actions-container {
      padding: 0px 24px 24px;
      display: flex;
      gap: 0.75rem;
    }
    &:has(.bottom-action-container .workshop-highlight) {
      .cta-actions-container {
        margin-bottom: 30px;
      }
    }
  }

  .carousel-arrow {
    display: flex;
    gap: 16px;
    justify-content: end;

    .prev-btn,
    .next-btn {
      width: 48px;
      height: 48px;
      cursor: pointer;
      border: 1px solid var(--primary-blue-700);
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .dealer-locator-container .filter-container .filter-group custom-select::after {
    bottom: 8px;
    right: -6px;
  }

  .carousel-arrow .prev-btn {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none"><path d="M8.26275 12.1549L20.4355 12.1549L20.4355 13.6605L8.26275 13.6605L13.9805 19.3783L12.9072 20.436L5.3789 12.9077L12.9072 5.37938L13.9805 6.43711L8.26275 12.1549Z" fill="%23171C8F"/></svg>');
  }

  .carousel-arrow .next-btn {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none"><path d="M16.7373 12.8451H4.56445V11.3395H16.7373L11.0195 5.6217L12.0928 4.56396L19.6211 12.0923L12.0928 19.6206L11.0195 18.5629L16.7373 12.8451Z" fill="%23171C8F"/></svg>');
  }

  .carousel-arrow .prev-btn.inactive,
  .carousel-arrow .next-btn.inactive {
    cursor: none;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
  }

  .dealers-container .dealer-cards .dealer-card .button {
    padding: 12px 2px;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .continue-box .continue-txt {
    font-size: 0.875rem;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .continue-box {
    z-index: 100;
    border-left: 1px solid var(--light-grey-shade-5);
    border-right: 1px solid var(--light-grey-shade-5);
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .continue-box .continue-txt,
  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .continue-box .continue-btn {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (width >=1024px) {
  .dealer-locator-container .filter-container .filter-group custom-select::after {
    bottom: 4px;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .continue-box {
    position: absolute;
    bottom: -40px;
    left: -1px;
    right: -1px;
    z-index: 100;
    border-left: 1px solid var(--light-grey-shade-5);
    border-right: 1px solid var(--light-grey-shade-5);
  }

  .dealer-locator-filter-container .btd-tabs {
    gap: 24px;
    .btd-cta,
    .bdc-cta {
      font-size: 1.5rem;
      line-height: 1.75rem;
      padding: 0 10px 22px;
      &:hover {
        border-bottom: 2px solid var(--primary-blue-700);
        color: var(--primary-blue-700);
      }
    }
  }

  .dealers-container .dealer-cards .dealer-card .button {
    padding: 12px 24px;
  }

  .dealer-locator-filter-container .heading-sub-heading {
    margin-bottom: 64px;

    .main-heading p {
      font-size: 1.5rem;
      line-height: 1.75rem;
    }

    p {
      font-size: 0.875rem;
      line-height: 1.25rem;
      margin-top: 8px;
    }
  }

  .dealer-locator-container .filter-container .filter-group custom-select,
  .dealer-locator-container .filter-container .filter-group input,
  .dealer-locator-container .filter-container .filter-group custom-select .select-selected {
    font-size: 0.8125rem;
    line-height: 0.9375rem;
    height: 34px;
    display: flex;
    align-items: center;
  }

  .dealer-locator .card-header {
    padding-top: 70px;
    * {
      font-size: var(--heading-font-1-des);
      line-height: var(--heading-lh-16-des-display);
    }
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .dealer-card-content .dealer-title .dealer-title-text {
    height: 44px;
    font-size: 20px;
    line-height: 22px;
  }

  .dealer-locator-container .filter-container,
  .filter-container-group {
    flex-wrap: nowrap;
  }

  .dealer-locator-container .filter-container .search-button {
    grid-area: auto;
    cursor: pointer;
    height: 40px;
    width: 40px;
    padding: 20px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M16.627 12.75H4.5V11.25H16.627L10.9308 5.55375L12 4.5L19.5 12L12 19.5L10.9308 18.4462L16.627 12.75Z" fill="white"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 0 8px 24px;
    top: 24%;
  }
}

@media (width >=1366px) {
  .dealer-locator-filter-container .heading-sub-heading {
    margin-bottom: 3.5rem;
  }

  .dealer-locator-container .filter-container .filter-group label {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .dealer-locator-container .filter-container .filter-group custom-select,
  .dealer-locator-container .filter-container .filter-group input,
  .dealer-locator-container .filter-container .filter-group custom-select .select-selected {
    font-size: 1rem;
    line-height: 1.25rem;
  }

  .dealer-locator-container .dealers-container .dealer-cards .dealer-card .dealer-card-content .dealer-title .dealer-title-text {
    height: 56px;
    font-size: 1.5rem;
    font-weight: var(--fw-600);
    line-height: 1.75rem;
  }
}

@media (width >=1920px) {
  .dealer-locator-filter-container .heading-sub-heading {
    margin-bottom: 60px;
  }
}

.dealer-locator-container {
  .button.button-secondary-blue.request-quote {
    display: none;
  }
}
.dealers-container .dealer-cards .dealer-card .workshop-highlight {
  left: 0;
  width: 100%;
  background: linear-gradient(228.24deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%);
  font-size: 0.875rem;
  border: 1px solid var(--border-color, #e0e0e0);
  border-top: none;
  font-weight: var(--fw-400);
  padding: 10px 24px;
}
@media (min-width: 1024px) {
  .dealers-container .dealer-cards {
    margin-bottom: 24px;
  }
  .dealers-container .dealer-cards .dealer-card {
    position: relative;
  }
  .dealers-container .dealer-cards .dealer-card .workshop-highlight {
    position: absolute;
    bottom: -43px;
  }
  .dealers-container .dealer-cards .dealer-card.map-view-card .workshop-highlight {
    position: unset;
  }
}

.dealer-locator-filter-container:has(.service-workshop) {
  padding: 0;
}

.service-workshop {
  padding: 2.5rem 0 2.5rem 0;
  @media (width>=1024px) {
    padding: 4rem 0 5rem 0;
  }
  .dealer-locator {
    margin-top: 1rem;
  }
  .search-button span {
    font-weight: var(--fw-400);
  }
  .heading-sub-heading {
    margin: 0;
    .workshop-heading {
      margin: 0 0 var(--space-16px) 0;
      font-size: var(--heading-font-size-m);
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-28-des);
      @media (width >= 1366px) {
        font-size: var(--heading-font-1-des);
        margin: 0 0 var(--space-24px) 0;
        line-height: var(--heading-lh-16-des-display);
      }
    }
  }
  .toast-message {
    margin-top: 1rem;
    background-color: var(--secondary-red);
    color: var(--primary-red);
    padding: 0.5rem 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    @media (width>=1024px) {
      padding: 1rem 1.5rem;
      font-size: 1rem;
    }
  }

  .toast-content {
    font-size: 14px;
    margin-right: 20px;
  }
  .bookmark-wrapper {
    position: relative;
  }

  .bookmark-wrapper {
    position: relative;

    .dealer-saved-prompt {
      position: absolute;
      top: -10px;
      right: -10px;
      transform: translateX(-50%);
      background-color: var(--secondary-main);
      color: var(--tertiary-white);
      padding: var(--space-8px) var(--space-12px);
      font-size: var(--body-font-size-xxxs);
      font-weight: var(--fw-300);
      white-space: nowrap;
      transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
      pointer-events: none;
    }
    .bookmark-wrapper .dealer-saved-prompt {
      opacity: 1;
      visibility: visible;
    }
  }
  .view-saved-dealers-cta {
    color: var(--primary-red);
    font-weight: var(--fw-500);
    cursor: pointer;
  }
  .workshop-subtitle {
    font-weight: var(--fw-400);
    font-size: 1rem;
    line-height: 20px;
  }
  .dealers-container .dealer-cards .dealer-card {
    .dealer-card-content {
      .dealer-title {
        .bookmark-icon {
          display: block;
        }
      }
    }
    &:has(.bottom-action-container .workshop-highlight) {
      .cta-actions-container {
        margin-bottom: 2.188rem;
      }
    }
  }

  .acc-repairs {
    font-family: var(--font-primary-nexa);
    color: var(--secondary-main);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
    display: flex;
    align-items: center;
    gap: 2px;

    .dealer-state.dealer-state-open {
      color: var(--green-shade-1);
    }
    .dealer-state.dealer-state-close {
      color: var(--red-shade-2);
    }

    .repairs-icon {
      background-image: url('/icons/car_crash.svg');
      background-repeat: no-repeat;
      background-position: center;
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 0.625rem;

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

    @media (width >=1024px) {
      .dealer-time {
        display: flex;
        max-width: calc(100% - 175px);
        word-break: break-word;
        white-space: normal;
        overflow-wrap: break-word;
      }
    }

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

  .contact-block-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;

    .dealer-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: end;
      margin-top: 1rem;
      .ev-icon {
        background-image: url('/icons/ev_icon.svg');
        background-repeat: no-repeat;
        background-position: center;
        display: block;
        width: 43px;
        height: 30px;
      }

      .workshop-type {
        font-size: var(--heading-font-11-mob-text-small);
        line-height: var(--heading-lh-21-mob-text-small);
        color: var(--tertiary-white);
        padding: 4px 8px;
        border-radius: 16px;
        width: fit-content;

        @media (min-width: 1024px) {
          font-size: var(--heading-font-0-desc);
          line-height: var(--heading-lh-17-des-text-medium);
        }

        &.nexa {
          background: var(--primary-main);
        }

        &.arena {
          background: var(--blue-shade-5);
        }

        &.mass {
          background: var(--green-shade-1);
        }
      }
    }
  }

  .dealer-location {
    display: flex;
    justify-content: space-between;
    gap: 1rem;

    .dealer-actions {
      @media (min-width: 1024px) {
        margin-top: -20px;
      }
      .ev-icon {
        margin-top: 0;
      }
    }
  }

  .dealer-address {
    flex-grow: 1;
  }

  .custom-marker {
    height: 24px;
    width: 24px;
    .location-marker {
      display: inline-block;
      background: url(/icons/map-marker.png) no-repeat center/contain;
      height: 24px;
      width: 24px;
      transition: all 0.2s ease;
      &.bookmarked {
        transform: scale(1.3);
      }
    }

    &.hovered,
    &:hover {
      transform: scale(1.6);
      .location-marker {
        background: url(/icons/map-hover-marker.png) no-repeat center/contain;
      }
    }
  }

  .action-cta {
    z-index: 2;
  }

  &:has(.map-guide) {
    .dealer-locator-container {
      .dealers-container {
        padding-top: 0;
      }
    }
  }

  .map-guide {
    display: flex;
    justify-content: end;
    margin-top: 40px;
    margin-bottom: 4px;
    padding-right: 64px;

    @media (width >= 1024px) {
      padding-right: 96px;
    }

    .location-mark {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      font-size: var(--heading-font-11-mob-text-small);
      line-height: var(--heading-lh-4--mob-text-medium);
      font-weight: var(--fw-400);
      width: fit-content;

      &::before {
        content: '';
        background: url(/icons/map-marker.png) no-repeat center/contain;
        height: 24px;
        width: 24px;
      }

      &.location-ev {
        &::before {
          background: url(/icons/map-marker-green.png) no-repeat center/contain;
        }
      }
    }
  }
}

.dealer-locator-container .dealers-container.mapView .mapboxgl-marker {
  height: 24px !important;
  width: 24px !important;
  background-size: 24px !important;
  transition: all 0.2s linear;
}

.custom-marker {
  height: 24px;
  width: 24px;
  .location-marker {
    display: inline-block;
    background: url(/icons/map-marker.png) no-repeat center/contain;
    height: 24px;
    width: 24px;
    transition: all 0.2s ease;
    &.bookmarked {
      transform: scale(1.3);
    }
  }

  &.hovered,
  &:hover {
    transform: scale(1.6);
    .location-marker {
      background: url(/icons/map-hover-marker.png) no-repeat center/contain;
    }
  }
}

.cta-actions-container.card-cta button,
.cta-actions-container.card-cta .action-cta {
  cursor: pointer;
}

/* API Errors style | START */
.dealer-locator-filter {
  .error-msg-wrapper {
    padding: 0;
    margin: 24px 0;

    &.theme-light {
      background-color: var(--tertiary-light-grey);

      .error-msg-box {
        h2 {
          color: var(--primary-main);
        }
      }
    }

    &.theme-dark {
      background-color: var(--primary-main);

      .error-msg-box {
        h2 {
          color: var(--tertiary-white);
        }
      }
    }
  }

  .error-msg-box {
    h2 {
      font-size: 24px;
      line-height: normal;
      font-weight: var(--keplar-fw-700);
      margin: 0 0 24px;
      font-family: var(--body-heading-font-family);
      letter-spacing: 0.02em;
    }

    .error-msg-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 5px;
      background: var(--secondary-red);
      padding: 12px;

      .error-msg-icons {
        display: flex;
        justify-content: space-between;
      }

      p {
        color: var(--primary-red);
        font-size: 12px;
        line-height: 16px;
        margin: 0;
        flex: 1;

        strong {
          font-weight: var(--fw-500);
        }
      }

      img {
        margin-left: auto;
        display: flex;
        gap: 8px;
        width: 16px;
        cursor: pointer;
      }
    }
  }

  .hidden {
    display: none;
  }

  @media screen and (width >= 1024px) {
    .error-msg-wrapper {
      margin-bottom: 40px;
    }

    .error-msg-box {
      .error-msg-content {
        padding: 16px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        p {
          font-size: 1rem;
          font-style: normal;
          font-weight: var(--fw-400);
          line-height: 20px;

          strong {
            font-weight: var(--fw-600);
          }
        }

        .error-msg-icons {
          img {
            width: 24px;
          }
        }
      }
    }
  }
}
.filter-container .filter-group custom-select .select-show {
  box-sizing: content-box;
}
.filter-container .filter-group custom-select .select-show::-webkit-scrollbar {
  width: 4px;

  padding-right: 8px; /* space on the right */
}

.dealer-locator-error-refresh,
.dealer-locator-error-close {
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: none;
  cursor: pointer;
  background-color: transparent;
}

.dealer-locator-error-refresh {
  background-image: url('/icons/refresh_icon.svg');
}

.dealer-locator-error-close {
  background-image: url('/icons/close__icon.svg');
}

/*Bookmark modal*/
.divider-line {
  border: none;
  height: 0.5px;
  margin-bottom: var(--space-12px);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
}
.bookmark-modal {
  max-height: 640px;
  padding: 56px 16px 19px 16px;
  position: fixed;
  @media (width>=1024px) {
    min-width: 800px;
    padding: 44px 16px 16px 24px;
  }
  &::backdrop {
    background-color: rgba(0, 0, 0, 0.9);
  }
  .close-button {
    border: none;
    background-color: transparent;
    position: absolute;
    top: 20px;
    right: 20px;
    @media (width>=1024px) {
      right: 10px;
    }

    .icon.icon-close {
      display: block;
      width: 1.5rem;
      height: 1.5rem;
      background-image: url('/icons/close__icon.svg');
    }
  }
  .modal-content {
    .modal-head .modal-head {
      p,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        margin: 0 0 var(--space-24px) 0;
        font-weight: var(--fw-700);
        font-size: 1rem;
        @media (width>=1024px) {
          font-size: var(--heading-font-1-des);
          margin-bottom: 40px;
        }
      }
    }
    .modal-body {
      .bookmark-list {
        .bookmark-item {
          cursor: pointer;
          display: flex;
          gap: var(--space-8px);
          @media (width>=1024px) {
            justify-content: flex-start;
            align-items: flex-start;
            gap: 12.25px;
            padding-bottom: var(--space-10px);
          }

          .bookmark-icon {
            flex-shrink: 0; /* Prevent from shrinking */
            background-image: url('/icons/bookmark_icon-active.svg');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            display: inline-block;
            width: 24px;
            height: 24px;
          }
          &.selected {
            .bookmark-icon {
              width: 24px;
              height: 24px;
              background-image: url('/icons/bookmark_icon.svg');
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
            }
          }
          .workshop-details {
            .address-section {
              .workshop-name {
                font-size: var(--body-font-size-xxs);
                font-style: normal;
                font-weight: var(--fw-700);
                margin: 0;
                @media (width>=1024px) {
                  font-size: var(--body-font-size-xs);
                }
              }
            }
            .workshop-address {
              font-style: normal;
              font-weight: var(--fw-400);
              line-height: 16px;
              font-size: var(--body-font-size-xxxs);
              color: var(--inactive-content);
            }
          }
        }
      }
    }
    .modal-foot {
      .modal-confirm {
        border: none;
        background-color: var(--primary-blue-700);
        color: var(--tertiary-white);
        width: 100%;

        padding: 0px 12px;
        height: 40px;
        @media (width>=1024px) {
          width: max-content;
          bottom: 0;
          padding: 0px 16px;
          float: right;
        }
      }
    }
  }
}

.dealer-locator-filter .location-search-custom-select {
  &::after {
    display: none;
  }
}