/* PR-UI12 Billing / Membership Commerce presentation layer */
:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) #module-content {
  --commerce-brand: #063f3c;
  --commerce-accent: #c95749;
  --commerce-muted: #68777b;
  --commerce-line: #dbe5e3;
  --commerce-soft: #edf5f2;
  min-inline-size: 0;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .module-page {
  max-inline-size: 1160px;
  margin-inline: auto;
  padding-block: clamp(1rem, 2vw, 2rem) 5rem;
  min-inline-size: 0;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .module-header h1,
:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .module-header h2,
:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) h3 {
  color: var(--commerce-brand);
  letter-spacing: 0;
}

body[data-page-module="membershipUpgrade"] .membership-upgrade-center,
body[data-page-module="billing"] .billing-page {
  gap: 1.1rem;
}

body[data-page-module="membershipUpgrade"] .billing-current-plan,
body[data-page-module="billing"] .billing-current-plan {
  margin: 0;
  padding: .8rem 1rem;
  border-inline-start: 4px solid var(--commerce-accent);
  background: #fff8f5;
  color: var(--commerce-muted);
}

body[data-page-module="membershipUpgrade"] .commerce-catalog-grid,
body[data-page-module="billing"] .commerce-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  min-inline-size: 0;
}

body[data-page-module="membershipUpgrade"] .commerce-product,
body[data-page-module="billing"] .commerce-product {
  display: grid;
  align-content: start;
  gap: .65rem;
  min-inline-size: 0;
  padding: 1.1rem;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px rgb(6 63 60 / 5%);
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-product > :is(span, strong, p, b) {
  margin: 0;
  overflow-wrap: anywhere;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-product > span,
:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-product > p {
  color: var(--commerce-muted);
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-product > strong {
  font-size: 1.15rem;
  color: var(--commerce-brand);
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-product > b {
  color: #7a3f13;
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-product .button {
  inline-size: 100%;
  min-block-size: 48px;
  margin-block-start: auto;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-family-picker {
  display: grid;
  gap: .55rem;
  min-inline-size: 0;
  margin: .25rem 0;
  padding: .75rem;
  border: 1px solid var(--commerce-line);
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-family-picker legend {
  padding-inline: .25rem;
  color: var(--commerce-brand);
  font-weight: 700;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-family-choices {
  display: grid;
  gap: .45rem;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-family-choices label {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-inline-size: 0;
  cursor: pointer;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-family-choices input {
  flex: 0 0 auto;
  inline-size: 1rem;
  min-inline-size: 1rem;
  block-size: 1rem;
  margin: .15rem 0 0;
}

:is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .commerce-family-choices span {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

body[data-page-module="billing"] .billing-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}

body[data-page-module="billing"] .billing-metrics article {
  min-block-size: 5.5rem;
  border-block-start: 3px solid var(--commerce-brand);
  border-radius: 6px;
  background: var(--commerce-soft);
}

body[data-page-module="billing"] .member-billing-tabs {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding: .35rem;
  border: 1px solid var(--commerce-line);
  border-radius: 8px;
  background: #f7faf9;
}

body[data-page-module="billing"] .billing-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

body[data-page-module="billing"] .billing-record {
  min-inline-size: 0;
  border-color: var(--commerce-line);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(6 63 60 / 4%);
}

body[data-page-module="billing"] .billing-record > div,
body[data-page-module="billing"] .commerce-order > div {
  min-inline-size: 0;
}

body[data-page-module="billing"] .billing-record strong,
body[data-page-module="billing"] .commerce-order strong {
  overflow-wrap: anywhere;
  color: var(--commerce-brand);
}

body[data-page-module="billing"] .commerce-payment-methods,
body[data-page-module="billing"] .commerce-member-center {
  min-inline-size: 0;
}

body[data-page-module="billing"] .payment-proof-editor {
  margin-block-start: .75rem;
  padding-block-start: .5rem;
  border-block-start: 1px solid var(--commerce-line);
}

body[data-page-module="billing"] .payment-proof-editor > summary {
  min-block-size: 48px;
  padding-block: .65rem;
  color: var(--commerce-brand);
  font-weight: 700;
}

body[data-page-module="billing"] .payment-proof-editor form {
  gap: .75rem;
}

@media (max-width: 900px) {
  body[data-page-module="membershipUpgrade"] .commerce-catalog-grid,
  body[data-page-module="billing"] .commerce-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  :is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) .module-page {
    padding-inline: 1rem;
  }

  body[data-page-module="membershipUpgrade"] .commerce-catalog-grid,
  body[data-page-module="billing"] .commerce-catalog-grid,
  body[data-page-module="billing"] .billing-metrics {
    grid-template-columns: 1fr;
  }

  body[data-page-module="billing"] .billing-filter-row > .button,
  body[data-page-module="billing"] .commerce-payment-entry,
  body[data-page-module="billing"] .commerce-payment-entry > *,
  body[data-page-module="membershipUpgrade"] .commerce-product .button {
    inline-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :is(body[data-page-module="membershipUpgrade"], body[data-page-module="billing"]) * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}