/* Forgot Password page - extends login.css and reset-password.css */

/* ── Step progress dots ───────────────────────────────────────────────────── */

.fp-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 4px;
}

.fp-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.25);
    transition: all 0.3s ease;
}

    .fp-dot.is-active {
        background: #F59E0B;
        transform: scale(1.35);
    }

    .fp-dot.is-done {
        background: #D97706;
    }

/* ── Step panels ──────────────────────────────────────────────────────────── */

.fp-step {
    display: grid;
    gap: 14px;
}

    .fp-step[hidden] {
        display: none;
    }

    .fp-step.fp-animate {
        animation: fadeInUp 0.4s ease-out;
    }

/* ── Sub-heading / description ────────────────────────────────────────────── */

.fp-sub {
    font-size: 15px;
    color: #4B5563;
    line-height: 1.6;
    text-align: center;
    margin: 0;
}

    .fp-sub .fp-email-display {
        font-weight: 600;
        color: #111827;
        word-break: break-all;
    }

/* ── Code input (centered, wide letter-spacing) ───────────────────────────── */

.fp-code-input {
    text-align: center;
    font-size: 20px;
    letter-spacing: 6px;
    font-variant-numeric: tabular-nums;
}

/* ── Success panel ────────────────────────────────────────────────────────── */

.fp-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
}

    .fp-success-icon svg {
        width: 32px;
        height: 32px;
        stroke: #F59E0B;
    }

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .fp-step.fp-animate {
        animation: none;
    }
}