/* ========================================================================
   Checkout styles (self-contained)
   Loaded ONLY by _CheckoutLayout.cshtml. Same deal as account.css: the
   checkout is its own subsystem, deliberately decoupled from the main site
   styles.css + tailwind.css so the page a paying customer waits on stays
   lean and nothing here can weigh down the tool pages. Everything this page
   needs (fonts, tokens, reset) lives in this file, nothing else.

   Values come from the site tokens (styles.css) and the sign-in screen
   (account.css), which is where the buyer lands next, so the two screens
   read as one product.
   ======================================================================== */

/* Self-hosted fonts (woff2 in /fonts), subset-split so the browser only
   downloads the ranges actually used on the page. */
/* Inter (latin-ext) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter (latin) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk (latin-ext) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk (latin) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Tokens (only what the checkout consumes) ----------------------------- */
:root {
  --ink:         #173541;
  --ink-2:       #2c4d57;
  --ink-soft:    #51676f;
  --ink-faint:   #8a9aa0;
  --brand-lime:  #d5e43f;
  --lime-soft:   #eef3c0;
  --lime-deep:   #8ba326;
  --amber:       #e7a33c;
  --paper:       #f4f3ea;
  --paper-2:     #eceadd;
  --line:        rgba(23, 53, 65, 0.10);
  --line-2:      rgba(23, 53, 65, 0.16);
  --destructive: 12 70% 50%;
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* Same elevation pair the sign-in screen uses. */
  --pco-md: 0 6px 20px rgba(23, 53, 65, .08), 0 2px 6px rgba(23, 53, 65, .05);
  --pco-lg: 0 22px 60px rgba(23, 53, 65, .14), 0 6px 16px rgba(23, 53, 65, .07);
  /* One width for the payment form and for the result card, so nothing jumps
     sideways when the iframe is swapped for a confirmation. */
  --pco-width: 540px;
}

/* -- Minimal reset -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* -- Page shell ----------------------------------------------------------- */
/* One soft bloom behind the card, tinted per state. It is what keeps a
   confirmation from reading as a blank system page. */
.pco-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pco-page::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  max-width: 150vw;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(213, 228, 63, .30), transparent 72%);
  pointer-events: none;
}
.pco-page.is-warn::before { background: radial-gradient(closest-side, rgba(231, 163, 60, .26), transparent 72%); }
.pco-page.is-bad::before  { background: radial-gradient(closest-side, hsl(var(--destructive) / .18), transparent 72%); }

/* -- Top bar -------------------------------------------------------------- */
.pco-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 28px;
}
.pco-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 8px 12px 8px 8px;
  border-radius: 12px;
  transition: background .15s, color .15s;
}
.pco-back:hover { background: rgba(23, 53, 65, .06); color: var(--ink); }
.pco-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  color: var(--ink);
}
.pco-brand .mk {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 8px;
  background: var(--ink);
  display: grid;
  place-items: center;
}

/* -- Stage ---------------------------------------------------------------- */
.pco-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 26px 24px 80px;
}
.pco-shell { width: 100%; max-width: var(--pco-width); }

/* Paddle mounts its iframe in here (frameTarget: "checkout-frame"). The form
   brings its own chrome; we only govern the frame's box. Paddle sizes the
   frame from its own content pings, which on the short first step come in
   30-100px under the real content (measured 416-461px against 460-520px of
   content, live site included), leaving the form scrolling inside the iframe
   with the "Sold by Paddle" footer cut off. The min-height floors those
   under-measured steps; taller steps still auto-grow past it, and the frame
   is transparent so the surplus is invisible. display:block drops the
   inline-baseline gap under the frame. */
.checkout-frame { width: 100%; }
.checkout-frame iframe { display: block; width: 100%; min-height: 560px; }

/* -- Card ----------------------------------------------------------------- */
.pco-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--pco-lg);
  padding: 44px 44px 36px;
  text-align: center;
  animation: pcoRise .5s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes pcoRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.pco-eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-faint);
  margin-bottom: 22px;
}

/* Status badge. Never colour alone: each state pairs its tint with a
   distinct icon shape and with the eyebrow label above it. */
