/* 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 */
  }
}

/* App-like mobile login redesign */
.wlsm-auth-wrapper{
  position: relative;
  overflow: hidden;
}

.wlsm-auth-wrapper--desktop{
  background:
    radial-gradient(circle at 12% 10%, rgba(99, 102, 241, 0.16), transparent 36%),
    radial-gradient(circle at 88% 82%, rgba(168, 85, 247, 0.14), transparent 34%),
    linear-gradient(165deg, #eef2ff 0%, #f7f8ff 44%, #f2f5ff 100%) !important;
}

.wlsm-auth-wrapper--desktop .wlsm-auth-card{
  max-width: 520px;
}

.wlsm-auth-wrapper--desktop .wlsm-auth-header{
  min-height: 190px;
  padding: 24px 28px 26px;
}

.wlsm-auth-wrapper--desktop form#wlsm-login-form{
  border-radius: 0 0 22px 22px;
  padding: 30px !important;
}

.wlsm-auth-ambient{
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.wlsm-auth-ambient--top{
  top: -180px;
  left: -120px;
  background: rgba(118, 75, 162, 0.28);
}

.wlsm-auth-ambient--bottom{
  right: -140px;
  bottom: -220px;
  background: rgba(102, 126, 234, 0.28);
}

.wlsm-auth-container{
  position: relative;
  z-index: 1;
}

.wlsm-auth-header{
  height: auto;
  min-height: 150px;
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 8px;
}

.wlsm-auth-badge{
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.14);
}

.wlsm-auth-brand-mark{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  margin-left: auto;
  margin-right: auto;
}

.wlsm-auth-brand-logo{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px;
}

.wlsm-auth-title{
  margin: 0;
  color: #fff;
  font-size: 1.55rem;
  line-height: 1.15;
  font-weight: 800;
}

.wlsm-auth-subtitle{
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.4;
}

form#wlsm-login-form{
  padding: 28px !important;
}

form#wlsm-login-form .wlsm-auth-field{
  margin-bottom: 18px !important;
}

.wlsm-input-wrap{
  position: relative;
  display: block;
}

form#wlsm-login-form input[type="text"],
form#wlsm-login-form input[type="password"]{
  min-height: 52px;
  border-radius: 14px;
  padding: 14px 16px;
}

form#wlsm-login-form .wlsm-password-field input[type="password"],
form#wlsm-login-form .wlsm-password-field input[type="text"]{
  padding-right: 86px;
}

form#wlsm-login-form .login-remember{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

form#wlsm-login-form .login-remember label{
  font-size: 0.92rem;
  color: var(--auth-text);
}

.wlsm-auth-security-note{
  font-size: 0.78rem;
  color: var(--auth-muted);
  font-weight: 600;
}

.wlsm-toggle-password{
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  min-width: 62px;
  width: auto;
  border-radius: 10px;
  border: 1px solid #d7deea;
  background: #fff;
  color: #4a5c7d;
  font-size: 12px;
  font-weight: 700;
  padding: 0 10px;
  line-height: 1;
}

.wlsm-toggle-password::before{
  content: none;
}

.wlsm-toggle-password:hover{
  background: #eef2ff;
  border-color: #cfd9ff;
}

.wlsm-toggle-password.is-visible{
  color: #3e55d8;
  border-color: #becbff;
  background: #eef2ff;
}

form#wlsm-login-form .login-submit{
  margin-top: 24px !important;
}

form#wlsm-login-form #wlsm-login-submit{
  min-height: 52px;
  border-radius: 14px !important;
  letter-spacing: 0.01em;
}

@media (max-width: 768px){
  .wlsm-auth-wrapper--mobile{
    align-items: flex-start;
    background:
      radial-gradient(circle at 14% 14%, rgba(148, 163, 255, 0.18), transparent 44%),
      radial-gradient(circle at 88% 0%, rgba(118, 75, 162, 0.22), transparent 42%),
      linear-gradient(165deg, #eef2ff 0%, #f7f9ff 42%, #f3f6ff 100%) !important;
    padding: 10px 0 18px;
    min-height: 100dvh;
  }

  .wlsm-auth-wrapper--mobile .wlsm-auth-container{
    width: 100%;
    max-width: 460px;
    padding: 14px;
    margin: 0 auto;
  }

  .wlsm-auth-wrapper--mobile .wlsm-auth-card{
    border-radius: 28px;
    overflow: hidden;
    box-shadow:
      0 24px 48px rgba(24, 33, 77, 0.14),
      0 6px 18px rgba(24, 33, 77, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(4px);
  }

  .wlsm-auth-wrapper--mobile .wlsm-auth-header{
    border-radius: 28px 28px 0 0;
    min-height: 186px;
    padding: 18px 18px 22px;
  }

  .wlsm-auth-wrapper--mobile form#wlsm-login-form{
    border-radius: 0 0 28px 28px;
    padding: 22px 18px 20px !important;
    box-shadow: none;
  }

  .wlsm-auth-wrapper--mobile .wlsm-auth-title{
    font-size: 1.7rem;
  }

  .wlsm-auth-wrapper--mobile .wlsm-auth-subtitle{
    font-size: 0.9rem;
  }
}

@media (max-width: 420px){
  .wlsm-auth-wrapper--mobile .wlsm-auth-container{
    padding: 10px;
  }

  .wlsm-auth-wrapper--mobile .wlsm-auth-header{
    min-height: 176px;
  }

  .wlsm-auth-wrapper--mobile .wlsm-auth-title{
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce){
  .wlsm-auth-header::before,
  #wlsm-login-submit.wlsm-loading::before{
    animation: none !important;
  }

  form#wlsm-login-form input[type="text"],
  form#wlsm-login-form input[type="password"],
  .wlsm-toggle-password,
  form#wlsm-login-form #wlsm-login-submit{
    transition: none !important;
  }
}