/*
 * The sign-in page in the Co-op "welcome" style. Wraps WordPress's own login markup (see class-dss-sr-login.php);
 * LoginPress styles the same page, so the rules here are scoped to body.dss-login-on and win where they must.
 */
body.dss-login-on {
  --coop-blue: #00A1CC;
  --coop-blue-light: #38B6E5;
  --coop-teal: #0F8482;
  --coop-ink: #282828;
  --coop-muted: #5C6670;
  --coop-grey: #F2F4F7;
  --coop-navy: #00597A;
  --coop-purple: #6E59E6;
  background: #fff !important;
  background-image: none !important;
  color: var(--coop-ink);
  font-family: "Nunito Sans", "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: block !important;
  padding: 0 !important;
  overflow-x: hidden;
}
body.dss-login-on::before, body.dss-login-on::after { display: none !important; }
body.dss-login-on .loginpress-show-love,
body.dss-login-on .footer-wrapper,
body.dss-login-on #backtoblog,
body.dss-login-on .language-switcher,
body.dss-login-on #login h1.wp-login-logo { display: none !important; }

.dss-login { min-height: 100vh; display: flex; flex-direction: column; }
.dss-login-top { flex: 1; display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: min(720px, calc(100vh - 230px)); }
.dss-login-left { display: flex; align-items: center; justify-content: flex-end; padding: 56px 48px 48px 32px; }
.dss-login-left-in { width: 100%; max-width: 470px; }
.dss-login-brand { display: inline-block; margin-bottom: 44px; }
.dss-login-brand img { display: block; width: 74px; height: auto; }
.dss-login-title { font-size: 46px; line-height: 1.06; font-weight: 700; letter-spacing: -.015em; margin: 0 0 18px; color: var(--coop-ink); }
.dss-login-intro { font-size: 17px; line-height: 1.5; margin: 0 0 22px; color: var(--coop-ink); }

/* the WordPress form, made to sit in the column (LoginPress floats #login and centres the text) */
body.dss-login-on .dss-login-left-in, body.dss-login-on .dss-login-left-in * { text-align: left; }
body.dss-login-on #login { float: none !important; display: block !important; width: 100% !important; max-width: 420px !important; padding: 0 !important; margin: 0 !important; position: static !important; background: none !important; box-shadow: none !important; }
body.dss-login-on #login form p, body.dss-login-on #login .user-pass-wrap { margin: 0 !important; padding: 0 !important; background: none !important; }
body.dss-login-on #login input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset !important; }
/* LoginPress Pro's field icons (a grey box inside each input) */
body.dss-login-on.login label[for="user_login"]::after,
body.dss-login-on.login label[for="user_pass"]::after,
body.dss-login-on.login label[for="user_email"]::after,
body.dss-login-on.login label[for="pass1"]::after { display: none !important; content: none !important; background: none !important; }
body.dss-login-on #login form,
body.dss-login-on #loginform,
body.dss-login-on #lostpasswordform,
body.dss-login-on #resetpassform,
body.dss-login-on #registerform {
  margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; width: auto !important; max-width: 420px;
}
body.dss-login-on #login label { color: var(--coop-ink) !important; font: 600 15px/1.4 "Nunito Sans", system-ui, sans-serif !important; margin-bottom: 6px !important; display: inline-block; }
body.dss-login-on #login input[type="text"],
body.dss-login-on #login input[type="email"],
body.dss-login-on #login input[type="password"] {
  width: 100% !important; height: 54px !important; padding: 0 22px !important; margin: 0 0 16px !important; box-sizing: border-box !important;
  border: 2px solid #CBD5DB !important; border-radius: 999px !important; background: #fff !important; box-shadow: none !important;
  font: 400 16px/1 "Nunito Sans", system-ui, sans-serif !important; color: var(--coop-ink) !important;
}
body.dss-login-on #login input[type="text"]:focus,
body.dss-login-on #login input[type="email"]:focus,
body.dss-login-on #login input[type="password"]:focus { border-color: var(--coop-teal) !important; outline: 0 !important; box-shadow: 0 0 0 3px rgba(15, 132, 130, .18) !important; }
body.dss-login-on #login .wp-pwd { position: relative; }
body.dss-login-on #login .wp-pwd .button.wp-hide-pw { top: 7px !important; right: 12px !important; height: 40px !important; width: 40px !important; border: 0 !important; background: none !important; color: var(--coop-muted) !important; box-shadow: none !important; }
body.dss-login-on #login .user-pass-fields { position: relative; }
body.dss-login-on #login p.forgetmenot { float: none !important; margin: 2px 0 18px !important; display: flex; align-items: center; gap: 8px; }
body.dss-login-on #login p.forgetmenot label { margin: 0 !important; font-weight: 400 !important; }
body.dss-login-on #login input[type="checkbox"] { width: 18px !important; height: 18px !important; border-radius: 4px !important; border: 2px solid #9AA6AE !important; margin: 0 !important; }
body.dss-login-on #login input[type="checkbox"]:checked::before { margin: -2px 0 0 -3px !important; }
body.dss-login-on #login p.submit { float: none !important; margin: 0 !important; padding: 0 !important; }
body.dss-login-on #login .button-primary {
  float: none !important; width: 100% !important; max-width: 420px; height: 54px !important; padding: 0 24px !important; border-radius: 999px !important;
  background: var(--coop-teal) !important; border: 0 !important; box-shadow: none !important; text-shadow: none !important; color: #fff !important;
  font: 700 17px/54px "Nunito Sans", system-ui, sans-serif !important; letter-spacing: .01em; cursor: pointer; transition: background .15s;
}
body.dss-login-on #login .button-primary:hover, body.dss-login-on #login .button-primary:focus { background: #0B6F6D !important; }
body.dss-login-on #login #nav { margin: 16px 0 0 !important; padding: 0 !important; text-align: left !important; }
body.dss-login-on #login #nav a, body.dss-login-on #login a { color: var(--coop-teal) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
body.dss-login-on #login .message, body.dss-login-on #login .notice, body.dss-login-on #login #login_error {
  margin: 0 0 18px !important; border-radius: 12px !important; border-left-width: 6px !important; box-shadow: none !important; max-width: 420px; background: var(--coop-grey) !important; color: var(--coop-ink) !important;
}

