@import url('../forms/default-forms.css');

.section.book-test-drive-container {
  padding-top: 24px;
  padding-bottom: 16px;
}

.background__image {
  position: absolute;
  width: 100%;
  height: 130%;
  top: 0;
  left: 0;
  opacity: 0.6;
}

.background__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  @media (width>=1024px) {
    object-position: left;
  }
}

.bookTestDrive__title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bookTestDrive__title_back_button {
  display: flex;
  height: 24px;
  width: 24px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0;

  svg{
    height: 24px;
    width: 24px;
    flex-shrink: 0;
  }
}

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

.book-test-drive-wrapper .bookTestDrive__title {
  padding-bottom: 1.5rem;
  h1,
  h3 {
    font-family: var(--body-font-arena);
    font-size: 1.25rem;
    line-height: 1.5rem;
  }
}

.book-test-drive-wrapper .bookTestDrive__title * {
  color: var(--tertiary-black);
  font-size: 1rem;
  font-style: normal;
  font-weight: var(--fw-700);
  line-height: 1.25rem;
  margin: 0;
  position: relative;
  z-index: 1;
}

.stepper-container .stepper {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--dark-color);
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: scroll;
  position: relative;
  z-index: 1;
}

.vehicle-form .right-section {
  position: relative;
}

.vehicle-form .left-section {
  position: relative;
}

.stepper-container .stepper .step {
  margin: 0;
  color: var(--tertiary-black);
  text-align: center;
  font-family: var(--body-font-family);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: var(--fw-400);
  line-height: 1rem;
  letter-spacing: 0.28px;
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 8px;
  padding-bottom: 8px;
  transition: transform 0.3s ease;
  @media (width >=1024px) {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
}

.stepper-container .stepper .step.disabled {
  pointer-events: none;
  cursor: pointer;
}

.stepper-container .stepper .step.completed {
  color: var(--primary-toast-arena-green);
}

.stepper-container .stepper .step.selected {
  color: var(--primary-blue-700);
  border-bottom: 2px solid var(--primary-blue-700);
  font-weight: var(--fw-700);
}

.stepper-container .step-content {
  display: none;
  font-size: 18px;
  width: 100%;
}

.step-content.active {
  display: block;
}

.stepper-container .content {
  padding-top: 48px;
  padding-bottom: 40px;
}
.stepper-container .content:has(#step5.active) {
  padding-top: 40px;
}
.stepper-container .controls {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 8;
  margin-top: -16px;
  @media (width >= 768px) {
    margin-top: 0px;
  }
  .temC {
    padding-right: 10px;
  }

  .btn-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    button {
      align-self: flex-start;
      flex: 1;
      font-weight: var(--fw-400);
      height: 34px;

      @media (width >= 1024px) {
        height: 42px;
        min-width: fit-content;;
      }
    }
  }
}

.stepper-container .controls .button {
  cursor: pointer;
}

.stepper-container .controls .button[disabled] {
  cursor: not-allowed;
}

/* css for step 3 : Select Date And Time */
.steper-content-row {
  display: flex;
  flex-direction: column;
}

.column-hide-xs {
  display: none;
}

.book-td-card {
  padding: 16px 8px;
  background-color: var(--secondary-gray-20);
  position: relative;
}

