/* ============================================================================
   Forgot Password wizard — CoverSmart design system (Cover Cobalt tokens)
   Loads after tokens.css + base.css + components.css.

   Deliberately mirrors company_register.css so the two wizards are visually
   identical: same card, same gradient wash, same progress circles, same
   directional step slides, same success-check draw. Only the segmented code
   input and the code metadata row below are new to this page.

   NOTE: the shared form/button primitives here are the THIRD copy (auth.css and
   company_register.css hold the other two). Extracting them into a shared
   partial is worth doing — but as its own change, not folded into a feature.
   ============================================================================ */

* { box-sizing: border-box; }

:root {
    --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    font-family: var(--cs-font-ui);
    color: var(--cs-ink);
    background:
        radial-gradient(900px 460px at 50% -8%, var(--cs-brand-50), transparent 70%),
        radial-gradient(700px 400px at 100% 110%, color-mix(in srgb, var(--cs-brand-500) 8%, transparent), transparent 70%),
        var(--cs-bg);
    -webkit-font-smoothing: antialiased;
}

/* Narrower than the registration wizard — every step here is a single short
   field group, so 660px would leave the card looking empty. */
.registration-container { width: 100%; max-width: 560px; }

.registration-card {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-r-lg);
    box-shadow: var(--cs-shadow-lg);
    padding: 32px 34px 34px;
    animation: crCardIn 0.6s var(--ease-out) both;
}

/* ── Header ────────────────────────────────────────────────── */
.registration-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    animation: crRise 0.55s var(--ease-out) 0.08s both;
}

.brand-logo { display: flex; align-items: center; gap: 10px; }
.brand-logo svg { width: 30px; height: 30px; }
.brand-name { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--cs-ink); }

.back-to-auth {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cs-fs-sm);
    font-weight: 600;
    color: var(--cs-ink-3);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: var(--cs-r);
    transition: color var(--cs-transition), background var(--cs-transition), transform var(--cs-transition);
}
.back-to-auth:hover { color: var(--cs-brand); background: var(--cs-brand-soft); }
.back-to-auth:hover svg { transform: translateX(-2px); }
.back-to-auth svg { width: 17px; height: 17px; transition: transform 0.2s var(--ease-spring); }

/* ── Progress indicator ────────────────────────────────────── */
.progress-container { margin-bottom: 30px; animation: crRise 0.55s var(--ease-out) 0.14s both; }
.progress-steps { display: flex; align-items: flex-start; }

.progress-step { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; }

.step-circle {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: var(--cs-fs-sm);
    font-weight: 700;
    color: var(--cs-ink-3);
    background: var(--cs-surface);
    border: 2px solid var(--cs-border-strong);
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.step-label { font-size: var(--cs-fs-xs); font-weight: 600; color: var(--cs-ink-3); white-space: nowrap; transition: color 0.25s ease; }

.progress-step.active .step-circle {
    color: var(--cs-on-brand);
    background: var(--cs-brand);
    border-color: var(--cs-brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cs-brand-500) 20%, transparent);
    animation: circlePop 0.45s var(--ease-spring);
}
.progress-step.active .step-label { color: var(--cs-brand); }

/* Completed step — number fades out, a drawn check pops in */
.progress-step.completed .step-circle {
    color: transparent;
    background: var(--cs-brand);
    border-color: var(--cs-brand);
}
.progress-step.completed .step-circle::after {
    content: "";
    position: absolute;
    inset: 0;
    background: center / 17px 17px no-repeat
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    animation: circlePop 0.4s var(--ease-spring);
}
.progress-step.completed .step-label { color: var(--cs-ink-2); }

.progress-line {
    flex: 1;
    height: 3px;
    margin: 18px 10px 0;  /* 18px top ≈ circle vertical centre (38px / 2) */
    background: var(--cs-border);
    border-radius: var(--cs-r-pill);
    overflow: hidden;
}
.progress-line-fill {
    height: 100%;
    width: 0;
    background: var(--cs-brand);
    border-radius: inherit;
    transition: width 0.5s var(--ease-out);
}
.progress-line-fill.filled { width: 100%; }   /* forgot_password.js toggles .filled */

