/* ==========================================================================================
   two-factor.css — look of the two-factor screens (sign-in code page + My Profile card)
   Used by: Pages/Account/LoginTwoFactor.cshtml, Pages/Account/Profile.cshtml
   ========================================================================================== */

/* ---------- The 6 separate digit boxes (built by two-factor.js) ---------- */
.code-boxes {
    display: flex;
    gap: .5rem;
    justify-content: center;
    margin: .25rem 0 1rem;
}
.code-box {
    width: 3rem;
    height: 3.6rem;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 600;
    font-family: Consolas, "Courier New", monospace;
    border: 2px solid #ced4da;
    border-radius: .65rem;
    background: #fff;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.code-box:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .2);
    outline: 0;
    transform: translateY(-2px);
}
.code-boxes.filled .code-box { border-color: #198754; }          /* all 6 typed → green */
.code-boxes.shake { animation: tf-shake .4s; }                    /* wrong code → little shake */
.code-boxes.shake .code-box { border-color: #dc3545; }
@keyframes tf-shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}
@media (max-width: 420px) {
    .code-boxes { gap: .35rem; }
    .code-box { width: 2.5rem; height: 3.1rem; font-size: 1.45rem; }
}

/* ---------- Round icon at the top of the code card ---------- */
.tf-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 30px;
    margin: 0 auto .75rem;
}
.tf-icon.app    { background: #e7f1ff; }
.tf-icon.email  { background: #e6f4ea; }
.tf-icon.backup { background: #fff4e0; }
.tf-icon.microsoft { background: #eef0ff; }

/* ---------- Countdown bar for emailed codes ---------- */
.tf-countdown .progress { height: 6px; }
.tf-countdown .progress-bar { transition: width 1s linear; }
.tf-countdown .tf-expired-text { display: none; }
.tf-countdown.expired .tf-expired-text { display: block; }
.tf-countdown.expired .tf-live-text { display: none; }

/* ---------- "Try a Different Way" list ---------- */
.tf-way {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .65rem .85rem;
    border: 1px solid #dee2e6;
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: .5rem;
    transition: border-color .15s, background .15s;
}
.tf-way:hover { border-color: #0d6efd; background: #f5f9ff; color: inherit; }
.tf-way .tf-way-icon { font-size: 1.4rem; }
.tf-way small { display: block; color: #6c757d; }

/* ---------- My Profile: method choice cards ---------- */
.tf-option {
    border: 2px solid #dee2e6;
    border-radius: .8rem;
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .15s, box-shadow .15s;
}
.tf-option:hover { border-color: #0d6efd; box-shadow: 0 .25rem .75rem rgba(13, 110, 253, .12); }
.tf-option .tf-option-icon { font-size: 1.9rem; line-height: 1; margin-bottom: .4rem; }
.tf-option form { margin-top: auto; }

/* ---------- My Profile: current method row ---------- */
.tf-method {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: #f8f9fa;
    border-radius: .7rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}
.tf-method .tf-method-icon { font-size: 1.8rem; }

/* ---------- Step labels ("Step 1 of 2") ---------- */
.tf-step {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #0d6efd;
    background: #e7f1ff;
    border-radius: 1rem;
    padding: .15rem .6rem;
    margin-bottom: .5rem;
}