/* ═══════════════════════════════════════════════════════
   Vejar Law — Client Portal
   Typography: Playfair Display (headings) · Inter (body)
   Colors: Navy #0f1b36 · Gold #e8a33a · White/Light Gray
   ═══════════════════════════════════════════════════════ */
:root {
  --navy: #0f1b36;
  --navy-mid: #1a2b52;
  --navy-light: #243768;
  --gold: #e8a33a;
  --gold-dark: #c97d1e;
  --gold-pale: #fef8ec;
  --gold-border: rgba(232,163,58,0.3);
  --teal: #0d9488;
  --teal-dark: #0f766e;
  --teal-pale: #f0fdfa;
  --red: #dc2626;
  --red-pale: #fef2f2;
  --green: #16a34a;
  --green-pale: #f0fdf4;
  --bg: #eef1f6;
  --surface: #ffffff;
  --border: #dde3ed;
  --border-light: #eef1f6;
  --text: #1e293b;
  --text-mid: #334155;
  --muted: #64748b;
  --muted-lt: #94a3b8;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-xs: 0 1px 3px rgba(15,27,54,.06);
  --shadow-sm: 0 2px 8px rgba(15,27,54,.08), 0 0 0 1px rgba(15,27,54,.04);
  --shadow-md: 0 8px 24px rgba(15,27,54,.1);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'DM Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

body.cp-body {
  font-family: var(--font-body);
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ──────────────────────────────────────────────
   HEADER
────────────────────────────────────────────── */
.cp-header {
  background: var(--navy);
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.75rem;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 16px rgba(10,18,36,.3);
  gap: 1rem;
}

.cp-brand img {
  height: 38px;
  background: #fff;
  padding: 4px 11px;
  border-radius: 8px;
  display: block;
}

.cp-header-right { display: flex; align-items: center; gap: .55rem; }

.cp-badge {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(232,163,58,.38);
  background: rgba(232,163,58,.07);
  padding: .26rem .72rem;
  border-radius: 999px;
}

.cp-lang, .cp-logout {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  padding: .38rem .78rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
}
.cp-lang:hover, .cp-logout:hover,
.cp-lang:focus-visible, .cp-logout:focus-visible {
  background: rgba(255,255,255,.14);
  border-color: rgba(232,163,58,.5);
  outline: none;
}

/* ──────────────────────────────────────────────
   IMPERSONATION BANNER
────────────────────────────────────────────── */
.cp-impersonation-banner {
  background: #1e2d4f;
  border-bottom: 2px solid var(--gold);
  padding: .6rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
  flex-wrap: wrap;
}
.cp-impersonation-banner strong { font-size: .8rem; color: var(--gold); font-weight: 700; }
.cp-impersonation-banner p { font-size: .75rem; color: rgba(255,255,255,.75); margin-top: .1rem; }
.cp-impersonation-btn {
  background: var(--gold);
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .76rem;
  padding: .42rem .85rem;
  border-radius: 7px;
  cursor: pointer;
  transition: background 130ms;
}
.cp-impersonation-btn:hover { background: var(--gold-dark); }

/* ──────────────────────────────────────────────
   CASE BANNER (below header)
────────────────────────────────────────────── */
.cp-case-banner {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .8rem 1.75rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .65rem 1.75rem;
}

.cp-case-banner-left { display: flex; align-items: center; gap: .8rem; flex: 1; min-width: 0; }

.cp-case-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
}

.cp-case-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .98rem;
  color: var(--navy);
  line-height: 1.2;
}
.cp-case-sub { font-size: .74rem; color: var(--muted); margin-top: .1rem; }

