/*
 * CrossPoint - account.css
 * The sign-in pages and the customer portal.
 *
 * Loaded only on the authentication pages and /account/, so no other page pays
 * for it. Every colour, radius, shadow and font here is a token already
 * declared in main.css: this file introduces no new palette, because the portal
 * is meant to read as part of the site rather than as an application bolted on
 * beside it.
 *
 *  1. Shared pieces: notices, forms, buttons, cards
 *  2. The authentication pages
 *  3. The portal shell: header, navigation, content
 *  4. The dashboard's own blocks
 *
 * The signed-in header menu is NOT here. It renders on every page of the site,
 * so its styles live in main.css; this file only loads on the portal.
 */

/* ==================================================================
   1. SHARED
   ================================================================== */

.cpf-auth,
.cpf-account {
  background: linear-gradient(180deg, #fff 0%, #FAFBFD 100%);
  padding: 44px 0 72px;
  min-height: 60vh;
}

/* ---------- notices ---------- */
.cpf-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 18px;
  margin-bottom: 22px;
  font-size: .92rem;
  line-height: 1.55;
}
.cpf-notice p { margin: 0 }
.cpf-notice p + p { margin-top: 6px }
.cpf-notice i { font-size: 1rem; margin-top: 2px; flex: none }
.cpf-notice a { color: inherit; font-weight: 600 }
.cpf-notice--ok {
  background: rgba(21, 122, 74, .07);
  border-color: rgba(21, 122, 74, .28);
  color: #10603A;
}
.cpf-notice--bad {
  background: #FDF3F3;
  border-color: rgba(176, 42, 42, .26);
  color: var(--danger);
}

/* ---------- form controls ---------- */
.cpf-form { margin: 0 }
.cpf-form--inline { display: inline-block; margin-top: 4px }

/* Row gap is 0 because each field carries its own bottom margin; only the
   column gap is set here, so a full-width field and a half-width one sit on the
   same vertical rhythm. */
.cpf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 22px;
}
@media (min-width: 620px) {
  .cpf-grid { grid-template-columns: 1fr 1fr; align-items: start }
  .cpf-grid > .cpf-field { grid-column: 1 / -1 }
  .cpf-grid > .cpf-field--half { grid-column: auto }
}

/* The two gaps here do the grouping: a label sits close to the input it names,
   and the space to the next field is more than twice that, so the eye reads
   label-and-input as one thing rather than reading a column of evenly spaced
   lines. Tightening either one collapses that distinction.

   The outer space is padding, not margin, and it is on both sides. Padding
   because margins collapse in normal flow but not in a grid, so a margin would
   have spaced the stacked fields on the sign-in pages differently from the
   two-column ones in the portal. Both sides because a bottom-only rule leaves
   the first field in a group with its label jammed against the heading above
   it, which is where this started. */
.cpf-field { position: relative; margin: 0; padding: 14px 0 }
.cpf-field label {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 10px;
}
.cpf-req { color: var(--gold-dark); margin-left: 2px }

