/* ============================================================
   CASH IN FLASH — AUTH PAGES (login / find-account / reset)
   Shared app-style design system: top bar, two-column split
   (form left, "Fast cash. Simple process." promo right),
   form cards, buttons, secure strip, footer + mobile tabbar.
   Desktop = 2 columns; mobile = stacked.
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
.auth-body {
  margin: 0; padding: 0; min-height: 100vh;
  display: flex; flex-direction: column;
  background: #f8f9fb; color: #1a1a2e;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.auth-body a { color: inherit; text-decoration: none; }

/* ---------- Top bar ---------- */
.auth-top {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 20px clamp(18px, 5vw, 64px);
}
.auth-top .auth-avatar { position: absolute; right: clamp(18px, 5vw, 64px); top: 50%; transform: translateY(-50%); }
.auth-top-logo img { display: block; height: 30px; width: auto; }
.auth-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: #16a34a; display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(22,163,74,.28);
}

/* ---------- Layout shell ---------- */
.auth-main { flex: 1 1 auto; width: 100%; }
.auth-wrap {
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(8px, 3vw, 40px) clamp(18px, 5vw, 64px) 40px;
}
.auth-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
/* Grid children must be allowed to shrink below their content's min-content,
   otherwise the promo card + feature row overflow the viewport on mobile
   (the "zoomed-in / cut off on the right" bug). */
.auth-grid > * { min-width: 0; }

