/*
 * itsbio "Loud Bento" styling for the login + register pages.
 * Loaded ONLY on those two pages (conditionally, from basic_wrapper) and scoped to
 * body.login-background / body.register-background, so it never affects the dashboard or any
 * other app page. It restyles appearance only — the form fields, names, submit and CSRF handling
 * are 100% untouched.
 */

body.login-background,
body.register-background {
  background: #f2f3f5 !important;
  font-family: 'General Sans', 'Helvetica Neue', sans-serif;
  color: #14130f;
}

/* logo / brand title above the card */
body.login-background main .text-center .h3,
body.register-background main .text-center .h3 {
  font-family: 'Clash Display', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
}
body.login-background .navbar-logo,
body.register-background .navbar-logo { max-height: 46px; }

/* the form card — neubrutalist */
body.login-background .card,
body.register-background .card {
  border: 2.5px solid #14130f !important;
  border-radius: 24px !important;
  box-shadow: 8px 10px 0 #14130f !important;
  background: #fbfaf6 !important;
}
body.login-background .card-body,
body.register-background .card-body { padding: 2.4rem !important; }

/* form heading */
body.login-background .card-body h1,
body.register-background .card-body h1 {
  font-family: 'Clash Display', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.55rem;
  margin-bottom: .35rem;
}

/* labels + inputs */
body.login-background label,
body.register-background label { font-weight: 600; font-size: .84rem; }
body.login-background .form-control,
body.register-background .form-control {
  border: 1.5px solid #14130f;
  border-radius: 12px;
  padding: .7rem .9rem;
  font-size: .95rem;
  background: #fff;
  color: #14130f;
  box-shadow: none;
}
body.login-background .form-control:focus,
body.register-background .form-control:focus {
  border-color: #2b2bf5;
  box-shadow: 0 0 0 3px rgba(43, 43, 245, .14);
}
/* keep error state visible */
body.login-background .form-control.is-invalid,
body.register-background .form-control.is-invalid { border-color: #dc3545; }

/* primary submit button */
body.login-background .btn-primary,
body.register-background .btn-primary {
  background: #14130f;
  border: 2px solid #14130f;
  border-radius: 999px;
  font-weight: 600;
  padding: .78rem 1.2rem;
  transition: transform .15s, box-shadow .15s;
}
body.login-background .btn-primary:hover,
body.register-background .btn-primary:hover {
  background: #14130f;
  transform: translateY(-2px);
  box-shadow: 5px 6px 0 #14130f;
}
body.login-background .btn-primary:disabled,
body.register-background .btn-primary:disabled { transform: none; box-shadow: none; opacity: .5; }

/* social login buttons */
body.login-background .btn-light,
body.register-background .btn-light {
  background: #fff;
  border: 1.5px solid #14130f;
  border-radius: 999px;
  font-weight: 600;
}
body.login-background .btn-light:hover,
body.register-background .btn-light:hover { border-color: #2b2bf5; color: #2b2bf5; }

/* links */
body.login-background a.font-weight-bold,
body.register-background a.font-weight-bold { color: #2b2bf5; font-weight: 600; }
body.login-background .text-muted a,
body.register-background .text-muted a { color: #2b2bf5; }

/* checkboxes accent */
body.login-background .custom-control-input:checked ~ .custom-control-label::before,
body.register-background .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #2b2bf5;
  border-color: #2b2bf5;
}