.cpf-field input,
.cpf-field select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
  transition: border-color .18s, box-shadow .18s;
}
.cpf-field input:focus,
.cpf-field select:focus {
  outline: 0;
  border-color: var(--gold-button);
  box-shadow: 0 0 0 3px rgba(214, 161, 31, .14);
}
.cpf-field input::placeholder { color: #9AA3AF }
.cpf-field input:disabled,
.cpf-field input[readonly] { background: var(--beige-disabled); color: var(--beige-disabled-text) }

.cpf-field-desc {
  display: block;
  margin-top: 6px;
  font-size: .8rem;
  color: var(--muted);
  line-height: 1.5;
}

/* The reveal button sits inside the input, so it needs room not to cover what
   is being typed. It is hidden until account.js un-hides it: with scripts off
   it would be a button that does nothing.

   It is positioned against a wrapper around the input rather than against the
   whole field. Anchoring it to the field meant its position depended on the
   field's height, and two things change that: a hint line under the input, and
   grid rows stretching every cell to match the tallest one in the row. So
   "Confirm new password", sitting beside a "New password" that carries a hint,
   was stretched taller than its own input and the button landed underneath it.
   Centred on the input, neither can move it. */
.cpf-input-wrap { position: relative; display: block }
.cpf-field--password input { padding-right: 74px }
.cpf-reveal {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 7px 10px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  color: var(--gold-dark);
  cursor: pointer;
}
.cpf-reveal:hover { background: var(--paper) }

/* The honeypot, and the hidden username field password managers read. Moved
   off-screen rather than display:none, which some bots skip. */
.cpf-hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cpf-fieldset { border: 0; padding: 0; margin: 0 0 8px }
.cpf-fieldset + .cpf-fieldset { margin-top: 22px; padding-top: 24px; border-top: 1px solid var(--line) }
.cpf-fieldset legend {
  font-family: var(--disp);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  padding: 0;
  margin-bottom: 4px;
}

.cpf-check { display: flex; align-items: center; gap: 9px; font-size: .88rem; color: var(--muted); cursor: pointer }
.cpf-check input { width: 18px; height: 18px; flex: none; accent-color: var(--gold-button); cursor: pointer }
.cpf-check--block { align-items: flex-start; margin: 4px 0 22px; line-height: 1.55 }
.cpf-check--block input { margin-top: 2px }
.cpf-check a { color: var(--gold-dark); font-weight: 600 }

.cpf-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 2px 0 22px;
}

.cpf-link { color: var(--gold-dark); font-weight: 600; font-size: .88rem; text-decoration: none }
.cpf-link:hover { text-decoration: underline }

.cpf-form-foot { margin-top: 20px; font-size: .88rem; color: var(--muted); text-align: center }

/* ---------- optional section toggle ----------
   A checkbox that reveals the block after it. The checkbox is a sibling of the
   panel rather than a child of its own label, because :checked ~ .panel is what
   opens it - no JavaScript, so with scripts blocked the panel is simply always
   open and the form still submits. The grid puts the box and its label back on
   one row and lets the panel span both columns. */
.cpf-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0 12px;
  margin: 6px 0 26px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
}
.cpf-toggle-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--gold-button);
  cursor: pointer;
}
.cpf-toggle-label { cursor: pointer; line-height: 1.5 }
.cpf-toggle-title { display: block; font-size: .92rem; font-weight: 600; color: var(--navy) }
.cpf-toggle-note { display: block; margin-top: 3px; font-size: .84rem; color: var(--muted) }

.cpf-toggle-panel {
  grid-column: 1 / -1;
  margin-top: 18px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.cpf-toggle-input:not(:checked) ~ .cpf-toggle-panel { display: none }

/* Inside the panel the fieldset is only there to group the fields for a screen
   reader; the toggle's own label is the visible heading. */
.cpf-toggle-panel .cpf-fieldset { margin: 0 }
.cpf-toggle-panel .cpf-fieldset + .cpf-fieldset { border-top: 0; margin-top: 0; padding-top: 0 }

/* ---------- buttons ---------- */
.cpf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 26px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--ease), background .2s ease, box-shadow .28s var(--ease), border-color .2s ease;
}
.cpf-btn--primary { background: var(--gold-button); color: var(--navy) }
.cpf-btn--primary:hover { background: var(--gold-hover); transform: translateY(-2px); box-shadow: var(--shadow-cta) }
.cpf-btn--ghost { background: #fff; border-color: var(--line); color: var(--navy) }
.cpf-btn--ghost:hover { border-color: var(--gold-button); background: #FFFDF7 }
.cpf-btn[disabled],
.cpf-btn[aria-disabled="true"] {
  background: var(--beige-disabled);
  color: var(--beige-disabled-text);
  border-color: transparent;
  transform: none;
  box-shadow: none;
  cursor: progress;
}
/* A field now ends in 14px of its own padding, which is the gap between two
   fields, not the gap before a button that submits the lot. */
.cpf-field + .cpf-btn,
.cpf-grid + .cpf-btn { margin-top: 12px }
.cpf-form > .cpf-btn { width: 100% }
@media (min-width: 620px) { .cpf-form > .cpf-btn { width: auto; min-width: 220px } }

/* ---------- cards ---------- */
.cpf-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(230, 223, 209, .92);
  border-radius: 22px;
  box-shadow: 0 16px 42px rgba(14, 27, 46, .055);
  padding: 26px;
}
.cpf-card + .cpf-card,
.cpf-card + .cpf-stat-row,
.cpf-stat-row + .cpf-card,
.cpf-card-row + .cpf-card,
.cpf-card + .cpf-card-row { margin-top: 20px }
/* The stacking margin above is for cards following one another down the page.
   Inside a row they are grid items and the gap already separates them - left
   alone, every card but the first is pushed down 20px and, because the track
   stretches, ends up 20px shorter than the one beside it. */
.cpf-stat-row > .cpf-card,
.cpf-card-row > .cpf-card { margin-top: 0 }
@media (min-width: 840px) { .cpf-card { padding: 30px 32px } }

.cpf-card h2 {
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  color: var(--navy);
  margin-bottom: 6px;
}
.cpf-card h3 {
  font-family: var(--disp);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
}
.cpf-card-lead { color: var(--muted); font-size: .92rem; margin-bottom: 24px; max-width: 62ch }

.cpf-dl { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 16px }
.cpf-dl dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-top: 14px;
}
.cpf-dl dt:first-child { margin-top: 0 }
.cpf-dl dd { margin: 3px 0 0; font-size: .96rem; color: var(--ink); word-break: break-word }
.cpf-dl dd a { color: var(--gold-dark) }
.cpf-empty { color: var(--beige-disabled-text); font-style: italic }
.cpf-empty-state { color: var(--muted); font-size: .92rem; margin-bottom: 16px }

