/* Styles specific to the anonymous, no-signup buyer demo
   (riffaso/templates/demo/*.html) -- style.css supplies the shared
   brand look (fonts, .btn, .card, .listing-page, etc.). */

.demo-banner {
  display: flex; align-items: center; justify-content: center; gap: 1.25rem;
  background: #0a0a0a; color: #fafafa; padding: 0.5rem 1rem;
  font-size: 0.82rem; text-align: center;
}
.demo-banner span { font-weight: 700; letter-spacing: 0.03em; color: #dba53c; }
.demo-banner-link {
  background: none; border: none; color: #fafafa; text-decoration: underline;
  font-size: 0.82rem; cursor: pointer; padding: 0;
}
.demo-header { max-width: 1160px; margin: 0 auto; padding: 1rem 1.25rem 0; }
.demo-header .brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; }
.demo-header .brand-mark { width: 28px; height: 28px; }

/* Bid input border, decoupled from the shared .stacked-form input rule in
   style.css (that class is also used by login/sell/shipping forms) so it
   can be tuned independently for the demo's bid box. Starts at the same
   #e2e2e2 as everywhere else. */
#demo-bid-form input#demo-bid-amount { border: 1px solid #e2e2e2; }

.demo-start { max-width: 620px; margin: 3rem auto; text-align: center; }
.demo-start .btn { margin-top: 1.5rem; }
/* .hero-subtitle is max-width: 460px with 0 side margins (left-aligned for
   the homepage hero) -- center the box itself inside the centered column. */
.demo-start .hero-subtitle { margin-left: auto; margin-right: auto; }
.demo-switch-link { margin-top: 1rem; font-size: 0.9rem; }

.demo-next-steps { padding-left: 1.25rem; line-height: 1.7; }
.demo-won-ctas { display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }

/* ---------- vendor demo: live seller payout ---------- */
.payout-block {
  border: 2px dashed var(--line); border-radius: 12px;
  padding: 0.8rem 1.2rem; margin: 0 0 0.9rem;
}
.payout-amount { font-size: 1.5rem; font-weight: 800; color: var(--green); }
.payout-amount.flash-update { animation: payout-pulse 0.6s ease-out; }
@keyframes payout-pulse { 0% { transform: scale(1.08); } 100% { transform: scale(1); } }
.payout-note { margin-top: 0.3rem; font-size: 0.8rem; }