/* ==========================================================================
   Mathbot — shared authentication UI helpers (Lightable auth pages)
   Centralizes the small dynamic-class helpers the auth JS toggles, so
   login / signup / forgot-password / forgot-pincode pages stay consistent
   without per-page inline <style> blocks. Built on Bootstrap/Lightable tokens.
   ========================================================================== */

/* ---- Auth alert (login + reset pages; JS sets .login-alert.show.TYPE) ----- */
.login-alert { display:none; border-radius:8px; padding:12px 14px; margin:0 0 16px; font-size:14px; font-weight:600; border:1px solid transparent; }
.login-alert.show { display:block; }
.login-alert.success { background:#ecfdf3; color:#027a48; border-color:#abefc6; }
.login-alert.error   { background:#fef3f2; color:#d92d20; border-color:#fecdca; }
.login-alert.warning { background:#fff7ed; color:#c2410c; border-color:#fdba74; }
.login-alert.info    { background:#eff6ff; color:#0369a1; border-color:#bae6fd; }

/* ---- 2-step password reset: hidden new-password panel -------------------- */
.reset-password-panel { display:none; }
.reset-password-panel.show { display:block; }

/* ---- Button loading state (btn-text / btn-loader swap) ------------------- */
.btn .btn-loader { display:none; align-items:center; gap:6px; }
.btn.loading .btn-text { display:none; }
.btn.loading .btn-loader { display:inline-flex; }

/* ---- Card shake on error ------------------------------------------------- */
.shake { animation: authShakeX .42s ease; }
@keyframes authShakeX {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-7px); }
  40% { transform:translateX(6px); }
  60% { transform:translateX(-5px); }
  80% { transform:translateX(4px); }
}

/* ---- Success overlay (reset complete) ------------------------------------ */
.success-loader-overlay {
  position:fixed; inset:0; background:rgba(10,18,35,.38);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  z-index:1090; opacity:0; visibility:hidden; transition:.25s ease;
}
.success-loader-overlay.show { opacity:1; visibility:visible; }
.success-loader-card {
  width:100%; max-width:340px; background:var(--bs-card-bg,#fff);
  border:1px solid var(--bs-border-color); border-radius:16px;
  box-shadow:0 25px 60px rgba(15,23,42,.18); padding:26px 22px; text-align:center;
}
.success-loader-icon {
  width:64px; height:64px; margin:0 auto 16px; border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff;
}
.success-loader-icon .material-icons { font-size:32px; }
.success-loader-title { margin:0 0 8px; font-size:20px; font-weight:700; color:var(--bs-heading-color,#111827); }
.success-loader-text { margin:0; color:var(--bs-secondary-color); font-size:14px; }
.success-loader-progress { margin-top:18px; width:100%; height:8px; border-radius:999px; background:var(--bs-border-color); overflow:hidden; }
.success-loader-progress span { display:block; height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,#38bdf8,#0ea5e9,#0284c7); animation:authProgress 1.3s ease forwards; }
@keyframes authProgress { from{ width:0%; } to{ width:100%; } }
.success-loader-note { margin-top:12px; font-size:12px; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.4px; }

/* ---- Username availability + suggestions (signup) ------------------------ */
.username-status { display:none; font-size:12px; margin-top:6px; }
.username-status.show { display:block; }
.username-status.checking { color:var(--bs-secondary-color); }
.username-status.available { color:var(--bs-success); }
.username-status.taken { color:var(--bs-danger); }
.username-status.warning { color:var(--bs-warning); }
.username-suggestions { display:none; margin-top:8px; }
.username-suggestions.show { display:block; }
.username-suggestion-title { font-size:11px; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.4px; margin-bottom:6px; }
.username-suggestion-list { display:flex; flex-wrap:wrap; gap:6px; }
.username-chip { border:1px solid var(--bs-border-color); background:var(--bs-body-bg); border-radius:20px; padding:4px 12px; font-size:12px; cursor:pointer; }
.username-chip:hover { border-color:var(--bs-primary); color:var(--bs-primary); }

/* Auth side-footer brand logo sizing */
.auth-sidefooter .img-brand{height:40px;width:auto;max-width:100%}