/* ===========================================
   RECEIPT PAGE
   =========================================== */

/* Receipt page (templates/pages/receipt.html). */

.receipt-page .receipt-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--gap-page);
  padding-bottom: var(--gap-pane);
  border-bottom: 1px solid var(--border);
}

.receipt-page .receipt-row {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-peer) 0;
  font-size: var(--text-body);
}

.receipt-page .receipt-row.total {
  font-weight: bold;
  font-size: var(--text-lead);
  border-top: 1px solid var(--border);
  padding-top: var(--gap-section);
  margin-top: var(--gap-peer);
}

.receipt-page .receipt-label { opacity: 0.7; }

.receipt-page .receipt-footer {
  margin-top: var(--gap-page);
  padding-top: var(--gap-pane);
  border-top: 1px solid var(--border);
  font-size: var(--text-note);
  opacity: 0.6;
}

.receipt-page .back-link {
  display: inline-block;
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
  opacity: 0.7;
}

.receipt-page .back-link:hover { opacity: 1; }

@media print {
  .receipt-page .back-link,
  .receipt-page .chrome-band,
  .receipt-page .print-btn { display: none !important; }
  .receipt-page .receipt-box { border: 1px solid var(--border); }
}

/* ===========================================
   FAN+ PAGE
   =========================================== */

/* The Fan+ page moved to the description layer. Its headings, its section
   spacing, its price callout, its subscribe button, its status box and its
   success banner are all drawn by the design system now: the banner is a
   `Node::banner` with `Tone::Success`, the price is a `Figure`, and the button
   is an `Act`. Nothing here is left to target.

   The measure is on `.fan-plus-page main` beside `.creators-page main`. */

/* ===========================================
   PURCHASE PAGE
   =========================================== */

/* Purchase confirmation page (templates/pages/purchase.html). */
.purchase-page .container {
  max-width: 800px;
  margin: var(--gap-page) auto;
  padding: 0 var(--gap-page);
}

.purchase-page .tagline {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-page);
  text-align: center;
}

.purchase-page .checkout-box { margin-bottom: var(--gap-pane); }

.purchase-page h2 { font-size: var(--text-title); margin-bottom: var(--gap-peer); }

.purchase-page .step-indicator {
  font-size: var(--text-note);
  opacity: 0.6;
  margin-bottom: var(--gap-pane);
}

.purchase-page .item-summary {
  background: var(--surface-page);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
  display: flex;
  gap: var(--gap-pane);
}

.purchase-page .item-thumbnail {
  width: 120px;
  height: 120px;
  background: var(--surface-sunken);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-hero);
  overflow: hidden;
}

.purchase-page .item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* See the storefront card: the dimming is the placeholder's, not the slot's. */
.purchase-page .item-thumbnail-empty { opacity: 0.3; }

.purchase-page .item-details { flex: 1; }

.purchase-page .item-title {
  font-size: var(--text-subhead);
  margin-bottom: var(--gap-peer);
  font-family: var(--font-display);
  font-weight: bold;
}

.purchase-page .item-creator {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-section);
}

.purchase-page .item-creator a { color: var(--content); }
.purchase-page .item-description { font-size: var(--text-note); opacity: 0.8; }

.purchase-page .price-breakdown {
  background: var(--surface-page);
  padding: var(--gap-pane);
  margin-bottom: var(--gap-pane);
}

.purchase-page .price-breakdown h2 { font-size: var(--text-lead); margin-bottom: var(--gap-section); }

.purchase-page .price-row {
  display: flex;
  justify-content: space-between;
  padding: var(--gap-peer) 0;
  border-bottom: 1px solid var(--border);
}

.purchase-page .price-row:last-child {
  border-bottom: none;
  margin-top: var(--gap-peer);
  font-size: var(--text-subhead);
  padding-top: var(--gap-section);
  border-top: 2px solid var(--border);
}

.purchase-page .price-row.total { font-weight: bold; }

.purchase-page .payment-section { margin-bottom: var(--gap-pane); }
.purchase-page .payment-section h2 { font-size: var(--text-lead); margin-bottom: var(--gap-section); }

