/* stylelint-disable no-descending-specificity */

.login-wrapper {
  background: var(--gradients-accent-section-bg-3);
  height: 100vh;
}

.login {
  height: 100%;

  div {
    height: 100%;
  }
}

.login-block {
  height: 100%;

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

  div {
    height: auto;
  }

  .login-container {
    height: 100%;

    .form {
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: calc(100% - 40px);
      filter: drop-shadow(5px 9px 10px rgb(0 0 0 / 10%));

      @media (width >= 1024px) {
        width: 955px;
        min-height: 500px;
        height: 500px;
      }

      .form__heading {
        font-size: var(--fs-xlarge);
        line-height: var(--lh-xlarge);
        font-weight: var(--fw-700);
        height: auto;
        margin-bottom: var(--sizing-xs);
        color: var(--neutrals-sub-texts-paragraphs);
        align-items: center;

        @media (width >= 1024px) {
          font-size: var(--fs-xxlarge);
          line-height: var(--lh-xxlarge);
          margin-bottom: var(--sizing-xs);
        }

        .form__back-arrow {
          margin-right: var(--sizing-xs);
          background: transparent;
          border: none;
          outline: none;
          padding: 0;

          &::after {
            cursor: pointer;
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            padding: var(--sizing-xs);
            vertical-align: middle;
            background: center / contain no-repeat url('/genuine-accessories/icons/arrow_back_login.svg');
            margin-top: -4px;

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

      .form__subheading {
        font-size: var(--fs-xsmall);
        line-height: 17px;
        font-weight: var(--fw-400);
        color: var(--neutrals-sub-texts-paragraphs);
        margin-bottom: var(--sizing-m);

        @media (width >= 1024px) {
          font-size: var(--fs-small);
          margin-bottom: var(--sizing-xl);
        }

        .form__edit-icon {
          margin-left: var(--sizing-2xs);
          padding: 0;
          background: transparent;
          border: none;
          outline: none;

          &::after {
            cursor: pointer;
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            vertical-align: middle;
            background: center / contain no-repeat url('/genuine-accessories/icons/edit-black.svg');
          }
        }
      }

      .form__section {
        @media (width >= 1024px) {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          align-items: stretch;
        }

        .form__image {
          width: 99.88%;

          img {
            display: block;
            height: 240px;
            width: 100%;
            object-fit: cover;

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

        .form__wrapper {
          background-color: var(--tertiary-color);

          input[type='text'],
          input[type='tel'],
          input[type='email'],
          input[type='date'] {
            font-size: var(--fs-small);
            line-height: var(--lh-medium);
            font-weight: var(--fw-400);
            background: none;
            width: 100%;
            border-radius: 0;
            border: none;
            border-bottom: 1px solid var(--tertiary-deep-grey);
            padding: 0 0 var(--sizing-xs);
            cursor: pointer;
            color: var(--neutrals-sub-texts-paragraphs);
            border-color: var(--neutrals-unfilled-inactive);

            &::placeholder {
              color: var(--neutrals-unfilled-inactive);
            }

            &:focus {
              outline: none;
              color: var(--neutrals-sub-texts-paragraphs);
            }

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

          input[type='date']::-webkit-datetime-edit {
            color: var(--neutrals-unfilled-inactive);
          }

          input[type='date']:valid::-webkit-datetime-edit {
            color: var(--neutrals-unfilled-inactive);
          }

          input[type='date']::-webkit-calendar-picker-indicator {
            opacity: 0;
            display: block;
            cursor: pointer;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
          }

          .form__input--otp {
            display: flex;
            flex-direction: column;
            gap: var(--sizing-s);

            input[type='text'],
            input[type='tel'] {
              text-align: center;
            }
          }

          .form__close-icon {
            position: absolute;
            top: 16px;
            right: 16px;
            background: transparent;
            border: none;
            cursor: pointer;
            color: var(--tertiary-deep-grey);
            padding: 0;

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

            &::after {
              cursor: pointer;
              content: '';
              display: inline-block;
              width: 16px;
              height: 16px;
              vertical-align: middle;
              background: center / contain no-repeat url('/genuine-accessories/icons/close.svg');

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

          .form__wrapper-inner {
            display: flex;
            flex-direction: column;
            padding: var(--sizing-m) var(--sizing-l);
            height: calc(550px - 240px);

            @media (width >= 1024px) {
              min-height: 500px;
              height: 100%;
              padding: var(--container-margin) var(--spacing-xbig) var(--sizing-xl);
            }

            &.no-height {
              height: auto !important;
            }

            .form__input-grid {
              height: 100%;

              .form__input {
                position: relative;
                display: flex;
                flex-direction: column;

                .form__input-button {
                  outline: none;
                  border: none;
                  cursor: pointer;
                  width: 100%;

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

                  &:focus {
                    outline: none;
                  }
                }

                &.form__input--mobile {
                  height: 100%;
                  justify-content: space-between;
                  flex-direction: column;

                  input[type='text'],
                  input[type='tel'] {
                    &:read-only {
                      color: var(--neutrals-unfilled-inactive);
                      border-bottom-style: dashed;
                      border-color: var(--neutrals-unfilled-inactive);
                    }
                  }

                  &:has(input[type='text']:read-only, input[type='tel']:read-only) {
                    &::after {
                      content: '';
                      position: absolute;
                      right: 0;
                      top: var(--sizing-xs);
                      mask: url('/genuine-accessories/icons/icon_success.svg');
                      background: var(--green-shade-1);
                      font-weight: normal;
                      font-size: var(--fs-xxsmall);
                      width: var(--sizing-m);
                      height: var(--sizing-m);
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      box-sizing: border-box;

                      @media (width >= 1024px) {
                        left: 45%;
                      }
                    }
                  }
                }

                &.form__input--otp {
                  justify-content: unset;

                  .form__inner--otp {
                    display: flex;
                    gap: var(--sizing-2xs);
                  }

                  .form__input-items {
                    .form__input-items--button {
                      width: 100%;
                      display: flex;
                      justify-content: flex-end;

                      .form__input-button--resend {
                        width: 100%;
                        background: transparent;
                        padding: 0;
                        color: var(--primary-color);
                        text-decoration: underline;
                        font-weight: var(--fw-500);
                        margin-top: var(--sizing-2xs);
                        margin-bottom: var(--sizing-xl);
                        text-align: end;

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

                        &:disabled {
                          color: var(--neutrals-unfilled-inactive);
                          text-decoration: none;
                          cursor: not-allowed;
                        }
                      }
                    }
                  }
                }

                &.form__input--disclaimer {
                  margin-top: var(--spacing-xbig);
                  height: fit-content;
                  flex-direction: row;
                }

                .form__button--submit {
                  width: 100%;

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

            .form__foot {
              margin-top: var(--sizing-xl);
              display: flex;
              gap: var(--sizing-xs);
              flex-direction: column;

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

              .form__button--submit {
                width: 100%;

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

            .form__user-details {
              display: flex;
              flex-direction: column;
              gap: var(--sizing-m);
              margin-bottom: var(--sizing-m);

              @media (width >= 1024px) {
                gap: var(--sizing-xl);
                margin-bottom: var(--sizing-xl);
              }
            }
          }
        }

        .form__input.form__input--disclaimer {
          display: flex;
          align-items: flex-start;
          gap: var(--sizing-s);
          margin-bottom: var(--sizing-m);
          font-size: var(--fs-xsmall);
          line-height: var(--lh-16);
          height: fit-content;
          color: var(--tertiary-deep-grey);

          strong {
            font-weight: var(--fw-500);
            color: var(--neutrals-sub-texts-paragraphs);
          }

          a {
            font-weight: var(--fw-500);
            color: var(--neutrals-sub-texts-paragraphs);
            cursor: pointer;
            text-decoration: underline;
          }

          @media (width >= 1024px) {
            gap: var(--sizing-m);
          }

          input[type='checkbox'] {
            margin: 0;
            accent-color: var(--primary-color);
            cursor: pointer;
            min-width: 16px;
            width: 16px;
            height: 16px;

            & + .checkmark {
              background-color: var(--primary-color);
              border-color: var(--primary-color);
            }
          }
        }
      }
    }
  }

  .form__error--login {
    font-size: var(--fs-xsmall);
    font-weight: var(--fw-300);
    color: var(--semantics-text-or-icon-error);
    margin-bottom: var(--sizing-m);
  }

  .form__error {
    color: var(--semantics-text-or-icon-error);
    margin-top: var(--sizing-xs);
    position: absolute;
    top: var(--sizing-xl);
    font-size: var(--fs-xsmall);
    font-weight: var(--fw-300);
  }

  .form__error-highlight {
    background: var(--warning-bg);
    padding: var(--sizing-xs) var(--sizing-s);
    display: block;
    margin-bottom: var(--sizing-s);

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

.subscribe-login {
  .login-wrapper {
    background: unset;
  }
}

.login.subscription-page.hide,
.subscribe-login .login-wrapper.hide {
  display: none;
}

.login.subscription-page {
  .login-block {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--sub-black-50);
    pointer-events: none;
    z-index: 2;

    .login-container {
      pointer-events: none;

      .form {
        pointer-events: none;
        height: 100%;
        width: 100%;
        min-height: unset;

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

        .form__section {
          display: flex;
          flex-direction: column;
          background: var(--white);
          width: 100%;
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          max-width: unset;
          height: 100vh;
          max-height: 100vh;
          overflow-x: hidden;
          overflow-y: auto;
          overscroll-behavior: auto;
          -webkit-overflow-scrolling: touch;
          pointer-events: auto;

          @media (width < 768px) {
            .form__subscription-logo,
            .form__subscription-image-column,
            .form__wrapper,
            .form__foot:not(.hidden) {
              flex-shrink: 0;
            }

            .form__wrapper {
              display: flex;
              flex-direction: column;
            }

            .form__wrapper-inner {
              display: flex;
              flex-direction: column;
            }

            .form__input-grid {
              display: flex;
              flex-direction: column;
            }

            .form__input--mobile {
              display: flex;
              flex-direction: column;

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

              /* step 1: send OTP button wrapper */
              > div {
                flex-shrink: 0;
                padding-top: var(--subscription-font-3-mob);
              }
            }

            .form__foot:not(.hidden) {
              padding-top: var(--subscription-font-3-mob);
            }

            .form__button,
            .form__input-button {
              width: 100%;
            }
          }

          @media (width >= 768px) {
            width: 498px;
            height: auto;
            max-height: calc(100vh - var(--space-40px));
            margin: 0 auto;
            position: relative;
            border-radius: 15px;
            padding: var(--space-25px) var(--space-50px) var(--space-50px) var(--space-50px);
          }

          .form__input.form__input--disclaimer {
            input[type='checkbox'] {
              display: none;
            }
            p {
              font-size: var(--subscription-font-5-desc);
              font-weight: var(--fw-400);
              line-height: var(--subscription-lh-3-desc-display);
            }
          }

          .form__wrapper {
            .form__close-icon {
              top: var(--subscription-font-5-desc);
              right: var(--subscription-font-5-desc);
            }

            .form__wrapper-inner {
              .form__input-grid {

                .form__input--mobile {
                  .form__inner--input {
                    font-size: var(--subscription-font-h6);
                    padding: 12px 0;
                    border-bottom: 1px solid var(--footeremail-color);

                    &.form__inner--input--with-change {
                      input[type='tel'] {
                        border-bottom: unset;
                      }
                    }
                  }
                  .form__error {
                    font-size: var(--subscription-font-3-desc);
                    margin-top: 12px;
                  }
                }

                .form__input--otp {
                  .form__inner--otp {
                    gap: var(--space-20px);

                    input[type='tel'] {
                      background: var(--light-gray-alpha);
                      height: 44px;
                      margin: 0;
                    }
                  }
                }

                .form__user-details {
                  .form__input {
                    border-bottom: 1px solid var(--footeremail-color);
                    font-size: var(--subscription-font-h6);
                    padding: 12px 0;
                    margin-bottom: var(--space-20px);
                  }
                }
              }
            }
          }

          .form__subscription-logo {
            padding: var(--subscription-font-3-mob);
            border-bottom: var(--border-light) solid 1px;

            img {
              display: block;
              width: 168px;
              height: auto;
            }

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

          .form__subscription-image-column {
            padding: var(--subscription-font-3-mob);

            @media (width >= 768px) {
              padding: 0;
            }
            
            .form__subscription-headings {
              display: flex;
              flex-direction: row-reverse;
              justify-content: flex-end;
              align-items: center;

              .form__subscription-heading--customer {
                p {
                  font-size: var(--fs-22);
                  font-weight: var(--fw-700);
                  line-height: normal;
                  color: var(--sub-dark-gray);
                }
              }

              .form__subscription-heading--dealer {
                margin-left: auto;
                cursor: pointer;
                
                p {
                  font-size: var(--subscription-font-3-mob);
                  font-weight: var(--fw-700);
                  line-height: normal;
                  color: var(--color-dark-blue);
                }
              }
            }

            .form__image {
              margin-top: var(--space-30px);
              margin-bottom: var(--space-25px);

              img {
                width: 198px;
                height: auto;
                margin: 0 auto;
              }
            }
          }

          .form__wrapper {
            padding: var(--subscription-font-3-mob);

            @media (width >= 768px) {
              padding: 0;
            }
          }

          .form__wrapper-inner {
            padding: 0;
            height: auto;
            min-height: unset;

            .form__input-grid {
              height: auto;

              .form__input--mobile {
                height: auto;

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

                  @media (width < 768px) {
                    margin-bottom: 0;
                  }

                  &.form__inner--input--with-change {
                    position: relative;

                    input {
                      padding-right: var(--space-70px);
                    }

                    .form__mobile-change {
                      position: absolute;
                      right: 0;
                      top: 50%;
                      transform: translateY(-50%);
                      background: transparent;
                      border: 0;
                      padding: 0;
                      cursor: pointer;
                      font-size: var(--subscription-font-3-mob);
                      font-weight: var(--fw-700);
                      line-height: normal;
                      color: var(--color-dark-blue);
                    }
                  }
                }
              }

              .form__code-sent-notice {
                p {
                  font-size: var(--subscription-font-5-desc);
                  line-height: normal;
                  text-align: center;
                }
              }
            }

            .form__foot .form__button,
            .form__input .form__input-button {
              height: 45px;
              border-radius: 5px;
              background-color: var(--sub-brand-yellow);
              color: var(--sub-dark-gray);
              text-transform: uppercase;
              font-weight: var(--fw-700);
              border: unset;

              &:disabled {
                color: var(--white);
                background: var(--gray-200);
              }
            }

            @media (width >= 768px) {
              .form__foot .form__button,
              .form__input .form__input-button {
                width: 100%;
                min-width: unset;
              }
            }

            @media (width >= 1024px) {
              .form__foot .form__button,
              .form__input .form__input-button {
                width: 100%;
                min-width: unset;
                border: 0;
              }
            }
          }
        }
      }
    }
  }
}

.login-page {
  main {
    margin-top: unset !important;
  }
}

.subscribe-myaccount {
  .login.subscription-page {
    height: auto;

    div {
      height: auto;
    }

    .login-block {
      position: unset;
      background: unset;
      width: 100%;
      height: auto;
      pointer-events: auto;

      .login-container {
        height: auto;

        .form {
          height: auto;
          top: 0;
          left: 0;
          position: relative;
          transform: unset;
          filter: unset;

          .form__section {
            width: 100%;
            max-width: unset;
            max-height: unset;
            border-radius: 0;
            padding: var(--space-20px);
            position: static;
            height: auto;
            overflow: visible;
            overscroll-behavior: auto;
            
            @media (width >= 991px) {
              min-height: 500px;
            }

            .form__subscription-logo {
              display: none;
            }

            .form__subscription-image-column {
              padding: 0;

              .form__subscription-headings {
                border-bottom: var(--gray-200) solid 1px;
                padding-bottom: 5px;
                margin-bottom: var(--space-40px);

                .form__subscription-heading--customer {
                  p {
                    margin: 0;
                    color: var(--color-grey);
                    font-size: var(--subscription-font-h5);
                    font-weight: var(--fw-500);
                  }
                }

                .form__subscription-heading--dealer {
                  p {
                    margin: 0;
                    font-size: var(--subscription-font-3-desc);
                    color: var(--color-dark-blue);
                  }
                }
              }

              .form__image {
                width: 100%;
                padding-inline: var(--space-30px);

                img {
                  width: 60%;
                }

                @media (width >= 991px) {
                  position: absolute;
                  top: 50%;
                  right: var(--space-20px);
                  transform: translateY(-50%);
                  width: 50%;

                  img {
                    width: 100%;
                  }
                }
              }
            }

            .form__wrapper {
              width: 100%;
              padding-top: var(--space-25px);
              
              @media (width >= 991px) {
                width: 50%;
                padding-inline: var(--space-30px);
              }

              .form__wrapper-inner {

                .form__user-details {
                  margin-bottom: var(--space-20px);
                  .form__input {
                    border: unset;
                    padding: 0;
  
                    input {
                      font-size: var(--subscription-font-h6);
                      text-transform: unset;
                      height: 45px;
                      margin-bottom: var(--space-20px);
                      border-bottom: 1px solid var(--footeremail-color);
                    }
                  }
                }

                .form__input-grid {
                  .form__inner--input {
                    margin-bottom: var(--space-35px);
                    padding: 0;
                    border: unset;
                    
                    .form__error {
                      font-size: var(--subscription-font-3-desc);
                    }
                    input {
                      width: 100%;
                      border: 0;
                      border-bottom: var(--gray-extra-light) solid 1px;
                      border-radius: 4px;
                      padding: var(--subscription-font-5-desc) 0;
                      color: var(--gray-medium-400);
                      font-size: var(--subscription-lh-10-desc-display);
                      line-height: normal;
                      font-weight: var(--fw-500);
                    }
    
                    &.form__inner--input--with-change {
                      input {
                        border-bottom-style: inherit;
                        border-radius: 0;
                      }
                    }
                  }
                }

              }

              .form__inner--otp {
                input {
                  border-bottom: var(--gray-extra-light) solid 1px;
                  border-radius: 4px;
                  padding: var(--subscription-font-5-desc) 0;
                  margin: 0 var(--space-20px);
                }
              }

              .form__button,
              .form__input-button {
                height: 45px;
                border-radius: 5px;
                background-color: var(--sub-brand-yellow);
                color: var(--sub-dark-gray);
                text-transform: uppercase;
                font-weight: var(--fw-700);
                border: 0;

                &:disabled {
                  color: var(--white);
                  background: var(--gray-200);
                }
              }

              .form__close-icon {
                display: none;
              }
            }

            .form__foot {
              .form__input--disclaimer {
                input {
                  margin-top: 5px;
                  margin-right: var(--space-20px);
                }
              }
            }
          }
        }
      }
    }
  }
}