/* Two-factor authentication: dashboard reminder, header badge, account page wizard, login popup.
   Colours follow the client palette through --client-primary / --client-secondary (set by
   ClientColorCssVariables() in lib/functions/helpers.php); the defaults are the default theme colours. */

:root {
    --twofa-accent: var(--client-secondary, #1d3c34);
    --twofa-primary: var(--client-primary, #d50008);
    --twofa-text: #17221e;
    --twofa-muted: #5f6c66;
    --twofa-border: #e3e8e5;
    --twofa-border-strong: #cdd5d1;
    --twofa-surface: #f6f8f7;
    --twofa-success: #1b6a3e;
    --twofa-success-bg: #e6f4ec;
    --twofa-error: #9b1c1c;
    --twofa-error-bg: #fdecec;
    --twofa-warning: #7a4b00;
    --twofa-warning-bg: #fff4d6;
    --twofa-radius: 6px;
    --twofa-radius-sm: 4px;
    --twofa-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- reminder on the dashboard ------------------------------------------------------ */
.twofa-nudge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    max-width: 960px;
    margin: 18px auto 4px;
    padding: 14px 18px;
    border: 1px solid var(--twofa-border);
    border-left: 5px solid var(--twofa-accent);
    border-radius: var(--twofa-radius);
    background: #ffffff;
    color: var(--twofa-text);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: 0 4px 16px rgba(15, 30, 25, 0.06);
}
.twofa-nudge.is-required {
    border-left-color: var(--twofa-error);
}
/* after "Later": one line, smaller, still there */
.twofa-nudge.is-compact {
    padding: 6px 14px;
    gap: 10px;
    font-size: 13px;
    color: var(--twofa-muted);
    box-shadow: none;
    border-left-width: 3px;
}
.twofa-nudge.is-compact svg {
    width: 20px;
    height: 20px;
}
.twofa-nudge.is-compact .twofa-nudge-actions .btn {
    padding: 2px 10px;
    font-size: 12px;
}
.twofa-nudge svg {
    flex: none;
    width: 34px;
    height: 34px;
}
.twofa-nudge-text {
    flex: 1 1 320px;
    min-width: 0;
}
.twofa-nudge-text strong {
    display: block;
    font-size: 15px;
    margin-bottom: 2px;
}
.twofa-nudge-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.twofa-nudge-actions .btn {
    white-space: nowrap;
}
.twofa-nudge-actions .btn-link {
    color: var(--twofa-muted);
    text-decoration: underline;
}

/* ---- shield next to the user name --------------------------------------------------- */
.twofa-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--twofa-success-bg);
    color: var(--twofa-success);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}
.twofa-badge svg {
    width: 12px;
    height: 12px;
}

/* ---- account page: the card ---------------------------------------------------------- */
/* The two-factor card is wider than the profile forms (css/profile.css caps .profile-card > * at 440px
   with the same specificity, so the class is doubled here to win): the method cards, the QR box and
   the code field need the room. */
.profile-card.profile-card--twofa > * {
    max-width: 780px;
}
/* The profile box is 60% of the viewport (lined up with the three tiles). On narrower screens that
   leaves no room for the QR code next to the code field, so the 2FA page may grow past the tiles,
   up to 760px, and never closer than 20px to the viewport edge. */
.account-page .layout-wrapper.w-profile:has(.profile-card--twofa) {
    width: max(calc(60% + 40px), min(calc(100% - 40px), 760px));
}
/* The wizard stacks on its own width, not the viewport: the box above is a fraction of the screen. */
.two-fa-module-component {
    container-type: inline-size;
}
@container (max-width: 600px) {
    .two-fa-module-component .twofa-pair,
    .two-fa-module-component .twofa-methods,
    .two-fa-module-component .twofa-facts,
    .two-fa-module-component .twofa-codes {
        grid-template-columns: minmax(0, 1fr);
    }
    .two-fa-module-component .twofa-qr-box {
        width: 100%;
    }
    .two-fa-module-component .twofa-pair-side,
    .two-fa-module-component .twofa-pair-main {
        min-width: 0;
    }
}
.profile-card--twofa .profile-card__title {
    text-align: center;
}

