/* Qinta auth stylesheet (public pages) */

:root {

  --q-color-bg: #ffffff;
  --q-color-text: #000000;
  --q-color-muted: #64748b;
  --q-color-border: #e5e7eb;
  --q-color-hover: #46494C;
  --q-primary: #66D384;

  --q-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --q-font-heading: "Inter", "Source Sans 3", sans-serif;
  --q-color-bg: #fafaf6;
  --q-color-muted: #7a7a74;

  --q-btn-black: #000000;
  --q-btn-white-text: #ffffff;
  --q-btn-google-bg: #000000;
  --q-btn-google-text: #0f172a;
  --q-btn-google-disabled:#8e8e8e;

  --q-radius: 999px;
  --q-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --q-shadow-md: 0 4px 10px rgba(0,0,0,.08);

  --q-title-max: 45px;
  --q-title-min: 30px;
  --q-subtitle: 20px;
  --q-message: 16px;
  --q-message-REM: 0.95rem;
  --q-fine-print: 13px;

  --auth-content-max: 600px;
  --auth-side-pad: 16px;
  --auth-side-pad-mobile: 12px;
}

/* =========================================
   GLOBAL BASE
   ========================================= */

html, body {
  height: 100%;
  background-color: var(--q-color-bg);
  color: var(--q-color-muted);
  font-family: var(--q-font-body);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
}

/* =========================================
   AUTH PAGE LAYOUT (IMPROVED VERTICAL CENTERING)
   ========================================= */

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 2026-02-16 — Purpose: vertically center auth content with slight upward optical bias */
.auth-page main {
  margin-top: auto;
  margin-bottom: auto;
  transform: translateY(-4%);
}

/* =========================================
   HEADER
   ========================================= */

.header {
  margin-bottom: 0px;
}

.header img {
  height: 30px;
}

/* =========================================
   TYPOGRAPHY
   ========================================= */

.auth-wrap {
  max-width: 650px;
  width: 100%;
  text-align: center;
}

h1 {
  font-family: var(--q-font-heading);
  color: var(--q-color-text);
  font-weight: 400;
  font-size: clamp(var(--q-title-min), 5vw, var(--q-title-max));
  line-height: 1.15;
  margin: 0 0 8px 0;
  text-align: center;
}

.sub {
  font-family: var(--q-font-body);
  color: var(--q-color-muted);
  font-size: 17px !important;
  font-weight: 200;
  text-align: center;
  padding-bottom: 50px;
}

.signin-page .sub {
  font-size: 17px !important;
  font-weight: 200;
}

/* =========================================
   BUTTON ROW
   ========================================= */

.auth-page .d-grid {
  /* 2026-02-16 — Purpose: ensure CTA + supporting text stack vertically on all breakpoints.
     Previously this was a horizontal flex row, which made the primary button appear
     left-shifted on desktop/tablet when footer text sat beside it. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: var(--auth-content-max);
  margin: 0 auto;
  padding: 0 var(--auth-side-pad);
}


.auth-page .d-grid .btn,
.auth-page .d-grid .btn-google {
  width: 100%;
  max-width: 400px;
  min-width: 20rem;
}

.btn,
.btn-google {
  min-width: 0;
  max-width: 400px;
  width: 100%;
  height: 45px;
  border-radius: var(--q-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--q-btn-google-bg);
  color: var(--q-btn-white-text);
  box-shadow: none;
}

.btn:hover:not(:disabled) {
  background-color: var(--q-color-hover);
  transition: background-color 0.25s ease;
}

.btn-google:disabled,
.btn-google[disabled] {
  background: var(--q-btn-google-disabled);
  color: #fff;
  cursor: not-allowed;
  box-shadow: none;
  border: 0px;
}


/* =========================================
   SIGNUP LEGAL NAME FIELDS
   ========================================= */

/* 2026-05-31 — Purpose: style required signup legal-name fields without affecting signin or other auth pages. */
.auth-name-fields {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 2026-05-31 — Purpose: keep each legal-name label and input grouped for accessible validation. */
.auth-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

/* 2026-05-31 — Purpose: make legal-name labels readable while matching Qinta auth typography. */
.auth-field label {
  color: var(--q-color-text);
  font-size: 14px;
  font-weight: 600;
}

/* 2026-05-31 — Purpose: match rounded auth controls with a clear focus state for keyboard users. */
.auth-field input {
  width: 100%;
  height: 45px;
  border: 1px solid var(--q-color-border);
  border-radius: var(--q-radius);
  background: #ffffff;
  color: var(--q-color-text);
  font-family: var(--q-font-body);
  font-size: 16px;
  padding: 0 18px;
  outline: none;
}

/* 2026-05-31 — Purpose: use the Qinta green token as the single focus color source for signup legal-name fields. */
.auth-field input:focus {
  border-color: var(--q-primary);
  box-shadow: 0 0 0 3px rgba(102, 211, 132, 0.18);
}

/* 2026-05-31 — Purpose: show a compact accessible error when required legal names are missing. */
.auth-field-error {
  margin: 0;
  color: #b42318;
  font-size: var(--q-fine-print);
  line-height: 1.35;
  text-align: left;
}

/* 2026-05-31 — Purpose: visually mark invalid legal-name inputs without introducing duplicate validation styles. */
.auth-field input.is-invalid {
  border-color: #b42318;
}

/* 2026-05-31 — Purpose: make the existing-account route explicit, green, and underlined per approved onboarding UX. */
.footer a.auth-switch-link {
  color: var(--q-primary);
  text-decoration: underline;
  font-weight: 600;
}

.footer a.auth-switch-link:hover {
  color: var(--q-primary);
  text-decoration-thickness: 2px;
}

/* =========================================
   FOOTER
   ========================================= */

.footer {
  color: var(--q-color-muted);
  font-size: var(--q-fine-print);
  margin-top: 10px !important;
  font-family: var(--q-font-body);
}

.footer a {
  color: var(--q-primary);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 480px) {
  h1 {
    font-size: var(--q-title-min);
  }

  .auth-page .d-grid {
    padding: 0 var(--auth-side-pad-mobile);
  }

  /* Reduce upward shift slightly on small screens */
  .auth-page main {
    transform: translateY(-2%);
  }
}


/* Center the main CTA block (Google button + legal text) on desktop/tablet */
@media (min-width: 641px) {
  .d-grid.gap-3 {
    display: flex !important;          /* override Bootstrap grid */
    flex-direction: column;
    align-items: center;               /* centers children */
    justify-content: center;
  }

  .d-grid.gap-3 > * {
    margin-left: auto;
    margin-right: auto;                /* forces true centering even if child has width */
  }

  .d-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }
  .d-grid > * { margin-left: auto; margin-right: auto; }
}