/* ---------- Left column (form) ---------- */
.auth-welcome { margin: 0; font-size: clamp(2rem, 1.4rem + 3vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.04; color: #0f1729; }
.auth-sub { margin: 12px 0 0; font-size: clamp(.95rem, .9rem + .3vw, 1.06rem); color: #5b6776; line-height: 1.5; }

/* Form card (login / reset): one card, icon + label-over-input rows. */
/* On mobile .auth-card is a transparent wrapper: the fields live in their own
   white card and the action buttons sit below it (outside the card). On
   desktop the wrapper becomes the white card so buttons sit inside it. */
.auth-card { margin: 26px 0 0; }
.auth-fields { background: #fff; border: 1px solid #e7ecf1; border-radius: 18px; padding: 6px 20px; box-shadow: 0 2px 6px rgba(16,24,40,.04); }
.auth-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.auth-actions .auth-btn { margin: 0; }
.auth-field { display: flex; align-items: center; gap: 16px; padding: 18px 0; }
.auth-field + .auth-field { border-top: 1px solid #eef1f4; }
.auth-field-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.auth-field-main label { font-size: .98rem; font-weight: 700; color: #1a1a2e; }
.auth-field-main input {
  width: 100%; border: none; outline: none; background: transparent; padding: 0;
  font-family: inherit; font-size: 1rem; color: #1a1a2e;
}
.auth-field-main input::placeholder { color: #9aa6b2; font-weight: 400; }

/* Small right-aligned link inside a field row (e.g. "Forgot email?"). */
.auth-field-link { flex: 0 0 auto; align-self: center; font-size: .85rem; font-weight: 600; color: #16a34a; white-space: nowrap; }
.auth-field-link:hover { text-decoration: underline; }

/* Field icon chip (pale-green circle, green glyph). */
.auth-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: #e9f7ef; color: #0E8741; display: grid; place-items: center; }
.auth-ic svg { width: 22px; height: 22px; }
.auth-ic--sm { width: 38px; height: 38px; }
.auth-ic--sm svg { width: 19px; height: 19px; }

/* Password show/hide toggle. */
.auth-eye { flex: 0 0 auto; background: none; border: none; padding: 6px; margin: 0; cursor: pointer; color: #7b8694; display: grid; place-items: center; }
.auth-eye:hover { color: #1a1a2e; }
/* Eye toggle: open eye when the password is hidden, slashed eye when it's
   shown. (portal.js's own injected eye is opted out via data-no-eye.) */
.auth-eye .eye-on { display: block; }
.auth-eye .eye-off { display: none; }
.auth-eye.is-on .eye-on { display: none; }
.auth-eye.is-on .eye-off { display: block; }

/* Hint line under a field (e.g. password rules). */
.auth-hint { margin: 0 0 14px; padding: 0 2px; font-size: .82rem; color: #6b7785; line-height: 1.45; }
.auth-card .auth-hint { padding: 0 0 14px; margin: -6px 0 0; border-top: 1px solid #eef1f4; padding-top: 12px; }

/* Standalone bordered inputs (find-account): label above + boxed input. */
.auth-ifield { margin: 0 0 18px; }
.auth-ifield > label { display: block; font-size: .92rem; font-weight: 700; color: #1a1a2e; margin: 0 0 8px; }
.auth-ifield .opt { color: #8a94a1; font-weight: 400; }
.auth-inputbox {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  padding: 7px 14px 7px 8px; transition: border-color .15s ease, box-shadow .15s ease;
}
.auth-inputbox:focus-within { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.12); }
.auth-inputbox input {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  font-family: inherit; font-size: 1rem; color: #1a1a2e; padding: 8px 0;
}
.auth-inputbox input::placeholder { color: #9aa6b2; }

/* Remember + forgot row. */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid #eef1f4; }
.auth-remember { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: #344054; cursor: pointer; user-select: none; }
.auth-remember input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #16a34a; cursor: pointer; }
.auth-forgot { font-size: .95rem; font-weight: 600; color: #16a34a; }
.auth-forgot:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.auth-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 12px 0 0; padding: 16px 20px;
  border-radius: 12px; font-family: inherit; font-size: 1.02rem; font-weight: 700;
  cursor: pointer; border: 1.5px solid transparent; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, transform .04s ease, box-shadow .15s ease;
}
.auth-btn:active { transform: translateY(1px); }
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-btn--primary { background: #16a34a; color: #fff; box-shadow: 0 8px 20px rgba(22,163,74,.22); }
.auth-btn--primary:hover:not(:disabled) { background: #128a3e; }
.auth-btn--ghost { background: #fff; color: #16a34a; border-color: #8fd3ab; }
.auth-btn--ghost:hover { background: #f3faf6; border-color: #16a34a; }
/* Anchor-tag buttons: `.auth-body a { color: inherit }` (0,1,1) otherwise
   beats `.auth-btn--*` (0,1,0) and renders the label dark (e.g. the modal's
   "Apply Now"). Restore the intended button text colors for <a> buttons. */
.auth-body a.auth-btn--primary { color: #fff; }
.auth-body a.auth-btn--ghost { color: #16a34a; }

/* ---------- Secure strip ---------- */
.auth-secure { margin: 22px 0 0; text-align: center; }
.auth-secure-line { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: #1a2b1f; }
.auth-secure-line svg { color: #16a34a; }
.auth-secure-sub { margin: 3px 0 0; font-size: .9rem; color: #7b8694; }

/* Inline error / banner. */
.auth-error { margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: #fde7e7; border: 1px solid #f4c4c4; color: #8a1c1c; font-size: .9rem; line-height: 1.45; }
.auth-banner { margin: 0 0 18px; padding: 12px 14px; border-radius: 10px; background: #fff4e5; border: 1px solid #f3c98a; color: #7a4d00; font-size: .92rem; line-height: 1.5; }
.auth-aux { margin: 18px 0 0; text-align: center; font-size: .95rem; color: #475467; }
.auth-aux a { color: #16a34a; font-weight: 700; }
.auth-aux a:hover { text-decoration: underline; }

/* ---------- Right column: promo ---------- */
/* The promo is a single uploaded image (it already contains the heading,
   illustration and the Approved / Money / Good-credit row), so just show it. */
.auth-promo { align-self: start; }
.auth-promo-art { display: block; width: 100%; }
.auth-promo-art img { display: block; width: 100%; height: auto; border: 0; }

/* ---------- Footer (desktop) ---------- */
.auth-footer { border-top: 1px solid #e9edf1; }
.auth-footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 20px clamp(18px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.auth-footer-copy { margin: 0; font-size: .86rem; color: #8a94a1; }
.auth-footer-links { display: flex; gap: 28px; }
.auth-footer-links a { font-size: .86rem; color: #6b7785; }
.auth-footer-links a:hover { color: #16a34a; }

/* ---------- Bottom tab bar (mobile, login + find-account) ---------- */
.auth-tabbar {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; background: #fff; border-top: 1px solid #e8edf2;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.auth-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; color: #8a94a1; font-size: .68rem; font-weight: 600; background: none; border: none; font-family: inherit; cursor: pointer; }
.auth-tab svg { width: 23px; height: 23px; }
.auth-tab.is-active { color: #16a34a; }

/* ---------- Visibility helpers ---------- */
.auth-desktop { display: none; }

/* ============================================================
   DESKTOP ( >= 900px )
   ============================================================ */
@media (min-width: 900px) {
  .auth-mobile { display: none !important; }
  .auth-desktop { display: block; }
  .auth-top { justify-content: space-between; }
  .auth-top .auth-avatar { position: static; transform: none; }
  .auth-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(28px, 3vw, 52px); padding-top: 18px; }
  .auth-left { max-width: 560px; }
  /* Desktop: the wrapper becomes the white card; buttons sit inside it with
     comfortable bottom padding. Secure strip stays centered (matches mockup). */
  .auth-card { background: #fff; border: 1px solid #e7ecf1; border-radius: 18px; padding: 8px 26px 24px; box-shadow: 0 2px 6px rgba(16,24,40,.04); }
  .auth-fields { background: none; border: none; padding: 0; box-shadow: none; }
  .auth-actions { margin-top: 6px; }
  /* Promo is a full-width image; no desktop card overrides needed. */
}

/* On mobile the desktop footer is hidden (tabbar/secure strip take over);
   on desktop the tabbar is hidden. */
@media (max-width: 899px) {
  .auth-footer { display: none; }
  /* Breathing room between the site header and the page heading on mobile. */
  .auth-wrap { padding-top: 26px; }
  /* Secure strip sits below the promo on mobile; the grid gap spaces it. */
  .auth-secure.auth-mobile { margin-top: 0; }
  /* Compact the 3-up feature row so it fits narrow phones without overflow. */
  .auth-features { padding: 12px 2px; margin-top: 12px; }
  .auth-feature { gap: 6px; padding: 2px 5px; }
  .auth-feature-ic { width: 30px; height: 30px; }
  .auth-feature-ic svg { width: 15px; height: 15px; }
  .auth-feature-tx strong { font-size: clamp(.66rem, .52rem + .7vw, .84rem); }
  .auth-feature-tx span { font-size: clamp(.58rem, .46rem + .6vw, .74rem); }
}
@media (min-width: 900px) {
  .auth-tabbar { display: none; }
}

/* ---------- Find-account / reset: big card wrapping heading + form ---------- */
.auth-cardbig { background: #fff; border: 1px solid #e7ecf1; border-radius: 20px; padding: clamp(22px, 4vw, 40px); box-shadow: 0 2px 8px rgba(16,24,40,.04); }
.auth-cardbig + .auth-cardbig { margin-top: 18px; }
.auth-cardbig + .auth-cardbig .auth-welcome { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); }
/* Desktop: frame the reset-password email field with a top + bottom line. */
@media (min-width: 900px) {
  #requestForm .auth-field { border-top: 1px solid #eef1f4; border-bottom: 1px solid #eef1f4; }
}
.auth-cardbig .auth-welcome { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); }
.auth-cardbig .auth-sub { margin-bottom: 22px; }
.auth-cardbig .auth-card { border: none; box-shadow: none; padding: 0; margin-top: 0; }

/* Centered secure strip placed below the grid (stays centered on desktop too). */
.auth-secure.auth-secure--center { text-align: center; margin-top: 26px; }

/* Back-to-sign-in link (reset). */
.auth-backrow { margin: 18px 0 0; text-align: center; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; color: #16a34a; font-weight: 700; font-size: 1rem; }
.auth-back:hover { text-decoration: underline; }

/* ---------- Start page: big "choice" cards ---------- */
.auth-reason { margin: 0 0 18px; padding: 12px 16px; border-radius: 12px; background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.24); color: #0E5C30; font-size: .95rem; line-height: 1.5; }
.auth-choices { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 0; }
.auth-choice {
  display: flex; align-items: center; gap: 16px; padding: 18px 20px;
  border-radius: 16px; text-decoration: none; cursor: pointer;
  border: 1.5px solid transparent; -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.auth-choice:active { transform: translateY(1px); }
.auth-choice--primary { background: #16a34a; color: #fff; box-shadow: 0 8px 20px rgba(22,163,74,.22); }
.auth-choice--primary:hover { background: #128a3e; }
.auth-choice--ghost { background: #fff; color: #1a1a2e; border-color: #e2e8f0; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.auth-choice--ghost:hover { border-color: #16a34a; background: #f7faf8; }
.auth-choice-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; }
.auth-choice--primary .auth-choice-ic { background: rgba(255,255,255,.18); color: #fff; }
.auth-choice--ghost .auth-choice-ic { background: #e9f7ef; color: #16a34a; }
.auth-choice-ic svg { width: 23px; height: 23px; }
.auth-choice-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.auth-choice-tx strong { font-size: 1.04rem; font-weight: 700; letter-spacing: -.01em; }
.auth-choice-tx span { font-size: .9rem; }
.auth-choice--primary .auth-choice-tx span { color: rgba(255,255,255,.9); }
.auth-choice--ghost .auth-choice-tx span { color: #6b7785; }
.auth-choice-arrow { flex: 0 0 auto; }
.auth-choice--primary .auth-choice-arrow { color: rgba(255,255,255,.9); }
.auth-choice--ghost .auth-choice-arrow { color: #c2cad3; }

/* ============================================================
   Password field: kill EVERY possible second "eye".
   1) A reveal eye painted as a background-image by portal.css (uses
      !important, so our plain transparent background didn't beat it).
   2) Native browser reveal / autofill buttons (Edge eye, Safari key).
   ============================================================ */
.auth-body input[type="password"] { background-image: none !important; }
.auth-body .auth-field-main input,
.auth-body .auth-inputbox input { background: transparent !important; background-image: none !important; }
.auth-body input::-ms-reveal, .auth-body input::-ms-clear { display: none !important; }
.auth-body input::-webkit-credentials-auto-fill-button,
.auth-body input::-webkit-strong-password-auto-fill-button,
.auth-body input::-webkit-contacts-auto-fill-button {
  visibility: hidden !important; display: none !important; pointer-events: none !important;
  position: absolute !important; right: 0 !important; width: 0 !important; height: 0 !important; margin: 0 !important;
}

/* ============================================================
   Modal (e.g. "account not found" on the find-account flow)
   ============================================================ */
.auth-modal { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-modal[hidden] { display: none; }
.auth-modal-backdrop { position: absolute; inset: 0; background: rgba(16,24,40,.55); }
.auth-modal-card { position: relative; background: #fff; border-radius: 18px; max-width: 400px; width: 100%; padding: 30px 26px 26px; text-align: center; box-shadow: 0 20px 60px rgba(16,24,40,.28); }
.auth-modal-icon { width: 56px; height: 56px; border-radius: 50%; background: #e9f7ef; color: #16a34a; display: grid; place-items: center; margin: 0 auto 16px; }
.auth-modal-icon svg { width: 28px; height: 28px; }
.auth-modal-title { margin: 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: #1a1a2e; }
.auth-modal-text { margin: 8px 0 20px; font-size: .95rem; color: #5b6776; line-height: 1.5; }
.auth-modal-card .auth-btn { margin: 0; }
.auth-modal-dismiss { margin-top: 12px; background: none; border: none; font-family: inherit; font-size: .92rem; font-weight: 600; color: #6b7785; cursor: pointer; }
.auth-modal-dismiss:hover { color: #1a1a2e; }