.two-fa-module-component {
    text-align: left;
    color: var(--twofa-text);
    font-size: 14px;
    line-height: 1.5;
}
/* the account page centres all text; inside the card everything but the intro and the method cards is left aligned */
.two-fa-module-component h3,
.two-fa-module-component p,
.two-fa-module-component li,
.two-fa-module-component dt,
.two-fa-module-component dd,
.two-fa-module-component label,
.two-fa-module-component .twofa-alert {
    text-align: left;
}
.two-fa-module-component h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--twofa-text);
}
.two-fa-module-component p {
    margin: 0;
}
.two-fa-module-component .twofa-lead {
    margin: 0 0 18px;
    color: var(--twofa-muted);
    font-size: 14px;
    text-align: center;
}
.two-fa-module-component .twofa-text {
    font-size: 14px;
}
.two-fa-module-component .twofa-muted {
    color: var(--twofa-muted);
    font-size: 13px;
}

/* every button in the card has the same height and corner radius as the profile forms */
.two-fa-module-component .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 20px;
    border-radius: var(--twofa-radius-sm);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
}
.two-fa-module-component .btn:disabled {
    opacity: .45;
    cursor: default;
}
.two-fa-module-component .btn-link {
    padding: 0 6px;
    color: var(--twofa-muted);
    text-decoration: underline;
    font-weight: 500;
}
.two-fa-module-component .btn.btn-outline {
    border: 1px solid var(--twofa-border-strong);
    background: #fff;
    color: var(--twofa-text);
}
.two-fa-module-component .btn.btn-outline:hover {
    border-color: var(--twofa-accent);
    color: var(--twofa-accent);
}
.two-fa-module-component .btn.btn-outline.is-copied {
    border-color: var(--twofa-success);
    color: var(--twofa-success);
}
.two-fa-module-component .btn.btn-sm {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
}
.two-fa-module-component .btn.btn-lg {
    height: 48px;
    padding: 0 28px;
    font-size: 15px;
}
.two-fa-module-component .btn-link.twofa-link-danger {
    color: var(--twofa-error);
}

/* alerts replace the old translucent blockquotes */
.two-fa-module-component .twofa-alert {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-left: 3px solid currentColor;
    border-radius: var(--twofa-radius-sm);
    font-size: 13px;
    line-height: 1.5;
}
.two-fa-module-component .twofa-alert strong {
    display: block;
}
.two-fa-module-component .twofa-alert--success {
    background: var(--twofa-success-bg);
    color: var(--twofa-success);
}
.two-fa-module-component .twofa-alert--error {
    background: var(--twofa-error-bg);
    color: var(--twofa-error);
}
.two-fa-module-component .twofa-alert--warning {
    background: var(--twofa-warning-bg);
    color: var(--twofa-warning);
}
.two-fa-module-component .twofa-alert--info {
    background: var(--twofa-surface);
    color: var(--twofa-text);
    border-left-color: var(--twofa-accent);
}
.two-fa-module-component .twofa-panel .twofa-alert,
.two-fa-module-component .twofa-recovery .twofa-alert,
.two-fa-module-component .twofa-active .twofa-alert {
    margin-top: 14px;
    margin-bottom: 0;
}

/* section header: icon in a tinted circle, title and one line of text */
.two-fa-module-component .twofa-section-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}
.two-fa-module-component .twofa-section-header p {
    margin-top: 4px;
    color: var(--twofa-muted);
    font-size: 13px;
}
.two-fa-module-component .twofa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--twofa-surface);
    color: var(--twofa-accent);
}
.two-fa-module-component .twofa-icon svg {
    width: 24px;
    height: 24px;
}
.two-fa-module-component .twofa-icon--success {
    background: var(--twofa-success-bg);
    color: var(--twofa-success);
}

/* footer row of a section: actions right, or split left/right */
.two-fa-module-component .twofa-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}
.two-fa-module-component .twofa-footer--split {
    justify-content: space-between;
    flex-wrap: wrap;
}
.two-fa-module-component .twofa-footer-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.two-fa-module-component .twofa-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}
.two-fa-module-component .twofa-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--twofa-accent);
}

/* ---- account page: setup wizard ------------------------------------------------------ */
/* progress: three dots with a line between them */
.two-fa-module-component .twofa-stepper {
    display: flex;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
.two-fa-module-component .twofa-stepper li {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0;
    text-align: center;
}
.two-fa-module-component .twofa-stepper li::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--twofa-border);
}
.two-fa-module-component .twofa-stepper li:first-child::before {
    display: none;
}
.two-fa-module-component .twofa-stepper li.is-done::before,
.two-fa-module-component .twofa-stepper li.is-active::before {
    background: var(--twofa-accent);
}
.two-fa-module-component .twofa-stepper-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--twofa-border-strong);
    border-radius: 50%;
    background: #fff;
    color: var(--twofa-muted);
    font-size: 13px;
    font-weight: 700;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.two-fa-module-component .twofa-stepper-dot svg {
    width: 16px;
    height: 16px;
}
.two-fa-module-component .twofa-stepper li.is-active .twofa-stepper-dot {
    border-color: var(--twofa-accent);
    background: var(--twofa-accent);
    color: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--twofa-accent) 18%, transparent);
}
.two-fa-module-component .twofa-stepper li.is-done .twofa-stepper-dot {
    border-color: var(--twofa-accent);
    background: #fff;
    color: var(--twofa-accent);
}
.two-fa-module-component .twofa-stepper-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--twofa-muted);
    text-align: center;
}
.two-fa-module-component .twofa-stepper li.is-active .twofa-stepper-label {
    color: var(--twofa-text);
}

/* the open step */
.two-fa-module-component .twofa-panel {
    margin-bottom: 12px;
    padding: 22px 24px 20px;
    border: 1px solid var(--twofa-border);
    border-radius: var(--twofa-radius);
    background: #fff;
}
.two-fa-module-component .twofa-panel:last-child {
    margin-bottom: 0;
}
.two-fa-module-component .twofa-panel-header {
    margin-bottom: 18px;
}
.two-fa-module-component .twofa-panel-header h3 {
    font-size: 17px;
}
.two-fa-module-component .twofa-panel-header p {
    margin-top: 4px;
    color: var(--twofa-muted);
    font-size: 13px;
}
.two-fa-module-component .twofa-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--twofa-border);
}
.two-fa-module-component .twofa-panel-footer--center {
    justify-content: center;
}
.two-fa-module-component .twofa-panel--final {
    border-color: color-mix(in srgb, var(--twofa-accent) 45%, var(--twofa-border));
    background: color-mix(in srgb, var(--twofa-accent) 4%, #fff);
}

/* a finished step folded into one line */
.two-fa-module-component .twofa-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 10px 16px;
    border: 1px solid var(--twofa-border);
    border-radius: var(--twofa-radius);
    background: var(--twofa-surface);
    font-size: 14px;
}
.two-fa-module-component .twofa-summary-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--twofa-success-bg);
    color: var(--twofa-success);
}
.two-fa-module-component .twofa-summary-check svg {
    width: 14px;
    height: 14px;
}
.two-fa-module-component .twofa-summary-text {
    flex: 1 1 auto;
}
.two-fa-module-component .twofa-summary .btn-link {
    height: auto;
    padding: 0;
    color: var(--twofa-accent);
}

/* method cards: two equal columns, same height, same elements in the same order */
.two-fa-module-component .twofa-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.two-fa-module-component .twofa-method {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 26px 20px 20px;
    border: 2px solid var(--twofa-border);
    border-radius: var(--twofa-radius);
    background: #fff;
    color: var(--twofa-text);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}
