/* LOGIN PAGE CSS */

/* General Page Setup */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
  
    /* Background Image */
    background: #222 url("./blbg.jpg") no-repeat center;
    color: #fff;
    background-size: 100% 100%;
    position: relative;
  }
  
  
  
  /* Wrapper Glassmorphism Effect */
  .wrapper {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    padding: 40px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    z-index: 1; /* keep above overlay */
  }
  
  
  /* Logo */
  .logo {
    display: block;
    margin: 0 auto 20px;
  }
  
  /* Input Fields */
  .input-field {
    position: relative;
    margin: 20px 0;
}

.input-field input {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1rem;
}

.input-field label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* center horizontally & vertically */
    font-size: 0.9rem;
    color: #ddd;
    pointer-events: none;
    transition: 0.3s ease;
}

/* Floating effect on focus or when input has value */
.input-field input:focus + label,
.input-field input:valid + label {
    top: -30px;
    left: 12px;           /* move back to left on float */
    transform: translateY(0); /* reset horizontal centering */
    font-size: 0.75rem;
    color: #fff;
}

  
  /* Button */
  .btn-primary {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-weight: 500;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    transition: 0.3s;
  }
  
  .btn-primary:hover {
    background: rgba(255, 255, 255, 0.4);
    color: #000;
  }
  
  /* Title */
  .font {
    margin-bottom: 1rem;
    font-weight: 500;
    color: #fff;
  }
  
  /* Footer */
  footer {
    position: absolute;
    bottom: 10px;
    text-align: center;
    font-size: 0.85rem;
    color: #bbb;
  }