/* Public membership account and plan selection.
 * Plugin Theming API (docs/PLUGIN_THEMING_API.md): --membership-card-bg /
 * --membership-card-border are the designer-facing override inputs feeding
 * the internal --membership-panel / --membership-line vars as fallbacks.
 * Accent still follows the site's --bs-primary (not yet a token). */
.membership-public-page {
    --membership-accent: var(--bs-primary);
    --membership-meta-color: var(--bs-secondary-color);
    --membership-line: var(--membership-card-border, color-mix(in srgb, var(--bs-body-color) 15%, transparent));
    --membership-line-soft: color-mix(in srgb, var(--bs-body-color) 9%, transparent);
    --membership-panel: var(--membership-card-bg, color-mix(in srgb, var(--bs-body-bg) 97%, var(--bs-tertiary-bg)));
    --membership-panel-muted: color-mix(in srgb, var(--bs-tertiary-bg) 84%, var(--bs-body-bg));
    color: var(--bs-body-color);
    font-size: .94rem;
}

.membership-page {
    width: 100%;
}

.membership-public-hero {
  color: var(--bs-body-color);
  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(var(--bs-primary-rgb), 0.16),
      transparent 22rem
    ),
    linear-gradient(
      135deg,
      rgba(var(--bs-primary-rgb), 0.08),
      rgba(var(--bs-primary-rgb), 0.015)
    );
    border-bottom: 1px solid var(--bs-border-color);
}

.membership-public-hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .7fr);
    align-items: center;
    gap: 2rem clamp(2rem, 5vw, 5rem);
}

.membership-public-hero-copy {
    min-width: 0;
}

.membership-page-eyebrow,
.membership-section-label {
    display: flex;
    align-items: center;
    gap: .42rem;
    color: var(--membership-accent, var(--bs-primary));
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.4;
    text-transform: uppercase;
}

.membership-public-hero h1 {
    max-width: 48rem;
    margin: .42rem 0 .65rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
    font-weight: 760;
    letter-spacing: -.045em;
    line-height: 1.02;
}

.membership-public-hero-copy>p {
    max-width: 44rem;
    margin: 0;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: clamp(.95rem, 1.4vw, 1.08rem);
    line-height: 1.65;
}

.membership-page-actions {
    display: grid;
    padding: .48rem;
    gap: .4rem;
    border: 1px solid color-mix(in srgb, var(--bs-body-color) 22%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
    box-shadow: 0 .8rem 2.2rem color-mix(in srgb, #000 8%, transparent);
    backdrop-filter: blur(10px);
}

.membership-public-action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 3.65rem;
    padding: .55rem .65rem;
    gap: .62rem;
    border: 1px solid transparent;
    border-radius: .68rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.membership-public-action+.membership-public-action {
    border-top-color: var(--membership-line-soft);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.membership-public-action:hover {
    border-color: var(--membership-line);
    background: var(--membership-panel-muted);
    color: var(--bs-body-color);
}

.membership-public-action-icon {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border-radius: .55rem;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .78rem;
}

.membership-public-action strong,
.membership-public-action small {
    display: block;
}

.membership-public-action strong {
    font-size: .73rem;
}

.membership-public-action small {
    margin-top: .08rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .59rem;
}

.membership-public-action>i {
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .65rem;
    transition: transform .15s ease;
}

.membership-public-action:hover>i {
    color: var(--membership-accent, var(--bs-primary));
    transform: translateX(.12rem);
}

.membership-dashboard {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr);
    align-items: start;
    gap: 1.25rem;
}

.membership-dashboard-main {
    display: grid;
    min-width: 0;
    gap: 1.25rem;
}

.membership-current-card,
.membership-content-card,
.membership-quick-links,
.membership-welcome-card,
.membership-plan-card {
    border: 1px solid var(--membership-line);
    border-radius: .72rem;
    background: var(--membership-panel);
    box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .045);
}

.membership-current-card,
.membership-content-card {
    overflow: hidden;
}

.membership-current-header,
.membership-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.8rem;
    padding: .9rem 1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--membership-line);
    background: var(--membership-panel-muted);
}

