/* ═══════════════════════════════════════════════════════════════
   light-card.css — shared shell for single-card utility pages:
   login, forgot-password, set-password, account-deleted,
   confirm-email-change, already-owned, checkout-success,
   404, 500, email-confirmed.

   Loaded via {% block page_css %}. Palette vars and fonts come from
   common.css (loaded first in base.html). This file owns the centered
   card, its text primitives, buttons, form fields, and status states,
   so the whole family stays identical from one source.

   account.css and get-report.css are intentionally left in place: they
   still dress the /account dashboard and the get-report paywall page
   respectively, neither of which belongs to this single-card family.
   ═══════════════════════════════════════════════════════════════ */

/* ── Centered shell ───────────────────────────────────────── */
.lc-wrap {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 80px;
}

.lc-card {
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  text-align: center;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border, #E0E7EB);
  border-radius: 14px;
  padding: 38px 34px;
  box-shadow: 0 8px 30px rgba(27, 58, 75, 0.10);
}
.lc-card + .lc-card { margin-top: 18px; }

/* ── Text primitives ──────────────────────────────────────── */
.lc-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--primary, #1B3A4B);
  margin: 0 0 12px;
  line-height: 1.25;
}

.lc-sub {
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--secondary, #4A7C8F);
  line-height: 1.5;
  margin: 0 0 22px;
}

.lc-note {
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
  font-size: 0.94rem;
  color: var(--text-light, #6B7B85);
  line-height: 1.55;
  margin: 0 0 8px;
}
.lc-note:last-child { margin-bottom: 0; }
.lc-note strong { color: var(--text, #2D3A40); font-weight: 600; }
.lc-note a, .lc-link {
  color: var(--accent, #E97132);
  font-weight: 600;
  text-decoration: none;
}
.lc-note a:hover, .lc-link:hover { text-decoration: underline; }

.lc-muted { font-size: 0.84rem; }
.lc-narrow { max-width: 340px; margin-left: auto; margin-right: auto; }

/* ── Buttons / link-buttons ───────────────────────────────── */
.lc-cta-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
  margin: 20px auto 0;
}

.lc-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  text-decoration: none;
  border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  color: #ffffff;
  background: var(--accent, #E97132);
}
.lc-btn:hover { background: #d4622a; }

.lc-btn--ghost {
  color: var(--primary, #1B3A4B);
  background: #ffffff;
  border-color: var(--border, #E0E7EB);
}
.lc-btn--ghost:hover { background: var(--bg-subtle, #F4F7F9); }

/* ── Form fields ──────────────────────────────────────────── */
.lc-form { margin: 0; }

.lc-field { text-align: left; margin: 0 0 14px; }
.lc-field label {
  display: block;
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--primary, #1B3A4B);
  margin: 0 0 5px;
}

.lc-input,
.lc-field input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body, 'IBM Plex Sans', sans-serif);
  font-size: 0.95rem;
  color: var(--primary, #1B3A4B);
  padding: 11px 13px;
  border: 1.5px solid var(--border, #E0E7EB);
  border-radius: 8px;
  background: #ffffff;
}
.lc-input:focus,
.lc-field input:focus {
  outline: none;
  border-color: var(--secondary, #4A7C8F);
  box-shadow: 0 0 0 3px rgba(74, 124, 143, 0.18);
}

/* ── Notice / error boxes ─────────────────────────────────── */
.lc-notice {
  text-align: left;
  background: var(--bg-subtle, #F4F7F9);
  border: 1px solid var(--border, #E0E7EB);
  border-radius: 8px;
  color: var(--text-light, #6B7B85);
  font-size: 0.9rem;
  line-height: 1.5;
  padding: 13px 15px;
  margin: 0 0 16px;
}

.lc-error {
  text-align: left;
  background: #fdf0ea;
  border: 1px solid var(--accent, #E97132);
  border-radius: 8px;
  color: var(--primary, #1B3A4B);
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 10px 13px;
  margin: 0 0 16px;
}

/* ── Footer note (e.g. login "new here?") ─────────────────── */
.lc-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #E0E7EB);
  font-size: 0.84rem;
  color: var(--text-light, #6B7B85);
  line-height: 1.5;
}
.lc-foot a { color: var(--accent, #E97132); font-weight: 600; text-decoration: none; }
.lc-foot a:hover { text-decoration: underline; }

/* Secondary link row under a form (e.g. "Back to sign in") */
.lc-links { margin-top: 18px; font-size: 0.9rem; }

/* Banked-credits sub-note divider on checkout-success */
.lc-credits {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border, #E0E7EB);
}

/* ── Spinner (already-owned redirect) ─────────────────────── */
.lc-spinner {
  width: 26px;
  height: 26px;
  margin: 16px auto;
  border: 3px solid #e6ecef;
  border-top-color: var(--accent, #E97132);
  border-radius: 50%;
  animation: lc-spin 0.8s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .lc-spinner { animation: none; } }

/* ── Status icon (check / search / alert) ─────────────────── */
.lc-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  display: block;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lc-icon--accent { color: var(--accent, #E97132); stroke: currentColor; }
.lc-icon--muted  { color: var(--muted, #8899A4); stroke: currentColor; }

@media (max-width: 480px) {
  .lc-card { padding: 30px 22px; }
}