/* ==========================================================================
   The pay page — the invoice, continued.

   This page used to be dark, because it lives on the marketing site and the
   marketing site is dark. That was the wrong argument: nobody arrives here
   from the marketing site. They arrive from the invoice email, which is a
   light document on white stock — so clicking "Pay now" on a white page and
   landing on a near-black one broke the one continuity that matters when
   money is about to move.

   The colours are NOT written here. The template emits the emailed invoice's
   own palette as --p-* custom properties, read from SMC_Receipt::palette(),
   so the two documents cannot drift apart: change the receipt style in
   Settings and this page follows it. The fallbacks below are the shipped
   default (statement-cool) and exist only for the case where this template is
   somehow served without the plugin's palette.

   Every fg/bg pair used here was computed before it was written; the worst is
   4.60:1 (faint on the soft tint). See _tools/paycontrast.php.
   ========================================================================== */

/* Scoped to body.smc-pay for the same reason the portal scopes its own: the
   theme emits an inline `:root` brand block later in the cascade, and that
   block is the DARK site palette. Nothing here may read --bg/--ink/--acc. */
body.smc-pay {
  --ppage:    var(--p-page,  #EFF1F4);
  --pcard:    var(--p-card,  #FFFFFF);
  --pink:     var(--p-ink,   #11151A);
  --pmuted:   var(--p-muted, #4C535A);
  --pfaint:   var(--p-faint, #666D75);
  --pline:    var(--p-line,  #E0E4E9);
  --phair:    var(--p-hair,  #CDD3DA);
  --pacc:     var(--p-acc,   #5F6E2A);
  --psoft:    var(--p-soft,  #EEF2E3);
  --pgood:    var(--p-good,  #1F6350);
  --pon-acc:  var(--p-onacc, #FFFFFF);

  /* Not in the invoice palette: nothing in an email is ever overdue-red,
     because an email cannot go stale on screen. Computed against both grounds
     (6.69:1 on card, 5.91:1 on page). */
  --pbad:     #A8321C;

  /* The hover colour follows the accent instead of being pinned to one.
     It was #4C591F — olive — hard-coded here while --pacc follows the receipt
     palette, so on the live site (a blue accent) hovering the Pay button
     changed its HUE from blue to green. The palette already computes the right
     value as `accdeep`; the templates now emit it.

     Two declarations on purpose: a browser without color-mix() drops the second
     and keeps the first, which leaves hover the same colour as rest — no
     darkening, but never the wrong hue. */
  --pacc-dp:  var(--p-accdp, var(--pacc));
  --pacc-dp:  var(--p-accdp, color-mix(in oklab, var(--pacc) 82%, #000));

  /* Kept under their old names so no rule can silently reference a token that
     no longer exists and paint something invisible. */
  --pbg:      var(--ppage);
  --pline-s:  var(--pline);
  --pink-66:  var(--pmuted);
  --pink-46:  var(--pfaint);

  --pfd: 'Schibsted Grotesk', system-ui, sans-serif;
  --pfb: 'Manrope', system-ui, sans-serif;
  --pr: 12px;
  --prl: 22px;
}

body.smc-pay {
  margin: 0;
  background: var(--ppage);
  color: var(--pink);
  font-family: var(--pfb);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.smc-pay * { box-sizing: border-box; }
/* `:where()` on the scoping half, deliberately.
   `body.smc-pay a` scores (0,1,1) — a class AND an element — which outranks any
   plain single-class component rule like `.smcpay__bankgo { color: … }` (0,1,0).
   The Open button was the casualty: it painted its label in the accent colour
   ON the accent background, so the button looked like a solid green block with
   no text in it. :where() contributes nothing to specificity, so this base rule
   drops to (0,0,1) and every component can now simply state its own colour. */
:where(body.smc-pay) a { color: var(--pacc); text-decoration: none; }
:where(body.smc-pay) a:hover { color: var(--pink); }

/* The wordmark is a theme component and the theme is dark: left alone it
   painted near-white type on a near-white page. */
body.smc-pay .sm-wordmark { color: var(--pink); }
body.smc-pay .sm-wordmark__name { color: var(--pink); }
body.smc-pay .sm-wordmark__stop { color: var(--pacc); }

.smcpay { max-width: 1120px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 34px) 60px; }

.smcpay__head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
  border-bottom: 1px solid var(--pline);
}
.smcpay__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pmuted);
}
.smcpay__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pacc); }
.smcpay__dot--good { background: var(--pgood); }
.smcpay__dot--bad  { background: var(--pbad); }

.smcpay__titlerow {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(30px, 4vw, 52px) 0 clamp(24px, 3vw, 38px);
}
.smcpay__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pacc); }
.smcpay__title {
  font-family: var(--pfd);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.04;
  letter-spacing: -0.038em;
  margin: 12px 0 0;
  color: var(--pink);
}
.smcpay__lede { color: var(--pmuted); margin-top: 12px; max-width: 520px; }

/* The amount sits in the same soft tint the emailed invoice uses, so the
   figure a client is being asked for looks identical in both places. */
.smcpay__amount {
  padding: 16px 22px 18px;
  border-radius: 14px;
  background: var(--psoft);
}
.smcpay__amountlabel { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pmuted); }
.smcpay__amountvalue {
  font-family: var(--pfd);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 8px;
  color: var(--pink);
}

.smcpay__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }

.smcpay__panel {
  border: 1px solid var(--pline);
  border-radius: var(--prl);
  background: var(--pcard);
  padding: clamp(24px, 3vw, 34px);
}
.smcpay__panel--single { max-width: 620px; }
.smcpay__panel--pay { position: relative; }

/* ======================================================= the schedule ===
 * What the client is actually paying, drawn.
 *
 * A sentence saying "this is half" gets skimmed; a large AMOUNT DUE gets read
 * as the price of the job. This is the same schedule the emailed invoice
 * carries — whole price, a proportional bar, both payments with the one due
 * now marked — so the shape of the deal survives the click from the email to
 * the page where the money leaves.
 */
.smcpay__sched {
  margin: 0 0 24px;
  padding: 20px 22px 18px;
  border: 1px solid var(--pline);
  border-radius: 14px;
  background: var(--ppage);
}
/* Aligned to the top, not the baseline. On a baseline the chip floated level
   with the $400.00 and read as a caption on the figure rather than a label on
   the whole block. */
.smcpay__schedtop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: flex-start;
  justify-content: space-between;
}
.smcpay__schedlabel {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pmuted);
}
.smcpay__schedtotal {
  font-family: var(--pfd);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 3px;
  color: var(--pink);
}
.smcpay__schedtag {
  margin-top: -2px;
  padding: 5px 11px;
  border-radius: 99px;
  background: var(--psoft);
  color: var(--pacc);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.smcpay__schedbar {
  display: flex;
  height: 9px;
  margin: 14px 0 4px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--phair);
}
.smcpay__schedbar span { display: block; height: 100%; background: var(--pacc); }
/* The half not being paid now is drawn, but quietly — it is context, not a
   second thing to act on. */
.smcpay__schedbar span.is-off { background: var(--phair); }

.smcpay__schedrows { list-style: none; margin: 0; padding: 0; }
.smcpay__schedrows li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
}
.smcpay__schedrows li + li { border-top: 1px solid var(--pline); }
.smcpay__scheddot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 50%;
  border: 2px solid var(--phair);
  background: transparent;
}
.smcpay__schedrows li.is-on .smcpay__scheddot { border-color: var(--pacc); background: var(--pacc); }
.smcpay__schedmain { flex: 1; min-width: 0; }
.smcpay__schedmain b {
  display: block;
  font-family: var(--pfd);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pfaint);
}
.smcpay__schedmain em {
  display: block;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.4;
  margin-top: 1px;
  color: var(--pfaint);
}
.smcpay__schedamt {
  flex: 0 0 auto;
  font-family: var(--pfd);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--pfaint);
}
.smcpay__schedrows li.is-on .smcpay__schedmain b,
.smcpay__schedrows li.is-on .smcpay__schedamt { color: var(--pink); font-weight: 700; }
.smcpay__schedrows li.is-on .smcpay__schedmain em { color: var(--pmuted); }

