/* ============================================
   ACCOUNT PAGE (/app/account/)
   ============================================
   Loaded alongside page-pricing.css (see functions.php's enqueue block) so
   Section 3's purchase cards can reuse the .pr-grid/.pr-card component
   verbatim instead of a second, page-local copy -- per this theme's usual
   convention every other rule here is still page-local/duplicated, only the
   pricing-card component itself is shared across the two templates.
   ============================================ */

.account-loggedout-actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Page layout ---- */

.account-container {
  padding-block: var(--space-10);
}

.account-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.account-page-header__title {
  margin: 0;
}

/* ---- Sections ----
   scroll-margin-top gives every #profile/#plan/#billing anchor breathing
   room once a future nav dropdown links straight to one -- this page's own
   nav is static (not sticky, see the page-template-page-account selector in
   style.css's sticky-nav override list), but the margin costs nothing and
   protects against a header height change later. ---- */

.account-section {
  scroll-margin-top: var(--space-6);
  padding-block: var(--space-10);
  border-top: 1px solid var(--color-border);
}

.account-section:first-of-type {
  border-top: none;
  padding-top: 0;
}

.account-section__heading {
  margin-bottom: var(--space-2);
}

.account-section__sub {
  max-width: 640px;
  margin-bottom: var(--space-6);
}

/* ---- Section 1: Profile ---- */

.account-clerk-mount {
  max-width: 720px;
}

/* ---- Section 2: Plan ---- */

.account-plan-card {
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.account-plan-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.account-plan-card__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.account-plan-card__value {
  font-weight: var(--weight-semibold);
  color: var(--color-dark);
  text-align: right;
}

.account-plan-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* ---- Section 3: Billing ---- */

.account-billing-payment-failed {
  max-width: 720px;
  margin-bottom: var(--space-6);
}

.account-billing-payment-failed strong {
  display: block;
  margin-bottom: var(--space-1);
}

.account-billing-state {
  max-width: 720px;
}

.account-billing-complimentary__alert p {
  margin: var(--space-1) 0 0;
}

.account-billing-status-alert {
  margin: 0;
}

.account-billing-plans {
  max-width: none;
}

.account-billing-plans__note {
  max-width: 720px;
  margin-bottom: var(--space-6);
}

.account-billing-plans__grid {
  margin-bottom: var(--space-6);
}

.account-billing-portal {
  margin-top: var(--space-8);
  max-width: 480px;
}

.account-billing-portal__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
}

.account-billing-portal__error {
  margin-top: var(--space-2);
  color: var(--color-danger);
  font-size: var(--text-sm);
}

/* .pr-grid (page-pricing.css) already collapses to a single column at
   768px and below -- no page-local override needed for that here. */
@media (max-width: 640px) {
  .account-page-header {
    flex-wrap: wrap;
  }
}