.two-fa-module-component .twofa-method:hover {
    border-color: color-mix(in srgb, var(--twofa-accent) 50%, var(--twofa-border));
    transform: translateY(-1px);
}
.two-fa-module-component .twofa-method:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--twofa-accent) 30%, transparent);
}
.two-fa-module-component .twofa-method.is-active {
    border-color: var(--twofa-accent);
    background: color-mix(in srgb, var(--twofa-accent) 7%, #fff);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--twofa-accent) 14%, transparent);
}
/* the check in the corner is the selected state */
.two-fa-module-component .twofa-method-check {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--twofa-border-strong);
    border-radius: 50%;
    background: #fff;
    color: #fff;
    transition: background-color .15s ease, border-color .15s ease;
}
.two-fa-module-component .twofa-method-check svg {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity .15s ease;
}
.two-fa-module-component .twofa-method.is-active .twofa-method-check {
    border-color: var(--twofa-accent);
    background: var(--twofa-accent);
}
.two-fa-module-component .twofa-method.is-active .twofa-method-check svg {
    opacity: 1;
}
.two-fa-module-component .twofa-method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 4px;
    border-radius: 50%;
    background: var(--twofa-surface);
    color: var(--twofa-accent);
    transition: background-color .15s ease, color .15s ease;
}
.two-fa-module-component .twofa-method.is-active .twofa-method-icon {
    background: var(--twofa-accent);
    color: #fff;
}
.two-fa-module-component .twofa-method-icon svg {
    width: 30px;
    height: 30px;
}
.two-fa-module-component .twofa-method-title {
    font-size: 16px;
    font-weight: 700;
}
.two-fa-module-component .twofa-method-desc {
    flex: 1 1 auto;
    color: var(--twofa-muted);
    font-size: 13px;
    line-height: 1.45;
}
.two-fa-module-component .twofa-method-tag {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--twofa-border-strong);
    color: var(--twofa-muted);
    font-size: 12px;
    font-weight: 600;
}
.two-fa-module-component .twofa-method-tag--accent {
    border-color: transparent;
    background: var(--twofa-success-bg);
    color: var(--twofa-success);
}

/* step 2, authenticator: QR left, instructions and code right */
.two-fa-module-component .twofa-pair {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}
.two-fa-module-component .twofa-qr-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--twofa-border);
    border-radius: var(--twofa-radius);
    background: var(--twofa-surface);
    text-align: center;
}
.two-fa-module-component .twofa-qr-box img {
    width: 180px;
    height: 180px;
    padding: 6px;
    border: 1px solid var(--twofa-border);
    border-radius: var(--twofa-radius-sm);
    background: #fff;
}
.two-fa-module-component .twofa-qr-box .twofa-muted {
    font-size: 12px;
    text-align: center;
}
.two-fa-module-component .twofa-secret-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}
.two-fa-module-component .twofa-secret {
    display: block;
    padding: 8px 10px;
    border: 1px dashed var(--twofa-border-strong);
    border-radius: var(--twofa-radius-sm);
    background: #fff;
    color: var(--twofa-text);
    font-family: var(--twofa-mono);
    font-size: 13px;
    letter-spacing: .5px;
    line-height: 1.5;
    text-align: center;
    word-break: break-word;
}
.two-fa-module-component .twofa-expired {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 0;
}
.two-fa-module-component .twofa-steps {
    counter-reset: step;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}
