/* scope: body.CustomerLogin */
/* Customer login (wire login). Owner: agent login. Every selector must start with the scope above;
   _tools/css_scope_check.py fails the sign-off otherwise. Responsive rules live here too.

   Wire: board 741, frames 741:2900 (1440), 741:8118 (834), 741:5170 (440).
   The form has no card: .panel, .panel-body and .form-signin are flattened with
   display: contents, so the intro, the fields and the actions sit in one column
   with the wire's 48px rhythm. The form idiom (.msi-form__*) is the one Contact,
   Catalog Request and Return Auth reuse; spec/customer-login.md lists it. */

body.CustomerLogin { background: var(--msi-surface-2); }
body.CustomerLogin .LayoutContentInner { background: none; }

/* Platform strings the wire replaces with its own intro and sign-up line.
   Hidden, not deleted: the merge codes stay in the DOM. */
body.CustomerLogin .LayoutContentInner > br,
body.CustomerLogin .LayoutContentInner > .page-header,
body.CustomerLogin .msi-login .panel-heading,
body.CustomerLogin .msi-login .form-signin > h4,
body.CustomerLogin .msi-login .form-signin > p,
body.CustomerLogin .msi-login .msi-form__actions > hr,
body.CustomerLogin .msi-login .msi-form__actions > h4,
body.CustomerLogin .msi-login .msi-form__actions > p:not(.msi-login__signup) { display: none; }

/* --- page grid ----------------------------------------------------------- */

body.CustomerLogin .msi-login {
  display: grid;
  grid-template-columns: minmax(0, 518px);
  align-items: start;
  margin: 24px 0 0;
}
body.CustomerLogin .msi-login::before,
body.CustomerLogin .msi-login::after { content: none; }

body.CustomerLogin .msi-login > .msi-login__col {
  float: none;
  width: auto;
  margin: 63px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
body.CustomerLogin .msi-login .panel,
body.CustomerLogin .msi-login .panel-body,
body.CustomerLogin .msi-login .form-signin { display: contents; }
/* Bootstrap's clearfix pseudos on .panel-body would become empty flex items and add two 48 gaps */
body.CustomerLogin .msi-login .panel-body::before,
body.CustomerLogin .msi-login .panel-body::after { content: none; }

/* --- intro: mark, heading, lede (gap 24, then 16) ------------------------ */

body.CustomerLogin .msi-login__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
body.CustomerLogin .msi-login__mark {
  display: block;
  width: 77px;
  height: 72px;
  background: url("../images/login/login-mark.png") 0 0 / 77px 72px no-repeat;
}
body.CustomerLogin .msi-login__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
body.CustomerLogin .msi-login__text .msi-login__title {
  margin: 0;
  max-width: 432px;
  font-family: var(--msi-font);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.38;
  /* Inter Display Medium in the wire sets narrower than Inter 500 (same fix as the footer tagline) */
  letter-spacing: -0.033em;
  color: #000;
}
body.CustomerLogin .msi-login__text .msi-login__lede {
  align-self: stretch;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #262d31;
}

/* --- form idiom: fields ---------------------------------------------------- */

body.CustomerLogin .msi-form__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 !important; /* the wrapper carries .pad-20 { padding: 20px !important } (deputy.css:34) */
}
body.CustomerLogin .msi-form__field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.CustomerLogin .msi-form__field .msi-form__label {
  margin: 0;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #020202;
}
body.CustomerLogin .msi-form__field input[type="text"],
body.CustomerLogin .msi-form__field input[type="password"],
body.CustomerLogin .msi-form__field input[type="email"] {
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 0 24px;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--msi-ink);
  background: var(--msi-white);
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
}
/* border colour and shadow only when not focused: the text-field focus rule (msi-refresh.css) draws focus */
body.CustomerLogin .msi-form__field input[type="text"]:not(:focus),
body.CustomerLogin .msi-form__field input[type="password"]:not(:focus),
body.CustomerLogin .msi-form__field input[type="email"]:not(:focus) { border-color: rgba(38, 45, 49, 0.2); }
body.CustomerLogin .msi-form__field ::placeholder { color: #262d31; }
body.CustomerLogin .msi-form__help {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: right;
}
body.CustomerLogin .msi-form__help a { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--msi-blue-bright); }
body.CustomerLogin .msi-form__help a:hover,
body.CustomerLogin .msi-form__help a:focus { color: var(--msi-blue-bright); text-decoration: underline; }