.cp-case-banner-meta { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.cp-case-chip {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-mid);
  white-space: nowrap;
}
.cp-case-chip.chip-form { background: #eef2ff; color: var(--navy-mid); border-color: #c7d2fe; }
.cp-case-chip.chip-active { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.cp-case-chip.chip-complete { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
.cp-case-chip.chip-draft { background: var(--bg); color: var(--muted); border-color: var(--border); }
.cp-case-chip.chip-enc { background: var(--teal-pale); color: var(--teal-dark); border-color: #99f6e4; }
.cp-case-chip.chip-id { background: #fef8ec; color: #92400e; border-color: #fde68a; font-family: 'Outfit', monospace; letter-spacing: .03em; font-weight: 700; }

/* ──────────────────────────────────────────────
   PORTAL BODY LAYOUT
────────────────────────────────────────────── */
.cp-portal-body {
  display: flex;
  min-height: calc(100vh - 62px);
}

/* ──────────────────────────────────────────────
   LEFT SIDEBAR RAIL
────────────────────────────────────────────── */
.cp-tab-rail {
  width: 210px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  position: sticky;
  top: 62px;
  height: calc(100vh - 62px);
  overflow-y: auto;
}

.cp-rail-btn {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .68rem .88rem;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background 130ms, color 130ms;
  white-space: nowrap;
  position: relative;
}
.cp-rail-btn:hover { background: #f4f6fa; color: var(--text-mid); }
.cp-rail-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.cp-rail-btn.active {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(15,27,54,.22);
}
.cp-rail-btn--secure.active { background: var(--teal-dark); }
.cp-rail-btn--forms.active { background: var(--navy); }

.cp-rail-icon { font-size: .85rem; width: 16px; text-align: center; flex-shrink: 0; opacity: .6; }
.cp-rail-btn.active .cp-rail-icon { opacity: 1; }
.cp-rail-label { flex: 1; }
.cp-rail-count {
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  padding: .1rem .38rem;
  border-radius: 999px;
}
.cp-rail-btn:not(.active) .cp-rail-count {
  background: var(--navy);
  color: #fff;
}
.cp-rail-divider { height: 1px; background: var(--border-light); margin: .4rem .88rem; }

/* ──────────────────────────────────────────────
   CONTENT AREA
────────────────────────────────────────────── */
.cp-content-area {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.cp-panel-hidden { display: none !important; }

/* ──────────────────────────────────────────────
   CARDS
────────────────────────────────────────────── */
.cp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.cp-card-head {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.cp-card-head h2 {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
  margin: 0;
}
.cp-card-head p {
  font-size: .76rem;
  color: var(--muted);
  margin-top: .2rem;
  line-height: 1.45;
}
.cp-card-body { padding: 1.1rem 1.25rem; }

/* ──────────────────────────────────────────────
   OVERVIEW — INFO CARDS
────────────────────────────────────────────── */
.cp-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin-bottom: 1.1rem;
}

.cp-info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem;
  box-shadow: var(--shadow-xs);
}
.cp-info-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  margin-bottom: .65rem;
  background: #eef2ff;
}
.cp-info-card-icon.gold { background: #fef8ec; }
.cp-info-card-icon.teal { background: #f0fdfa; }
.cp-info-card h3 {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .28rem;
}
.cp-info-card-val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -.01em;
}
.cp-info-card-sub { font-size: .72rem; color: var(--muted); margin-top: .22rem; line-height: 1.4; }

/* ──────────────────────────────────────────────
   MESSAGES
────────────────────────────────────────────── */
.cp-e2e-notice {
  display: flex;
  align-items: center;
  gap: .45rem;
  background: var(--teal-pale);
  border: 1px solid #99f6e4;
  border-radius: var(--radius-sm);
  padding: .48rem .8rem;
  font-size: .72rem;
  color: var(--teal-dark);
  font-weight: 600;
  margin-bottom: .9rem;
}

.cp-messages-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  max-height: 360px;
  overflow-y: auto;
  padding-right: .15rem;
  margin-bottom: .9rem;
}

.cp-msg-bubble {
  border-radius: 11px;
  padding: .62rem .8rem;
  border: 1px solid var(--border);
  max-width: 86%;
}
.cp-msg-client { background: #eef4ff; align-self: flex-end; border-color: #c7d2fe; }
.cp-msg-staff { background: var(--gold-pale); align-self: flex-start; border-color: #fde68a; }
.cp-msg-bubble header { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .22rem; }
.cp-msg-bubble strong { font-size: .7rem; color: var(--navy); }
.cp-msg-bubble time { font-size: .65rem; color: var(--muted-lt); }
.cp-msg-bubble p { margin: 0; font-size: .8rem; color: var(--text); line-height: 1.45; white-space: pre-wrap; }

.cp-msg-compose { display: flex; flex-direction: column; gap: .45rem; }
.cp-msg-input {
  width: 100%;
  padding: .7rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .85rem;
  outline: none;
  resize: vertical;
  min-height: 76px;
  transition: border-color 160ms;
  background: #fafbfc;
  color: var(--text);
}
.cp-msg-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,163,58,.1); }

.cp-empty-inline { color: var(--muted); font-size: .82rem; padding: .75rem 0; }

/* ──────────────────────────────────────────────
   DOCUMENTS
────────────────────────────────────────────── */
.cp-upload-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; align-items: center; margin-bottom: .4rem; }
.cp-file-input { font-size: .82rem; color: var(--muted); }
.cp-upload-meta { font-size: .74rem; color: var(--muted); margin-bottom: .9rem; }

.cp-files-list { display: flex; flex-direction: column; gap: .45rem; margin-top: .65rem; }
.cp-file-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fafbfd;
}
.cp-file-row-icon { font-size: 1.1rem; flex-shrink: 0; }
.cp-file-row-info { flex: 1; min-width: 0; }
.cp-file-row-name { font-size: .82rem; font-weight: 600; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-file-row-meta { font-size: .68rem; color: var(--muted); margin-top: .1rem; }
.cp-file-row-actions { display: flex; gap: .4rem; flex-shrink: 0; }

/* ──────────────────────────────────────────────
   PAYMENTS
────────────────────────────────────────────── */
.cp-pay-mode {
  border-radius: var(--radius-sm);
  padding: .65rem .9rem;
  font-size: .78rem;
  margin-bottom: .9rem;
  border: 1px solid var(--border);
}
.cp-pay-mode strong { display: block; font-size: .8rem; margin-bottom: .2rem; }
.cp-pay-mode-demo { background: var(--gold-pale); border-color: #fde68a; color: #92400e; }
.cp-pay-mode-live { background: var(--green-pale); border-color: #bbf7d0; color: #166534; }

.cp-pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.cp-pay-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  background: #fafbfd;
}
.cp-pay-card h3 {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: .75rem;
}
.cp-pay-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .45rem 0;
  border-bottom: 1px solid var(--border-light);
  font-size: .82rem;
  gap: .5rem;
}
.cp-pay-row:last-child { border-bottom: none; }
.cp-pay-row span { color: var(--muted); }
.cp-pay-row strong { font-weight: 700; color: var(--navy); }
.cp-pay-total { border-top: 2px solid var(--navy); padding-top: .55rem; margin-top: .2rem; }
.cp-pay-total span { font-weight: 700; color: var(--navy); }
.cp-pay-total strong { font-size: 1rem; color: var(--navy); }
.cp-pay-note { font-size: .72rem; color: var(--muted); margin-top: .6rem; }
.cp-pay-plan { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .85rem; }
.cp-pay-option {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .75rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .82rem;
  transition: border-color 130ms, background 130ms;
}
.cp-pay-option.active, .cp-pay-option:has(input:checked) {
  border-color: var(--gold);
  background: var(--gold-pale);
}
.cp-pay-option input { accent-color: var(--gold); }

/* ──────────────────────────────────────────────
   ACTIVITY
────────────────────────────────────────────── */
.cp-activity-list { display: flex; flex-direction: column; gap: .55rem; }
.cp-activity-item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .6rem 0;
  border-bottom: 1px solid var(--border-light);
}
.cp-activity-item:last-child { border-bottom: none; }
.cp-activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin-top: .35rem; }
.cp-activity-timestamp { font-size: .68rem; color: var(--muted-lt); white-space: nowrap; flex-shrink: 0; min-width: 110px; margin-top: .1rem; }
.cp-activity-msg { font-size: .8rem; color: var(--text-mid); line-height: 1.45; }
.cp-activity-msg strong { color: var(--navy); font-weight: 600; }

/* ──────────────────────────────────────────────
   USCIS FORMS — STACKED LAYOUT (forms + PDF centered below)
────────────────────────────────────────────── */
/* ──────────────────────────────────────────────
   RAIL — Case Forms section
────────────────────────────────────────────── */
.cp-rail-forms-section {
  margin-top: 1rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border-light);
}
.cp-rail-section-label {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  padding: 0 1rem .5rem;
}
.cp-rail-form-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  border-left: 3px solid transparent;
  transition: background 120ms, border-color 120ms;
}
.cp-rail-form-btn:hover { background: var(--bg); }
.cp-rail-form-btn.active {
  background: #eef2fb;
  border-left-color: var(--navy);
}
.cp-rail-form-icon { font-size: .9rem; flex-shrink: 0; opacity: .65; }
.cp-rail-form-num {
  flex: 1;
  font-size: .8rem;
  font-weight: 700;
  color: var(--navy);
}
.cp-rail-form-pct {
  font-size: .65rem;
  font-weight: 700;
  padding: .1rem .4rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.cp-rail-form-pct.complete { background: #d1fae5; color: #065f46; }
.cp-rail-form-pct.active { background: #dbeafe; color: #1e40af; }
.cp-rail-form-pct.draft { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* ──────────────────────────────────────────────
   WIZARD — ultra-simple
────────────────────────────────────────────── */
.cp-wizard-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: 1.5rem;
}
.cp-wizard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-light);
}
.cp-wizard-fn {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .2rem;
}
.cp-wizard-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0;
}
.cp-wizard-foot {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-light);
}

