/* =========================================================
   LOGIN PAGE  — mirrors https://app.postop.ai/users/sign_in
   Reuses tokens from styles.css (Lato, #1f2e99, #5E37EF, Questrial).
   Decorative bubbles, login-box width and disclaimer breakpoints
   match the live app's CSS rules exactly.
   ========================================================= */
.login-page {
  background: #fff;
  min-height: 100vh;
}
.login-header { }                 /* .py-3.px-4 from Bootstrap */
.login-logo { width: 188px; height: 62px; max-width: 60vw; }

/* ---- centred account card ---- */
.login-box { width: 100%; }
@media (min-width: 576px) { .login-box { max-width: 350px; } }

.login-title {
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 38.4px;
  color: #1f2e99;
  margin: 0 0 1.5rem;
}
@media (max-width: 360px) { .login-title { font-size: 28px; line-height: 34px; } }

/* ---- form field ---- */
.login-box .form-label {
  font-size: 13px;
  font-weight: 400;
  color: #798599;
  margin-bottom: 0.35rem;
}
.login-box .modal-label.required::after { content: "*"; color: #FE7235; margin-left: 3px; }

.login-input {
  border: 1px solid #dee2e6;
  border-radius: 15px;
  height: 49.5px;
  padding: 11.75px 14px;
  font-size: 16px;
  color: #1f2e99;
  background: #fff;
  box-shadow: none;
}
.login-input::placeholder { color: #979fb0; opacity: 1; }
.login-input:focus {
  border-color: #5E37EF;
  box-shadow: 0 0 0 0.2rem rgba(94, 55, 239, 0.15);
}
.login-input.is-invalid { border-color: #ef3737; }
.login-input.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(239, 55, 55, 0.15); }

/* submit button keeps app's pill .btn-primary; just guarantee the radius */
.login-box .btn-primary { border-radius: 24px; }

/* the app labels its button font with .ff-questrial (not a Bootstrap class) —
   define it here so Continue / Sign in render in Questrial, like the live app */
.ff-questrial { font-family: 'Questrial', sans-serif; }

/* inline validation message */
.login-error {
  color: #ef3737;
  font-size: 13px;
  margin: -4px 0 12px;
}

/* step-2 “signed-in as” read-back */
.login-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: #1f2e99;
  background: #f6f7fb;
  border: 1px solid #eef0f6;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 1.25rem;
}
.login-account .login-account-email { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-switch {
  background: none; border: 0; padding: 0;
  color: #5E37EF; font-size: 13px; font-weight: 700;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.login-switch:hover { text-decoration: underline; }

/* ---- decorative bubbles (anchored to .container.position-relative) ---- */
/* real app blue bubble = inline SVG (128.9px circle @ 0.5 opacity + soft drop-shadow),
   bundled as login-blue-bubble.svg; the 190px box matches the live app exactly */
.login-blue-bubble { position: absolute; top: -40px; right: 0; width: 190px; height: auto; }
.login-orange-bubble { position: absolute; bottom: -10%; right: 0; }
.login-filled-bubble { position: absolute; top: 50%; left: 0; }

@media (max-width: 991px) {
  .login-blue-bubble { top: -10%; right: 0; width: 110px; }
  .login-orange-bubble { bottom: 10%; }
  .login-filled-bubble { width: 70px; }
}

/* ---- footer ---- */
.login-foot {
  display: grid;
  grid-template-columns: 1fr;   /* stacked on small/tablet */
  align-items: end;
  gap: 1.25rem;
}
/* trademark left · warning centred · spacer right — only when there's room */
@media (min-width: 992px) {
  .login-foot { grid-template-columns: 1fr auto 1fr; gap: 1rem; }
}
.login-disclaimer {
  font-family: 'Questrial', sans-serif;
  font-size: 11px; line-height: 13px;
  color: #1f2e99;
}
@media (min-width: 767px) { .login-disclaimer { font-size: 16px; line-height: 18px; } }

.login-trademark .login-trademark-text { font-style: italic; font-weight: 700; display: block; }
.login-trademark .login-copyright { font-family: 'Lato', sans-serif; font-size: 11px; line-height: 14px; color: #1f2e99; opacity: 0.9; }
.login-warn { display: flex; align-items: flex-start; gap: 6px; max-width: 560px; margin: 0 auto; }
.login-warn img { margin-top: 1px; flex-shrink: 0; }

@media (max-width: 766px) {
  .login-warn { margin: 0; }
}