/* Login container */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100dvh;
  background-image: url('../assets/login-desktop.jpg'); /* Background image */
  background-size: cover;
  background-position: center;
  padding: 20px;
}

/* New wrapper with white background */
.login-wrapper {
  background-color: white;
  padding: 40px 0;
  border-radius: 5px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  max-width: 900px;
  min-height: 600px;
}

.login-wrapper.onboarding.phone-verification,
.login-wrapper.password-reset {
  min-height: 450px;
  max-width: 800px;
  min-width: 650px;

  @media (max-width: 768px) {
    min-width: 100%;
  }

  .sms-step {
    max-width: 370px;

    @media (max-width: 768px) {
      max-width: 300px;
    }
  }
}

.login-wrapper.onboarding {
  min-height: 450px;
  max-width: 800px;

  .icon-cmd {
    background-image: url('../assets/icons/cmd.svg');
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
  }

  .actions {
    input {
      min-width: 80px;
    }
  }
}

.login-wrapper .desktop-social-login {
  width: 70%;
}

.login-wrapper .mobile-social-login a,
.login-wrapper .desktop-social-login a {
  border-color: #ccc !important;

  &:hover {
    background: #ccc !important;
  }
}

.login-logo img {
  width: 110px;
  display: block;
  margin: 0 auto;
}

/* Left section */
.login-left {
  flex: 1;
  padding: 0 40px;
  margin: 40px 0;
  border-right: 1px solid #eaeaea;
}

.login-box h2 {
  font-family: 'Quicksand CUF', sans-serif;
  font-size: 28px;
}

.mycuf-login-form .form-item-pass {
  margin-bottom: 0;
}

.mycuf-login-form .mycuf-forgot-password-link {
  font-size: 14px;
}

/* Form inputs and buttons */
input.form-control {
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Remove error styling (red borders) from form fields */
.mycuf-login-form .form-item.error input,
.mycuf-login-form .form-item.error input.error,
.mycuf-login-form input.error {
  border-color: #ccc !important;
}

/* Right section */
.login-right {
  flex: 1;
  padding: 40px;
}

.login-right p {
  font-family: 'Helvetica', sans-serif;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .login-container {
    background-position: right;
  }
}

@media (max-width: 500px) {
  .login-container {
    background-image: url('../assets/login-mobile.jpg'); /* Background image */
    background-position: center;
  }
}

.mycuf-register-form-wrapper {
  .form-item {
    margin: 0;
  }

  .form-type-password {
    margin-bottom: 1rem;
  }

  .form-type-email,
  .form-type-password {
    label {
      font-size: 18px;
    }
  }

  .password-confirm-message,
  .password-strength {
    color: #00a2ce;
    width: 100%;

    span {
      color: #20394a;
    }
  }

  .password-suggestions {
    background: #F2F9FA;
    border: 1px solid #d6eef4;
    border-radius: 5px;
    padding: 5px 10px;
    color: #00a2ce;

    ul {
      padding-left: 1rem;
      margin-top: 0.5rem;

      li {
        color: #20394a;
      }
    }
  }
}

.mycuf-user-onboarding-form {
  .login-box {
    width: fit-content;
    border-radius: 4px;
  }

  .form-item {
    text-align: start;
    margin: 0;
  }

  .form-item-addressline {
    margin-top: 0;
  }

  .form-item-phone {
    @media (max-width: 768px) { /* md breakpoint */
      margin-top: 0;
    }
  }

  .form-wrapper {
    @media (max-width: 768px) {
      input {
        margin: 0;
      }
    }

    .btn-yes {
      input {
        background-image: url("../assets/icons/autenticacao_gov.png");
        background-size: calc(100% - 35px) calc(100% - 14px);
        background-position: center;
        background-color: #00A2CE;
        background-repeat: no-repeat;
        color: transparent;
      }
    }

    .btn-no {
      input:hover {
        color: white;
      }
    }
  }

  .form-item-birthdate,
  .form-item-gender,
  .form-item-phone,
  .form-item-doc-type,
  .form-item-doc-number {
    width: 100%;
  }

  .form-item-birthdate,
  .form-item-citizencardvaliditydate {
    input {
      font-family: 'Quicksand CUF', sans-serif;
    }
  }

  .form-item-doc-type select {
    font-family: 'Quicksand CUF', sans-serif;
  }

  select.form-control {
    border-radius: 4px;
    border: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .select2-container--default {
    padding-top: 2px;
    padding-bottom: 2px;
    border-radius: 4px;
    border: 1px solid #ccc;

    .select2-selection--single {
      border: none;

      .select2-selection__arrow {
        top: 10px;
      }
    }
  }

  .select2-container--default.select2-container--open {
    border-bottom: none;
    border-radius: 4px 4px 0 0;
  }

  .identification-form {
    h2, p {
      @media (max-width: 768px) {
        padding: 0 28px;
      }
    }

    @media (max-width: 768px) {
      .form-item {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
      }
    }
  }

  .form-item-code {
    width: 60%;

    @media (max-width: 768px) {
      width: 100%;
    }

    input {
      letter-spacing: 10px;
      font-size: 28px;
    }

    input::placeholder {
      letter-spacing: normal;
      font-size: 16px;
    }
  }

  .form-type-checkbox {
    input.form-check-input {
      margin-top: 0;
    }
  }
}

.mycuf-password-reset-form {
  select.form-control {
    border-radius: 4px;
    border: 1px solid #ccc;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .form-item {
    margin: 0;
  }

  .form-type-password {
    margin-bottom: 1rem;
  }
}