.card-calendar {
  display: flex;
  gap: 16px;
  flex-direction: column;

  .datepicker {
    background-color: var(--secondary-gray-10);
    border: 1px solid #e4e4e4;
    padding: 0.875rem;
  }

  .datepicker-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
  }

  .month {
    color: var(--secondary-black);
    font-family: var(--body-font-arena);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 700;
    line-height: 0.875rem;
    padding-bottom: 1rem;
  }

  .day,
  .date {
    height: 40px;
    width: 40px;
    align-items: center;
  }

  .day {
    font-size: 0.875rem;
    font-weight: 400;
    display: flex;
    justify-content: center;
  }

  .date {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid transparent;
    background-color: transparent;
    cursor: pointer;
    transition: all 0.2s linear;

    &:focus {
      outline: 0;
      color: var(--c-theme-primary);
      border: 2px solid var(--c-theme-primary-accent);
    }
  }

  .faded {
    color: var(--inactive-content);
    pointer-events: none;
    cursor: none;

    &.hidden {
      visibility: hidden;
    }
  }

  .current-day {
    background-color: var(--primary-blue-700);
    color: var(--secondary-gray-10);
    cursor: pointer;
  }

  .timeslot-picker {
    border: 1px solid #e4e4e4;
    background: var(--secondary-gray-10);
    height: 100%;

    .title-block {
      padding: 24px 24px 16px;
      position: relative;
    }

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

    .pre-title {
      color: var(--tertiary-deep-Grey);
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 20px;
      margin: 0;
    }

    .pre-date {
      color: var(--primary-black);
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
      margin: 0;
    }
  }

  .time-slots {
    list-style: none;
    margin: 0;
    padding: 0;

    .time-slot {
      padding: 10px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      cursor: pointer;
      margin-top: 10px;
      &:hover {
        background-color: var(--secondary-gray-20);
      }

      &.active {
        background: var(--Gradients-Accent-Section-Bg-1, linear-gradient(228deg, rgba(23, 29, 155, 0.1) 31.52%, rgba(255, 98, 0, 0.1) 111.9%));
      }

      .icon {
        height: 24px;
        width: 24px;
      }

      &.morning .icon {
        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="M11 5V1H13V5H11ZM17.65 7.75L16.275 6.375L19.075 3.5L20.475 4.925L17.65 7.75ZM19 13V11H23V13H19ZM11 23V19H13V23H11ZM6.35 7.7L3.5 4.925L4.925 3.525L7.75 6.35L6.35 7.7ZM19.05 20.5L16.275 17.625L17.625 16.275L20.475 19.025L19.05 20.5ZM1 13V11H5V13H1ZM4.925 20.5L3.525 19.075L6.325 16.275L7.05 16.95L7.775 17.65L4.925 20.5ZM12 18C10.3333 18 8.91667 17.4167 7.75 16.25C6.58333 15.0833 6 13.6667 6 12C6 10.3333 6.58333 8.91667 7.75 7.75C8.91667 6.58333 10.3333 6 12 6C13.6667 6 15.0833 6.58333 16.25 7.75C17.4167 8.91667 18 10.3333 18 12C18 13.6667 17.4167 15.0833 16.25 16.25C15.0833 17.4167 13.6667 18 12 18ZM12 16C13.1 16 14.0417 15.6083 14.825 14.825C15.6083 14.0417 16 13.1 16 12C16 10.9 15.6083 9.95833 14.825 9.175C14.0417 8.39167 13.1 8 12 8C10.9 8 9.95833 8.39167 9.175 9.175C8.39167 9.95833 8 10.9 8 12C8 13.1 8.39167 14.0417 9.175 14.825C9.95833 15.6083 10.9 16 12 16Z" fill="%23F0B529"/></svg>');
        background-position: center;
      }

      &.noon .icon {
        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="M2.25098 21.9598V20.4598H21.751V21.9598H2.25098ZM11.251 9.32531V6.63281H12.751V9.32531H11.251ZM7.42598 16.2098H16.576C16.1926 15.3098 15.5911 14.5848 14.7712 14.0348C13.9514 13.4848 13.028 13.2098 12.001 13.2098C10.974 13.2098 10.0506 13.4848 9.23073 14.0348C8.41089 14.5848 7.80931 15.3098 7.42598 16.2098ZM5.55873 17.7098C5.67406 16.0098 6.34839 14.5848 7.58173 13.4348C8.81506 12.2848 10.2881 11.7098 12.001 11.7098C13.7138 11.7098 15.1869 12.2848 16.4202 13.4348C17.6536 14.5848 18.3279 16.0098 18.4432 17.7098H5.55873Z" fill="%231A4993"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.2531 9.30516V5.85375L9.53655 7.56118L8.48926 6.51388L12.0031 3L15.337 6.33382L14.2892 7.3816L12.7531 5.85375V9.30516H11.2531Z" fill="%23F0B529"/><rect width="1.50781" height="2.73728" transform="matrix(0.760431 -0.649419 -0.649419 -0.760431 6.77832 12.0625)" fill="%23F0B529"/><rect width="1.50781" height="2.73728" transform="matrix(0.436934 -0.899494 -0.899494 -0.436934 4.46191 15.5547)" fill="%23F0B529"/><rect x="17.1494" y="12.0625" width="1.50781" height="2.73728" transform="rotate(-139.502 17.1494 12.0625)" fill="%23F0B529"/><rect x="19.4658" y="15.5547" width="1.50781" height="2.73728" transform="rotate(-115.908 19.4658 15.5547)" fill="%23F0B529"/></svg>');
        background-position: center;
      }

      &.evening .icon {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="19" viewBox="0 0 20 19" fill="none"><path d="M0.250977 18.9598V17.4598H19.751V18.9598H0.250977ZM10.001 4.5L9.25098 3.63281H10.751L10.501 5L10.001 4.5ZM5.42598 13.2098H14.576C14.1926 12.3098 13.5911 11.5848 12.7712 11.0348C11.9514 10.4848 11.028 10.2098 10.001 10.2098C8.97398 10.2098 8.05056 10.4848 7.23073 11.0348C6.41089 11.5848 5.80931 12.3098 5.42598 13.2098ZM3.55873 14.7098C3.67406 13.0098 4.34839 11.5848 5.58173 10.4348C6.81506 9.28481 8.28814 8.70981 10.001 8.70981C11.7138 8.70981 13.1869 9.28481 14.4202 10.4348C15.6536 11.5848 16.3279 13.0098 16.4432 14.7098H3.55873Z" fill="%231A4993"/><path fill-rule="evenodd" clip-rule="evenodd" d="M10.5721 1.50172e-05L10.5721 3.45142L12.2886 1.744L13.3359 2.7913L9.82206 6.30518L6.48824 2.97135L7.53602 1.92358L9.07206 3.45142L9.07206 1.4886e-05L10.5721 1.50172e-05Z" fill="%231A4993"/><rect width="1.50781" height="2.73728" transform="matrix(0.760431 -0.649419 -0.649419 -0.760431 4.77832 9.0625)" fill="%231A4993"/><rect width="1.50781" height="2.73728" transform="matrix(0.436934 -0.899494 -0.899494 -0.436934 2.46191 12.5547)" fill="%231A4993"/><rect x="15.1494" y="9.0625" width="1.50781" height="2.73728" transform="rotate(-139.502 15.1494 9.0625)" fill="%231A4993"/><rect x="17.4658" y="12.5547" width="1.50781" height="2.73728" transform="rotate(-115.908 17.4658 12.5547)" fill="%231A4993"/></svg>');
        background-position: center;
      }

      p {
        color: var(--secondary-black);
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        margin: 0;
      }

      span {
        color: var(--primary-black);
        font-family: var(--body-font-arena);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: 300;
        line-height: 1.125rem;
        @media (width >=1024px) {
          font-size: 0.75rem;
        }
      }
    }
  }
}
/* Css End for Step 3 */

/* MObile CSS start for select vehicle */