/* ==================================================================
   2. AUTHENTICATION PAGES
   ================================================================== */

.cpf-auth-in {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  align-items: start;
  max-width: 1080px;
}
@media (min-width: 940px) {
  .cpf-auth-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); gap: 34px }
}

.cpf-auth-card {
  background: #fff;
  border: 1px solid rgba(230, 223, 209, .92);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  padding: 30px 24px;
}
@media (min-width: 620px) { .cpf-auth-card { padding: 40px 44px } }

.cpf-auth-card .kicker { margin-bottom: 10px; font-size: .72rem }
.cpf-auth-title { font-size: clamp(1.6rem, 4vw, 2.05rem); color: var(--navy); margin-bottom: 10px }
.cpf-auth-lead { color: var(--muted); font-size: .95rem; margin-bottom: 28px; max-width: 52ch }
.cpf-reset-who { font-size: .92rem; color: var(--muted); margin-bottom: 22px }

.cpf-auth-aside {
  background: radial-gradient(650px 300px at 80% 0%, rgba(214, 161, 31, .18), transparent 62%),
              linear-gradient(150deg, #0E1B2E 0%, #163251 58%, #0F2840 100%);
  border-radius: 26px;
  padding: 32px 28px;
  color: #fff;
}
.cpf-auth-aside-kicker {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-button);
  margin-bottom: 14px;
}
.cpf-auth-aside h2 {
  font-size: 1.4rem;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 22px;
}
.cpf-auth-aside-list { list-style: none; margin: 0 0 24px; padding: 0 }
.cpf-auth-aside-list li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cpf-auth-aside-list li:last-child { border-bottom: 0 }
.cpf-auth-aside-list i { color: var(--gold-button); margin-top: 4px; flex: none }
.cpf-auth-aside-foot { font-size: .86rem; color: rgba(255, 255, 255, .68); line-height: 1.6; margin: 0 }
.cpf-auth-aside-foot a { color: var(--gold-button); font-weight: 600; display: block; margin-top: 4px }

/* ==================================================================
   3. PORTAL SHELL
   ================================================================== */

.cpf-account-head {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.cpf-account-head .kicker { margin-bottom: 6px; font-size: .72rem }
.cpf-account-head h1 { font-size: clamp(1.7rem, 4.4vw, 2.3rem); color: var(--navy) }

.cpf-account-who { display: flex; align-items: center; gap: 12px; font-size: .9rem; margin: 0 }
.cpf-account-who strong { display: block; color: var(--navy) }
.cpf-account-email { color: var(--muted); font-size: .84rem; word-break: break-all }

.cpf-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--navy);
  color: var(--gold-button);
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.cpf-account-body { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: start }
/* A grid track is auto-sized to its widest child unless told otherwise, so
   without this a wide table stretches the column and the whole page scrolls
   sideways instead of the table scrolling inside its own wrapper. */