/* ──────────────────────────────────────────────
   PDF MODAL
────────────────────────────────────────────── */
.cp-pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2rem 1rem;
}
.cp-pdf-modal[hidden] { display: none; }
.cp-pdf-modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  z-index: -1;
}
.cp-pdf-modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 24px 80px rgba(0,0,0,.3);
  width: min(900px, 96vw);
  height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cp-pdf-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--navy);
  color: #fff;
  gap: 1rem;
}
.cp-pdf-modal-title {
  font-size: .85rem;
  color: rgba(255,255,255,.85);
  font-weight: 500;
}
.cp-pdf-modal-title strong { color: #fff; font-weight: 700; }
.cp-pdf-modal-body {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #404448;
}
.cp-pdf-modal-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ──────────────────────────────────────────────
   OLD two-column layout (replaced — hidden)
────────────────────────────────────────────── */
.cp-forms-split {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  min-height: calc(100vh - 200px);
}

/* Left: Form selector nav */
.cp-forms-nav {
  width: 236px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius) 0 0 var(--radius);
  border-right: none;
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  max-height: calc(100vh - var(--header-h) - 2rem);
  overflow-y: auto;
}

.cp-forms-nav-head {
  padding: 1rem 1.1rem .75rem;
  border-bottom: 1px solid var(--border);
}
.cp-forms-nav-head h3 {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}
.cp-forms-nav-count {
  font-size: .68rem;
  color: var(--muted);
  display: block;
  margin-top: .15rem;
}