.vehicle-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.vehicle-form .car__image {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vehicle-form .car__image img {
  max-width: 100%;
  height: auto;
}

.vehicle-form .select-vehicle-title {
  color: var(--Neutrals-Headings, #1d1d1d);
  font-feature-settings:
    'liga' off,
    'clig' off;
  font-family: var(--body-font-arena);
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.125rem;
  margin-bottom: 24px;
  width: 290px;
  margin-top: 0;
}

@media (width >= 1024px) {
  .vehicle-form .select-vehicle-title {
    width: 349px;
  }
}

.book-test-drive-container .form-dropdown-select .dropdown-select,
.book-test-drive-container input,
.suggested-places-btd {
  width: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  border: none;
  border-bottom: 1px solid var(--inactive-content);
  color: var(--tertiary-black);
  font-family: var(--body-font-arena);
  font-size: 1rem;
  font-style: normal;
  font-weight: var(--fw-700);
  line-height: 1.25rem;
  background: none;
  min-height: 40px;
  padding-left: 6px;
  margin-bottom: 24px;
}

.book-test-drive-container {
  .dropdown-select {
    display: flex;
    align-items: center;
    position: relative;

    &:not([data-value]),
    &[data-value=''] {
      .dropdown-placeholder {
        color: var(--inactive-content);
        font-weight: 400;
      }
    }
    &.disabled {
      pointer-events: none;
      cursor: not-allowed;
      color: var(--inactive-content) !important;
    }
    .dropdown-placeholder{
      white-space: nowrap;
      width: calc(100% - 22px);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    input.dropdown-placeholder {
      width: 100%;
      margin-bottom: 0;
      border: none;
      padding-top: 0;
      &:focus-visible {
        outline: none;
      }
    }
  }

  .dropdown-select:has(> input) {
    padding-bottom: 0;
    padding-left: 0;
  }
  .dropdown-list {
    color: var(--primary-black);
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid var(--bars-unselected);
    background-color: var(--tertiary-white);
    max-height: 200px;
    overflow-y: auto;
    z-index: 9;
    margin: 0;
    padding: 0;
    list-style: none;
    .dropdown-item {
      padding: 13px 12px;
      cursor: pointer;
      &.selected {
        color: var(--primary-blue-700);
      }
      &:hover {
        background-color: var(--hover-gray-arena);
      }
    }
  }

  select {
    appearance: none;
  }
}

.book-test-drive-container .form-dropdown::after {
      --size: 2px;

    position: absolute;
    content: "";
    pointer-events: none;
    top: 10px;
    right: 0;
    width: 24px;
    height: 24px;
    /* transform: rotate(45deg); */
    background: url(/icons/arrow-dropdown.svg);
}

.book-test-drive-container .personal-details-form__form-wrapper .form-dropdown::after {
  right: 15px;
}

.suggested-places-btd {
  flex-grow: 1;
  width: auto;
  margin-bottom: 0;
}

.book-test-drive-container .form-dropdown-select {
  option {
    color: var(--tertiary-black);
    font-size: 14px;
    line-height: 15px;
    font-weight: var(--fw-400);
    padding: 14px 12px;
  }

  option:checked {
    color: var(--primary-blue-700);
    font-weight: var(--fw-600);
  }
  option[disabled] {
    font-weight: var(--fw-400);
    color: var(--inactive-content);
  }
}

.book-test-drive-container {
  .book-td-card.card-form .book-td-sign-in-wrapper {
    padding: 0 12px 60px;
    display: none;
    .book-td-or-divider {
      text-align: center;
      margin-bottom: 1.875rem;
      position: relative;
      span {
        display: inline-block;
        font-size: 1rem;
        line-height: 1.25rem;
        @media (width >=1024px) {
          font-size: 0.875rem;
        }
        &::before,
        &::after {
          content: '';
          width: 45%;
          height: 1px;
          background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          opacity: 0.4;
        }
        &::before {
          left: 0;
        }
        &::after {
          right: 0;
        }
      }
    }
    .book-td-sign-in-actions {
      font-size: 0.875rem;
      line-height: 1.25rem;
      color: var(--tertiary-black);
      font-weight: var(--fw-300);
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;

      .book-td-sign-in,
      .book-td-sign-up {
        width: 46%;
      }

      .book-td-sign-in {
        text-align: right;
      }

      .book-td-vertical-divider {
        height: 1.875rem;
        width: 1px;
        background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
      }

      button {
        border: 0;
        background: none;
        padding: 0;
        color: var(--tertiary-black);
        font-weight: var(--fw-700);
        cursor: pointer;
        border-bottom: 1px solid var(--tertiary-black);
      }
    }
  }

  .terms_conditions_container {
    margin-bottom: 24px;
    @media (width >=1024px) {
      margin-bottom: 0px;
    }
    .terms_conditions_link {
      font-size: 0.875rem;
      line-height: 1.25rem;
      font-weight: var(--fw-400);
      color: var(--primary-main);
      display: inline-flex;
      gap: 16px;
      @media (width >=1024px) {
        font-size: 0.75rem;
        position: relative;
        z-index: 9;
        cursor: pointer;
        span:nth-child(1) {
          position: relative;
          &:after {
            content: '';
            min-width: 0.2px;
            height: 100%;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
            position: absolute;
            right: -8px;
          }
        }
      }
    }
    .terms_conditions_checkbox {
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: var(--fw-400);
      color: var(--tertiary-deep-Grey);
      @media (width >=1024px) {
        font-size: 0.75rem;
        line-height: 1.25rem;
        max-width: 402px;
      }
      @media (width >=1024px) and (width <= 1200px) {
        margin-left: -15px;
      }
      @media (width >=1366px) {
      margin-right: 4.5%;
      }
      a {
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: var(--fw-700);
        text-decoration: underline;
        @media (width >=1024px) {
          font-size: 0.75rem;
          line-height: 1rem;
        }
      }
    }
  }
}

.vehicle-form select:focus-visible {
  outline: none;
}

.ctrl-edit-btn {
  position: absolute;
  border: none;
  border-radius: none;
  background-color: transparent;
  color: var(--primary-blue-700);
  font-family: var(--body-font-arena);
  font-size: 1rem;
  font-style: normal;
  font-weight: var(--fw-400);
  line-height: 1.25rem;
  z-index: 1;
  bottom: 15px;
  right: 1rem;
  cursor: pointer;
  text-decoration: none;
  padding-right: 20px;
  @media (width >= 1024px) {
    right: 1.5rem;
  }
}

.ctrl-edit-btn::after {
  content: '';
  height: 16px;
  width: 16px;
  position: absolute;
  right: 0;
  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="M3.68226 12.6663H4.56649L11.7416 5.84201L10.8574 5.00101L3.68226 11.8253V12.6663ZM2.63086 13.6663V11.41L11.8765 2.62017C11.9825 2.52862 12.0995 2.4579 12.2275 2.40801C12.3557 2.35801 12.49 2.33301 12.6305 2.33301C12.7711 2.33301 12.9072 2.35673 13.0388 2.40417C13.1706 2.45162 13.2873 2.52706 13.3888 2.63051L14.2448 3.45484C14.3536 3.5514 14.4311 3.66251 14.4773 3.78817C14.5236 3.91384 14.5467 4.03951 14.5467 4.16517C14.5467 4.29929 14.5227 4.42723 14.4745 4.54901C14.4264 4.6709 14.3498 4.78223 14.2448 4.88301L5.00317 13.6663H2.63086ZM11.2918 5.42884L10.8574 5.00101L11.7416 5.84201L11.2918 5.42884Z" fill="%23171C8F"/></svg>');
}

.book-td-card.d-flex {
  display: flex;
}
.book-td-card {
  .selected-car-details p,
  .selected-car-dealer p {
    color: var(--neutrals-heading);
    font-family: var(--body-font-family);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: 1.875rem;
    margin-top: 0;
    margin-bottom: 8px;
    @media (width >=1024px) {
      line-height: 1.75rem;
    }
  }

  .selected-car-details p {
    white-space: nowrap;
  }

  .selected-car-dealer {
    display: flex;
    align-items: start;
    position: relative;
    padding-bottom: 16px;
    gap: 8%;
    justify-content: space-between;
    text-transform: capitalize;
    .distance-km {
      color: var(--tertiary-black);
      font-family: var(--body-font-arena);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: var(--fw-400);
      line-height: 1.125rem;
      margin-top: 2px;
      white-space: nowrap;
      text-transform: lowercase;
    }

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

  .selected-car-details {
    span {
      display: inline-block;
      color: var(--tertiary-black);
      font-family: var(--body-font-arena);
      font-size: 0.75rem;
      font-style: normal;
      font-weight: var(--fw-300);
      line-height: 1rem;
      white-space: nowrap;
      @media (width >=1024px) {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }
      &.divider {
        width: 1px;
        height: 14px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 51.5%, rgba(0, 0, 0, 0) 100%);
      }
    }

    .selected-car-type {
      display: flex;
      gap: 4px;
      align-items: center;
    }
  }

  .selected-dealer-address {
    padding-right: 18%;
    text-transform: capitalize;
  }
}

/* overview css */

#step5 {
  .steper-cards h4 {
    margin-top: 24px;
  }

  .book-td-card {
    padding: 1rem;

    .selected-car-details p,
    .selected-car-dealer p {
      font-family: var(--body-font-arena);
      font-size: 0.875rem;
      font-style: normal;
      font-weight: var(--fw-500);
      line-height: 1.125rem;
      margin: 0;
    }

    .selected-car-details {
      .selected-car-type {
        display: flex;
        gap: 4px;
        margin-top: 8px;
      }

      span {
        display: inline-block;
        color: var(--tertiary-black);
        font-family: var(--body-font-arena);
        font-size: 0.75rem;
        font-style: normal;
        font-weight: var(--fw-300);
        line-height: 1rem;
        @media (width >=1024px) {
          font-size: 0.875rem;
          line-height: 1.25rem;
        }
      }
    }

    .selected-car-dealer {
      display: flex;
      align-items: start;
      justify-content: space-between;
      position: relative;
      padding-bottom: 16px;
      gap: 8%;

      .distance-km {
        color: var(--ternary-black);
        font-family: var(--body-font-arena);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: var(--fw-400);
        line-height: 1.125rem;
        margin: 0;
        white-space: nowrap;
      }
    }

    .selected-dealer-address * {
      color: var(--secondary-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;
      }
    }

    .selected-date-time {
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
      gap: 0;

      .selected-date {
        padding-right: 0;
      }

      .selected-time {
        padding-left: 0;
      }

      .selected-date::after {
        display: none;
      }

      span {
        color: var(--gray-name);
        font-family: var(--body-font-family);
        font-size: 1rem;
        font-style: normal;
        font-weight: var(--fw-600);
        line-height: 1.25rem;
        display: inline-block;
        @media (width >=1024px) {
          font-size: 0.875rem;
          line-height: 1.25rem;
        }
      }

      p {
        margin: 0;
        color: var(--tertiary-black);
        font-family: var(--body-font-family);
        font-size: 0.875rem;
        font-style: normal;
        font-weight: var(--fw-600);
        line-height: 1.125rem;
        padding-top: 4px;
      }
    }
  }

  .selected-car {
    .book-td-card {
      padding: 1rem;
      flex-direction: column;
      .selected-car-details {
        padding: 0 0.5rem;
      }
      .selected-car-image {
        padding: 0.5rem 0;
      }
      .ctrl-edit-btn {
        display: flex;
        padding: 0;
        justify-content: flex-end;
        position: static;
        &::after {
          position: static;
        }
      }
    }
    @media (width >=1024px) {
      .book-td-card {
        padding: 1.5rem;
        .selected-car-image {
          padding: 0;
        }
      }
    }
  }

  .selected-car-image {
    width: 100%;
    img {
      width: 100%;
    }
  }

  h3 {
    color: var(--secondary-black);
    font-size: 1rem;
    font-family: var(--body-font-arena);
    font-style: normal;
    font-weight: var(--fw-700);
    line-height: 1.25rem;
    margin-bottom: 1.5rem;
    margin-top: 0;
    @media (width >=1024px) {
      font-size: 0.875rem;
    }
  }

  h4 {
    color: var(--ternary-black);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: var(--fw-700);
    line-height: 1.25rem;
    margin-bottom: 1rem;
    margin-top: 0;
  }
  .confirm-deatils {
    font-size: 1.5rem;
    line-height:1.75rem;
    margin-bottom:24px;
    @media (width >=1024px) {
      margin-block: 16px 40px;
      font-size: 2rem;
      line-height:2.375rem;
    }
  }
}

.selected-items .selected-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  gap: 0;

  span {
    color: var(--gray-name);
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: 1.25rem;
    display: inline-block;
  }

  p {
    margin: 0;
    color: var(--tertiary-black);
    font-family: var(--body-font-family);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: 1.125rem;
    padding-top: 4px;
  }
}

.dealership-form {
  .select-dealer-title {
    color: var(--secondary-black);
    font-family: var(--body-font-arena);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--fw-700);
    line-height: 1.25rem;
    margin-top: 0;
    word-break: break-word;
    @media (width >=1024px) {
      font-size: 0.875rem;
      line-height: 1.25rem;
    }
  }

  .dealership-form-fields {
    background-color: var(--secondary-gray-20);
    padding: 24px 8px 12px;
    display: flex;
    gap: 24px;

    .form-field {
      flex: 1;
      @media (width >=1024px){
        flex-grow: 1;
      }
    }
  }
}