/* --- form idiom: actions (button, then the sign-up line, gap 24) ----------- */

body.CustomerLogin .msi-form__actions {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.CustomerLogin .msi-form__submit { position: relative; }
body.CustomerLogin .msi-form__submit input[type="submit"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  min-height: 0;
  margin: 0;
  /* 28 extra on the right keeps the label centred with the chevron as one group */
  padding: 0 60px 0 32px;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--msi-ink);
  background: var(--msi-orange);
  border: 0;
  border-radius: 999px;
}
body.CustomerLogin .msi-form__submit input[type="submit"]:hover,
body.CustomerLogin .msi-form__submit input[type="submit"]:focus { background: var(--msi-orange-dark); color: var(--msi-ink); }
/* lucide/chevron-down turned -90: 8 after the label; the label is 114 wide, so
   the group (142) is centred and the chevron starts 51 right of centre */
body.CustomerLogin .msi-form__submit::after {
  content: "";
  position: absolute;
  top: 25px;
  left: calc(50% + 51px);
  width: 20px;
  height: 20px;
  background: url("../images/login/chevron-right.svg") center / 20px 20px no-repeat;
  pointer-events: none;
}

body.CustomerLogin .msi-login__signup {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
  color: #262d31;
}
body.CustomerLogin .msi-login__signup input[type="submit"],
body.CustomerLogin .msi-login__signup input[type="submit"]:hover,
body.CustomerLogin .msi-login__signup input[type="submit"]:focus {
  display: inline;
  vertical-align: top;
  width: auto;
  height: 25.6px;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--msi-blue-bright);
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
}
body.CustomerLogin .msi-login__signup input[type="submit"]:hover { text-decoration: underline; }

/* --- desktop photo panel (1440 only in the wire) ---------------------------- */

body.CustomerLogin .msi-login__aside { display: none; }

@media (min-width: 1200px) {
  /* 518 form, 106 clear, then the 712 panel, which runs 56 into the right gutter */
  body.CustomerLogin .msi-login {
    grid-template-columns: minmax(0, 518px) minmax(0, 1fr);
    column-gap: 106px;
    margin-right: -56px;
  }
  body.CustomerLogin .msi-login__aside {
    display: block;
    position: relative;
    aspect-ratio: 712 / 804;
    padding: 0;
    background: url("../images/login/login-panel.webp") center / 100% 100% no-repeat;
  }
}
body.CustomerLogin .msi-login__support {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 35px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 16px 24px 16px 16px;
  background: var(--msi-white);
  border-radius: 24px;
}
body.CustomerLogin .msi-login__badge {
  flex: none;
  width: 72px;
  height: 72px;
  background: url("../images/login/support-badge.svg") center / 72px 72px no-repeat;
}
body.CustomerLogin .msi-login__support-text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.CustomerLogin .msi-login__support-text .msi-login__support-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.033em;
  color: #000;
}
body.CustomerLogin .msi-login__support-text .msi-login__support-lede {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #262d31;
}

/* the footer group starts 88 under the panel (1440) */
body.CustomerLogin .LayoutBottom { margin-top: 88px; }

/* --- 834: full-width column, intro centred, 57 under the header ------------ */

@media (max-width: 991px) {
  body.CustomerLogin .msi-login { grid-template-columns: minmax(0, 1fr); margin-top: 57px; }
  body.CustomerLogin .msi-login > .msi-login__col { margin-top: 0; }
  body.CustomerLogin .msi-login__intro,
  body.CustomerLogin .msi-login__text { align-items: center; text-align: center; }
  body.CustomerLogin .LayoutBottom { margin-top: 112px; }
}

/* --- 440: left-aligned again, 56 under the header --------------------------- */

@media (max-width: 767px) {
  body.CustomerLogin .msi-login { margin-top: 56px; }
  body.CustomerLogin .msi-login__intro { align-items: flex-start; text-align: left; }
  body.CustomerLogin .msi-login__text { align-items: stretch; text-align: left; }
  body.CustomerLogin .LayoutBottom { margin-top: 88px; }
}

/* the wire labels the field "E-mail"; the store's label stays in the page, hidden (Diego 2026-09-23) */
body.CustomerLogin .msi-form__label-store { display: none; }