/* 2026-07-18: Google Fonts loaded via <link> in HTML (non-blocking) — @import removed */

/* Qinta auth stylesheet (public pages) */

:root {

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

  /* 2026-06-19 — Purpose: align public auth pages to the same Geist typography used in the app. */
  --q-font-body: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --q-font-heading: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --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;
  /* 2026-07-06 — Purpose: separate auth input radius from pill buttons so field styling can match the approved mockup. */
  --q-field-radius: 28px;
  --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: 25px;
  --q-subtitle: 20px;
  --q-message: 16px;
  --q-message-REM: 0.95rem;
  --q-fine-print: 13px;

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

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

/* 2026-07-06 — Purpose: prevent input padding/borders from pushing signup fields outside mobile gutters. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2026-07-18: set bg on html directly so colour is instant on navigation */
html {
  background-color: #fafaf6;
}

html, body {
  width: 100%;
  min-height: 100%;
  height: auto;
  margin: 0;
  background-color: #fafaf6; /* literal value avoids var() resolution delay */
  color: var(--q-color-muted);
  font-family: var(--q-font-body);
  padding: 10px;
  overflow-x: hidden;
}

/* 2026-06-19 — Purpose: keep auth form controls and buttons on Geist without touching icon fonts. */
button, input, select, textarea {
  font-family: var(--q-font-body) !important;
}

/* 2026-06-19 — Purpose: force public auth page text onto Geist while preserving Bootstrap Icons if present. */
:where(body, body *:not(.bi):not([class^="bi-"]):not([class*=" bi-"])) {
  font-family: var(--q-font-body) !important;
}

/* =========================================
   AUTH PAGE LAYOUT
   ========================================= */

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

/* 2026-06-14 — Purpose: keep signin/signup content near the top instead of vertically centered.
   What it does: gives the auth body a consistent, responsive gap below the logo without using script or inline styles. */
.auth-page main {
  width: min(100%, var(--auth-content-max));
  margin: clamp(44px, 7vh, 72px) auto 0;
  transform: none;
  padding-left: var(--auth-side-pad);
  padding-right: var(--auth-side-pad);
}

/* 2026-07-06 — Purpose: override Bootstrap .container gutters with the auth page single source of truth. */
.auth-page main.container {
  max-width: var(--auth-content-max);
}

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

.header {
  margin-bottom: 20px;
}

.header img {
  height: 30px;
}

/* 2026-06-14 — Purpose: use the local green Qinta logo on auth pages in a CSP-safe way.
   What it does: sizes the self-hosted /assets/img/qinta-green-logo.png image without external requests. */
.header img.auth-logo {
  width: 45px;
  height: 45px;
  object-fit: contain;
  align-items: center;
}

/* =========================================
   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: 550;
  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: 15px !important;
  font-weight: 200;
  text-align: center;
  padding-bottom: 50px;
}



/* =========================================
   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;
}


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

.btn,
.btn-google {
  min-width: 0;
  max-width: 400px;
  width: 100%;
  height: 54px;
  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;
}

/* 2026-06-14 — Purpose: replace inline SVG spacing on auth Google buttons with stylesheet-owned spacing.
   What it does: keeps signin/signup pages CSP-safe if inline styles are tightened later. */
.btn-google .google-icon {
  margin-right: 8px;
}

.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: 400;
}

/* =========================================
   ICON-FIELD PATTERN
   2026-07-06 — Purpose: single source of truth for input/select fields with icons inside the field boundary.
   What it does: keeps the Bootstrap icon, placeholder, focus ring, and invalid state aligned for name and address fields.
   ========================================= */
.auth-icon-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  border: 1px solid var(--q-color-border);
  border-radius: var(--q-field-radius);
  background: #ffffff;
  overflow: hidden;
}

/* 2026-07-06 — Purpose: place field icons inside controls at a consistent left inset. */
.auth-icon-field > .bi {
  position: absolute;
  left: 20px;
  z-index: 1;
  color: var(--q-color-border);
  font-size: 21px;
  line-height: 1;
  pointer-events: none;
}

