/* ============================================================================
   ListingMine — the three authentication screens.

   Login, Sign Up and Forgot Password, to the owner's design: a white card on
   black, ListingMine blue, pill buttons, icon-led labels.

   WHY ONE FILE. These pages were three different layouts with three different
   sets of inline styles. One stylesheet means a colour or a spacing changes in
   one place and all three follow — and, because it lives on the server rather
   than inside the phone app, changing it needs no app release.

   Icons use Font Awesome 4.7, which the site already loads on every page. The
   supplied mock-ups linked Font Awesome 6 from a CDN; that would be an extra
   network round-trip on every login and would not load at all offline.

   ⛔ The two page structures differ and BOTH are styled here:
      login   .loginScreen > .container > .topLoginInfo + form.loginBottomPart
      others  .mainFormLR  > .container > .loginSignUpForm > h2 + form.form
   ========================================================================= */

:root {
  --lm-blue: #203D74;
  --lm-blue-dark: #16294F;
  --lm-ink: #000;
  --lm-field: #f5f8ff;
  --lm-line: #dce5f5;
  --lm-placeholder: #a0b3d9;
  --lm-hint: #888ea8;
}

/* ---- the page: a card centred on black ---------------------------------- */
/* the site's header has no place here: the design is a card on black, and the
   back arrow it carries is replaced by the links inside each card */
body.lm-auth .topHeader,
body.lm-auth .se-pre-con {
  display: none !important;
}
body.lm-auth,
body.lm-auth .contentDiv {
  background: #000;
}
body.lm-auth .loginScreen,
body.lm-auth .mainFormLR {
  float: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  background: #000;
  padding: 22px 18px;
}
body.lm-auth .loginScreen > .container,
body.lm-auth .mainFormLR .loginSignUpForm {
  width: 100%;
  max-width: 420px;
  /* ⛔ margin:auto, NOT overflow-y:auto on the parent. A scroll container inside
     a web view swallows the FIRST touch, so the first tap on a field did nothing
     and only the second opened the keyboard. margin:auto also centres a card
     that is taller than the screen without clipping its top, which
     align-items:center on its own does not. */
  margin: auto;
  background: #fff;
  border-radius: 26px;
  padding: 32px 24px 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05);
}
body.lm-auth .mainFormLR .container {
  padding: 0;
  max-width: 420px;
}

/* ---- brand block --------------------------------------------------------- */
body.lm-auth .topLoginInfo,
body.lm-auth .lm-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  margin: 0 0 24px;
  padding: 0 0 18px;
  border-bottom: 2px solid var(--lm-blue);
  text-align: center;
}
body.lm-auth .logoLogin img,
body.lm-auth .lm-brand img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(26, 106, 255, .25);
}
body.lm-auth .logoLogin span,
body.lm-auth .lm-brand .lm-name {
  display: block;
  margin: 12px 0 2px;
  font-size: 20.8px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--lm-ink);
}
body.lm-auth .logoLogin span .lm-accent,
body.lm-auth .lm-brand .lm-accent {
  display: inline;
  color: var(--lm-blue);
}
body.lm-auth .topLoginInfo p,
body.lm-auth .lm-brand .lm-sub {
  margin: 0;
  font-size: 12.8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  /* letter-spacing adds a trailing gap, which shifts centred text left */
  text-indent: 2px;
  color: var(--lm-blue);
}

/* ---- page heading -------------------------------------------------------- */
body.lm-auth .lm-head {
  margin: 0 0 24px;
}
body.lm-auth .lm-head h1,
body.lm-auth .loginSignUpForm > h2 {
  margin: 0 0 4px;
  font-size: 25.6px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--lm-ink);
}
body.lm-auth .lm-head p {
  margin: 0;
  font-size: 14.4px;
  font-weight: 500;
  color: var(--lm-blue);
}
/* Sign Up and Forgot Password centre their heading; login is left aligned */
body.lm-auth .mainFormLR .lm-head {
  text-align: center;
}
/* the old lock-in-a-circle above the sign-up form has no place in this design */
body.lm-auth .loginIconLR {
  display: none;
}

/* ---- fields -------------------------------------------------------------- */
body.lm-auth .form-group {
  position: relative;
  margin-bottom: 18px;
}
/* the markup pins several groups to a fixed pixel height inline, which the new
   spacing must be allowed to override */