@media (max-width: 420px) {
  .smcpay__schedtag { align-self: flex-start; }
}

/* Off-stage: laid out at its real width, but neither seen nor reachable.
   `hidden` and `display:none` both collapse the box to nothing, and PayPal
   measures its container at the moment it draws — a zero-width container
   produced a zero-height PayPal button that never recovered, so choosing
   PayPal showed a blank panel. This keeps the width so PayPal draws properly,
   and the step is revealed by removing the class. */
/* `visibility`, not opacity alone.
   The panels animate in with smcpay-rise, whose last frame is opacity:1, and
   it runs with fill-mode `both` — an animation beats a plain `opacity: 0`, so
   the off-stage step stayed fully visible and both steps painted on top of
   each other. An important declaration outranks an animation, and visibility
   is not animated at all, so both are set.
   visibility:hidden still reports real box dimensions, which is the whole
   point here: PayPal must be able to measure the container. */
.smcpay__step.is-offstage {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
  z-index: -1;
}

/* EVERY gateway's payment box is laid out; only the chosen one is seen.
   WooCommerce hides the unselected boxes with display:none, and PayPal draws
   its buttons into those boxes on page load. A box with no layout is a
   container of zero width, so PayPal rendered #item-paypal at 0x0 and never
   redrew it — the card button worked only because its box happened to be the
   visible one. Off-stage gives every box a real width to measure. */
.smcpay__panel--pay .payment_box {
  display: block !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
  z-index: -1;
}
.smcpay__panel--pay .payment_box.smcpay-chosen {
  position: static;
  width: auto;
  /* Both !important, because the off-stage rule above is: without it the
     chosen box would inherit opacity:0 !important and stay invisible. */
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
  z-index: auto;
}

/* PPCP's own per-gateway button containers, same treatment and same reason.
   #ppc-button-ppcp-gateway carried display:none, so PayPal drew its button
   into a 0x0 box: the panel showed a blank gap above the card button, which
   was a rendered PayPal button with no size. PPCP toggles these itself when
   WooCommerce's checkout script reports a change; on this template that
   handshake does not happen, so the containers are laid out here and the
   chosen one is marked by the page's own script. */
.smcpay__panel--pay [id^="ppc-button-"] {
  display: block !important;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  visibility: hidden;
  opacity: 0 !important;
  pointer-events: none;
  z-index: -1;
}
.smcpay__panel--pay [id^="ppc-button-"].smcpay-chosen {
  position: static;
  width: auto;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto;
  z-index: auto;
}
/* The wrapper must be a containing block, or the absolute children escape it. */
.smcpay__panel--pay .ppc-button-wrapper { position: relative; }

/* WooCommerce's own furniture, silenced.
   Laying every payment box out (above) also brought back the parts that were
   previously collapsed with it: a lilac description panel repeating "Pay via
   PayPal." under a heading that already says PayPal, and a grey band for the
   Interac row. The buttons themselves live in .form-row, OUTSIDE these, so
   silencing them costs nothing. */
.smcpay__panel--pay.is-stepped li.wc_payment_method {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.smcpay__panel--pay.is-stepped li.wc_payment_method > label { display: none !important; }

.smcpay__panel--pay .payment_box {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--pmuted);
}
.smcpay__panel--pay .payment_box::before,
.smcpay__panel--pay .payment_box::after { display: none !important; }

/* A box whose only content is the gateway's one-line description repeats the
   step heading. Anything richer than that — card fields, instructions — still
   shows. */
.smcpay__panel--pay .payment_box > p:only-child { display: none !important; }

