/* Extra styles for the New Student Signup page (forms.php?action=newuser).
   Load AFTER login-modern.css, which supplies the layout, card, fields and buttons.
   Everything is scoped to .im-login so the rest of the site is unaffected. */

/* visually hidden text (live error region and the anti-spam field) */
.im-login .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* two fields side by side (first/last name, course ID/key) */
.im-login .lg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* drop-downs match the text fields */
.im-login .lg-field select {
  display: block; width: 100%; height: 48px; margin: 0; padding: 0 12px;
  border: 1px solid #7C8DA8; border-radius: 10px;
  font-family: inherit; font-size: 16px; color: var(--ink); background: #fff;
}
.im-login .lg-field select:focus { outline: 3px solid rgba(11,122,107,.35); border-color: var(--accent); }

/* checkbox rows */
.im-login .lg-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.im-login .lg-check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: #0B7A6B; }
.im-login .lg-check a { font-size: inherit; }

/* hint text and the optional enrolment section */
.im-login .lg-hint { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.im-login .lg-section { border-top: 1px solid #E3EAF3; margin: 8px 0 20px; padding-top: 20px; }

/* validation messages added by the jQuery validate plugin */
.im-login label.error { display: block; margin-top: 6px; color: #8A1C1C; font-size: 13px; font-weight: 600; line-height: 1.4; }
.im-login input.error, .im-login select.error { border-color: #B3261E; }

.im-login input[type="submit"].lg-btn { margin-top: 4px; appearance: none; -webkit-appearance: none; }

@media (max-width: 860px) {
  .im-login .lg-two { grid-template-columns: 1fr; gap: 0; }
}