/* ============================================================
   Zevyon — v3 non-custodial pricing display components (ZEV-T10)
   ------------------------------------------------------------
   Reusable, presentation-only CSS for:
     - CX-1 two-line-item price display (js/booking-fee-display.js)
     - customer / contractor cancellation-tier disclosure tables
     - standing-balance / strike / suspension banners

   Depends on the Heartwood tokens defined in css/heartwood.css
   (--char, --linen, --linen-2, --card, --amber, --amber-deep,
   --copper, --ash, --ok, --bad, --seam, --seam-strong, --shadow-soft).
   Link AFTER heartwood.css:
     <link rel="stylesheet" href="/css/heartwood.css" />
     <link rel="stylesheet" href="/css/pricing-display.css" />

   No new design tokens are introduced here — only new component
   classes built from the existing Heartwood palette.
   ============================================================ */

/* ---------- CX-1: two-line-item price display ---------- */
.zp-price-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.zp-price-line{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid var(--seam);
  background:#fff;
}

.zp-price-line--fee{
  border-left:4px solid var(--copper);
}
.zp-price-line--processing{
  border-left:4px solid var(--seam-strong);
  background:var(--linen-2);
}
.zp-price-line--job{
  border-left:4px solid var(--amber);
}

.zp-price-line-label{ display:flex; flex-direction:column; gap:3px; }

.zp-price-line-title{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700;
  font-size:1rem;
  color:var(--char);
}

.zp-price-line-sub{
  font-size:.8rem;
  color:var(--ash);
  line-height:1.4;
}

.zp-price-line-amount{
  font-family:"Spline Sans Mono", monospace;
  font-weight:700;
  font-size:1.15rem;
  color:var(--char);
  white-space:nowrap;
}

.zp-price-line--fee .zp-price-line-amount{ color:var(--copper); }

.zp-floor-note{
  margin-top:4px;
  font-size:.78rem;
  color:var(--ash);
  font-style:italic;
}

/* ---------- Trust framing card (vetted pro + match-or-refund) ---------- */
.zp-trust-card{
  background:var(--card);
  border:1px solid var(--seam);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:var(--shadow-soft);
}
.zp-trust-card h3{
  margin:0 0 8px;
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--char);
}
.zp-trust-card p{
  margin:0;
  color:var(--ash);
  font-size:.92rem;
  line-height:1.55;
}
.zp-trust-card ul{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--ash);
  font-size:.9rem;
  line-height:1.6;
}

/* ---------- Cancellation-tier disclosure table ---------- */
.zp-tier-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 8px;
}
.zp-tier-table td, .zp-tier-table th{
  padding:12px 14px;
  font-size:.88rem;
  vertical-align:top;
}
.zp-tier-row{
  background:#fff;
  border:1px solid var(--seam);
}
.zp-tier-row td:first-child{ border-radius:10px 0 0 10px; }
.zp-tier-row td:last-child{ border-radius:0 10px 10px 0; }

.zp-tier-row.zp-tier-active{
  background:rgba(224,161,77,.14);
  border:2px solid var(--amber-deep);
  font-weight:700;
}
.zp-tier-row.zp-tier-active td{ border:none; }