.cp-form-nav-list { display: flex; flex-direction: column; }

.cp-form-nav-item {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  text-align: left;
  width: 100%;
  position: relative;
  transition: background 120ms;
}
.cp-form-nav-item:hover { background: var(--bg); }
.cp-form-nav-item.active {
  background: #eef2fb;
  border-left: 3px solid var(--navy);
  padding-left: calc(1rem - 3px);
}
.cp-form-nav-item.active::after {
  content: '';
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 8px solid var(--bg);
}

.cp-form-nav-badge {
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .04em;
  padding: .26rem .45rem;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: .1rem;
}
.cp-form-nav-item.active .cp-form-nav-badge { background: var(--navy-mid); }

.cp-form-nav-info { flex: 1; min-width: 0; }
.cp-form-nav-title {
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-form-nav-meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .25rem;
}
.cp-form-nav-pct {
  font-size: .7rem;
  font-weight: 700;
  color: var(--navy);
}
.cp-form-nav-status {
  font-size: .6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .1rem .4rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cp-form-nav-status.complete { background: #d1fae5; color: #065f46; }
.cp-form-nav-status.draft { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.cp-form-nav-status.active { background: #dbeafe; color: #1e40af; }

.cp-form-nav-track {
  margin-top: .4rem;
  height: 3px;
  background: var(--bg);
  border-radius: 999px;
  overflow: hidden;
}
.cp-form-nav-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 400ms ease;
}

/* Right: Wizard + PDF panel */
.cp-forms-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem;
}

/* Empty state */
.cp-forms-main-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 2rem;
  text-align: center;
  gap: .65rem;
}
.cp-forms-empty-icon { font-size: 2.2rem; line-height: 1; }
.cp-forms-main-empty h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
}
.cp-forms-main-empty p { font-size: .82rem; color: var(--muted); max-width: 280px; }