.cpf-account-body > * { min-width: 0 }
@media (min-width: 900px) {
  .cpf-account-body { grid-template-columns: 258px minmax(0, 1fr); gap: 30px }
}

/* ---------- navigation ---------- */
.cpf-account-nav { min-width: 0 }

/* The jump menu is the whole navigation below 900px, and the link list is the
   whole navigation above it. Neither ever scrolls sideways. */
.cpf-account-jump { display: flex; gap: 10px }
.cpf-account-jump select {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 15px;
}
.cpf-account-jump select:focus {
  outline: 0;
  border-color: var(--gold-button);
  box-shadow: 0 0 0 3px rgba(214, 161, 31, .14);
}
.cpf-account-jump-go {
  flex: none;
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 14px;
  padding: 0 20px;
  font: inherit;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
}
/* Scripts running: the select navigates on change, so the button is redundant. */
.cpf-js .cpf-account-jump-go { display: none }

.cpf-account-links { list-style: none; margin: 0; padding: 0; display: none }
.cpf-account-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border-radius: 14px;
  font-size: .92rem;
  font-weight: 600;
  color: #22314A;
  text-decoration: none;
  transition: background .16s, color .16s;
}
.cpf-account-links i { width: 18px; text-align: center; color: var(--muted); font-size: .95rem; transition: color .16s }
.cpf-account-links a:hover { background: var(--paper); color: var(--navy) }
.cpf-account-links a:hover i { color: var(--gold-dark) }
.cpf-account-links a.is-active { background: var(--navy); color: #fff }
.cpf-account-links a.is-active i { color: var(--gold-button) }
.cpf-account-links-out { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line) }
.cpf-account-links-out a { color: var(--muted) }

@media (min-width: 900px) {
  .cpf-account-jump { display: none }
  .cpf-account-links {
    display: block;
    position: sticky;
    top: 84px;
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(230, 223, 209, .92);
    border-radius: 22px;
    box-shadow: 0 16px 42px rgba(14, 27, 46, .055);
    padding: 12px;
  }
}

.cpf-account-content { min-width: 0 }

/* ==================================================================
   4. DASHBOARD BLOCKS
   ================================================================== */

.cpf-welcome h2 { margin-bottom: 8px }
.cpf-welcome-sub { color: var(--muted); font-size: .95rem; margin: 0 }
.cpf-welcome-sub strong { color: var(--navy) }

.cpf-stat-row,
.cpf-card-row { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px }
@media (min-width: 720px) {
  .cpf-stat-row { grid-template-columns: repeat(3, 1fr) }
  .cpf-card-row { grid-template-columns: repeat(2, 1fr) }
}

.cpf-stat { display: flex; flex-direction: column; gap: 10px }
.cpf-stat-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.cpf-stat-value { font-family: var(--disp); font-size: 1.16rem; font-weight: 700; color: var(--navy) }

.cpf-pill {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  font-family: var(--ui);
  font-size: .8rem;
  font-weight: 700;
}
.cpf-pill--ok { background: rgba(21, 122, 74, .11); color: var(--emerald) }

.cpf-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.cpf-progress-head h3 { margin-bottom: 0 }
.cpf-progress-pct { font-family: var(--disp); font-weight: 700; color: var(--gold-dark) }
.cpf-bar { height: 8px; border-radius: 999px; background: var(--beige-disabled); overflow: hidden; margin: 14px 0 14px }
.cpf-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #C5962B, #E8BF4A) }
.cpf-progress p { color: var(--muted); font-size: .9rem; margin: 0 }
.cpf-progress-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px !important }

.cpf-billing { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between }
.cpf-billing h3 { margin-bottom: 8px }
.cpf-billing p { color: var(--muted); font-size: .9rem; margin: 0; max-width: 58ch }

