/* =============================================================
   ShieldPay — Authentication (sign in / sign up)
   Mirrors the landing page language: obsidian black, Kenyan gold,
   white + grey neutrals, DM Sans with Instrument Serif accents.
   Loaded only by templates/account/login.html + signup.html.
   ============================================================= */

/* ── TOKENS ─────────────────────────────────────────────────── */
.auth-shell {
  --ink:        #09090B;
  --ink-90:     #111113;
  --ink-80:     #18181B;
  --gold:       #C9993A;
  --gold-light: #E8C06A;
  --gold-pale:  rgba(201,153,58,0.10);
  --surface:    #FAFAF9;
  --surface-2:  #F4F3F0;
  --field:      #FFFFFF;
  --border:     #E4E4E7;
  --text:       #09090B;
  --text-soft:  #52525B;
  --text-muted: #A1A1AA;
  --danger:     #DC2626;
  --danger-bg:  rgba(220,38,38,0.07);
  --danger-bd:  rgba(220,38,38,0.25);
  --serif:      'Instrument Serif', Georgia, serif;
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --r-sm:       8px;
  --r-md:       14px;
  --r-lg:       24px;
  --r-pill:     100px;
}

[data-theme="dark"] .auth-shell {
  --surface:    #09090B;
  --surface-2:  #111113;
  --field:      #131316;
  --border:     rgba(255,255,255,0.10);
  --text:       #FAFAF9;
  --text-soft:  #A1A1AA;
  --text-muted: #71717A;
  --danger:     #F87171;
  --danger-bg:  rgba(248,113,113,0.10);
  --danger-bd:  rgba(248,113,113,0.28);
}

/* This sheet only ships on the auth pages, so it may reclaim the dark
   app-chrome background inherited from base.html. base.html targets the
   body's inline colours with `[data-theme="light"] [style*="..."]` rules
   flagged `!important`, so the repeated attribute selector below is needed
   to out-rank them. */
html[data-theme][data-theme],
html[data-theme][data-theme] body {
  background: #FAFAF9 !important;
  color: #09090B !important;
}
html[data-theme="dark"][data-theme],
html[data-theme="dark"][data-theme] body {
  background: #09090B !important;
  color: #FAFAF9 !important;
}

/* The pages built on account/base_auth.html are standalone documents, so they
   never receive the global reset that base.html applies to the rest of the
   app. Without border-box every padded field renders 34px wider than its
   container (horizontal padding + borders) and pushes a 360px viewport
   sideways. Scoped to the auth shell so it cannot reach anything else; the
   value matches what base.html already gave login/signup, so those pages are
   unchanged. */
body { margin: 0; }
.auth-shell,
.auth-shell *,
.auth-shell *::before,
.auth-shell *::after { box-sizing: border-box; }

/* ── SHELL ──────────────────────────────────────────────────── */
.auth-shell {
  display: flex;
  min-height: 100vh;
  background: var(--surface);
  color: var(--text);
  letter-spacing: -0.005em;
}

/* ── BRAND PANEL (always obsidian, like the hero) ───────────── */
.auth-brand {
  display: none;
  position: relative;
  width: 46%;
  max-width: 620px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--ink);
  padding: 56px 56px 48px;
  color: #fff;
  border-right: 1px solid rgba(255,255,255,0.10);
}
/* beats base.html's `[data-theme="light"] aside { ... !important }` */
[data-theme] .auth-brand {
  background: var(--ink) !important;
  border-right-color: rgba(255,255,255,0.10) !important;
}
.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(201,153,58,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,153,58,0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}
.auth-brand::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -30%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,153,58,0.16), transparent 68%);
  pointer-events: none;
}
.auth-rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent,
    rgba(201,153,58,0.40) 30%,
    rgba(201,153,58,0.60) 60%,
    transparent);
  animation: auth-rail-pulse 4s ease-in-out infinite;
  pointer-events: none;
}
.auth-rail:nth-of-type(1) { left: 28%; animation-delay: -1.3s; }
.auth-rail:nth-of-type(2) { left: 64%; animation-delay: -2.6s; }
@keyframes auth-rail-pulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 1; }
}
.auth-brand-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: calc(100vh - 104px);
}

.auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  text-decoration: none;
}
.auth-logo img { width: 30px; height: 30px; }
.auth-logo span { line-height: 1; }

.auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201,153,58,0.12);
  border: 1px solid rgba(201,153,58,0.25);
  border-radius: var(--r-pill);
  padding: 6px 14px;
  margin-bottom: 26px;
}
.auth-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: auth-dot-blink 2s ease infinite;
}
@keyframes auth-dot-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.auth-brand-title {
  font-size: clamp(2.1rem, 3vw, 2.9rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}
.auth-brand-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
}
.auth-brand-copy {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 420px;
  margin-bottom: 36px;
}

.auth-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.auth-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.72);
}
.auth-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(201,153,58,0.14);
  border: 1px solid rgba(201,153,58,0.28);
}
.auth-check svg { width: 10px; height: 10px; stroke: var(--gold); fill: none; stroke-width: 2.6; }

.auth-quote {
  border-left: 2px solid rgba(201,153,58,0.5);
  padding-left: 18px;
  margin-top: 40px;
}
.auth-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.86);
  margin-bottom: 10px;
}
.auth-quote cite {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.34);
}

.auth-rails-note {
  margin-top: 40px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.24);
}

/* ── FORM PANEL ─────────────────────────────────────────────── */
.auth-main {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px 56px;
  background: var(--surface);
}
/* beats base.html's `[data-theme="light"] main { ... !important }` */
[data-theme] .auth-main { background: var(--surface) !important; }
.auth-card {
  width: 100%;
  max-width: 400px;
}
.auth-card--wide { max-width: 460px; }

.auth-topbar {
  position: absolute;
  top: 22px;
  right: 24px;
  left: 24px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.auth-back:hover { color: var(--gold); }
.auth-back svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.auth-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.auth-theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
.auth-theme-toggle .icon-sun  { display: none; }
.auth-theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .auth-theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .auth-theme-toggle .icon-moon { display: none; }

/* Logo shown above the form on small screens */
.auth-mobile-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 32px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
}
.auth-mobile-logo img { width: 28px; height: 28px; }

.auth-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text);
  margin-bottom: 10px;
}
.auth-title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}
.auth-sub {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 32px;
}

/* ── FIELDS ─────────────────────────────────────────────────── */
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-field { display: block; }
.auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.auth-shell .auth-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft) !important;
  margin-bottom: 8px;
}
.auth-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.auth-label-row .auth-label { margin-bottom: 8px; }

/* The `.auth-form input[...]` selectors below cover the widgets allauth
   renders itself, which carry no class of their own. Styling them here rather
   than tagging them with JavaScript means they are correct on first paint and
   still correct with scripting disabled. */
.auth-shell .auth-input,
.auth-shell .auth-form input[type="text"],
.auth-shell .auth-form input[type="email"],
.auth-shell .auth-form input[type="password"] {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.auth-shell .auth-input::placeholder,
.auth-shell .auth-form input[type="text"]::placeholder,
.auth-shell .auth-form input[type="email"]::placeholder,
.auth-shell .auth-form input[type="password"]::placeholder { color: var(--text-muted); }
.auth-shell .auth-input:focus,
.auth-shell .auth-form input[type="text"]:focus,
.auth-shell .auth-form input[type="email"]:focus,
.auth-shell .auth-form input[type="password"]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,153,58,0.14);
}
.auth-shell .auth-input:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--field) inset;
  caret-color: var(--text);
}

/* Password reveal button (markup + JS live in base.html) */
.auth-shell .pw-wrapper { position: relative; }
.auth-shell .pw-wrapper .auth-input { padding-right: 46px; }
.auth-shell .pw-toggle {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.auth-shell .pw-toggle:hover { color: var(--gold); }

.auth-link {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  transition: opacity 0.2s var(--ease);
}
.auth-link:hover { opacity: 0.78; text-decoration: underline; text-underline-offset: 3px; }

.auth-error {
  display: block;
  margin-top: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--danger);
}
.auth-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid var(--danger-bd);
  border-radius: var(--r-md);
}
.auth-alert svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 1px; stroke: currentColor; fill: none; stroke-width: 2; }

.auth-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
}
.auth-check-row input {
  width: 15px;
  height: 15px;
  accent-color: var(--gold);
  cursor: pointer;
}
.auth-check-row span { font-size: 13px; color: var(--text-soft); }

/* ── CONSENT CHECKBOXES ──────────────────────────────────────── */
/* .auth-check-row centres its label, which only reads correctly on a single
   line. Consent labels wrap and carry links, so the box is pinned to the
   first line and the hit target covers the whole label. */
