/* ==========================================================================
   Forms & Auth Pages
   --------------------------------------------------------------------------
   Shared form elements used across the site (login, signup, account edit,
   order study, admin forms). Auth pages use a centered card layout.
   ========================================================================== */

/* --- Form Groups & Labels --- */
.form-group { margin-bottom: var(--space-md); }
.form-group--row { display: flex; align-items: center; justify-content: space-between; }

.form-label {
    display: block;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-text-heading);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- Input Fields --- */
.form-input {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    color: var(--color-text-heading);
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: 5px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 58, 37, 0.15); }
.form-input--code { text-align: center; font-size: 2rem; letter-spacing: 0.75rem; font-weight: 700; padding: 1rem; } /* 2FA code input */
.form-input[readonly] { background-color: var(--color-bg-alt); cursor: not-allowed; }

/* --- Validation States --- */
.form-input--error { border-color: var(--color-error); }
.form-input--error:focus { box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15); }
.form-error { display: block; font-size: 0.8125rem; color: var(--color-error); margin-top: var(--space-xs); min-height: 1.2em; }

/* --- Checkboxes --- */
.form-checkbox { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; font-size: 0.9375rem; color: var(--color-text-body); }
.form-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-primary); }

/* ==========================================================================
   Auth Pages — Centered card layout for login, signup, activate, etc.
   Used with class="auth" on the section wrapper.
   ========================================================================== */

.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: calc(var(--header-height) + var(--space-xl)) var(--space-lg) var(--space-xl);
    background-color: var(--color-bg-alt);
}

/* Card container */
.auth__card { background-color: var(--color-bg); border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08); padding: var(--space-xl); width: 100%; max-width: 460px; }
.auth__heading { font-weight: 700; font-size: 1.75rem; color: var(--color-text-heading); text-align: center; margin-bottom: var(--space-sm); }
.auth__subtext { font-size: 0.9375rem; color: var(--color-text-body); text-align: center; margin-bottom: var(--space-lg); }

/* Flash messages inside auth cards */
.auth__flash { margin-bottom: var(--space-md); }
.auth__flash .flash { position: static; width: 100%; }

/* Form spacing */
.auth__form { margin-top: var(--space-md); }

/* Links (forgot password, back to login) */
.auth__link { font-size: 0.875rem; color: var(--color-accent); font-weight: 700; }
.auth__link:hover { color: var(--color-accent-hover); }
.auth__footer { margin-top: var(--space-lg); text-align: center; }

/* Staff SSO (Microsoft) block on the login card */
.auth__sso { margin-top: var(--space-lg); }
.auth__sso-divider { display: flex; align-items: center; text-align: center; color: var(--color-text-body); font-size: 0.8125rem; margin-bottom: var(--space-md); }
.auth__sso-divider::before, .auth__sso-divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--color-border); }
.auth__sso-divider span { padding: 0 var(--space-sm); text-transform: uppercase; letter-spacing: 0.05em; }
.auth__sso-btn { margin-bottom: var(--space-sm); }
.auth__sso .auth__subtext { margin-bottom: 0; }

/* Password requirements checklist (signup/activate pages) */
.auth__password-reqs { background-color: var(--color-bg-alt); border-radius: 5px; padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); font-size: 0.8125rem; color: var(--color-text-body); }
.auth__password-reqs-title { font-weight: 700; margin-bottom: var(--space-sm); }
.auth__password-reqs ul { list-style: none; padding: 0; }
.auth__password-reqs li { padding: var(--space-xs) 0; padding-left: 1.5rem; position: relative; }
.auth__password-reqs li::before { content: '\2022'; position: absolute; left: 0; color: var(--color-border); } /* bullet */
.auth__password-reqs li.req-met::before { content: '\2713'; color: var(--color-success); } /* checkmark when met */
.auth__password-reqs li.req-met { color: var(--color-success); }

/* --- Auth Card Widths --- */
.auth__card--md  { max-width: 600px; }
.auth__card--lg  { max-width: 700px; }

/* --- Form Section Headings --- */
.form-section-heading {
    font-size: 1.125rem;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-primary);
}

.form-section-heading + .form-section-heading,
.form-group + .form-section-heading {
    margin-top: var(--space-lg);
}

/* --- Modal --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.modal-overlay--open {
    display: flex;
}

.modal {
    background: var(--color-bg);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}

.modal__title {
    font-size: 1.25rem;
    color: var(--color-text-heading);
}

.modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-body);
    padding: 0;
    line-height: 1;
}

.modal__body {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
}

/* --- Inline Form / Link Buttons --- */
.btn-link {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
}

.terms-link {
    color: var(--color-primary);
    text-decoration: underline;
}

/* --- Terms and Conditions text (signup modal) --- */
.terms-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--color-text-body);
}

.terms-text__meta {
    font-size: 0.8rem;
    color: var(--color-text-muted, var(--color-text-body));
    margin-bottom: var(--space-md);
}

.terms-text h4 {
    font-size: 1rem;
    color: var(--color-text-heading);
    margin: var(--space-lg) 0 var(--space-xs);
}

.terms-text p {
    margin: 0 0 var(--space-sm);
}

/* --- Auth footer separator (Terms · Privacy) --- */
.auth__sep {
    margin: 0 var(--space-xs);
    color: var(--color-text-body);
}