/* ===========================================================================
   TerraPricing.css
   ---------------------------------------------------------------------------
   Styles for the Plans & pricing page (TerraPricing.html) and the order-summary
   checkout stub (TerraCheckout.html). Reuses the shared theme tokens (--terra-*)
   and the .nav / .btn classes from TerraLanding.css, so it stays on-brand in
   both light and dark themes.
   =========================================================================== */

/* -------------------------------------------------------------------------
   Theme bridge
   -------------------------------------------------------------------------
   The pricing/checkout/subscribed pages load TerraLanding.css (which defines the
   --text / --muted / --brand ... theme vars - dark by default, with a light
   override) but NOT the app's TerraGlobalAndForm.css. The rules below were
   written against the app's --terra-* vars, so we alias them to the landing
   theme vars here. Without this, every --terra-* fell back to a hardcoded
   light-theme value - so the headings rendered dark text on the dark page
   background. Aliasing makes the whole page theme-correct in BOTH themes
   (var(--text) etc. follow the [data-theme] override automatically). */
:root {
  --terra-text: var(--text);
  --terra-muted-text: var(--muted);
  --terra-divider: var(--border);
  --terra-surface: var(--surface);
  --terra-surface-strong: var(--surface);
  --terra-accent: var(--brand);
  --terra-accent-dark: var(--brand-dark);
  --terra-accent-soft: var(--surface);
  --terra-accent-contrast: #ffffff;
}

.pricing {
  max-width: 980px;
  margin: 0 auto;
  padding: 32px 20px 64px;
}

.pricing-head {
  text-align: center;
  margin-bottom: 28px;
}

.pricing-title {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--terra-text, #1f2524);
  margin: 0 0 8px;
}

.pricing-sub {
  color: var(--terra-muted-text, #666);
  max-width: 620px;
  margin: 0 auto;
  font-size: 1rem;
}

/* ---- Billing period toggle ---- */
.billing-toggle {
  display: inline-flex;
  margin-top: 22px;
  border: 1px solid var(--terra-divider, #ccc);
  border-radius: 999px;
  padding: 4px;
  background: var(--terra-surface, #f2f2f2);
}

.billing-option {
  border: none;
  background: transparent;
  color: var(--terra-text, #1f2524);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.billing-option.is-active {
  background: var(--terra-accent, #12524d);
  color: var(--terra-accent-contrast, #fff);
}

.billing-save {
  font-size: 0.72rem;
  font-weight: 700;
  background: var(--terra-accent-soft, #d9eae7);
  color: var(--terra-accent-dark, #0d3d39);
  padding: 2px 8px;
  border-radius: 999px;
}
.billing-option.is-active .billing-save {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* ---- Plan cards ---- */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  /* stretch (not start) so both cards take the full row height and are the same
     size even though Pro has fewer feature lines than Basic. */
  align-items: stretch;
}

@media (max-width: 720px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

.plan {
  position: relative;
  background: var(--terra-surface-strong, #fff);
  border: 1px solid var(--terra-divider, #ddd);
  border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Pro card is visually emphasised. */
.plan--featured {
  border-color: var(--terra-accent, #12524d);
  box-shadow: 0 6px 24px rgba(18, 82, 77, 0.18);
}

.plan-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--terra-accent, #12524d);
  color: var(--terra-accent-contrast, #fff);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.plan-name {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  color: var(--terra-accent, #12524d);
  margin: 0 0 10px;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.plan-amount {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--terra-text, #1f2524);
}

.plan-period {
  color: var(--terra-muted-text, #666);
  font-weight: 600;
}

.plan-billed {
  margin: 4px 0 6px;
  font-size: 0.82rem;
  color: var(--terra-muted-text, #777);
  min-height: 1.1em;
}

/* Small "plus applicable VAT" note under the price on each plan card. */
.plan-vat {
  margin: 0 0 18px;
  font-size: 0.72rem;
  color: var(--terra-muted-text, #999);
}

.plan-select {
  margin-bottom: 20px;
}

.plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-features li {
  position: relative;
  padding-left: 26px;
  color: var(--terra-text, #1f2524);
  font-size: 0.92rem;
}

/* Tick marks before each feature. */
.plan-features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 3px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--terra-accent, #12524d);
  border-bottom: 2px solid var(--terra-accent, #12524d);
  transform: rotate(-45deg);
}

/* The "Everything in Basic, plus:" lead line has no tick. */
.plan-features-lead {
  padding-left: 0 !important;
  font-weight: 700;
  color: var(--terra-muted-text, #666) !important;
  font-size: 0.85rem !important;
}
.plan-features-lead::before {
  display: none;
}

.pricing-foot {
  text-align: center;
  margin-top: 30px;
  color: var(--terra-muted-text, #777);
  font-size: 0.82rem;
}

/* ===========================================================================
   Checkout stub (TerraCheckout.html)
   =========================================================================== */
.checkout {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

.checkout-card {
  background: var(--terra-surface-strong, #fff);
  border: 1px solid var(--terra-divider, #ddd);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.checkout-card h1 {
  font-family: 'Inter Tight', 'Inter', sans-serif;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--terra-text, #1f2524);
}

.checkout-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--terra-divider, #eee);
}
.checkout-summary:first-of-type {
  border-top: none;
}
.checkout-summary .label {
  color: var(--terra-muted-text, #666);
}
.checkout-summary .value {
  font-weight: 700;
  color: var(--terra-text, #1f2524);
}
.checkout-total .value {
  font-size: 1.4rem;
  color: var(--terra-accent, #12524d);
}

.checkout-note {
  margin: 18px 0 22px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--terra-surface, #f2f2f2);
  color: var(--terra-muted-text, #555);
  font-size: 0.85rem;
}

/* 7-day self-serve Pro trial button + status note (under the Pro card). The
   button reuses the ghost/outline .btn style so it reads as secondary to the
   primary "Choose Pro" button above it. */
.plan-trial {
  margin-top: -8px; /* sit snug under the "Choose Pro" button */
  margin-bottom: 10px;
}
.plan-trial-note {
  margin: 0 0 8px;
  min-height: 1.1em; /* reserve space so the card doesn't jump when a note shows */
  font-size: 0.85rem;
  text-align: center;
  color: var(--terra-muted-text, #666);
}
.plan-trial-note.is-error {
  color: #c0392b;
}

/* Current-plan marker + cancel controls (added at runtime by scripts/pricing.js
   when the signed-in visitor is already on a plan / trial). */
.plan-select.is-current-plan {
  background: transparent;
  color: var(--muted, #5c6b64);
  border: 1px dashed var(--border, #dcdfd8);
  cursor: default;
}
.plan-cancel-wrap {
  margin-top: 8px;
  text-align: center;
}
.plan-cancel-status {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--muted, #666);
}
.plan-cancel-status.is-error {
  color: #c0392b;
}