.cpf-help p { color: var(--muted); font-size: .92rem; margin: 0 }
.cpf-help-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px !important }
.cpf-help-actions .fa-whatsapp { color: #25D366 }

@media (prefers-reduced-motion: reduce) {
  .cpf-btn,
  .cpf-account-links a { transition: none !important }
  .cpf-btn:hover { transform: none !important }
}

/* ==================================================================
   5. BILLING: payment history and invoices
   ================================================================== */

.cpf-muted { color: var(--muted) }

.cpf-empty {
  text-align: center;
  padding: 30px 20px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: var(--paper);
}
.cpf-empty p { margin: 0 0 8px; color: var(--muted) }
.cpf-empty p strong { color: var(--navy) }
.cpf-empty .cpf-btn { margin-top: 12px }

/* The table scrolls inside its own box rather than pushing the page sideways.
   Below 720px it stops being a table at all: each row becomes a stacked card
   with the column name from data-label, because six columns on a phone is
   either a horizontal scrollbar or unreadable type, and neither is worth it. */
.cpf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }

/* The row number. Quiet on purpose: it is there to be counted down, not read. */
.cpf-table__no { width: 40px; color: var(--muted); font-variant-numeric: tabular-nums }
@media screen and (max-width: 719px) {
  /* The stacked cards are already separate blocks, so a "# 3" line inside one
     says nothing the card itself does not. */
  .cpf-table__no { display: none }
}

.cpf-table { width: 100%; border-collapse: collapse; font-size: .9rem }
.cpf-table th,
.cpf-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line) }
.cpf-table thead th {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold-dark);
  border-bottom-width: 2px;
  white-space: nowrap;
}
.cpf-table tbody tr:last-child td { border-bottom: 0 }
.cpf-table tbody tr:hover { background: var(--paper) }
.cpf-table tfoot th,
.cpf-table tfoot td { border-top: 2px solid var(--line); border-bottom: 0; font-size: .88rem }
.cpf-table tfoot th { text-align: right; color: var(--muted); font-weight: 600 }
.cpf-table--tight th,
.cpf-table--tight td { padding: 10px 12px }

/* screen only: an A4 sheet is about 790px wide, so an unscoped max-width
   query turns the printed invoice table into stacked phone cards. */
@media screen and (max-width: 719px) {
  .cpf-table,
  .cpf-table tbody,
  .cpf-table tr,
  .cpf-table td { display: block; width: 100% }
  .cpf-table thead { display: none }
  .cpf-table tr {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 6px 4px;
    margin-bottom: 12px;
    background: #fff;
  }
  .cpf-table td {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    padding: 10px 12px;
  }
  .cpf-table tr td:last-child { border-bottom: 0 }
  .cpf-table td::before {
    content: attr(data-label);
    flex: none;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gold-dark);
  }
  .cpf-table tfoot { display: block }
  .cpf-table tfoot tr { display: flex; justify-content: space-between; padding: 10px 12px }
  .cpf-table tfoot th { text-align: left }
}

