/* CFE auth card — passwordless additions (tabs, method toggle, inline OTP,
 * success) layered over the shipped login surface (buddyboss-login.css).
 * Additive only: every selector here is net-new. Scoped under body.login,
 * reusing the --cfe-* tokens defined on body.login by buddyboss-login.css.
 * Ported 1:1 from the Design comp "Auth — Login & Register (Tabbed)". */

/* Tokens the base login sheet doesn't define yet. */
body.login {
    --cfe-fog:        #F4F5F7;
    --cfe-ink-deep:   #0F1923;
    --cfe-validation: #db222a;
}

/* ===== Tabs (Log in / Create account) ===== */
body.login .auth__tabs {
    display: flex;
    gap: 4px;
    background: var(--cfe-fog);
    border: 1px solid var(--cfe-mist);
    border-radius: 10px;
    padding: 4px;
    margin: 0 0 24px;
}
body.login .auth__tab {
    flex: 1 1 0;
    text-align: center;
    cursor: pointer;
    background: none;
    border: 0;
    border-radius: 7px;
    padding: 10px 14px;
    font-family: var(--cfe-font-sans);
    font-size: 13.5px;
    line-height: 1;
    color: var(--cfe-graphite);
    text-decoration: none;
    transition: background .15s, color .15s;
}
body.login .auth__tab:hover { color: var(--cfe-ink); }
body.login .auth__tab.is-active {
    background: var(--cfe-ink);
    color: #fff;
    font-weight: 500;
}

/* ===== "or" divider (between SSO and method toggle) ===== */
body.login .auth__or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    color: var(--cfe-graphite);
    font-size: 12px;
}
body.login .auth__or::before,
body.login .auth__or::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--cfe-mist);
}

/* ===== Method toggle (Use a password / Email me a code) ===== */
body.login .auth__method {
    display: flex;
    gap: 4px;
    background: var(--cfe-fog);
    border: 1px solid var(--cfe-mist);
    border-radius: 9px;
    padding: 3px;
    margin: 0 0 16px;
}
body.login .auth__method button {
    flex: 1 1 0;
    border: 0;
    background: none;
    border-radius: 6px;
    padding: 8px 6px;
    font-family: var(--cfe-font-sans);
    font-size: 12.5px;
    line-height: 1;
    color: var(--cfe-graphite);
    cursor: pointer;
    transition: background .15s, color .15s;
}
body.login .auth__method button:hover { color: var(--cfe-ink); }
body.login .auth__method button.is-active {
    background: #fff;
    color: var(--cfe-ink);
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}

/* In passwordless mode, hide the password field + the forgot link, show the note. */
body.login form#loginform.is-passwordless .user-pass-wrap,
body.login form#loginform.is-passwordless .auth__row .lostmenot {
    display: none !important;
}
body.login .cfe-pwnote {
    display: none;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--cfe-graphite);
    margin: -2px 0 14px;
    line-height: 1.5;
}
body.login form#loginform.is-passwordless .cfe-pwnote { display: flex; }
body.login .cfe-pwnote svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin-top: 1px;
    color: var(--cfe-sky-text);
}

/* ===== Inline OTP step (shown after a passwordless submit) ===== */
body.login .cfe-login-otp { display: none; }
body.login .cfe-login-otp.is-shown { display: block; }

body.login .cfe-login-otp .otp__title {
    font-family: var(--cfe-font-display);
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    margin: 0 0 6px;
    color: var(--cfe-ink);
}
body.login .cfe-login-otp .otp__lead {
    font-size: 13.5px;
    color: var(--cfe-graphite);
    margin: 0 0 2px;
}
body.login .cfe-login-otp .otp__email {
    font-family: var(--cfe-font-display);
    font-weight: 500;
    font-size: 14.5px;
    color: var(--cfe-ink);
    margin: 2px 0 20px;
}

