.invoice-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 2em 2.5em 1.5em 2.5em;
    max-width: 600px;
    margin: 2em auto 2em auto;
    box-shadow: 0 2px 8px rgba(37,99,235,0.07);
  }
  .invoice-section h2 {
    color: #2563eb;
    margin-bottom: 1.2em;
    font-size: 1.5em;
    font-weight: 600;
  }
  .invoice-details p {
    margin: 0.3em 0;
    font-size: 1.05em;
    color: #334155;
  }
  .invoice-details strong {
    color: #2563eb;
    font-weight: 500;
  }
  .balance-row {
    margin: 1.2em 0 1.5em 0;
    font-size: 1.1em;
  }
  .paid-in-full {
    color: #059669;
    font-weight: 600;
    margin-left: 0.5em;
  }
  .payments-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(37,99,235,0.04);
  }
  .payments-table th, .payments-table td {
    padding: 0.6em 0.9em;
    text-align: left;
    font-size: 0.98em;
  }
  .payments-table th {
    background: #2563eb;
    color: #fff;
    font-weight: 500;
    border-bottom: 2px solid #e0e7ff;
  }
  .payments-table tr:nth-child(even) {
    background: #f1f5f9;
  }
  .payments-table tr:nth-child(odd) {
    background: #fff;
  }
  .action-buttons {
    display: flex;
    gap: 1em;
    margin-top: 1.5em;
    justify-content: flex-end;
  }

/* Premium subscription page styles */
.subscription-hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 1.5em;
  align-items: start;
  max-width: 1100px;
  margin: 2em auto;
}
.plans-column {
  padding: 1.5em;
  /* ensure the plans column aligns to the top of the grid like the checkout column */
  align-self: start;
  display: flex;
  flex-direction: column;
}
.plans-header h2 { margin: 0 0 6px 0; color: #0f172a; }
.plans-header { margin-top: 0; }
.plans-header .muted { color: #64748b; margin: 0 0 1em 0; }
.plans-grid { display: grid; gap: 0.8em; grid-template-columns: 1fr; }
.plan-card { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--gray-border); padding: 1em; border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); cursor: pointer; transition: box-shadow 0.18s, transform 0.12s; }
.plan-card:hover { box-shadow: 0 8px 28px rgba(37,99,235,0.08); transform: translateY(-3px); }
.plan-card .plan-name { font-size: 1.02em; color: #0b1220; }
.plan-card .plan-price { color: #0b1220; font-weight: 700; }
.plan-card .muted { color: #94a3b8; }
.plan-select { margin-left: 1em; }
.plan-card input[type='radio'] { width: 18px; height: 18px; }

.checkout-column { 
  padding: 1.5em;
  position: sticky;
  /* keep the checkout visible and a bit higher in the viewport */
  top: 8vh;
  /* ensure the checkout never overflows the viewport — allow internal scrolling if needed */
  max-height: calc(100vh - 10vh);
  overflow: auto;
  align-self: start;
}
.checkout-badge { display: inline-block; background: linear-gradient(90deg,#06b6d4,#7c3aed); color: #fff; padding: 0.4em 0.75em; border-radius: 999px; font-weight: 700; font-size: 0.8em; margin-bottom: 0.75em; }
.checkout-title { margin: 0 0 0.75em 0; color: #0f172a; }
.summary-line { display:flex; justify-content:space-between; padding: 0.45em 0; color: #334155; }
.summary-total { display:flex; justify-content:space-between; padding: 0.85em 0; font-weight:800; font-size:1.25em; border-top:1px dashed var(--gray-border); margin-top:0.6em; }
.payment-actions { margin-top:1.25em; display:flex; flex-direction:column; gap:10px; align-items: center; }
.trust-row { text-align:center; width:100%; }
.trust-row img { max-height:32px; }
.cta-row { display:flex; justify-content:center; width:100%; }
.cta-row .button.large { min-width: 260px; }
.button.large { padding: 0.9em 1.3em; font-size: 1.05em; border-radius: 10px; box-shadow: 0 6px 20px rgba(37,99,235,0.12); }
.secure-note { color: #64748b; font-size: 0.9em; margin-top: 1em; }

@media (max-width: 900px) {
  .subscription-hero { grid-template-columns: 1fr; padding: 1em; }
  .checkout-column { position: static; }
}