/* Custom Styles */

/* ──────────────────────────────────────────────────────────
   LOGIN PAGE  (block_login.liquid)
   Targets the Kajabi auth__ classes inside .auth__content.
   Prefix selectors with `html body` to win specificity against
   Kajabi core CSS.
   ────────────────────────────────────────────────────────── */

/* Outer section background + vertical centering */
html body section.section:has(.auth__content) {
  background: #F7F4EF;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  padding: 64px 24px;
}

/* Constrain the form column */
html body .auth__content {
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
}

/* Eyebrow: "Log In" rendered as small mono kicker */
html body h1.auth__title {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: #E8006E;
  margin: 0 0 14px;
}

/* Big Playfair headline below the eyebrow */
html body h1.auth__title::after {
  content: "Welcome back to The Trading Floor.";
  display: block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: #0E0E0E;
  margin-top: 6px;
  text-transform: none;
}

/* Space between heading block and form */
html body h1.auth__title + form {
  margin-top: 36px;
}

/* Form groups: tighter spacing, left-aligned labels */
html body .auth__content .form-group {
  margin-bottom: 18px;
  text-align: left;
}

/* Labels */
html body label.auth__label,
html body .auth__content label {
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4A4A4A;
  margin-bottom: 8px;
  display: block;
}

/* Inputs */
html body input.form-control.auth__field {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #D8D4CC;
  border-radius: 4px;
  padding: 13px 16px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  color: #0E0E0E;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  box-shadow: none;
}
html body input.form-control.auth__field:focus {
  outline: none;
  border-color: #E8006E;
  box-shadow: 0 0 0 3px rgba(232, 0, 110, 0.12);
}

/* Remember Me row: inline checkbox + label */
html body .auth__content .form-group:has(> label > input[type="checkbox"]) {
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}
html body .auth__content .form-group > label > input[type="checkbox"] {
  margin-right: 8px;
  accent-color: #E8006E;
}
html body .auth__content .form-group > label > span.auth__label {
  display: inline;
  margin: 0;
  font-size: 12px;
}

/* Submit button — pink solid pill */
html body .auth__content button.form-btn {
  width: 100%;
  background: #E8006E !important;
  border: 1px solid #E8006E !important;
  color: #fff !important;
  border-radius: 999px;
  padding: 14px 28px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
html body .auth__content button.form-btn:hover {
  background: #FF2E8A !important;
  border-color: #FF2E8A !important;
}

/* Forgot Password link */
html body .auth__content .auth__link {
  margin-top: 20px;
}
html body .auth__content .auth__link a {
  color: #E8006E !important;
  font-family: "Roboto Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
html body .auth__content .auth__link a:hover {
  border-bottom-color: #E8006E;
}

/* Error / notice messages */
html body .auth__content .auth__message {
  border-radius: 4px;
  font-size: 14px;
  padding: 12px 16px;
  margin-bottom: 18px;
  text-align: left;
}