.membership-current-title,
.membership-card-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .7rem;
}

.membership-current-icon,
.membership-card-icon {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(var(--bs-primary-rgb), .22);
    border-radius: .5rem;
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--membership-accent, var(--bs-primary));
}

.membership-current-icon {
    border-color: rgba(var(--bs-warning-rgb), .32);
    background: rgba(var(--bs-warning-rgb), .09);
    color: var(--bs-warning-text-emphasis);
}

.membership-current-header h2,
.membership-card-header h2 {
    margin: .12rem 0 0;
    font-size: 1.05rem;
    line-height: 1.3;
}

.membership-status {
    display: inline-flex;
    align-items: center;
    padding: .38rem .55rem;
    gap: .3rem;
    border: 1px solid rgba(var(--bs-success-rgb), .34);
    border-radius: .38rem;
    background: rgba(var(--bs-success-rgb), .08);
    color: var(--bs-success);
    font-size: .62rem;
    font-weight: 750;
}

.membership-status i {
    font-size: .37rem;
}

.membership-current-body {
    padding: 1rem;
}

.membership-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    margin: 0;
    gap: .65rem;
}

.membership-details>div {
    min-width: 0;
    padding: .75rem;
    border: 1px solid var(--membership-line-soft);
    border-radius: .5rem;
    background: color-mix(in srgb, var(--bs-body-bg) 96%, var(--bs-tertiary-bg));
}

.membership-details dt {
    margin-bottom: .28rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .59rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.membership-details dd {
    display: flex;
    align-items: center;
    margin: 0;
    gap: .38rem;
    color: var(--bs-body-color);
    font-size: .69rem;
    font-weight: 700;
}

.membership-details dd i {
    flex: 0 0 auto;
    color: var(--membership-accent, var(--bs-primary));
}

.membership-payment-alert {
    display: flex;
    align-items: flex-start;
    margin: .85rem 0 0;
    gap: .5rem;
    border-radius: .48rem;
    font-size: .69rem;
    line-height: 1.5;
}

.membership-current-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .9rem;
    padding-top: .85rem;
    gap: 1rem;
    border-top: 1px solid var(--membership-line-soft);
}

.membership-current-footer>span {
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .65rem;
}

.membership-current-footer>span i {
    color: var(--membership-accent, var(--bs-primary));
}

.membership-current-footer .btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    gap: .35rem;
    border-radius: .4rem;
    font-size: .64rem;
    font-weight: 700;
}

.membership-count {
    display: grid;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0 .35rem;
    place-items: center;
    border-radius: .4rem;
    background: rgba(var(--bs-primary-rgb), .12);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .66rem;
    font-weight: 800;
}

.membership-content-body {
    padding: .65rem;
}

.membership-resource-list {
    display: grid;
    gap: .4rem;
}

.membership-resource-link {
    display: flex;
    align-items: center;
    min-height: 3.6rem;
    padding: .55rem .65rem;
    gap: .65rem;
    border: 1px solid transparent;
    border-radius: .48rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}

.membership-resource-link:hover {
    border-color: var(--membership-line);
    background: var(--membership-panel-muted);
    color: var(--bs-body-color);
}

.membership-resource-icon {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .45rem;
    background: rgba(var(--bs-primary-rgb), .09);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .78rem;
}

.membership-resource-copy {
    min-width: 0;
    margin-right: auto;
}

.membership-resource-copy strong,
.membership-resource-copy small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.membership-resource-copy strong {
    font-size: .75rem;
}

.membership-resource-copy small {
    margin-top: .1rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .61rem;
}

.membership-resource-arrow {
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .65rem;
    transition: transform .15s ease;
}

.membership-resource-link:hover .membership-resource-arrow {
    color: var(--membership-accent, var(--bs-primary));
    transform: translateX(.12rem);
}

.membership-empty {
    display: flex;
    align-items: center;
    padding: .65rem;
    gap: .7rem;
}

.membership-empty>span {
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .48rem;
    background: var(--membership-panel-muted);
    color: var(--membership-meta-color, var(--bs-secondary-color));
}