/* Wizard panel */
.cp-form-wizard-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.cp-form-wizard-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: .9rem 1.2rem;
  background: var(--navy);
  color: #fff;
  gap: 1rem;
}
.cp-form-wizard-toolbar h4 {
  font-family: var(--font-display);
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}
.cp-form-wizard-hint {
  font-size: .72rem;
  color: rgba(255,255,255,.65);
  margin-top: .22rem;
  line-height: 1.45;
}
.cp-form-wizard-toolbar-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
  flex-shrink: 0;
}
.cp-form-wizard-actions-top {
  display: flex;
  gap: .4rem;
}
.cp-btn-sm {
  font-size: .7rem !important;
  padding: .28rem .65rem !important;
}

.cp-form-wizard-body { padding: 1.2rem 1.25rem; }
.cp-form-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* ── Status pills (shared) ── */
.cp-status-pill {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .14rem .52rem;
  border-radius: 999px;
  white-space: nowrap;
}
.cp-status-pill.complete { background: #d1fae5; color: #065f46; }
.cp-status-pill.draft { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.cp-status-pill.active { background: #dbeafe; color: #1e40af; }

/* ──────────────────────────────────────────────
   PDF PANEL (below wizard in right column)
────────────────────────────────────────────── */
.cp-pdf-panel-card {
  display: flex;
  flex-direction: column;
  height: 78vh;
  min-height: 500px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.cp-pdf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.cp-pdf-panel-head h3 {
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.01em;
}
.cp-pdf-panel-sub { font-size: .72rem; color: var(--muted); margin-top: .18rem; }
.cp-pdf-panel-head-actions { display: flex; gap: .4rem; flex-shrink: 0; }

.cp-pdf-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #404448;
}

.cp-pdf-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  background: #404448;
}

.cp-pdf-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  background: #3a3d41;
  color: rgba(255,255,255,.6);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .03em;
  z-index: 2;
}
.cp-pdf-loading::before {
  content: '';
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(255,255,255,.12);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: cpSpin .7s linear infinite;
}
@keyframes cpSpin { to { transform: rotate(360deg); } }
.cp-pdf-loading[hidden] { display: none !important; }

.cp-pdf-error {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  background: var(--red-pale);
  color: var(--red);
  font-size: .82rem;
  z-index: 2;
  gap: .75rem;
}
.cp-pdf-error a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
}
.cp-pdf-error[hidden] { display: none !important; }

/* Legacy compat — remove old sticky col */
.cp-pdf-sticky-col { display: none; }
.cp-pdf-panel-foot { display: none; }

/* ──────────────────────────────────────────────
   BUTTONS
────────────────────────────────────────────── */
.cp-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem 1rem;
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  background: var(--navy);
  color: #fff;
  transition: background 130ms, transform 130ms;
  white-space: nowrap;
}
.cp-btn-primary:hover { background: var(--navy-mid); }
.cp-btn-primary:disabled { opacity: .55; cursor: not-allowed; }

.cp-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .5rem .95rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: var(--surface);
  color: var(--text-mid);
  transition: border-color 130ms, background 130ms;
  white-space: nowrap;
}
.cp-btn-outline:hover { border-color: var(--navy); color: var(--navy); background: #f8f9fc; }

.cp-btn-teal { background: var(--teal) !important; }
.cp-btn-teal:hover { background: var(--teal-dark) !important; }

.cp-download-btn { text-decoration: none; }

/* ──────────────────────────────────────────────
   MOBILE TABS
────────────────────────────────────────────── */
.cp-mobile-tabs {
  display: none;
  overflow-x: auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: .4rem .75rem;
  gap: .25rem;
  scrollbar-width: none;
}
.cp-mobile-tabs::-webkit-scrollbar { display: none; }
.cp-mobile-tab {
  flex-shrink: 0;
  padding: .42rem .75rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.cp-mobile-tab.active { background: var(--navy); color: #fff; }
.cp-mobile-tab--secure.active { background: var(--teal); }
.cp-mobile-tab--forms.active { background: var(--navy); }

/* ──────────────────────────────────────────────
   LOGIN PAGE
────────────────────────────────────────────── */
.cp-shell { max-width: 1440px; margin: 0 auto; padding: 0; }

.cp-login-wrap {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 62px);
  padding: 2rem 1rem;
  background: var(--navy);
}

.cp-login-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 20px;
  padding: 2.5rem;
  box-shadow: 0 32px 80px rgba(10,18,36,.35);
}
.cp-login-card h1 {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -.02em;
  margin-bottom: .35rem;
  line-height: 1.15;
}
.cp-sub { color: var(--muted); font-size: .88rem; margin-bottom: .7rem; line-height: 1.5; }
.cp-login-trust {
  font-size: .76rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 1.4rem;
  padding: .6rem .75rem;
  background: var(--bg);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.cp-label { display: block; margin-bottom: 1rem; }
.cp-label span { display: block; font-size: .76rem; font-weight: 700; color: var(--navy); margin-bottom: .32rem; text-transform: uppercase; letter-spacing: .04em; }
.cp-input {
  width: 100%;
  padding: .78rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: .92rem;
  outline: none;
  transition: border-color 160ms, box-shadow 160ms;
  color: var(--text);
}
.cp-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(232,163,58,.12); }

.cp-btn {
  width: 100%;
  padding: .9rem;
  border: none;
  border-radius: 9px;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--gold);
  color: #fff;
  transition: background 130ms;
  margin-top: .35rem;
}
.cp-btn:hover { background: var(--gold-dark); }
.cp-btn:disabled { opacity: .6; cursor: not-allowed; }