.auth-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  padding: 2px 0;
}
.auth-consent + .auth-consent { margin-top: 14px; }
.auth-consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--gold);
  cursor: pointer;
  flex-shrink: 0;
}
.auth-consent-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
}
.auth-consent-text a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-consent-text a:hover { opacity: 0.8; }
.auth-consent-note {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
/* Required marker; the asterisk alone is not an accessible signal, so the
   input also carries `required` and an explicit error message. */
.auth-consent-req { color: var(--gold); font-weight: 700; }

.auth-consent--error input[type="checkbox"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.auth-consent-group { margin: 2px 0 4px; }

.auth-fineprint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}
.auth-fineprint a {
  color: var(--text-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.auth-fineprint a:hover { color: var(--gold); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.auth-shell .auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.auth-shell .auth-btn-gold {
  background: var(--gold);
  /* Ink, not off-white: #FAFAF9 on this gold is 2.48:1. The :hover below was
     already dark, so only the rest state was failing. */
  color: var(--ink);
}
.auth-shell .auth-btn-gold:hover {
  background: var(--gold-light);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(201,153,58,0.30);
}
.auth-shell .auth-btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.auth-shell .auth-btn-outline:hover {
  border-color: var(--gold);
  background: var(--surface-2);
}

/* ── DIVIDER + FOOTER ───────────────────────────────────────── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-foot {
  margin-top: 28px;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-soft);
}
.auth-foot a {
  font-weight: 700;
  color: var(--gold);
  text-decoration: none;
}
.auth-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

.auth-trust {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.auth-trust span { display: inline-flex; align-items: center; gap: 7px; }
.auth-trust span::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .auth-brand { display: block; }
  .auth-mobile-logo { display: none; }
  .auth-main { padding: 72px 48px 56px; }
  .auth-topbar { top: 26px; right: 40px; left: 40px; }
}
@media (max-width: 480px) {
  .auth-main { padding: 68px 20px 44px; }
  .auth-title { font-size: 1.75rem; }
  .auth-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-rail,
  .auth-eyebrow-dot { animation: none; }
  .auth-shell .auth-btn-gold:hover { transform: none; }
}


/* =============================================================
   SHARED ALLAUTH PAGES
   Everything below serves templates/account/base_auth.html — the
   provider hand-off, third-party signup, email management, password
   change, re-authentication and the various status screens that
   previously fell through to allauth's own bare layout.
   ============================================================= */

/* The sheet used to inherit its sans face from base.html's body rule. The
   pages built on base_auth.html are standalone documents, so state it here
   and keep the whole sheet self-contained. This is the same face those pages
   already rendered in, so nothing changes for login/signup. */
.auth-shell {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── STATUS ICON ─────────────────────────────────────────────── */
.auth-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--gold-pale);
  border: 1px solid rgba(201,153,58,0.22);
  color: var(--gold);
}
.auth-icon svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 2; }
.auth-icon--danger {
  background: var(--danger-bg);
  border-color: var(--danger-bd);
  color: var(--danger);
}
.auth-icon--ok {
  background: rgba(22,163,74,0.09);
  border-color: rgba(22,163,74,0.24);
  color: #16A34A;
}
[data-theme="dark"] .auth-shell .auth-icon--ok { color: #4ADE80; }

/* Success variant of the existing alert. */
.auth-shell .auth-alert--ok {
  background: rgba(22,163,74,0.08);
  border-color: rgba(22,163,74,0.24);
  color: #15803D;
}
[data-theme="dark"] .auth-shell .auth-alert--ok { color: #4ADE80; }

/* ── PROVIDER HAND-OFF ───────────────────────────────────────── */
/* The Google button is a real submit button inside a POST form (allauth 65
   refuses provider GETs), so it must sit flush like the anchor version did. */
.auth-provider-form { display: block; width: 100%; }
.auth-shell .auth-provider-form .auth-btn { width: 100%; }

.auth-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 22px;
}
.auth-provider-chip svg { width: 17px; height: 17px; }

/* ── READ-ONLY DETAIL ROWS ───────────────────────────────────── */
.auth-readonly {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* ── EMAIL / CONNECTION LISTS ────────────────────────────────── */
.auth-items {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.auth-items li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
}
.auth-items li + li { border-top: 1px solid var(--border); }
.auth-items input[type="radio"] { accent-color: var(--gold); flex-shrink: 0; }
.auth-item-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.auth-item-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.auth-item-meta { display: flex; flex-wrap: wrap; gap: 6px; }

.auth-tag {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-3, rgba(0,0,0,0.05));
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.auth-tag--ok {
  background: rgba(22,163,74,0.10);
  border-color: rgba(22,163,74,0.24);
  color: #15803D;
}
[data-theme="dark"] .auth-shell .auth-tag--ok { color: #4ADE80; }
.auth-tag--warn {
  background: var(--danger-bg);
  border-color: var(--danger-bd);
  color: var(--danger);
}

/* ── BUTTON ROW ──────────────────────────────────────────────── */
.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.auth-shell .auth-actions .auth-btn { flex: 1 1 160px; }

.auth-shell .auth-btn-quiet {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
}
.auth-shell .auth-btn-quiet:hover { background: var(--surface-2); color: var(--text); }

.auth-shell .auth-btn-danger {
  background: transparent;
  color: var(--danger);
  border: 1px solid var(--danger-bd);
}
.auth-shell .auth-btn-danger:hover { background: var(--danger-bg); }

/* ── MISC PROSE ──────────────────────────────────────────────── */
.auth-body-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
  margin-bottom: 20px;
}
.auth-body-text:last-child { margin-bottom: 0; }
.auth-body-text strong { color: var(--text); font-weight: 600; }

.auth-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 26px 0 12px;
}
.auth-section-title:first-child { margin-top: 0; }

@media (max-width: 480px) {
  .auth-shell .auth-actions .auth-btn { flex: 1 1 100%; }
}

/* ── ALLAUTH FALLBACK PAGES ─────────────────────────────────────
   Styles for allauth pages that have no hand-written override in
   templates/account/ and are rendered through templates/allauth/layouts/
   base.html.

   Those pages build their body from allauth's element tag set, which emits
   completely unclassed h1, p, form, label, input and button. Before this they
   inherited nothing and rendered as browser defaults: Times New Roman on
   white with purple underlined links.

   Everything here is scoped to .allauth-default, which only the layout
   override emits. Hand-written templates bring their own .auth-* markup and
   must not be restyled from under themselves, so they never match these
   rules. Element selectors rather than classes because the markup comes from
   an upstream package we do not control; a future allauth release that adds a
   page gets the palette for free.
   ============================================================== */
.auth-shell .allauth-default h1 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0 0 10px;
}
.auth-shell .allauth-default h2 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 28px 0 12px;
}
.auth-shell .allauth-default p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0 0 16px;
}
.auth-shell .allauth-default p strong { color: var(--text); font-weight: 600; }
.auth-shell .allauth-default a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
.auth-shell .allauth-default a:hover { text-decoration: underline; }

