/**
 * nr_passkeys_fe - Frontend Styles
 *
 * BEM-based styles for passkey plugin components.
 * All classes use the .nr-passkeys-fe- prefix.
 * Brand colors: #2F99A4 (primary), #585961 (text), #CCCDCC (grey).
 * Font: system fonts only.
 */

/* ============================================================
   CSS Custom Properties
   ============================================================ */

:root {
  --nr-passkeys-fe-primary: #2F99A4;
  --nr-passkeys-fe-primary-hover: #267d86;
  --nr-passkeys-fe-primary-focus: rgba(47, 153, 164, 0.25);
  --nr-passkeys-fe-text: #585961;
  --nr-passkeys-fe-text-light: #636469;
  --nr-passkeys-fe-grey: #CCCDCC;
  --nr-passkeys-fe-grey-light: #f5f5f5;
  --nr-passkeys-fe-border: #dee2e6;
  --nr-passkeys-fe-error: #842029;
  --nr-passkeys-fe-error-bg: #f8d7da;
  --nr-passkeys-fe-error-border: #f5c2c7;
  --nr-passkeys-fe-success: #0f5132;
  --nr-passkeys-fe-success-bg: #d1e7dd;
  --nr-passkeys-fe-success-border: #badbcc;
  --nr-passkeys-fe-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --nr-passkeys-fe-radius: 0.5rem;
  --nr-passkeys-fe-radius-sm: 0.375rem;
}

/* ============================================================
   Card container
   ============================================================ */

.nr-passkeys-fe-card {
  max-width: 420px;
  font-family: var(--nr-passkeys-fe-font);
  color: var(--nr-passkeys-fe-text);
  background: #fff;
  border: 1px solid var(--nr-passkeys-fe-border);
  border-radius: var(--nr-passkeys-fe-radius);
  overflow: hidden;
}

.nr-passkeys-fe-card__heading {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--nr-passkeys-fe-text);
  margin: 0;
  padding: 1.5rem 1.5rem 0;
}

/* ============================================================
   Tabs (Layout B - Tabbed)
   ============================================================ */

.nr-passkeys-fe-tabs {
  display: flex;
  border-bottom: 2px solid var(--nr-passkeys-fe-border);
}

.nr-passkeys-fe-tab {
  flex: 1;
  padding: 0.875rem 1rem;
  font-family: var(--nr-passkeys-fe-font);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--nr-passkeys-fe-text-light);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  text-align: center;
}

.nr-passkeys-fe-tab:hover {
  color: var(--nr-passkeys-fe-text);
}

.nr-passkeys-fe-tab--active {
  color: var(--nr-passkeys-fe-primary);
  border-bottom-color: var(--nr-passkeys-fe-primary);
  font-weight: 600;
}

.nr-passkeys-fe-tabpanel {
  padding: 1.5rem;
}

/* ============================================================
   Passkey content (icon + button layout)
   ============================================================ */

.nr-passkeys-fe-passkey-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.nr-passkeys-fe-passkey-icon {
  color: var(--nr-passkeys-fe-primary);
  line-height: 1;
}

/* ============================================================
   Stacked layout (Layout C - Standalone)
   ============================================================ */

.nr-passkeys-fe-card--stacked .nr-passkeys-fe-stacked {
  padding: 1.5rem;
}

/* ============================================================
   Base button styles
   ============================================================ */