.membership-empty h3 {
    margin: 0 0 .12rem;
    font-size: .76rem;
}

.membership-empty p {
    margin: 0;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .64rem;
    line-height: 1.45;
}

.membership-quick-links {
    position: sticky;
    top: 1rem;
    padding: 1rem;
}

.membership-quick-links h2 {
    margin: .15rem 0 .35rem;
    font-size: 1rem;
}

.membership-quick-links>p {
    margin: 0 0 .8rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .67rem;
    line-height: 1.5;
}

.membership-quick-links>a {
    display: flex;
    align-items: center;
    padding: .65rem 0;
    gap: .6rem;
    border-top: 1px solid var(--membership-line-soft);
    color: var(--bs-body-color);
    text-decoration: none;
}

.membership-quick-icon {
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .43rem;
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .75rem;
}

.membership-quick-links>a>span:nth-child(2) {
    min-width: 0;
    margin-right: auto;
}

.membership-quick-links strong,
.membership-quick-links small {
    display: block;
}

.membership-quick-links strong {
    font-size: .7rem;
}

.membership-quick-links small {
    margin-top: .08rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .59rem;
}

.membership-quick-links>a>i {
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .65rem;
}

.membership-welcome-card {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: min(100%, 46rem);
    margin: 1rem auto;
    padding: clamp(2rem, 5vw, 3.25rem);
    text-align: center;
}

.membership-welcome-icon {
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    margin-bottom: 1rem;
    place-items: center;
    border: 1px solid rgba(var(--bs-warning-rgb), .3);
    border-radius: .72rem;
    background: rgba(var(--bs-warning-rgb), .09);
    color: var(--bs-warning-text-emphasis);
    font-size: 1.25rem;
}

.membership-welcome-card h2 {
    margin: .3rem 0 .45rem;
    font-size: 1.3rem;
}

.membership-welcome-card p {
    max-width: 34rem;
    margin: 0 0 1rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .76rem;
    line-height: 1.55;
}

.membership-welcome-card .btn {
    display: inline-flex;
    align-items: center;
    min-height: 2.55rem;
    gap: .4rem;
    border-radius: .44rem;
    font-size: .7rem;
    font-weight: 700;
}

.membership-welcome-login {
    margin: .8rem 0 0 !important;
    font-size: .68rem !important;
}

.membership-plans {
    margin-top: 2.25rem;
    padding-top: 1.65rem;
    border-top: 1px solid var(--membership-line);
    scroll-margin-top: 1rem;
}

.membership-plans-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

.membership-plans-heading h2 {
    margin: .16rem 0 .22rem;
    font-size: 1.28rem;
}

.membership-plans-heading p {
    margin: 0;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .7rem;
}

#membershipPlansError {
    margin-bottom: 1rem;
    font-size: .72rem;
}

.membership-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .8rem;
}

.membership-plan-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: .95rem;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.membership-plan-card:not(.is-current):hover {
    border-color: color-mix(in srgb, var(--membership-accent, var(--bs-primary)) 38%, var(--membership-line));
    box-shadow: 0 .75rem 1.7rem rgba(0, 0, 0, .08);
    transform: translateY(-.1rem);
}

.membership-plan-card.is-current {
    border-color: rgba(var(--bs-primary-rgb), .6);
    box-shadow: inset 0 0 0 1px rgba(var(--bs-primary-rgb), .22), 0 .45rem 1.4rem rgba(var(--bs-primary-rgb), .07);
}

.membership-plan-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2rem;
    gap: .5rem;
}

.membership-plan-icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .4rem;
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .7rem;
}

.membership-current-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .42rem;
    gap: .25rem;
    border-radius: .34rem;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .56rem;
    font-weight: 750;
}

.membership-plan-card h3 {
    margin: .85rem 0 .3rem;
    font-size: .94rem;
}

.membership-plan-price strong,
.membership-plan-price span {
    display: block;
}

.membership-plan-price strong {
    font-size: 1.25rem;
    letter-spacing: -.03em;
}

.membership-plan-price span {
    margin-top: .08rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .58rem;
}

