@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

  * {
      margin: 0;
      padding: 0;
      font-family: 'poppins', sans-serif;
  }

  section {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      width: 100%;

      background: url("../img/background/background6.jpg")no-repeat;
      background-position: center;
      background-size: cover;
  }

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

  }

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

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

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

  input:focus~label,
  input:valid~label {
      top: -5px;
  }

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

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

  .forget {
      margin: -15px 0 15px;
      font-size: .9em;
      color: #fff;
      display: flex;
      justify-content: space-between;
  }

  .forget label input {
      margin-right: 3px;

  }

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

  .forget label a:hover {
      text-decoration: underline;
  }

  button {
      width: 100%;
      height: 40px;
      border-radius: 40px;
      background: #fff;
      border: none;
      outline: none;
      cursor: pointer;
      font-size: 1em;
      font-weight: 600;
  }

  .register {
      font-size: .9em;
      color: #fff;
      text-align: center;
      margin: 25px 0 10px;
  }

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

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

  /* other css */
  /* Fix autofill background and text color */
  input:-webkit-autofill {
      background-color: transparent !important;
      box-shadow: 0 0 0px 1000px transparent inset !important;
      -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
      color: white !important;
  }


  /* Ensure text color remains white inside autofill */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
      -webkit-text-fill-color: white !important;
      transition: background-color 5000s ease-in-out 0s;
  }

  /* Fix label position when autofill is applied */
  input:-webkit-autofill+label,
  input:focus+label,
  input:not(:placeholder-shown)+label {
      top: -10px;
      left: 5px;
      font-size: 12px;
      color: #fff;
      transition: all 0.3s ease;
  }

  .error-container {
      border-radius: 12px;
      padding: 5px;
      margin-bottom: 22px;
  }

  .message-container {
      color: rgb(225, 73, 73);
  }

  .buttonLogin {
    width: 100%;
    height: 40px;
    border-radius: 40px;
    background: #fff; /* Change background color for better contrast */
    color: black;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    text-align: center; /* Center text inside the button */
    padding: 10px 20px; /* Ensure enough padding for proper text visibility */
}


  /* 🔥 Responsive Fixes */
  @media (max-width: 768px) {
      section {
          align-items: center;
          /* Center form on mobile */
      }

      .form-box {
          width: 90%;
          padding: 15px;
          min-height: auto;
          /* Allow form to resize */
      }

      .inputbox {
          width: 100%;
      }
  }