/* ─────────────────────────────────────────────  
   LOGIN PAGE STYLES  (DO NOT MODIFY)  
───────────────────────────────────────────────*/  
  
/* Main Container */  
.main {  
  min-height: 100vh;  
  max-height: 100vh;  
  height: 100vh;  
  display: flex;  
  position: relative;  
  overflow: hidden;  
  background: #FFFFFF;  
}  
  
/* Left Side - Form Container */  
.loginContainer {  
  position: relative;  
  width: 50%;  
  max-width: 775px;  
  height: 100vh;  
  padding: 0 3vw;  
  display: flex;  
  flex-direction: column;  
  justify-content: center;  
  align-items: center;  
  background: #FFFFFF;  
  overflow: hidden;  
}  
  
/* Logo Section - Fixed at Top */  
.logoWrapper {  
  position: absolute;  
  top: 20px;  
  left: 2vw;  
  z-index: 10;  
}  
  
.logoImg {  
  width: 140px !important;  
  height: auto !important;  
  max-height: 45px !important;  
  object-fit: contain;  
}  
  
/* Form Wrapper - Centered Content */  
.formWrapper {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start;  
  gap: 20px;  
  width: 100%;  
  max-width: 360px;  
  position: relative;  
  z-index: 5;  
}  
  
/* Card Header */  
.cardHeader {  
  display: flex;  
  flex-direction: column;  
  gap: 8px;  
  width: 100%;  
  margin-bottom: 8px;  
}  
  
.cardHeader h2 {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 600;  
  font-size: clamp(24px, 2vw, 30px);  
  line-height: 1.27;  
  color: #101828;  
  margin: 0;  
}  
  
.cardHeader p {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 400;  
  font-size: clamp(14px, 1vw, 16px);  
  line-height: 1.5;  
  color: #000000;  
  margin: 0;  
}  
  
/* Form Styles */  
.form {  
  display: flex;  
  flex-direction: column;  
  gap: 16px;  
  width: 100%;  
}  
  
.inputField {  
  display: flex;  
  flex-direction: column;  
  gap: 6px;  
  width: 100%;  
}  
  
.form label {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 500;  
  font-size: 14px;  
  line-height: 20px;  
  color: #344054;  
}  
  
.required {  
  color: #EF4444;  
  margin-left: 2px;  
}  
  
.input {  
  box-sizing: border-box;  
  width: 100%;  
  height: 44px;  
  background: #FFFFFF;  
  border: 1px solid #D0D5DD;  
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);  
  border-radius: 8px;  
  padding: 10px 14px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 400;  
  font-size: 16px;  
  line-height: 24px;  
  color: #101828;  
  transition: all 0.2s;  
}  
  
.input::placeholder {  
  color: #667085;  
}  
  
.input:focus {  
  border-color: #015EFF;  
  outline: none;  
  box-shadow: 0 0 0 3px rgba(1, 94, 255, 0.1);  
}  
  
/* Password Input Wrapper */  
.passwordWrapper {  
  position: relative;  
  display: flex;  
  align-items: center;  
}  
  
.passwordWrapper .input {  
  padding-right: 45px;  
}  
  
.togglePassword {  
  position: absolute;  
  right: 14px;  
  background: none;  
  border: none;  
  color: #98A2B3;  
  cursor: pointer;  
  padding: 0;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  transition: color 0.2s;  
}  
  
.togglePassword:hover {  
  color: #667085;  
}  
  
/* Form Options */  
.formOptions {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  width: 100%;  
  margin-top: -4px;  
}  
  
.checkboxLabel {  
  display: flex;  
  align-items: flex-start;  
  gap: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 500;  
  font-size: 14px;  
  line-height: 20px;  
  color: #344054;  
  cursor: pointer;  
}  
  
.checkbox {  
  width: 16px;  
  height: 16px;  
  background: #FFFFFF;  
  border: 1px solid #D0D5DD;  
  border-radius: 4px;  
  cursor: pointer;  
  margin-top: 2px;  
  accent-color: #015EFF;  
  flex-shrink: 0;  
}  
  