.zp-tier-outcome{
  font-family:"Spline Sans Mono", monospace;
  font-weight:700;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.zp-tier-outcome.zp-outcome-refund{ color:var(--ok); }
.zp-tier-outcome.zp-outcome-forfeit{ color:var(--bad); }
/* WCAG AA fix (ZEV-T10 QA pass): --amber-deep (#C4842E) on the white
   .zp-tier-row background computes to ~3.14:1, below the 4.5:1 required
   for this bold/uppercase .78rem text. Scoped to this class only — the
   --amber-deep token itself is unchanged since it's used correctly
   elsewhere at larger/bolder sizes. #9C6423 (same amber family, darkened)
   computes to ~4.93:1 against white. */
.zp-tier-outcome.zp-outcome-partial{ color:#9C6423; }

/* ---------- Standing-balance / strike / suspension banners ---------- */
.zp-banner{
  padding:14px 16px;
  border-radius:12px;
  font-size:.9rem;
  line-height:1.5;
  margin-bottom:14px;
  border:1px solid transparent;
}
.zp-banner-blocked{
  background:#F7E4DC;
  color:#8A3A1B;
  border-color:#E7C3B2;
  font-weight:600;
}
.zp-banner-suspended{
  background:#F7E4DC;
  color:#8A3A1B;
  border-color:var(--bad);
  font-weight:700;
}
.zp-banner-ok{
  background:#E8F0E4;
  color:#2C5530;
  border-color:#C4D8BC;
}
.zp-banner-info{
  background:var(--linen-2);
  color:var(--ash);
  border-color:var(--seam);
}
/* ZEV-T10 v4 (UAT-reopen fix pass, AC §9/§10 UI) — a "heads up, not
   blocking" cautionary tone (reschedule-cap / unilateral-reschedule /
   converted-to-cancellation notices, US-65/67/79/80) that doesn't fit any
   of the four existing tones above (info is neutral, blocked/suspended
   read as already-happened negatives, ok reads as all-clear). Same amber
   family already used for --amber-deep/--amber, just as a light tint —
   no new token introduced. */
.zp-banner-warning{
  background:rgba(224,161,77,.18);
  color:#7A4B12;
  border-color:rgba(224,161,77,.5);
  font-weight:600;
}

.zp-standing-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin-top:12px;
}
.zp-standing-item{
  background:#fff;
  border:1px solid var(--seam);
  border-radius:11px;
  padding:13px;
}
.zp-standing-item span{
  display:block;
  font-family:"Spline Sans Mono", monospace;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ash);
  margin-bottom:6px;
}
.zp-standing-item strong{
  font-family:"Bricolage Grotesque", sans-serif;
  font-size:1.3rem;
  font-weight:800;
  color:var(--char);
}

/* ---------- Stripe Payment/Setup Element mount points ---------- */
.zp-card-element-wrap{
  background:#fff;
  border:1.5px solid var(--seam-strong);
  border-radius:12px;
  padding:16px;
}

.zp-decline-banner{
  background:#F7E4DC;
  color:#8A3A1B;
  border:1px solid #E7C3B2;
  border-radius:12px;
  padding:14px 16px;
  font-size:.9rem;
  margin-top:12px;
  display:none;
}
.zp-decline-banner.zp-visible{ display:block; }

/* ---------- Distinct-from-cancel action styling (US-23) ---------- */
.zp-action-btn{
  border:none;
  padding:9px 13px;
  border-radius:9px;
  cursor:pointer;
  font-family:"Instrument Sans", sans-serif;
  font-weight:700;
  font-size:.85rem;
  white-space:nowrap;
}
.zp-action-cancel{
  background:transparent;
  color:var(--bad);
  border:1.5px solid rgba(168,52,27,.4);
}
.zp-action-cancel:hover{ background:rgba(168,52,27,.08); }