body.lm-auth .form-group[style] {
  height: auto !important;
  margin-top: 0 !important;
}
body.lm-auth .form-group > label {
  display: block;
  line-height: 13px;
  margin-bottom: 8px;
  font-size: 11.2px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--lm-ink);
}
body.lm-auth .form-group > label i {
  margin-right: 6px;
  color: var(--lm-blue);
}
body.lm-auth .form-control {
  width: 100%;
  height: 54px;
  /* !important because the page's own form styling is more specific in places,
     and the left padding is what keeps text clear of the icon inside the field */
  padding: 0 16px 0 46px !important;
  background: var(--lm-field) !important;
  border: 2px solid var(--lm-line) !important;
  border-radius: 20px !important;
  box-shadow: none;
  /* 16px keeps the browser from zooming the page when a field is focused */
  font-size: 16px;
  font-weight: 500;
  color: var(--lm-ink);
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
body.lm-auth .form-control::placeholder {
  color: var(--lm-placeholder);
  font-weight: 400;
}
body.lm-auth .form-control:focus {
  outline: none;
  background: #fff !important;
  border-color: var(--lm-blue) !important;
  box-shadow: 0 0 0 4px rgba(26, 106, 255, .12);
}
/* the icon that sits inside a field */
body.lm-auth .lm-ico {
  position: absolute;
  left: 17px;
  top: 39px;
  font-size: 17px;
  color: var(--lm-blue);
  pointer-events: none;
  z-index: 2;
}
body.lm-auth .form-group.lm-nolabel .lm-ico {
  bottom: 18px;
}

/* ---- the phone field ------------------------------------------------------
   The page renders a select2 country picker AND a separate number input, and
   the picker is absolutely positioned at width:100% — so it covered the input
   completely and there was nowhere to type a number at all. It becomes a prefix
   inside the field instead.                                                  */
body.lm-auth .form-group.phoneNumber > input[name="phone"] {
  /* !important because .form-control above sets the padding SHORTHAND with
     !important, which would otherwise win over this longhand and let the number
     start underneath the country prefix */
  padding-left: 134px !important;
}
body.lm-auth .form-group.phoneNumber > .select2-container {
  position: absolute !important;
  left: 36px !important;
  top: 23px !important;
  bottom: auto !important;
  width: 80px !important;
  height: 50px !important;
}
body.lm-auth .form-group.phoneNumber .select2-selection--single {
  height: 50px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}
/* the page renders the dialling code reversed, as "60+", so its own text is
   hidden and lm-auth.js draws a clean one. The box stays tappable. */
body.lm-auth .form-group.phoneNumber .select2-selection__rendered {
  font-size: 0 !important;
  color: transparent !important;
  padding: 0 !important;
}
body.lm-auth .form-group.phoneNumber .select2-selection__arrow {
  display: none !important;
}
body.lm-auth .lm-code {
  position: absolute;
  left: 44px;
  top: 40px;
  line-height: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--lm-ink);
  white-space: nowrap;
  pointer-events: none;
  z-index: 2;
}
body.lm-auth .lm-code b {
  margin-right: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #64748b;
}
body.lm-auth .form-group.phoneNumber::before {
  content: "";
  position: absolute;
  left: 118px;
  top: 37px;
  width: 2px;
  height: 22px;
  background: var(--lm-line);
  pointer-events: none;
}

/* ---- show / hide password ------------------------------------------------ */
body.lm-auth .lm-eye {
  position: absolute;
  right: 8px;
  top: 30px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lm-blue);
  font-size: 17px;
  cursor: pointer;
  z-index: 3;
}

/* jQuery-validate's message. Without this it inherits the label styling above
   and appears as bold black uppercase, reading as a second field label. */
body.lm-auth .form-group label.error,
body.lm-auth label.error {
  display: block;
  margin: 7px 0 0;
  padding: 0;
  background: none;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  color: #d64545;
}

/* ---- keep me signed in --------------------------------------------------- */
body.lm-auth .rememberMeRow {
  margin: 18px 0 22px;
}
body.lm-auth .rememberMeRow label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--lm-ink);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
body.lm-auth .rememberMeRow input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
  background: #fff;
  border: 2px solid var(--lm-blue);
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
body.lm-auth .rememberMeRow input[type="checkbox"]:checked {
  background: var(--lm-blue);
}
body.lm-auth .rememberMeRow input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---- buttons ------------------------------------------------------------- */
body.lm-auth .loginButton,
body.lm-auth .customButton.fullWidthBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  margin: 0;
  border: 2px solid var(--lm-blue);
  border-radius: 60px;
  background: var(--lm-blue);
  color: #fff;
  font-family: inherit;
  font-size: 17.6px;
  font-weight: 700;
  letter-spacing: .5px;
  box-shadow: 0 8px 18px rgba(26, 106, 255, .26);
  transition: transform .15s, box-shadow .15s, background .15s;
}
body.lm-auth .loginButton:active,
body.lm-auth .customButton.fullWidthBtn:active {
  transform: scale(.97);
  background: var(--lm-blue-dark);
  border-color: var(--lm-blue-dark);
}
/* "Get Verification Code" is the secondary action of the two on the page */
body.lm-auth #getcode {
  background: transparent !important;
  color: var(--lm-blue) !important;
  font-size: 15.2px;
  height: 52px;
  box-shadow: none;
}
body.lm-auth #getcode:active {
  background: var(--lm-blue);
  color: #fff;
}