.forgotLink {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 600;  
  font-size: 14px;  
  line-height: 20px;  
  color: #015EFF;  
  text-decoration: none;  
  transition: color 0.2s;  
  white-space: nowrap;  
}  
  
.forgotLink:hover {  
  color: #0147CC;  
}  
  
/* Error Message */  
.errorMessage {  
  background: #FEE2E2;  
  border: 1px solid #FCA5A5;  
  color: #DC2626;  
  padding: 10px 14px;  
  border-radius: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-size: 14px;  
  font-weight: 500;  
}  
  
/* Sign In Button */  
.signInButton {  
  box-sizing: border-box;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 10px 18px;  
  width: 100%;  
  height: 44px;  
  background: #015EFF;  
  border: 1px solid #015EFF;  
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);  
  border-radius: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 600;  
  font-size: 16px;  
  line-height: 24px;  
  color: #FFFFFF;  
  cursor: pointer;  
  transition: all 0.2s;  
  margin-top: 4px;  
}  
  
.signInButton:hover:not(:disabled) {  
  background: #0147CC;  
  border-color: #0147CC;  
}  
  
.signInButton:disabled {  
  opacity: 0.6;  
  cursor: not-allowed;  
}  
  
/* Google Button */  
.googleButton {  
  box-sizing: border-box;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 10px 16px;  
  gap: 12px;  
  width: 100%;  
  height: 44px;  
  background: #FFFFFF;  
  border: 1px solid #D0D5DD;  
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);  
  border-radius: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 600;  
  font-size: 16px;  
  line-height: 24px;  
  color: #344054;  
  cursor: pointer;  
  transition: all 0.2s;  
}  
  
.googleButton:hover {  
  background: #F9FAFB;  
  border-color: #98A2B3;  
}  
  
/* Footer */  
.footer {  
  display: flex;  
  justify-content: center;  
  align-items: baseline;  
  gap: 4px;  
  width: 100%;  
  margin-top: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 400;  
  font-size: 14px;  
  line-height: 20px;  
  color: #475467;  
}  
  
.link {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 600;  
  font-size: 14px;  
  line-height: 20px;  
  color: #015EFF;  
  text-decoration: none;  
  transition: color 0.2s;  
}  
  
.link:hover {  
  color: #0147CC;  
}  
  
/* Decorative Background - Bottom Left with Image */  
.decorativeBg {  
  position: absolute;  
  bottom: 0;  
  left: 0;  
  width: 400px;  
  height: 50vh;  
  pointer-events: none;  
  z-index: 1;  
}  
  
/* Right Side - Illustration Container */  
.illustrationContainer {  
  flex: 1;  
  position: relative;  
  background: #FFFFFF;  
  overflow: hidden;  
  height: 100vh;  
  padding: 0;  
  margin: 0;  
}  
  
/* Illustration Image */  
.illustration {  
  object-fit: cover;  
  object-position: center;  
  width: 100% !important;  
  height: 100% !important;  
  position: relative !important;  
  display: block;  
}  
  
/* ── LOGIN Responsive ── */  
@media (max-width: 1440px) {  
  .formWrapper {  
    gap: 18px;  
  }  
  .decorativeBg {  
    width: 350px;  
    height: 45vh;  
  }  
}  
  
@media (max-width: 1024px) {  
  .loginContainer {  
    width: 55%;  
    padding: 0 2.5vw;  
  }  
  .formWrapper {  
    gap: 16px;  
  }  
  .decorativeBg {  
    width: 300px;  
    height: 40vh;  
  }  
  .logoImg {  
    width: 120px !important;  
  }  
  .logoWrapper {  
    top: 30px;  
    left: 2.5vw;  
  }  
}  
  
@media (max-width: 768px) {  
  .main {  
    flex-direction: column;  
    max-height: none;  
    height: auto;  
    min-height: 100vh;  
  }  
  .loginContainer {  
    width: 100%;  
    max-width: 100%;  
    height: auto;  
    min-height: 100vh;  
    padding: 24px;  
    justify-content: flex-start;  
  }  
  .logoWrapper {  
    position: relative;  
    top: 0;  
    left: 0;  
    margin-bottom: 60px;  
  }  
  .formWrapper {  
    margin-top: 0;  
  }  
  .illustrationContainer {  
    display: none;  
  }  
  .cardHeader h2 {  
    font-size: 24px;  
    line-height: 32px;  
  }  
  .decorativeBg {  
    width: 280px;  
    height: 350px;  
  }  
}  
  