.dss-login-feats { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 12px 26px; max-width: 470px; }
.dss-login-feats li { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 0; }
.dss-login-ico { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--coop-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* the mosaic: rounded tiles, cropped at the right and bottom edges like the Co-op page */
.dss-login-right { position: relative; overflow: hidden; }
.dss-login-mosaic { position: absolute; inset: 0; min-height: 560px; }
.dss-login-tile { position: absolute; overflow: hidden; background: var(--coop-grey); }
.dss-login-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dss-login-tile.t1 { left: 2%; top: 0; width: 46%; height: 33%; border-radius: 10px 10px 40px 40px / 30px 30px 40px 40px; }
.dss-login-tile.t2 { left: 51%; top: 0; width: 49%; height: 33%; border-radius: 10px 0 0 40px / 30px 0 0 40px; }
.dss-login-tile.t3 { left: 15%; top: 37%; width: 42%; height: 33%; border-radius: 40px; }
.dss-login-tile.t4 { left: 60%; top: 37%; width: 13%; height: 15%; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.dss-login-tile.t4 img { width: 48%; height: auto; object-fit: contain; }
.dss-login-tile.t5 { left: 60%; top: 55%; width: 13%; height: 15%; border-radius: 10px; background: var(--coop-navy); display: flex; align-items: center; justify-content: center; }
.dss-login-tile.t6 { left: 76%; top: 37%; width: 24%; height: 33%; border-radius: 40px 0 0 40px; }
.dss-login-tile.t7 { left: 2%; top: 74%; width: 13%; height: 15%; border-radius: 10px; background: var(--coop-blue); display: flex; align-items: center; justify-content: center; }
.dss-login-tile.t8 { left: 18%; top: 74%; width: 46%; height: 30%; border-radius: 40px 40px 0 0; }
.dss-login-tile.t9 { left: 67%; top: 74%; width: 33%; height: 30%; border-radius: 40px 0 0 0; }
.dss-login-tile.t5 .dss-login-ico, .dss-login-tile.t7 .dss-login-ico { width: 46%; height: 46%; stroke: #fff; stroke-width: 1.5; }

/* the grey band: locate site, get survey, view results */
.dss-login-steps { background: var(--coop-grey); padding: 54px 24px 64px; text-align: center; box-shadow: 0 -6px 16px -10px rgba(0, 0, 0, .18); position: relative; z-index: 2; }
.dss-login-steps h2 { font-size: 32px; font-weight: 700; margin: 0 0 44px; color: var(--coop-ink); letter-spacing: -.01em; }
.dss-login-steps ol { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; max-width: 1180px; counter-reset: step; }
.dss-login-steps li { margin: 0; display: flex; flex-direction: column; align-items: center; }
.dss-login-steps h3 { font-size: 21px; font-weight: 700; margin: 22px 0 8px; color: var(--coop-ink); }
.dss-login-steps p { margin: 0; font-size: 15.5px; line-height: 1.5; color: #3D464E; max-width: 340px; }
.dss-login-illo { position: relative; display: block; width: 116px; height: 104px; }
.dss-login-illo-svg { width: 100%; height: 100%; display: block; }
.dss-login-illo--locate { width: 86px; }
.dss-login-illo-logo { position: absolute; left: 50%; top: 18%; width: 48%; transform: translateX(-50%); filter: brightness(0) invert(1); }

@media (max-width: 1100px) {
  .dss-login-title { font-size: 38px; }
  .dss-login-left { padding: 40px 32px; }
}
@media (max-width: 900px) {
  .dss-login-top { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .dss-login-left { justify-content: center; padding: 32px 20px 36px; }
  .dss-login-right { height: 300px; }
  .dss-login-mosaic { min-height: 0; }
  .dss-login-brand { margin-bottom: 28px; }
  .dss-login-title { font-size: 32px; }
  .dss-login-steps ol { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .dss-login-steps h2 { font-size: 26px; margin-bottom: 30px; }
  .dss-login-feats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .dss-login-right { height: 220px; }
}