.nr-passkeys-fe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.625rem 1.5rem;
  font-family: var(--nr-passkeys-fe-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: var(--nr-passkeys-fe-radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  white-space: nowrap;
}

.nr-passkeys-fe-btn:focus-visible {
  outline: 2px solid var(--nr-passkeys-fe-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 0.2rem var(--nr-passkeys-fe-primary-focus);
}

.nr-passkeys-fe-btn:disabled,
.nr-passkeys-fe-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.nr-passkeys-fe-btn--primary {
  background-color: var(--nr-passkeys-fe-primary);
  border-color: var(--nr-passkeys-fe-primary);
  color: #fff;
}

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

.nr-passkeys-fe-btn--passkey {
  background-color: var(--nr-passkeys-fe-primary);
  border-color: var(--nr-passkeys-fe-primary);
  color: #fff;
  min-width: 220px;
  padding: 0.75rem 1.75rem;
  font-size: 1.0625rem;
}

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

.nr-passkeys-fe-btn--fullwidth {
  width: 100%;
}

.nr-passkeys-fe-btn--secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

.nr-passkeys-fe-btn--secondary:hover,
.nr-passkeys-fe-btn--secondary:focus {
  background-color: #5c636a;
  border-color: #565e64;
  color: #fff;
}

.nr-passkeys-fe-btn--danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.nr-passkeys-fe-btn--danger:hover,
.nr-passkeys-fe-btn--danger:focus {
  background-color: #bb2d3b;
  border-color: #b02a37;
  color: #fff;
}

.nr-passkeys-fe-btn--warning {
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;
}

.nr-passkeys-fe-btn--warning:hover,
.nr-passkeys-fe-btn--warning:focus {
  background-color: #ffca2c;
  border-color: #ffc720;
  color: #000;
}

.nr-passkeys-fe-btn--ghost {
  background-color: transparent;
  border-color: currentColor;
  color: inherit;
}

.nr-passkeys-fe-btn--ghost:hover,
.nr-passkeys-fe-btn--ghost:focus {
  background-color: rgba(0, 0, 0, 0.05);
}

.nr-passkeys-fe-btn--sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
}

.nr-passkeys-fe-btn--lg {
  padding: 0.75rem 1.75rem;
  font-size: 1.125rem;
}

.nr-passkeys-fe-btn__icon {
  display: inline-flex;
  align-items: center;
}

/* ============================================================
   Links row
   ============================================================ */

.nr-passkeys-fe-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nr-passkeys-fe-links__separator {
  color: var(--nr-passkeys-fe-grey);
  font-size: 0.875rem;
}

.nr-passkeys-fe-link {
  font-size: 0.875rem;
  color: var(--nr-passkeys-fe-text-light);
  text-decoration: none;
  transition: color 0.15s;
}

.nr-passkeys-fe-link:hover {
  color: var(--nr-passkeys-fe-primary);
  text-decoration: underline;
}

/* ============================================================
   Form elements (felogin password tab + recovery)
   ============================================================ */

.nr-passkeys-fe-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.nr-passkeys-fe-field {
  margin-bottom: 1rem;
}

.nr-passkeys-fe-field--checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nr-passkeys-fe-label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--nr-passkeys-fe-text);
}

.nr-passkeys-fe-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--nr-passkeys-fe-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nr-passkeys-fe-text);
  background-color: #fff;
  border: 1px solid var(--nr-passkeys-fe-grey);
  border-radius: var(--nr-passkeys-fe-radius-sm);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

.nr-passkeys-fe-input:focus {
  border-color: var(--nr-passkeys-fe-primary);
  outline: 2px solid var(--nr-passkeys-fe-primary);
  outline-offset: -2px;
  box-shadow: 0 0 0 0.2rem var(--nr-passkeys-fe-primary-focus);
}

.nr-passkeys-fe-message {
  margin-bottom: 1rem;
}

/* ============================================================
   Status and error alerts
   ============================================================ */