@media (max-width: 480px) {  
  .loginContainer {  
    padding: 20px;  
  }  
  .formOptions {  
    flex-direction: column;  
    align-items: flex-start;  
    gap: 12px;  
  }  
  .input {  
    font-size: 16px;  
  }  
  .decorativeBg {  
    width: 220px;  
    height: 300px;  
  }  
}  
  
@media (min-width: 1920px) {  
  .decorativeBg {  
    width: 450px;  
    height: 55vh;  
  }  
}  
  
/* Prevent body scroll */  
body {  
  overflow: hidden;  
}  
  
html {  
  overflow: hidden;  
}  
  
  
/* =====================================================  
   FORGOT PASSWORD PAGE STYLES  
   All classes prefixed with "fp" — login styles above  
   are completely untouched  
====================================================== */  
  
/* ── Page Layout ── */  
.fpMain {  
  min-height: 100vh;  
  height: 100vh;  
  max-height: 100vh;  
  display: flex;  
  flex-direction: row;  
  overflow: hidden;  
  background: #ffffff;  
  position: relative;  
}  
  
/* ── Left Panel ── */  
.fpLeftPanel {  
  position: relative;  
  width: 50%;  
  max-width: 775px;  
  height: 100vh;  
  padding: 0 3vw;  
  display: flex;  
  flex-direction: column;  
  justify-content: center;  
  align-items: center;  
  background: #ffffff;  
  overflow: hidden;  
  z-index: 1;  
}  
  
/* ── Right Panel ── */  
.fpRightPanel {  
  flex: 1;  
  position: relative;  
  background: #ffffff;  
  overflow: hidden;  
  height: 100vh;  
  padding: 0;  
  margin: 0;  
}  
  
/* ── Logo ── */  
.fpLogoWrapper {  
  position: absolute;  
  top: 20px;  
  left: 2vw;  
  z-index: 10;  
}  
  
.fpLogoImg {  
  width: 140px !important;  
  height: auto !important;  
  max-height: 45px !important;  
  object-fit: contain;  
}  
  
/* ── Card ── */  
.fpCard {  
  position: relative;  
  z-index: 5;  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start;  
  gap: 20px;  
  width: 100%;  
  max-width: 360px;  
}  
  
/* ── Card Header ── */  
.fpCardHeader {  
  display: flex;  
  flex-direction: column;  
  gap: 8px;  
  width: 100%;  
  margin-bottom: 8px;  
}  
  
.fpCardHeader h2 {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 600;  
  font-size: clamp(24px, 2vw, 30px);  
  line-height: 1.27;  
  color: #101828;  
  margin: 0;  
}  
  
/* ── Verification Title — Blue ── */  
.fpVerificationTitle {  
  color: #015EFF !important;  
}  
  
.fpCardHeader p {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 400;  
  font-size: clamp(14px, 1vw, 16px);  
  line-height: 1.5;  
  color: #475467;  
  margin: 0;  
}  
  
/* ── Highlight span ── */  
.fpHighlight {  
  font-weight: 600;  
  color: #015EFF;  
}  
  
/* ── Form ── */  
.fpForm {  
  display: flex;  
  flex-direction: column;  
  gap: 16px;  
  width: 100%;  
}  
  
/* ── Input Field wrapper ── */  
.fpInputField {  
  display: flex;  
  flex-direction: column;  
  gap: 6px;  
  width: 100%;  
}  
  
/* ── Label ── */  
.fpInputField label {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 500;  
  font-size: 14px;  
  line-height: 20px;  
  color: #344054;  
}  
  
/* ── Required asterisk ── */  
.fpRequired {  
  color: #EF4444;  
  margin-left: 2px;  
}  
  
