/* =========================================================
   CATEREASE CUSTOMER PASSWORD RECOVERY V21
   Unified with the clean single-card customer auth page.
   Functional IDs and recovery JS behavior remain unchanged.
========================================================= */

body.customer-sequence-page.customer-recovery-page {
    overflow-y: auto;
    place-items: center;
}

.sequence-shell,
.recovery-shell {
    width: min(640px, calc(100% - 24px));
    height: auto;
    min-height: 570px;
    max-height: calc(100dvh - 44px);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.reset-recovery-shell {
    min-height: 640px;
}

.sequence-topbar {
    flex: 0 0 62px;
}

.sequence-form-stage {
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.sequence-form,
.recovery-form-wrap {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding: 4px clamp(32px, 6vw, 62px) 28px;

    scrollbar-width: thin;
    scrollbar-color: #c3cedd transparent;
}

.sequence-form::-webkit-scrollbar,
.recovery-form-wrap::-webkit-scrollbar {
    width: 6px;
}

.sequence-form::-webkit-scrollbar-track,
.recovery-form-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.sequence-form::-webkit-scrollbar-thumb,
.recovery-form-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #c3cedd;
}

/* =========================================================
   SHARED BUSINESS IDENTITY
========================================================= */

.sequence-brand {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 13px;
}

.sequence-brand .auth-logo-frame {
    width: 86px;
    height: 86px;
    margin-bottom: 7px;
}

.sequence-brand .auth-logo {
    width: 82px;
    height: 82px;
}

.sequence-brand .auth-business-name {
    margin-bottom: 0;
}

/* =========================================================
   HEADER / STEPS
========================================================= */

.recovery-step {
    width: min(100%, 520px);
    display: none;
}

.recovery-step.active {
    display: block;
    animation: recoveryStepEnter 340ms var(--auth-ease) both;
}

.recovery-step[hidden] {
    display: none !important;
}

.sequence-header {
    width: 100%;
    margin-bottom: 20px;
    text-align: center;
}

.sequence-header h1 {
    color: var(--auth-navy-900);
    font-size: clamp(1.55rem, 3vw, 1.95rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.sequence-header .form-subtitle {
    width: min(100%, 440px);
    margin: 6px auto 0;
}

.sequence-header .form-subtitle strong {
    color: var(--auth-navy-900);
    font-weight: 700;
}

.sequence-main-form,
.recovery-form {
    width: 100%;
    display: grid;
    gap: 10px;
}

/* Keep floating labels correct without changing recovery JS. */
.customer-recovery-page .input-group:has(input:not(:placeholder-shown)) label {
    top: 8px;
    color: var(--auth-navy-700);
    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1.15;
    transform: translateY(0);
}

.sequence-code-input input {
    padding-top: 24px;
    padding-bottom: 8px;
    letter-spacing: 0.14em;
    line-height: 1.2;
    font-weight: 750;
}

/* =========================================================
   STATUS MESSAGE
========================================================= */

.sequence-message,
.recovery-message {
    width: min(100%, 520px);

    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;

    margin-bottom: 16px;
    padding: 11px 12px;

    border: 1px solid #dbe5f1;
    border-left: 4px solid var(--auth-navy-800);
    border-radius: 12px;

    color: var(--auth-text);
    background: #f5f8fd;

    text-align: left;
}

.sequence-message[hidden],
.recovery-message[hidden] {
    display: none !important;
}

.recovery-message.success {
    border-color: #c9e4d5;
    border-left-color: var(--auth-success);
    background: #f1faf5;
}

.recovery-message.error {
    border-color: #f0cbd0;
    border-left-color: var(--auth-danger);
    background: #fff4f5;
}

.recovery-message.warning {
    border-left-color: #b7791f;
    background: #fff9ed;
}

.sequence-message-icon,
.recovery-message-icon {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid var(--auth-border);
    border-radius: 9px;

    color: var(--auth-navy-800);
    background: #ffffff;

    font-size: 0.68rem;
}

.recovery-message-copy strong {
    display: block;
    color: var(--auth-text);
    font-size: 0.72rem;
    font-weight: 800;
}

.recovery-message-copy p {
    margin: 3px 0 0;
    color: var(--auth-muted);
    font-size: 0.66rem;
    line-height: 1.5;
}

/* =========================================================
   RECOVERY ACTIONS
========================================================= */

.development-otp-panel {
    width: 100%;
    margin: -3px 0 12px;
    padding: 10px 12px;

    border: 1px dashed var(--auth-border-strong);
    border-radius: 10px;

    color: var(--auth-muted);
    background: var(--auth-soft);

    font-size: 0.63rem;
}

.development-otp-panel[hidden] {
    display: none !important;
}

.development-otp-panel span,
.development-otp-panel strong {
    display: block;
}

.development-otp-panel strong {
    margin-top: 3px;
    color: var(--auth-navy-900);
    font-size: 0.86rem;
    letter-spacing: 0.16em;
}

.sequence-action-row,
.recovery-action-row {
    width: 100%;
    min-height: 40px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 1px;
}

.sequence-text-action,
.sequence-resend-button,
.recovery-secondary-button {
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    color: var(--auth-navy-800);

    font-size: 0.68rem;
    font-weight: 700;

    transition:
        color var(--auth-fast),
        border-color var(--auth-fast),
        background var(--auth-fast),
        transform var(--auth-fast);
}

.sequence-text-action {
    padding: 0 2px;
    background: transparent;
}

.sequence-text-action i,
.sequence-resend-button i {
    color: var(--auth-red);
}

.sequence-resend-button,
.recovery-secondary-button {
    padding: 0 13px;

    border: 1px solid var(--auth-border);
    border-radius: 10px;

    background: var(--auth-soft);
    white-space: nowrap;
}

.sequence-text-action:hover:not(:disabled),
.sequence-resend-button:hover:not(:disabled) {
    color: var(--auth-red);
}

.sequence-resend-button:hover:not(:disabled) {
    border-color: var(--auth-border-strong);
    background: #ffffff;
    transform: translateY(-1px);
}

.sequence-resend-button:disabled {
    color: #8995a8;
    border-color: #e1e7ef;
    background: #f3f6fa;
}

/* Recovery JS changes the visible button text/icon itself. */
.sequence-primary-button.is-loading .auth-btn-default,
#resetPasswordBtn.is-loading .auth-btn-default {
    display: flex !important;
}

.sequence-primary-button.is-loading .auth-btn-loading,
#resetPasswordBtn.is-loading .auth-btn-loading {
    display: none !important;
}

.sequence-primary-button.is-loading [data-button-icon],
#resetPasswordBtn.is-loading #resetPasswordBtnIcon,
.recovery-secondary-button.is-loading [data-resend-icon] {
    animation: recoverySpin 0.75s linear infinite;
}

/* =========================================================
   PASSWORD RULES
========================================================= */

.sequence-password-rules,
.password-requirements {
    margin: 1px 0 2px;
    padding: 0 2px;

    display: grid;
    gap: 7px;

    list-style: none;
}

.sequence-password-rules li,
.password-requirements li {
    display: flex;
    align-items: flex-start;
    gap: 8px;

    color: var(--auth-muted);

    font-size: 0.63rem;
    font-weight: 600;
    line-height: 1.45;
}

.sequence-password-rules li i,
.password-requirements li i {
    margin-top: 4px;
    color: #c7d0dc;
    font-size: 0.40rem;
}

.sequence-password-rules li.valid,
.password-requirements li.valid,
.sequence-password-rules li.valid i,
.password-requirements li.valid i {
    color: var(--auth-success);
}

/* =========================================================
   PROGRESS
========================================================= */

.sequence-progress,
.recovery-progress {
    width: min(100%, 520px);

    margin-top: 20px;
    padding-top: 13px;

    border-top: 1px solid var(--auth-border);
}

.sequence-progress > span,
.recovery-progress > span {
    display: block;
    margin-bottom: 7px;

    color: #8a96a9;

    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sequence-progress-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.sequence-progress-item,
.recovery-progress-item {
    min-height: 28px;
    position: relative;

    display: flex;
    align-items: center;

    padding-left: 14px;

    color: #8a96a9;

    font-size: 0.60rem;
    font-weight: 700;
}

.sequence-progress-item::before,
.recovery-progress-item::before {
    content: "";

    width: 6px;
    height: 6px;

    position: absolute;
    left: 0;

    border-radius: 50%;
    background: #cad3df;
}

.sequence-progress-item.current,
.recovery-progress-item.current {
    color: var(--auth-navy-900);
}

.sequence-progress-item.current::before,
.recovery-progress-item.current::before {
    background: var(--auth-red);
}

.sequence-progress-item.completed,
.recovery-progress-item.completed {
    color: var(--auth-navy-700);
}

.sequence-progress-item.completed::before,
.recovery-progress-item.completed::before {
    background: var(--auth-navy-700);
}

/* =========================================================
   ANIMATION
========================================================= */

@keyframes recoveryStepEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes recoverySpin {
    to {
        transform: rotate(360deg);
    }
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-height: 720px) and (min-width: 681px) {
    .sequence-shell,
    .recovery-shell,
    .reset-recovery-shell {
        max-height: calc(100dvh - 28px);
        min-height: 0;
    }

    .sequence-topbar {
        flex-basis: 54px;
    }

    .sequence-form,
    .recovery-form-wrap {
        padding-top: 0;
        padding-bottom: 20px;
    }

    .sequence-brand .auth-logo-frame {
        width: 68px;
        height: 68px;
        margin-bottom: 5px;
    }

    .sequence-brand .auth-logo {
        width: 66px;
        height: 66px;
    }

    .sequence-brand {
        margin-bottom: 10px;
    }

    .sequence-header {
        margin-bottom: 14px;
    }
}

@media (max-width: 680px) {
    body.customer-sequence-page.customer-recovery-page {
        place-items: start center;
        padding: 12px;
    }

    .sequence-shell,
    .recovery-shell,
    .reset-recovery-shell {
        width: 100%;
        max-width: 560px;
        height: auto;
        min-height: calc(100dvh - 24px);
        max-height: none;
        border-radius: 20px;
    }

    .sequence-topbar {
        flex-basis: 58px;
        padding: 11px 14px 7px;
    }

    .sequence-form,
    .recovery-form-wrap {
        overflow: visible;
        padding: 0 16px 24px;
    }

    .sequence-brand .auth-logo-frame {
        width: 78px;
        height: 78px;
        margin-bottom: 7px;
    }

    .sequence-brand .auth-logo {
        width: 76px;
        height: 76px;
    }

    .sequence-brand .auth-business-name {
        padding: 0 8px;
        font-size: 0.74rem;
    }

    .sequence-header h1 {
        font-size: 1.65rem;
    }

    .sequence-action-row,
    .recovery-action-row {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .sequence-text-action,
    .sequence-resend-button {
        width: 100%;
    }

    .sequence-progress-track {
        gap: 4px;
    }
}

@media (max-width: 390px) {
    .sequence-form,
    .recovery-form-wrap {
        padding-left: 14px;
        padding-right: 14px;
    }

    .sequence-progress-item,
    .recovery-progress-item {
        padding-left: 11px;
        font-size: 0.56rem;
    }
}

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


/* =========================================================
   V22 — USER FORGOT PASSWORD MATCHES ADMIN RECOVERY STYLE
   Scoped ONLY to .forgot-password-page so reset-password.php
   keeps its current design and behavior.
========================================================= */

body.forgot-password-page.customer-recovery-page {
    min-height: 100vh;
    min-height: 100dvh;

    display: grid;
    place-items: center;

    overflow-y: auto;

    padding: 18px;

    background: #F4F7FC;
}

.forgot-password-page .recovery-shell {
    width: min(1024px, calc(100vw - 36px));
    height: auto;
    min-height: min(820px, calc(100dvh - 36px));
    max-height: none;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border: 1px solid #C9D8EE;
    border-radius: 26px;

    background: #FFFFFF;

    box-shadow:
        0 28px 72px
        rgba(8, 25, 77, 0.14);
}

.forgot-password-page .shell-top-accent {
    width: 96px;
    height: 4px;

    top: 0;
    left: 52px;

    border-radius: 0 0 999px 999px;

    background: #D72638;
}

.forgot-password-page .sequence-topbar {
    min-height: 88px;
    flex: 0 0 88px;

    display: flex;
    align-items: center;

    padding: 18px 34px 10px;
}

.forgot-password-page .back-home {
    min-height: 42px;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #08194D;

    font-size: 0.78rem;
    font-weight: 700;

    transition:
        color 200ms ease;
}

.forgot-password-page .back-home-icon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    border: 1px solid #D6E1EF;
    border-radius: 11px;

    color: #08194D;
    background: #F8FAFD;

    font-size: 0.72rem;

    transition:
        color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        background 220ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.forgot-password-page .back-home:hover {
    color: #B51224;
}

.forgot-password-page .back-home:hover .back-home-icon {
    color: #FFFFFF;

    border-color: #D72638;
    background: #D72638;

    transform: translateX(-2px);
}

.forgot-password-page .sequence-form-stage {
    min-height: 0;

    flex: 1 1 auto;

    display: grid;
    place-items: center;

    overflow: visible;
}

.forgot-password-page .sequence-form,
.forgot-password-page .recovery-form-wrap {
    width: min(100%, 800px);
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: visible;

    padding: 14px 0 52px;
}

.forgot-password-page .sequence-brand {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    margin-bottom: 22px;

    text-align: center;
}

.forgot-password-page .sequence-brand .auth-logo-frame {
    width: auto;
    height: auto;

    margin: 0 0 10px;

    border: 0;
    border-radius: 0;

    background: transparent;
    box-shadow: none;
}

.forgot-password-page .sequence-brand .auth-logo {
    width: 84px;
    height: 84px;

    display: block;

    object-fit: contain;
}

.forgot-password-page .sequence-brand .auth-business-name {
    margin: 0;

    color: #08194D;

    font-size: 0.80rem;
    font-weight: 700;
    line-height: 1.45;
}

.forgot-password-page .recovery-step {
    width: 100%;
    max-width: 800px;
}

.forgot-password-page .sequence-header {
    width: 100%;

    margin-bottom: 26px;

    text-align: center;
}

.forgot-password-page .sequence-eyebrow {
    display: inline-block;

    margin-bottom: 9px;

    color: #D72638;

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
}

.forgot-password-page .sequence-header h1 {
    margin: 0;

    color: #08194D;

    font-size: clamp(2rem, 4vw, 2.45rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.forgot-password-page .sequence-header .form-subtitle {
    width: min(100%, 620px);

    margin: 8px auto 0;

    color: #68758C;

    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.65;
}

.forgot-password-page .sequence-header .form-subtitle strong {
    color: #08194D;

    font-weight: 700;
}

.forgot-password-page .sequence-main-form,
.forgot-password-page .recovery-form {
    width: 100%;

    display: grid;

    gap: 14px;
}

.forgot-password-page .input-group {
    width: 100%;
    min-height: 64px;

    position: relative;
    overflow: hidden;

    display: flex;
    align-items: center;

    border: 1px solid #DFE6F0;
    border-radius: 15px;

    background: #FFFFFF;

    transition:
        border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.forgot-password-page .input-group:hover {
    border-color: #C9D8EE;
}

.forgot-password-page .input-group:focus-within {
    border-color: #9BB2DF;

    box-shadow:
        0 0 0 3px rgba(30, 58, 138, 0.055),
        0 8px 18px rgba(8, 25, 77, 0.055);
}

.forgot-password-page .input-group .input-icon {
    width: 72px;
    height: 64px;

    flex: 0 0 72px;

    position: relative;
    z-index: 3;

    display: grid;
    place-items: center;

    border-right: 1px solid #DDE6F1;

    color: #08194D;
    background: #F3F7FD;

    font-size: 0.82rem;

    transition:
        color 220ms ease,
        background 220ms ease;
}

.forgot-password-page .input-group:focus-within .input-icon {
    color: #D72638;
    background: #FFF6F7;
}

.forgot-password-page .input-group input {
    width: 100%;
    min-width: 0;
    height: 62px;

    position: relative;
    z-index: 2;

    border: 0;
    outline: 0;

    padding: 25px 18px 8px 18px;

    color: #101A3A;
    background: transparent;

    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;

    caret-color: #D72638;
}

.forgot-password-page .input-group input::placeholder {
    color: transparent;
}

.forgot-password-page .input-group label {
    max-width: calc(100% - 110px);

    position: absolute;
    top: 50%;
    left: 90px;
    z-index: 4;

    overflow: hidden;

    color: #75839B;

    font-size: 0.79rem;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;
    text-overflow: ellipsis;

    pointer-events: none;

    transform: translateY(-50%);

    transition:
        top 220ms cubic-bezier(0.22, 1, 0.36, 1),
        color 180ms ease,
        font-size 220ms cubic-bezier(0.22, 1, 0.36, 1),
        font-weight 180ms ease;
}

.forgot-password-page .input-group:focus-within label,
.forgot-password-page .input-group:has(input:not(:placeholder-shown)) label {
    top: 13px;

    color: #D72638;

    font-size: 0.58rem;
    font-weight: 700;

    transform: none;
}

.forgot-password-page .input-group:has(input:not(:placeholder-shown)):not(:focus-within) label {
    color: #08194D;
}

.forgot-password-page .input-focus-line {
    width: 76px;
    height: 3px;

    position: absolute;
    top: 0;
    left: 88px;
    z-index: 4;

    border-radius: 0 0 999px 999px;

    background: #D72638;

    transform: scaleX(0);
    transform-origin: left center;

    transition:
        transform 280ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

.forgot-password-page .input-group:focus-within .input-focus-line {
    transform: scaleX(1);
}

.forgot-password-page .sequence-primary-button,
.forgot-password-page .recovery-primary-button {
    width: 100%;
    min-height: 68px;

    position: relative;
    overflow: hidden;
    isolation: isolate;

    padding: 5px;

    border: 0;
    border-radius: 14px;

    color: #FFFFFF;
    background: #08194D;

    box-shadow:
        0 14px 30px
        rgba(8, 25, 77, 0.16);

    transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
        background 220ms ease;
}

.forgot-password-page .sequence-primary-button::before,
.forgot-password-page .recovery-primary-button::before {
    content: "";

    width: 52px;
    height: 180%;

    position: absolute;
    top: -40%;
    left: -92px;
    z-index: 1;

    opacity: 0.68;

    background: rgba(255, 255, 255, 0.38);

    transform: rotate(18deg);

    transition:
        left 560ms
        cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
}

.forgot-password-page .sequence-primary-button:hover::before,
.forgot-password-page .sequence-primary-button:focus-visible::before,
.forgot-password-page .recovery-primary-button:hover::before,
.forgot-password-page .recovery-primary-button:focus-visible::before {
    left: calc(100% + 60px);
}

.forgot-password-page .sequence-primary-button:hover,
.forgot-password-page .sequence-primary-button:focus-visible,
.forgot-password-page .recovery-primary-button:hover,
.forgot-password-page .recovery-primary-button:focus-visible {
    background: #0B205D;

    box-shadow:
        0 17px 34px
        rgba(8, 25, 77, 0.20);

    transform: translateY(-1px);
}

.forgot-password-page .sequence-primary-button .auth-btn-default,
.forgot-password-page .recovery-primary-button .auth-btn-default {
    width: 100%;
    min-height: 56px;

    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

.forgot-password-page .recovery-button-label {
    padding-left: 16px;

    font-size: 0.80rem;
    font-weight: 700;
    line-height: 1;
}

.forgot-password-page .recovery-button-action {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.075);

    transition:
        border-color 220ms ease,
        background 220ms ease,
        transform 220ms ease;
}

.forgot-password-page .recovery-button-action i {
    font-size: 0.74rem;
}

.forgot-password-page .sequence-primary-button:hover .recovery-button-action,
.forgot-password-page .sequence-primary-button:focus-visible .recovery-button-action,
.forgot-password-page .recovery-primary-button:hover .recovery-button-action,
.forgot-password-page .recovery-primary-button:focus-visible .recovery-button-action {
    border-color: #D72638;
    background: #D72638;

    transform: translateX(1px);
}

.forgot-password-page .recovery-code-note {
    margin: -1px 0 0;

    color: #68758C;

    font-size: 0.66rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
}

.forgot-password-page .sequence-message,
.forgot-password-page .recovery-message {
    width: 100%;
    max-width: 800px;

    margin-bottom: 18px;
}

.forgot-password-page .sequence-action-row,
.forgot-password-page .recovery-action-row {
    min-height: 42px;

    margin: 0 0 2px;
}

.forgot-password-page .sequence-text-action,
.forgot-password-page .sequence-resend-button,
.forgot-password-page .recovery-secondary-button {
    font-size: 0.70rem;
}

.forgot-password-page .sequence-progress,
.forgot-password-page .recovery-progress {
    width: 100%;
    max-width: 800px;

    margin-top: 22px;
    padding-top: 16px;

    border-top: 1px solid #DFE6F0;
}

.forgot-password-page .sequence-progress > span,
.forgot-password-page .recovery-progress > span {
    display: block;

    margin-bottom: 11px;

    color: #94A3B8;

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.forgot-password-page .sequence-progress-track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.forgot-password-page .sequence-progress-item,
.forgot-password-page .recovery-progress-item {
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    padding: 0 12px;

    border: 1px solid #DFE6F0;
    border-radius: 11px;

    color: #94A3B8;
    background: #FAFBFD;

    font-size: 0.68rem;
    font-weight: 700;
}

.forgot-password-page .sequence-progress-item::before,
.forgot-password-page .recovery-progress-item::before {
    display: none;
}

.forgot-password-page .sequence-progress-item.current,
.forgot-password-page .recovery-progress-item.current {
    color: #D72638;

    border-color: #F0C7CD;
    background: #FFF6F7;
}

.forgot-password-page .sequence-progress-item.completed,
.forgot-password-page .recovery-progress-item.completed {
    color: #08194D;

    border-color: #CBD8E9;
    background: #F3F7FD;
}

.forgot-password-page .development-otp-panel {
    width: 100%;

    margin: -2px 0 14px;
}

@media (max-width: 760px) {
    body.forgot-password-page.customer-recovery-page {
        display: block;

        padding: 12px;
    }

    .forgot-password-page .recovery-shell {
        width: 100%;
        min-height: calc(100dvh - 24px);

        border-radius: 22px;
    }

    .forgot-password-page .sequence-topbar {
        min-height: 70px;
        flex-basis: 70px;

        padding: 14px 18px 8px;
    }

    .forgot-password-page .sequence-form,
    .forgot-password-page .recovery-form-wrap {
        width: 100%;

        padding: 6px 22px 32px;
    }

    .forgot-password-page .sequence-brand .auth-logo {
        width: 74px;
        height: 74px;
    }

    .forgot-password-page .sequence-brand .auth-business-name {
        font-size: 0.74rem;
    }

    .forgot-password-page .sequence-header h1 {
        font-size: 1.9rem;
    }

    .forgot-password-page .sequence-header .form-subtitle {
        font-size: 0.73rem;
    }

    .forgot-password-page .sequence-primary-button,
    .forgot-password-page .recovery-primary-button {
        min-height: 60px;
    }

    .forgot-password-page .sequence-primary-button .auth-btn-default,
    .forgot-password-page .recovery-primary-button .auth-btn-default {
        min-height: 48px;
    }

    .forgot-password-page .recovery-button-action {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
    }
}

@media (max-width: 480px) {
    body.forgot-password-page.customer-recovery-page {
        padding: 0;

        background: #FFFFFF;
    }

    .forgot-password-page .recovery-shell {
        min-height: 100dvh;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .forgot-password-page .shell-top-accent {
        left: 20px;

        width: 78px;
    }

    .forgot-password-page .sequence-topbar {
        padding: 14px 16px 6px;
    }

    .forgot-password-page .back-home-text {
        display: none;
    }

    .forgot-password-page .sequence-form,
    .forgot-password-page .recovery-form-wrap {
        padding: 6px 16px 28px;
    }

    .forgot-password-page .sequence-brand {
        margin-bottom: 18px;
    }

    .forgot-password-page .sequence-header {
        margin-bottom: 22px;
    }

    .forgot-password-page .sequence-header h1 {
        font-size: 1.72rem;
    }

    .forgot-password-page .input-group .input-icon {
        width: 60px;
        flex-basis: 60px;
    }

    .forgot-password-page .input-group label {
        left: 76px;
    }

    .forgot-password-page .input-focus-line {
        left: 74px;
    }

    .forgot-password-page .recovery-button-label {
        padding-left: 12px;

        font-size: 0.75rem;
    }

    .forgot-password-page .sequence-progress-track {
        gap: 6px;
    }

    .forgot-password-page .sequence-progress-item,
    .forgot-password-page .recovery-progress-item {
        min-height: 38px;

        padding: 0 6px;

        font-size: 0.62rem;
    }

    .forgot-password-page .sequence-action-row,
    .forgot-password-page .recovery-action-row {
        align-items: stretch;
        flex-direction: column;

        gap: 8px;
    }

    .forgot-password-page .sequence-text-action,
    .forgot-password-page .sequence-resend-button,
    .forgot-password-page .recovery-secondary-button {
        width: 100%;
    }
}

@media (min-width: 761px) and (max-height: 760px) {
    body.forgot-password-page.customer-recovery-page {
        padding: 12px;
    }

    .forgot-password-page .recovery-shell {
        min-height: calc(100dvh - 24px);
    }

    .forgot-password-page .sequence-topbar {
        min-height: 66px;
        flex-basis: 66px;
    }

    .forgot-password-page .sequence-form,
    .forgot-password-page .recovery-form-wrap {
        padding-top: 0;
        padding-bottom: 22px;
    }

    .forgot-password-page .sequence-brand {
        margin-bottom: 12px;
    }

    .forgot-password-page .sequence-brand .auth-logo {
        width: 66px;
        height: 66px;
    }

    .forgot-password-page .sequence-header {
        margin-bottom: 18px;
    }

    .forgot-password-page .sequence-header h1 {
        font-size: 1.82rem;
    }

    .forgot-password-page .sequence-progress,
    .forgot-password-page .recovery-progress {
        margin-top: 15px;
        padding-top: 12px;
    }
}


/* =========================================================
   V23 — COMPACT CUSTOMER PASSWORD RECOVERY
   Fixes the oversized user recovery card while keeping the
   same customer-auth visual language and all existing logic.
========================================================= */

body.forgot-password-page.customer-recovery-page {
    padding: 18px;
}

.forgot-password-page .recovery-shell {
    width: min(720px, calc(100vw - 36px));
    height: auto;
    min-height: 650px;
    max-height: calc(100dvh - 36px);

    border-radius: 24px;
}

.forgot-password-page .sequence-topbar {
    min-height: 72px;
    flex-basis: 72px;

    padding: 14px 24px 8px;
}

.forgot-password-page .sequence-form-stage {
    padding: 0;
}

.forgot-password-page .sequence-form,
.forgot-password-page .recovery-form-wrap {
    width: min(100%, 580px);
    height: auto;

    justify-content: center;

    overflow-y: auto;

    padding: 10px 0 30px;
}

.forgot-password-page .sequence-brand {
    margin-bottom: 16px;
}

.forgot-password-page .sequence-brand .auth-logo {
    width: 72px;
    height: 72px;
}

.forgot-password-page .sequence-brand .auth-business-name {
    font-size: 0.74rem;
}

.forgot-password-page .recovery-step {
    width: 100%;
    max-width: 580px;
}

.forgot-password-page .sequence-header {
    margin-bottom: 20px;
}

.forgot-password-page .sequence-eyebrow {
    margin-bottom: 7px;

    font-size: 0.62rem;
}

.forgot-password-page .sequence-header h1 {
    font-size: clamp(1.78rem, 3vw, 2.08rem);
}

.forgot-password-page .sequence-header .form-subtitle {
    width: min(100%, 500px);

    margin-top: 6px;

    font-size: 0.73rem;
}

.forgot-password-page .sequence-main-form,
.forgot-password-page .recovery-form {
    gap: 11px;
}

.forgot-password-page .input-group {
    min-height: 60px;
}

.forgot-password-page .input-group .input-icon {
    width: 62px;
    height: 58px;
    flex-basis: 62px;
}

.forgot-password-page .input-group input {
    height: 58px;

    padding-top: 23px;
    padding-bottom: 7px;

    font-size: 0.78rem;
}

.forgot-password-page .input-group label {
    left: 78px;

    font-size: 0.76rem;
}

.forgot-password-page .input-group:focus-within label,
.forgot-password-page .input-group:has(input:not(:placeholder-shown)) label {
    top: 12px;

    font-size: 0.56rem;
}

.forgot-password-page .input-focus-line {
    left: 76px;
    width: 68px;
}

.forgot-password-page .sequence-primary-button,
.forgot-password-page .recovery-primary-button {
    min-height: 58px;
}

.forgot-password-page .sequence-primary-button .auth-btn-default,
.forgot-password-page .recovery-primary-button .auth-btn-default {
    min-height: 46px;
}

.forgot-password-page .recovery-button-label {
    padding-left: 13px;

    font-size: 0.76rem;
}

.forgot-password-page .recovery-button-action {
    width: 40px;
    height: 40px;
    flex-basis: 40px;

    border-radius: 10px;
}

.forgot-password-page .recovery-button-action i {
    font-size: 0.69rem;
}

.forgot-password-page .recovery-code-note {
    margin-top: -1px;

    font-size: 0.63rem;
}

.forgot-password-page .sequence-action-row,
.forgot-password-page .recovery-action-row {
    min-height: 40px;

    margin-bottom: 1px;
}

.forgot-password-page .sequence-text-action,
.forgot-password-page .sequence-resend-button,
.forgot-password-page .recovery-secondary-button {
    font-family: "Poppins", sans-serif;
    font-size: 0.67rem;
    font-weight: 700;
}

.forgot-password-page .sequence-progress,
.forgot-password-page .recovery-progress {
    width: 100%;
    max-width: 580px;

    margin-top: 16px;
    padding-top: 12px;
}

.forgot-password-page .sequence-progress > span,
.forgot-password-page .recovery-progress > span {
    margin-bottom: 8px;

    font-size: 0.58rem;
}

.forgot-password-page .sequence-progress-track {
    gap: 8px;
}

.forgot-password-page .sequence-progress-item,
.forgot-password-page .recovery-progress-item {
    min-height: 36px;

    border-radius: 10px;

    font-size: 0.64rem;
}


/* =========================================================
   KEEP RECOVERY BUTTON TEXT VISIBLE WHILE LOADING
   The existing JS updates the visible label/icon directly.
========================================================= */

.forgot-password-page
.sequence-primary-button.is-loading
.auth-btn-default,

.forgot-password-page
.recovery-primary-button.is-loading
.auth-btn-default {
    display: flex !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.forgot-password-page
.sequence-primary-button.is-loading
.auth-btn-loading,

.forgot-password-page
.recovery-primary-button.is-loading
.auth-btn-loading {
    display: none !important;
}

.forgot-password-page
.sequence-primary-button.is-loading
[data-button-label],

.forgot-password-page
.recovery-primary-button.is-loading
[data-button-label] {
    color: #FFFFFF !important;

    opacity: 1 !important;
    visibility: visible !important;
}

.forgot-password-page
.sequence-primary-button.is-loading
[data-button-icon],

.forgot-password-page
.recovery-primary-button.is-loading
[data-button-icon] {
    animation: recoverySpin 0.75s linear infinite;
}


/* =========================================================
   SHORT LAPTOP
========================================================= */

@media (min-width: 681px) and (max-height: 760px) {
    body.forgot-password-page.customer-recovery-page {
        padding: 10px;
    }

    .forgot-password-page .recovery-shell {
        min-height: 0;
        max-height: calc(100dvh - 20px);
    }

    .forgot-password-page .sequence-topbar {
        min-height: 58px;
        flex-basis: 58px;

        padding-top: 10px;
    }

    .forgot-password-page .sequence-form,
    .forgot-password-page .recovery-form-wrap {
        padding-top: 0;
        padding-bottom: 18px;
    }

    .forgot-password-page .sequence-brand {
        margin-bottom: 10px;
    }

    .forgot-password-page .sequence-brand .auth-logo {
        width: 60px;
        height: 60px;
    }

    .forgot-password-page .sequence-header {
        margin-bottom: 14px;
    }

    .forgot-password-page .sequence-header h1 {
        font-size: 1.65rem;
    }

    .forgot-password-page .sequence-progress,
    .forgot-password-page .recovery-progress {
        margin-top: 11px;
        padding-top: 9px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 680px) {
    body.forgot-password-page.customer-recovery-page {
        padding: 12px;
    }

    .forgot-password-page .recovery-shell {
        width: 100%;
        min-height: calc(100dvh - 24px);
        max-height: none;
    }

    .forgot-password-page .sequence-form,
    .forgot-password-page .recovery-form-wrap {
        width: 100%;

        padding: 4px 18px 26px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 460px) {
    body.forgot-password-page.customer-recovery-page {
        padding: 0;
    }

    .forgot-password-page .recovery-shell {
        min-height: 100dvh;

        border-radius: 0;
    }

    .forgot-password-page .sequence-form,
    .forgot-password-page .recovery-form-wrap {
        padding-left: 16px;
        padding-right: 16px;
    }

    .forgot-password-page .sequence-action-row,
    .forgot-password-page .recovery-action-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        gap: 8px;
    }

    .forgot-password-page .sequence-text-action,
    .forgot-password-page .sequence-resend-button,
    .forgot-password-page .recovery-secondary-button {
        width: auto;
    }
}


/* =========================================================
   V24 — USER RECOVERY SUCCESS MESSAGE POLISH
   Aligns the icon/copy and uses the same success treatment
   as the administrator OTP/recovery pages.
   Presentation-only.
========================================================= */

.forgot-password-page .sequence-message,
.forgot-password-page .recovery-message {
    width: 100%;
    max-width: 580px;
    min-height: 68px;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;

    gap: 12px;

    margin: 0 0 18px;
    padding: 12px 14px;

    border-radius: 12px;

    text-align: left;
}


/* SUCCESS STATE */

.forgot-password-page .recovery-message.success {
    border: 1px solid #BFE8CF;
    border-left: 4px solid #16834B;

    color: #15803D;
    background: #EDF9F2;
}


/* ICON */

.forgot-password-page .recovery-message.success .sequence-message-icon,
.forgot-password-page .recovery-message.success .recovery-message-icon {
    width: 34px;
    height: 34px;

    align-self: center;

    display: grid;
    place-items: center;

    margin: 0;

    border: 1px solid #9ED8B5;
    border-radius: 9px;

    color: #15803D;
    background: #FFFFFF;

    font-size: 0.64rem;
    line-height: 1;
}

.forgot-password-page .recovery-message.success .sequence-message-icon i,
.forgot-password-page .recovery-message.success .recovery-message-icon i {
    color: #15803D;

    line-height: 1;
}


/* COPY */

.forgot-password-page .recovery-message-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 2px;

    margin: 0;
    padding: 0;
}

.forgot-password-page .recovery-message.success .recovery-message-copy strong {
    margin: 0;

    color: #117A44;

    font-family: "Poppins", sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.35;
}

.forgot-password-page .recovery-message.success .recovery-message-copy p {
    margin: 0;

    color: #4F6F5C;

    font-family: "Poppins", sans-serif;
    font-size: 0.66rem;
    font-weight: 400;
    line-height: 1.48;
}


/* ERROR / WARNING KEEP THE SAME ALIGNMENT */

.forgot-password-page .recovery-message.error,
.forgot-password-page .recovery-message.warning {
    align-items: center;
}

.forgot-password-page .recovery-message.error .recovery-message-icon,
.forgot-password-page .recovery-message.warning .recovery-message-icon {
    align-self: center;

    margin: 0;
}


/* MOBILE */

@media (max-width: 460px) {
    .forgot-password-page .sequence-message,
    .forgot-password-page .recovery-message {
        min-height: 62px;

        grid-template-columns: 32px minmax(0, 1fr);

        gap: 10px;

        padding: 11px 12px;
    }

    .forgot-password-page .recovery-message.success .sequence-message-icon,
    .forgot-password-page .recovery-message.success .recovery-message-icon {
        width: 32px;
        height: 32px;
    }

    .forgot-password-page .recovery-message.success .recovery-message-copy strong {
        font-size: 0.68rem;
    }

    .forgot-password-page .recovery-message.success .recovery-message-copy p {
        font-size: 0.62rem;
    }
}