.inner-detect-location__box_tab {
  display: none;

  .detect-location__text {
    &::before {
      content: none;
    }

    &::after {
      content: '';
      display: inline-block;
      width: 24px;
      margin-left: auto;
      height: 24px;
      background-image: url(../../icons/detect_location.svg);
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}

.pincode-icon {
  content: '';
  height: 24px;
  width: 24px;
  position: absolute;
  display: block;
  right: 0;
  bottom: 35px;
  background-image: url(/icons/detect_location.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  top: 5px;
}

.dealership-form input {
  margin-bottom: 0;
}

.dealership-form .container__dealers {
  background-color: var(--secondary-gray-20);
  padding: 12px 4px 24px 8px;
}

.dealership-form .dealer__list__container {
  max-height: 395px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
}

.dealership-form .dealer__list__container .dealer__card {
  background-color: var(--tertiary-white);
  padding: 16px 12px;
  border: 1px solid var(--dark-color);
  position: relative;
}

.dealership-form .dealer__list__container .dealer__card .dealership__top__info {
  display: flex;
  align-items: start;
  justify-content: space-between;
  position: relative;
  gap: 8px;
  padding-left: 28px;
}

.dealership-form .dealer__list__container .dealer__card .dealership__top__info::after {
  content: '';
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
  transform: scaleY(0.2);
}

.dealership-form .dealership__top__info .dealer__name {
  color: var(--secondary-black);
  font-family: var(--body-font-arena);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: var(--fw-600);
  line-height: 1.125rem;
  margin-top: 0;
  margin-bottom: 11px;
  height: 36px;
  @media (width >=1024px) {
    font-size: 0.75rem;
  }
}

.dealership-form .dealership__top__info .dealer__distance {
  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;
  margin-top: 0;
  margin-bottom: 8px;
  width: 80px;
  text-align: end;
  min-height: 20px;
  @media (width >=1024px) {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.dealership-form .dealer__list__container .dealer__card .dealer__address {
  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;
  margin-top: 8px;
  margin-bottom: 0;
  padding-left: 30px;
  height: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  @media (width >=1024px) {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* radio button border style begins */

/* Add a focus effect when a radio button is selected */
.dealer__radio:checked + .dealership__top__info + .dealer__address::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--primary-blue-700);
}

/* radio button border style end */

.dealer__list__container::-webkit-scrollbar {
  width: 4px;
}

.dealer__list__container::-webkit-scrollbar-track {
  background: rgba(196, 196, 196, 0.2);
}

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

.stepper-container .step.completed {
  cursor: pointer;
}

.form-radio.transmission {
  display: flex;
  flex-direction: column;
}

.form-radio.transmission .form-radio-group-label {
  display: none;
}

.form-radio.transmission .custom-radio-container {
  display: flex;
  gap: 24px;
}

.form-radio.transmission .custom-radio-container .form-radio-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.form-radio.transmission .custom-radio-container .form-radio-item input {
  margin: 0;
}

.form-radio.transmission .custom-radio-container .form-radio-item .form-radio-label {
  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;
  }
}

/* personal detail form style */
.personal-details-form__container {
  padding: 4px 12px;
}

.personal-details-form__heading .signin-text {
  display: none;
}

.personal-details-form__container .form-input.form-field .form-data-label,
.personal-details-form__container .otp-container .form-data-label {
  display: none;
}

.personal-details-form__container .phone-verification {
  position: relative;
}

.personal-details-form__container #resend-otp-btn {
  position: absolute;
  bottom: 0;
  right: 0px;
  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;
  border: none;
  border-radius: 0;
  padding: 4px 0px;
  text-decoration: underline;
  background: transparent;
  @media (width >=1024px) {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.personal-details-form__container #sendotp-btn {
  position: absolute;
  top: 3px;
  right: 0;
  color: var(--primary-blue-700);
  font-family: var(--body-font-arena);
  font-size: 0.875rem;
  background-color: var(--tertiary-white);
  font-style: normal;
  font-weight: var(--fw-400);
  line-height: 1.125rem;
  border: 1px solid var(--primary-blue-700);
  border-radius: 0;
  padding: 8px 16px;
  @media (width >=1024px) {
    font-size: 0.75rem;
  }
  &[disabled] {
    background-color: var(--secondary-gray-300);
    color: var(--secondary-gray-700);
    border-color: transparent;
  }
  &:hover {
    cursor: pointer;
  }
}

.personal-details-form__container .phone-verification .otp-container {
  position: static;
}

.personal-details-form__container .phone-verification .otp-container .validation-text {
  position: absolute;
  bottom: 6px;
  width: 150px;
  font-style: normal;
  color: var(--primary-red);
}

.personal-details-form__container .form-dropdown .form-dropdown-label {
  display: none;
}

.book-test-drive-container input::placeholder {
  color: var(--inactive-content);
  opacity: 1;
  font-weight: 400;
}

.book-test-drive-container input::-ms-input-placeholder {
  color: var(--inactive-content);
}

.personal-details-form__container .form-dropdown-select .dropdown-select,
.personal-details-form__container input {
  font-weight: var(--fw-600);
}

/* custom radio css */
/* Style for the radio button container */

.form-radio-item input[type='radio'] {
  display: none;
}

.form-radio-item input[type='radio'] + .form-radio-label {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 16px;
  line-height: 20px;
}

.form-radio-item input[type='radio'] + .form-radio-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--dark-color);
  transition: all 0.3s ease;
  @media (width>=768px) {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.form-radio-item input[type='radio']:checked + .form-radio-label::before {
  background-color: var(--secondary-gray-10);
  border-color: var(--dark-color);
}

.form-radio-item input[type='radio']:checked + .form-radio-label::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  background-color: var(--primary-blue-700);
  border-width: 0 2px 2px 0;
  @media (width>=768px) {
    width: 1rem;
    height: 1rem;
  }
}

.form-radio-item input[type='radio']:disabled + .form-radio-label {
  cursor: not-allowed;
}

.form-radio-item input[type='radio']:disabled + .form-radio-label::before {
  background-color: #e0e0e0;
  border-color: #b0b0b0;
  cursor: not-allowed;
}

/* custom radio style for dealer radio button */
/* Style the radio input buttons */
.dealership-form .dealer__list__container .dealer__card .dealer__radio {
  position: absolute;
  left: 18px;
  width: 16px;
  height: 16px;
  display: none;
}

.dealer__card input:checked + .dealership__top__info::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 1px solid var(--dark-color);
  background-color: var(--primary-blue-700);
  transition: all 0.2s ease;
  position: absolute;
  top: 12px;
  transform: translateY(-50%);
  box-shadow: inset 0 0 0 2px var(--background-color);
}

.dealer__radio + .dealership__top__info::before {
  content: '';
  width: 20px;
  height: 20px;
  background-color: var(--secondary-gray-10);
  border: 1px solid var(--dark-color);
  position: absolute;
  left: 0px;
  top: 12px;
  transform: translateY(-50%);
  transition: all 0.2s ease;
}

.dealer__radio:checked + .dealership__top__info::before {
  border-color: var(--dark-color);
  background-color: var(--secondary-gray-10);
}

/* Custom focus style for the radio input when selected */

/* Mobile CSS End for Select vehicle */

.otp-input-container {
  display: flex;
  gap: 1.69px;
  /* Space between each digit */
}

.otp-digit {
  width: 2rem;
  /* Adjust width as needed */
  font-size: 1.5rem;
  /* Size of the digit */
  text-align: center;
  border: none;
  border-bottom: 2px solid var(--primary-black);
  border-radius: 0px;
  /* Underline */
  outline: none;
  color: var(--primary-black);
}

.otp-digit:focus {
  border-bottom-color: #007bff;
  /* Change underline color on focus */
}

.otp-digit.green {
  color: var(--primary-toast-arena-green);
  border-bottom-color: var(--primary-toast-arena-green);
}

.otp-digit.red {
  color: var(--primary-red);
  border-bottom-color: var(--primary-red);
}

.form-input.mobileField {
  padding-right: 120px;
  position: relative;
  .validation-pattern{
    position:absolute;
    bottom:6px;
    font-style: normal;
    color: var(--primary-red);
    @media (width >=768px) {
      bottom:25px;
    }
  }
  &.valid {
    padding-right: 0px;
    input#mobile {
      color: var(--inactive-content);
      border-bottom: 1px dashed var(--inactive-content);
    }
  }
}

.form-input.mobileField.valid::after {
  content: '';
  /* Remove the default content */
  position: absolute;
  right: 15px;
  top: 30%;
  transform: translateY(-50%);
  background-color: var(--primary-toast-arena-green);
  /* Set background to green */
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%2216%22 height%3D%2216%22 viewBox%3D%220 0 16 16%22 fill%3D%22none%22%3E%3Cpath d%3D%22M6.36688 11.7692L2.81055 8.21284L3.52321 7.5L6.36688 10.3437L12.4772 4.23334L13.1899 4.94617L6.36688 11.7692Z%22 fill%3D%22white%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

#mobile {
  padding-right: 2.5em;
  /* Add space for the checkmark */
}

.hidden {
  display: none;
}

/* popup style starts */
#btd-confirmation-popup {
  z-index: 999;
}