/* The empty band under the step heading.
   WooCommerce's method list is replaced by the studio's own choices in step 1,
   so in step 2 it is nothing but reserved height — roughly 190px of it, which
   is why the buttons sat so far from the heading. Taken out of the flow rather
   than display:none'd, because the radios inside it are what the page sets to
   choose a gateway, and PPCP reads them. */
.smcpay__panel--pay.is-stepped ul.wc_payment_methods {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}
.smcpay__panel--pay #payment { padding-top: 0; }
.smcpay__panel--pay .form-row.place-order { margin-top: 0; }

/* ==================================================== the moment after paying ===
 * The receipt page. Same tokens, same furniture as the pay page, because the
 * client has just come from it and this should read as the last page of one
 * document rather than the first page of another.
 */
.smcty__confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Behind everything and deaf to the pointer: a celebration must never sit
     between the client and the receipt they came to read. */
  z-index: 0;
  pointer-events: none;
}
body.smc-thanks .smcpay { position: relative; z-index: 1; }

/* Two columns: the greeting, and the number they came to check.
   As one 640px column this left ~400px of empty page to its right and pushed
   the amount below the fold.

   Top-aligned, not centred. Centring two columns of different heights lines up
   nothing: the eyebrow, the headline and the figure all landed at their own
   arbitrary heights, which is most of what made this hero look loose. */
.smcty__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  align-items: start;
  gap: 30px clamp(28px, 4vw, 56px);
  padding: clamp(26px, 3.6vw, 44px) 0 clamp(24px, 2.8vw, 34px);
}
.smcty__herotext { max-width: 640px; }

/* The two label rows are the same height, so whatever sits under them starts
   on the same line: the greeting and the figure. This is the alignment; it is
   not decoration, and changing either height breaks it. */
.smcty__eyebrowrow,
.smcty__stubhead {
  display: flex;
  align-items: center;
  min-height: 64px;
}
.smcty__eyebrowrow { gap: 16px; }
.smcty__eyebrowrow .smcpay__eyebrow { line-height: 1.3; }

/* A hairline and plain type, not a card. The invoice's --p-soft tint is right
   on a white invoice panel and wrong on the page's own #F2F6FB, where it is
   four values away from the ground and reads as a stray rectangle. */
.smcty__stub {
  min-width: 0;
  padding-left: clamp(20px, 2.4vw, 32px);
  border-left: 1px solid var(--pline);
}
.smcty__stub .smcpay__amountvalue { margin-top: 14px; }
.smcty__amountof { margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--pmuted); }
.smcty__paidline { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--pmuted); }
.smcty__paidline b { font-weight: 600; color: var(--pink); }

@media (max-width: 900px) {
  /* Stacked, so the vertical rule becomes a horizontal one and the label row
     no longer needs to reserve the tick's height. */
  .smcty__hero { grid-template-columns: 1fr; gap: 24px; }
  .smcty__stub {
    padding: 22px 0 0;
    border-left: 0;
    border-top: 1px solid var(--pline);
  }
  .smcty__stubhead { min-height: 0; }
  .smcty__stub .smcpay__amountvalue { margin-top: 8px; }
}
/* Solid, not tinted.
   This was a 26px glyph in dark green on a near-white #EEF5FF disc, beside a
   46px headline: the palest thing on the page in the spot carrying the news.
   Filled, it reads as a mark rather than an icon. White on --p-good measures
   7.1:1, well past the 3:1 a graphic needs. */
.smcty__tick {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pgood);
  color: #fff;
  /* Lands once, then holds. An animation that repeats turns a confirmation
     into a fidget. */
  animation: smcty-pop 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.smcty__tick svg { width: 30px; height: 30px; stroke-width: 2.6; }
@keyframes smcty-pop {
  from { opacity: 0; transform: scale(0.55); }
  60%  { transform: scale(1.07); }
  to   { opacity: 1; transform: scale(1); }
}
.smcty__hero .smcpay__title { margin-top: 12px; }

/* The warm line, set larger than the practical one beneath it — the order on
   the page is: you paid, we are glad, here is what happens. */
.smcty__excited {
  max-width: 24ch;
  margin: 16px 0 0;
  font-family: var(--pfd);
  font-size: clamp(19px, 2.2vw, 25px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--pacc);
  text-wrap: balance;
}
.smcty__hero .smcpay__lede { max-width: 56ch; font-size: 16px; margin-top: 14px; }

/* Only the studio sees this, and it must be unmistakable — a preview that
   looks like the real thing is how a screenshot ends up quoted as a payment. */
.smcty__previewnote {
  display: inline-block;
  margin: 18px 0 0;
  padding: 7px 13px;
  border: 1px dashed var(--pbad);
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pbad);
}

.smcty__amount {
  padding: 16px 20px 18px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: var(--psoft);
}

/* What happens next: three facts, not a paragraph nobody reads. */
.smcty__next { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.smcty__next li {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: 1px solid var(--pline);
}
.smcty__next li:last-child { border-bottom: 0; }
.smcty__next b {
  font-family: var(--pfd);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--pink);
}
.smcty__next em { font-style: normal; font-size: 13.5px; line-height: 1.55; color: var(--pmuted); }
.smcty__next li.is-gift b { color: var(--pacc); }

.smcty__home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pacc);
}
.smcty__home:hover { color: var(--pink); }

@media (prefers-reduced-motion: reduce) {
  .smcty__tick { animation: none; }
}

/* ============================================ paying more than the deposit ===
 * Two amounts, both named. A radio pair rather than a checkbox, because these
 * are different sums of money and neither should be agreed to by implication.
 */
.smcpay__scope { border: 0; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; }
.smcpay__scopelegend {
  padding: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--pmuted);
}
.smcpay__scopeopt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--pline);
  border-radius: var(--pr);
  background: var(--ppage);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.smcpay__scopeopt:hover { border-color: var(--pacc); }
.smcpay__scopeopt.is-on { border-color: var(--pacc); background: var(--psoft); }
.smcpay__scopeopt input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: var(--pacc); }
.smcpay__scopemain { flex: 1; min-width: 0; }
.smcpay__scopemain b { display: block; font-family: var(--pfd); font-size: 14.5px; font-weight: 600; color: var(--pink); }
.smcpay__scopemain em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.4; color: var(--pmuted); margin-top: 1px; }
.smcpay__scopeamt {
  flex: 0 0 auto;
  font-family: var(--pfd);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: var(--pink);
}

/* ================================================================ the gift ===
 * Deliberately NOT styled like the payment choices above it. This is optional
 * and it is somebody else's cause, so it reads as a note on the invoice rather
 * than as another thing to buy.
 */
/* A solid hairline, not a dashed one. Dashes read as "unfinished" or "drop
   something here", and this is a real, considered ask. */
.smcpay__give {
  margin: 0 0 22px;
  padding: 18px 20px 20px;
  border: 1px solid var(--pline);
  border-radius: 14px;
  background: var(--ppage);
}
.smcpay__givehead { display: flex; gap: 14px; align-items: flex-start; }
.smcpay__givemark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  padding: 3px;
  border-radius: 10px;
  /* White behind the mark: HOPCP's logo is colour on transparency and needs a
     neutral ground of its own, not the page tint. */
  background: #fff;
  border: 1px solid var(--pline);
  color: var(--pacc);
  overflow: hidden;
}
.smcpay__givemark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.smcpay__givewords { min-width: 0; }
.smcpay__givetitle {
  margin: 0;
  font-family: var(--pfd);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--pink);
}
.smcpay__giveblurb { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--pmuted); }
.smcpay__giveblurb a { color: var(--pacc); text-decoration: underline; text-underline-offset: 2px; }

/* The amounts get their own row so they always sit together, whatever the
   column width. Equal columns, so three buttons read as one control rather
   than three of different widths. */
.smcpay__giveamounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.smcpay__giverow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.smcpay__giverow .smcpay__givecustom { flex: 1 1 150px; }
.smcpay__givebtn,
.smcpay__giveadd,
.smcpay__giveclear {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.smcpay__givebtn { border: 1px solid var(--pline); background: var(--pcard); color: var(--pink); }
.smcpay__givebtn:hover { border-color: var(--pacc); }
.smcpay__givebtn.is-on { border-color: var(--pacc); background: var(--psoft); color: var(--pacc); }

.smcpay__givecustom {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  min-height: 42px;
  border: 1px solid var(--pline);
  border-radius: 8px;
  background: var(--pcard);
}
.smcpay__givecur { font-size: 14px; color: var(--pfaint); }
.smcpay__givecustom input {
  /* Fills its label rather than a fixed width: at 108px the placeholder
     clipped to "Another amoı", which reads as a rendering fault, not a hint. */
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--pink);
  font: inherit;
  font-size: 14px;
  padding: 0 4px;
}
.smcpay__givecustom input:focus { outline: none; }
.smcpay__givecustom:focus-within { border-color: var(--pacc); }

.smcpay__giveadd { border: 1px solid transparent; background: var(--pacc); color: var(--pon-acc); }
.smcpay__giveadd:hover { background: var(--pacc-dp); }
.smcpay__giveclear { border: 1px solid transparent; background: transparent; color: var(--pmuted); }
.smcpay__giveclear:hover { color: var(--pbad); }

.smcpay__givestate { margin: 10px 0 0; font-size: 13px; color: var(--pmuted); }
.smcpay__givestate.is-bad { color: var(--pbad); }

/* A row the client added rather than one we invoiced. */
.smcpay__added td { color: var(--pink); }

@media (max-width: 480px) {
  .smcpay__giverow > * { flex: 1 1 auto; }
  .smcpay__givecustom input { width: 100%; }
}

/* Billed to: the name leads, the business and email sit under it. */
.smcpay__billedsub {
  display: block;
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: var(--pfaint);
  margin-top: 2px;
}

/* The chosen method now rides in the step line rather than as a headline. */
.smcpay__eyebrowsep { margin: 0 6px; opacity: 0.5; }

/* Shown while PayPal's button is opening its form — about three and a half
   seconds, all of it PayPal's. Without it the button reads as broken and gets
   pressed twice. */
.smcpay__opening {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--pmuted);
}
.smcpay__spin {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--pline);
  border-top-color: var(--pacc);
  animation: smcpay-spin 0.7s linear infinite;
}
@keyframes smcpay-spin { to { transform: rotate(360deg); } }
/* Under reduced motion it holds still and the sentence does the work. */
@media (prefers-reduced-motion: reduce) {
  .smcpay__spin { animation: none; border-top-color: var(--pacc); }
}

.smcpay__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--pline); }
.smcpay__meta--stack { grid-template-columns: 1fr 1fr; border-bottom: 0; padding: 18px 0 0; }
.smcpay__meta span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pfaint); margin-bottom: 6px; }
.smcpay__meta b { font-family: var(--pfd); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: var(--pink); }

.smcpay__items { width: 100%; border-collapse: collapse; margin: 22px 0 0; }
.smcpay__items th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pfaint); padding-bottom: 10px; border-bottom: 1px solid var(--pline); }
.smcpay__items td { padding: 14px 0; border-bottom: 1px solid var(--pline); font-size: 15px; color: var(--pink); }
.smcpay__items tr:last-child td { border-bottom: 0; }
.smcpay__figure { text-align: right; font-family: var(--pfd); font-weight: 600; white-space: nowrap; }
.smcpay__qty { display: block; font-size: 13px; color: var(--pfaint); margin-top: 4px; }

.smcpay__totals { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--pline); }
.smcpay__totals > div { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; font-size: 15px; color: var(--pmuted); }
/* On an invoice there are subtotal and tax rows between the items table and
   the grand total, so both of those rules read as structure. On the thank-you
   page there is nothing between them: the two hairlines land 42px apart with
   empty space between, which reads as a blank line item somebody forgot to
   fill in. When the grand total is the only row, one rule is enough. */
