/* ============================================================ forgot-password-fix.css Mobile responsiveness + UI improvements for forgot-password.php Add AFTER auth.css in the layout's ============================================================ */ /* ---------------------------------------------------------- 1. PAGE SHELL ---------------------------------------------------------- */ .forgot-password-page { display: flex; flex-direction: column; min-height: 100vh; height: 100%; background: linear-gradient(160deg, #f2f7f3 0%, #eaf1eb 60%, #e4eee5 100%); overflow-x: hidden; overflow-y: auto; } .forgot-password-page .site-header { display: flex !important; flex-shrink: 0; } /* ---------------------------------------------------------- 2. LAYOUT ---------------------------------------------------------- */ .forgot-password-page .auth-layout { display: flex !important; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 auto; width: min(520px, calc(100% - 1.5rem)); margin: 0 auto; padding: 1.25rem 0; gap: 0; box-sizing: border-box; overflow: visible; } /* ---------------------------------------------------------- 3. HERO / HEADING ---------------------------------------------------------- */ .forgot-password-page .forgot-password-page__hero { width: 100%; text-align: center; margin-bottom: 0.85rem; } .forgot-password-page .auth-card__header--forgot { text-align: center; margin-bottom: 0; } .forgot-password-page .auth-card__header--forgot h1 { font-size: clamp(1.45rem, 4vw, 2rem); font-weight: 800; color: #0f1f14; letter-spacing: -0.025em; margin: 0 0 0.25rem; line-height: 1.2; } .forgot-password-page .auth-card__header--forgot p { font-size: 0.875rem; color: #6d7d8f; font-weight: 500; margin: 0; line-height: 1.5; } /* ---------------------------------------------------------- 4. CARD ---------------------------------------------------------- */ .forgot-password-page .auth-card--forgot { width: 100%; background: #ffffff; border: 1px solid #dce8de; border-radius: 20px; padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1rem, 2.5vw, 1.5rem); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 12px 28px rgba(33, 105, 58, 0.08); box-sizing: border-box; } /* ---------------------------------------------------------- 5. STEPPER ---------------------------------------------------------- */ .forgot-password-stepper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 1.1rem; } .forgot-password-stepper__step { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.55rem 0.4rem 0.5rem; border: 1.5px solid #dbe5dc; border-radius: 12px; background: #f8fbf8; color: #8a97a5; text-align: center; transition: border-color 0.2s, background 0.2s; } .forgot-password-stepper__step span { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #eaf2ec; color: #21693A; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; } .forgot-password-stepper__step strong { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .forgot-password-stepper__step.is-active { border-color: #21693A; background: #eef7f1; color: #163d22; } .forgot-password-stepper__step.is-active span { background: #21693A; color: #ffffff; } .forgot-password-stepper__step.is-active strong { color: #21693A; } .forgot-password-stepper__step.is-complete { border-color: #b5d4bc; background: #f4fbf5; color: #315e3c; } .forgot-password-stepper__step.is-complete span { background: #21693A; color: #ffffff; } /* ---------------------------------------------------------- 6. FORM & FIELDS ---------------------------------------------------------- */ .forgot-password-page .auth-form--forgot-stage { display: grid; gap: 0.85rem; } .forgot-password-page .field-group { display: grid; gap: 0.35rem; margin-bottom: 0; } .forgot-password-page .field-group span:not(.sr-only), .forgot-password-page .field-group label { font-size: 0.875rem; font-weight: 600; color: #1e2a37; } .forgot-password-page .field-group input[type="email"], .forgot-password-page .field-group input[type="text"], .forgot-password-page .field-group input[type="password"] { width: 100%; min-height: 44px; padding: 0.62rem 0.85rem; border: 1.5px solid #dce3ec; border-radius: 11px; background: #f9fbfd; font-size: 16px; color: #1e2a37; outline: none; box-sizing: border-box; -webkit-appearance: none; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .forgot-password-page .field-group input:focus { border-color: #21693A; background: #ffffff; box-shadow: 0 0 0 3px rgba(33, 105, 58, 0.14); } .forgot-password-page .field-group input::placeholder { color: #a0acbd; } /* Icon-input: wrapper is position:relative, icon is absolute inside */ .forgot-password-page .field-group--icon-input { position: relative; display: block; background: #f9fbfd; border: 1.5px solid #dce3ec; border-radius: 11px; min-height: 44px; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .forgot-password-page .field-group--icon-input:focus-within { border-color: #21693A; background: #ffffff; box-shadow: 0 0 0 3px rgba(33, 105, 58, 0.14); } .forgot-password-page .field-group--icon-input .field-group__icon { position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: #8a96a8; font-size: 1.1rem; pointer-events: none; transition: color 0.18s; z-index: 1; } .forgot-password-page .field-group--icon-input:focus-within .field-group__icon { color: #21693A; } .forgot-password-page .field-group--icon-input .field-group__icon ion-icon { width: 1.1rem; height: 1.1rem; display: block; } .forgot-password-page .field-group--icon-input input[type="email"] { display: block; width: 100%; min-height: 44px; padding: 0.62rem 0.85rem 0.62rem 2.9rem !important; /* add !important here */ border: none; border-radius: 11px; background: transparent; box-shadow: none; outline: none; font-size: 16px; color: #1e2a37; box-sizing: border-box; -webkit-appearance: none; } .forgot-password-page .field-group--icon-input input[type="email"]::placeholder { color: #a0acbd; } .forgot-password-page .field-group--icon-input:focus-within input[type="email"] { background: transparent; } /* OTP input */ .forgot-password-page input[name="code"] { text-align: center; font-size: 1.35rem !important; font-weight: 700; letter-spacing: 0.25em; min-height: 52px !important; } /* ---------------------------------------------------------- 7. STEP NOTE ---------------------------------------------------------- */ .forgot-password-step-note { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.6rem 0.75rem; border: 1px solid #e0ead2; border-radius: 10px; background: #f7fbf8; margin-bottom: 0; } .forgot-password-step-note p { margin: 0; font-size: 0.84rem; font-weight: 600; color: #4a5e6a; line-height: 1.35; min-width: 0; word-break: break-all; } .forgot-password-step-note__btn, .forgot-password-step-note a { flex-shrink: 0; font-size: 0.82rem; font-weight: 700; color: #21693A; background: none; border: none; cursor: pointer; padding: 0; text-decoration: none; white-space: nowrap; } .forgot-password-step-note__btn:hover, .forgot-password-step-note a:hover { text-decoration: underline; } /* ---------------------------------------------------------- 8. BUTTONS ---------------------------------------------------------- */ .forgot-password-page .auth-form__submit--forgot { width: 100%; min-height: 46px; border-radius: 12px; background: #21693A; border: 1px solid #21693A; color: #ffffff; font-size: 0.97rem; font-weight: 700; cursor: pointer; transition: background 0.18s, transform 0.12s; -webkit-appearance: none; letter-spacing: 0.01em; } .forgot-password-page .auth-form__submit--forgot:hover { background: #184f2b; border-color: #184f2b; } .forgot-password-page .auth-form__submit--forgot:active { transform: scale(0.985); } .forgot-password-page .auth-form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0; } .forgot-password-page .auth-form__actions .button { min-height: 44px; border-radius: 11px; font-size: 0.9rem; font-weight: 700; } .forgot-password-page .auth-form__actions .button--ghost { background: #ffffff; border: 1.5px solid #d0dbd2; color: #21693A; transition: background 0.15s, border-color 0.15s; } .forgot-password-page .auth-form__actions .button--ghost:hover { background: #f0f9f2; border-color: #21693A; } /* ---------------------------------------------------------- 9. RESEND TIMER ---------------------------------------------------------- */ .forgot-password-page .resend-timer { padding: 0.5rem 0.75rem; border-radius: 10px; background: #fff5f0; border: 1px solid #ffe0d0; text-align: center; animation: slideIn 0.3s ease; } .forgot-password-page .resend-timer p { margin: 0; font-size: 0.84rem; font-weight: 500; color: #d35f2b; } .forgot-password-page .resend-timer strong { font-weight: 700; color: #b84620; } /* ---------------------------------------------------------- 10. BACK LINK ---------------------------------------------------------- */ .forgot-password-page .auth-forgot__back-link { display: inline-flex; align-items: center; justify-content: center; width: 100%; gap: 0.25rem; margin-top: 0.85rem; color: #7b879b; font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: color 0.15s; } .forgot-password-page .auth-forgot__back-link:hover { color: #21693A; } .forgot-password-page .auth-forgot__back-link ion-icon { font-size: 0.9rem; margin-top: 1px; } /* ---------------------------------------------------------- 11. SHORT VIEWPORT ---------------------------------------------------------- */ @media (max-height: 700px) { .forgot-password-page .auth-layout { justify-content: flex-start; padding: 0.75rem 0 1rem; } .forgot-password-page .forgot-password-page__hero { margin-bottom: 0.55rem; } .forgot-password-page .auth-card__header--forgot h1 { font-size: 1.3rem; margin-bottom: 0.15rem; } .forgot-password-page .auth-card__header--forgot p { font-size: 0.82rem; } .forgot-password-page .auth-card--forgot { padding: 0.85rem 1rem 0.95rem; } .forgot-password-stepper { margin-bottom: 0.75rem; } .forgot-password-stepper__step { padding: 0.4rem 0.3rem 0.35rem; } .forgot-password-page .auth-form--forgot-stage { gap: 0.65rem; } .forgot-password-page .field-group input[type="email"], .forgot-password-page .field-group input[type="text"], .forgot-password-page .field-group input[type="password"] { min-height: 40px; padding: 0.5rem 0.85rem; } .forgot-password-page input[name="code"] { min-height: 44px !important; } .forgot-password-page .auth-form__submit--forgot { min-height: 42px; } .forgot-password-page .auth-form__actions .button { min-height: 40px; } .forgot-password-page .resend-timer { padding: 0.4rem 0.75rem; } .forgot-password-page .auth-forgot__back-link { margin-top: 0.55rem; } } /* ---------------------------------------------------------- 12. MOBILE ≤ 480px ---------------------------------------------------------- */ @media (max-width: 480px) { .forgot-password-page { min-height: 100vh; height: auto; overflow-x: hidden; overflow-y: auto; } .forgot-password-page .auth-layout { height: auto; min-height: calc(100vh - 76px); width: calc(100% - 1rem); padding: 1.25rem 0 1.5rem; justify-content: center; overflow: visible; } .forgot-password-page .auth-card--forgot { border-radius: 16px; padding: 1rem 1rem 1.1rem; } .forgot-password-page .auth-card__header--forgot h1 { font-size: 1.45rem; } .forgot-password-page .auth-card__header--forgot p { font-size: 0.86rem; } .forgot-password-stepper { gap: 0.4rem; margin-bottom: 1rem; } .forgot-password-stepper__step { padding: 0.5rem 0.3rem 0.45rem; border-radius: 10px; } .forgot-password-stepper__step span { width: 1.45rem; height: 1.45rem; font-size: 0.72rem; } .forgot-password-stepper__step strong { font-size: 0.6rem; letter-spacing: 0.04em; } .forgot-password-page input[name="code"] { font-size: 1.5rem !important; min-height: 54px !important; letter-spacing: 0.3em; } .forgot-password-page .auth-form__actions { grid-template-columns: 1fr; gap: 0.5rem; } .forgot-password-page .auth-form__actions .button { min-height: 46px; } } /* ---------------------------------------------------------- 13. VERY SMALL ≤ 360px ---------------------------------------------------------- */ @media (max-width: 360px) { .forgot-password-page .auth-card--forgot { padding: 0.9rem 0.85rem 1rem; } .forgot-password-page .auth-card__header--forgot h1 { font-size: 1.3rem; } } /* ---------------------------------------------------------- 14. SAFE AREA — notch / home indicator ---------------------------------------------------------- */ @supports (padding-bottom: env(safe-area-inset-bottom)) { .forgot-password-page .auth-layout { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } }