/* ======================================================================
   AVPartners Invoice Payment — v7 brand kit
   Same sheet, type, palette and components as the Digital Confirmation
   dialogue (avp-proposal-esignatures/public/style.css), plus a few
   payment-only pieces at the end.
   ====================================================================== */

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-paper:         #FFFFFF;
  --c-fog:           #EDEDF0;
  --c-locked:        #F4F4F6;
  --c-mist:          #D4D7E0;
  --c-ink:           #1E1E1E;
  --c-purple:        #522398;
  --c-purple-dark:   #41197c;
  --c-wordmark-grey: #5C5C60;

  --c-success:       #2E7D52;
  --c-error:         #C0392B;

  --eyebrow-track: 0.14em;
  --radius:        8px;
}

* { box-sizing: border-box; }

/* Rows/notes toggled by the script (e.g. the surcharge lines). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-fog);
}

body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--c-ink);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 20px;
}

/* ----------------------------------------------------------------------
   CARD — the "paper" surface, echoing a proposal page
   ---------------------------------------------------------------------- */
.sheet {
  position: relative;
  width: 100%;
  max-width: 720px;
  background: var(--c-paper);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(30, 30, 30, 0.04),
              0 12px 40px rgba(30, 30, 30, 0.10);
  overflow: hidden;
}

/* Single-A supergraphic, corner-anchored bottom-right, very quiet. */
.sheet .supergraphic {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 150px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

.sheet-inner {
  position: relative;
  z-index: 1;
  padding: 44px 48px 40px;
}

/* ----------------------------------------------------------------------
   HEADER — master signature
   ---------------------------------------------------------------------- */
.brand-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 28px;
}
.brand-head .signature { height: 30px; display: block; }
.brand-head .signature img { height: 100%; display: block; }

/* ----------------------------------------------------------------------
   TYPE
   ---------------------------------------------------------------------- */
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--c-purple);
  margin: 0 0 8px;
  line-height: 1.3;
}
.title {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.12;
  color: var(--c-ink);
  margin: 0 0 12px;
}
.lede {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-wordmark-grey);
  margin: 0;
  max-width: 52ch;
}

/* ----------------------------------------------------------------------
   PROGRESS — three steps, brand palette
   ---------------------------------------------------------------------- */
.progressbar {
  list-style: none;
  counter-reset: step;
  display: flex;
  margin: 32px 0 4px;
  padding: 0;
}
.progressbar li {
  flex: 1;
  position: relative;
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-mist);
}
.progressbar li::before {
  counter-increment: step;
  content: counter(step);
  width: 30px;
  height: 30px;
  line-height: 28px;
  display: block;
  margin: 0 auto 10px;
  border: 1.5px solid var(--c-mist);
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-mist);
  font-size: 12px;
}
.progressbar li::after {
  content: '';
  position: absolute;
  top: 14px;
  left: -50%;
  width: 100%;
  height: 1.5px;
  background: var(--c-mist);
  z-index: -1;
}
.progressbar li:first-child::after { content: none; }

.progressbar li.active {
  color: var(--c-purple);
}
.progressbar li.active::before {
  border-color: var(--c-purple);
  color: var(--c-purple);
}
.progressbar li.done {
  color: var(--c-purple);
}
.progressbar li.done::before {
  border-color: var(--c-purple);
  background: var(--c-purple);
  color: var(--c-paper);
  content: '✓';
}
.progressbar li.done::after,
.progressbar li.active::after {
  background: var(--c-purple);
}

/* ----------------------------------------------------------------------
   READ-ONLY DETAILS — fields grid (mirrors the proposal)
   ---------------------------------------------------------------------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 36px 0 2px;
}
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--c-purple);
  margin: 36px 0 12px;
}
/* When wrapped in a section-head, the head owns the spacing instead. */
.section-head .section-label { margin: 0; }
.section-hint {
  font-size: 12px;
  color: var(--c-wordmark-grey);
  margin: 0 0 12px;
}

/* Status tags that flag a section as locked vs editable. */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex: none;
}
.tag svg { width: 11px; height: 11px; display: block; }
.tag.locked {
  color: var(--c-wordmark-grey);
  background: var(--c-fog);
  border: 1px solid var(--c-mist);
}
.tag.editable {
  color: var(--c-purple);
  background: rgba(82, 35, 152, 0.07);
  border: 1px solid rgba(82, 35, 152, 0.22);
}

/* Read-only details: one seamless light-grey panel, fields stacked
   vertically, each padlocked to read as locked / non-editable. */
.fields {
  display: flex;
  flex-direction: column;
  background: var(--c-locked);
  border: 1px solid var(--c-mist);
  border-radius: var(--radius);
  padding: 4px 16px;
}
.fields .field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%235C5C60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='9' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  border-bottom: 1px solid rgba(30, 30, 30, 0.07);
  padding: 13px 28px 13px 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.fields .field:last-child { border-bottom: none; }
.fields .field .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--c-wordmark-grey);
}
.fields .field .v {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-ink);
}
.fields .field.total .v { font-weight: 600; }

/* ----------------------------------------------------------------------
   EDITABLE INPUTS
   ---------------------------------------------------------------------- */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 22px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--c-purple);
}
/* Editable inputs: fully boxed and white so they read as interactive. */
.form-control {
  font-family: inherit;
  font-size: 15px;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1.5px solid var(--c-mist);
  border-radius: var(--radius);
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-control::placeholder { color: var(--c-mist); }
.form-control:hover { border-color: var(--c-wordmark-grey); }
.form-control:focus {
  border-color: var(--c-purple);
  box-shadow: 0 0 0 3px rgba(82, 35, 152, 0.12);
}
.form-control.error { border-color: var(--c-error); }
.form-control.error:focus { box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12); }

/* ----------------------------------------------------------------------
   ACTIONS
   ---------------------------------------------------------------------- */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 34px;
}
.required-note {
  font-size: 12px;
  color: var(--c-wordmark-grey);
}
.btn-pay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  background: var(--c-purple);
  color: var(--c-paper);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.05s ease;
}
.btn-pay:hover  { background: var(--c-purple-dark); }
.btn-pay:active { transform: translateY(1px); }
.btn-pay:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.payment-errors {
  color: var(--c-error);
  font-size: 13px;
  font-weight: 500;
  margin: 16px 0 0;
  min-height: 1em;
}

/* ----------------------------------------------------------------------
   FINE PRINT FOOTER
   ---------------------------------------------------------------------- */
.fineprint {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--c-mist);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.fineprint .terms {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--c-wordmark-grey);
  max-width: 60ch;
}
.fineprint .terms a { color: var(--c-purple); text-decoration: none; }
.fineprint .terms a:hover { text-decoration: underline; }
.fineprint .iso { height: 44px; flex: none; }
.fineprint .iso img { height: 100%; display: block; }

/* ----------------------------------------------------------------------
   PAYMENT-ONLY PIECES
   ---------------------------------------------------------------------- */

/* Amounts still waiting on the customer's input. */
.fields .field .v.pending { color: var(--c-wordmark-grey); font-weight: 400; }

/* Explains the surcharge line, sits just under the summary panel. */
.fields + .section-hint { margin: 10px 0 0; }

/* "$" prefix on the manual amount input. */
.input-prefix { position: relative; display: flex; }
.input-prefix > span {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-wordmark-grey);
  pointer-events: none;
}
.input-prefix > .form-control { width: 100%; padding-left: 26px; }

/* Stripe mounts its secure iframes in these; reserve their loaded height
   so the page doesn't jump. The card fields sit on one row when there's
   room (66px) and wrap to two on phones, which the slot grows to fit. */
#address-element.stripe-slot { min-height: 221px; }
#payment-element.stripe-slot { min-height: 66px; }
/* Turnstile only shows itself when a visitor has to interact. */
.turnstile-slot.is-visible { margin-top: 24px; }

/* ----------------------------------------------------------------------
   RESULT PAGES (payment complete / unsuccessful / unavailable)
   ---------------------------------------------------------------------- */
body.result-page { align-items: center; }
.result { max-width: 560px; }
.result .sheet-inner { padding: 52px 48px 48px; }
.result .brand-head { justify-content: center; padding-bottom: 32px; }
.result .result-head { text-align: center; }
.result .icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  line-height: 1;
}
.result .icon.success { background: rgba(46, 125, 82, 0.10); color: var(--c-success); }
.result .icon.error   { background: rgba(192, 57, 43, 0.10); color: var(--c-error); }
.result .icon.info    { background: rgba(82, 35, 152, 0.08); color: var(--c-purple); }
.result .eyebrow { margin-bottom: 10px; }
.result .title   { margin-bottom: 12px; }
.result .lede    { margin: 0 auto; max-width: 44ch; }
.result .fields  { margin-top: 32px; text-align: left; }
.result .actions { justify-content: center; margin-top: 28px; }

/* ----------------------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width: 560px) {
  body { padding: 24px 14px; }
  .sheet-inner,
  .result .sheet-inner { padding: 30px 24px 28px; }
  .title { font-size: 23px; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn-pay { width: 100%; }
  .fineprint { flex-direction: column-reverse; align-items: flex-start; }
}