/* Login and registration. Tokens copied from the partner sheet.
   Scoped so the rest of the public site keeps its current chrome.
   Dark values are set in night.css when that theme sheet is active. */

.auth-form {
    --bg: #FFFFFF;
    --surface: #F4F4F5;
    --accent: #3390EC;
    --accent-hover: #2086EA;
    --text: #111827;
    --text-muted: #707579;
    --border: #E5E7EB;
    --danger: #E53935;
    box-sizing: border-box;
    max-width: 640px;
    margin: 24px auto;
    padding: 0 16px;
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.auth-form *,
.auth-form *::before,
.auth-form *::after {
    box-sizing: border-box;
}

.auth-form__card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.auth-form__title {
    margin: 0;
    color: var(--text);
    font-family: inherit;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

.auth-form__form {
    margin: 0;
    text-align: center;
}

.auth-form__field,
.auth-form .md-form {
    margin: 0 0 16px;
    text-align: left;
}

.auth-form label,
.auth-form .md-form label,
.auth-form .md-form label.active {
    display: block;
    position: static;
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    transform: none;
}

.auth-form .form-control {
    display: block;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
}

.auth-form .form-control:focus {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Leave the dial-code inset to intl-tel-input.
   The #form-signup rule cancels the old prefix-icon offset in main.css. */
.auth-form .iti {
    width: 100%;
}

.auth-form #form-signup .md-form .iti {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

.auth-form .iti input.form-control,
.auth-form .md-form input[type="tel"].form-control {
    box-sizing: border-box;
    height: 40px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: none;
}

.auth-form .iti input.form-control:focus,
.auth-form .md-form input[type="tel"].form-control:focus {
    border-color: var(--accent);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    box-shadow: none;
}

.auth-form .invalid-data {
    margin: 4px 0 0;
    padding: 0;
    color: var(--danger);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    list-style: none;
    text-align: left;
}

.auth-form .invalid-data:empty {
    display: none;
}

.auth-form .auth-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin: 8px 0 0;
    padding: 0 16px;
    border: 0;
    border-radius: 8px;
    background-color: var(--accent) !important;
    color: #FFFFFF !important;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
    box-shadow: none !important;
    transition: background-color 150ms ease-out;
}

.auth-form .auth-form__submit:hover,
.auth-form .auth-form__submit:active {
    background-color: var(--accent-hover) !important;
}

.auth-form .auth-form__submit:focus {
    background-color: var(--accent-hover) !important;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.auth-form a {
    color: var(--accent);
    text-decoration: none;
}

.auth-form a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.auth-form .form-check {
    margin: 0 0 16px;
    text-align: left;
}

.auth-form .form-check-input {
    accent-color: var(--accent);
}

/* Consent sentence. main.css `div.form-check label` beats `.auth-form label`,
   so the rules/policy line stayed on 'No Name 37' and #3F51B5.
   Do not set position, display, or left padding: MDB's checkbox box needs them. */
.auth-form .form-check label,
.auth-form .form-check label:hover,
.auth-form .form-check label:active,
.auth-form .form-check label:focus {
    height: auto;
    margin: 0;
    color: var(--text) !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.auth-form .form-check label a {
    color: var(--accent);
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: none;
}

.auth-form .form-check label a:hover,
.auth-form .form-check label a:active,
.auth-form .form-check label a:focus {
    color: var(--accent-hover);
    text-decoration: underline;
}

.auth-form__form p {
    margin: 16px 0 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .auth-form .auth-form__submit {
        transition: none;
    }
}