/* Popup styles */
.btd-confirmation-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.btd-confirmation-popup .button-primary-blue {
  padding: 8px 16px;
  font-weight: var(--fw-400);
  letter-spacing: normal;
}

.btd-confirmation-popup .btd-popup-content {
  position: relative;
  background: var(--tertiary-white);
  padding: 1rem;
  max-width: 312px;
  width: 100%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Close button inside the popup */
.btd-confirmation-popup .btd-popup-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
}

.btd-confirmation-popup .btd-popup-title {
  color: var(--neutrals-sub-texts-paragraphs, #000);
  font-feature-settings:
    'liga' off,
    'clig' off;
  font-family: Roboto, sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  margin-top: 0.25rem;
  margin-bottom: 8px;

  display: flex;
  flex-direction: column-reverse;
  align-items: left;
  gap: 0.5rem;
}

.btd-confirmation-popup .btd-popup-subtitle-1 {
  color: var(--neutrals-sub-texts-paragraphs, #000);
  font-feature-settings:
    'liga' off,
    'clig' off;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
  margin-bottom: 1rem;
  margin-top: 0;
}

.btd-confirmation-popup .btd-popup-subtitle-1::after {
  content: '';
  display: flex;
  width: 90%;
  margin-top: 0.75rem;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0));
}

