/* Login-only presentation; no shared brand or scientific palette overrides. */
.foodomer-login {
  --login-petrol: #155E75; /* brand primary; login does not load brand.css */
  --login-ink: #0F172A;
  --login-muted: #566578;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: #F8FAFC;
  color: var(--login-ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.6;
}
.foodomer-login *, .foodomer-login *::before, .foodomer-login *::after {box-sizing: border-box}
.foodomer-login .login-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 960px;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #DDE5EB;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgb(15 23 42 / 4%);
}
.foodomer-login .login-brand {
  position: relative;
  overflow: hidden;
  /* Keep the desktop brand composition centered within the existing card height. */
  padding: 169.6px 48px;
  background: #EEF4F5;
  border-right: 1px solid #DDE5EB;
}
.foodomer-login .login-wordmark {
  margin: 0 0 48px;
  color: var(--login-petrol);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.2;
}
.foodomer-login .login-tagline {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(26px, 2.5vw, 32px);
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -.8px;
}
.foodomer-login .login-access {min-width: 0; align-self: center; padding: 48px}
.foodomer-login .login-intro h2 {margin: 0 0 32px; font-size: 28px; font-weight: 650; line-height: 1.25; letter-spacing: -.7px}
.foodomer-login .login-form > p {margin: 0 0 20px}
.foodomer-login .login-form label {display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600}
.foodomer-login .login-form input:not([type="hidden"]) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid #B9C5D0;
  border-radius: 7px;
  background: #FFFFFF;
  color: var(--login-ink);
  font: inherit;
  font-size: 16px;
}
.foodomer-login .login-card .login-form button[type="submit"] {
  width: 100%;
  min-height: 48px;
  margin-top: 8px;
  padding: 12px 18px;
  border: 1px solid var(--login-petrol);
  border-radius: 7px;
  background: var(--login-petrol);
  color: #FFFFFF;
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
}
.foodomer-login .login-card .login-form button[type="submit"]:hover {background: #104B59; border-color: #104B59}
.foodomer-login .login-form input:focus-visible, .foodomer-login .login-form button:focus-visible {
  outline: 3px solid var(--login-petrol);
  outline-offset: 3px;
  box-shadow: none;
}
.foodomer-login .login-form .errorlist {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #E7C8C5;
  border-left: 3px solid #A33832;
  border-radius: 6px;
  background: #FFF7F6;
  color: #842E2A;
  list-style: none;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.foodomer-login .login-form .errorlist li + li {margin-top: 6px}
.foodomer-login .login-form input[aria-invalid="true"] {border-color: #A33832}
@media (max-width: 700px) {
  .foodomer-login {padding: 24px 16px}
  .foodomer-login .login-card {grid-template-columns: 1fr; max-width: 460px; border-radius: 14px}
  .foodomer-login .login-brand {padding: 26px 28px; border-right: 0; border-bottom: 1px solid #DDE5EB}
  .foodomer-login .login-wordmark {margin-bottom: 12px; font-size: 25px}
  .foodomer-login .login-tagline {margin-bottom: 0; font-size: 20px; letter-spacing: -.4px}
  .foodomer-login .login-desktop-break {display: none}
  .foodomer-login .login-access {padding: 28px}
  .foodomer-login .login-intro h2 {font-size: 25px}
}
@media (max-width: 360px) {
  .foodomer-login {padding: 16px 12px}
  .foodomer-login .login-brand, .foodomer-login .login-access {padding: 24px 20px}
}

.foodomer-login .login-wordmark .foodomer-logo {width:260px;max-width:100%;height:auto}
@media(max-width:760px) {.foodomer-login .login-wordmark .foodomer-logo {width:220px}}

/* Account pages (password change, invitation) reuse the login card. */
.foodomer-login .login-intro .account-text, .foodomer-login .account-text {margin: -20px 0 24px; color: var(--login-muted); font-size: 15px}
.foodomer-login .account-links {margin: 20px 0 0; font-size: 14px}
.foodomer-login .account-links a {color: var(--login-petrol); font-weight: 600}
.foodomer-login .login-form .helptext, .foodomer-login .login-form .helptext ul {color: var(--login-muted); font-size: 13px}
.foodomer-login .login-form .helptext ul {margin: 6px 0 0; padding-left: 18px}
.foodomer-login .errornote {margin: 0 0 18px; padding: 12px 14px; border: 1px solid #E7C8C5; border-left: 3px solid #A33832; border-radius: 6px; background: #FFF7F6; color: #842E2A; font-size: 14px}
.foodomer-login .login-form > div {margin: 0 0 20px}
.foodomer-login .login-form .helptext {display: block; margin-top: 6px}