.smcpay__totals > .smcpay__grand:only-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.smcpay__totals .smcpay__grand {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--pline);
  font-family: var(--pfd);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--pink);
}

.smcpay__payhead { font-family: var(--pfd); font-weight: 700; font-size: clamp(21px, 2.2vw, 27px); letter-spacing: -0.03em; margin: 12px 0 22px; color: var(--pink); }
.smcpay__paid { font-family: var(--pfd); font-weight: 700; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.032em; margin: 12px 0 0; color: var(--pink); }
.smcpay__note { color: var(--pmuted); font-size: 14.5px; margin-top: 16px; }
.smcpay__secure { color: var(--pfaint); font-size: 13px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pline); }

.smcpay__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  justify-content: space-between;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--pline);
  font-size: 13px;
  color: var(--pfaint);
}

/* ---- WooCommerce's own payment output, restyled in place -----------------
   The gateway renders its hosted fields inside these containers. The field
   interiors belong to the provider's appearance API and will never match
   exactly — that is expected. */
.smcpay .wc_payment_methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.smcpay .wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 14px 16px;
  border: 1px solid var(--pline);
  border-radius: var(--pr);
  cursor: pointer;
  font-weight: 600;
  transition: border-color 0.24s, background 0.24s;
}
.smcpay .wc_payment_method > label:hover { border-color: var(--pacc); }
.smcpay .wc_payment_method input[type="radio"]:checked + label { border-color: var(--pacc); background: var(--psoft); }
.smcpay .payment_box {
  padding: 16px;
  margin-top: 2px;
  border: 1px solid var(--pline);
  border-radius: var(--pr);
  background: var(--ppage);
  font-size: 14.5px;
  color: var(--pmuted);
}
/* `.smcpay button[type="submit"]` was a blanket, and it caught every submit
   button on every page that uses this shell — not just WooCommerce's. It scores
   (0,2,1), so it outranked `.smcpay__btn` and `.smcpay__btn--quiet` and painted
   both of the quote page's buttons the same accent, full width, at 52px. The
   :not() confines it to the buttons it was written for; our own carry a class
   and style themselves. */
.smcpay #place_order,
.smcpay .button.alt,
.smcpay button[type="submit"]:not(.smcpay__btn) {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  padding: 16px 28px;
  border: 0;
  border-radius: var(--pr);
  background: var(--pacc);
  color: var(--pon-acc);
  font-family: var(--pfb);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
}
.smcpay #place_order:hover,
.smcpay .button.alt:hover,
.smcpay button[type="submit"]:not(.smcpay__btn):hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(17, 21, 26, 0.16); }
.smcpay .woocommerce-error,
.smcpay .woocommerce-info,
.smcpay .woocommerce-message {
  list-style: none;
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: var(--pr);
  border: 1px solid var(--pline);
  background: var(--ppage);
  color: var(--pink);
  font-size: 14.5px;
}
.smcpay .woocommerce-error { border-color: var(--pbad); color: var(--pbad); }

@media (prefers-reduced-motion: reduce) {
  body.smc-pay *, body.smc-pay *::before, body.smc-pay *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* --------------------------------------------------------------------------
   Interac e-Transfer.
   Everything here uses the pay page's own tokens, so it follows the palette
   rather than carrying a second set of colours that can fall out of step —
   which is exactly how an earlier version ended up with white-on-white Copy
   buttons.
   -------------------------------------------------------------------------- */
.smcpay__etransfer {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--pline);
}
.smcpay__etsteps {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
  counter-reset: et;
}
.smcpay__etsteps > li { counter-increment: et; display: grid; gap: 14px; }
.smcpay__etsteps > li > span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pfd);
  font-size: 15px;
  font-weight: 600;
  color: var(--pink);
}
.smcpay__etsteps > li > span::before {
  content: counter(et);
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--pacc);
  color: var(--pon-acc);
  font-size: 12px;
  font-weight: 700;
}

.smcpay__etfields { display: grid; gap: 10px; }
.smcpay__etfield {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--pline);
  border-radius: var(--pr);
  background: var(--ppage);
}
.smcpay__etfield em {
  flex: 0 0 132px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pfaint);
}
.smcpay__etfield b {
  flex: 1;
  min-width: 0;
  font-family: var(--pfd);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--pink);
  word-break: break-word;
}
.smcpay__copy {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--phair);
  border-radius: 8px;
  background: var(--pcard);
  color: var(--pink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.smcpay__copy:hover { border-color: var(--pacc); color: var(--pacc); background: var(--psoft); }

/* --- banks ------------------------------------------------------------- */
/* A brand-coloured monogram rather than the bank's actual logo. Bank logos are
   trademarks with their own usage rules, and hotlinking them from the banks'
   own servers would break the moment they move a file. The colour plus the
   name is recognisable and carries no such risk. */
.smcpay__bankmark {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-family: var(--pfd);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.smcpay__etnote { font-size: 13px; line-height: 1.6; color: var(--pfaint); margin: 6px 0 0; }

@media (max-width: 600px) {
  .smcpay__etfield { flex-wrap: wrap; gap: 8px 12px; }
  .smcpay__etfield em { flex-basis: 100%; }
  }
/* --- bank picker -------------------------------------------------------
   Sixteen tiles was a wall. One row: a mark, a select, and a button. */
.smcpay__bankpick {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--pline);
  border-radius: var(--pr);
  background: var(--ppage);
}
.smcpay__bankmark--pick {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: var(--phair);
  color: var(--pink);
  font-size: 11px;
  overflow: hidden;
}
.smcpay__bankmark--pick img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
.smcpay__bankpick select {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--pink);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  appearance: none;
}
.smcpay__bankpick select:focus-visible { outline: 2px solid var(--pacc); outline-offset: 2px; }
/* The dropdown list itself is drawn by the OS, which does not inherit the
   page -- these keep the options readable. */
