/*
 * WABlast sign-in pages, v2 polish (login, 2-step verification, forgot password).
 * Loaded after auth.css; uses its --auth-* tokens and changes nothing in auth.css itself.
 */

/* --- Right side: soft canvas + elevated card ------------------------------ */
.auth-page .auth-main {
    position: relative;
    background:
        radial-gradient(circle at 100% 0%, rgba(206, 28, 23, .05) 0, rgba(206, 28, 23, 0) 38%),
        radial-gradient(rgba(31, 35, 40, .055) 1px, transparent 1px) 0 0 / 18px 18px,
        #f6f7f9;
}

.auth-page .auth-panel {
    position: relative;
    max-width: 432px;
    padding: 36px 36px 30px;
    border: 1px solid #e6e8eb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 40px -18px rgba(16, 24, 40, .18);
}

/* thin brand line on top of the card */
.auth-page .auth-panel::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 36px;
    right: auto;
    width: 44px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--auth-red);
}

.auth-page .auth-foot {
    margin-top: 22px;
}

/* --- Header pieces --------------------------------------------------------- */
.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 4px 11px 4px 9px;
    border: 1px solid #eceef1;
    border-radius: 999px;
    background: #f6f7f9;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #4b5058;
}

.auth-eyebrow i {
    font-size: .78rem;
    color: var(--auth-red);
}

.auth-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
    border-radius: 15px;
    color: var(--auth-red-light);
    background:
        radial-gradient(circle at 100% 0%, rgba(206, 28, 23, .55) 0, rgba(206, 28, 23, 0) 60%),
        linear-gradient(135deg, var(--auth-charcoal) 0%, var(--auth-steel) 100%);
    box-shadow: 0 10px 22px -12px rgba(21, 23, 25, .7);
    font-size: 1.25rem;
}

.auth-medal i {
    width: auto !important;
    margin: 0 !important;
    line-height: 1;
}

.auth-page .auth-title {
    font-size: 1.625rem;
}

.auth-page .auth-lead {
    margin-bottom: 1.5rem;
    font-size: .9375rem;
}

.auth-lead .auth-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 8px;
    border-radius: 6px;
    background: #f1f2f4;
    font-weight: 600;
    color: var(--auth-ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* --- Steps (forgot password) ---------------------------------------------- */
.auth-steps {
    display: flex;
    align-items: flex-start;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.auth-steps li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: .72rem;
    font-weight: 600;
    color: #8a9099;
}

/* connector line between two steps */
.auth-steps li + li::before {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(-50% + 20px);
    right: calc(50% + 20px);
    height: 2px;
    border-radius: 2px;
    background: #e6e8eb;
}

.auth-steps li.is-done + li::before,
.auth-steps li.is-done + li.is-active::before {
    background: var(--auth-steel);
}

.auth-steps .auth-step-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0 auto 6px;
    border: 2px solid #e6e8eb;
    border-radius: 50%;
    background: #fff;
    font-size: .75rem;
    font-weight: 700;
    color: #8a9099;
}

.auth-steps li.is-active {
    color: var(--auth-ink);
}

.auth-steps li.is-active .auth-step-dot {
    border-color: var(--auth-red);
    color: #fff;
    background: var(--auth-red);
    box-shadow: 0 0 0 4px rgba(206, 28, 23, .12);
}

.auth-steps li.is-done {
    color: var(--auth-ink);
}

.auth-steps li.is-done .auth-step-dot {
    border-color: var(--auth-steel);
    color: #fff;
    background: var(--auth-steel);
}

.auth-steps .auth-step-dot i {
    width: auto !important;
    margin: 0 !important;
    font-size: .68rem;
}

/* --- Code boxes (2FA + reset) ---------------------------------------------- */
.auth-otp {
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.auth-otp-box {
    flex: 1 1 0;
    min-width: 0;
    max-width: 54px;
    height: 58px;
    padding: 0;
    border: 1px solid var(--auth-line);
    border-radius: 12px;
    background: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: var(--auth-ink);
    caret-color: var(--auth-red);
    font-variant-numeric: tabular-nums;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.auth-otp-box:focus {
    outline: 0;
    border-color: var(--auth-focus);
    box-shadow: 0 0 0 3px rgba(58, 62, 68, .14);
}

.auth-otp-box.is-filled {
    border-color: #c9cdd3;
    background: #f9fafb;
}

.auth-otp.is-error .auth-otp-box {
    border-color: var(--auth-danger);
    animation: auth-shake .35s ease;
}

/* the real input stays in the form; it is hidden only when the boxes are built */
.auth-otp-ready .auth-code-src {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    border: 0 !important;
    opacity: 0;
}

@keyframes auth-shake {
    0%, 100% {
        transform: translateX(0);
    }
    25% {
        transform: translateX(-4px);
    }
    75% {
        transform: translateX(4px);
    }
}

/* --- Resend + expiry --------------------------------------------------------- */
.auth-page .auth-resend,
.auth-resend-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 18px 0 0;
    padding: 11px 14px;
    border: 1px dashed #e0e3e7;
    border-radius: 12px;
    background: #fafbfc;
    font-size: .84rem;
    color: var(--auth-muted);
}

.auth-page .auth-resend::before,
.auth-resend-box::before {
    content: "\f017";
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    color: #9aa0a8;
}

.auth-page .auth-resend .counter,
.auth-resend-box .auth-count {
    font-weight: 700;
    color: var(--auth-ink);
    font-variant-numeric: tabular-nums;
}

.auth-resend-box form {
    display: inline;
    margin: 0;
}

.auth-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
    color: var(--auth-red);
    cursor: pointer;
}

