/*
 * Shared payment-form styles for /sign-up and /add-missionary.
 *
 * 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. sign-up.html's #multipleMissionariesToggle
 * vs add-missionary.html's #multipleToggle) 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: flex-start; 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: #16a34a; }
#promoMsg.error { color: #dc2626; }

#removePromoLink { font-size: 13px; color: #6b7280; text-decoration: underline; cursor: pointer; margin-bottom: 8px; display: inline-block; }

/* 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: #111; }
.total-row-amount { color: #111; }
.total-row-strike { font-size: 14px; color: #9ca3af; text-decoration: line-through; margin-left: 6px; font-weight: 600; }
.total-row-promo { font-size: 13px; color: #16a34a; margin-top: 4px; font-weight: 600; }

.tier-options { display: flex; gap: 12px; margin-bottom: 20px; }
.tier-card { position: relative; flex: 1; border: 2px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s, background 0.15s; user-select: none; }
.tier-card:hover { border-color: #9ca3af; }
.tier-card--selected, .tier-card--selected:hover { border-color: #111; background: #f9fafb; }
/* 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; }
.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: #111; }
.tier-card-price { font-weight: 700; font-size: 18px; color: #111; }
.tier-card-features { font-size: 13px; color: #6b7280; line-height: 1.4; margin: 0; }

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