/* =============================================================================
   Account pages - login.aspx and garage-login.aspx

   Loaded on both via extraPageCss in MasterPageGlobal. Kept out of
   main.css because that bundle builds from SCSS through Compass, which is not
   part of this repo's toolchain; this module compiles standalone.

   The page leads with signing in. Registration is eight fields, so it sits
   behind a pitch and a button rather than filling half the screen before
   anyone has asked for it - see .newcust below.

   Tokens match _navigation-mega.scss so the page belongs to the same site.
   ============================================================================= */
/* icons ride as data URIs so the page needs no extra requests */
body.loginPage {
  /* ---- page heading ------------------------------------------------------ */
}
body.loginPage .account-intro {
  max-width: 1160px;
  margin: 0 auto;
  padding: 30px 0 4px;
}
body.loginPage .account-intro__title {
  margin: 0;
  color: #1f2330;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
body.loginPage .account-intro__title::after {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin: 16px 0 0;
  border-radius: 2px;
  background-color: #ff0801;
}
body.loginPage .account-intro__lead {
  margin: 18px 0 0;
  color: #6b7079;
  font-size: 16px;
  line-height: 1.5;
}
body.loginPage {
  /* ---- the two cards ----------------------------------------------------- */
  /* Signing in is the common case and the register card is only a pitch until
     it is opened, so the split is weighted rather than 50/50. */
}
body.loginPage .login-container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 26px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 0 34px;
  /* The container carries a `garage` class, and main.css has
     `.garage { min-height: 100vh }` for the garage dashboard pages. Here it
     just held ~450px of empty space open between the cards and the trust
     strip, because the cards are far shorter than the viewport. */
  min-height: 0;
}
body.loginPage .login-container > .col,
body.loginPage .login-container > div[class*=lg-6] {
  width: auto;
  max-width: none;
  float: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e9ee;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0 14px 30px -24px rgba(20, 24, 33, 0.55);
}
body.loginPage .login-container > .col:first-child,
body.loginPage .login-container > div[class*=lg-6]:first-child {
  flex: 1.7 1 460px;
}
body.loginPage .login-container > .col:last-child,
body.loginPage .login-container > div[class*=lg-6]:last-child {
  flex: 1 1 320px;
}
body.loginPage .login-container {
  /* While it is only a pitch the register card can stay narrow, but once the
     eight fields are showing that width squeezes the pairs. Give it back an
     even share when it opens. Browsers without :has() simply keep the
     narrower card - the form still works, it is just tighter. */
}
body.loginPage .login-container:has(.newcust.is-open) > .col:first-child,
body.loginPage .login-container:has(.newcust.is-open) > div[class*=lg-6]:first-child {
  flex: 1 1 440px;
}
body.loginPage .login-container:has(.newcust.is-open) > .col:last-child,
body.loginPage .login-container:has(.newcust.is-open) > div[class*=lg-6]:last-child {
  flex: 1 1 440px;
}
body.loginPage {
  /* ---- sections within a card -------------------------------------------- */
}
body.loginPage .panel {
  margin: 0;
  padding: 30px 32px 32px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.loginPage .panel + .panel {
  border-top: 1px solid #e7e9ee;
}
body.loginPage .panel .header {
  margin: 0 0 22px;
  padding: 0 0 20px;
  border-bottom: 1px solid #e7e9ee;
  color: #1f2330;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
body.loginPage .panelContent {
  padding: 0;
}
body.loginPage {
  /* sign-in header: avatar, title, one line of reassurance */
}
body.loginPage .panel__header--icon {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.loginPage .panel__header-icon {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f5f6f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f2330' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") no-repeat center/22px 22px;
  /* garage-login signs in a fitting centre, not a person */
}
body.loginPage .panel__header-icon--garage {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231f2330' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M8 20v-5h8v5'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");
  background-size: 23px 23px;
}
body.loginPage .panel__header-text {
  display: block;
}
body.loginPage .panel__title {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
}
body.loginPage .panel__sub {
  display: block;
  margin-top: 3px;
  color: #6b7079;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}
body.loginPage {
  /* ---- form -------------------------------------------------------------- */
}
body.loginPage .login.form {
  /* main.css paints fieldset white; it has to be transparent so it cannot
     show through as a block inside a tinted section */
}
body.loginPage .login.form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
body.loginPage .login.form label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 8px;
  color: #1f2330;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
body.loginPage .login.form {
  /* Height and border are deliberately absent: the container carries a
     `garage` class and main.css has
       .garage input[type=text], .garage input[type=password], ...
       { border: 2px solid #E8E8E8 !important; height: 46px !important; }
     That is the house field style used across the garage pages, so it is
     kept - only what it does not lock is set here. */
}
body.loginPage .login.form .formfield,
body.loginPage .login.form input[type=tel] {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0 14px;
  border-radius: 9px;
  background-color: #fff;
  color: #1f2330;
  font-size: 15px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
body.loginPage .login.form .formfield::placeholder,
body.loginPage .login.form input[type=tel]::placeholder {
  color: #a3a8b1;
}
body.loginPage .login.form .formfield,
body.loginPage .login.form input[type=tel] {
  /* The one place !important is warranted: that same shorthand overrides
     :focus too, so without this the fields show no focus feedback at all -
     on the one page whose whole job is typing into them. */
}
body.loginPage .login.form .formfield:focus,
body.loginPage .login.form input[type=tel]:focus {
  border-color: #ff0801 !important;
  box-shadow: 0 0 0 3px rgba(255, 8, 1, 0.15);
  outline: none;
}
body.loginPage .login.form .formfield.error,
body.loginPage .login.form input[type=tel].error {
  border-color: #d33 !important;
}
body.loginPage .login.form > fieldset > .group,
body.loginPage .login.form > fieldset > .formRow,
body.loginPage .login.form .garage__create-col {
  margin: 0 0 22px;
  padding: 0;
  float: none;
}
body.loginPage {
  /* show / hide password */
}
body.loginPage .group--password {
  position: relative;
}
body.loginPage .group--password .formfield {
  padding-right: 46px;
}
body.loginPage .password-reveal {
  position: absolute;
  right: 12px;
  /* Anchored from the top, not the bottom: a validation message appears
     below the field and would otherwise push the icon down with it.
     37px = label (18px) + its 8px margin + half the 46px field, less half
     the icon. */
  top: 37px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7079' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8S1 12 1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") no-repeat center/20px 20px;
  cursor: pointer;
  opacity: 0.75;
}
body.loginPage .password-reveal:hover {
  opacity: 1;
}
body.loginPage .password-reveal.is-showing {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff0801' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
  opacity: 1;
}
body.loginPage {
  /* ---- forgotten password ------------------------------------------------ */
  /* The reminder form itself stays collapsed until this link is used - the
     markup was always built that way (#getPassword), main.css just hid the
     link and showed the panel. */
}
body.loginPage .passRemind {
  display: inline-block;
  margin: -4px 0 20px;
  padding: 0;
  border: 0;
  color: #ff0801;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
}
body.loginPage .passRemind:hover {
  color: #d90600;
  text-decoration: underline;
}
body.loginPage .panel.remindMe {
  display: none;
}
body.loginPage .panel.remindMe .header {
  margin-bottom: 16px;
  padding-bottom: 16px;
  font-size: 16px;
}
body.loginPage {
  /* :target is the no-JS fallback; with JS the class is used instead so the
     browser never follows the fragment and jumps down the page */
}
body.loginPage .panel.remindMe:target,
body.loginPage .is-remind-open .panel.remindMe {
  display: block;
}
body.loginPage .is-remind-open .passRemind {
  display: none;
}
body.loginPage {
  /* ---- new customer pitch ------------------------------------------------ */
}
body.loginPage .newcust__lead {
  margin: 0 0 20px;
  color: #6b7079;
  font-size: 15px;
  line-height: 1.55;
}
body.loginPage .newcust__benefits {
  margin: 0 0 24px;
  padding: 20px 0 0;
  border-top: 1px solid #e7e9ee;
  list-style: none;
}
body.loginPage .newcust__benefits li {
  position: relative;
  margin: 0 0 13px;
  padding-left: 30px;
  color: #1f2330;
  font-size: 15px;
  line-height: 1.4;
}
body.loginPage .newcust__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff0801' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E") no-repeat center/20px 20px;
}
body.loginPage .newcust__benefits li:last-child {
  margin-bottom: 0;
}
body.loginPage {
  /* red outline: it is the secondary path on a page that leads with signing
     in, but still the primary action of this card */
}
body.loginPage .newcust__toggle {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 20px;
  border: 1.5px solid #ff0801 !important;
  border-radius: 10px;
  background-color: #fff;
  color: #ff0801;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.loginPage .newcust__toggle:hover {
  background-color: #fff4f3;
}
body.loginPage {
  /* the form is collapsed until the pitch button is used, or the server says
     this postback came from it */
}
body.loginPage .newcust .accountForm {
  display: none;
}
body.loginPage .newcust.is-open .newcust__pitch {
  display: none;
}
body.loginPage .newcust.is-open .accountForm {
  display: block;
}
body.loginPage {
  /* register form keeps its two-up rows, on a grid rather than floats */
}
body.loginPage .garage__create-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 26px;
  margin: 0;
}
body.loginPage .garage__create-row > .garage__create-col {
  flex: 1 1 100%;
  width: auto;
  max-width: none;
}
body.loginPage .garage__create-row > .garage__create-col.lg-6 {
  flex: 1 1 calc(50% - 13px);
}
body.loginPage .garage__create-row {
  /* Email, Confirm Email, Password and Repeat Password stay full width.
     They were paired to shorten the form, but half a card is not enough to
     read a whole email address, and you cannot check a confirmation you
     cannot see. Names and company/mobile are short enough to pair. */
}
body.loginPage {
  /* ---- actions ------------------------------------------------------------ */
}
body.loginPage .login.form > fieldset > .group:last-child,
body.loginPage .login.form > fieldset > .formRow:last-child,
body.loginPage .garage__create-row > .garage__create-col:last-child {
  margin: 12px 0 0;
  padding: 0;
}
body.loginPage .button.positive,
body.loginPage input.button.positive {
  float: none;
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 10px;
  background-color: #ff0801;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
body.loginPage .button.positive:hover,
body.loginPage input.button.positive:hover {
  background-color: #d90600;
  box-shadow: 0 8px 20px -10px rgba(255, 8, 1, 0.8);
}
body.loginPage .button.positive:focus-visible,
body.loginPage input.button.positive:focus-visible {
  outline: 3px solid rgba(255, 8, 1, 0.4);
  outline-offset: 2px;
}
body.loginPage {
  /* main.css sets `.button.neutral { border: 1px solid #ccc !important }`, so
     the border - including hover, the whole affordance of an outline button -
     needs !important to land */
}
body.loginPage .button.neutral:not(.newcust__toggle),
body.loginPage input.button.neutral {
  float: none;
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 24px;
  border: 1px solid #d3d7de !important;
  border-radius: 10px;
  background-color: #fff;
  color: #1f2330;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
body.loginPage .button.neutral:not(.newcust__toggle):hover,
body.loginPage input.button.neutral:hover {
  border-color: #ff0801 !important;
  background-color: #fff4f3;
  color: #ff0801;
}
body.loginPage {
  /* ---- trust strip --------------------------------------------------------- */
}
body.loginPage .account-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  max-width: 1160px;
  margin: 0 auto;
  padding: 6px 0 46px;
  list-style: none;
}
body.loginPage .account-trust__item {
  position: relative;
  flex: 0 1 auto;
  margin: 0;
  padding: 4px 44px 4px 78px;
}
body.loginPage .account-trust__item + .account-trust__item {
  border-left: 1px solid #e7e9ee;
}
body.loginPage .account-trust__item::before {
  content: "";
  position: absolute;
  left: 40px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}
body.loginPage .account-trust__item:first-child {
  padding-left: 38px;
}
body.loginPage .account-trust__item:first-child::before {
  left: 0;
}
body.loginPage .account-trust__item--secure::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%231f2330' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
}
body.loginPage .account-trust__item--support::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%231f2330' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E");
}
body.loginPage .account-trust__item--trusted::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%231f2330' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14.5L7 22l5-2.5L17 22l-1.5-7.5'/%3E%3Cpath d='M9.5 9l1.8 1.8L14.5 7.5'/%3E%3C/svg%3E");
}
body.loginPage .account-trust__title {
  display: block;
  color: #1f2330;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
body.loginPage .account-trust__sub {
  display: block;
  margin-top: 2px;
  color: #6b7079;
  font-size: 13.5px;
  line-height: 1.3;
}
body.loginPage {
  /* ---- small screens -------------------------------------------------------- */
}
@media all and (max-width: 900px) {
  body.loginPage .account-intro {
    padding-top: 22px;
  }
  body.loginPage .account-intro__title {
    font-size: 30px;
  }
  body.loginPage .account-intro__lead {
    font-size: 15px;
    margin-top: 14px;
  }
  body.loginPage .login-container {
    gap: 16px;
    padding: 20px 0 26px;
  }
  body.loginPage .login-container > .col,
  body.loginPage .login-container > div[class*=lg-6] {
    flex: 1 1 100% !important;
  }
  body.loginPage .panel {
    padding: 22px 20px 24px;
  }
  body.loginPage .garage__create-row > .garage__create-col.lg-6,
  body.loginPage .garage__create-row > .garage__create-col:nth-child(n+5):nth-child(-n+8) {
    flex: 1 1 100%;
  }
  body.loginPage .account-trust {
    flex-direction: column;
    /* stacked, so justify-content now runs down the column - centring
       horizontally is align-items */
    align-items: center;
    gap: 18px;
    padding-bottom: 32px;
  }
  body.loginPage .account-trust__item {
    /* each row is centred as a unit, but the three keep a shared left edge
       for icon and text: they are sized to the widest of them so the icons
       line up instead of stepping in and out */
    width: 15.5em;
    max-width: 100%;
    padding: 0 0 0 38px;
    text-align: left;
  }
  body.loginPage .account-trust__item + .account-trust__item {
    border-left: 0;
  }
  body.loginPage .account-trust__item::before {
    left: 0;
  }
  body.loginPage .account-trust__item:first-child {
    padding-left: 38px;
  }
}

/* =============================================================================
   Garage login

   Same card, same fields, but one column: there is no registration here, and
   the password reminder sits inside the card behind the "Forgot password?"
   link rather than beside it. Everything above still applies - this only
   narrows the layout and centres it.
   ============================================================================= */
body.loginPage.garageLoginPage .account-intro,
body.loginPage.garageLoginPage .login-container {
  max-width: 560px;
}
body.loginPage.garageLoginPage .login-container {
  /* one card, so no room to share out - and nothing to align against */
  display: block;
  padding-bottom: 44px;
}
body.loginPage.garageLoginPage .login-container > .col,
body.loginPage.garageLoginPage .login-container > div[class*=lg-6] {
  width: auto;
  float: none;
}
body.loginPage.garageLoginPage {
  /* the sign-in card carries the whole page, so it gets a little more air */
}
body.loginPage.garageLoginPage .panel {
  padding: 30px 30px 32px;
}