/* WLSM – Modern Auth (Student/Parent Login) */

:root{
  --auth-bg-main:#f8fafc; /* slate-50 */
  --auth-primary:#667eea; /* purple-blue */
  --auth-primary-2:#764ba2; /* deep purple */
  --auth-text:#0f172a; /* slate-900 */
  --auth-muted:#64748b; /* slate-500 */
  --auth-border:#e2e8f0; /* slate-200 */
  --auth-card:#ffffff;
  --auth-shadow:rgba(0, 0, 0, 0.1);
}

/* Page wrapper - clean single background */
body.wlsm-login-page,
.wlsm-auth-wrapper{
  background: var(--auth-bg-main) !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Outer container for center layout */
.wlsm-auth-container{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  width: 100%;
  background: transparent !important;
}

.wlsm-auth-card{
  max-width:460px;
  width:100%;
  background: transparent !important;
}

/* Modern header with gradient */
.wlsm-auth-header{
  height:100px;
  border-radius:20px 20px 0 0;
  background:linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-primary-2) 100%);
  box-shadow:0 10px 40px var(--auth-shadow);
  margin:0 auto 0 auto;
  max-width:460px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.wlsm-auth-header::before{
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: wlsm-shimmer 3s infinite;
}

@keyframes wlsm-shimmer{
  0%, 100% { transform: translate(-25%, -25%) rotate(0deg); }
  50% { transform: translate(-35%, -35%) rotate(180deg); }
}

/* Form container */
form#wlsm-login-form{
  max-width:460px;
  margin:0 auto !important;
  padding:32px !important;
  position:relative;
  background: var(--auth-card);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 10px 40px var(--auth-shadow);
}

/* Form fields */
form#wlsm-login-form > p{
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
}

form#wlsm-login-form .login-username,
form#wlsm-login-form .login-password,
form#wlsm-login-form .login-remember{
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

form#wlsm-login-form .login-remember{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 0;
}

form#wlsm-login-form .login-remember label{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

form#wlsm-login-form .login-remember input[type="checkbox"]{
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--auth-primary);
}

/* Labels */
form#wlsm-login-form label{
  font-weight:600;
  color:var(--auth-text);
  margin-bottom:8px;
  display:block;
  font-size: 14px;
}

/* Input fields */
form#wlsm-login-form input[type="text"],
form#wlsm-login-form input[type="password"]{
  width:100%;
  border-radius:12px;
  border:2px solid var(--auth-border);
  padding:14px 16px;
  font-size:15px;
  background: #f8fafc;
  transition: all 0.3s ease;
  color: var(--auth-text);
}

form#wlsm-login-form input[type="text"]:focus,
form#wlsm-login-form input[type="password"]:focus{
  outline:none;
  border-color:var(--auth-primary);
  background: #ffffff;
  box-shadow:0 0 0 4px rgba(102,126,234,.12);
  transform: translateY(-1px);
}

/* Submit button */
form#wlsm-login-form input[type="submit"],
form#wlsm-login-form #wlsm-login-submit{
  background:linear-gradient(135deg, var(--auth-primary) 0%, var(--auth-primary-2) 100%) !important;
  border:none !important;
  color:#fff !important;
  border-radius:12px !important;
  padding:14px 20px !important;
  font-weight:700 !important;
  width:100%;
  font-size: 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102,126,234,.3);
}

form#wlsm-login-form input[type="submit"]:hover,
form#wlsm-login-form #wlsm-login-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102,126,234,.4);
}

form#wlsm-login-form input[type="submit"]:active,
form#wlsm-login-form #wlsm-login-submit:active{
  transform: translateY(0);
}

/* Error messages */
.wlsm-auth-card .login.message.error{
  background: #fee;
  border: 2px solid #fcc;
  color: #c33;
  padding: 16px;
  border-radius: 12px;
  margin: 0 0 20px 0;
  font-weight: 500;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.1);
}

/* Password visibility toggle */
.wlsm-password-field{
  position:relative;
}

.wlsm-toggle-password{
  position:absolute;
  right:12px;
  top:42px;
  width:36px;
  height:36px;
  border-radius:8px;
  border:none;
  background:transparent;
  cursor:pointer;
  transition: all 0.2s ease;
}

.wlsm-toggle-password:hover{
  background: rgba(102,126,234,.08);
}

.wlsm-toggle-password::before{
  content:"\f06e";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  color:var(--auth-muted);
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.wlsm-toggle-password.is-visible::before{
  content:"\f070";
  color:var(--auth-primary);
}

/* Submit loading state */
#wlsm-login-submit.wlsm-loading{
  position:relative;
  color:transparent !important;
  pointer-events: none;
}

#wlsm-login-submit.wlsm-loading::after{
  content:"";
  position:absolute;
  inset:0;
  display:block;
  background:transparent;
}

#wlsm-login-submit.wlsm-loading::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:20px;
  margin:-10px 0 0 -10px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  animation:wlsm-spin .7s linear infinite;
}

@keyframes wlsm-spin{
  to{transform:rotate(360deg)}
}

/* Mobile responsive */
@media (max-width:600px){
  .wlsm-auth-container{
    padding: 16px;
  }
  
  .wlsm-auth-header{
    height: 80px;
    border-radius: 16px 16px 0 0;
  }
  
  form#wlsm-login-form{
    padding: 24px !important;
    border-radius: 0 0 16px 16px;
  }
  
  form#wlsm-login-form input[type="text"],
  form#wlsm-login-form input[type="password"]{
    font-size: 16px; /* Prevent iOS zoom */
  }
}