/* Solid Security's two-factor screens on wp-login.php (2026-09-26): the
   onboarding flow (#itsec-2fa-on-board: Select Methods, Mobile App, Backup
   Codes, summary) and the login prompt (form#itsec-2fa). wp-login.php loads
   no theme stylesheet, so the --dk-* values are literals, as in the theme's
   login_enqueue_scripts block: canvas #080C0E, elevated #10151E, line
   rgba(255,255,255,.07), control rgba(255,255,255,.16), surface-2
   rgba(255,255,255,.04), surface-3 rgba(255,255,255,.06), body #C7CBD0,
   muted rgba(255,255,255,.55), accent #C9A84C / #D4B978, gold #B8964E on
   #080C0E, hover slate #4A5568 on #FAF7EF, pos #4E9B77, warn #E0913D.
   Buttons follow the site standard: primary gold, ghost transparent with a
   1px rgba(255,255,255,.3) edge, Inter 600 15px, 4px radius, 44px tall. */

/* ── Shared: type, links, content ─────────────────────────────────────── */
.login #itsec-2fa-on-board,
.login form#itsec-2fa {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* The onboarding form is the card: the theme's 24px card padding, not the plugin's 26px */
.login #itsec-2fa-on-board { padding: 24px !important; }
.login #itsec-2fa-on-board .itsec-screen__content h2,
.login #itsec-2fa-on-board .itsec-screen__content h3 {
  color: #FFFFFF; font-weight: 700; letter-spacing: normal;
}
.login #itsec-2fa-on-board .itsec-screen__content h2 { font-size: 22px; line-height: 1.25; margin: 0 0 12px; }
.login #itsec-2fa-on-board .itsec-screen__content p,
.login #itsec-2fa-on-board .itsec-screen__content li,
.login form#itsec-2fa p {
  color: #C7CBD0; font-size: 15px; line-height: 1.55;
}
.login #itsec-2fa-on-board .itsec-screen__content a,
.login form#itsec-2fa a,
.login #itsec-2fa-on-board .button-link.itsec-provider__action,
.login #itsec-2fa-on-board .button-link.itsec-totp__view-secret,
.login #itsec-2fa-on-board .button-link#itsec-email__cannot_find {
  color: #C9A84C; text-decoration: none; font-weight: 600; box-shadow: none;
}
.login #itsec-2fa-on-board .itsec-screen__content a:hover,
.login form#itsec-2fa a:hover,
.login #itsec-2fa-on-board .button-link.itsec-provider__action:hover,
.login #itsec-2fa-on-board .button-link.itsec-totp__view-secret:hover,
.login #itsec-2fa-on-board .button-link#itsec-email__cannot_find:hover {
  color: #D4B978; text-decoration: underline;
}
.login .itsec-screen--providers h2 + p { border-bottom-color: rgba(255,255,255,.07); }

/* ── Buttons: one size, two roles ─────────────────────────────────────── */
.login #itsec-2fa-on-board .itsec-screen__actions .button,
.login #itsec-2fa-on-board .itsec-screen__actions .button-link,
.login #itsec-2fa-on-board .itsec-totp__device-switcher .button,
.login #itsec-2fa-on-board .itsec-totp__regenerate-secret,
.login #itsec-2fa-on-board .itsec-backup-codes__generate-codes,
.login form#itsec-2fa .button {
  display: inline-flex !important; align-items: center; justify-content: center;
  box-sizing: border-box; height: auto !important; min-height: 44px !important;
  margin: 0 !important; padding: 10px 20px !important; border-radius: 4px !important;
  font-family: inherit !important; font-size: 15px !important; font-weight: 600 !important;
  line-height: 1.2 !important; letter-spacing: normal !important; text-transform: none !important;
  text-decoration: none !important; text-shadow: none !important; box-shadow: none !important;
  cursor: pointer; float: none !important; width: auto;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Primary (Continue, Verify, Complete, Authenticate, the pressed device) */