.btd-confirmation-popup .btd-popup-subtitle-2 {
  color: var(--neutrals-sub-texts-paragraphs, #000);
  font-feature-settings:
    'liga' off,
    'clig' off;

  /* Text Small/Light */
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 20px;
  /* 142.857% */
  width: 269px;
  strong {
    font-weight: 600;
  }
}

.btd-confirmation-popup .left-section {
  margin-bottom: 7px;
}

.btd-confirmation-popup hr {
  display: none;
}

.btd-confirmation-popup .section-wrapper {
  display: flex;
}

.btd-confirmation-popup .right-section {
  display: none;
}

.btd-confirmation-popup .popup-car-image img {
  max-width: 100%;
  /* Ensure the image is responsive */
  height: auto;
  /* Maintain aspect ratio */
}

.btd-confirmation-popup .subtitle-bold {
  font-weight: 600;
}

.stepper-container.arena-book-test-dtive {
  .terms_conditions_container {
    color: var(--primary-main);
    font-family: var(--body-font-arena);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1rem;
    text-align: center;
  }
}

.terms_conditions_link {
  position: relative;
  z-index: 999;
  color: var(--primary-main);
  font-family: var(--body-font-arena);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1rem;
  @media (width >=1024px) {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  /* 142.857% */
}

/* popup style ends */

.custom-radio-container .form-radio-item input[type='radio']:checked + .form-radio-label {
  font-weight: var(--fw-600);
}

.non-editable {
  pointer-events: none;
  /* Prevent any interaction */
  cursor: not-allowed;
  /* Show a 'not-allowed' cursor */
}

.btd-popup-title svg {
  width: 32px;
  height: 32px;
}
.form-input{
  .validation-text.open{
    display: block;
    position: absolute;
    top: 2.5rem;
  }
}
@media (width>=768px) {
  .hide-lg {
    display: none;
  }

  .btd-confirmation-popup .btd-popup-close {
    top: 1.5rem;
    right: 1.5rem;
  }

  .section.book-test-drive-container {
    padding-top: clamp(24px, 7vh, 54px);
    padding-bottom: clamp(24px, 7vh, 54px);
  }

  .book-test-drive-wrapper .bookTestDrive__title {
    h1,
    h3 {
      font-size: 1.375rem;
      line-height: 1.5rem;
    }
  }

  .stepper-container.arena-book-test-dtive {
    .step {
      padding-top: 15px;
      padding-bottom: 15px;
      font-size: 0.875rem;
      letter-spacing: 0.28px;
      text-transform: uppercase;
      transition: transform 0.3s ease;
    }

    .controls {
      justify-content: center;
      gap: 1rem;
    }

    .terms_conditions_container {
      color: var(--primary-main);

      .terms_conditions_link {
        position: relative;
        z-index: 999;
        cursor: pointer;
      }
    }

    .card-calendar {
      flex-direction: column;
      padding: 0;
      gap: 0;
      .g-row {
        column-gap: 0;
        padding: 0.5rem 0.7rem;

        & > div {
          padding: 0.5rem;
        }
      }

      .timeslot-picker .title-block {
        padding: 11px 10px 10px;
      }

      .datepicker {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .datepicker-calendar {
        height: 100%;
      }

      .month {
        font-size: 1rem;
      }

      .day {
        font-size: 1rem;
      }

      .date {
        font-size: 1rem;
      }
    }
  }

  .vehicle-form {
    display: flex;
    flex-direction: row;

    .car__image img {
      max-width: 100%;
      height: auto;
    }

    .select-vehicle-title {
      color: var(--tertiary-black);
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: 28px;
      margin-top: 40px;
      margin-bottom: 48px;
    }
  }

  .steper-content-col {
    flex-grow: 0;
    flex-basis: auto;
  }

  .steper-content-col.column-2 {
    grid-template-rows: min-content;
  }

  .steper-content-col .steper-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-height: 544px;
    overflow: auto;
    padding-right: 6px;
  }

  #step3 {
    .steper-content-col .steper-cards {
            max-height: 400px;
        }
  } 

  #step5 {
    .steper-content-col .steper-cards {
      gap: 0;
      height: 100%;
      max-height: inherit;
      overflow: inherit;

      .steper-cards h4 {
        margin-top: 0;
      }
    }

    .book-td-card {
      padding: 1rem;
      flex-direction: column;
      gap: 40px;
      height: 100%;
    }

    .steper-cards.selected-car {
      height: calc(100% - 52px);
    }

    .book-td-card.selected-delear {
      margin-bottom: 24px;
    }

    h3,
    h4 {
      color: var(--tertiary-black);
      font-size: 1.5rem;
      font-style: normal;
      font-weight: var(--fw-700);
      line-height: 28px;
      margin-top: 0;
      margin-bottom: 24px;
    }

    .book-td-card {
      .selected-car-details p {
        font-family: var(--body-font-family);
        font-size: 1.25rem;
        font-style: normal;
        font-weight: var(--fw-600);
        line-height: 1.75rem;
      }

      .selected-car-dealer p {
        color: var(--secondary-black);
        font-family: var(--body-font-family);
        font-size: 1.25rem;
        font-style: normal;
        font-weight: var(--fw-600);
        line-height: 1.75rem;
      }

      .selected-dealer-address * {
        font-size: 0.875rem;
        line-height: 1.25rem;
      }

      .selected-dealer-address {
        padding-right: 20%;
      }

      .selected-date-time p {
        font-size: 1rem;
        line-height: 1.75rem;
      }
    }
  }

  /* scrollbar */
  .steper-content-col .steper-cards::-webkit-scrollbar,
  .book-test-drive-container::-webkit-scrollbar {
    width: 4px;
  }

  .steper-content-col .steper-cards::-webkit-scrollbar-track,
  .book-test-drive-container::-webkit-scrollbar-track {
    background: var(--secondary-gray-20);
  }

  .steper-content-col .steper-cards::-webkit-scrollbar-thumb,
  .book-test-drive-container::-webkit-scrollbar-thumb {
    background: var(--primary-blue-700);
  }

  .book-td-card.card-form {
    padding: 12px;
  }

  .book-td-card .selected-car-image {
    flex-grow: 1;
    position: relative;
    top: -4px;
    height: 188px;
  }

  .book-td-card .selected-car-image img {
    width: 100%;
  }

  .book-td-card .selected-dealer-address * {
    color: var(--tertiary-black);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 12px;
    margin-top: 16px;
    padding-bottom: 10px;
  }

  .book-td-card .selected-date-time {
    display: flex;
    flex: 0 0 50%;
    margin-bottom: 1rem;
  }

  .book-td-card .selected-date-time .selected-date {
    padding-right: 12px;
    padding-bottom: 20px;
    position: relative;
  }

  .book-td-card .selected-date-time .selected-date::after {
    content: '';
    width: 0px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 50%, rgba(0, 0, 0, 0) 100%);
  }

  .book-td-card .selected-date-time .selected-time {
    padding-left: 12px;
    padding-bottom: 20px;
  }

  .book-td-card .selected-date-time span {
    color: var(--inactive-content);
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: 140%;
    display: inline-block;
    margin-bottom: 4px;
  }

  .book-td-card .selected-date-time p {
    margin: 0;
    color: var(--tertiary-black);
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: normal;
    padding-top: 4px;
  }

  .selected-items .selected-row {
    display: flex;
    flex: 0 0 50%;
    margin-bottom: 30px;
  }

  .selected-items .selected-row span {
    color: var(--gray-name);
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--fw-600);
    line-height: 140%;
    display: inline-block;
    margin-bottom: 4px;
  }

  .selected-items .selected-row p {
    margin: 0;
    color: var(--tertiary-black);
    font-family: var(--body-font-family);
    font-size: 1rem;
    font-style: normal;
    font-weight: var(--fw-600);
    padding-top: 4px;
  }

  .stepper-container .content {
    padding-top: 20px;
    padding-bottom: 64px;
    min-height: 400px;
    &:has(#step4.active) {
      padding-bottom: 35px;
    }
  }

  .dealership-form {
    display: flex;
  }

  .dealership-form .dealership-form-fields {
    background-color: inherit;
    padding: 48px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .dealership-form .select-dealer-title {
    font-size: 1.5rem;
    line-height: 1.75rem;
    margin-top: 0;
    margin-bottom: 0;
  }

  .dealership-form .container__dealers {
    background-color: var(--secondary-gray-20);
    padding: 16px;
    padding-right: 12px;
  }

  .dealership-form .dealer__list__container .dealer__card {
    flex: 0 0 50%;
    padding: 16px;
  }

  .dealership-form .dealership__top__info .dealer__name {
    font-size: 14px;
    font-style: normal;
    line-height: 1.25rem;
    margin-bottom: 1rem;
  }

  .dealership-form .dealership__top__info .dealer__distance {
    font-size: 0.75rem;
    line-height: 20px;
    margin-top: 0;
    margin-bottom: 12px;
    white-space: nowrap;
  }

  .dealership-form .dealer__list__container .dealer__card .dealer__address {
    font-size: 0.75rem;
    line-height: 1.25rem;
    margin-top: 8px;
    height: 46px;
  }

  .suggested-places-btd {
    margin-bottom: 40px;
  }

  /* personal detail form style */
  .personal-details-form__container {
    padding: 28px 0px;
  }

  .personal-details-form__container .form-input.form-field,
  .personal-details-form__container .form-dropdown.form-field {
    width: 100%;
    padding: 0 12px;
  }

  .personal-details-form__container .form-input.form-input.mobileField {
    padding-right: 120px;
  }

  .personal-details-form__container .phone-verification .otp-container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .personal-details-form__container .phone-verification .otp-container .validation-text {
    position: absolute;
    bottom: 25px;
    width: 150px;
  }

  .personal-details-form__container .phone-verification .otp-button {
    right: auto;
    z-index: 2;
    cursor: pointer;
  }

  .book-test-drive-container .form-dropdown-select,
  .book-test-drive-container input {
    margin-bottom: 40px;
  }

  .form-radio.transmission .custom-radio-container .form-radio-item .form-radio-label {
    color: var(--tertiary-black);
    font-family: var(--body-font-arena);
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.25rem;
  }

  .personal-details-form__container #resend-otp-btn {
    position: absolute;
    bottom: 28px;
    right: 12px;
    color: var(--primary-blue-700);
    font-family: var(--body-font-arena);
    font-size: 10px;
    height: 12px;
    font-style: normal;
    font-weight: var(--fw-400);
    line-height: 18px;
    border: none;
    border-radius: 0;
    padding: 0;
    text-decoration: underline;
    background: transparent;
  }

  .personal-details-form__container #sendotp-btn {
    right: 12px;
  }

  /* Style the radio input buttons */
  .dealership-form .dealer__list__container .dealer__card .dealer__radio {
    display: none;
  }

  .dealer__card input:checked + .dealership__top__info::before {
    content: '';
    width: 24px;
    height: 24px;
    border: 1px solid var(--dark-color);
    background-color: var(--primary-blue-700);
    transition: all 0.2s ease;
    position: absolute;
    top: 12px;
    transform: translateY(-50%);
  }

  .dealer__radio + .dealership__top__info::before {
    content: '';
    width: 24px;
    height: 24px;
    background-color: var(--secondary-gray-10);
    border: 1px solid var(--dark-color);
    position: absolute;
    left: 0px;
    top: 12px;
    transform: translateY(-50%);
    transition: all 0.2s ease;
  }

  .dealer__radio:checked + .dealership__top__info::before {
    border-color: var(--dark-color);
    background-color: var(--secondary-gray-10);
  }

  .inner-detect-location__box_tab {
    display: block;
    border-bottom: 1px solid var(--light-grey-shade-6);
  }

  .pincode-icon {
    display: none;
  }

  .inner-detect-location__box_tab p {
    margin: 10px 0;
  }

  /* Custom focus style for the radio input when selected */

  /* popupstyle starts */

  .btd-confirmation-popup .btd-popup-content {
    max-width: 800px;
    padding: 1.5rem;
    margin-inline: 20px;
  }

  .btd-confirmation-popup .btd-popup-title {
    color: var(--neutrals-sub-texts-paragraphs, #000);
    font-feature-settings:
      'liga' off,
      'clig' off;
    font-family: Roboto, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    margin-top: 1rem;
    gap: 1rem;

    svg {
      width: 40px;
      height: 40px;
    }
  }

  .btd-confirmation-popup .btd-popup-subtitle-1 {
    color: var(--neutrals-sub-texts-paragraphs, #000);
    font-feature-settings:
      'liga' off,
      'clig' off;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    margin-bottom: 16px;
  }

  .btd-confirmation-popup .btd-popup-subtitle-2 {
    color: var(--neutrals-sub-texts-paragraphs, #000);
    font-feature-settings:
      'liga' off,
      'clig' off;

    /* Text Medium/Regular */
    font-family: Roboto, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    width: 100%;
    margin-bottom: 24px;
    margin-top: 16px;
    /* 125% */
  }

  .btd-confirmation-popup .button-primary-blue {
    padding: 12px 24px;
  }

  .btd-confirmation-popup .section-wrapper {
    display: flex;
    flex-direction: row;
    /* Use Flexbox for layout */
    width: 100%;
    /* Full width of the parent */
  }

  .btd-confirmation-popup .left-section {
    margin-bottom: 66px;
    width: 46.5%;
    padding-right: 0.5rem;
  }

  .btd-confirmation-popup .left-section,
  .btd-confirmation-popup .right-section {
    /* Each section occupies 50% of the width */
    box-sizing: border-box;
    /* Include padding and border in the element's total width */
  }

  .btd-confirmation-popup .right-section {
    display: flex;
    /* Optional: Center the image inside */
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
    margin: auto;
    width: 53.5%;
  }

  .btd-confirmation-popup .popup-car-image img {
    max-width: 100%;
    /* Ensure the image is responsive */
    height: auto;
    /* Maintain aspect ratio */
  }

  .terms_conditions_checkbox {
    display: block;
    color: var(--inactive-content);
    font-family: var(--body-font-arena);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .terms_conditions_checkbox a {
    color: var(--tertiary-black);
    font-weight: 600;
    line-height: normal;
    position: relative;
    z-index: 999;
    display: inline-block;
  }

  .card-calendar .time-slots .time-slot {
    padding: 10px 10px;
    gap: 10px;
  }

  /* popup style ends  */
}

@media (width>=1024px) {
  .stepper-container.arena-book-test-dtive {
    .steper-content-row {
      gap: 24px;
      flex-direction: row;
    }

    .dealership-form .dealer__list__container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding-right: 8px;
      height: 290px;
    }

    .dealership-form .dealer__list__container .dealer__card .dealership__top__info {
      padding-left: 34px;
    }

    .dealership-form .dealership__top__info .dealer__name {
      width: 254px;
      font-size: 16px;
      height: 34px;
    }

    .dealership-form .dealership__top__info .dealer__distance {
      width: 52px;
      min-height: 20px;
    }

    .column-hide-xs {
      display: block;
    }

    .personal-details-form__container {
      #sendotp-btn {
        right: auto;
        margin-left: 12px;
      }

      .form-input.form-field,
      .form-dropdown.form-field {
        width: 50%;
        padding: 0 12px;
      }

      .half-width {
        width: 100%;
        display: flex;
        padding: 0;
        flex: 0 0 50%;
      }

      .form-input.form-input.mobileField {
        padding-right: 12px;
      }
    }

    .content .steper-content-row {
      gap: 24px;
      flex-direction: row;
    }

    .controls {
      justify-content: right;
      gap: 24px;

      .btn-container {
        justify-content: right;
        gap: 16px;
      }
    }

    .terms_conditions_container {
      text-align: left;
      font-size: 0.875rem;
      line-height: 1.25rem;
    }

    .stepper {
      gap: 80px;
    }
  }
  .stepper-container .content {
    padding-top: 40px;
  }

  .book-test-drive-container .form-dropdown-select .dropdown-select,
  .book-test-drive-container input,
  .suggested-places-btd {
    font-size: 0.875rem;
    line-height: 1.125rem;
  }
  .book-test-drive-container .form-dropdown-select .dropdown-select:has(> input) {
    padding-bottom: 0;
    padding-left: 0;
  }
  .card-calendar .date {
    &:hover {
      background-color: var(--secondary-gray-20);
      color: var(--primary-black);
    }
    &.current-day {
        background-color: var(--primary-blue-700);
        color: var(--secondary-gray-10);
        cursor: pointer;
    }
  }

  .btd-confirmation-popup .btd-popup-content {
    margin-inline: 0px;
  }
}

@media (width >=1200px) {
  .book-test-drive-wrapper .bookTestDrive__title {
    h1,
    h3 {
      font-size: 1.5rem;
      line-height: 1.75rem;
    }
  }

  .stepper-container.arena-book-test-dtive {
    .card-calendar {
      flex-direction: row;
      .timeslot-picker .title-block {
        padding: 24px 24px 16px;
      }

      .time-slots .time-slot {
        padding: 10px 24px;
        gap: 16px;
      }
    }
  }
}

.book-test-drive .stepper-container {
  #step4,
  #step3 {
    .steper-content-col {
      .steper-cards {
        padding-right: 0px;
        .book-td-card {
          padding: 24px;
          min-height: 188px;
          flex-shrink: 0;
          &:nth-of-type(1) {
            order: 1;
          }
          &:nth-of-type(2) {
            order: 3;
          }
          &:nth-of-type(3) {
            order: 2;
          }
          &:not(:has(.selected-date-time)) .ctrl-edit-btn {
            position: absolute;
            display: flex;
            align-self: flex-end;
            justify-content: flex-end;
            padding: 0;
            &::after {
              position: static;
            }
          }
          .selected-date {
            margin-top: 4px;
          }
          &:has(.selected-date-time) {
            height: 120px;
            flex-shrink: 0;
            min-height: 120px;
          }
          &:has(.selected-car-image) {
            height: 188px;
            flex-shrink: 0;
            overflow: hidden;
          }
          @media (width >= 1200px) {
            .selected-car-image {
              img {
                max-width: 280px;
                margin: 0 1rem 0 2.5rem;
                aspect-ratio: 16 / 9;
                object-fit: contain;
                display: flex;
              }
            }
          }
        }
      }
      @media (width >= 1024px) {
        .card-calendar {
          min-height: 400px;
        }
      }
    }
  }
  &.dealer-flow {
    #step3 {
      .steper-cards {
        .book-td-card {
          &:nth-of-type(1) {
            order: 2;
          }
          &:nth-of-type(2) {
            order: 1;
          }
        }
      }
    }
    #step4 {
      .steper-cards {
        .book-td-card {
          &:nth-of-type(1) {
            order: 2;
          }
          &:nth-of-type(2) {
            order: 3;
          }
          &:nth-of-type(3) {
            order: 1;
          }
        }
      }
    }
  }
  #step4 {
    .steper-content-row {
      gap: 16px;
    }
    .book-td-card{
      @media (width >=1024px){
        height: calc(100% - 85px);
      }
    }
  }
}