/* ==========================================
   WebTutors – Dark Classy WP Login
   Uses --webtutors-btn / --webtutors-btn-hover from BrandCss
   Migrated from child theme css/adms3351-login.css
   ========================================== */

/* Full Height */
html, body.login {
  height: 100% !important;
}

/* Background */
body.login {
  margin: 0 !important;
  background: #0f0f10 !important;
  font-family: 'Poppins', sans-serif !important;
  color: #ffffff !important;
}

/* Subtle radial accents — uses brand color */
body.login::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(223,32,39,0.18), transparent 55%),
    radial-gradient(circle at 70% 80%, rgba(255,255,255,0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Ensure content sits above background */
body.login #login {
  position: relative;
  z-index: 1;
  width: 420px !important;
  padding: 56px 0 0 !important;
}

/* Logo spacing */
.login h1 a {
  margin: 0 auto 22px !important;
}

/* Card container */
body.login #login form {
  background: #141414 !important;
  border: 1px solid #333333 !important;
  border-radius: var(--webtutors-radius, 18px) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02),
    0 16px 44px rgba(0,0,0,0.55) !important;
  padding: 28px 26px 22px !important;
}

/* Labels */
body.login #login form label {
  color: rgba(255,255,255,0.88) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
}

/* Inputs */
body.login #login form input[type="text"],
body.login #login form input[type="password"],
body.login #login form input[type="email"],
body.login #login form input.input {
  background: #0f0f10 !important;
  border: 1px solid #2a2a2a !important;
  color: #ffffff !important;
  border-radius: calc(var(--webtutors-radius, 12px) * 0.67) !important;
  padding: 12px !important;
  font-size: 14.5px !important;
  box-shadow: none !important;
}

/* Placeholder */
body.login #login form input::placeholder {
  color: rgba(255,255,255,0.45) !important;
}

/* Focus state — uses brand color */
body.login #login form input:focus {
  border-color: var(--webtutors-btn, #DF2027) !important;
  box-shadow: 0 0 0 3px rgba(223,32,39,0.18) !important;
  outline: none !important;
}

/* Remember Me */
body.login #login .forgetmenot label {
  color: rgba(255,255,255,0.78) !important;
  font-weight: 400 !important;
}

/* Submit spacing */
body.login #login form p.submit {
  margin-top: 14px !important;
}

/* Primary button — uses brand color tokens */
body.login #login form input#wp-submit {
  background: var(--webtutors-btn, #DF2027) !important;
  border-color: var(--webtutors-btn, #DF2027) !important;
  color: #ffffff !important;
  border-radius: calc(var(--webtutors-radius, 12px) * 0.67) !important;
  padding: 10px 18px !important;
  height: auto !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 14px rgba(223,32,39,0.35) !important;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease !important;
}

body.login #login form input#wp-submit:hover {
  background: var(--webtutors-btn-hover, #b3191f) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(223,32,39,0.45) !important;
}

/* Checkbox accent */
.login input[type="checkbox"] {
  accent-color: var(--webtutors-btn, #DF2027);
}

/* Hide language switcher for cleaner look */
.login .language-switcher {
  display: none !important;
}

/* ==========================================
   Footer links (Lost your password / back to blog)
   ========================================== */

body.login #login p#nav,
body.login #login p#backtoblog {
  opacity: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-align: center !important;
  margin-top: 18px !important;
}

body.login #login p#nav a,
body.login #login p#backtoblog a {
  color: #ffffff !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

body.login #login p#nav a:hover,
body.login #login p#backtoblog a:hover {
  color: var(--webtutors-btn, #DF2027) !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  box-shadow: none !important;
}

/* Stack Remember Me above button */
body.login #login form .forgetmenot {
  float: none !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
}

/* Make submit full width */
body.login #login form p.submit {
  float: none !important;
  margin: 0 !important;
}

body.login #login form input#wp-submit {
  width: 100% !important;
  display: block !important;
}

/* ==========================================
   Logout Confirmation + Messages
   ========================================== */

/* Message box (logout confirmation, password reset, etc.) */
body.login .message,
body.login .success,
body.login #login_error {
  background: #1a1a1a !important;
  border: 1px solid #333 !important;
  border-left: 4px solid var(--webtutors-btn, #DF2027) !important;
  border-radius: var(--webtutors-radius, 18px) !important;
  color: #e0e0e0 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 14px !important;
  padding: 18px 24px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}

body.login .message a,
body.login #login_error a {
  color: var(--webtutors-btn, #DF2027) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

body.login .message a:hover,
body.login #login_error a:hover {
  color: var(--webtutors-btn-hover, #c0392b) !important;
  text-decoration: underline !important;
}

/* Success message (green accent) */
body.login .success {
  border-left-color: #00a32a !important;
}

body.login .success a {
  color: #00a32a !important;
}

/* Back to site link */
body.login #backtoblog a,
body.login #nav a {
  color: #888 !important;
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}

body.login #backtoblog a:hover,
body.login #nav a:hover {
  color: #fff !important;
}

/* ==========================================
   Mobile
   ========================================== */

@media (max-width: 480px) {
  body.login #login {
    width: calc(100% - 40px) !important;
    padding: 36px 0 0 !important;
    margin: 0 auto !important;
  }

  body.login #login form {
    padding: 22px 20px 18px !important;
  }
}