.login #itsec-2fa-on-board .button-primary,
.login form#itsec-2fa .button-primary {
  background: #B8964E !important; border: 2px solid #B8964E !important; color: #080C0E !important;
}
.login #itsec-2fa-on-board .button-primary:is(:hover, :active),
.login form#itsec-2fa .button-primary:is(:hover, :active) {
  background: #4A5568 !important; border-color: #4A5568 !important; color: #FAF7EF !important;
}
/* Ghost (Skip, Back, Cancel, Download, Resend, the other device, Generate) */
.login #itsec-2fa-on-board .itsec-screen__actions .button-link,
.login #itsec-2fa-on-board .itsec-screen__actions .button:not(.button-primary),
.login #itsec-2fa-on-board .itsec-totp__device-switcher .button:not(.button-primary),
.login #itsec-2fa-on-board .itsec-totp__regenerate-secret,
.login #itsec-2fa-on-board .itsec-backup-codes__generate-codes,
.login form#itsec-2fa .button:not(.button-primary) {
  background: transparent !important; border: 1px solid rgba(255,255,255,.3) !important; color: #FFFFFF !important;
}
.login #itsec-2fa-on-board .itsec-screen__actions .button-link:is(:hover, :active),
.login #itsec-2fa-on-board .itsec-screen__actions .button:not(.button-primary):is(:hover, :active),
.login #itsec-2fa-on-board .itsec-totp__device-switcher .button:not(.button-primary):is(:hover, :active),
.login #itsec-2fa-on-board .itsec-totp__regenerate-secret:is(:hover, :active),
.login #itsec-2fa-on-board .itsec-backup-codes__generate-codes:is(:hover, :active),
.login form#itsec-2fa .button:not(.button-primary):is(:hover, :active) {
  background: rgba(255,255,255,.06) !important; border-color: #C9A84C !important; color: #FFFFFF !important;
}
/* Cancel abandons the method: the plugin paints it red; keep the ghost, red edge */
.login #itsec-2fa-on-board .itsec-screen__actions--cancel { border-color: rgba(226,94,85,.6) !important; color: #E25E55 !important; }
.login #itsec-2fa-on-board .itsec-screen__actions--cancel:is(:hover, :active) { border-color: #E25E55 !important; background: rgba(226,94,85,.10) !important; color: #E25E55 !important; }
/* Disabled (Continue before a method is configured): the site-wide disabled primary */
.login #itsec-2fa-on-board .button-primary:disabled,
.login #itsec-2fa-on-board .button-primary[disabled] {
  background: transparent !important; border-color: rgba(184,150,78,.3) !important; color: rgba(255,255,255,.55) !important; cursor: not-allowed;
}
.login #itsec-2fa-on-board .button:focus-visible,
.login #itsec-2fa-on-board .button-link:focus-visible,
.login form#itsec-2fa .button:focus-visible {
  outline: 2px solid #C9A84C !important; outline-offset: 2px; box-shadow: none !important;
}
/* Small: Generate New Secret */
.login #itsec-2fa-on-board .itsec-totp__regenerate-secret { min-height: 36px !important; padding: 6px 14px !important; font-size: 13px !important; margin: 0 auto 16px !important; display: flex !important; width: max-content; }
/* Inline actions (Enable / Disable next to a method) stay links */
.login #itsec-2fa-on-board .itsec-provider__action { min-height: 0; padding: 0; font-size: 13px; }

/* ── Action rows ──────────────────────────────────────────────────────── */
.login #itsec-2fa-on-board .itsec-screen__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 24px;
}
.login #itsec-2fa-on-board .itsec-screen__actions .itsec-screen__actions { margin-top: 0; width: 100%; }
.login #itsec-2fa-on-board .itsec-screen__actions-primary { float: none; display: flex; gap: 12px; margin-left: auto; }
.login #itsec-2fa-on-board .itsec-screen__actions--download { margin-right: 0 !important; }
.login #itsec-2fa-on-board .itsec-screen__actions > .button-primary:only-child { margin-left: auto !important; }

