/* brainwise_theme's /login: our product name beside the mark, the Create-account link and the WhatsApp hint (spec §5.5).
   Linked from the update_website_context hook on /login only; the theme's own login.css keeps its layout. */

/* The mark sits where the theme puts its logo (absolute, top left); the name follows it on the same line */
.login-hero .ss-login-brand {
  position: absolute;
  top: var(--space-lg);
  left: calc(var(--space-lg) + var(--logo-height) + 0.625rem);
  display: flex;
  align-items: center;
  block-size: var(--logo-height);
  color: var(--brand-800);
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
}
/* Arabic: the theme keeps its logo on the left; mark and name start from the right, where an Arabic reader begins
   (html[lang] is rendered by the server, so this applies from the first paint) */
html[lang="ar"] .login-hero .hero-logo {
  left: auto;
  right: var(--space-lg);
}
html[lang="ar"] .login-hero .ss-login-brand {
  left: auto;
  right: calc(var(--space-lg) + var(--logo-height) + 0.625rem);
}
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .login-hero .ss-login-brand {
    top: var(--space-md);
    left: calc(var(--space-md) + var(--logo-height) + 0.625rem);
  }
  html[lang="ar"] .login-hero .hero-logo {
    left: auto;
    right: var(--space-md);
  }
  html[lang="ar"] .login-hero .ss-login-brand {
    left: auto;
    right: calc(var(--space-md) + var(--logo-height) + 0.625rem);
  }
}

/* Phones: the theme centres its logo above the form; the name sits beside the mark */
.mobile-logo img,
.mobile-logo .ss-login-brand {
  vertical-align: middle;
}
.mobile-logo .ss-login-brand {
  margin-inline-start: 0.5rem;
  color: var(--brand-800);
  font-size: 1.125rem;
  font-weight: 700;
}

.for-login .ss-signup-link {
  text-align: center;
}
.ss-forgot-mobile {
  color: var(--muted);
  line-height: 1.6;
}
.ss-forgot-mobile a {
  white-space: nowrap;
}

/* "Your session has ended. Log in again." above the form when the portal sent the user here (reason=session) */
.ss-session-ended {
  margin: 0 0 1rem;
  padding: 0.625rem 0.875rem;
  border-inline-start: 4px solid var(--amber-400, #f0b04a);
  border-radius: 8px;
  background: var(--amber-50, #faeed8);
  color: var(--ink, #1c2520);
  font-weight: 600;
}