/* ── Steps (directional slide; data-dir set by forgot_password.js) ── */
.form-step { display: none; }
.form-step.active { display: block; animation: crFadeIn 0.4s var(--ease-out); }
.form-step.exiting { display: block; animation: crFadeOut 0.28s var(--ease-out) forwards; }

.registration-card[data-dir="fwd"] .form-step.active   { animation: stepInRight 0.42s var(--ease-out); }
.registration-card[data-dir="fwd"] .form-step.exiting  { animation: stepOutLeft 0.28s var(--ease-out) forwards; }
.registration-card[data-dir="back"] .form-step.active  { animation: stepInLeft 0.42s var(--ease-out); }
.registration-card[data-dir="back"] .form-step.exiting { animation: stepOutRight 0.28s var(--ease-out) forwards; }

.step-header { margin-bottom: 22px; }
.step-header h2 { font-size: 1.3rem; font-weight: 750; letter-spacing: -0.01em; color: var(--cs-ink); margin: 0 0 5px; }
.step-header p { font-size: var(--cs-fs-sm); color: var(--cs-ink-3); margin: 0; }
.step-header p strong { color: var(--cs-ink-2); font-weight: 650; }

.step-form { display: flex; flex-direction: column; gap: 20px; }

/* Field stagger as a step enters */
.form-step.active .form-group { animation: fieldRise 0.5s var(--ease-out) both; }
.form-step.active .step-form > .form-group:nth-child(1) { animation-delay: 0.10s; }
.form-step.active .step-form > .form-group:nth-child(2) { animation-delay: 0.16s; }
.form-step.active .step-form > .form-group:nth-child(3) { animation-delay: 0.22s; }

/* ── Form controls ─────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 7px; }

.form-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--cs-fs-sm);
    font-weight: 600;
    color: var(--cs-ink-2);
    transition: color var(--cs-transition);
}
.label-icon { width: 16px; height: 16px; color: var(--cs-brand); flex: none; transition: transform 0.25s var(--ease-spring), color var(--cs-transition); }
.required-star { color: var(--cs-error); font-weight: 700; }

.form-input {
    width: 100%;
    font-family: var(--cs-font-ui);
    font-size: var(--cs-fs-sm);
    color: var(--cs-ink);
    background: var(--cs-surface);
    border: 1px solid var(--cs-border-strong);
    border-radius: var(--cs-r);
    padding: 12px 14px;
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition);
}
.form-input::placeholder { color: var(--cs-ink-3); }
.form-input:hover:not(:focus) { border-color: var(--cs-ink-3); }
.form-input:focus { outline: none; border-color: var(--cs-brand); box-shadow: var(--cs-ring); }

.form-group:focus-within .form-label { color: var(--cs-brand); }
.form-group:focus-within .label-icon { color: var(--cs-brand); transform: scale(1.14); }

.input-hint { font-size: var(--cs-fs-label); color: var(--cs-ink-3); line-height: var(--cs-lh-snug); transition: color var(--cs-transition); }

.form-input.success:not(:focus) { border-color: var(--cs-success); }
.form-group.error .form-input,
.form-input.error {
    border-color: var(--cs-error);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-error) 22%, transparent);
    animation: shake 0.4s ease;
}
.form-group.error .input-hint, .input-hint.error { color: var(--cs-error-ink); }

/* ── Segmented 6-digit code input ──────────────────────────── */
.code-input {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--cs-space-2);
    margin: 4px 0 2px;
}

.code-box {
    width: 100%;
    height: 60px;
    text-align: center;
    font-family: var(--cs-font-mono);
    font-size: var(--cs-fs-h2);
    font-weight: 700;
    color: var(--cs-ink);
    background: var(--cs-surface);
    border: 1.5px solid var(--cs-border-strong);
    border-radius: var(--cs-r);
    padding: 0;
    caret-color: var(--cs-brand);
    transition: border-color var(--cs-transition), box-shadow var(--cs-transition),
                background var(--cs-transition), transform 0.2s var(--ease-spring);
}
.code-box::-webkit-outer-spin-button,
.code-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.code-box:hover:not(:focus) { border-color: var(--cs-ink-3); }
.code-box:focus {
    outline: none;
    border-color: var(--cs-brand);
    box-shadow: var(--cs-ring);
    transform: translateY(-1px);
}
.code-box.filled { border-color: var(--cs-brand-300); background: var(--cs-brand-soft); }
.code-input.error .code-box {
    border-color: var(--cs-error);
    background: var(--cs-error-bg);
}
/* Shake the group as one unit, not each box independently */
.code-input.error { animation: shake 0.4s ease; }