.zp-action-weather{
  background:#E4EEF5;
  color:#1E5A7D;
  border:1.5px solid #B9D6E8;
}
.zp-action-weather:hover{ background:#D3E5F0; }

.zp-action-card{
  background:var(--char);
  color:var(--amber);
  border:none;
}
.zp-action-card:hover{ background:#2A241C; }

/* ---------- Mark job done (AC §5 addendum, US-36) — visually distinct
   positive/in-progress action, never the same styling as the terminal
   "confirmed complete" state, since the signal itself is not completion
   (BR-15). ---------- */
.zp-action-done{
  background:rgba(62,122,70,.14);
  color:var(--ok);
  border:1.5px solid rgba(62,122,70,.35);
}
.zp-action-done:hover{ background:rgba(62,122,70,.22); }

/* ---------- Reschedule (v4, AC §9, US-74/75) — a distinct
   action alongside cancel/weather/done above. Amber-tinted, dark
   text: distinct from .zp-action-weather (blue) so a contractor never
   confuses "propose a new time" with that existing action. ---------- */
.zp-action-reschedule{
  background:rgba(224,161,77,.22);
  color:var(--char);
  border:1.5px solid rgba(224,161,77,.55);
}
.zp-action-reschedule:hover{ background:rgba(224,161,77,.34); }

/* ---------- Inline review-form hand-off (AC §5 addendum, US-35, BR-16) ---------- */
.zp-review-form{
  margin-top:10px;
  background:#fff;
  border:1px solid var(--seam);
  border-radius:12px;
  padding:16px;
}
.zp-review-form h3{
  margin:0 0 6px;
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700;
  font-size:1rem;
  color:var(--char);
}

/* ---------- ZEV-T17 EC-2/EC-8/EC-10 additive components ---------- */

/* EC-2 booking-path notice (US-2/3/7) — hold-first vs deposit-at-booking.
   Deliberately NOT a "warning/bad" tone for the deposit variant — a
   flagged customer's deposit must never read as more punitive-looking
   than the hold it replaces (US-2). Amber/copper family only, same as
   the rest of the flat-amount palette below — no new red/bad tone. */
.zp-path-card{
  background:var(--card);
  border:1px solid var(--seam);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:var(--shadow-soft);
}
.zp-path-card h3{
  margin:0 0 8px;
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700;
  font-size:1.05rem;
  color:var(--char);
}
.zp-path-card p{
  margin:0 0 8px;
  color:var(--ash);
  font-size:.92rem;
  line-height:1.55;
}
.zp-path-card ul{
  margin:8px 0 0;
  padding-left:18px;
  color:var(--ash);
  font-size:.88rem;
  line-height:1.6;
}
.zp-path-card--hold{ border-left:4px solid var(--ok); }
.zp-path-card--deposit{ border-left:4px solid var(--amber-deep); }

/* EC-10 (BR-9) — per-charge-type line + its HST treatment (US-6/14/15/20).
   .zp-tax-pill is the ONLY pill ever paired with a percentage/"+ HST" —
   reserved for charge_type = success_fee. .zp-flat-pill marks every flat
   charge type (penalty/hold/capture/deposit) as explicitly untaxed —
   never the reverse. */
.zp-charge-lines{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.zp-charge-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--seam);
  background:#fff;
}
.zp-charge-row--total{
  border:2px solid var(--seam-strong);
  font-weight:700;
}
.zp-charge-row--credit .zp-charge-amount{ color:var(--ok); }
.zp-charge-label{ display:flex; flex-direction:column; gap:4px; }
.zp-charge-title{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:700;
  font-size:.92rem;
  color:var(--char);
}
.zp-charge-sub{
  font-size:.78rem;
  color:var(--ash);
}
.zp-charge-amount{
  font-family:"Spline Sans Mono", monospace;
  font-weight:700;
  font-size:1rem;
  color:var(--char);
  white-space:nowrap;
  text-align:right;
}
.zp-charge-note{
  margin-top:2px;
  font-size:.78rem;
  color:var(--ash);
  font-style:italic;
}

.zp-tax-pill, .zp-flat-pill{
  display:inline-block;
  font-family:"Spline Sans Mono", monospace;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
  width:fit-content;
}
.zp-tax-pill{
  background:rgba(224,161,77,.2);
  color:#7A4B12;
}
.zp-flat-pill{
  background:var(--linen-2);
  color:var(--ash);
}

/* EC-8 (BR-6) — per-credit cards, always independent, never pooled
   (US-9/10). Grid, not a single summed number. */
.zp-credit-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:12px;
}
.zp-credit-card{
  background:#fff;
  border:1px solid var(--seam);
  border-radius:12px;
  padding:14px;
}
.zp-credit-source{
  font-size:.78rem;
  color:var(--ash);
  margin-bottom:8px;
}
.zp-credit-amounts{
  display:flex;
  gap:16px;
}
.zp-credit-amounts span{
  display:block;
  font-family:"Spline Sans Mono", monospace;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ash);
  margin-bottom:4px;
}
.zp-credit-amounts strong{
  font-family:"Bricolage Grotesque", sans-serif;
  font-size:1.15rem;
  font-weight:800;
  color:var(--char);
}
.zp-credit-issued{
  margin-top:8px;
  font-size:.76rem;
  color:var(--ash);
}

/* ---------- Responsive: 320 / 375 / 390 / 414px ---------- */
@media (max-width:480px){
  .zp-price-line{ flex-direction:column; gap:6px; }
  .zp-price-line-amount{ font-size:1.05rem; }
  .zp-standing-grid{ grid-template-columns:1fr 1fr; }
  .zp-tier-table, .zp-tier-table tbody, .zp-tier-table tr, .zp-tier-table td{ display:block; width:100%; }
  .zp-tier-row{ margin-bottom:8px; border-radius:10px !important; }
  .zp-tier-row td{ border-radius:0 !important; }

  /* ZEV-T17 EC-2/EC-8/EC-10 additions — checked at 320/375/390/414px */
  .zp-charge-row{ flex-direction:column; gap:6px; }
  .zp-charge-amount{ text-align:left; font-size:.95rem; }
  .zp-credit-list{ grid-template-columns:1fr; }
  .zp-credit-amounts{ gap:20px; }
  .zp-path-card{ padding:14px; }
}