.smcpay__bankpick option { background: var(--pcard); color: var(--pink); }
.smcpay__bankgo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 8px;
  background: var(--pacc);
  color: var(--pon-acc);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s, background 0.2s;
}
.smcpay__bankgo[aria-disabled="true"] {
  background: var(--phair);
  color: var(--pmuted);
  pointer-events: none;
}
.smcpay__bankgo:hover { background: var(--pacc-dp); color: var(--pon-acc); }

/* --------------------------------------------------------------------------
   WooCommerce's order-pay form, made to belong on this page.
   It arrives as unstyled classic markup: radios floating above their labels
   and a totals table repeating the invoice already shown on the left. None of
   that is WooCommerce's fault -- it is a template meant for a shop, dropped
   into an invoice.
   -------------------------------------------------------------------------- */

/* The invoice is already itemised in the left-hand panel. Repeating it here
   is the single biggest source of clutter on the page. */
.smcpay__panel--pay .shop_table,
.smcpay__panel--pay .woocommerce-checkout-review-order-table { display: none; }

.smcpay__panel--pay #payment,
.smcpay__panel--pay .woocommerce-checkout-payment {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.smcpay__panel--pay ul.wc_payment_methods,
.smcpay__panel--pay .wc_payment_methods {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  display: grid;
  gap: 8px;
}

/* The radio sat on its own line above a separate bordered box, so the control
   and the thing it selects looked unrelated. One row, one target. */
.smcpay__panel--pay li.wc_payment_method {
  margin: 0;
  padding: 0;
  list-style: none;
}
.smcpay__panel--pay li.wc_payment_method > label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 15px 18px;
  border: 1px solid var(--pline);
  border-radius: var(--pr);
  background: var(--ppage);
  font-family: var(--pfd);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--pink);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.smcpay__panel--pay li.wc_payment_method > label:hover { border-color: var(--pacc); }
.smcpay__panel--pay li.wc_payment_method > input[type="radio"] {
  position: static;
  width: 18px;
  height: 18px;
  margin: 0 0 0 18px;
  accent-color: var(--pacc);
  flex: 0 0 auto;
}
/* The input precedes the label in WooCommerce's markup; pull them onto one row. */
.smcpay__panel--pay li.wc_payment_method {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--pline);
  border-radius: var(--pr);
  background: var(--ppage);
  overflow: hidden;
}
.smcpay__panel--pay li.wc_payment_method > label {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.smcpay__panel--pay li.wc_payment_method:hover { border-color: var(--pacc); }
.smcpay__panel--pay li.wc_payment_method img { max-height: 24px; width: auto; margin-left: auto; }

.smcpay__panel--pay .payment_box {
  margin: 0;
  padding: 14px 18px;
  border-radius: 0;
  background: var(--ppage);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pmuted);
}
.smcpay__panel--pay .payment_box::before { display: none; }

/* Legal text belongs at the bottom, quietly. */
.smcpay__panel--pay .woocommerce-privacy-policy-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--pfaint);
  margin: 16px 0 0;
}
.smcpay__panel--pay .woocommerce-privacy-policy-text p { margin: 0; }

.smcpay__panel--pay .form-row.place-order { padding: 0; margin: 18px 0 0; }
.smcpay__panel--pay #place_order,
.smcpay__panel--pay button[name="woocommerce_pay"] {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--pr);
  background: var(--pacc);
  color: var(--pon-acc);
  font-family: var(--pfd);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.smcpay__panel--pay #place_order:hover { background: var(--pacc-dp); }

/* PayPal's own buttons and its Pay Later banner render in iframes we cannot
   style. Constrain them so they sit inside the column instead of setting the
   width of the page. */
.smcpay__panel--pay .paypal-buttons,
.smcpay__panel--pay iframe { max-width: 100% !important; }
.smcpay__panel--pay .ppcp-messages { margin: 0 0 14px; }

/* PayPal's Pay Later banner renders as an advertisement in an iframe we cannot
   style. Instalment messaging belongs on a shop, not on an invoice a client
   has already agreed to. Hidden on the pay page only; untouched elsewhere. */
.smcpay__panel--pay .ppcp-messages,
.smcpay__panel--pay [data-pp-message],
.smcpay__panel--pay .ppcp-messages-container { display: none !important; }

/* PayPal's own card button is an iframe, so only its surroundings can be
   styled. Give it room and a matching edge rather than leaving it butted
   against the text above it. */
.smcpay__panel--pay .ppcp-button-container,
.smcpay__panel--pay .paypal-buttons {
  margin-top: 14px;
  border-radius: var(--pr);
  overflow: hidden;
}

/* WooCommerce puts the privacy notice between the methods and the button.
   Move it below, where legal text belongs. */
.smcpay__panel--pay .woocommerce-privacy-policy-text { order: 99; }
.smcpay__panel--pay .woocommerce-checkout-payment { display: flex; flex-direction: column; }
.smcpay__panel--pay .wc_payment_methods { order: 1; }
.smcpay__panel--pay .form-row.place-order { order: 2; }

/* ------------------------------------------------ two-step payment --- */
/* Step 1 asks one question; step 2 shows one answer. Without JS both are
   visible and the page behaves as the single form it used to be. */
.smcpay__choose { display: grid; gap: 10px; margin-top: 20px; }

.smcpay__choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	text-align: left;
	padding: 18px 20px;
	border: 1px solid var(--pline);
	border-radius: 12px;
	background: var(--ppage);
	color: var(--pink);
	font: inherit;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.smcpay__choice:hover {
	border-color: var(--pacc);
	background: var(--psoft);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(17, 21, 26, 0.07);
}
.smcpay__choice:focus-visible { outline: 2px solid var(--pacc); outline-offset: 2px; }