/* ── Email Input ── */  
.fpInput {  
  box-sizing: border-box;  
  width: 100%;  
  height: 44px;  
  background: #FFFFFF;  
  border: 1px solid #D0D5DD;  
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);  
  border-radius: 8px;  
  padding: 10px 14px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 400;  
  font-size: 16px;  
  line-height: 24px;  
  color: #101828;  
  transition: all 0.2s;  
}  
  
.fpInput::placeholder {  
  color: #667085;  
}  
  
.fpInput:focus {  
  border-color: #015EFF;  
  outline: none;  
  box-shadow: 0 0 0 3px rgba(1, 94, 255, 0.1);  
}  
  
/* ── Input Error State ── */  
.fpInputError {  
  border-color: #FDA29B !important;  
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1) !important;  
}  
  
/* ── Error Message ── */  
.fpErrorMessage {  
  display: flex;  
  align-items: center;  
  background: #FEE2E2;  
  border: 1px solid #FCA5A5;  
  color: #DC2626;  
  padding: 10px 14px;  
  border-radius: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-size: 14px;  
  font-weight: 500;  
  width: 100%;  
  box-sizing: border-box;  
}  
  
/* ── Send Reset Link Button ── */  
.fpSignInButton {  
  box-sizing: border-box;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 10px 18px;  
  width: 100%;  
  height: 44px;  
  background: #015EFF;  
  border: 1px solid #015EFF;  
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);  
  border-radius: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 600;  
  font-size: 16px;  
  line-height: 24px;  
  color: #FFFFFF;  
  cursor: pointer;  
  transition: all 0.2s;  
  margin-top: 4px;  
  text-decoration: none;  
}  
  
.fpSignInButton:hover:not(:disabled) {  
  background: #0147CC;  
  border-color: #0147CC;  
  color: #FFFFFF;  
}  
  
.fpSignInButton:disabled {  
  opacity: 0.6;  
  cursor: not-allowed;  
}  
  
/* ── OTP Section Wrapper ── */  
.fpOtpWrapper {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start;  
  gap: 14px;  
  width: 100%;  
}  
  
/* ── OTP Inputs Row ── */  
.fpOtpInputs {  
  display: flex;  
  flex-direction: row;  
  gap: 12px;  
  align-items: center;  
}  
  
/* ── Single OTP Box ── */  
.fpOtpInput {  
  box-sizing: border-box;  
  width: 64px;  
  height: 64px;  
  background: #FFFFFF;  
  border: 1.5px solid #D0D5DD;  
  border-radius: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-size: 24px;  
  font-weight: 600;  
  color: #101828;  
  text-align: center;  
  caret-color: #015EFF;  
  transition: all 0.2s;  
  outline: none;  
  -moz-appearance: textfield;  
}  
  
.fpOtpInput::-webkit-outer-spin-button,  
.fpOtpInput::-webkit-inner-spin-button {  
  -webkit-appearance: none;  
  margin: 0;  
}  
  
.fpOtpInput:focus {  
  border-color: #015EFF;  
  box-shadow: 0 0 0 3px rgba(1, 94, 255, 0.12);  
}  
  
/* Filled digit box */  
.fpOtpInputFilled {  
  border-color: #015EFF;  
  background: #F5F8FF;  
}  
  
/* Error state on boxes */  
.fpOtpInputError {  
  border-color: #FDA29B !important;  
  box-shadow: 0 0 0 3px rgba(240, 68, 56, 0.1) !important;  
}  
  
/* ── Countdown Timer ── */  
.fpOtpTimer {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-size: 16px;  
  font-weight: 600;  
  color: #DC2626;  
  letter-spacing: 0.5px;  
  min-width: 48px;  
  text-align: left;  
  user-select: none;  
}  
  
/* Timer expired — goes grey */  
.fpOtpTimerExpired {  
  color: #98A2B3;  
}  
  
/* ── Continue Button ── */  
.fpContinueButton {  
  box-sizing: border-box;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 10px 18px;  
  width: 100%;  
  height: 50px;  
  background: #015EFF;  
  border: 1px solid #015EFF;  
  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);  
  border-radius: 8px;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 700;  
  font-size: 15px;  
  letter-spacing: 1.5px;  
  line-height: 24px;  
  color: #FFFFFF;  
  cursor: pointer;  
  transition: all 0.2s;  
  text-transform: uppercase;  
  text-decoration: none;  
}  
  