/* ── Code metadata row (expiry + resend) ───────────────────── */
.code-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 14px;
    font-size: var(--cs-fs-label);
    color: var(--cs-ink-3);
    margin-top: -6px;
}
.code-expiry { font-variant-numeric: tabular-nums; }
.code-expiry.expired { color: var(--cs-error-ink); font-weight: 600; }

.link-btn {
    font-family: var(--cs-font-ui);
    font-size: inherit;
    font-weight: 600;
    color: var(--cs-brand);
    background: none;
    border: 0;
    padding: 0 2px;
    cursor: pointer;
    text-decoration: none;
    border-radius: var(--cs-r-sm);
    transition: color var(--cs-transition);
}
.link-btn:hover:not(:disabled) { color: var(--cs-brand-hover); text-decoration: underline; }
.link-btn:focus-visible { outline: none; box-shadow: var(--cs-ring); }
.link-btn:disabled { color: var(--cs-ink-3); cursor: default; font-weight: 500; }

/* ── Password checklist (mirrors auth.css) ─────────────────── */
.password-input-wrapper { position: relative; }
.password-input-wrapper .form-input { padding-right: 46px; }

/* Positive feedback only — green when met, never red while typing */
.pw-reqs {
    list-style: none;
    margin: 3px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
}
.pw-req {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--cs-fs-label);
    color: var(--cs-ink-3);
    transition: color 0.25s ease;
}
.pw-req-mark {
    position: relative;
    flex: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--cs-border-strong);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease-spring);
}
.pw-req.met { color: var(--cs-success-ink); font-weight: 600; }
.pw-req.met .pw-req-mark { background: var(--cs-success); border-color: var(--cs-success); transform: scale(1.06); }
.pw-req.met .pw-req-mark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 1px;
    width: 3px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.pw-match {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 1px;
    font-size: var(--cs-fs-label);
    font-weight: 600;
    line-height: var(--cs-lh-snug);
}
.pw-match:empty { display: none; }
.pw-match.ok { color: var(--cs-success-ink); }
.pw-match.bad { color: var(--cs-error-ink); }

.password-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--cs-ink-3);
    cursor: pointer;
    border-radius: var(--cs-r-sm);
    transition: color var(--cs-transition), background var(--cs-transition);
}
.password-toggle svg { width: 18px; height: 18px; transition: transform 0.2s var(--ease-spring); }
.password-toggle:hover { color: var(--cs-brand); background: var(--cs-brand-soft); }
.password-toggle:hover svg { transform: scale(1.12); }
.password-toggle:focus-visible { outline: none; box-shadow: var(--cs-ring); }

/* ── Actions (shine on primary) ────────────────────────────── */
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; }
.form-actions:has(.btn-next):not(:has(.btn-back)) { justify-content: flex-end; }

.btn-next, .btn-back, .btn-submit, .btn-return {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--cs-font-ui);
    font-size: 15px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: var(--cs-r);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--cs-transition), border-color var(--cs-transition), color var(--cs-transition), box-shadow 0.25s ease, transform 0.08s ease;
}
.btn-next svg, .btn-back svg, .btn-submit svg { width: 18px; height: 18px; position: relative; z-index: 1; transition: transform 0.2s var(--ease-spring); }
.btn-next span, .btn-back span, .btn-submit span, .btn-return span { position: relative; z-index: 1; }
.btn-next:active, .btn-back:active, .btn-submit:active, .btn-return:active { transform: translateY(1px) scale(0.99); }
.btn-next:focus-visible, .btn-back:focus-visible, .btn-submit:focus-visible, .btn-return:focus-visible { outline: none; box-shadow: var(--cs-ring); }