/* `flex: 1`, and it matters.
   With three children and justify-content:space-between, the first sits at the
   start, the last at the end, and the MIDDLE one is centred in whatever space
   is left — so each row's text started at a different x depending on how long
   its own longest line happened to be. Letting the text block take the free
   space leaves nothing to distribute, and all three names line up. */
.smcpay__choicemain {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
.smcpay__choicename { font-weight: 600; font-size: 15.5px; color: var(--pink); }
/* Colour, not opacity: an opacity of 0.62 on this ground measured below 4.5. */
.smcpay__choicedesc { font-size: 13px; line-height: 1.45; color: var(--pmuted); }
.smcpay__choicego { color: var(--pfaint); font-size: 17px; flex: 0 0 auto; }
.smcpay__choice:hover .smcpay__choicego { color: var(--pacc); }

.smcpay__back {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 16px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pmuted);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	min-height: 44px;
}
.smcpay__back:hover { color: var(--pink); }

/* Once a method is chosen the radio list has done its job and only adds
   a second way to answer a question already answered. It stays in the DOM
   because the gateway scripts and the POST both depend on it. */
.smcpay__panel--pay.is-stepped ul.wc_payment_methods > li > label,
.smcpay__panel--pay.is-stepped ul.wc_payment_methods > li > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.smcpay__panel--pay.is-stepped ul.wc_payment_methods {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
}
.smcpay__panel--pay.is-stepped ul.wc_payment_methods > li { border: 0; padding: 0; }

/* --------------------------------------------------- pay page meta --- */
/* Three equal fixed columns of ~137px, and an email is longer than that:
   measured at 1600px the billed-to value ended 62px outside its own panel.
   The two dates are short and known, so they take what they need and the
   address gets the rest — and it may break mid-string, because an email
   has no spaces to wrap at. */
.smcpay__meta {
	grid-template-columns: max-content max-content minmax(0, 1fr);
	gap: 12px 22px;
	align-items: start;
}
.smcpay__meta > div { min-width: 0; }
.smcpay__meta b {
	overflow-wrap: anywhere;
	word-break: break-word;
	display: block;
	line-height: 1.35;
}
/* Stacked on a phone, where three columns cannot hold an address at all. */
@media (max-width: 560px) {
	.smcpay__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.smcpay__meta > div:last-child { grid-column: 1 / -1; }
}

/* The chooser is short; without this the panel stretches to the invoice
   beside it and leaves a large empty well under three buttons. */
.smcpay__grid { align-items: start; }

/* ============================================== life, in moderation === *
 * A payment page earns motion only where it helps. Everything below either
 * points the eye at something or confirms an action. All of it stops under
 * prefers-reduced-motion.
 */

/* ---------------------------------------------------- method marks --- */
/* Three near-identical text blocks were slow to tell apart. A drawn shape —
   not a brand logo, which would be a third-party image on a payment page —
   separates card from wallet from bank at a glance. */
.smcpay__choice { gap: 14px; }

.smcpay__choiceicon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 11px;
	background: var(--psoft);
	color: var(--pacc);
	transition: background 0.2s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.smcpay__choice:hover .smcpay__choiceicon {
	background: var(--pcard);
	transform: scale(1.06);
}
.smcpay__choice { align-items: center; }
.smcpay__choicego { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease; }
.smcpay__choice:hover .smcpay__choicego { transform: translateX(4px); }
.smcpay__choice:active { transform: translateY(0); }

/* ------------------------------------------------------- entrance --- */
/* Staggered by --i, set per element in the template. The amount lands first,
   then the lines, so the page assembles in reading order rather than all at
   once. 40ms apart: enough to read as sequence, too fast to wait for. */
@keyframes smcpay-rise {
	from { opacity: 0; transform: translateY(9px); }
	to   { opacity: 1; transform: none; }
}
.smcpay__titlerow,
.smcpay__panel,
.smcpay__choice,
.smcpay__items tbody tr {
	animation: smcpay-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: calc(var(--i, 0) * 40ms);
}
.smcpay__titlerow { --i: 0; }
.smcpay__panel:first-of-type { --i: 1; }
.smcpay__panel--pay { --i: 2; }

/* The step swap crossfades rather than jumping, so it reads as the same panel
   changing its mind rather than a new page. */
.smcpay__step:not([hidden]) {
	animation: smcpay-rise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* --------------------------------------------------- invoice lines --- */
.smcpay__items tbody tr { transition: background 0.16s ease; }
.smcpay__items tbody tr:hover { background: var(--ppage); }

/* ------------------------------------------------------- due date --- */
.smcpay__when {
	display: inline-block;
	margin-top: 3px;
	font-size: 11.5px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--pfaint);
}
.smcpay__when.is-soon { color: var(--pacc); }
.smcpay__when.is-late { color: var(--pbad); }

/* ------------------------------------------------ copy confirmation --- */
/* Copying was silent, on the one screen where a mistyped address sends money
   to nobody. The button says so, and holds it long enough to be read. */
.smcpay__copy {
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.smcpay__copy.is-done {
	background: var(--psoft);
	border-color: var(--pgood);
	color: var(--pgood);
}

/* ---------------------------------------------------- status pulse --- */
/* Slow enough to register as "live" rather than to nag. Only while unpaid. */
@keyframes smcpay-breathe {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.45; transform: scale(0.86); }
}
.smcpay__dot:not(.smcpay__dot--good):not(.smcpay__dot--bad) {
	animation: smcpay-breathe 2.8s ease-in-out infinite;
}

/* ------------------------------------------------------------ off --- */
@media (prefers-reduced-motion: reduce) {
	.smcpay__titlerow,
	.smcpay__panel,
	.smcpay__choice,
	.smcpay__items tbody tr,
	.smcpay__step:not([hidden]),
	.smcpay__dot {
		animation: none !important;
	}
	.smcpay__choice,
	.smcpay__choiceicon,
	.smcpay__choicego,
	.smcpay__copy { transition: none !important; }
	.smcpay__choice:hover { transform: none; }
}


