/* @kyc-managed v7 | sha=ec659d00 | 2026-09-08T14:01:10+00:00 | by=claude */
/* ─────────────────────────────────────────────────────────────────────────
   KYC User Login — themed login page styles.

   Uses the KYC Night & Day --kyc-* CSS variable system (loaded from
   kyc-theme-generated.css). Sized for desktop + mobile. Single-column
   centered card layout.
   ───────────────────────────────────────────────────────────────────────── */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

.kyc-login-body {
    min-height: 100vh;
    background: var(--kyc-bg);
    color: var(--kyc-text);
    font-family: var(--kyc-font-body);
    font-size: var(--kyc-font-size);
    line-height: var(--kyc-line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.kyc-login-body *,
.kyc-login-body *::before,
.kyc-login-body *::after {
    box-sizing: border-box;
}

/* ── Shell + card ──────────────────────────────────────────────────────── */

.kyc-login-shell {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kyc-login-card {
    background: var(--kyc-card-bg);
    border: 1px solid var(--kyc-border);
    border-radius: var(--kyc-radius-lg);
    padding: 40px 32px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* ── Brand ─────────────────────────────────────────────────────────────── */

.kyc-login-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
    color: inherit;
    text-decoration: none;
}

/* Both dimensions stay auto and are only BOUNDED, so the mark scales to whichever limit it
   meets first and can never be stretched on one axis. The height cap comes from the theme's
   logo_height on the element itself. */
.kyc-login-brand img {
    max-width: 100%;
    height: auto;
    width: auto;
}

/* Only for the case where the theme attribute is absent — otherwise the theme's own
   [data-theme] rules must win, and an unscoped default here would outrank them. */
html:not([data-theme]) .kyc-login-brand .kyc-logo-dark { display: none; }
html:not([data-theme]) .kyc-login-brand .kyc-logo-light { display: block; }

.kyc-login-brand .custom-logo-link {
    display: block;
}

.kyc-login-brand-text {
    font-family: var(--kyc-font-heading);
    font-weight: var(--kyc-heading-weight);
    font-size: 22px;
    letter-spacing: var(--kyc-title-spacing);
    text-transform: var(--kyc-title-transform);
    color: var(--kyc-title-color);
}

/* ── Title + subtle ────────────────────────────────────────────────────── */

.kyc-login-title {
    font-family: var(--kyc-font-heading);
    font-weight: var(--kyc-heading-weight);
    font-size: 22px;
    margin: 0 0 6px 0;
    text-align: center;
    color: var(--kyc-title-color);
    letter-spacing: var(--kyc-title-spacing);
}

.kyc-login-subtle {
    text-align: center;
    margin: 0 0 24px 0;
    color: var(--kyc-text-muted);
    font-size: 14px;
}

.kyc-login-subtle strong {
    color: var(--kyc-text);
    font-weight: 600;
}

/* ── Error/notice ──────────────────────────────────────────────────────── */

.kyc-login-error {
    background: rgba(var(--kyc-error-rgb), 0.10);
    border: 1px solid rgba(var(--kyc-error-rgb), 0.35);
    color: var(--kyc-error);
    padding: 10px 14px;
    border-radius: var(--kyc-radius);
    margin: 16px 0;
    font-size: 14px;
    text-align: center;
}

/* ── Form ──────────────────────────────────────────────────────────────── */

.kyc-login-form {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kyc-login-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kyc-login-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--kyc-text-muted);
}

.kyc-login-form input[type="text"],
.kyc-login-form input[type="email"],
.kyc-login-form input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    background: var(--kyc-input-bg);
    border: 1px solid var(--kyc-border);
    border-radius: var(--kyc-radius);
    color: var(--kyc-text);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.4;
    transition: var(--kyc-transition);
    -webkit-appearance: none;
    appearance: none;
}

.kyc-login-form input:focus {
    outline: none;
    border-color: var(--kyc-accent);
    box-shadow: 0 0 0 3px var(--kyc-focus-ring);
}

/* TOTP code: large, centered, monospace */
.kyc-login-form-totp input[name="kyc_totp_code"] {
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 24px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    padding: 16px 14px 16px 22px; /* extra-left to compensate letter-spacing */
    font-variant-numeric: tabular-nums;
}

/* ── TOTP segmented code boxes (JS-enhanced #kyc-totp-code) ───────────── */
.kyc-otp-row {
    display: flex;
    gap: 10px;
    width: 100%;
}

.kyc-otp-box {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 1 / 1;
    max-width: 56px;
    padding: 0;
    text-align: center;
    background: var(--kyc-input-bg);
    border: 1px solid var(--kyc-border);
    border-radius: var(--kyc-radius);
    color: var(--kyc-text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 26px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    transition: var(--kyc-transition);
    -webkit-appearance: none;
    appearance: none;
}

.kyc-otp-box:focus {
    outline: none;
    border-color: var(--kyc-accent);
    box-shadow: 0 0 0 3px var(--kyc-focus-ring);
}

.kyc-otp-paste {
    align-self: flex-start;
    margin-top: 2px;
    padding: 0;
    background: none;
    border: none;
    color: var(--kyc-accent);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.kyc-otp-paste:hover {
    text-decoration: underline;
}

/* Real field hidden once the boxes are active; it still submits its value. */
.kyc-otp-realfield {
    display: none;
}

/* ── Remember me ──────────────────────────────────────────────────────── */

.kyc-login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--kyc-text-muted);
    cursor: pointer;
    user-select: none;
}

.kyc-login-remember input[type="checkbox"] {
    margin: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--kyc-accent);
    cursor: pointer;
}

/* ── Submit button (uses primary button vars) ─────────────────────────── */