body.login .cfe-login-otp .otp__cells {
    display: flex;
    gap: 9px;
    margin: 6px 0 0;
}
body.login .cfe-login-otp .otp__cell {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    text-align: center;
    font-family: var(--cfe-font-display);
    font-weight: 500;
    font-size: 24px;
    color: var(--cfe-ink);
    background: #fff;
    border: 1px solid var(--cfe-mist);
    border-radius: 9px;
    transition: border-color .15s, box-shadow .15s;
}
body.login .cfe-login-otp .otp__cell:hover { border-color: #CBD0D8; }
body.login .cfe-login-otp .otp__cell.is-filled { border-color: var(--cfe-ink); }
body.login .cfe-login-otp .otp__cell:focus {
    outline: 0;
    border-color: var(--cfe-ink);
    box-shadow: 0 0 0 3px rgba(27, 42, 59, 0.16);
}
body.login .cfe-login-otp.has-error .otp__cell { border-color: var(--cfe-alert); }
body.login .cfe-login-otp.has-error .otp__cell:focus { box-shadow: 0 0 0 3px rgba(196, 85, 61, 0.18); }

body.login .cfe-login-otp .otp__err {
    display: none;
    align-items: center;
    gap: 7px;
    margin: 11px 0 0;
    font-size: 12.5px;
    color: var(--cfe-alert);
    line-height: 1.45;
}
body.login .cfe-login-otp .otp__err svg { flex: 0 0 14px; }
body.login .cfe-login-otp.has-error .otp__err { display: flex; }

/* OTP submit button — mirror the shipped wp-submit pill. */
body.login .cfe-login-otp .otp__submit {
    width: 100%;
    padding: 14px 20px;
    border-radius: 8px;
    margin-top: 18px;
    background: var(--cfe-ink);
    color: #fff;
    border: 0;
    font-family: var(--cfe-font-sans);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
body.login .cfe-login-otp .otp__submit:hover { background: var(--cfe-ink-deep); }
body.login .cfe-login-otp .otp__submit svg { width: 16px; height: 16px; }
body.login .cfe-login-otp .otp__submit:disabled {
    background: var(--cfe-graphite);
    opacity: .55;
    cursor: not-allowed;
}
body.login .cfe-login-otp .otp__submit:disabled svg { display: none; }

body.login .cfe-login-otp .otp__resend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 18px;
    font-size: 13px;
    color: var(--cfe-graphite);
}
body.login .cfe-login-otp .otp__resend b {
    color: var(--cfe-ink);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
body.login .cfe-login-otp .otp__resend button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--cfe-ember-text);
}
body.login .cfe-login-otp .otp__resend button:disabled { color: var(--cfe-graphite); opacity: .55; cursor: default; }
body.login .cfe-login-otp .otp__resend button:not(:disabled):hover { text-decoration: underline; }

body.login .cfe-login-otp .otp__change {
    margin: 20px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--cfe-mist);
    text-align: center;
    font-size: 13px;
    color: var(--cfe-graphite);
}
body.login .cfe-login-otp .otp__change button {
    background: none;
    border: 0;
    padding: 0 0 0 4px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--cfe-ember-text);
}
body.login .cfe-login-otp .otp__change button:hover { text-decoration: underline; }

body.login .cfe-login-otp .otp__meta {
    margin: 16px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--cfe-graphite);
    line-height: 1.6;
}
body.login .cfe-login-otp .otp__meta .dot { color: var(--cfe-mist); margin: 0 6px; }

/* form-level error banner (no account, rate limit, turnstile) */
body.login .cfe-login-formerr {
    display: none;
    margin: 0 0 14px;
    padding: 11px 14px;
    border-radius: 8px;
    background: #FBE9E7;
    border: 1px solid #F3C9C2;
    color: var(--cfe-alert);
    font-size: 12.5px;
    line-height: 1.45;
}
body.login .cfe-login-formerr.is-shown { display: block; }

/* ===== Create-account panel (in-place register, sibling of the login view) =====
 * Net-new register surface rendered inside #login by class-buddyboss-login.php's
 * login_message filter. Reuses the comp field classes + the shipped .cfe-login-otp
 * OTP step (the register OTP container carries both .cfe-login-otp and .cfe-reg-otp
 * so it inherits the proven cell styling for free). */
body.login #cfePanelRegister { display: none; }
body.login #cfePanelRegister.is-active { display: block; }