.btn-next, .btn-submit, .btn-return { background: var(--cs-brand); color: var(--cs-on-brand); }
.btn-next:hover, .btn-submit:hover, .btn-return:hover { background: var(--cs-brand-hover); box-shadow: 0 8px 22px color-mix(in srgb, var(--cs-brand-500) 30%, transparent); transform: translateY(-1px); }
.btn-next:hover svg { transform: translateX(3px); }
.btn-back:hover svg { transform: translateX(-3px); }
.btn-submit.success { background: var(--cs-success); }
.btn-submit:disabled, .btn-next:disabled { opacity: 0.65; cursor: progress; transform: none; }
.btn-submit:disabled:hover, .btn-next:disabled:hover { background: var(--cs-brand); box-shadow: none; }

/* Shine sweep on the primary buttons */
.btn-next::after, .btn-submit::after, .btn-return::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 28%, rgba(255, 255, 255, 0.26) 50%, transparent 72%);
    transform: translateX(-130%);
    transition: transform 0.7s var(--ease-out);
}
.btn-next:hover::after, .btn-submit:hover::after, .btn-return:hover::after { transform: translateX(130%); }
.btn-next:disabled::after, .btn-submit:disabled::after { display: none; }

.btn-back { background: var(--cs-surface); color: var(--cs-ink); border-color: var(--cs-border-strong); }
.btn-back:hover { border-color: var(--cs-brand); color: var(--cs-brand); }

/* Button loading spinner (injected as <div class="loading">) */
.loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    vertical-align: -3px;
    margin-right: 9px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Success screen ────────────────────────────────────────── */
.success-content { text-align: center; padding: 20px 10px 10px; }

.success-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--cs-success);
    background: var(--cs-success-bg);
}
.success-icon svg { width: 52px; height: 52px; }

/* Draw the check + circle when the success step becomes active */
.success-step.active .success-icon { animation: circlePop 0.6s var(--ease-spring) both; }
.success-step.active .success-icon svg path {
    stroke-dasharray: 90;
    stroke-dashoffset: 90;
    animation: drawStroke 0.7s var(--ease-out) 0.25s forwards;
}
.success-step.active .success-icon svg path:last-child { animation-delay: 0.45s; }

.success-content h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; color: var(--cs-ink); margin: 0 0 10px; animation: crRise 0.5s var(--ease-out) 0.35s both; }
.success-content p { font-size: var(--cs-fs-sm); color: var(--cs-ink-2); margin: 0 auto 6px; max-width: 44ch; line-height: var(--cs-lh-body); animation: crRise 0.5s var(--ease-out) 0.45s both; }
.success-subtext { color: var(--cs-ink-3); }
.success-subtext strong { color: var(--cs-ink-2); font-variant-numeric: tabular-nums; }
.btn-return { margin-top: 22px; width: auto; animation: crRise 0.5s var(--ease-out) 0.55s both; }

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes crCardIn { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes crRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes crFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes crFadeOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes stepInRight { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes stepOutLeft { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-36px); } }
@keyframes stepInLeft { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
@keyframes stepOutRight { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(36px); } }
@keyframes fieldRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes circlePop { 0% { transform: scale(0.4); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes drawStroke { to { stroke-dashoffset: 0; } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(3px); } 30%, 50%, 70% { transform: translateX(-5px); } 40%, 60% { transform: translateX(5px); } }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 560px) {
    .registration-card { padding: 24px 20px 26px; }
    .step-label { display: none; }
    .form-actions { flex-direction: column-reverse; }
    .btn-next, .btn-back, .btn-submit { width: 100%; }
    .code-input { gap: var(--cs-space-1); }
    .code-box { height: 52px; font-size: 1.25rem; }
}

@media (max-width: 360px) {
    .code-box { height: 46px; font-size: 1.05rem; }
}

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .registration-card, .registration-header, .progress-container,
    .form-step.active, .form-step.exiting, .form-step.active .form-group,
    .progress-step.active .step-circle, .progress-step.completed .step-circle::after,
    .success-step.active .success-icon, .success-content h2, .success-content p, .btn-return,
    .code-input.error, .form-input.error {
        animation: none !important;
    }
    .success-step.active .success-icon svg path { stroke-dashoffset: 0; animation: none; }
    .btn-next::after, .btn-submit::after, .btn-return::after { display: none; }
    .progress-line-fill { transition: none; }
    .code-box:focus { transform: none; }
}