/* ============================================================
   FORGOT PASSWORD — three-step card over the CDRRMO photo backdrop
   (matches the "Forgot Password / Check your Email / Set a new
   password" mockups). Card is 400px on desktop and fills the
   viewport width (minus a gutter) on phones.
   ============================================================ */
:root {
    --fp-orange: #f26a1b;
    --fp-orange-deep: #f25a10;
    --fp-orange-bright: #ff8a2b;
    --fp-peach: #fde4d3;
    --fp-peach-soft: #fdeee4;
    --fp-text: #3a3a3a;
    --fp-text-mid: #5d5d5d;
    --fp-text-grey: #7a7a7a;
    --fp-placeholder: #8f8f8f;
    --fp-border: #c9c9c9;
    --fp-border-soft: #e2e2e2;
    --fp-white: #ffffff;
    --fp-radius: 6px;
    --fp-card-radius: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    font-family: 'Inter', 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--fp-text);
    background: #f0e6dc;
    -webkit-font-smoothing: antialiased;
}

/* ---- Backdrop ---- */
.fp-page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow: hidden;
}

.fp-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.fp-seals {
    position: absolute;
    top: 34px;
    right: 34px;
    display: flex;
    gap: 16px;
    z-index: 2;
}

.fp-seals img {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    object-fit: cover;
}

/* ---- Card ---- */
.fp-card {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 400px;
    background: var(--fp-white);
    border-radius: var(--fp-card-radius);
    padding: 36px 42px 32px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    text-align: center;
}

.fp-step { display: none; }
.fp-step.is-active { display: block; animation: fp-fade 0.28s ease; }

@keyframes fp-fade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fp-icon-circle {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fp-icon-circle img { width: 60px; height: 60px; object-fit: contain; }

.fp-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--fp-orange);
    margin-bottom: 8px;
    letter-spacing: -0.2px;
}

.fp-subtitle {
    font-size: 14px;
    line-height: 1.35;
    color: var(--fp-text-grey);
    margin-bottom: 22px;
}
.fp-subtitle strong { color: var(--fp-text-mid); font-weight: 600; }

/* ---- Alert ---- */
.fp-alert {
    background: #ffebee;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
    border-radius: var(--fp-radius);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    text-align: left;
}
.fp-alert.is-success {
    background: #e8f5e9;
    color: #2e7d32;
    border-color: #c8e6c9;
}

/* ---- Inputs ---- */
.fp-field {
    position: relative;
    margin-bottom: 16px;
    text-align: left;
}

.fp-field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    object-fit: contain;
    pointer-events: none;
}
.fp-field-icon-lock { width: 15px; height: 18px; }

.fp-input {
    width: 100%;
    height: 56px;
    padding: 0 16px 0 40px;
    border: 1.5px solid var(--fp-border);
    border-radius: var(--fp-radius);
    background: var(--fp-white);
    font-family: inherit;
    font-size: 14px;
    color: var(--fp-text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fp-input-pw { padding-right: 48px; }
.fp-input::placeholder { color: var(--fp-placeholder); }
.fp-input:focus {
    border-color: var(--fp-orange);
    box-shadow: 0 0 0 3px rgba(242, 106, 27, 0.12);
}
.fp-input.is-invalid { border-color: #d32f2f; }

.fp-eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b6b6b;
    padding: 0;
}
.fp-eye-svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }
.fp-eye-svg .fp-eye-open { stroke: none; }
.fp-eye-svg .fp-eye-slash { fill: none; stroke-width: 2; stroke-linecap: round; }
.fp-eye.is-visible .fp-eye-slash { display: none; }
.fp-eye:hover { color: var(--fp-orange); }

/* ---- Buttons ---- */
.fp-btn {
    width: 100%;
    height: 56px;
    border-radius: var(--fp-radius);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.fp-btn:active { transform: translateY(1px); }
.fp-btn[disabled] { opacity: 0.6; cursor: not-allowed; }

.fp-btn-primary {
    border: none;
    color: var(--fp-white);
    background: linear-gradient(180deg, var(--fp-orange-bright) 0%, var(--fp-orange-deep) 100%);
    box-shadow: 0 4px 12px rgba(242, 106, 27, 0.25);
}
.fp-btn-primary:hover:not([disabled]) { box-shadow: 0 6px 18px rgba(242, 106, 27, 0.35); }

.fp-btn-outline {
    border: 1.5px solid var(--fp-border);
    background: var(--fp-white);
    color: var(--fp-text-mid);
}
.fp-btn-outline:hover { border-color: var(--fp-orange); color: var(--fp-orange); }

.fp-btn-arrow { width: 22px; height: 12px; object-fit: contain; }

.fp-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 22px 0;
    color: var(--fp-text-grey);
    font-size: 13px;
}
.fp-divider::before,
.fp-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--fp-border-soft);
}

