/* ============================================================
   FastSpring sales/checkout wrapper — template-specific overrides
   Sits on top of dbload.css (Bootstrap 5 theme). Keeps the FastSpring
   store markup that gets injected into #contents looking consistent
   with the rest of dbload.com.
   ============================================================ */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* The FastSpring store HTML lands inside this card */
.content-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: 0 10px 30px rgba(10, 37, 64, 0.08);
}

#contents {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--text);
}

/* FastSpring's own order-form markup uses headings for section labels
   (Order Details, Contact Information, Mailing Address, etc.), not page
   titles — so these stay small and form-appropriate rather than using
   the marketing-site heading scale. */
#contents h1,
#contents h2,
#contents h3,
#contents h4,
#contents h5,
#contents h6 {
  font-family: 'Outfit', sans-serif;
  color: var(--primary);
  font-weight: 700;
  line-height: 1.25;
}

#contents h1 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}

#contents h2 {
  font-size: 1.2rem;
  margin: 1.25rem 0 0.5rem;
}

#contents h3,
#contents h4,
#contents h5,
#contents h6 {
  font-size: 1.05rem;
  margin: 1.1rem 0 0.4rem;
}

#contents p {
  color: var(--text-muted);
  line-height: 1.65;
}

#contents img {
  max-width: 100%;
  height: auto;
}

#contents table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

#contents table td,
#contents table th {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

#contents a {
  color: var(--accent);
}

#contents a:hover {
  color: #1558c0;
}

/* Reuse the site's CTA button look for FastSpring's buy/continue buttons */
#contents input[type="submit"],
#contents input[type="button"],
#contents button {
  background: var(--accent);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.4rem;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.2s, transform 0.15s;
}

#contents input[type="submit"]:hover,
#contents input[type="button"]:hover,
#contents button:hover {
  background: #1558c0;
  transform: translateY(-1px);
}

footer {
  margin-top: auto;
}

@media (max-width: 576px) {
  .content-card {
    padding: 1.5rem;
    border-radius: var(--radius);
  }
}