.membership-plan-card>p {
    margin: .8rem 0 1rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .66rem;
    line-height: 1.5;
}

.membership-plan-card>.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    margin-top: auto;
    gap: .35rem;
    border-radius: .42rem;
    font-size: .67rem;
    font-weight: 700;
}

.membership-plan-current {
    border: 1px solid rgba(var(--bs-primary-rgb), .4);
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--membership-accent, var(--bs-primary));
    opacity: 1;
}

.membership-plan-current:disabled {
    color: var(--membership-accent, var(--bs-primary));
    opacity: 1;
}

@media (max-width: 1199.98px) {
    .membership-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .membership-public-hero-layout {
        grid-template-columns: 1fr;
    }

    .membership-page-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .membership-public-action+.membership-public-action {
        border-top-color: transparent;
        border-left-color: var(--membership-line-soft);
        border-radius: .68rem;
    }

    .membership-dashboard {
        grid-template-columns: 1fr;
    }

    .membership-quick-links {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .membership-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .membership-page-actions {
        grid-template-columns: 1fr;
    }

    .membership-public-action+.membership-public-action {
        border-top-color: var(--membership-line-soft);
        border-left-color: transparent;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .membership-current-header {
        align-items: flex-start;
    }

    .membership-current-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .membership-current-footer .btn {
        width: 100%;
    }

    .membership-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* Public membership invoices. */
.membership-invoices-page {
    --invoice-line: color-mix(in srgb, var(--bs-body-color) 15%, transparent);
    --invoice-line-soft: color-mix(in srgb, var(--bs-body-color) 9%, transparent);
    --invoice-panel: color-mix(in srgb, var(--bs-body-bg) 97%, var(--bs-tertiary-bg));
    --invoice-panel-muted: color-mix(in srgb, var(--bs-tertiary-bg) 84%, var(--bs-body-bg));
    width: 100%;
    color: var(--bs-body-color);
    font-size: .94rem;
}

.membership-invoices-hero-actions {
    align-self: center;
}

.membership-invoices-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.35rem;
    padding-bottom: 1.35rem;
    gap: 1.25rem;
    border-bottom: 1px solid var(--invoice-line);
}

.membership-invoices-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .9rem;
}

.membership-invoices-heading-icon {
    display: grid;
    width: 3.35rem;
    height: 3.35rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(var(--bs-primary-rgb), .24);
    border-radius: .72rem;
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--membership-accent, var(--bs-primary));
    font-size: 1.15rem;
}

.membership-invoices-eyebrow {
    display: block;
    color: var(--membership-accent, var(--bs-primary));
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.4;
    text-transform: uppercase;
}

.membership-invoices-header h1 {
    margin: .12rem 0 .22rem;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.08;
}

.membership-invoices-header p {
    margin: 0;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .86rem;
    line-height: 1.5;
}

.membership-invoices-back {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .48rem .72rem;
    gap: .38rem;
    border-radius: .44rem;
    font-size: .72rem;
    font-weight: 700;
}

.membership-invoice-filters {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(9rem, 1fr) minmax(9.5rem, 1fr) minmax(9.5rem, 1fr) auto;
    align-items: end;
    margin-bottom: 1rem;
    padding: .85rem;
    gap: .65rem;
    border: 1px solid var(--invoice-line);
    border-radius: .72rem;
    background: var(--invoice-panel);
    box-shadow: 0 .35rem 1.1rem rgba(0, 0, 0, .035);
}

.membership-invoice-filter label {
    display: block;
    margin: 0 0 .3rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .61rem;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.membership-invoice-filter .form-select,
.membership-invoice-filter .form-control {
    min-height: 2.45rem;
    border-color: var(--invoice-line);
    border-radius: .42rem;
    background-color: var(--bs-body-bg);
    font-size: .7rem;
}

.membership-invoice-filter-actions {
    display: flex;
    gap: .4rem;
}

.membership-invoice-filter-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.45rem;
    padding-inline: .72rem;
    gap: .3rem;
    border-radius: .42rem;
    font-size: .66rem;
    font-weight: 700;
}