.two-fa-module-component .twofa-steps li {
    position: relative;
    padding: 0 0 10px 32px;
    font-size: 14px;
    line-height: 1.5;
}
.two-fa-module-component .twofa-steps li:last-child {
    padding-bottom: 0;
}
.two-fa-module-component .twofa-steps li::before {
    counter-increment: step;
    content: counter(step, lower-alpha);
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border: 1px solid var(--twofa-border-strong);
    border-radius: 50%;
    color: var(--twofa-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    line-height: 20px;
}

/* the code */
.two-fa-module-component .twofa-label {
    display: block;
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
}
.two-fa-module-component .twofa-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.two-fa-module-component input.form-control.twofa-code-input {
    flex: 0 0 auto;
    width: 184px;
    max-width: none;
    height: 46px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--twofa-border-strong);
    border-radius: var(--twofa-radius-sm);
    background: #fff;
    font-family: var(--twofa-mono);
    font-size: 22px;
    letter-spacing: 6px;
    text-align: center;
    box-shadow: none;
}
.two-fa-module-component input.form-control.twofa-code-input:focus {
    border-color: var(--twofa-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--twofa-accent) 20%, transparent);
    outline: none;
}
.two-fa-module-component input.form-control.twofa-code-input::placeholder {
    color: #b7c0bb;
}
.two-fa-module-component input.form-control.twofa-code-input:disabled {
    background: var(--twofa-surface);
}
.two-fa-module-component .twofa-code-row .btn {
    height: 46px;
    margin: 0; /* the theme gives every button in this module a 20px top margin */
}
.two-fa-module-component .twofa-code-row + .twofa-muted {
    margin-top: 10px;
}
.two-fa-module-component .twofa-code-row + .twofa-alert,
.two-fa-module-component .twofa-muted + .twofa-alert {
    margin-top: 12px;
    margin-bottom: 0;
}
.two-fa-module-component .twofa-inline-link {
    color: var(--twofa-accent);
    font-weight: 600;
    text-decoration: underline;
}
.two-fa-module-component .twofa-inline-link.is-disabled {
    color: var(--twofa-muted);
    pointer-events: none;
    text-decoration: none;
}
.two-fa-module-component .twofa-send {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.two-fa-module-component .twofa-send .twofa-alert {
    margin: 0;
    align-self: stretch;
}
.two-fa-module-component .twofa-panel .twofa-alert--info {
    margin: 0 0 14px;
}
/* ---- account page: active state ------------------------------------------------------ */
.two-fa-module-component .twofa-active,
.two-fa-module-component .twofa-recovery {
    padding: 20px;
    border: 1px solid var(--twofa-border);
    border-radius: var(--twofa-radius);
    background: #fff;
}
.two-fa-module-component .twofa-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}
.two-fa-module-component .twofa-facts > div {
    padding: 12px 14px;
    border-radius: var(--twofa-radius-sm);
    background: var(--twofa-surface);
}
.two-fa-module-component .twofa-facts dt {
    margin: 0 0 2px;
    color: var(--twofa-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.two-fa-module-component .twofa-facts dd {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}
.two-fa-module-component .twofa-facts dd small {
    display: block;
    color: var(--twofa-muted);
    font-size: 12px;
    font-weight: 400;
}

/* "Aanpassen" on the active card opens these options */
.two-fa-module-component .twofa-manage {
    margin-top: 16px;
    padding-top: 4px;
    border-top: 1px solid var(--twofa-border);
}
.two-fa-module-component .twofa-manage-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--twofa-border);
}
.two-fa-module-component .twofa-manage-item strong {
    display: block;
    font-size: 14px;
}
.two-fa-module-component .twofa-manage-item p {
    margin: 2px 0 0;
    color: var(--twofa-muted);
    font-size: 13px;
    line-height: 1.4;
}
.two-fa-module-component .twofa-manage-item .btn {
    flex-shrink: 0;
}
.two-fa-module-component .twofa-manage .twofa-footer {
    margin-top: 8px;
}
@media (max-width: 640px) {
    .two-fa-module-component .twofa-manage-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ---- account page: recovery codes ---------------------------------------------------- */
.two-fa-module-component .twofa-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}
.two-fa-module-component .twofa-codes li {
    padding: 10px 12px;
    border: 1px dashed var(--twofa-border-strong);
    border-radius: var(--twofa-radius-sm);
    background: var(--twofa-surface);
    font-family: var(--twofa-mono);
    font-size: 16px;
    letter-spacing: 1.5px;
    text-align: center;
}
.two-fa-module-component .twofa-recovery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.two-fa-module-component .twofa-recovery .twofa-footer {
    padding-top: 16px;
    border-top: 1px solid var(--twofa-border);
}

/* ---- loader -------------------------------------------------------------------------- */
.two-fa-module-component .twofa-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 28px 0;
    color: var(--twofa-muted);
    font-size: 13px;
}

@media (max-width: 640px) {
    .two-fa-module-component .twofa-methods,
    .two-fa-module-component .twofa-facts,
    .two-fa-module-component .twofa-codes {
        grid-template-columns: minmax(0, 1fr);
    }
    .two-fa-module-component .twofa-pair {
        grid-template-columns: minmax(0, 1fr);
    }
    .two-fa-module-component .twofa-qr-box {
        max-width: 260px;
        margin: 0 auto;
    }
    .two-fa-module-component .twofa-stepper-label {
        font-size: 11px;
    }
    .two-fa-module-component .twofa-panel,
    .two-fa-module-component .twofa-active,
    .two-fa-module-component .twofa-recovery {
        padding: 16px;
    }
}

