* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

body:has(section.login-page),
body:has(section.register-page),
body:has(section.lost-password-page),
body:has(section.reset-password-page) {
  background-color: #06131E;
}


/* Login Register Page */
.login-page, .register-page, .lost-password-page, .reset-password-page {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #06131E;
  min-height: 100svh;
  .login-container, .register-container, .lost-password-container, .reset-password-container {
    margin: 0px auto;

    max-width: 1440px;
    width: 90%;
    height: 90%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;

    .login-image, .register-image, .lost-password-image, .reset-password-image {
      flex: 0 0 48%;
      max-width: 690px;
      max-height: 100%;
      border-radius: 12px;
      overflow: hidden;
      img {
        object-fit: cover;
        display: block;
        width: 100%;
        height: 100%;
      }      
    }

    .login-form, .register-form, .lost-password-form, .reset-password-form {
      flex: 0 0 48%;
      margin: 0px auto;
      max-width: 400px;
      width: 100%;
      height: 100%;
      padding: 40px 0px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;

      .login-logo, .register-logo, .lost-password-logo, .reset-password-logo {
        display: block;
        max-width: 100%;
        height: auto;
      }

      .form-holder {
        .form-title {
          margin-bottom: 16px;
          color: #FFF;
          font-family: 'Unbounded', sans-serif;
          font-size: 32px;
          font-style: normal;
          font-weight: 800;
          line-height: normal;
          letter-spacing: 0.64px;
        }
        .form-description {
          color: #A1B1C0;
          font-family: "Red Hat Display", sans-serif;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
          letter-spacing: 0.16px;
        }
        .register-description {
          margin-bottom: 32px;
        }
        .form-input,
        .form-email,
        .form-password {
          padding: 15px 35px 15px 20px;
          margin-top: 40px;
          width: 100%;

          border: 1px solid var(--Grey, #22374A);
          border-radius: 40px;
          background: #142534;

          color: var(--White, #FFF);
          font-family: "Red Hat Display", sans-serif;
          font-size: 14px;
          font-weight: 500;
          transition: .3s ease-in-out;

          &::placeholder {
            color: #22374A;
          }

          &:hover {
            border: 1px solid var(--Green, #18BF7C);
            background: #142534;
            color: #C4D4E3;
          }

          &:focus {
            border: 1px solid #18BF7C;
            background: #06131E;
            outline: none;
            box-shadow: 0 0 0 4px rgba(24, 191, 124, 0.12);
            color: #C4D4E3;
          }

          &:-webkit-autofill,
          &:-webkit-autofill:hover,
          &:-webkit-autofill:focus,
          &:-internal-autofill-selected {
            -webkit-box-shadow: 0 0 0 1000px #142534 inset !important;
            -webkit-text-fill-color: #C4D4E3 !important;
            border: 1.6px solid var(--Green, #18BF7C) !important;
            border-radius: 40px;
            caret-color: #C4D4E3;
            box-shadow: 0 0 0 4px rgba(24, 191, 124, 0.12);
            transition: background-color 9999s ease-in-out 0s,
                        color 9999s ease-in-out 0s !important;
          }
        }

        .password-wrapper {
          display: block;
          position: relative;
          width: 100%;
          .toggle-password {
            position: absolute;
            top: 43px;
            right: 14px;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            svg {
              width: 20px;
              height: 20px;
              fill: #A1B1C0;
            }
            &:hover {
              svg {
                fill: var(--Green, #18BF7C);
              }
            }
          }
        }

        .form-password, .input-register {
          margin-top: 20px;
        }

        .error-message {
          display: block;
          margin-top: 9px;
          color: #F95252;
          font-family: "Red Hat Display", sans-serif;
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }

        .success-message {
          display: block;
          margin-top: 9px;
          color: #18BF7C;
          font-family: "Red Hat Display", sans-serif;
          font-size: 12px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
        }

        .input-error {
          border: 1px solid #F95252 !important;
        }
        
        .error-container {
          padding: 0px 1px;
          display: flex;
          align-items: center;
          gap: 7px;
          margin-top: 6px;

          svg {
            vertical-align: middle;
          }
          .error-message-label {
            display: inline;
            color: #F95252;
            font-family: "Red Hat Display", sans-serif;
            font-size: 12px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          }
        }
        
        .remind-forgot, .accept-terms {
          margin-top: 20px;
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .remember-me-label, .terms-label{
            color: #FFF;
            font-family: "Red Hat Display", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            
            input[type="checkbox"] {
              appearance: none;
              border: 1px solid #18BF7C;
              width: 19px;
              height: 19px;
              background: var(--Background, #06131E);
              margin-bottom: -4px;
              margin-right: 8px;
              border-radius: 4px;
              outline: none;
              position: relative;
              &:checked {
                border: 2px solid #18BF7C;
                background: var(--Green, #18BF7C);
                &::after {
                  content: '';
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  width: 100%;
                  height: 100%;
                  transform: translate(-50%, -35%);
                  background-image: url('./auth-images/checkmark.svg');
                  background-size: contain;
                  background-repeat: no-repeat;            
                }
              }
              &:hover {
                cursor: pointer;
              }
            }
            &:hover {
              cursor: pointer;
            }

          }
          .forgot-password, .terms-link {
            position: relative;
            color: var(--Green, #18BF7C);
            font-family: "Red Hat Display", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            text-decoration: none;
            &::before {
              position: absolute;
              bottom: 0px;
              content: '';
              display: block;
              width: 0%;
              height: 1px;
              background: var(--Green, #18BF7C);
              transition: width 0.3s ease-in-out;
            }
            &:hover {
              &::before {
                width: 100%;
              }
            }
          }
        }

        .accept-terms {
          margin-top: 32px;
        }

        .login-submit, .register-submit, .lost-password-submit, .reset-password-submit {
          margin-top: 32px;
          padding: 14px 20px;
          background: #22AE75;
          width: 100%;
          
          font-family: "Red Hat Display", sans-serif;
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: normal;
          letter-spacing: 0.16px;
          color: #FFF;
          
          text-align: center;
          text-transform: uppercase;
          transition: .3s ease-in-out;
          
          border: none;
          border-radius: 80px;
          border: 1px solid var(--Green, #18BF7C);            

          &:hover {
            background: transparent;
            color: var(--Green, #18BF7C);
            cursor: pointer;
          }
        }

        .divider {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 32px 0px;
          width: 100%;
          opacity: 0.5;

          .divider-line {
            width: 45%;
            height: 1px;
            background: #22374A;
          }
          .divider-text {
            font-family: "Red Hat Display", sans-serif;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            color: #FFF;
            text-align: center;
          }
        } 

        .social-login, .social-register {
          width: 100%;
          .google-login, .google-register {
            display: block;
            padding: 14px 20px;
            background: #142534;
            width: 100%;

            color: #FFF;
            font-family: "Red Hat Display", sans-serif;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;

            text-align: center;
            text-decoration: none;
            transition: .3s ease-in-out;

            border: 1px solid #22374A;
            border-radius: 80px;            

            svg {
              display: inline-block;
              vertical-align: bottom;
              margin-right: 12px;
              width: 19px;
              height: 19px;
            }
            
            &:hover {
              border: 1px solid var(--Green, #18BF7C);
              cursor: pointer;
            }
          }
        }
      }
      .no-account, .yes-account {
        color: var(--White, #FFF);
        font-family: "Red Hat Display", sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        a {
          color: var(--Orange, #F57C36);
        }
      }
    }
  }
  @media (max-width: 1024px) {
    min-height: 100svh;
    height: 100%;
    .login-container, .register-container, .lost-password-container, .reset-password-container {
      height: 100%;

      .login-image, .register-image, .lost-password-image, .reset-password-image {
        display: none;
      }
      .login-form, .register-form, .lost-password-form, .reset-password-form {
        padding: 24px 0px 25%;
        flex: 0 0 100%;
        .form-holder {
          width: 100%;
          .form-title {
            font-size: 28px;
          }
          .form-description {
            font-size: 16px;
          }
        }
      }
    }
  }
}