/* 2026-07-06 — Purpose: shared control reset so inputs and selects inherit wrapper border/focus styles. */
.auth-icon-field > input,
.auth-icon-field > select {
  flex: 1;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--q-color-text);
  font-family: var(--q-font-body);
  font-size: 16px;
  padding: 0 18px 0 54px;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

/* 2026-07-06 — Purpose: reserve space for the custom select chevron without overlapping text. */
.auth-icon-field > select {
  padding-right: 44px;
  cursor: pointer;
}

/* 2026-07-06 — Purpose: keep placeholder text light and calm like the approved mockup. */
.auth-icon-field > input::placeholder {
  color: var(--q-color-muted) !important;
  font-size: 14px !important;
  font-weight: 200;
  opacity: 0.8;
}

/* 2026-07-06 — Purpose: mirror placeholder colour for the unselected state option. */
.auth-icon-field > select:invalid,
.auth-icon-field > select option[value=""] {
  color: var(--q-color-muted);
  font-size: 14px;
  font-weight: 200;
  opacity: 0.8;
}

/* 2026-07-06 — Purpose: add a consistent chevron for select fields across browsers. */
.auth-icon-field--select::after {
  content: "";
  position: absolute;
  right: 20px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23777a78' stroke-width='1.75' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* 2026-07-06 — Purpose: use Qinta green as the single focus indicator across icon fields. */
.auth-icon-field:focus-within {
  border-color: var(--q-primary);
  box-shadow: 0 0 0 3px rgba(102, 211, 132, 0.18);
}

/* 2026-07-06 — Purpose: invalid state applies to the wrapper because inner controls have no border. */
.auth-icon-field.is-invalid {
  border-color: #b42218ca;
}

/* 2026-05-31 — Purpose: show a compact accessible error when required legal names are missing. */
.auth-field-error {
  margin: 0;
  color: #b42218ca;
  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. */
/* 2026-07-06 — Updated: kept as compatibility for legacy fields; icon-field invalid state is applied to the wrapper. */
.auth-field input.is-invalid {
  border-color: #b42218ca;
}

/* 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: none;
  font-weight: 400;
}

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

/* =========================================
   ADDRESS SECTION
   2026-07-06 — Purpose: group required address fields under a quiet divider without adding a second card/background.
   ========================================= */
.auth-address-section {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 2026-07-06 — Purpose: visually separates legal name from address while keeping the title subtle. */
.auth-address-divider {
  display: flex;
  align-items: center;
  gap: 22px;
  width: 100%;
  margin: 2px 0 0;
}

.auth-address-divider::before,
.auth-address-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #cfcfcb;
}

.auth-address-divider-label {
  color: var(--q-color-muted) !important;
  opacity: 0.5;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 2026-07-06 — Purpose: state and postal code share a 50/50 row while preserving mobile gutters. */
.auth-state-postal-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 100%;
}

.auth-field--state,
.auth-field--postal {
  flex: 1 1 0;
  min-width: 0;
}

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

.footer {
  color: var(--q-color-muted);
  font-weight: 200 !important;
  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;
}

/* 2026-06-14 — Purpose: replace the signup legal-note inline margin with a reusable auth CSS class.
   What it does: keeps auth page spacing CSP-safe and consistent across environments. */
.auth-legal-note {
  margin-top: 8px !important;
}

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

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

  .auth-page main,
  .auth-page .header {
    padding-left: var(--auth-side-pad-mobile);
    padding-right: var(--auth-side-pad-mobile);
  }

  /* 2026-06-14 — Purpose: keep mobile auth content top-aligned with a smaller logo-to-content gap. */
  .auth-page main {
    margin-top: 36px;
  }

  /* 2026-07-06 — Purpose: keep the 50/50 state/postal row usable on narrow phones. */
  .auth-state-postal-row {
    gap: 14px;
  }
}



/* 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 > *:not(.auth-address-section) {
    margin-left: auto;
    margin-right: auto;                /* forces true centering even if child has width */
  }

  /* 2026-07-06 — Purpose: address section centers as a full-width form group; inner rows keep their own flex layout. */
  .d-grid.gap-3 > .auth-address-section {
    margin-left: auto;
    margin-right: auto;
  }

  .d-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }
  .d-grid > *:not(.auth-address-section) { margin-left: auto; margin-right: auto; }
  .d-grid > .auth-address-section { margin-left: auto; margin-right: auto; }
}


