/*
 * Shared payment-form styles for /sign-up and /add-book.
 *
 * These two pages each render the Stripe Payment Element + a promo-
 * code row + a tier-selection card pair. Before this file existed
 * the rules were duplicated verbatim in each page's inline <style>
 * (~22 selectors × 2). Extracted here so adding a new tier card or
 * tweaking the promo row's spacing only happens once. Same approach
 * as public/css/share.css (welcome.html ↔ share.html lightbox + button
 * shared rules).
 *
 * Page-specific rules (e.g. each page's own .subtitle / .btn-submit
 * tweaks) stay in the per-page inline <style>.
 */

#paymentSection { margin-top: 24px; }
#paymentElement { margin-bottom: 16px; }

/* Tier-aware visibility. Replaces the `hidden` attribute (CSS
 * display:none) used elsewhere in the UI — Stripe's Payment Element
 * iframe doesn't lay out correctly inside display:none, so a later
 * un-hide reveals an empty container. visibility:hidden + max-height:0
 * collapses the section visually while keeping the iframe in the
 * layout tree, so toggling the class back off restores Stripe cleanly.
 */
#paymentSection.payment-section--off {
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
}

.promo-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 4px; }
.promo-row input { flex: 1; margin-bottom: 0; }
.promo-row button { flex-shrink: 0; padding: 10px 16px; min-width: unset; margin-top: 0; }

#promoMsg { font-size: 13px; margin-bottom: 8px; }
#promoMsg.success { color: var(--color-success); }
#promoMsg.error { color: var(--color-danger); }

#removePromoLink { font-size: 13px; color: var(--color-gray-500); text-decoration: underline; cursor: pointer; margin-bottom: 8px; display: inline-block; }

/* Order-summary rows — painted by PaymentFlow.renderOrderSummary() into
 * #orderSummary: one line per selected product, then the bundle/promo
 * discounts, then the Total. Shape follows the receipt email's money table
 * (lib/email/templates/receipt.js receiptCore) so the customer sees the same
 * decomposition at checkout, on /payment-success, and in their inbox.
 *
 * These are LAYOUT + the discount tone only. The promo and Total rows also
 * carry .total-row-promo / .total-row-line below, which set their typography
 * — those rules must stay LATER in this file, because they tie with these on
 * specificity (0,1,0) and win only on source order.
 *
 * Added 2026-07-31: the classes were emitted from the first day of the
 * mix-and-match picker (eb51b5f6) but never defined, so every row rendered as
 * a plain block with two adjacent inline spans — "Digital Memory Book$29.00",
 * no price column. See docs/design-system-round3-plan.md R3-1/R3-14.
 */
.summary-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; font-size: 14px; color: var(--color-body); }
.summary-line > span:last-child { white-space: nowrap; }
.summary-line--discount { color: var(--color-success); }
.summary-line--total { border-top: 1px solid var(--color-gray-200); margin-top: 2px; }

/* "Save $20 together" affordance under the picker. The base state is an
 * INCENTIVE (.field-hint muted); this is the applied CONFIRMATION, so it takes
 * the success tone — color only, because the element's font-weight/margin/
 * text-align are inline on the markup and a class cannot outrank them. */
.bundle-hint--applied { color: var(--color-success); }

/* Total row — sits above the Stripe Payment Element on /sign-up + /add-
 * missionary. Painted by PaymentFlow.renderTotalRow() every time plan,
 * Pro List add-on, or promo state changes (refreshPriceUI calls it).
 *
 * Layout: one line with "Total: $XX" (and an optional strikethrough
 * original when a promo lands), plus a small "Promo CODE: −$YY" line
 * under it. The total amount uses the page's existing 16/700 weight so
 * it reads as the primary number on the form. */
.total-row { margin-bottom: 16px; }
.total-row-line { font-size: 16px; font-weight: 700; color: var(--color-ink); }
.total-row-amount { color: var(--color-ink); }
.total-row-strike { font-size: 14px; color: var(--color-gray-400); text-decoration: line-through; margin-left: 6px; font-weight: 600; }
.total-row-promo { font-size: 13px; color: var(--color-success); margin-top: 4px; font-weight: 600; }

.tier-options { display: flex; gap: 12px; margin-bottom: 20px; }
.tier-card { position: relative; flex: 1; border: 2px solid var(--color-gray-200); border-radius: var(--radius-lg); padding: 14px 16px; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); user-select: none; }
.tier-card:hover { border-color: var(--color-gray-400); }
.tier-card--selected, .tier-card--selected:hover { border-color: var(--color-ink); background: var(--color-gray-50); }
/* width:auto overrides the global input{width:100%} rule — without it,
   the absolutely-positioned radio's percentage width would resolve
   against the viewport and trigger horizontal page scroll. */
.tier-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: auto; }
/* The mix-and-match picker's VISIBLE checkboxes (sign-up / add-book) need
   the same escape from the global input rule: its width:100% stretches the
   checkbox across the name span (glyph floats mid-card, title wraps below) and
   its bottom margin adds a phantom row. width/margin are the live culprits in
   Chromium (padding on native checkboxes is ignored there; reset anyway for
   other engines). Mirrors .checkbox-label input in common.css. */
.tier-card input[type="checkbox"] { width: auto; padding: 0; margin: 0 8px 0 0; accent-color: var(--color-ink); cursor: pointer; vertical-align: middle; }
.tier-card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.tier-card-name { font-weight: 700; font-size: 16px; color: var(--color-ink); }
.tier-card-price { font-weight: 700; font-size: 18px; color: var(--color-ink); }
.tier-card-features { font-size: 13px; color: var(--color-gray-500); line-height: 1.4; margin: 0; }

@media (max-width: 480px) {
  .tier-options { flex-direction: column; }
}