/* ---- Step 2: code boxes ---- */
.fp-code-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 14px;
}

.fp-code-box {
    flex: 1 1 0;
    min-width: 0;
    height: 56px;
    border: 1.5px solid var(--fp-border);
    border-radius: var(--fp-radius);
    font-family: inherit;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    color: var(--fp-text);
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fp-code-box:focus {
    border-color: var(--fp-orange);
    box-shadow: 0 0 0 3px rgba(242, 106, 27, 0.12);
}
.fp-code-box.is-invalid { border-color: #d32f2f; }

.fp-timer {
    text-align: left;
    font-size: 13px;
    color: var(--fp-text-grey);
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.fp-timer strong { color: var(--fp-orange); font-weight: 700; }
.fp-timer.is-expired strong { color: #d32f2f; }

.fp-resend {
    margin-left: auto;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--fp-orange);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}
.fp-resend[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- Step 3: rules + button row ---- */
.fp-rules {
    background: var(--fp-peach-soft);
    border-radius: var(--fp-radius);
    padding: 12px 12px 10px;
    text-align: left;
    margin-bottom: 22px;
}
.fp-rules-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--fp-orange);
    margin-bottom: 8px;
}
.fp-rules ul { list-style: none; }
.fp-rules li {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--fp-text);
    margin-bottom: 6px;
    transition: color 0.2s ease;
}
.fp-rules li:last-child { margin-bottom: 0; }
.fp-rules li img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    transition: filter 0.2s ease, opacity 0.2s ease;
}
/* Rules light up as the typed password satisfies them; unmet ones
   are greyed until then (all shown orange before typing, as mocked). */
.fp-rules.is-live li { color: var(--fp-text-grey); }
.fp-rules.is-live li img { filter: grayscale(1); opacity: 0.45; }
.fp-rules.is-live li.is-met { color: var(--fp-text); }
.fp-rules.is-live li.is-met img { filter: none; opacity: 1; }

.fp-btn-row {
    display: flex;
    gap: 18px;
}
.fp-btn-row .fp-btn-back { flex: 0 0 132px; }
.fp-btn-row .fp-btn-primary { flex: 1 1 auto; }

.fp-icon-circle-done img { width: 60px; height: 60px; }

/* ============================================================
   PHONES — seals shrink into the top corner, card takes the width
   with a 16px gutter, taller elements tighten slightly.
   ============================================================ */
@media (max-width: 640px) {
    .fp-page { padding: 88px 16px 24px; align-items: flex-start; }
    .fp-seals { top: 16px; right: 16px; gap: 10px; }
    .fp-seals img { width: 56px; height: 56px; }
    .fp-card { padding: 28px 22px 24px; border-radius: 14px; }
    .fp-title { font-size: 22px; }
    .fp-subtitle br { display: none; }
    .fp-code-row { gap: 12px; }
    .fp-code-box { height: 52px; font-size: 20px; }
}

@media (max-width: 380px) {
    .fp-card { padding: 24px 16px 20px; }
    .fp-input, .fp-btn { height: 50px; }
    .fp-btn { font-size: 14px; }
    .fp-btn-row { gap: 10px; }
    .fp-btn-row .fp-btn-back { flex-basis: 104px; }
}

/* Short landscape phones: allow the page to scroll rather than clip */
@media (max-height: 640px) {
    .fp-page { align-items: flex-start; padding-top: 24px; }
    .fp-seals { display: none; }
}