/* =========================================
   SPLIT-SCREEN LAYOUT (desktop + tablet)
   2026-07-08
   Purpose:
   - Show the form on the left and a full-bleed background image on the right
     on desktop (≥1024px) and tablet (≥768px).
   What this does:
   - Adds two wrapper divs to signup.html and signin.html: .auth-split (the
     outer row) and .auth-split__form (left panel). .auth-split__image is the
     right panel carrying signup-background.png.
   - On mobile (< 768px) both wrapper divs are display:block with no styles,
     making them completely transparent — the existing mobile layout is unchanged.
   - body padding is reset to 0 at the breakpoint so the image panel reaches
     the viewport edge. Within .auth-split__form the existing .auth-page main
     margin/padding rules keep the form centred in the left column as before.
   ========================================= */

/* 2026-07-08 — Purpose: image panel is hidden by default (mobile).
   What this does: on screens < 768px the right panel is removed from layout entirely. */
.auth-split__image {
  display: none;
}

/* 2026-07-08 — Purpose: activate split layout on tablet and desktop (≥768px). */
@media (min-width: 768px) {

  /* 2026-07-08 — Purpose: remove body edge padding so the image panel reaches viewport edges.
     What this does: the left panel manages its own internal spacing; body padding is no longer needed. */
  /* 2026-07-08 — Purpose: fix gap at bottom of image panel.
     What this does: setting height: 100% on html and body makes the flex container fill the
     full document height, not just the viewport, so the image panel has no gap at the bottom
     even when the form content is taller than the viewport. */
  html,
  body {
    padding: 0;
    margin: 0;
    height: 100%;
  }

  /* 2026-07-08 — Purpose: switch the auth page from vertical stack to horizontal split.
     What this does: .auth-page becomes a row container at this breakpoint only. */
  .auth-page {
    flex-direction: row;
  }

  /* 2026-07-08 — Purpose: the split row fills the full viewport height.
     What this does: both panels stretch to 100vh so the image always covers the full screen.
     2026-07-08 — Fix: align-items: stretch makes the image panel grow to match the form panel
     height when form content is taller than 100vh, eliminating the bottom gap. */
  .auth-split {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 100vh;
    align-items: stretch;
  }

  /* 2026-07-08 — Purpose: left panel holds the form with internal breathing room.
     What this does: fixed at 55% width, scrollable if content overflows (signup has many fields),
     background matches the page so the form area is visually clean. */
  .auth-split__form {
    flex: 0 0 55%;
    max-width: 55%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 32px 40px 40px;
    overflow-y: auto;
    background: var(--q-color-bg);
  }

  /* 2026-07-08 — Purpose: reduce logo-to-title gap by one third on desktop and tablet only.
     What this does: overrides the global margin-top on main and the header bottom margin so mobile
     spacing is completely untouched. Was: main margin-top clamp(44px,7vh,72px) + header margin-bottom 20px. */
  .auth-split__form .header {
    margin-bottom: 13px;
  }

  .auth-split__form main {
    margin-top: clamp(29px, 4.7vh, 48px);
  }

  /* 2026-07-08 — Purpose: right image panel — full-bleed, decorative.
     What this does: the image panel is a flex child of .auth-split (align-items: stretch),
     so it grows to match the form panel height exactly — no gap at the bottom.
     background-attachment: local keeps the image pinned while the left form scrolls.
     background-size: cover ensures the image fills the panel at any aspect ratio. */
  .auth-split__image {
    display: block;
    flex: 1 1 auto;
    background-image: url('/assets/img/signup-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: local;
  }
}


/* 2026-07-18
   Purpose: make the logo on auth pages clickable — links back to landing page.
   What this does: removes link styling from the logo anchor so it looks
   identical to before (no underline, no colour change, no outline on click). */
.auth-logo-link {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
  cursor: pointer;
}

.auth-logo-link:focus-visible {
  outline: 2px solid #27ca6e;
  outline-offset: 4px;
  border-radius: 6px;
}