.purchase-page .btn-primary { width: 100%; }
.purchase-page .btn-secondary { width: 100%; margin-top: var(--gap-section); }

.purchase-page .security-note {
  font-size: var(--text-note);
  opacity: 0.6;
  text-align: center;
  margin-top: var(--gap-section);
}

/* Replaces inline styles in pages/purchase.html. */
.purchase-page h1 { text-align: center; }

.purchase-page .price-breakdown-note {
  margin-top: var(--gap-peer);
  font-size: var(--text-fine);
  opacity: 0.6;
}

.purchase-page .creator-breakdown {
  background: var(--surface-page);
  padding: var(--gap-section) var(--gap-pane);
  margin-bottom: var(--gap-pane);
  font-size: var(--text-note);
}
.purchase-page .creator-breakdown h2 {
  font-size: var(--text-body);
  margin-bottom: var(--gap-section);
  opacity: 0.7;
}
.purchase-page .creator-breakdown .price-row { opacity: 0.8; }
.purchase-page .creator-breakdown .price-row.is-total {
  opacity: 1;
  font-weight: bold;
  border-top: 1px solid var(--border);
  margin-top: var(--gap-peer);
  padding-top: var(--gap-peer);
  /* override .price-row:last-child upsize */
  font-size: inherit;
  border-bottom: none;
}
.purchase-page .creator-breakdown .platform-fee-amount { color: var(--content); }
.purchase-page .creator-breakdown-note {
  margin-top: var(--gap-section);
  font-size: var(--text-note);
  opacity: 0.6;
}

.purchase-page .payment-section-lead {
  margin-bottom: var(--gap-pane);
  opacity: 0.8;
}

.purchase-page .pending-checkout {
  margin-bottom: var(--gap-pane);
  background: var(--surface-sunken);
  padding: var(--gap-section);
}
.purchase-page .pending-checkout p { margin: 0 0 var(--gap-section); }
.purchase-page .pending-checkout p.is-sub {
  font-size: var(--text-note);
  opacity: 0.8;
}
.purchase-page .pending-checkout form { margin: 0; }

/* Checkout form field wrappers. */
.purchase-page .checkout-field { margin-bottom: var(--gap-section); }
.purchase-page .checkout-field-label {
  font-size: var(--text-note);
  display: block;
  margin-bottom: var(--gap-bound);
}
.purchase-page .pwyw-row {
  display: flex;
  align-items: center;
  gap: var(--gap-bound);
}
.purchase-page .pwyw-symbol { font-size: var(--text-lead); }
.purchase-page .pwyw-input { width: 120px; }
.purchase-page .pwyw-min-note {
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-top: var(--gap-bound);
}
.purchase-page .promo-input {
  width: 200px;
  text-transform: uppercase;
}
.purchase-page .share-contact-label {
  font-size: var(--text-note);
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  cursor: pointer;
}
.purchase-page .share-contact-checkbox { width: auto; }

.purchase-page .cart-alt-link {
  text-align: center;
  margin-top: var(--gap-section);
  font-size: var(--text-note);
  opacity: 0.7;
}
.purchase-page .guest-hint {
  font-size: var(--text-fine);
  opacity: 0.6;
  margin-top: var(--gap-section);
  text-align: center;
}
.purchase-page .guest-login-prompt {
  font-size: var(--text-fine);
  margin-top: var(--gap-peer);
  text-align: center;
}

/* ===========================================
   PROJECT SETTINGS TAB
   (replaces inline styles in partials/tabs/project_settings.html and
    related innerHTML in static/project-sections.js)
   =========================================== */

.proj-image-hint {
  font-size: var(--text-note);
  opacity: 0.7;
  margin: 0 0 var(--gap-peer);
}

/* Canonical inline form-status text following a Save / Change button.
   Two class names because templates evolved with both. They're aliases.
   States via .success / .error / .saving modifier. */
.field-status,
.save-status {
  margin-left: var(--gap-peer);
  font-size: var(--text-note);
}
.field-status.success, .save-status.success { color: var(--success); }
.field-status.error,   .save-status.error   { color: var(--danger); }
.field-status.saving,  .save-status.saving  { opacity: 0.6; }