/* ---- verification block -------------------------------------------------- */
body.lm-auth .lm-verify {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 2px solid #f0f4ff;
}
/* "(Please check your SMS)" — a hint, not a link to press */
body.lm-auth .form-group.text-center {
  margin: 10px 0 0;
}
body.lm-auth .form-group.text-center a {
  font-size: 12.8px;
  font-weight: 500;
  color: var(--lm-hint);
  text-decoration: none;
  pointer-events: none;
}
body.lm-auth .form-group.text-center a i {
  margin-right: 5px;
  color: var(--lm-blue);
}
body.lm-auth .codeInput {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 18px 0 26px;
}
body.lm-auth .codeInput input {
  width: 48px !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  font-size: 20.8px;
  font-weight: 700;
  background: var(--lm-field) !important;
  border: 2px solid var(--lm-line) !important;
  border-radius: 16px !important;
  color: var(--lm-ink);
  font-family: inherit;
}
body.lm-auth .codeInput input:focus {
  outline: none;
  background: #fff;
  border-color: var(--lm-blue);
  box-shadow: 0 0 0 4px rgba(26, 106, 255, .12);
}
body.lm-auth .codeInput input::placeholder {
  color: #c5cee5;
  font-weight: 400;
}

/* ---- footer links -------------------------------------------------------- */
body.lm-auth .signUpForgetPass {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 22px 0 0;
}
body.lm-auth .signUpForgetPass a,
body.lm-auth .bottomText a,
body.lm-auth .lm-back a {
  font-size: 14.4px !important;
  font-weight: 600;
  color: var(--lm-blue) !important;
  text-decoration: none !important;
}
body.lm-auth .signUpForgetPass a i,
body.lm-auth .bottomText a i,
body.lm-auth .lm-back a i {
  margin-right: 6px;
}
body.lm-auth .bottomText,
body.lm-auth .lm-back {
  margin: 20px 0 0 !important;
  text-align: center;
  font-size: 14.4px;
  font-weight: 500;
  color: var(--lm-ink);
}

/* ---- short screens ------------------------------------------------------- */
@media (max-height: 730px) {
  body.lm-auth .loginScreen,
  body.lm-auth .mainFormLR {
    align-items: flex-start;
    padding: 14px;
  }
  body.lm-auth .loginScreen > .container,
  body.lm-auth .mainFormLR .loginSignUpForm {
    padding: 24px 20px 22px;
    border-radius: 22px;
  }
  body.lm-auth .logoLogin img,
  body.lm-auth .lm-brand img { width: 52px; height: 52px; }
  body.lm-auth .logoLogin span,
  body.lm-auth .lm-brand .lm-name { font-size: 19px; margin-top: 10px; }
  body.lm-auth .topLoginInfo,
  body.lm-auth .lm-brand { margin-bottom: 18px; padding-bottom: 14px; }
  body.lm-auth .lm-head { margin-bottom: 18px; }
  body.lm-auth .lm-head h1,
  body.lm-auth .loginSignUpForm > h2 { font-size: 21px; }
  body.lm-auth .form-group { margin-bottom: 14px; }
  body.lm-auth .form-control { height: 50px; }
  body.lm-auth .form-group.phoneNumber > .select2-container { height: 46px !important; }
  body.lm-auth .form-group.phoneNumber .select2-selection--single { height: 46px !important; }
  body.lm-auth .lm-ico { top: 37px; }
  body.lm-auth .lm-code { top: 38px; }
  body.lm-auth .lm-eye { top: 28px; }
  body.lm-auth .form-group.phoneNumber > .select2-container { top: 21px !important; }
  body.lm-auth .form-group.phoneNumber::before { top: 35px; }
  body.lm-auth .rememberMeRow { margin: 14px 0 16px; }
  body.lm-auth .loginButton,
  body.lm-auth .customButton.fullWidthBtn { height: 52px; }
  body.lm-auth .codeInput input { width: 44px !important; height: 50px; font-size: 18px; }
}