.membership-invoice-results {
    overflow: hidden;
    border: 1px solid var(--invoice-line);
    border-radius: .72rem;
    background: var(--invoice-panel);
    box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .045);
}

.membership-invoice-results-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.7rem;
    padding: .75rem 1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--invoice-line);
    background: var(--invoice-panel-muted);
}

.membership-invoice-results-heading h2 {
    margin: 0;
    font-size: .92rem;
}

.membership-invoice-results-heading span {
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .64rem;
}

.membership-invoice-table-wrap {
    overflow-x: auto;
}

.membership-invoice-table {
    margin: 0;
    font-size: .7rem;
}

.membership-invoice-table> :not(caption)>*>* {
    padding: .82rem 1rem;
    border-color: var(--invoice-line-soft);
}

.membership-invoice-table thead th {
    border-bottom-width: 1px;
    background: color-mix(in srgb, var(--invoice-panel-muted) 60%, var(--bs-body-bg));
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.membership-invoice-table tbody tr:last-child td {
    border-bottom: 0;
}

.membership-invoice-table tbody tr:hover {
    background: rgba(var(--bs-primary-rgb), .025);
}

.membership-invoice-date {
    font-weight: 700;
    white-space: nowrap;
}

.membership-invoice-description strong,
.membership-invoice-description small {
    display: block;
}

.membership-invoice-description strong {
    font-size: .72rem;
}

.membership-invoice-description small {
    margin-top: .12rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .59rem;
}

.membership-invoice-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    white-space: nowrap;
}

.membership-invoice-source,
.membership-invoice-status {
    display: inline-flex;
    align-items: center;
    padding: .31rem .43rem;
    gap: .25rem;
    border: 1px solid var(--invoice-line);
    border-radius: .35rem;
    background: var(--invoice-panel-muted);
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .58rem;
    font-weight: 750;
    white-space: nowrap;
}

.membership-invoice-status.is-success {
    border-color: rgba(var(--bs-success-rgb), .3);
    background: rgba(var(--bs-success-rgb), .08);
    color: var(--bs-success);
}

.membership-invoice-status.is-info {
    border-color: rgba(var(--bs-info-rgb), .34);
    background: rgba(var(--bs-info-rgb), .1);
    color: var(--bs-info-text-emphasis);
}

.membership-invoice-status.is-warning {
    border-color: rgba(var(--bs-warning-rgb), .36);
    background: rgba(var(--bs-warning-rgb), .1);
    color: var(--bs-warning-text-emphasis);
}

.membership-invoice-status i {
    font-size: .35rem;
}

.membership-invoice-view {
    display: inline-flex;
    align-items: center;
    min-height: 2.15rem;
    padding: .34rem .55rem;
    gap: .3rem;
    border-radius: .38rem;
    font-size: .62rem;
    font-weight: 700;
    white-space: nowrap;
}

.membership-invoice-pagination {
    margin: 0;
    padding: .8rem 1rem;
    border-top: 1px solid var(--invoice-line);
    background: var(--invoice-panel-muted);
    font-size: .67rem;
}

.membership-invoice-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: clamp(2.5rem, 7vw, 4.5rem) 1.25rem;
    border: 1px solid var(--invoice-line);
    border-radius: .72rem;
    background: var(--invoice-panel);
    text-align: center;
    box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .045);
}

.membership-invoice-empty-icon {
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    margin-bottom: .9rem;
    place-items: center;
    border-radius: .72rem;
    background: var(--invoice-panel-muted);
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: 1.2rem;
}

.membership-invoice-empty h2 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
}

.membership-invoice-empty p {
    max-width: 30rem;
    margin: 0 0 1rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .72rem;
    line-height: 1.55;
}

