/**
 * Re-skins EXT:nr_passkeys_fe's own passkey-fe.css to match the site theme instead of
 * shipping our own copy of their markup rules. Class selectors beat the vendor's :root
 * declaration on specificity, so this wins regardless of stylesheet load order.
 *
 * Only visual tokens are touched here - element structure, ids, and the nr-passkeys-fe-*
 * class names stay exactly as the vendor ships them, because PasskeyLogin.js/
 * PasskeyRecovery.js select on those classes directly.
 */
.nr-passkeys-fe-card,
.nr-passkeys-fe-management,
.nr-passkeys-fe-enrollment,
.nr-passkeys-fe-enrollment-form,
.nr-passkeys-fe-enrollment-success,
.nr-passkeys-fe-recovery-codes {
    --nr-passkeys-fe-primary: #0066bc;
    --nr-passkeys-fe-primary-hover: #00549b;
    --nr-passkeys-fe-primary-focus: rgba(0, 102, 188, 0.25);
    --nr-passkeys-fe-text: var(--bs-body-color, #585961);
    --nr-passkeys-fe-text-light: var(--bs-secondary-color, #636469);
    --nr-passkeys-fe-font: 'Nunito', sans-serif;
    --nr-passkeys-fe-radius: var(--bs-border-radius, 0.375rem);
    --nr-passkeys-fe-radius-sm: var(--bs-border-radius-sm, 0.25rem);
}

/* The login tab card already sits inside our own .card-body (see Page/Login.html) -
   the vendor's own card chrome would draw a second, redundant border/background. Scoped
   to .account-pages so the Management/Enrollment plugin (placed on normal content pages,
   not the login page) keep their own card look. */
.account-pages .nr-passkeys-fe-card {
    max-width: none;
    border: 0;
    border-radius: 0;
}

/* Secondary look on the login page: "Anmelden" (password) stays the one solid primary
   action, the passkey button next to it is the quieter alternative - the vendor's own
   .nr-passkeys-fe-btn--passkey rule otherwise forces a filled background regardless of
   the btn-outline-primary class already on the element. */
.account-pages .nr-passkeys-fe-btn--passkey {
    background-color: transparent;
    color: var(--nr-passkeys-fe-primary);
}

.account-pages .nr-passkeys-fe-btn--passkey:hover,
.account-pages .nr-passkeys-fe-btn--passkey:focus {
    background-color: var(--nr-passkeys-fe-primary);
    color: #fff;
}