/* ============================================================
   PARIBOOK247 - LOGIN / 2FA PAGE STYLESHEET
   Direct CSS conversion of LoginPage.scss + LoginForm.scss
   Target: 375 x 667 viewport (iPhone SE)
   ============================================================ */

/* ---- Reset / Base ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* OUTER page background matches original (~#4B3542 brownish-purple) */
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: #4B3542 !important;
  font-family: 'Lato', sans-serif;
}

/* ---- Login container (LoginPage.scss .login-ctn) ---------- */
/* position: fixed, centered column, dark purple background    */
.login-ctn {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 451px;
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #26133f;                    /* --ion-background-color fallback */
  background-image: url('../assets/images/common/loginMobBG.webp');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Title row / Logo (LoginPage.scss .title-row mobile) -- */
.title-row {
  position: relative;
  top: auto; left: auto; transform: none;
  z-index: 2;
  flex-shrink: 0;
  padding-top: 24px;
  padding-bottom: 16px;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

/* Logo: 180px wide matching original screenshot proportions   */
/* LoginForm.scss: .title-row .logo { width: 130px }           */
/* LoginPage.scss mobile: max-width: 160px / min-width: 160px  */
/* Original screenshot shows ~180px width                      */
.title-row .logo, .logo {
  display: block;
  margin: 0 auto 10px auto;
  width: 180px;
  max-width: 180px;
  min-width: 120px;
  height: auto;
  min-height: unset !important;
}

/* ---- Login card (LoginPage.scss .login-card mobile) ------- */
.login-card {
  position: relative;
  top: auto; left: auto; transform: none;
  width: 100%;
  flex: 0 0 auto;
  margin-top: 8px;       /* LoginPage.scss: margin-top: 8px   */
  padding-bottom: 24px;  /* LoginPage.scss: padding-bottom: 24px */
}

/* ---- Login form page (LoginForm.scss @max-width:768px) ---- */
/* padding: 0px 20px gives ~335px content at 375px viewport   */
.login-form-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 20px; /* LoginForm.scss @media max-width:768px */
}

/* ---- Form card (LoginForm.scss .login-form-ctn) ----------- */
/* width: 100% inside padded login-form-page = ~335px mobile   */
/* border-radius: 16px 16px 0 0 (NO bottom border/radius)      */
.login-form-ctn {
  width: 100% !important;
  max-height: unset !important;
  display: flex;
  padding: 20px 20px 5px 20px !important; /* from SCSS */
  flex-direction: column;
  background: linear-gradient(#852157, #350165) !important; /* --ion-background-color */
  border-radius: 16px 16px 0 0 !important;
  border: 2px solid #04a0e2 !important; /* --form-ctn-border */
  border-bottom: none !important;
  margin: 0;
}

/* ---- Account SignUp (bottom card section) ----------------- */
/* LoginForm.scss .account-SignUp:                             */
/*   border-radius: 0 0 16px 16px                             */
/*   border: 2px solid #04a0e2; border-top-width: 1px         */
/*   margin-top: -2px; padding: 10px 0                        */
/* This provides the BOTTOM cyan border + bottom gradient      */
.account-SignUp {
  display: block !important; /* ALWAYS visible for visual bottom border */
  width: 100% !important;
  background: linear-gradient(#852157, #350165);
  padding: 15px 0;      /* intentionally slightly taller for spacing */
  border: 2px solid #04a0e2;
  border-top-width: 1px;
  margin-top: -2px;
  border-radius: 0 0 16px 16px;
  box-sizing: border-box;
}

/* ---- Back button (LoginForm.scss .back-icon) -------------- */
.back-icon {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: #fff;
}

.back {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  color: #fff !important;
  text-decoration: none;
}

.back a { color: #fff !important; text-decoration: none; }

/* FORCE WHITE ARROW - overrides .MuiSvgIcon-root fill:#666 */
svg.arrow-clr,
.arrow-clr,
.back .arrow-clr {
  fill: #fff !important;
  color: #fff !important;
  width: 0.7em !important; /* LoginForm.scss: width: 0.7em */
  flex-shrink: 0;
}

.back-text {
  margin-left: 3px;
  font-family: 'Lato', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 18.9px;
  color: #fff !important; /* LoginPage.scss: color: #fff !important */
  display: flex;
  align-items: center;
}

/* ---- Card title (LoginForm.scss .card-title) -------------- */
.card-title {
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 43.2px;
  text-align: center;
  margin: 0;
}

/* ---- Subtitle (LoginForm.scss .card-login-here @mobile) --- */
.card-login-here {
  font-size: 12px; /* @media max-width:720px: 12px */
  font-weight: 600;
  line-height: 21.6px;
  text-align: center;
  font-family: 'Lato', sans-serif;
  color: #e0e0e0;
  display: block;
  margin-bottom: 4px;
}

/* ---- Input wrappers --------------------------------------- */
/* LoginForm.scss: display: inline-grid */
.usr-input, .code-input, .pwd-input {
  display: inline-grid;
  margin-top: 5px;
  width: 100%;
}

.pwd-input { margin-top: 10px; }

/* ---- Input labels (LoginForm.scss .input-labell) ---------- */
ion-label.input-labell, label.input-labell, .input-labell {
  font-weight: 600 !important;
  font-size: 14px !important; /* @media max-width:768px: 14px */
  line-height: 150% !important;
  margin-bottom: 7px !important; /* SCSS: margin-bottom: 7px */
  color: #e0e0e0 !important;
  font-family: 'Lato', sans-serif !important;
  display: block !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: none !important;
  visibility: visible !important;
}

.red-text { color: red; }

/* ---- Input field wrappers (LoginForm.scss @max-width:768px) */
/* height: 40px at mobile */
.login-form-ctn .user-name,
.login-form-ctn .pwd-field,
.user-name, .pwd-field {
  height: 40px !important;  /* @media max-width:768px */
  width: 100% !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: hidden;
  display: flex !important;
  align-items: stretch;
  border: 1px solid #04a0e2 !important; /* var(--border-color) */
}

/* ---- MUI Input Base (LoginForm.scss) ---------------------- */
.MuiInputBase-root, .MuiOutlinedInput-root {
  border-radius: 8px !important;
  background-color: #ffffff !important;
  border: 0 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
}

/* LoginForm.scss: padding: 10px 7px; border-radius: 10px */
.MuiInputBase-input, .MuiOutlinedInput-input {
  font-size: 16px !important;
  font-family: 'Lato', sans-serif !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-radius: 10px !important;
  border: 0 !important;
  outline: none !important;
  padding: 10px 7px !important;
  height: 100% !important;
  width: 100% !important;
  color: #333 !important;
  flex: 1 1 auto !important;
}

.MuiOutlinedInput-notchedOutline, .jss28 {
  border: 0 !important;
  display: none !important;
}

/* ---- Password eye icon ------------------------------------ */
.MuiInputBase-adornedEnd { padding-right: 4px !important; }

.MuiInputAdornment-root, .MuiInputAdornment-positionEnd {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0;
  height: 100%;
}

/* LoginForm.scss: padding: 0; opacity: 0.4 */
.login-form-ctn .MuiIconButton-root {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer;
  opacity: 0.4;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50%;
}

.MuiIconButton-root:hover { opacity: 0.8; }
.MuiIconButton-label { display: flex; align-items: center; }
.MuiSvgIcon-root { width: 20px; height: 20px; fill: #666; }
.MuiTouchRipple-root { display: none !important; }

/* ---- Login/Submit button ---------------------------------- */
/* LoginForm.scss: margin-bottom: 20px; height: 44px */
.login-demologin-btns {
  display: flex;
  justify-content: space-around;
}

.login-form-btn-without-demologin {
  margin-bottom: 20px !important; /* SCSS: margin-bottom: 20px */
  margin-top: 15px !important;    /* SCSS: margin-top: 15px */
  width: 100% !important;
  height: 44px;
  font-size: 13px;
  border-radius: 100px !important;
  background: linear-gradient(to right, #F19100, #FFC928, #F7CD37, #F19100) !important;
  color: #1e1e1e !important;
  font-weight: 700;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
  cursor: pointer;
  font-family: 'Lato', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form-btn-without-demologin .MuiButton-label,
.login-form-btn-without-demologin > span {
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 150% !important;
  font-family: 'Lato', sans-serif !important;
  color: #1e1e1e !important;
}

/* ---- Disclaimer (LoginForm.scss .disclaimer-ctn-text) ----- */
.disclaimer-ctn-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* LoginForm.scss @mobile: font-size:10px; margin-bottom:15px; width:80% */
.disclaimer-width {
  color: #ece7f1;
  width: 80%;
  font-family: 'Lato', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 14.63px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

/* ---- Hide unused desktop-only elements -------------------- */
.socialmedia-parent, .disclaimer-content, .socialMedia-login, .demo {
  display: none !important;
}

/* ---- Desktop override (>= 601px) -------------------------- */
/* At desktop the original uses absolute positioning for .login-card */
/* We replicate with flex centering in the fixed 451px container    */
@media screen and (min-width: 601px) {
  .login-ctn {
    background: #26133f;
    justify-content: center; /* vertically center on desktop */
  }

  .login-card {
    margin-top: 0;
    padding-bottom: 0;
  }

  .title-row {
    padding-top: 0;
    padding-bottom: 12px;
  }

  .logo {
    width: 130px;   /* LoginForm.scss: .title-row .logo { width: 130px } */
    max-width: 130px;
  }

  .login-form-page {
    padding: 0;     /* no side padding on desktop */
    width: 400px;   /* LoginForm.scss: .login-form-ctn { width: 400px } */
  }

  .login-form-ctn {
    width: 400px !important;
    max-width: 400px !important;
  }

  .account-SignUp {
    width: 400px !important;
  }
}