.auth-shell .allauth-default form { margin: 22px 0 0; }

/* allauth wraps each field in a bare <p>, so the usual .auth-field spacing
   does not apply. */
.auth-shell .allauth-default form p { margin: 0 0 18px; }

.auth-shell .allauth-default label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 8px;
}
.auth-shell .allauth-default input[type="text"],
.auth-shell .allauth-default input[type="email"],
.auth-shell .allauth-default input[type="password"],
.auth-shell .allauth-default input[type="tel"],
.auth-shell .allauth-default input[type="number"],
.auth-shell .allauth-default select,
.auth-shell .allauth-default textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  outline: none;
  -webkit-appearance: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.auth-shell .allauth-default input:focus,
.auth-shell .allauth-default select:focus,
.auth-shell .allauth-default textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-pale);
}
.auth-shell .allauth-default input::placeholder { color: var(--text-muted); }

/* Checkboxes and radios must not be stretched to full width by the rule
   above, so they are matched separately. */
.auth-shell .allauth-default input[type="checkbox"],
.auth-shell .allauth-default input[type="radio"] {
  width: auto;
  margin-right: 8px;
  accent-color: var(--gold);
}

.auth-shell .allauth-default button,
.auth-shell .allauth-default a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 4px;
  padding: 14px 26px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.auth-shell .allauth-default button:hover,
.auth-shell .allauth-default a.button:hover {
  background: var(--surface-2);
  color: var(--text);
}
/* The submit is the page's primary action; anything else is secondary. */
.auth-shell .allauth-default button[type="submit"] {
  background: var(--gold);
  color: #FAFAF9;
  border-color: transparent;
}
.auth-shell .allauth-default button[type="submit"]:hover {
  background: var(--gold-light);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(201,153,58,0.30);
}

.auth-shell .allauth-default ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.auth-shell .allauth-default li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.auth-shell .allauth-default li:last-child { border-bottom: 0; }

.auth-shell .allauth-default hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 26px 0;
}

.auth-shell .allauth-default table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--text-soft);
}
.auth-shell .allauth-default th,
.auth-shell .allauth-default td {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.auth-shell .allauth-default th { color: var(--text); font-weight: 700; }