/*
 * itsbio "Loud Bento" styling for signing in: login, register, lost and reset password, resend
 * activation, register with a code, and letting an AI app in. Loaded ONLY on those pages
 * (conditionally, from basic_wrapper) and scoped to body.auth-loud, 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.auth-loud {
  background: #f2f3f5 !important;
  font-family: 'General Sans', 'Helvetica Neue', sans-serif;
  color: #14130f;
}

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

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

/* form heading */
body.auth-loud .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.auth-loud label { font-weight: 600; font-size: .84rem; }

/* A checkbox's label is a sentence, not a field name, and its words sit in a <small> like the links
   beside them. Sized as a field label, that <small> shrank twice: "Remember me" came out at about
   11px next to a 13px "Lost Password", and the terms on the register page were smaller still. */
body.auth-loud .custom-control-label { font-weight: 400; font-size: 1rem; }
body.auth-loud .form-control {
  border: 1.5px solid #14130f;
  border-radius: 12px;
  padding: .7rem .9rem;
  font-size: .95rem;
  background: #fff;
  color: #14130f;
  box-shadow: none;
}
body.auth-loud .form-control:focus {
  border-color: #2b2bf5;
  box-shadow: 0 0 0 3px rgba(43, 43, 245, .14);
}
/* keep error state visible */
body.auth-loud .form-control.is-invalid { border-color: #dc3545; }

/* primary submit button */
body.auth-loud .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.auth-loud .btn-primary:hover {
  background: #14130f;
  transform: translateY(-2px);
  box-shadow: 5px 6px 0 #14130f;
}
body.auth-loud .btn-primary:disabled { transform: none; box-shadow: none; opacity: .5; }

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

/* links */
body.auth-loud a.font-weight-bold { color: #2b2bf5; font-weight: 600; }
body.auth-loud .text-muted a { color: #2b2bf5; }

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