.cpf-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  white-space: nowrap;
}
.cpf-pill--paid { background: rgba(21, 122, 74, .11); color: #10603A }
.cpf-pill--pending { background: rgba(214, 161, 31, .15); color: #7A5A12 }
.cpf-pill--expired { background: #F1F3F6; color: var(--muted) }
.cpf-pill--failed { background: rgba(152, 33, 31, .1); color: #98211F }
.cpf-pill--refunded, .cpf-pill--partly_refunded { background: rgba(152, 33, 31, .08); color: #98211F }

.cpf-invoice {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
  margin-bottom: 16px;
  background: #fff;
}
.cpf-invoice:last-child { margin-bottom: 0 }
.cpf-invoice__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cpf-invoice__head h3 {
  font-family: var(--disp);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 3px;
}
.cpf-invoice__head p { margin: 0; font-size: .85rem }
.cpf-invoice__amount { display: flex; align-items: center; gap: 10px }
.cpf-invoice__amount strong { font-size: 1.15rem; color: var(--navy) }

/* The View button in a table cell: the standard ghost button is 48px tall,
   which makes every row of an invoice list as tall as a card. */
.cpf-btn--sm { height: 34px; padding: 0 16px; font-size: .82rem; border-radius: 10px }

.cpf-back { margin: 0 0 14px; font-size: .88rem }
.cpf-invoice__note { font-size: .82rem; margin: 14px 0 18px; max-width: 62ch }

/* Printing an invoice should produce the invoice, not the site around it. */
/* Money still owed. The same red the theme already uses for a bad notice, so
   the palette does not grow a second one. */
.cpf-owing { color: var(--danger) }
.cpf-owing-row th,
.cpf-owing-row td { color: var(--danger) }
.cpf-owing-row td { font-weight: 700 }

/* The printed masthead and address block. Hidden on screen, where the site
   header and the account header already carry both. */
.cpf-invoice-brand,
.cpf-invoice-billed { display: none }

@media print {
  /* Chrome and Edge draw the date, the page title and the URL in the page
     margin. With no margin there is nowhere to draw them, so they go - and the
     invoice gets its own margin from the body instead. Browsers that ignore
     this still have a "Headers and footers" tick-box in the print dialog. */
  @page { margin: 0 }

  html, body { background: #fff !important }
  body { margin: 0; padding: 16mm 14mm; font-size: 11pt; color: #111 }

  /* Everything that belongs to the site rather than to the invoice. */
  .nav, .mobile-menu, footer, .cpf-account-nav, .cpf-account-jump,
  .cpf-account-head, .cpf-back, .cpf-promo-bar, .wa-float, .cp-chat,
  .cp-chat-fab, .cpf-notice, .cpf-btn, .skip-link { display: none !important }

  .cpf-account { padding: 0 }
  .cpf-account .wrap { max-width: none; width: auto; margin: 0; padding: 0 }
  .cpf-account-body { display: block }
  .cpf-account-content { display: block }

  /* No lift, no rounding, no tint: shadows print as grey smears and a card
     border round a whole page reads as a box drawn for no reason. */
  .cpf-card,
  .cpf-card:hover {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  .cpf-invoice-brand {
    display: block;
    text-align: center;
    margin: 0 0 10mm;
    padding-bottom: 6mm;
    border-bottom: 1px solid #ddd;
  }
  .cpf-invoice-brand__logo { display: inline-block; height: auto; max-height: 22mm; max-width: 70mm }
  .cpf-invoice-brand__name { display: block; font-size: 15pt; letter-spacing: .02em }
  .cpf-invoice-brand__meta { margin: 3mm 0 0; font-size: 9pt; color: #555 }

  /* The invoice number sits left, the amount right, both on one baseline. */
  .cpf-invoice__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12mm;
    margin-bottom: 8mm;
  }
  .cpf-invoice__amount { text-align: right; white-space: nowrap }

  .cpf-table-wrap { overflow: visible !important }
  .cpf-table { font-size: 10.5pt; width: 100%; border-collapse: collapse }
  .cpf-table th, .cpf-table td { padding: 2.5mm 0 }

  /* Money and quantities read as columns only when their edges line up. The
     numbers are positions in the printed invoice table, which runs
     # / Item / Qty / Amount. */
  .cpf-table th:nth-child(4), .cpf-table td:nth-child(4) { text-align: right }
  .cpf-table th:nth-child(3), .cpf-table td:nth-child(3) { text-align: center; width: 14mm }
  .cpf-table__no { display: table-cell; width: 10mm }
  .cpf-table tfoot th { text-align: right }
  .cpf-table tfoot td { text-align: right; white-space: nowrap }

  /* A row split across two sheets is unreadable on both. */
  .cpf-table tr, .cpf-invoice__head, .cpf-invoice-brand { page-break-inside: avoid }

  /* Chrome can flatten colours when it decides a page is "economical"; this
     says the red is meaning, not decoration. */
  .cpf-owing,
  .cpf-owing-row th,
  .cpf-owing-row td {
    color: var(--danger) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cpf-invoice-billed { margin: 0 0 8mm; line-height: 1.5 }
  .cpf-invoice-billed strong, .cpf-invoice-billed span { display: block }

  .cpf-invoice__note { margin-top: 8mm; font-size: 8.5pt; color: #555 }
}

/* Balance cards and the pay-now block. */
.cpf-stat-value--ok  { color: var(--success) }
/* Money owed is red wherever it appears, the same as on an invoice. */
.cpf-stat-value--due { color: var(--danger) }
.cpf-stat-action { display: block; margin-top: 6px; font-size: .82rem }
.cpf-stat-note { display: block; margin-top: 4px; font-size: .76rem; color: var(--muted); line-height: 1.4 }

.cpf-due { border-color: rgba(214, 161, 31, .45); background: #FFFDF7 }
.cpf-due-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.cpf-due-row:first-of-type { border-top: 0 }
.cpf-due-row__pay { display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.cpf-due-row > div:first-child { min-width: 0; overflow-wrap: anywhere }
@media screen and (max-width: 519px) {
  /* Amount and button on their own line, both full width: at this size the
     button is the only thing on the row anyone is aiming at. */
  .cpf-due-row__pay { width: 100%; justify-content: space-between }
}
.cpf-due-row__pay strong { font-size: 1.05rem; color: var(--danger); white-space: nowrap }
.cpf-due-row .cpf-form--inline { margin: 0 }

/* ---------- Setups list ----------
   One completed wizard is one company. The form below holds the latest answers;
   this is how the earlier ones stay readable. */

.cpf-setup-list { list-style: none; margin: 22px 0 0; padding: 0 }

.cpf-setup-list li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  gap: 18px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border)
}

/* The first and last rows sit against the card's own padding, so they need
   less of their own or the ends of the list look loose next to the middle. */
.cpf-setup-list li:first-child { padding-top: 4px }
.cpf-setup-list li:last-child { padding-bottom: 4px; border-bottom: 0 }

/* Counts rows on screen rather than naming an id, so it is read as a position
   in a list and not as a reference to quote back at us. */
.cpf-setup-n {
  color: var(--muted);
  font-size: .85rem;
  font-variant-numeric: tabular-nums
}

.cpf-setup-main { min-width: 0 }
.cpf-setup-main strong { display: block; color: var(--navy) }

.cpf-setup-meta {
  display: block;
  font-size: .84rem;
  color: var(--muted);
  margin-top: 2px
}

.cpf-setup-date {
  font-size: .85rem;
  color: var(--muted);
  white-space: nowrap
}

/* a.cpf-setup-view, never the section. The detail card carries
   .cpf-setup-single for exactly that reason: an unqualified .cpf-setup-view
   also matched the card it links to and replaced the 26px of card padding with
   this button's 6px, which is why the panel arrived squashed against its own
   border. */
a.cpf-setup-view {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap
}

a.cpf-setup-view:hover { background: var(--paper) }

/* The detail card. Roomier than a list card because it is one thing being read
   closely rather than several being scanned. */
.cpf-setup-single { padding: 30px 28px }
@media (min-width: 840px) { .cpf-setup-single { padding: 34px 36px } }

.cpf-setup-single .cpf-back { margin: 0 0 16px }
.cpf-setup-single > h2 { margin: 0 0 10px }
.cpf-setup-single .cpf-card-lead { margin-bottom: 8px }

.cpf-setup-detail { margin: 26px 0 0 }

.cpf-setup-detail > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  font-size: .93rem
}

.cpf-setup-detail > div:first-child { padding-top: 4px }
.cpf-setup-detail > div:last-child { padding-bottom: 4px; border-bottom: 0 }
.cpf-setup-detail dt { color: var(--muted); margin: 0 }
.cpf-setup-detail dd { margin: 0; color: var(--navy); font-weight: 600; text-align: right }

@media (max-width: 600px) {
  .cpf-setup-list li { grid-template-columns: 22px minmax(0, 1fr) auto; row-gap: 8px }
  .cpf-setup-date { grid-column: 2 }
  a.cpf-setup-view { grid-column: 3; grid-row: 2 }
  .cpf-setup-single { padding: 24px 20px }
  .cpf-setup-detail > div { gap: 16px }
}