/* Muted lead paragraph above a form button (monetization / features / delete). */
.section-lead {
  margin-bottom: var(--gap-section);
  opacity: 0.7;
  text-align: left;
}

/* Large intro paragraph under a page h1 (creators, policy, changelog, fan_plus). */
.page-intro {
  font-size: var(--text-lead);
  margin-bottom: var(--gap-page);
  line-height: 1.6;
}

.subscription-note p {
  opacity: 0.7;
  font-size: var(--text-note);
}

.features-grid-status {
  margin-top: var(--gap-peer);
  display: inline-block;
}

/* "Pages" disclosure (project-level markdown sections). */
.pages-toggle { margin-top: var(--gap-page); }
.pages-toggle > summary { cursor: pointer; }
.pages-toggle > summary h2 { display: inline; }
.pages-intro {
  font-size: var(--text-note);
  opacity: 0.7;
  margin: var(--gap-section) 0 var(--gap-section);
}

/* psection-* mirrors section-mgmt-* (used by item_details) but psection
   class hooks are also queried by static/project-sections.js. */
.psection-row-title { flex: 1; font-weight: bold; }
.psection-row-anchor { font-size: var(--text-fine); opacity: 0.6; }
.psection-row-length { font-size: var(--text-fine); opacity: 0.6; }

.psection-edit-btn,
.psection-del-btn {
  padding: var(--gap-bound) var(--gap-group);
  font-size: var(--text-fine);
}

.psection-add-details { margin-top: var(--gap-section); }
.psection-add-details > summary {
  cursor: pointer;
  font-size: var(--text-body);
}
.psection-add-fields { margin-top: var(--gap-section); }

.psection-edit-modal {
  margin-top: var(--gap-section);
  padding: var(--gap-section);
  background: var(--surface-sunken);
}
.psection-edit-actions {
  display: flex;
  gap: var(--gap-peer);
}

/* ===========================================
   CART PAGE (replaces inline styles in pages/cart.html)
   =========================================== */

.cart-empty {
  text-align: center;
  padding: var(--gap-page) var(--gap-section);
}
.cart-empty-hint {
  font-size: var(--text-note);
  opacity: 0.7;
  margin-bottom: var(--gap-pane);
}

/* Multi-creator summary bar (only renders when seller_groups.len() > 1). */
.cart-multi-bar-note {
  opacity: 0.7;
  margin-left: var(--gap-peer);
}
.cart-multi-bar-form {
  display: flex;
  align-items: center;
  gap: var(--gap-section);
}
.cart-share-label {
  font-size: var(--text-note);
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
}

/* Per-seller group card. */
.cart-group { margin-bottom: var(--gap-page); }
.cart-group-title { margin-bottom: var(--gap-bound); }
.cart-group-count {
  font-size: var(--text-note);
  opacity: 0.6;
  margin-bottom: var(--gap-section);
}

/* PWYW editable price cell. */
.cart-pwyw-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--gap-bound);
}
.cart-pwyw-symbol { font-size: var(--text-note); }

/* Compact action button used in cart/wishlist tables. */

/* Bottom summary row of each seller group. */
.cart-group-summary {
  margin-top: var(--gap-section);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--gap-section);
}
.cart-subtotal {
  font-family: var(--font-display);
  font-size: var(--text-lead);
}
.cart-fee-line {
  font-size: var(--text-note);
  opacity: 0.6;
}
.cart-savings {
  font-size: var(--text-note);
  color: var(--action);
  margin-top: var(--gap-bound);
}
.cart-stripe-not-ready {
  font-size: var(--text-note);
  opacity: 0.6;
}

/* Checkout form within a seller group. */
.cart-promo-row { margin-bottom: var(--gap-peer); }
.cart-checkout-share {
  display: flex;
  align-items: center;
  gap: var(--gap-peer);
  font-size: var(--text-note);
  margin-bottom: var(--gap-peer);
}

/* Wishlist suggestions section below the cart. */
.cart-wishlist { margin-top: var(--gap-page); }

/* Generic "faded out" row state, used by Add-to-Cart click handler in cart.html
   to indicate the wishlist row has been moved into the cart. */
.is-faded { opacity: 0.4; }