.kyc-login-submit {
    width: 100%;
    padding: 13px 18px;
    background: var(--kyc-btn-primary-bg);
    color: var(--kyc-btn-primary-text);
    border: 1px solid var(--kyc-btn-primary-border);
    border-radius: var(--kyc-btn-radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--kyc-transition);
    box-shadow: var(--kyc-btn-shadow);
    text-transform: var(--kyc-btn-transform);
    letter-spacing: var(--kyc-btn-spacing);
    margin-top: 6px;
}

.kyc-login-submit:hover {
    background: var(--kyc-btn-primary-hover-bg);
    color: var(--kyc-btn-primary-hover-text);
    transform: translateY(var(--kyc-btn-lift));
    box-shadow: var(--kyc-btn-hover-shadow);
}

.kyc-login-submit:active {
    transform: translateY(0);
}

.kyc-login-submit:focus-visible {
    outline: none;
    box-shadow: var(--kyc-btn-shadow), 0 0 0 3px var(--kyc-focus-ring);
}

/* ── Links section ────────────────────────────────────────────────────── */

.kyc-login-links {
    margin-top: 14px;
    text-align: center;
    font-size: 14px;
}

.kyc-login-links a {
    color: var(--kyc-link);
    text-decoration: none;
    transition: var(--kyc-transition);
}

.kyc-login-links a:hover {
    color: var(--kyc-link-hover);
    text-decoration: underline;
    text-underline-offset: var(--kyc-link-underline-offset);
}

/* Cancel button styled as link */
.kyc-login-cancel {
    background: none;
    border: none;
    color: var(--kyc-text-muted);
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 6px 10px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--kyc-transition);
}

.kyc-login-cancel:hover {
    color: var(--kyc-text);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.kyc-login-footer {
    text-align: center;
    font-size: 14px;
}

.kyc-login-footer a {
    color: var(--kyc-text-muted);
    text-decoration: none;
    transition: var(--kyc-transition);
}

.kyc-login-footer a:hover {
    color: var(--kyc-text);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .kyc-login-card {
        padding: 32px 22px;
        border-radius: var(--kyc-radius);
    }

    .kyc-login-title {
        font-size: 20px;
    }

    .kyc-login-form-totp input[name="kyc_totp_code"] {
        font-size: 20px;
        letter-spacing: 0.35em;
        padding: 14px 14px 14px 18px;
    }

    .kyc-otp-row { gap: 7px; }
    .kyc-otp-box { font-size: 22px; }
}

/* ── Interim-login mode (inside WP auth-check lightbox iframe) ───────────── */
/*
 * When the body has .kyc-login-interim (set server-side when interim-login=1
 * is in the request), render compact for the lightbox iframe:
 *   - No min-height: 100vh — let WP wp-auth-check.js measure natural body
 *     height and size the lightbox to fit (it sets max-height = body.height + 40px)
 *   - No body padding — form fills the iframe edge-to-edge
 *   - No card shadow (the lightbox already has one)
 *   - Tighter card padding + brand margin so nothing clips at top
 */
.kyc-login-body.kyc-login-interim {
    min-height: 0;
    padding: 0;
    background: transparent;
}

.kyc-login-body.kyc-login-interim .kyc-login-shell {
    max-width: 100%;
    gap: 0;
}

.kyc-login-body.kyc-login-interim .kyc-login-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 24px;
}

.kyc-login-body.kyc-login-interim .kyc-login-brand {
    margin-bottom: 16px;
}

.kyc-login-body.kyc-login-interim .kyc-login-brand img,
.kyc-login-body.kyc-login-interim .kyc-login-brand .kyc-login-brand-text {
    max-height: 36px;
    font-size: 18px;
}

.kyc-login-body.kyc-login-interim .kyc-login-title {
    font-size: 18px;
    margin-bottom: 4px;
}

/* ── Recovery: success notice + destructive confirm ──────────────────────── */

.kyc-login-notice {
    background: color-mix(in srgb, var(--kyc-priority-1-text) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--kyc-priority-1-text) 40%, transparent);
    color: var(--kyc-priority-1-text);
    padding: 10px 14px;
    border-radius: var(--kyc-radius);
    margin: 16px 0;
    font-size: 14px;
    text-align: center;
}

.kyc-login-submit.kyc-login-danger {
    background: rgba(var(--kyc-error-rgb), 0.12);
    color: var(--kyc-error);
    border-color: rgba(var(--kyc-error-rgb), 0.45);
    box-shadow: none;
}

.kyc-login-submit.kyc-login-danger:hover {
    background: var(--kyc-error);
    color: var(--kyc-btn-primary-text);
    border-color: var(--kyc-error);
    transform: translateY(var(--kyc-btn-lift));
}

/* ── TOTP verify spinner (replaces the Verify button during auto-verify) ──── */
/*
 * The 6-digit code auto-submits on completion (see kyc-users-login.js). The
 * Verify button is hidden the moment submission fires and this spinner takes
 * its place, so the same code can never be double-submitted by a manual click.
 * Front-end Night & Day tokens only: accent for the moving arc, border for the
 * track. Inherits light/dark automatically. No admin tokens here.
 */
@keyframes kyc-login-spin {
    to { transform: rotate(360deg); }
}

.kyc-login-verify-wrap {
    margin-top: 6px;
}

.kyc-login-verify-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 18px;
    color: var(--kyc-text-secondary, var(--kyc-text));
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
}

.kyc-login-verify-spinner[hidden] {
    display: none;
}

.kyc-login-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--kyc-border);
    border-top-color: var(--kyc-accent);
    border-radius: 50%;
    animation: kyc-login-spin 0.8s linear infinite;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .kyc-login-spinner { animation-duration: 1.6s; }
}