/* ------------------------------------------------- find an invoice ---
   The public "I lost my link" page. Narrow on purpose: it is two fields and
   an explanation, and a full-width card would make it look like there ought
   to be more on it. */
.smcfind { max-width: 560px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0 60px; }
.smcfind .smcpay__lede { margin-top: 12px; }

.smcfind__form {
	margin: 26px 0 0;
	padding: 22px;
	border: 1px solid var(--pline);
	border-radius: 14px;
	background: var(--pcard);
}
.smcfind__field { display: block; margin-bottom: 16px; }
.smcfind__field > span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pmuted);
	margin-bottom: 7px;
}
.smcfind__field input {
	width: 100%;
	min-height: 46px;
	padding: 12px 14px;
	border: 1px solid var(--pline);
	border-radius: 10px;
	background: var(--ppage);
	color: var(--pink);
	font: inherit;
}
.smcfind__field input:focus {
	outline: none;
	border-color: var(--pacc);
	box-shadow: 0 0 0 3px var(--psoft);
}
.smcfind__form .smcpay__btn { width: 100%; margin-top: 4px; }

/* The one thing this page says back. Never carries invoice detail — the
   wording is identical whether or not anything matched. */
.smcfind__note {
	margin: 22px 0 0;
	padding: 14px 16px;
	border-radius: 10px;
	font-size: 14.5px;
	line-height: 1.55;
	border: 1px solid var(--pline);
	background: var(--pcard);
	color: var(--pink);
}
.smcfind__note--ok { border-color: var(--pgood); background: var(--psoft); }
.smcfind__note--err { border-color: var(--pbad); color: var(--pbad); background: var(--pcard); }

.smcfind__why { margin: 30px 0 0; }
.smcfind__why p {
	margin: 10px 0 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--pmuted);
}


/* ----------------------------------------------------- the page button ---
   .smcpay__btn had exactly one rule against it — `width: 100%` inside the
   lookup form — and no base style at all, so the "Send me the link" button
   rendered as a full-width native grey button in the middle of a designed
   page. Defined here once, because two public pages now use it. */
.smcpay__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 26px;
	border: 1px solid var(--pacc);
	border-radius: 10px;
	background: var(--pacc);
	color: var(--pon-acc);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.smcpay__btn:hover {
	background: var(--pacc-dp);
	border-color: var(--pacc-dp);
	color: var(--pon-acc);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.smcpay__btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

/* The second choice on a two-choice page. Quiet, but not hidden: a client who
   wants to decline must not have to hunt for it, or they will simply not
   reply and the quote sits open for a month. */
.smcpay__btn--quiet {
	background: var(--pcard);
	border-color: var(--pline);
	color: var(--pink);
}
.smcpay__btn--quiet:hover {
	background: var(--pcard);
	border-color: var(--pink);
	color: var(--pink);
}


/* --------------------------------------------------- approve a retainer ---
   The public quote page. Same shell and palette as the invoice, because a
   client who has seen one of our invoices should recognise this instantly as
   coming from the same place. */
.smcquote { max-width: 640px; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 0 60px; }

.smcquote__card {
	margin: 26px 0 0;
	padding: clamp(22px, 3vw, 30px);
	border: 1px solid var(--pline);
	border-radius: 16px;
	background: var(--pcard);
}

/* The figure is the point of the page, so it is the largest thing on it. */
.smcquote__figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.smcquote__amount {
	font-family: var(--pfd);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 52px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--pink);
}
.smcquote__every { font-size: 16px; font-weight: 600; color: var(--pmuted); }
.smcquote__for { margin: 14px 0 0; font-size: 15.5px; color: var(--pink); }

.smcquote__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px;
	margin: 22px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--pline);
}
.smcquote__facts span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pfaint);
	margin-bottom: 6px;
}
.smcquote__facts b {
	font-family: var(--pfd);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.02em;
	color: var(--pink);
}

/* The studio's covering note, rendered from the same four marks the email
   uses so the page and the letter say the same thing in the same shape. */
.smcquote__note { margin: 26px 0 0; color: var(--pink); }
.smcquote__note p { margin: 0 0 14px; line-height: 1.62; }
.smcquote__note h3 {
	margin: 22px 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pacc);
}
/* list-style is restated because the reset at the top of this file zeroes it
   with `:where(ul, ol)`. :where() contributes NO specificity, so the reset is
   trivially overridden — but only by a rule that actually says so, and the
   original here set padding and nothing else. The result was a list with the
   indent of a list and no markers at all. */
.smcquote__note ul { margin: 0 0 14px; padding-left: 22px; list-style: disc outside; }
.smcquote__note li { margin-bottom: 8px; line-height: 1.6; list-style: inherit; }
.smcquote__note li::marker { color: var(--pacc); }
.smcquote__note blockquote {
	margin: 0 0 14px;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--psoft);
	color: var(--pink);
	line-height: 1.6;
}

.smcquote__do { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }
.smcquote__do form { margin: 0; }
.smcquote__small { margin: 18px 0 0; font-size: 13px; line-height: 1.6; color: var(--pfaint); }

/* Every closed state — approved, declined, expired, unknown — uses one block,
   so none of them can look like a broken page. */
.smcquote__state {
	margin: 26px 0 0;
	padding: 20px 22px;
	border: 1px solid var(--pline);
	border-left-width: 4px;
	border-radius: 12px;
	background: var(--pcard);
	font-size: 15px;
	line-height: 1.6;
	color: var(--pink);
}
.smcquote__state--good { border-left-color: var(--pgood); background: var(--psoft); }
.smcquote__state--off { border-left-color: var(--pfaint); }

@media (max-width: 560px) {
	.smcquote__do { flex-direction: column; }
	.smcquote__do .smcpay__btn { width: 100%; }
}