.nr-passkeys-fe-login__error,
.nr-passkeys-fe-recovery__error,
.nr-passkeys-fe-management__error,
.nr-passkeys-fe-enrollment__error,
.nr-passkeys-fe-enrollment-form__error,
.nr-passkeys-fe-recovery-codes__error {
  color: var(--nr-passkeys-fe-error);
  background-color: var(--nr-passkeys-fe-error-bg);
  border: 1px solid var(--nr-passkeys-fe-error-border);
  border-radius: var(--nr-passkeys-fe-radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.nr-passkeys-fe-login__status,
.nr-passkeys-fe-recovery__status,
.nr-passkeys-fe-management__status,
.nr-passkeys-fe-enrollment__status,
.nr-passkeys-fe-enrollment-form__status,
.nr-passkeys-fe-recovery-codes__status,
.nr-passkeys-fe-enrollment-form__success {
  color: var(--nr-passkeys-fe-success);
  background-color: var(--nr-passkeys-fe-success-bg);
  border: 1px solid var(--nr-passkeys-fe-success-border);
  border-radius: var(--nr-passkeys-fe-radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.nr-passkeys-fe-management__warning,
.nr-passkeys-fe-recovery-codes__warning {
  color: #664d03;
  background-color: #fff3cd;
  border: 1px solid #ffecb5;
  border-radius: var(--nr-passkeys-fe-radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* ============================================================
   Generic form elements (BEM pattern fallback)
   ============================================================ */

.nr-passkeys-fe-recovery__input,
.nr-passkeys-fe-management__input,
.nr-passkeys-fe-enrollment__input,
.nr-passkeys-fe-enrollment-form__input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-family: var(--nr-passkeys-fe-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--nr-passkeys-fe-text);
  background-color: #fff;
  border: 1px solid var(--nr-passkeys-fe-grey);
  border-radius: var(--nr-passkeys-fe-radius-sm);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

.nr-passkeys-fe-recovery__input:focus,
.nr-passkeys-fe-management__input:focus,
.nr-passkeys-fe-enrollment__input:focus,
.nr-passkeys-fe-enrollment-form__input:focus {
  border-color: var(--nr-passkeys-fe-primary);
  outline: 2px solid var(--nr-passkeys-fe-primary);
  outline-offset: -2px;
  box-shadow: 0 0 0 0.2rem var(--nr-passkeys-fe-primary-focus);
}

.nr-passkeys-fe-recovery__label,
.nr-passkeys-fe-enrollment__label,
.nr-passkeys-fe-enrollment-form__label {
  display: inline-block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

.nr-passkeys-fe-recovery__field,
.nr-passkeys-fe-enrollment-form__field {
  margin-bottom: 1rem;
}

/* ============================================================
   Recovery code form (inline)
   ============================================================ */

.nr-passkeys-fe-recovery {
  max-width: 400px;
}

.nr-passkeys-fe-recovery__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 1rem;
  color: var(--nr-passkeys-fe-text);
}

.nr-passkeys-fe-recovery__description {
  color: var(--nr-passkeys-fe-text-light);
  margin-bottom: 1.5rem;
}

.nr-passkeys-fe-recovery__input--code {
  font-family: monospace;
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  text-align: center;
  max-width: 180px;
}

.nr-passkeys-fe-recovery__hint {
  display: block;
  font-size: 0.8rem;
  color: var(--nr-passkeys-fe-text-light);
  margin-top: 0.25rem;
}

.nr-passkeys-fe-recovery__back {
  display: inline-block;
  margin-top: 1rem;
}

/* ============================================================
   Login plugin (legacy BEM compat)
   ============================================================ */

.nr-passkeys-fe-login {
  max-width: 400px;
}

.nr-passkeys-fe-login__actions {
  margin-bottom: 1rem;
}

.nr-passkeys-fe-login__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.nr-passkeys-fe-login__link {
  font-size: 0.875rem;
  color: var(--nr-passkeys-fe-text-light);
  text-decoration: none;
}

.nr-passkeys-fe-login__link:hover {
  text-decoration: underline;
}

/* ============================================================
   Management plugin
   ============================================================ */

.nr-passkeys-fe-management {
  max-width: 800px;
}

.nr-passkeys-fe-management__section-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--nr-passkeys-fe-border);
}

.nr-passkeys-fe-management__subtitle {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.nr-passkeys-fe-management__passkeys {
  margin-bottom: 2rem;
}

.nr-passkeys-fe-management__table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
}

.nr-passkeys-fe-management__th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--nr-passkeys-fe-border);
  font-weight: 600;
  white-space: nowrap;
}

.nr-passkeys-fe-management__td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--nr-passkeys-fe-border);
  vertical-align: middle;
}

.nr-passkeys-fe-management__row:hover {
  background-color: var(--nr-passkeys-fe-grey-light);
}

.nr-passkeys-fe-management__td--actions {
  white-space: nowrap;
  text-align: right;
}

.nr-passkeys-fe-management__th--actions {
  text-align: right;
}

.nr-passkeys-fe-management__td--actions .nr-passkeys-fe-btn + .nr-passkeys-fe-btn {
  margin-left: 0.25rem;
}

.nr-passkeys-fe-management__rename-input {
  font-size: 0.9rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--nr-passkeys-fe-primary);
  border-radius: 0.25rem;
  min-width: 150px;
}