@media print {
    body * { visibility: hidden; }
    .two-fa-module-component .twofa-recovery, .two-fa-module-component .twofa-recovery * { visibility: visible; }
    .two-fa-module-component .twofa-recovery { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
    .two-fa-module-component .twofa-recovery .twofa-recovery-actions, .two-fa-module-component .twofa-recovery .twofa-footer { display: none; }
}

/* ---- login popup --------------------------------------------------------------------- */
/* the theme forces every popup to 320px with a four-class selector; this one needs more room */
.swal2-container.swal-2fa .swal2-popup.swal2-modal:not(.swal-video) {
    width: 440px !important;
    max-width: calc(100% - 32px) !important;
    padding: 30px 30px 26px;
    border-radius: 8px;
    color: var(--twofa-text);
}
.swal-2fa .swal2-header {
    align-items: flex-start;
}
.swal-2fa .swal2-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--twofa-text);
    text-align: left;
}
.swal-2fa .swal2-content {
    padding: 0;
    font-size: 14px;
    color: var(--twofa-text);
}
.swal-2fa .twofa-login {
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}
.swal-2fa .twofa-login p {
    margin: 0 0 16px;
    color: var(--twofa-muted);
}
.swal-2fa .twofa-login p strong {
    color: var(--twofa-text);
}
.swal-2fa .twofa-login input.twofa-login-code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 52px;
    margin: 0 0 14px;
    padding: 0 12px;
    border: 1px solid var(--twofa-border-strong);
    border-radius: var(--twofa-radius-sm);
    font-family: var(--twofa-mono);
    font-size: 24px;
    letter-spacing: 8px;
    text-align: center;
}
.swal-2fa .twofa-login input.twofa-login-code:focus {
    border-color: var(--twofa-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--twofa-accent) 20%, transparent);
    outline: none;
}
.swal-2fa .twofa-login label.twofa-trust {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    cursor: pointer;
}
.swal-2fa .twofa-login label.twofa-trust input {
    flex: none;
    width: 17px;
    height: 17px;
    margin: 1px 0 0;
    accent-color: var(--twofa-accent);
}
.swal-2fa .twofa-login .twofa-login-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--twofa-border);
    font-size: 12px;
    line-height: 1.45;
    color: var(--twofa-muted);
}
.swal-2fa .twofa-login .twofa-login-links span:empty {
    display: none;
}
.swal-2fa .twofa-login .twofa-login-links:empty {
    display: none;
}
.swal-2fa .twofa-login .twofa-login-links a {
    flex: none;
    color: var(--twofa-accent);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}
.swal-2fa .twofa-login .twofa-login-links a.is-disabled {
    color: #8b9691;
    pointer-events: none;
    text-decoration: none;
}
.swal-2fa .twofa-login .twofa-login-error,
.swal-2fa .twofa-login .twofa-login-ok {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-left: 3px solid currentColor;
    border-radius: var(--twofa-radius-sm);
    font-size: 13px;
}
.swal-2fa .twofa-login .twofa-login-error {
    background: var(--twofa-error-bg);
    color: var(--twofa-error);
}
.swal-2fa .twofa-login .twofa-login-ok {
    background: var(--twofa-success-bg);
    color: var(--twofa-success);
}
/* buttons side by side, primary in the client colour, cancel as a quiet outline button */
.swal-2fa .swal2-actions {
    flex-direction: row;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
    margin: 20px 0 0;
}
.swal-2fa .swal2-actions .swal2-styled {
    height: 42px;
    margin: 0;
    padding: 0 22px;
    border-radius: var(--twofa-radius-sm);
    font-size: 14px;
    font-weight: 600;
    box-shadow: none;
}
.swal-2fa .swal2-actions .swal2-confirm {
    order: 2;
    background: var(--twofa-primary) !important;
    color: #fff !important;
}
.swal-2fa .swal2-actions .swal2-cancel {
    order: 1;
    border: 1px solid var(--twofa-border-strong) !important;
    background: #fff !important;
    color: var(--twofa-muted) !important;
}
.swal-2fa .swal2-actions .swal2-styled:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--twofa-accent) 25%, transparent);
}