/* 
 * INPUT VISIBILITY FIX for PopQuizKenya
 * 
 * This file fixes the white text on white background issue
 * on signup and forgot-password pages.
 * 
 * If inputs are still not visible after updating auth.css,
 * add this file as an additional stylesheet:
 * <link rel="stylesheet" href="/input-fix.css" />
 */

/* Force dark text color on all input fields in auth pages */
.auth-wrap .input,
.auth-card .input,
.auth-wrap input,
.auth-card input,
input.input,
.form input,
.form .input,
input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"] {
  color: #0b1020 !important;
  background: rgba(255,255,255,.92) !important;
  -webkit-text-fill-color: #0b1020 !important;
}

/* Placeholder text */
.auth-wrap .input::placeholder,
.auth-card .input::placeholder,
.auth-wrap input::placeholder,
.auth-card input::placeholder,
input.input::placeholder,
.form input::placeholder,
.form .input::placeholder {
  color: rgba(11,16,32,.45) !important;
  opacity: 1 !important;
}

/* Focused state */
.auth-wrap .input:focus,
.auth-card .input:focus,
.auth-wrap input:focus,
.auth-card input:focus,
input.input:focus,
.form input:focus,
.form .input:focus {
  color: #0b1020 !important;
  -webkit-text-fill-color: #0b1020 !important;
}

/* Select elements */
.auth-wrap select,
.auth-card select,
select.input,
.form select {
  color: #0b1020 !important;
  background: rgba(255,255,255,.92) !important;
}

/* Autofill fix for Chrome/Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #0b1020 !important;
  -webkit-box-shadow: 0 0 0 30px rgba(255,255,255,.92) inset !important;
  box-shadow: 0 0 0 30px rgba(255,255,255,.92) inset !important;
}