/* ==========================================================================
   Material Academy — Legacy form styling
   --------------------------------------------------------------------------
   registration.php and verify.php still carry Bootstrap-shaped markup and a
   working AJAX flow (CSRF, reCAPTCHA, live duplicate checking, password
   strength). Rebuilding that markup cannot be fully verified locally, because
   reCAPTCHA will not validate against localhost — so rather than risk the
   signup funnel, this file maps the classes those pages already use onto the
   design tokens.

   This is deliberate, temporary tech debt. When those two pages are rebuilt
   with semantic markup, delete this file. Nothing new should ever use it.
   Requires tokens.css.
   ========================================================================== */

/* ---------- Layout shims -----------------------------------------------
   Faithful to how the old markup expects to behave: a flex row with gutters
   and full-width columns that split at the relevant breakpoint. Using CSS
   grid here silently squeezed .col-lg-6 into one twelfth of the width.      */
.container-fluid { width: 100%; padding-inline: var(--gutter); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.row { display: flex; flex-wrap: wrap; margin-inline: calc(var(--space-5) / -2); }
.row > * { width: 100%; padding-inline: calc(var(--space-5) / 2); }

@media (min-width: 48rem) { .col-md-6 { width: 50%; } }
@media (min-width: 62rem) { .col-lg-6 { width: 50%; } }

.justify-content-center { justify-content: center; }
.w-100 { width: 100%; }
.spad { padding-block: var(--space-9); }

.mb-3 { margin-bottom: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-4); }
.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-muted  { color: var(--ink-600); font-size: var(--text-sm); }
.text-danger { color: var(--error); }

/* ---------- Sign-up page chrome ----------------------------------------
   .signup-bg is a JavaScript-driven background slideshow. The brief rules
   out carousels, and it pulled three ~600KB JPEGs on a page whose only job
   is a form, so it is hidden rather than styled.                           */
.signup-section { padding-block: var(--space-9); }
.signup-bg { display: none; }
.signup-warp { max-width: 720px; margin-inline: auto; }
.toggle-text { text-align: right; margin-bottom: var(--space-4); }

/* ---------- The sign-up / sign-in card ---------------------------------- */
.signup-form {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 720px;
  margin-inline: auto;
}
@media (min-width: 48rem) { .signup-form { padding: var(--space-8); } }

.signup-form label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-700);
}

/* ---------- Controls ---------------------------------------------------- */
.form-control {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: var(--space-3) var(--space-4);
  background: var(--paper-raised);
  color: var(--ink-900);
  font: inherit;
  border: 1px solid var(--border-control);   /* 3:1, a real control boundary */
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.form-control:hover { border-color: var(--ink-600); }
.form-control::placeholder { color: var(--ink-400); }
.form-control:disabled { background: var(--paper-sunken); color: var(--ink-400); cursor: not-allowed; }
.form-control[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

select.form-control { appearance: auto; }
textarea.form-control { min-height: 120px; resize: vertical; }

/* Checkboxes keep a real target and a visible boundary. */
.signup-form input[type="checkbox"] {
  width: 20px; height: 20px;
  accent-color: var(--brand-700);
  vertical-align: middle;
  margin-inline-end: var(--space-2);
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.btn-primary { background: var(--brand-800); color: #fff; border-color: var(--brand-800); }
.btn-primary:hover  { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.btn-primary:active { background: var(--brand-950); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- Alerts ------------------------------------------------------- */
.alert {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--brand-300);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--brand-50);
  color: var(--ink-900);
  margin-bottom: var(--space-5);
}
.alert-danger { background: var(--error-bg); border-color: var(--error); }

/* ---------- Verification code box --------------------------------------- */
.verification-box {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 520px;
  margin-inline: auto;
}

/* ---------- Spinner ------------------------------------------------------ */
.spinner-border {
  display: inline-block;
  width: 1em; height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ma-spin 0.7s linear infinite;
}
.spinner-border-sm { width: 0.85em; height: 0.85em; }
@keyframes ma-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner-border { animation-duration: 2s; }
}

/* ---------- reCAPTCHA --------------------------------------------------- */
.recaptcha-container { margin-block: var(--space-4); }
.recaptcha-container.hidden { display: none; }