/* ============================================
   QolCast — login page
   Dark auth-card look, scoped to qolcast_login.php only.
   (Other account pages -- signup, forgot password, account
   settings, etc. -- keep using the light qolcast.css theme;
   this file is not shared with them.)
   ============================================ */

body.login-page {
  margin: 0;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 96px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background:
    radial-gradient(1000px 560px at 8% -12%, rgba(124,92,252,.20), transparent 60%),
    radial-gradient(900px 640px at 104% 112%, rgba(78,48,138,.22), transparent 58%),
    linear-gradient(158deg, #15131F, #0E0E15 60%, #0B0B12);
  background-attachment: fixed;
  color: #F3F4FA;
  font-family: "Sora", -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

body.login-page a { color: #B7A0FF; text-decoration: none; }
body.login-page a:hover { color: #D6C8FF; }
body.login-page a:focus-visible,
body.login-page button:focus-visible,
body.login-page input:focus-visible {
  outline: 3px solid #B7A0FF;
  outline-offset: 2px;
}
body.login-page input::placeholder { color: rgba(255,255,255,.4); }

/* Back-to-site brand link, top of page ---------------------------------- */
.login-brand {
  position: fixed;
  top: 24px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #F3F4FA;
}
.login-brand-mark { position: relative; width: 24px; height: 24px; display: block; }
.login-brand-mark-ring { position: absolute; inset: 0; border: 1.75px solid #A98BFA; border-radius: 50%; }
.login-brand-mark-tick {
  position: absolute;
  right: -3px;
  bottom: -1px;
  width: 7.5px;
  height: 1.75px;
  background: #A98BFA;
  transform: rotate(45deg);
  border-radius: 1px;
}
.login-brand-name { font-size: 18px; letter-spacing: -.01em; }
.login-brand-name-light { font-weight: 300; }
.login-brand-name-bold { font-weight: 600; }

/* Card ------------------------------------------------------------------ */
.login-main {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

/* Signup page only -- the form is taller than the other auth cards, so
   center-aligning it pushes the top out of view on shorter screens. Anchor
   it near the top instead. */
body.signup-page {
  padding-top: 64px;
  padding-bottom: 16px;
}
body.signup-page .login-main {
  align-items: flex-start;
  padding-top: 0;
}

.login-card {
  width: 100%;
  box-sizing: border-box;
  padding: 40px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Signup page only -- the form is the tallest of the auth cards, so trim
   just the top/bottom padding to keep it more compact; left/right stay
   the same as the other auth pages. */
body.signup-page .login-card {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Small icon badge above the heading -- used by the "check your email"
   confirmation state on qolcast_forgot_password.php. */
.login-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(124,92,252,.18);
  border: 1px solid rgba(169,139,250,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #B7A0FF;
}

.login-head { display: flex; flex-direction: column; gap: 8px; }
.login-title { margin: 0; font-size: 28px; font-weight: 400; letter-spacing: -.02em; }
.login-sub { margin: 0; font-size: 15px; color: rgba(255,255,255,.70); }

/* Smaller variant for longer headings (e.g. signup's "Create your QolCast
   account") that would otherwise wrap awkwardly at the card's width. */
.login-title-sm { font-size: 19px; text-align: center; }

/* Sign-in page only -- smaller "Welcome back" heading. */
body.signin-page .login-title { font-size: 22px; }

/* Sign-in page only -- equalize top/bottom padding so the card sits truly
   centered vertically (the default 96px/48px split biases it downward). */
body.signin-page { padding-top: 64px; padding-bottom: 64px; }

/* Forgot-password page only -- smaller "Reset your password" heading. */
body.forgot-password-page .login-title { font-size: 22px; }

/* Equalize top/bottom padding so the card sits truly centered vertically. */
body.forgot-password-page { padding-top: 64px; padding-bottom: 64px; }

/* Signup page only -- smaller subtitle to match the reduced heading. */
body.signup-page .login-sub { font-size: 13px; }

/* Forgot-password page only -- smaller subtitle text. */
body.forgot-password-page .login-sub { font-size: 13px; line-height: 1.6; }

/* Reset-password page only -- smaller "Choose a new password" heading and
   vertical centering, matching the other auth pages. */
body.reset-password-page .login-title { font-size: 22px; }
body.reset-password-page { padding-top: 64px; padding-bottom: 64px; }

/* Continue with Google -------------------------------------------------- */
.login-google-btn {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  color: #F3F4FA;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  padding: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease;
}
.login-google-btn:hover { background: rgba(255,255,255,.10); color: #F3F4FA; }
.login-google-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  color: #4285F4;
  font-weight: 600;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(255,255,255,.5);
}
.login-divider span { flex: 1; height: 1px; background: rgba(255,255,255,.12); }

/* Fields ------------------------------------------------------------------ */
.login-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.86);
}
.login-field-row { display: flex; justify-content: space-between; align-items: baseline; }
.login-forgot-link { font-size: 13px; font-weight: 400; }

.login-field input[type="email"],
.login-field input[type="password"],
.login-field input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  background: rgba(20,19,30,.55);
  color: #F3F4FA;
}

/* Signup page only -- smaller, tighter inputs since the form has five
   fields stacked in one card. Kept off the other auth pages (login,
   forgot/reset password) since their inputs are unchanged. */
body.signup-page .login-field input[type="email"],
body.signup-page .login-field input[type="text"] {
  padding: 10px 12px;
  font-size: 14px;
}
body.signup-page .login-password-wrap input {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
  font-size: 14px;
}

/* Sign-in page only -- tighter input padding, matching signup's inputs.
   Password input's right padding is left alone (see .login-password-wrap
   input below) since it needs room for the Show/Hide toggle button. */
body.signin-page .login-field input[type="email"] {
  padding: 10px 12px;
}
body.signin-page .login-password-wrap input {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
}

/* Forgot-password page only -- same input padding as the sign-in page. */
body.forgot-password-page .login-field input[type="email"] {
  padding: 10px 12px;
}

/* Reset-password page only -- same input padding as the sign-in page
   (both password fields, right padding left alone for the toggle button). */
body.reset-password-page .login-password-wrap input {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 12px;
}

.login-password-wrap { position: relative; display: block; }
/* .login-field prefix bumps specificity above .login-field input[type=...]'s
   shorthand `padding` rule above, which otherwise always wins ties and was
   silently zeroing this out -- long passwords ran under the toggle button. */
.login-field .login-password-wrap input { padding-right: 70px; }
.login-pw-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  border: 0;
  color: #B7A0FF;
  padding: 8px 10px;
  cursor: pointer;
  border-radius: 6px;
}
.login-pw-toggle:hover { color: #D6C8FF; }

/* Submit + messages -------------------------------------------------------- */
.login-submit {
  width: 100%;
  font: inherit;
  font-weight: 500;
  font-size: 15.5px;
  background: #7358F5;
  color: #fff;
  border: 0;
  padding: 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease;
}
.login-submit:hover { background: #8468FF; }

/* Signup page only -- matches the tighter inputs above. */
body.signup-page .login-submit { padding: 9px 14px; font-size: 14px; }

/* Sign-in page only -- matches the tighter inputs above. */
body.signin-page .login-submit { padding: 10px 14px; }

/* Forgot-password page only -- same button padding as the sign-in page. */
body.forgot-password-page .login-submit { padding: 10px 14px; }

/* Reset-password page only -- same button padding as the sign-in page. */
body.reset-password-page .login-submit { padding: 10px 14px; }

/* Same look as .login-submit, but for an <a> used as a button (e.g. the
   "Log in" link on the reset-password success screen) -- anchors need an
   explicit flex display to center text and honor width:100%, plus
   text-decoration removed since .login-page a underlines on hover. */
.login-submit-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
.login-submit-link:hover { color: #fff; }

.login-note {
  font-size: 13px;
  background: rgba(124,92,252,.14);
  color: #D6C8FF;
  border: 1px solid rgba(139,109,255,.35);
  border-radius: 10px;
  padding: 12px 14px;
}

.login-warning {
  font-size: 13px;
  line-height: 1.5;
  background: rgba(255,196,0,.12);
  color: #F5C453;
  border: 1px solid rgba(255,196,0,.28);
  border-radius: 10px;
  padding: 14px 16px;
}

.login-error {
  font-size: 13px;
  line-height: 1.5;
  background: rgba(255,107,74,.12);
  color: #FF9B7A;
  border: 1px solid rgba(255,107,74,.28);
  border-radius: 10px;
  padding: 12px 16px;
}
.login-error ul { margin: 6px 0 0; padding-left: 18px; }
.login-error a { color: inherit; text-decoration: underline; }

.login-switch {
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.70);
}

/* A link shown but not clickable (e.g. "Sign up" while signups are
   paused) -- visible so it doesn't look broken/missing, but greyed out
   and inert instead of an active link. */
.login-link-disabled {
  color: rgba(255,255,255,.35);
  cursor: not-allowed;
  text-decoration: line-through;
}

@media (max-width: 480px) {
  body.login-page { padding: 88px 16px 40px; }
  .login-card { padding: 28px 24px; }
  .login-brand { position: static; margin: 0 0 24px; align-self: flex-start; }
}