/* Fields */
body.login #cfePanelRegister .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
body.login #cfePanelRegister .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
body.login #cfePanelRegister .field--row .field { margin-bottom: 0; }
body.login #cfePanelRegister .field--dob { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; }
body.login #cfePanelRegister .field--dob .field__input {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235A5A5A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px;
}
body.login #cfePanelRegister .field__label { font-size: 12.5px; font-weight: 500; color: var(--cfe-ink); }
body.login #cfePanelRegister .field__label .req { color: var(--cfe-validation); font-weight: 600; margin-left: 2px; }
body.login #cfePanelRegister .field__input {
    width: 100%; padding: 10px 12px; border: 1px solid var(--cfe-mist); border-radius: 8px;
    font-family: var(--cfe-font-sans); font-size: 13.5px; color: var(--cfe-ink); background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
body.login #cfePanelRegister .field__input:focus {
    outline: 0; border-color: var(--cfe-sky-decorative, #6BB0DB); box-shadow: 0 0 0 3px rgba(107, 176, 219, 0.20);
}
body.login #cfePanelRegister .field__input::placeholder { color: var(--cfe-graphite); opacity: 0.7; }
body.login #cfePanelRegister .field__input.bb-input-error,
body.login #cfePanelRegister .field--dob.bb-input-error .field__input {
    border-color: var(--cfe-validation); box-shadow: 0 0 0 1px rgba(219, 34, 42, 0.10);
}
body.login #cfePanelRegister .field__input.bb-input-error:focus {
    border-color: var(--cfe-validation); box-shadow: 0 0 0 3px rgba(219, 34, 42, 0.16);
}
body.login #cfePanelRegister .field--password { position: relative; }
body.login #cfePanelRegister .field--password .field__input { padding-right: 38px; }
body.login #cfePanelRegister .field__toggle {
    position: absolute; right: 10px; bottom: 8px; background: transparent; border: 0; padding: 4px; cursor: pointer; color: var(--cfe-graphite);
}
body.login #cfePanelRegister .field__toggle svg { width: 16px; height: 16px; }
body.login #cfePanelRegister .field__toggle:hover { color: var(--cfe-ink); }

/* Terms checkbox row */
body.login #cfePanelRegister .check-row { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0; font-size: 12.5px; color: var(--cfe-ink); line-height: 1.45; }
body.login #cfePanelRegister .check-row input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0; accent-color: var(--cfe-ink); }
body.login #cfePanelRegister .check-row.bb-input-error input[type="checkbox"] { outline: 2px solid var(--cfe-validation); outline-offset: 1px; }
body.login #cfePanelRegister .check-row label { cursor: pointer; }
body.login #cfePanelRegister .check-row a { color: var(--cfe-sky-text); text-decoration: none; }
body.login #cfePanelRegister .check-row a:hover { text-decoration: underline; }

/* Passwordless mode: hide password field, show the note (scoped to the register form) */
body.login #cfePanelRegister form.is-passwordless .field--password { display: none; }
body.login #cfePanelRegister form.is-passwordless .cfe-pwnote { display: flex; }

/* Primary submit — mirror the shipped login pill */
body.login #cfePanelRegister .auth__submit {
    width: 100%; padding: 14px 20px; border-radius: 8px; margin-top: 6px;
    background: var(--cfe-ink); color: #fff; border: 0;
    font-family: var(--cfe-font-sans); font-size: 15px; font-weight: 500; cursor: pointer;
    transition: background .15s; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body.login #cfePanelRegister .auth__submit:hover { background: var(--cfe-ink-deep); }
body.login #cfePanelRegister .auth__submit svg { width: 16px; height: 16px; }
body.login #cfePanelRegister .auth__submit:disabled { background: var(--cfe-graphite); opacity: .55; cursor: not-allowed; }
body.login #cfePanelRegister .auth__submit:disabled svg { display: none; }

/* Form-level error banner (reuse login banner look) */
body.login #cfePanelRegister .cfe-login-formerr { margin: 0 0 14px; }

/* Register turnstile spacing */
body.login #cfePanelRegister .cfe-turnstile-field { margin: 4px 0 14px; }