/* RESET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    height: 100%;
    font-family: "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
  }
  
  /* 
  =============================================
    SINGLE THEME VARIABLES
    Change these to update your color scheme
  =============================================
  */
  :root {
    --bg-start: #7f7fd5;  /* Start color */
    --bg-mid:   #86a8e7;  /* Middle color */
    --bg-end:   #91eae4;  /* End color */
  
    /* Add more if needed, for example:
       --primary-button: #4c9aff;
       --hover-button: #367fd9;
    */
  }
  
  /* BACKGROUND ANIMATION */
  body {
    position: relative;
    background: linear-gradient(120deg, var(--bg-start), var(--bg-mid), var(--bg-end));
    background-size: 300% 300%;
    animation: gradientAnimation 10s ease infinite;
  }
  
  @keyframes gradientAnimation {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* FLOATING CIRCLES */
  .circle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    animation: floatUp 10s infinite ease-in-out;
  }
  
  @keyframes floatUp {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-100px); }
    100% { transform: translateY(0); }
  }
  
  /* LOGIN FORM CONTAINER */
  .login-container {
    position: relative;
    width: 350px;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
  }
  
  .login-container h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
  }
  
  /* FORM ELEMENTS */
  .form-group {
    position: relative;
    margin-bottom: 30px;
  }
  
  .form-group input {
    width: 100%;
    padding: 10px 10px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    border: none;
    border-radius: 4px;
    outline: none;
    transition: box-shadow 0.3s ease;
  }
  
  .form-group input:focus {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  }
  
  .form-group label {
    position: absolute;
    top: 10px;
    left: 12px;
    color: #777;
    font-size: 16px;
    pointer-events: none;
    transition: 0.3s ease all;
  }
  
  .form-group input:focus ~ label,
  .form-group input:not(:placeholder-shown) ~ label {
    top: -14px;
    left: 8px;
    font-size: 12px;
    color: #fff;
    background-color: #4c9aff;
    padding: 2px 5px;
    border-radius: 4px;
  }
  
  /* LOGIN BUTTON */
  .login-button {
    width: 100%;
    background: #4c9aff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 20px;
    cursor: pointer;
    font-size: 16px;
    letter-spacing: 0.5px;
    transition: background 0.3s ease, transform 0.1s ease;
  }
  
  .login-button:hover {
    background: #367fd9;
  }
  
  .login-button:active {
    transform: scale(0.97);
  }
  
  /* ERROR & SUCCESS ANIMATION */
  .shake {
    animation: shakeAnimation 0.3s;
  }
  
  @keyframes shakeAnimation {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-6px); }
    80%  { transform: translateX(6px); }
    100% { transform: translateX(0); }
  }
  
  .success {
    animation: successAnimation 0.5s forwards;
  }
  
  @keyframes successAnimation {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
  }
  
  /* RESPONSIVENESS */
  @media (max-width: 400px) {
    .login-container {
      width: 90%;
      padding: 30px;
    }
  }
  
  .forgot-password-link {
    margin-top: 10px;
    text-align: center;
  }
  
  .forgot-password-link a {
    color: #fff;          /* or your preferred link color */
    text-decoration: none; 
    transition: color 0.3s ease;
  }
  
  .forgot-password-link a:hover {
    color: #ccc;          /* change color on hover */
  }
  
  /* Match general input styling */
.form-group select {
  width: 100%;
  padding: 10px 10px;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  border: none;
  border-radius: 4px;
  outline: none;
  transition: box-shadow 0.3s ease;
}

/* Glow outline on focus (like text inputs) */
.form-group select:focus {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

/* 
  Make the label float when:
  - The user focuses on the select, or 
  - The select is "valid" (i.e., a non-empty value).

  NOTE:
  If this field is truly optional (no 'required' attribute),
  empty values are still considered valid in HTML5. This means
  you may need extra checks in JS to get an exact "floating
  when not empty" behavior. But this basic CSS works well
  for most scenarios (especially if you set a default hidden
  option with value="").
*/
.form-group select:focus ~ label,
.form-group select:valid ~ label {
  top: -14px;
  left: 8px;
  font-size: 12px;
  color: #fff;
  background-color: #4c9aff;
  padding: 2px 5px;
  border-radius: 4px;
}

/* =========== CUSTOM POPUP STYLES =========== */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.popup-container {
  background: #fff;
  padding: 20px 25px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.popup-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}
.popup-message {
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
}
.popup-close-button {
  background-color: #4c9aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}
.popup-close-button:hover {
  background-color: #367fd9;
}

.popup-overlay {
  display: none; /* hidden by default */
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* semi-transparent overlay */
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.popup-container {
  background: #fff;
  padding: 20px 25px;
  border-radius: 8px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.popup-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}
.popup-message {
  font-size: 1rem;
  color: #555;
  margin-bottom: 20px;
}
.popup-close-button {
  background-color: #4c9aff;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.3s;
}
.popup-close-button:hover {
  background-color: #367fd9;
}