.membership-invoice-empty .btn {
    border-radius: .42rem;
    font-size: .67rem;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .membership-invoice-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .membership-invoice-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .membership-invoices-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .membership-invoices-back {
        width: 100%;
        justify-content: center;
    }

    .membership-invoice-table-wrap {
        overflow: visible;
    }

    .membership-invoice-table,
    .membership-invoice-table tbody {
        display: block;
    }

    .membership-invoice-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .membership-invoice-table tbody {
        padding: .6rem;
    }

    .membership-invoice-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        margin-bottom: .55rem;
        padding: .75rem;
        gap: .55rem 1rem;
        border: 1px solid var(--invoice-line-soft);
        border-radius: .55rem;
        background: var(--bs-body-bg);
    }

    .membership-invoice-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .membership-invoice-table tbody td {
        display: block;
        padding: 0;
        border: 0;
        text-align: left !important;
    }

    .membership-invoice-table tbody td::before {
        display: block;
        margin-bottom: .12rem;
        color: var(--membership-meta-color, var(--bs-secondary-color));
        content: attr(data-label);
        font-size: .53rem;
        font-weight: 800;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .membership-invoice-description {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .membership-invoice-action {
        align-self: end;
    }

    .membership-invoice-view {
        justify-content: center;
        width: 100%;
    }

    .membership-invoice-pagination {
        align-items: stretch !important;
    }
}

@media (max-width: 575.98px) {
    .membership-invoices-heading {
        align-items: flex-start;
    }

    .membership-invoices-heading-icon {
        width: 2.85rem;
        height: 2.85rem;
    }

    .membership-invoice-filters {
        grid-template-columns: 1fr;
    }

    .membership-invoice-filter-actions {
        grid-column: auto;
    }

    .membership-invoice-filter-actions .btn {
        flex: 1;
    }

    .membership-invoice-results-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .2rem;
    }

    .membership-invoice-table tbody tr {
        grid-template-columns: 1fr 1fr;
    }
}

/* Public members-only downloads. */
.membership-files-page {
    --files-line: color-mix(in srgb, var(--bs-body-color) 15%, transparent);
    --files-line-soft: color-mix(in srgb, var(--bs-body-color) 9%, transparent);
    --files-panel: color-mix(in srgb, var(--bs-body-bg) 97%, var(--bs-tertiary-bg));
    --files-panel-muted: color-mix(in srgb, var(--bs-tertiary-bg) 84%, var(--bs-body-bg));
    width: 100%;
    color: var(--bs-body-color);
    font-size: .94rem;
}

.membership-files-hero-actions {
    align-self: center;
}

.membership-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.35rem;
    padding-bottom: 1.35rem;
    gap: 1.25rem;
    border-bottom: 1px solid var(--files-line);
}

.membership-files-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .9rem;
}

.membership-files-heading-icon {
    display: grid;
    width: 3.35rem;
    height: 3.35rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(var(--bs-primary-rgb), .24);
    border-radius: .72rem;
    background: rgba(var(--bs-primary-rgb), .08);
    color: var(--membership-accent, var(--bs-primary));
    font-size: 1.15rem;
}

.membership-files-eyebrow {
    display: block;
    color: var(--membership-accent, var(--bs-primary));
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.4;
    text-transform: uppercase;
}

.membership-files-header h1 {
    margin: .12rem 0 .22rem;
    font-size: clamp(2rem, 3.6vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.08;
}

.membership-files-header p {
    margin: 0;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .86rem;
    line-height: 1.5;
}

.membership-files-back {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: .48rem .72rem;
    gap: .38rem;
    border-radius: .44rem;
    font-size: .72rem;
    font-weight: 700;
}

.membership-files-panel {
    overflow: hidden;
    border: 1px solid var(--files-line);
    border-radius: .72rem;
    background: var(--files-panel);
    box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .045);
}

.membership-files-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.3rem;
    padding: .85rem 1rem;
    gap: 1rem;
    border-bottom: 1px solid var(--files-line);
    background: var(--files-panel-muted);
}

.membership-files-panel-title {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: .7rem;
}

.membership-files-panel-icon {
    display: grid;
    width: 2.45rem;
    height: 2.45rem;
    flex: 0 0 auto;
    place-items: center;
    border-radius: .48rem;
    background: rgba(var(--bs-primary-rgb), .09);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .78rem;
}

.membership-files-panel-header h2 {
    margin: .1rem 0 0;
    font-size: .98rem;
}