.auth-linkbtn:hover {
    color: var(--auth-red-dark);
    text-decoration: underline;
}

.auth-linkbtn:disabled {
    color: #9aa0a8;
    text-decoration: none;
    cursor: default;
}

.auth-expiry {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: .78rem;
    color: #8a9099;
}

.auth-expiry b {
    color: var(--auth-ink);
    font-variant-numeric: tabular-nums;
}

.auth-expiry.is-late b {
    color: var(--auth-danger);
}

/* --- Password meter (reset) -------------------------------------------------- */
.auth-meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-top: 10px;
}

.auth-meter span {
    height: 5px;
    border-radius: 3px;
    background: #e6e8eb;
    transition: background-color .2s ease;
}

.auth-meter[data-score="1"] span:nth-child(-n+1) {
    background: #dc2626;
}
.auth-meter[data-score="2"] span:nth-child(-n+2) {
    background: #f59e0b;
}
.auth-meter[data-score="3"] span:nth-child(-n+3) {
    background: #65a30d;
}
.auth-meter[data-score="4"] span:nth-child(-n+4) {
    background: #15803d;
}

.auth-meter-label {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: .76rem;
    color: #8a9099;
}

.auth-meter-label b {
    color: var(--auth-ink);
}

.auth-rules {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    margin: 0 0 1.25rem;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fafbfc;
    border: 1px solid #eef0f2;
    list-style: none;
}

.auth-rules li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .78rem;
    color: #6a7078;
}

.auth-rules li i {
    width: 16px !important;
    height: 16px;
    margin: 0 !important;
    border-radius: 50%;
    background: #e6e8eb;
    color: transparent;
    font-size: .55rem;
    line-height: 16px;
    text-align: center;
    transition: background-color .15s ease, color .15s ease;
}

.auth-rules li.is-ok {
    color: var(--auth-ink);
}

.auth-rules li.is-ok i {
    color: #fff;
    background: #15803d;
}

.auth-match {
    display: none;
    margin-top: .375rem;
    font-size: .8125rem;
}

.auth-match.is-ok {
    display: block;
    color: #15803d;
}

.auth-match.is-bad {
    display: block;
    color: var(--auth-danger);
}

/* --- Small links, divider, trust row --------------------------------------- */
.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    font-size: .875rem;
}

.auth-page .auth-panel a.auth-back {
    color: #4b5058;
    font-weight: 600;
}

.auth-page .auth-panel a.auth-back:hover {
    color: var(--auth-ink);
    text-decoration: none;
}

.auth-page .auth-panel a.auth-back i {
    font-size: .8rem;
    transition: transform .15s ease;
}

.auth-page .auth-panel a.auth-back:hover i {
    transform: translateX(-2px);
}

.auth-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.auth-links form {
    display: inline;
    margin: 0;
}

.auth-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 22px 0 0;
    padding: 18px 0 0;              /* no browser list indent: it pushed the items 40px off centre */
    border-top: 1px solid #eef0f2;
    list-style: none;
    text-align: center;
    font-size: .75rem;
    color: #8a9099;
}

.auth-trust li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-trust i {
    color: #9aa0a8;
}

.auth-forgot {
    font-size: .875rem;
    font-weight: 600 !important;
}

.auth-field-note {
    display: flex;
    gap: 8px;
    margin: -4px 0 1.25rem;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f6f7f9;
    font-size: .8rem;
    line-height: 1.5;
    color: #5b616a;
}

.auth-field-note i {
    margin-top: 2px;
    color: #8a9099;
}

/* icons inside input-group-text stay centred whatever the theme says */
.auth-page .auth-field .input-group-text i {
    width: auto;
    margin: 0;
}

/* --- Responsive ------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .auth-page .auth-main {
        padding: 28px 18px;
    }

    /* title and lead are centred here (auth.css): centre the badge and icon with them */
    .auth-eyebrow,
    .auth-medal {
        display: flex;
        width: max-content;
        margin-left: auto;
        margin-right: auto;
    }

    .auth-medal {
        width: 52px;
    }
}

@media (max-width: 575.98px) {
    .auth-page .auth-main {
        background: #fff;
    }

    .auth-page .auth-panel {
        padding: 8px 2px 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .auth-page .auth-panel::before {
        display: none;
    }

    .auth-otp {
        gap: 6px;
    }

    .auth-otp-box {
        height: 52px;
        font-size: 1.3rem;
    }

    .auth-rules {
        grid-template-columns: 1fr;
    }

    /* one item per line, each centred */
    .auth-trust {
        flex-direction: column;
        gap: 6px;
    }

    .auth-steps li {
        font-size: .68rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-otp.is-error .auth-otp-box {
        animation: none;
    }
}

/* "Sign in with another account" on the 2-step page */
.auth-page .auth-links {
    margin-top: 16px;
}

.auth-page .auth-back-btn {
    color: #4b5058;
    font-size: .875rem;
}

.auth-page .auth-back-btn:hover {
    color: var(--auth-ink);
    text-decoration: none;
}

.auth-page #resetForm .auth-expiry {
    justify-content: center;
    margin-top: 12px;
}