/* ──────────────────────────────────────────────────────────────────────
   login.css — Sign-in page styles (also used by Create account, Reset).
   Loaded by core/pages/login/default/default.tpl
   ────────────────────────────────────────────────────────────────────── */

/* Page header — eyebrow + title + subtitle */
.page-header { margin-bottom: 24px; text-align: center; }
.page-header .page-eyebrow {
    font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-text-tertiary);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin: 0 0 6px;
}
.page-header h1 { font-size: var(--text-h3); font-weight: var(--fw-semibold); letter-spacing: -0.03em; color: var(--color-text-primary); margin: 0 0 6px; }
.page-header .page-subtitle {
    font-size: var(--text-md); color: var(--color-text-secondary);
    letter-spacing: -0.008em; line-height: 1.5;
    margin: 0 auto; max-width: 440px;
}

/* Auth card — centered Apple-style panel */
.auth-card-wrap { max-width: 440px; margin: 8px auto 32px; }
.auth-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 32px;
}

.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form .form-group { display: flex; flex-direction: column; gap: 6px; }
.auth-form .form-label {
    font-size: var(--text-sm); font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
    letter-spacing: -0.004em;
}
.auth-form .form-input {
    padding: 11px 14px;
    font-size: var(--text-md); font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-surface-secondary);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: all var(--transition-fast);
    width: 100%;
}
.auth-form .form-input:focus {
    outline: none;
    background: var(--color-surface);
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-light);
}

.password-wrapper { position: relative; }
.password-wrapper .form-input { padding-right: 42px; }
.password-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 32px; border: 0; background: transparent;
    color: var(--color-text-tertiary); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px;
    transition: background var(--transition-fast);
}
.password-toggle:hover { background: var(--color-surface-secondary); color: var(--color-text-primary); }
.password-toggle svg { width: 16px; height: 16px; }

.form-row-inline {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin: -2px 0 4px;
}
.checkbox-label {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: var(--text-base); color: var(--color-text-secondary);
    cursor: pointer; user-select: none;
}
.form-checkbox {
    accent-color: var(--color-accent);
    width: 14px; height: 14px;
    margin: 0;
    cursor: pointer;
}

.btn-full { width: 100%; }
.btn-lg { height: 42px; padding: 0 18px; font-size: var(--text-md); font-weight: var(--fw-medium); }

.auth-link-row { text-align: center; margin-top: 14px; }
.auth-link {
    font-size: var(--text-base); color: var(--color-accent);
    text-decoration: none; transition: opacity var(--transition-fast);
}
.auth-link:hover { color: var(--color-accent); opacity: 0.8; text-decoration: none; }

.auth-footer {
    text-align: center;
    font-size: var(--text-base); color: var(--color-text-secondary);
    margin-top: 20px;
    padding-top: 20px;
    border-top: 0.5px solid var(--color-border);
}

/* Inline error / notice (used when WHMCS reports a failed login) */
.auth-notice {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--color-red-bg, var(--color-red-bg));
    color: var(--color-red-text, var(--color-red-text));
    font-size: var(--text-base); line-height: 1.45;
    margin-bottom: 16px;
}
.auth-notice.success {
    background: var(--color-green-bg, rgba(52, 199, 89, 0.10));
    color: var(--color-green-text, var(--color-green-text));
}
.auth-notice.info {
    background: var(--color-blue-bg, rgba(0, 122, 255, 0.10));
    color: var(--color-blue-text, #0040dd);
}

/* CAPTCHA (rendered when enabled for the login form) */
.auth-captcha { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 16px; max-width: 100%; }
.auth-captcha .g-recaptcha,
.auth-captcha .h-captcha { display: inline-block; }
.auth-captcha img { border-radius: var(--radius-sm, 8px); border: 0.5px solid var(--color-border); }
.auth-captcha input[type="text"] {
    height: 42px; padding: 0 14px; max-width: 220px; box-sizing: border-box;
    border: 0.5px solid var(--color-border); border-radius: 10px;
    background: var(--color-surface); color: var(--color-text-primary);
    font-size: var(--text-md); font-family: inherit; text-align: center; letter-spacing: 2px;
}
.auth-captcha input[type="text"]:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }

/* Social / SSO buttons row (rendered when WHMCS provides $ssoEnabled providers) */
.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 18px 0;
    font-size: var(--text-sm); color: var(--color-text-tertiary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.auth-divider::before,
.auth-divider::after {
    content: ""; flex: 1; height: 0.5px;
    background: var(--color-border);
}
.auth-sso-row { display: flex; flex-direction: column; gap: 10px; }
.auth-sso-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    height: 40px; padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--text-md); font-weight: var(--fw-medium);
    text-decoration: none;
    transition: all var(--transition-fast);
}
.auth-sso-btn:hover { background: var(--color-surface-secondary); color: var(--color-text-primary); text-decoration: none; }
.auth-sso-btn img,
.auth-sso-btn svg { width: 18px; height: 18px; }