.membership-files-count {
    display: inline-flex;
    align-items: center;
    padding: .32rem .46rem;
    border-radius: .36rem;
    background: rgba(var(--bs-primary-rgb), .1);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .6rem;
    font-weight: 800;
    white-space: nowrap;
}

.membership-file-list {
    display: grid;
    padding: .65rem;
    gap: .45rem;
}

.membership-file-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: 4.85rem;
    padding: .7rem;
    gap: .75rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    color: var(--bs-body-color);
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}

.membership-file-item:hover {
    border-color: var(--files-line);
    background: var(--files-panel-muted);
    color: var(--bs-body-color);
    box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .035);
    transform: translateY(-.04rem);
}

.membership-file-icon {
    display: grid;
    width: 2.85rem;
    height: 2.85rem;
    place-items: center;
    border: 1px solid rgba(var(--bs-primary-rgb), .18);
    border-radius: .52rem;
    background: rgba(var(--bs-primary-rgb), .07);
    color: var(--membership-accent, var(--bs-primary));
    font-size: .9rem;
}

.membership-file-copy {
    min-width: 0;
}

.membership-file-title {
    display: block;
    overflow: hidden;
    color: var(--bs-body-color);
    font-size: .76rem;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.membership-file-description {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .18rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .63rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.membership-file-meta {
    display: flex;
    align-items: center;
    margin-top: .38rem;
    gap: .35rem;
}

.membership-file-tier {
    display: inline-flex;
    align-items: center;
    padding: .26rem .38rem;
    gap: .24rem;
    border: 1px solid rgba(var(--bs-warning-rgb), .33);
    border-radius: .32rem;
    background: rgba(var(--bs-warning-rgb), .09);
    color: var(--bs-warning-text-emphasis);
    font-size: .55rem;
    font-weight: 750;
}

.membership-file-tier i {
    font-size: .52rem;
}

.membership-file-access {
    display: inline-flex;
    align-items: center;
    gap: .24rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .55rem;
}

.membership-file-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    padding: .4rem .58rem;
    gap: .32rem;
    border: 1px solid var(--files-line);
    border-radius: .4rem;
    background: var(--bs-body-bg);
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .62rem;
    font-weight: 750;
    white-space: nowrap;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.membership-file-item:hover .membership-file-action {
    border-color: rgba(var(--bs-primary-rgb), .4);
    background: var(--membership-accent, var(--bs-primary));
    color: var(--bs-white);
}

.membership-files-note {
    display: flex;
    align-items: center;
    padding: .75rem 1rem;
    gap: .45rem;
    border-top: 1px solid var(--files-line-soft);
    background: var(--files-panel-muted);
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .61rem;
    line-height: 1.45;
}

.membership-files-note i {
    flex: 0 0 auto;
    color: var(--membership-accent, var(--bs-primary));
}

.membership-files-empty {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: clamp(2.5rem, 7vw, 4.5rem) 1.25rem;
    border: 1px solid var(--files-line);
    border-radius: .72rem;
    background: var(--files-panel);
    text-align: center;
    box-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .045);
}

.membership-files-empty-icon {
    display: grid;
    width: 3.8rem;
    height: 3.8rem;
    margin-bottom: .9rem;
    place-items: center;
    border-radius: .72rem;
    background: var(--files-panel-muted);
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: 1.2rem;
}

.membership-files-empty h2 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
}

.membership-files-empty p {
    max-width: 31rem;
    margin: 0 0 1rem;
    color: var(--membership-meta-color, var(--bs-secondary-color));
    font-size: .72rem;
    line-height: 1.55;
}

.membership-files-empty .btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: .42rem;
    font-size: .67rem;
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .membership-files-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .membership-files-back {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 575.98px) {
    .membership-files-heading {
        align-items: flex-start;
    }

    .membership-files-heading-icon {
        width: 2.85rem;
        height: 2.85rem;
    }

    .membership-files-panel-header {
        align-items: flex-start;
    }

    .membership-file-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .membership-file-action {
        grid-column: 1 / -1;
        width: 100%;
    }

    .membership-file-title {
        white-space: normal;
    }
}