@import url('../../../commons/blocks/services/book-service-appointment-login/book-service-appointment-login.css');

.book-service-appointment-login {
 
  .bsa-login-block {
    background-color: var(--secondary-gray-40);
    margin-top: 0;
    padding: 39px 0 0 0;
    scroll-margin-top: 60px;
    @media (width>=768px) {
      scroll-margin-top: 30px;
    }
  
    @media (width>=1024px) {
      padding: 80px 0 0 0;
      scroll-margin-top: 0;
    }

    .g-container {
      padding: 0 1.25rem 1.25rem;
      padding-bottom: 2.5rem;

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

    .form__input-grid {
      @media (width>=1024px) {
        margin-bottom: 2rem;
      }
    }

    .form__input--captcha,
    & .form__input--mobile {
      &:has(input[type='text']:read-only, input[type='tel']:read-only) {
        &::after {
          display: none;

          @media (width >=1024px) {
            display: block;
            mask: unset;
            background-image: url(/icons/checkbox_white.svg);
            transform: scale(0.8333);
          }
        }
      }
    }

    .heading-section {
      @media (width >=1024px) {
        display: block;
        margin-bottom: 1rem;
      }
    }

    .car-list__items {
      min-height: 86px;
    }

    .heading-section__title {

      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p {
        font-size: var(--heading-font-15-mob-sub-heading);
        line-height: normal;
        color: var(--secondary-black);
        margin: 0 0 1rem 0;

        @media (width >=1024px) {
          font-size: var(--heading-font-1-des);
          line-height: var(--heading-lh-16-des-display);
          margin-bottom: 0.5rem;
        }
      }
    }

    .heading-section__description {
      font-size: var(--heading-font-11-mob-text-small);
      line-height: normal;
      color: var(--primary-black);
      font-style: normal;
      margin-bottom: 0;

      @media (width >=1024px) {
        font-size: var(--heading-font-0-desc);
        line-height: var(--heading-lh-19-mob-display);
      }
    }

    .clip__path-inner {
      display: none;
    }

    .form__section {
      @media (width<1024px) {
        display: flex;
        flex-direction: column;
      }

      @media (width >=1024px) {
        column-gap: 1.5rem;
      }

      .form__image {
        order: 2;
        width: auto;

        img {
          width: 100%;

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

      .form__wrapper {
        padding-bottom: 2rem;
      }

      .form__wrapper-inner {
        padding: 0;

        .form__inner--input {
          margin-bottom: 0;
        }

        input[type='text'],
        input[type='tel'] {
          padding: var(--space-4px) 0 var(--space-4px);
          border-bottom: 0.5px solid var(--light-grey-shade-6);
          font-size: var(--heading-font-18-mob-text);
          font-weight: var(--fw-400);

          @media (width>=1024px) {
            font-size: var(--body-font-size-xs);
          }
        }

        input[type='tel'] {
          padding: var(--space-8px) 0 var(--space-8px);
          font-weight: var(--fw-500);
          border-bottom: 0.5px solid var(--light-grey-shade-6);

          @media (width>=1024px) {
            border-bottom: 0.5px solid transparent;
            border-image: repeating-linear-gradient(to right, var(--inactive-content) 0 5px, transparent 5px 10px) 1;
          }
        }

        .form__input--otp {
          & .form__inner--otp {
            input[type='tel'] {
              border-bottom: 0.5px solid var(--primary-toast-arena-green);
              border-image: none;
            }
          }
        }

        input[type='text']::placeholder,
        input[type='tel']::placeholder {
          color: var(--inactive-content);
          font-size: var(--body-font-size-xxs);
          font-weight: var(--fw-400);

          @media (width>=1024px) {
            font-size: var(--body-font-size-xs);
          }
        }

        .form__input--disclaimer {
          p {
            color: var(--tertiary-black);
          }
        }

        .form__input {
          margin-bottom: 1rem;

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

        &:has(.form__input-button--otp) {
          .form__input {
            margin-bottom: 1rem;
            display: flex;
            flex-direction: column;
            position: relative;

            @media (width>1024px) {
              margin-bottom: 1.875rem;
            }
          }

          .form__input--disclaimer {
            margin-bottom: 16px;

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

        .form__input--mobile:not(:has(.form__input-button--otp)) {
          margin-bottom: 0;

          .form__inner--input {
            &:has(input[type='text']:read-only, input[type='tel']:read-only) {
              width: 100%;

              font-weight: var(--fw-400);

              input[type='text'],
              input[type='tel'] {
                border-bottom-style: dashed;

                @media (width >=1024px) {
                  position: relative;
                }
              }

              &::after {
                all: unset;
                content: '';
                position: absolute;
                right: 0;
                bottom: 0.5rem;
                width: 1rem;
                height: 1rem;
                background: center / contain no-repeat url(/icons/poc/check-fill.svg);
              }
            }

            .form__input-items {
              display: none;
            }
          }
        }

        .form__input--mobile:has(> .form__input--otp) {
          @media (width >=1024px) {
            @media (min-width: 1024px) {
              &:has(> .form__input.form__input--otp) {
                flex-direction: column;
                width: 100%;
              }
            }
          }

          .form__inner--input {
            width: 100%;
          }

          .form__error {
            position: absolute;
            top: 100%;
            left: 0;
          }

          .form__error--login {
            color: var(--primary-red);
            font-size: var(--body-font-size-xxs);
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-19-mob-text-small);
            margin-bottom: 1.5rem;
          }
        }

        .form__input--mobile:has(.form__input-button--otp) {
          display: grid;
          grid-template-columns: 1fr auto;
          align-items: end;
          margin-bottom: 1.5rem;

          @media (width >=1024px) {
            display: grid;
            grid-column: span 2;
          }

          .form__inner--input {
            input {
              margin-bottom: var(--space-2px);
            }
          }

          .form__input-items {
            width: 152px;

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

          .form__input-button--otp {
            width: 100%;
            border: 1px solid var(--primary-main);
            padding: 0.75rem 1.5rem;
            margin: 0;
            font-size: var(--body-font-size-xxs);
            line-height: var(--heading-lh-4--mob-text-medium);
            color: var(--primary-main);

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

            &:disabled {
              border: 1px solid var(--inactive-content);
              color: var(--inactive-content);
            }
          }
        }

        .form__input.form__input--disclaimer {
          margin: 16px 0;
          @media (width>=1024px) {
            margin-top: 0;
          }

          p:first-child {
            color: var(--tertiary-black);
            font-feature-settings:
              'liga' off,
              'clig' off;
            font-size: var(--body-font-size-xxxs);
            font-style: normal;
            font-weight: var(--fw-300);
            line-height: var(--heading-lh-20-mob-text-small);
            margin-bottom: 8px;

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

            margin-bottom: 4px;
          }

          p:last-child {
            color: var(--tertiary-deep-Grey);
            font-feature-settings:
              'liga' off,
              'clig' off;
            font-size: var(--body-font-size-xxxs);
            font-style: normal;
            font-weight: var(--fw-300);
            line-height: normal;

            @media (width >=1024px) {
              line-height: var(--heading-lh-11-des-text-small);
            }

            u {
              color: var(--tertiary-black);
              text-decoration-line: underline;
              text-decoration-style: solid;
              text-decoration-skip-ink: none;
              text-decoration-thickness: auto;
              text-underline-offset: auto;
              text-underline-position: from-font;
            }
          }
        }

        .form__input--disclaimer {
          p {
            margin: 0;
            color: var(--primary-main);
            font-size: var(--body-font-size-xxxxs);
            font-style: normal;
            font-weight: var(--fw-400);
            line-height: var(--heading-lh-21-mob-text-small);

            @media (width >=1024px) {
              color: var(--tertiary-black);
              line-height: var(--heading-lh-6-des);
            }
          }

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

          .form__input p:first-child {
            color: var(--primary-black);
            margin-bottom: var(--space-8px);

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

          p:last-child {
            color: var(--primary-main);

            @media (width >=1024px) {
              line-height: var(--heading-lh-6-des);
            }
          }

          a {
            font-size: var(--heading-font-11-mob-text-small);
            font-weight: var(--fw-300);
            color: var(--primary-black);
            line-height: normal;
            text-decoration-line: underline;

            @media (width >=1024px) {
              line-height: var(--heading-lh-11-des-text-small);
            }
          }

          strong {
            font-weight: var(--fw-700);
            line-height: var(--heading-lh-20-mob-display);
            color: var(--primary-black);
          }
        }

        .form__input--otp {
          margin: var(--space-24px) 0;
          gap: 0;

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

          .form__inner--otp {
            display: flex;
            gap: 0.25rem;

            input {
              color: var(--primary-toast-arena-green);
              border-bottom: 1px solid var(--primary-toast-arena-green);
            }
          }
        }

        .form__input-button--resend {
          &:disabled {
            color: var(--inactive-content);
          }

          position: absolute;
          right: 0;
          margin: 0;
          padding: 0;
          bottom: -2rem;
          text-decoration: underline;
          color: var(--primary-blue-700);

          @media (width>=1024px) {
            width: max-content;
            left: 5rem;
            bottom: 0;
          }
        }

        .form__button--submit {
          width: fit-content;
          padding: 0.5rem 1rem;
          line-height: var(--heading-lh-4--mob-text-medium);
          background-color: var(--primary-blue-700);

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

          &:disabled {
            background-color: var(--bars-unselected);
            color: var(--inactive-content);
          }
        }

        .dropdown {
          margin: 1.5rem 0 1rem 0;

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

          .car-list {
            background: var(--gradients-accent-section-bg-1);
            max-width: none;
            width: inherit;

            .car-list__icon {
              display: flex;

              .car-list__img-icon {
                width: 1.5rem;
                height: 1.5rem;
              }
            }
          }

          .dropdown-items {
            max-width: none;
            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.12);
            top: 4.75rem;

            .dropdown-label {
              display: none;
              color: var(--tertiary-black);
              font-family: var(--body-font-arena);
              font-size: var(--body-font-size-xxs);
              font-style: normal;
              font-weight: var(--fw-700);
              line-height: var(--heading-lh-8-mob-display);
              margin-bottom: var(--space-4px);
              padding-left: var(--space-16px);

              @media (width>=1024px) {
                font-size: var(--body-font-size-xs);
                margin-bottom: var(--space-24px);
              }
            }

            .car-list__items {
              padding: 16px;
              padding-bottom: 14px;

              @media (width>=1024px) {
                padding: 24px 20px 16px 24px;
              }

              .car-list__text {
                .car-list__reg-label {
                  color: var(--inactive-content);
                  font-size: var(--body-font-size-xxxxs);
                  font-weight: var(--fw-500);
                  line-height: var(--heading-lh-19-mob-display);
                  text-transform: uppercase;
                  margin-bottom: 4px;
                }

                .car-list__reg-number {
                  color: var(--primary-main);
                  font-size: var(--body-font-size-xs);
                  font-style: normal;
                  font-weight: var(--fw-500);
                  line-height: var(--heading-lh-19-mob-display);

                  @media (width>=1024px) {
                    font-size: var(--body-font-size-s);
                    font-weight: var(--fw-700);
                    line-height: var(--heading-lh-21-des-text-small);
                  }
                }
              }
            }

            .car__list-items--date {
              line-height: 0;
            }

            .dropdown-items {
              .car__list-date--label {
                color: var(--secondary-main);
                text-align: center;
                font-size: var(--body-font-size-xxxxs);
                font-style: normal;
                font-weight: var(--fw-500);
                line-height: var(--heading-lh-19-mob-display);
                text-transform: uppercase;
              }
            }

            .car__list-items--car {
              margin-bottom: 0;
            }

            .car-list__items-selected {
              min-height: 86px;
            }

            .car-list__items:last-child {
              margin: 0;
            }
          }

          .car-list__items-selected {
            background: none;

            .car-list__img {
              order: 2;
              height: 54px;
            }

            .car-list__icon {
              order: 3;
            }
          }

          .hidden {
            display: none;
          }

          .car-list__items {
            padding: 1rem 0.75rem;
            max-width: none;

            .car-list__img-car {
              height: 3.5rem;

              img {
                height: 54px;
              }
            }

            .car-list__text {
              .car-list__reg-label {
                color: var(--tertiary-black);
                font-size: var(--body-font-size-xxxs);
                font-weight: var(--fw-300);
                line-height: var(--heading-lh-21-mob-text-small);
                margin-bottom: 12px;
              }

              .car-list__reg-number {
                text-align: left;
                font-size: var(--body-font-size-xs);
                font-weight: var(--fw-700);
                line-height: var(--heading-lh-19-mob-display);
              }
            }
          }

          .car-list__items:has(input[type='radio']:checked) {
            background-color: var(--secondary-gray-20);
          }

          .car-list__radio {
            align-items: start;

            input[type='radio'] {
              border: 0.667px solid var(--bars-unselected);
              border-radius: 0;

              &:checked::before {
                background-color: var(--primary-blue-700);
                border-radius: 0;
              }
            }
          }

          .car-list__radio--centered {
            align-items: center;
            height: 40px;

            .car-list__text {
              line-height: 0;
            }

            input[type='checkbox']:disabled {
              margin-bottom: 8px;
            }
          }
        }
      }
    }

    .car-list__items-selected--text {
      color: var(--tertiary-black);
      font-size: var(--body-font-size-xs);
      font-style: normal;
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-19-mob-display);
    }

    .form__input--radio-label.checked {
      font-weight: var(--fw-500);
    }

    .form__input--radio-label {
      gap: 8px;
    }

    .form__input--radio-container {
      gap: 12px;
    }

    .car-list__text--large {
      color: var(--tertiary-black);
      font-size: var(--body-font-size-xs);
      font-style: normal;
      font-weight: var(--fw-700);
      line-height: var(--heading-lh-19-mob-display);
    }

    .form__tooltip {
      margin-left: 0;

      svg {
        height: 12.7px;
        width: 12.7px;
        margin-top: 4px;

        @media (min-width: 1024px) {
          height: 16px;
          width: 16px;
          margin-top: 2px;
        }
      }

      .form__tooltip-text {
        color: var(--secondary-gray-10);
        font-size: var(--body-font-size-xxxs);
        font-weight: var(--fw-300);
        line-height: var(--heading-lh-21-mob-text-small);
        color: var(--secondary-gray-10);
        background: var(--primary-blue-700);
        padding-top: 12px;
        padding-right: 8px;
        margin-bottom: -4px;
        margin-left: -4px;
        width: 210px;

        @media (min-width: 1024px) {
          margin-left: -3px;
        }
      }

      .form__tooltip-arrow {
        border-left: 11px solid transparent;
        border-right: 11px solid transparent;
        border-top: 14px solid var(--primary-blue-700);
        margin-bottom: -2px;
      }
    }

    .form__input-items {
      margin-top: 0;
      position: unset;
    }

    .car-list__img-icon {
      height: 24px;
      width: 24px;
    }

    .dropdown-items::-webkit-scrollbar {
      display: none;
    }

    .car__list-date--past {
      color: var(--primary-main);
      text-align: center;
      font-size: var(--body-font-size-xxxs);
      font-style: normal;
      font-weight: var(--fw-600);
      line-height: var(--heading-lh-19-mob-display);
    }

    .car-list__radio {
      input[type='checkbox'] {
        width: 12px;
        height: 12px;
        margin-right: 12px;

        @media (min-width: 1024px) {
          width: 16px;
          height: 16px;
        }
      }
    }

    .form__input--radio {
      input[type='radio'] {
        height: 12px;
        width: 12px;
      }
    }

    .car-list__button {
      width: 100%;

      @media (min-width: 1024px) {
        width: auto;
      }

      a {
        display: block;
        width: 100%;
        padding: 0.5rem 1rem;
        background: var(--primary-blue-700);
        color: var(--secondary-gray-20);
        text-align: center;
        font-size: var(--body-font-size-xxs);
        font-weight: var(--fw-400);
        line-height: var(--heading-lh-19-mob-display);
        transition: all 0.4s;

        &:hover {
          background: var(--primary-blue-900);
        }

        @media (min-width: 1024px) {
          display: inline-block;
          min-width: 144px;
        }
      }
    }

    .form__inner--input,
    .form__inner--button {
      align-self: flex-start;
    }

    .form__wrapper {
      .custom-select {
        .custom-select__selected {
          padding: var(--space-4px) 0 var(--space-4px);
          border-bottom: 0.5px solid var(--light-grey-shade-6);
          font-size: var(--body-font-size-xxs);
          font-weight: var(--fw-400);
          line-height: var(--heading-lh-19-mob-display);

          @media (width>=1024px) {
            font-size: var(--body-font-size-xs);
          }
        }
      }
    }

    .found_car-list {
      overflow: hidden;
    }

    .owner_value {
      font-size: var(--heading-font-18-mob-text);
      line-height: var(--heading-lh-19-mob-display);
    }

    .found_car {
      margin-bottom: 16px;
    }

    .bsa-car-select-stack {
      margin-bottom: 0;
    }

    .form__input-button--verify {
      border: 1px solid var(--primary-blue-700);
      color: var(--primary-blue-700);
      padding: 8px 12px;
      cursor: pointer;
      font-size: var(--body-font-size-xxs);
      line-height: var(--heading-lh-19-mob-display);
      font-weight: var(--fw-500);

      &:hover&:not(:disabled) {
        background-color: var(--tertiary-light-grey);
        transition: all 0.2s linear;
      }

      &:disabled {
        border-color: var(--primary-blue-100);
        color: var(--primary-blue-100);
        cursor: default;
      }
    }
  }

  .preact-modal {
    dialog {
      @media (width >=1024px) {
        max-width: 1366px;
      }

      .close-button {
        color: var(--primary-main);
      }

      .bsa-login-block {
        .g-container {
          padding-bottom: 20px;

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

          .heading-section {
            display: block;
          }

          .form {
            .form__section {
              @media (width >=1024px) {
                justify-content: space-between;
                gap: 56px;
              }

              .form__image {
                .modal-heading {
                  display: none;
                }

                &.gradient-overlay::after {
                  display: none;
                }
              }

              .form__wrapper {
                .form__wrapper-inner {
                  @media (width >=1024px) {
                    gap: 40px;
                    justify-content: flex-start;
                    height: auto;
                  }

                  .form__input--mobile:has(.form__input-button--otp) {
                    display: flex;
                    flex-direction: row;
                    gap: 16px;

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

                    .form__inner--input,
                    .form__inner--button {
                      width: calc(50% - 8px);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}