/* Auth pages only (login, register, verify-email, team-login) — M3,
   2026-09-23. Loaded AFTER style.css, which M2 owns and this file never
   overrides for any other page. Uses the -ink tokens, not the raw --color-*
   family, for body copy: see the #resetFeedback note in style.css for why the
   raw chip colours fail contrast as text. */

.auth-notice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    margin: 0 0 16px;
    border: 1px solid var(--border-color);
    border-inline-start-width: 4px;
    border-radius: 12px;
    font-size: var(--fs-sm);
    line-height: 1.6;
    text-align: start;
    background: var(--bg-card);
    color: var(--text-main);
}
.auth-notice[hidden] { display: none; }
.auth-notice--error   { border-inline-start-color: var(--color-danger-ink);  background: color-mix(in srgb, var(--color-danger) 7%, var(--bg-card)); }
.auth-notice--warning { border-inline-start-color: var(--color-warning-ink); background: color-mix(in srgb, var(--color-warning) 8%, var(--bg-card)); }
.auth-notice--success { border-inline-start-color: var(--color-success-ink); background: color-mix(in srgb, var(--color-success) 7%, var(--bg-card)); }
.auth-notice--info    { border-inline-start-color: var(--color-info-ink);    background: color-mix(in srgb, var(--color-info) 7%, var(--bg-card)); }
.auth-notice__title { font-weight: 700; }
.auth-notice__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.auth-notice__action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-card);
    color: var(--wa-green-ink);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
body.dark-mode .auth-notice__action { color: var(--wa-green); }
.auth-notice__action:hover { text-decoration: underline; }
.auth-notice__action:focus-visible { outline: 2px solid var(--wa-green-ink); outline-offset: 2px; }

.auth-field-error {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-sm);
    color: var(--color-danger-ink);
}
.auth-field-error[hidden] { display: none; }
.form-control[aria-invalid="true"] { border-color: var(--color-danger-ink); }

/* Email, phone and codes are Latin-script values: isolate them LTR so an RTL
   page does not reorder "name@company.com" or "+966…", while the label and
   the rest of the form stay in the page's direction. */
.auth-ltr { direction: ltr; unicode-bidi: isolate; text-align: start; }
html[dir="rtl"] .auth-ltr { text-align: right; }
html[dir="rtl"] .auth-ltr::placeholder { text-align: right; }

/* Password field with a show/hide button in the input's start padding —
   the same 44×44 geometry login.html already shipped (NG5, WCAG 2.5.8). */
.auth-password-wrap { position: relative; }
.auth-password-wrap .form-control { padding-left: 44px; }
.auth-password-toggle {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
}

.auth-alt-path {
    margin-top: 14px;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.auth-alt-path a,
.auth-alt-path button.text-link {
    display: inline-block;
    min-height: 24px;
    padding: 2px 4px;
}

/* style.css's `.form-group label` uppercases field labels (short captions);
   the consent label is a sentence, and in English it rendered as
   "I AGREE TO THE TERMS OF SERVICE…". Sentence case, normal tracking. */
.form-group label.auth-consent { text-transform: none; letter-spacing: normal; line-height: 1.6; }
.auth-consent a { color: var(--wa-green-ink); font-weight: 600; text-decoration: underline; }
body.dark-mode .auth-consent a { color: var(--wa-green); }

.sr-only-auth {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}