/* ==========================================================================
   auth.css — Authentication: login (and registration) screen.
   Standalone page (full-screen blurred background). No JS dependency on the
   classes; names are kept because the CSS also covers the registration form
   (.register-box, .input-check) which is not displayed yet.
   ========================================================================== */

/* Neutralizes the yellow background of browser autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #ffffff;
  -webkit-background-clip: text;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px rgba(35, 35, 35, 0);
}

body {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100vw;
  height: 100vh;
}

#section-core {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 150;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-left: -175px;
  backdrop-filter: blur(5px) saturate(15%) brightness(35%);

  h2 {
    color: #fff;
    font-size: 2em;
    text-align: center;
  }

  .form-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 450px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    background: transparent;
  }

  .register-box {
    height: 570px;
  }

  .input-check {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0;

    label {
      padding-left: 10px;
      color: #fff;
      font-size: 1em;
    }

    input {
      width: 20px;
      height: 20px;
    }
  }

  .input-box {
    position: relative;
    width: 310px;
    margin: 30px 0;
    border-bottom: 2px solid #fff;

    label {
      position: absolute;
      top: 50%;
      left: 5px;
      transform: translateY(-50%);
      color: #fff;
      font-size: 1em;
      pointer-events: none;
      transition: 0.3s;
    }

    input {
      width: 100%;
      height: 50px;
      padding: 0 35px 0 5px;
      border: none;
      outline: none;
      background: transparent;
      color: #fff;
      font-size: 1em;
    }

    input:focus ~ label,
    input:not(:placeholder-shown) ~ label {
      top: 0px;
      font-size: 0.9em;
    }

    ion-icon {
      position: absolute;
      top: 20px;
      right: 8px;
      color: #fff;
      font-size: 1.2em;
    }
  }

  input[type="submit"] {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 40px;
    outline: none;
    background: #fff;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
  }

  .error,
  .success {
    margin: 0 0 10px 0;
    font-size: 1em;
    font-weight: 600;
    text-align: center;
  }

  .error { color: red; }
  .success { color: rgb(6, 185, 6); }

  .register {
    margin: 20px 0 10px;
    color: #fff;
    font-size: 0.9em;
    text-align: center;

    p a {
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }

    p a:hover {
      text-decoration: underline;
    }
  }

  .forget {
    display: flex;
    justify-content: center;
    margin: -15px 0 15px;
    color: #fff;
    font-size: 0.9em;

    a {
      color: #fff;
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  }
}

@media all and (max-width: 767px) {
  #section-core {
    margin-left: 0;
  }

  div {
    font-size: 15px;
  }

  .form-box {
    max-width: 90%;
  }
}