.pco-badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  position: relative;
  animation: pcoPop .42s cubic-bezier(.2, 1.5, .4, 1) .1s both;
}
@keyframes pcoPop {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: none; }
}
.pco-badge::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1.5px dashed rgba(23, 53, 65, .16);
}
.pco-badge.ok   { background: var(--brand-lime); color: var(--ink); box-shadow: 0 10px 26px rgba(150, 170, 40, .42); }
.pco-badge.warn { background: var(--amber); color: #fff; box-shadow: 0 10px 26px rgba(231, 163, 60, .36); }
.pco-badge.bad  { background: hsl(var(--destructive)); color: #fff; box-shadow: 0 10px 26px hsl(var(--destructive) / .30); }
/* Every animated shape carries pathLength="100", so one dash length draws any
   icon geometry and no stroke can be left with a permanent gap. */
.pco-badge svg [data-draw] {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: pcoDraw .55s ease .34s forwards;
}
@keyframes pcoDraw { to { stroke-dashoffset: 0; } }

.pco-card h1 {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
}
.pco-lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 12px auto 0;
  max-width: 400px;
  text-wrap: pretty;
}

/* Buyer email, shown only when the payment event carried one. */
.pco-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 12px 16px;
  max-width: 100%;
}
.pco-email svg { color: var(--lime-deep); flex: 0 0 auto; }
.pco-email span {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-all;
  line-height: 1.3;
}

/* The next action the buyer has to take, lifted out of the prose. */
.pco-instruct {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  text-align: left;
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--lime-soft);
  border: 1px solid rgba(139, 163, 38, .3);
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.pco-instruct svg { flex: 0 0 auto; margin-top: 2px; color: var(--lime-deep); }

/* -- Buttons -------------------------------------------------------------- */
.pco-actions {
  display: flex;
  gap: 11px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
}
.pco-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 700;
  font-size: 15px;
  border-radius: 14px;
  padding: 14px 22px;
  white-space: nowrap;
  transition: transform .12s, background .2s, box-shadow .2s, color .2s, border-color .2s;
}
.pco-btn:active { transform: translateY(1px); }
.pco-btn-primary { background: var(--ink); color: #fff; box-shadow: var(--pco-md); }
.pco-btn-primary:hover { background: #0f2a33; box-shadow: var(--pco-lg); }
.pco-btn .arr { transition: transform .18s; }
.pco-btn:hover .arr { transform: translateX(3px); }
.pco-btn-ghost {
  background: #fff;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--pco-md);
}
.pco-btn-ghost:hover { background: var(--paper); color: var(--ink); }
.pco-btn:focus-visible,
.pco-back:focus-visible,
.pco-foot a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* -- Footnote ------------------------------------------------------------- */
.pco-foot {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-faint);
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  text-wrap: pretty;
}
.pco-foot a { font-weight: 700; color: var(--lime-deep); }
.pco-foot a:hover { color: var(--ink); }

/* -- Payment form failure ------------------------------------------------- */
.pco-checklist {
  text-align: left;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pco-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.pco-checklist .n {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
/* Names the blocked resource, so a support conversation starts from a fact. */
.pco-cause {
  text-align: left;
  margin-top: 18px;
  background: var(--ink);
  border-radius: 14px;
  padding: 11px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: #cfe0e4;
  overflow-x: auto;
}
.pco-cause .k { color: hsl(var(--destructive) / .85); }

/* -- Processing ----------------------------------------------------------- */
/* Not part of the handoff. Styled here so the wait between "paid" and
   "confirmed" sits in the same card as the states on either side of it. */
.pco-processing { padding: 56px 44px; }
.pco-spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 5px solid var(--paper-2);
  border-top-color: var(--lime-deep);
  animation: pcoSpin .75s linear infinite;
}
@keyframes pcoSpin { to { transform: rotate(360deg); } }
.pco-processing p {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* -- State visibility ----------------------------------------------------- */
/* checkout.js toggles the [hidden] attribute and nothing else, so no two
   states can ever be on screen at once. */
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .pco-card,
  .pco-badge { animation: none; }
  .pco-badge svg [data-draw] { animation: none; stroke-dashoffset: 0; }
  .pco-spinner { animation-duration: 2s; }
}

@media (max-width: 560px) {
  .pco-top { padding: 16px 18px; }
  .pco-stage { padding: 20px 18px 56px; }
  .pco-card { padding: 34px 24px 28px; border-radius: 18px; }
  .pco-card h1 { font-size: 25px; }
  .pco-processing { padding: 44px 24px; }
  .pco-actions .pco-btn { width: 100%; }
}