.cp-error {
  background: var(--red-pale);
  color: var(--red);
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: .7rem .85rem;
  font-size: .82rem;
  margin-bottom: .9rem;
}
.cp-demo {
  margin-top: 1.2rem;
  padding: .9rem;
  background: var(--bg);
  border-radius: 9px;
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.55;
}
.cp-demo strong { color: var(--navy); }
.cp-demo code { background: var(--border); padding: .08rem .25rem; border-radius: 3px; font-size: .72rem; }
.cp-footer-link { text-align: center; margin-top: 1.2rem; font-size: .78rem; color: rgba(255,255,255,.5); }
.cp-footer-link a { color: var(--gold); font-weight: 600; text-decoration: none; }

/* ──────────────────────────────────────────────
   TOAST
────────────────────────────────────────────── */
.cp-toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  max-width: min(420px, calc(100vw - 2rem));
  padding: .72rem 1rem;
  border-radius: 10px;
  font-size: .84rem;
  font-weight: 600;
  box-shadow: 0 12px 40px rgba(15,27,54,.16);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms, transform 200ms;
  z-index: 9999;
  pointer-events: none;
}
.cp-toast.show { opacity: 1; transform: translateY(0); }
.cp-toast-success { background: var(--green-pale); color: #166534; border: 1px solid #bbf7d0; }
.cp-toast-error { background: var(--red-pale); color: var(--red); border: 1px solid #fecaca; }

/* ──────────────────────────────────────────────
   EMPTY STATE
────────────────────────────────────────────── */
.cp-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
  font-size: .9rem;
}

/* ──────────────────────────────────────────────
   FOOTER
────────────────────────────────────────────── */
.portal-footer { padding: 1.5rem 1.75rem; border-top: 1px solid var(--border-light); }
.portal-footer--dark { background: var(--navy); }
.portal-footer-inner { max-width: 720px; }
.portal-footer-name {
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: .3rem;
}
.portal-footer-text { font-size: .72rem; color: var(--muted-lt); line-height: 1.6; }

/* ──────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .cp-forms-nav { width: 192px; }
}

@media (max-width: 860px) {
  .cp-tab-rail { display: none; }
  .cp-mobile-tabs { display: flex; }
  .cp-content-area { padding: 1rem; }
  .cp-overview-grid { grid-template-columns: 1fr; }
  .cp-pay-grid { grid-template-columns: 1fr; }
  .cp-case-banner { padding: .7rem 1rem; }
  .cp-header { padding: 0 1rem; }
  /* On mobile, stack forms nav above wizard */
  .cp-forms-split { flex-direction: column; }
  .cp-forms-nav {
    width: 100%;
    position: static;
    max-height: none;
    border-radius: var(--radius) var(--radius) 0 0;
    border-right: 1px solid var(--border);
    border-bottom: none;
  }
  .cp-forms-main {
    border-left: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .cp-form-nav-item.active::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-pdf-loading::before { animation: none; }
  .cp-btn-primary:hover, .cp-btn:hover { transform: none; }
}