.nr-passkeys-fe-management__empty {
  color: var(--nr-passkeys-fe-text-light);
  font-style: italic;
  padding: 1rem 0;
}

.nr-passkeys-fe-management__register {
  border: 1px solid var(--nr-passkeys-fe-border);
  border-radius: var(--nr-passkeys-fe-radius);
  padding: 1rem 1.25rem;
  background-color: var(--nr-passkeys-fe-grey-light);
}

.nr-passkeys-fe-management__register-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

.nr-passkeys-fe-management__register-form .nr-passkeys-fe-management__input {
  max-width: 250px;
}

.nr-passkeys-fe-management__label-text {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.nr-passkeys-fe-management__recovery {
  border: 1px solid var(--nr-passkeys-fe-border);
  border-radius: var(--nr-passkeys-fe-radius);
  padding: 1rem 1.25rem;
}

.nr-passkeys-fe-management__recovery-description {
  color: var(--nr-passkeys-fe-text-light);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.nr-passkeys-fe-management__recovery-count {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

/* ============================================================
   Enrollment plugin
   ============================================================ */

.nr-passkeys-fe-enrollment {
  max-width: 560px;
}

.nr-passkeys-fe-enrollment__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.nr-passkeys-fe-enrollment__description {
  color: #495057;
  margin-bottom: 1.5rem;
}

.nr-passkeys-fe-enrollment__benefits {
  margin-top: 0.5rem;
  padding-left: 1.25rem;
}

.nr-passkeys-fe-enrollment__benefits li {
  margin-bottom: 0.25rem;
}

.nr-passkeys-fe-enrollment__grace-period {
  color: #664d03;
  background-color: #fff3cd;
  border: 1px solid #ffecb5;
  border-radius: var(--nr-passkeys-fe-radius-sm);
  padding: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.nr-passkeys-fe-enrollment__field {
  margin-bottom: 1rem;
}

.nr-passkeys-fe-enrollment__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.nr-passkeys-fe-enrollment__unsupported {
  margin-top: 1rem;
}

.nr-passkeys-fe-enrollment__link {
  font-size: 0.875rem;
  color: var(--nr-passkeys-fe-text-light);
  text-decoration: none;
}

.nr-passkeys-fe-enrollment__link:hover {
  text-decoration: underline;
}

/* ============================================================
   Enrollment success
   ============================================================ */

.nr-passkeys-fe-enrollment-success {
  max-width: 480px;
  text-align: center;
  padding: 2rem 1rem;
}

.nr-passkeys-fe-enrollment-success__icon {
  color: #198754;
  margin-bottom: 1rem;
}

.nr-passkeys-fe-enrollment-success__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.nr-passkeys-fe-enrollment-success__message {
  color: var(--nr-passkeys-fe-text-light);
  margin-bottom: 1.5rem;
}

.nr-passkeys-fe-enrollment-success__actions {
  display: flex;
  justify-content: center;
}

/* ============================================================
   Recovery codes
   ============================================================ */

.nr-passkeys-fe-recovery-codes {
  max-width: 560px;
}

.nr-passkeys-fe-recovery-codes__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.nr-passkeys-fe-recovery-codes__warning {
  color: var(--nr-passkeys-fe-error);
  background-color: var(--nr-passkeys-fe-error-bg);
  border: 1px solid var(--nr-passkeys-fe-error-border);
  border-radius: var(--nr-passkeys-fe-radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}

.nr-passkeys-fe-recovery-codes__warning p {
  margin: 0.25rem 0 0;
}

.nr-passkeys-fe-recovery-codes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 1rem;
  background-color: var(--nr-passkeys-fe-grey-light);
  border: 1px solid var(--nr-passkeys-fe-border);
  border-radius: var(--nr-passkeys-fe-radius-sm);
}

.nr-passkeys-fe-recovery-codes__code {
  text-align: center;
  padding: 0.25rem;
}

.nr-passkeys-fe-recovery-codes__code code {
  font-family: monospace;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: #212529;
}

.nr-passkeys-fe-recovery-codes__remaining {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.nr-passkeys-fe-recovery-codes__actions {
  margin-bottom: 1.5rem;
}

.nr-passkeys-fe-recovery-codes__generate {
  border-top: 1px solid var(--nr-passkeys-fe-border);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

.nr-passkeys-fe-recovery-codes__subtitle {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.nr-passkeys-fe-recovery-codes__generate-hint {
  color: var(--nr-passkeys-fe-text-light);
  font-size: 0.875rem;
  margin-bottom: 0.75rem;
}

.nr-passkeys-fe-recovery-codes__nav {
  margin-top: 1.5rem;
}

.nr-passkeys-fe-recovery-codes__back {
  font-size: 0.875rem;
  color: var(--nr-passkeys-fe-text-light);
  text-decoration: none;
}

.nr-passkeys-fe-recovery-codes__back:hover {
  text-decoration: underline;
}

.nr-passkeys-fe-tab:focus-visible {
  outline: 2px solid var(--nr-passkeys-fe-primary);
  outline-offset: 2px;
}

.nr-passkeys-fe-link:focus-visible,
.nr-passkeys-fe-recovery__back:focus-visible,
.nr-passkeys-fe-enrollment__link:focus-visible,
.nr-passkeys-fe-recovery-codes__back:focus-visible {
  outline: 2px solid var(--nr-passkeys-fe-primary);
  outline-offset: 2px;
}

.nr-passkeys-fe-banner__dismiss:focus-visible {
  outline: 2px solid var(--nr-passkeys-fe-primary);
  outline-offset: 2px;
}

/* ============================================================
   Enrollment banner
   ============================================================ */

.nr-passkeys-fe-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background-color: #cff4fc;
  border: 1px solid #9eeaf9;
  border-radius: var(--nr-passkeys-fe-radius);
  margin-bottom: 1rem;
}

.nr-passkeys-fe-banner--required,
.nr-passkeys-fe-banner--enforced {
  background-color: #fff3cd;
  border-color: #ffecb5;
}

.nr-passkeys-fe-banner__icon {
  flex-shrink: 0;
  color: #0dcaf0;
  font-size: 1.5rem;
  line-height: 1;
}

.nr-passkeys-fe-banner--required .nr-passkeys-fe-banner__icon,
.nr-passkeys-fe-banner--enforced .nr-passkeys-fe-banner__icon {
  color: #ffc107;
}

.nr-passkeys-fe-banner__content {
  flex: 1;
}

.nr-passkeys-fe-banner__title {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.nr-passkeys-fe-banner__description {
  font-size: 0.9rem;
  color: #495057;
  margin-bottom: 0.75rem;
}

.nr-passkeys-fe-banner__actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.nr-passkeys-fe-banner__dismiss {
  font-size: 0.8rem;
  background: none;
  border: none;
  color: var(--nr-passkeys-fe-text-light);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  text-decoration: underline;
}

.nr-passkeys-fe-banner__dismiss:hover {
  color: #495057;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 480px) {
  .nr-passkeys-fe-card {
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .nr-passkeys-fe-tabpanel {
    padding: 1.25rem 1rem;
  }

  .nr-passkeys-fe-management__register-form {
    flex-direction: column;
    align-items: stretch;
  }

  .nr-passkeys-fe-management__register-form .nr-passkeys-fe-management__input {
    max-width: 100%;
  }

  .nr-passkeys-fe-enrollment__actions {
    flex-direction: column;
  }

  .nr-passkeys-fe-management__td--actions {
    text-align: left;
  }

  .nr-passkeys-fe-recovery-codes__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nr-passkeys-fe-banner {
    flex-direction: column;
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .nr-passkeys-fe-btn,
    .nr-passkeys-fe-input,
    .nr-passkeys-fe-tab,
    .nr-passkeys-fe-link,
    .nr-passkeys-fe-banner,
    .nr-passkeys-fe-credential-row {
        transition: none;
    }
}

/* ============================================================
   Forced colors (high-contrast mode)
   ============================================================ */

@media (forced-colors: active) {
    .nr-passkeys-fe-btn:focus-visible,
    .nr-passkeys-fe-input:focus,
    .nr-passkeys-fe-tab:focus-visible,
    .nr-passkeys-fe-link:focus-visible {
        outline: 2px solid ButtonText;
        outline-offset: 2px;
    }
}