.fpContinueButton:hover:not(:disabled) {  
  background: #0147CC;  
  border-color: #0147CC;  
  color: #FFFFFF;  
}  
  
.fpContinueButton:disabled {  
  opacity: 0.6;  
  cursor: not-allowed;  
}  
  
/* ── Resend Row ── */  
.fpResendRow {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  gap: 4px;  
  width: 100%;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-size: 14px;  
  font-weight: 400;  
  color: #475467;  
  flex-wrap: wrap;  
}  
  
/* ── Resend Button ── */  
.fpResendBtn {  
  background: none;  
  border: none;  
  padding: 0;  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-size: 14px;  
  font-weight: 600;  
  color: #015EFF;  
  cursor: pointer;  
  text-decoration: none;  
  transition: color 0.2s;  
  line-height: 1.5;  
}  
  
.fpResendBtn:hover:not(:disabled) {  
  color: #0147CC;  
  text-decoration: underline;  
}  
  
/* Disabled resend — timer still running */  
.fpResendBtnDisabled {  
  color: #98A2B3 !important;  
  cursor: not-allowed !important;  
  text-decoration: none !important;  
}  
  
/* ── Footer row ── */  
.fpFooter {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  width: 100%;  
  margin-top: 4px;  
}  
  
/* ── Back to Login link ── */  
.fpBackLink {  
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;  
  font-style: normal;  
  font-weight: 600;  
  font-size: 14px;  
  line-height: 20px;  
  color: #015EFF;  
  text-decoration: none;  
  transition: color 0.2s;  
  display: flex;  
  align-items: center;  
  gap: 4px;  
}  
  
.fpBackLink:hover {  
  color: #0147CC;  
}  
  
/* ── Copyright ── */  
.fpCopyright {  
  position: absolute;  
  bottom: 20px;  
  left: 50%;  
  transform: translateX(-50%);  
  font-family: 'Inter', sans-serif;  
  font-size: 12px;  
  color: #98A2B3;  
  text-align: center;  
  white-space: nowrap;  
  z-index: 5;  
}  
  
/* ════════════════════════════════════════  
   FORGOT PASSWORD — RESPONSIVE  
════════════════════════════════════════ */  
  
@media (max-width: 1024px) {  
  .fpLeftPanel {  
    width: 55%;  
    padding: 0 2.5vw;  
  }  
  .fpLogoImg {  
    width: 120px !important;  
  }  
  .fpLogoWrapper {  
    top: 30px;  
    left: 2.5vw;  
  }  
  .fpOtpInput {  
    width: 56px;  
    height: 56px;  
    font-size: 20px;  
  }  
}  
  
@media (max-width: 768px) {  
  .fpMain {  
    flex-direction: column;  
    height: auto;  
    min-height: 100vh;  
    max-height: none;  
  }  
  .fpLeftPanel {  
    width: 100%;  
    max-width: 100%;  
    height: auto;  
    min-height: 100vh;  
    padding: 24px;  
    justify-content: flex-start;  
  }  
  .fpLogoWrapper {  
    position: relative;  
    top: 0;  
    left: 0;  
    margin-bottom: 60px;  
  }  
  /* ── Hide right illustration on mobile ── */  
  .fpRightPanel {  
    display: none;  
  }  
  .fpCardHeader h2 {  
    font-size: 24px;  
    line-height: 32px;  
  }  
  .fpOtpInput {  
    width: 52px;  
    height: 52px;  
    font-size: 20px;  
  }  
}  
  
@media (max-width: 480px) {  
  .fpLeftPanel {  
    padding: 20px;  
  }  
  .fpInput {  
    font-size: 16px;  
  }  
  .fpOtpInputs {  
    gap: 8px;  
  }  
  .fpOtpInput {  
    width: 56px;  
    height: 56px;  
    font-size: 20px;  
  }  
}