/* ── Select Methods ───────────────────────────────────────────────────── */
.login #itsec-2fa-on-board .itsec-providers__list { list-style: none; margin: 0; padding: 0; }
.login #itsec-2fa-on-board .itsec-provider { border-bottom: 1px solid rgba(255,255,255,.07); padding: 16px 0; }
.login #itsec-2fa-on-board .itsec-provider:last-child { border-bottom: 0; }
.login #itsec-2fa-on-board .itsec-provider h3 { margin: 0; }
.login #itsec-2fa-on-board .itsec-provider h3.dashicons-before::before { color: #C9A84C; margin-right: 4px; }
.login #itsec-2fa-on-board .itsec-provider p { color: #C7CBD0; }
.login #itsec-2fa-on-board .itsec-provider__status { padding: 2px 5px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.login #itsec-2fa-on-board .itsec-provider__status--enabled { background: rgba(78,155,119,.14); color: #4E9B77; }
.login #itsec-2fa-on-board .itsec-provider__status--disabled { background: rgba(255,255,255,.06); color: rgba(255,255,255,.55); }
.login #itsec-2fa-on-board .itsec-provider__status--not-configured { background: rgba(224,145,61,.14); color: #E0913D; }
/* The plugin's configure control is a gold chevron floated to the right of
   the row. It reads as a link instead, next to the status pill, like the
   Email row's own Enable link: "Enable" until the method is enabled, then
   "Manage" (the same click opens that method's setup card). */
.login #itsec-2fa-on-board .itsec-provider { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; }
.login #itsec-2fa-on-board .itsec-provider h3 { order: 1; font-size: 14px; white-space: nowrap; }
/* The pill and the plugin's Enable/Disable link become row items themselves,
   so the configure link can sit between them and the Disable link. */
.login #itsec-2fa-on-board .itsec-provider__status-actions-container { display: contents; }
.login #itsec-2fa-on-board .itsec-provider__status { order: 2; white-space: nowrap; }
.login #itsec-2fa-on-board .itsec-provider__action { order: 4; white-space: nowrap; }
/* A row with no configure link (Email) right-aligns its own Enable link too */
.login #itsec-2fa-on-board .itsec-provider__action--enable { margin-left: auto; }
.login #itsec-2fa-on-board .itsec-provider__configure {
  order: 3; position: static; top: auto; right: auto; width: auto; height: auto; line-height: inherit; margin-left: auto;
  color: #C9A84C; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.login #itsec-2fa-on-board .itsec-provider__configure::before { content: none; }
.login #itsec-2fa-on-board .itsec-provider__configure::after { content: "Enable"; }
.login #itsec-2fa-on-board .itsec-provider:has(.itsec-provider__status--enabled) .itsec-provider__configure::after { content: "Manage"; }
.login #itsec-2fa-on-board .itsec-provider__configure:hover { color: #D4B978; text-decoration: underline; }
.login #itsec-2fa-on-board .itsec-provider__configure:focus-visible { outline: 2px solid #C9A84C; outline-offset: 2px; }
.login #itsec-2fa-on-board .itsec-provider p { order: 5; width: 100%; flex-basis: 100%; }

/* ── Mobile App ───────────────────────────────────────────────────────── */
.login #itsec-2fa-on-board .itsec-totp__device-switcher { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.login #itsec-2fa-on-board .itsec-totp__device-switcher .button { min-width: 120px; margin-left: 0 !important; }
.login #itsec-2fa-on-board .itsec-screen--totp img,
.login #itsec-2fa-on-board .itsec-screen__content img {
  display: block; margin: 0 auto; border-radius: 8px; background: #FFFFFF; padding: 8px; box-sizing: border-box;
}
.login #itsec-2fa-on-board .itsec-totp__view-secret { display: block; margin: 12px auto; }
.login #itsec-2fa-on-board .itsec-totp__secret { color: #FFFFFF; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 6px; padding: 8px; }
.login #itsec-2fa-on-board label { display: block; color: #C7CBD0; font-weight: 600; font-size: 13px; margin: 12px 0 6px; }
.login #itsec-2fa-on-board input[type="text"],
.login form#itsec-2fa input[type="tel"],
.login form#itsec-2fa input.input {
  width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 8px !important;
  padding: 10px 12px !important; font-size: 16px !important; background: rgba(255,255,255,.04) !important; color: #FFFFFF !important; box-shadow: none !important;
}
.login #itsec-2fa-on-board input[type="text"]:focus,
.login form#itsec-2fa input[type="tel"]:focus,
.login form#itsec-2fa input.input:focus,
.login form#itsec-2fa #authcode:focus {
  border-color: #C9A84C !important; box-shadow: 0 0 0 1px #C9A84C !important; outline: none !important;
}

/* ── Backup Codes ─────────────────────────────────────────────────────── */
/* Three actions in a 320px card: Back and Download share a row, Continue
   takes the full row below them. */
.login #itsec-2fa-on-board .itsec-screen--backup-codes .itsec-screen__actions > .itsec-screen__actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.login #itsec-2fa-on-board .itsec-screen--backup-codes .itsec-screen__actions-primary { display: contents; }
.login #itsec-2fa-on-board .itsec-screen--backup-codes .itsec-screen__actions .button,
.login #itsec-2fa-on-board .itsec-screen--backup-codes .itsec-screen__actions .button-link { width: 100%; }
.login #itsec-2fa-on-board .itsec-screen--backup-codes .itsec-screen__actions--continue { grid-column: 1 / -1; }
.login #itsec-2fa-on-board .itsec-backup-codes__code-list { margin: 20px 0 8px; padding: 0; }
.login #itsec-2fa-on-board .itsec-backup-codes__code-list li {
  color: #FFFFFF; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .04em; margin-bottom: 12px;
}

/* ── Core's own forms (Log In, Get New Password): the same 44px primary ── */
.login form p.submit .button-primary,
.login form .submit input[type="submit"] {
  display: inline-flex !important; align-items: center; justify-content: center;
  height: auto !important; min-height: 44px !important; padding: 10px 20px !important;
  line-height: 1.2 !important; float: none !important;
}
.login form p.submit { display: flex; justify-content: flex-end; }

/* ── The login prompt (form#itsec-2fa) ────────────────────────────────── */
/* The method title prints through login_message just above the form; join
   the two boxes into one card. */
.login .dc-2fa-title {
  margin: 0; padding: 24px 24px 0; background: #10151E; border: 1px solid rgba(255,255,255,.07); border-bottom: 0;
  border-radius: 12px 12px 0 0; color: #FFFFFF; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.25;
}
.login .dc-2fa-title + form,
.login .dc-2fa-title + .message + form,
.login .dc-2fa-title + #login-error + form { border-top: 0 !important; border-radius: 0 0 12px 12px !important; margin-top: 0 !important; }
.login .dc-2fa-title + .message,
.login .dc-2fa-title + #login-error { margin: 12px 24px 0; }
.login form#itsec-2fa label { display: block; color: #C7CBD0; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.login form#itsec-2fa p.submit { display: flex; justify-content: flex-end; margin: 16px 0 0; }
.login form#itsec-2fa .itsec-backup-methods,
.login form#itsec-2fa > div[style*="border-top"] {
  border-top-color: rgba(255,255,255,.07) !important; margin-top: 24px !important; padding-top: 16px !important; margin-bottom: 0 !important; padding-bottom: 0 !important;
}
.login form#itsec-2fa .itsec-backup-methods ul { margin: 0 !important; padding: 0; list-style: none; }
.login form#itsec-2fa .itsec-backup-methods li { margin: 6px 0; }