/* Confirmation / receipt page. Matches the storefront design language (same tokens,
   the same "label ..... value" totals rows as the checkout order summary). The page's
   Breakdance Section provides outer padding + centering; keep the receipt a focused,
   narrow column centered within it. */
#pc-confirmation { max-width: var(--pc-maxw); margin-left: auto; margin-right: auto; }

/* --- Success header --------------------------------------------------------- */
.pc-confirmation__header { text-align: center; margin-bottom: var(--pc-space-5); }
.pc-confirmation__badge {
  width: 56px; height: 56px; margin: 0 auto var(--pc-space-3);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--pc-color-accent); color: var(--pc-color-accent-ink);
}
.pc-confirmation__head {
  color: var(--pc-color-text); font-family: var(--pc-font-heading); font-weight: 600;
  font-size: 26px; line-height: 1.2; margin: 0 0 var(--pc-space-1);
}
.pc-confirmation__sub { color: var(--pc-color-muted); font-size: 15px; margin: 0 0 var(--pc-space-2); }
.pc-confirmation__order {
  display: inline-block; color: var(--pc-color-muted); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; padding: var(--pc-space-1) var(--pc-space-3);
  border: 1px solid var(--pc-color-border); border-radius: 999px;
}

/* --- Receipt card (line items + totals) ------------------------------------- */
.pc-confirmation__card {
  border: 1px solid var(--pc-color-border); border-radius: var(--pc-radius);
  padding: var(--pc-space-4); background: var(--pc-color-surface);
}
.pc-confirmation__line {
  display: grid; grid-template-columns: 48px 1fr auto; gap: var(--pc-space-3);
  align-items: center; padding: var(--pc-space-3) 0;
  border-bottom: 1px solid var(--pc-color-border);
}
.pc-confirmation__line:first-child { padding-top: 0; }

/* Thumbnail + qty bubble — mirrors the cart/checkout summary thumbnail. */
.pc-confirmation__thumb {
  position: relative; width: 48px; height: 48px; border-radius: var(--pc-radius);
  background: #f4f3f5; border: 1px solid var(--pc-color-border);
}
.pc-confirmation__thumb img {
  width: 100%; height: 100%; object-fit: cover; border-radius: var(--pc-radius); display: block;
}
.pc-confirmation__qtybubble {
  position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px;
  padding: 0 5px; border-radius: 10px; background: var(--pc-color-muted); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 20px; text-align: center;
}

.pc-confirmation__line-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-confirmation__line-title { color: var(--pc-color-text); font-weight: 600; font-size: 14px; line-height: 1.3; }
.pc-confirmation__line-meta { color: var(--pc-color-muted); font-size: 12px; }
.pc-confirmation__line-qty { color: var(--pc-color-muted); font-size: 12px; }
.pc-confirmation__line-price { color: var(--pc-color-text); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* --- Totals block ----------------------------------------------------------- */
.pc-confirmation__totals { margin-top: var(--pc-space-3); }
.pc-confirmation__totalrow {
  display: flex; align-items: baseline; justify-content: space-between;
  color: var(--pc-color-muted); font-size: 14px; margin-top: var(--pc-space-1);
}
.pc-confirmation__val { color: inherit; font-variant-numeric: tabular-nums; }
.pc-confirmation__totalrow--grand {
  color: var(--pc-color-text); font-weight: 700; font-size: 18px;
  margin-top: var(--pc-space-2); padding-top: var(--pc-space-3);
  border-top: 1px solid var(--pc-color-border);
}

/* --- Shipping note ---------------------------------------------------------- */
.pc-confirmation__note {
  text-align: center; color: var(--pc-color-muted); font-size: 13px;
  margin-top: var(--pc-space-4);
}

/* Artwork prompt — "we need files to start" call-to-action below the receipt. */
.pc-confirmation__artwork {
  margin: 18px 0 6px;
  padding: 14px 16px;
  border: 1px solid #e0a94a;
  border-radius: 10px;
  background: #fdf7ec;
  text-align: center;
}

.pc-confirmation__artwork-text {
  margin: 0 0 12px;
  color: #7a5c14;
  font-size: 15px;
}

.pc-confirmation__artwork .pc-btn {
  display: inline-block;
  text-decoration: none;
}

/* Two-step framing: the artwork block reads as an explicit NEXT STEP the
   customer initiates — featured, but never gating the receipt above it. */
.pc-confirmation__artwork-step {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a9761c;
  margin-bottom: 6px;
}

.pc-confirmation__artwork--needed {
  border-width: 2px;
}

.pc-confirmation__artwork-btn {
  font-size: 16px;
  padding: 12px 28px;
}

.pc-confirmation__artwork-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #8c9196;
}

/* Guest sign-in nudge inside the artwork step. */
.pc-confirmation__artwork-signin {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.pc-confirmation__artwork-signin input {
  flex: 1 1 220px;
  max-width: 300px;
  padding: 10px 12px;
  border: 1px solid #d5d8dc;
  border-radius: 6px;
  font-size: 14px;
}

/* --- Payment details block (Intuit-required receipt fields) ----------------- */
.pc-confirmation__payment {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e9ed;
}
.pc-confirmation__payment-line { font-size: 14px; color: var(--pc-color-text); }
.pc-confirmation__payment-meta { font-size: 12px; color: #8c9196; margin-top: 2px; }

/* --- Processor disclosure (below shipping note) ----------------------------- */
.pc-confirmation__disclosure {
  margin-top: 20px;
  font-size: 12px;
  color: #8c9196;
  text-align: center;
}