/* Shared membership design, scoped to the configured PMPro pages. */
body.bsos-account-page {
    --bsos-account-ink: #100b50;
    --bsos-account-muted: #6d62b6;
    --bsos-account-line: #e5e3fa;
    --bsos-account-accent: #4935bc;
    --bsos-account-primary: #341F58;
}

.bsos-account-page #content {
    background: #f6f5ff;
}

.bsos-account-page .page-headline,
.bsos-account-page .breadcrumbs {
    display: none;
}

.bsos-account-page #content > .page-container {
    max-inline-size: 1440px;
    padding: 144px 48px 72px;
}

.bsos-account-page .page-content,
.bsos-account-page .entry-content {
    inline-size: 100%;
    max-inline-size: none;
}

.bsos-account {
    color: var(--bsos-account-ink);
    font-family: 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.bsos-account *,
.bsos-account *::before,
.bsos-account *::after {
    box-sizing: border-box;
}

.bsos-account h1,
.bsos-account h2,
.bsos-account h3 {
    color: var(--bsos-account-ink);
    font-family: 'Manrope', sans-serif;
    font-weight: 900;
    letter-spacing: -0.045em;
}

.bsos-account-heading {
    margin-block-end: 26px;
}

.bsos-account-heading h1 {
    margin: 0 0 4px;
    font-size: clamp(32px, 3.6vw, 50px);
    line-height: 1.18;
}

.bsos-account-heading p {
    margin: 0;
    color: var(--bsos-account-muted);
    font-size: clamp(17px, 1.6vw, 23px);
}

.bsos-account-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: stretch;
    gap: 20px;
}

.bsos-account-sidebar {
    align-self: start;
    padding: 30px 12px;
    border: 1px solid var(--bsos-account-line);
    border-radius: 12px;
    background: rgb(255 255 255 / 70%);
}

.bsos-account-identity {
    text-align: center;
    margin-block-end: 30px;
    overflow-wrap: anywhere;
}

.bsos-account-avatar {
    display: grid;
    place-items: center;
    inline-size: 84px;
    aspect-ratio: 1;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #e4e0f5;
    font-size: 28px;
    font-weight: 800;
}

.bsos-account-identity h2 {
    margin: 0 0 4px;
    font-size: 21px;
}

.bsos-account-identity p {
    margin: 0;
    color: var(--bsos-account-muted);
}

.bsos-account-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bsos-account a,
body.bsos-account-page .bsos-account .pmpro a {
    color: #3823bb;
    background-image: none;
    text-decoration: none;
}

.bsos-account-sidebar nav :is(a, button) {
    display: flex;
    align-items: center;
    gap: 18px;
    min-block-size: 54px;
    padding: 12px 18px;
    border-radius: 8px;
    color: var(--bsos-account-ink);
    font: inherit;
    font-weight: 600;
}

.bsos-account svg {
    flex-shrink: 0;
}

.bsos-account-sidebar nav :is(a, button) svg {
    color: #5140aa;
}

.bsos-account-sidebar nav a:any-link[aria-current],
.bsos-account-sidebar nav a:any-link:is(:hover, :focus-visible) {
    background: #ede7ff;
    color: #3823bb;
    text-decoration: none;
}

.bsos-account-sidebar nav button:disabled {
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--bsos-account-ink);
    text-align: start;
    text-decoration: none;
    opacity: 0.5;
    cursor: not-allowed;
}

.bsos-account-sidebar nav .bsos-account-logout {
    position: relative;
    margin-block-start: 32px;
}

.bsos-account-sidebar nav .bsos-account-logout::before {
    content: "";
    position: absolute;
    inset-block-start: -18px;
    inset-inline: 8px;
    border-block-start: 1px solid var(--bsos-account-line);
    pointer-events: none;
}

.bsos-account a:focus-visible {
    outline: 2px solid var(--bsos-account-accent);
    outline-offset: 4px;
}

.bsos-account a:hover {
    text-decoration: underline;
}

.bsos-account-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-inline-size: 0;
}

.bsos-account-top {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 20px;
}

.bsos-account-top-single {
    grid-template-columns: 1fr;
}

@media (max-width: 1400px) {
    .bsos-account-top { grid-template-columns: 1fr; }
    .bsos-account-card-preview { max-inline-size: 620px; inline-size: 100%; }
}

.bsos-account .pmpro {
    --pmpro--color--contrast: var(--bsos-account-ink);
    --pmpro--color--base: #fff;
    --pmpro--color--border--variation: var(--bsos-account-line);
    --pmpro--color--border: var(--bsos-account-line);
    --pmpro--color--accent: var(--bsos-account-accent);
    font-family: inherit;
    font-size: inherit;
}

.bsos-account .pmpro_section {
    margin: 0;
    padding: 0;
    scroll-margin-block-start: 110px;
}

.bsos-account #bsos-account-payments {
    scroll-margin-block-start: 110px;
}

:where(.bsos-account:not(.bsos-membership-area-card)) .bsos-account-main > :not(.bsos-account-top) .pmpro_section,
.bsos-membership-area-card .pmpro_membership_card_display,
.bsos-account-membership .pmpro_section,
.bsos-account-card-preview,
.bsos-account-empty {
    border: 1px solid var(--bsos-account-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgb(62 45 137 / 3%);
}

.bsos-account-card-preview {
    box-sizing: border-box;
    padding: clamp(16px, 1.7vw, 24px);
}

.bsos-account .pmpro .pmpro_section_title,
.bsos-account-empty h2 {
    margin: 0;
    padding: 18px 24px;
    border-block-end: 1px solid var(--bsos-account-line);
    font-size: 22px;
    line-height: 1.35;
}

.bsos-account:not(:where(.bsos-membership-area-card)) .pmpro .pmpro_card {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--bsos-account-ink);
    overflow: visible;
}

.bsos-account .pmpro .pmpro_card_content {
    padding: 18px 24px;
    background: transparent;
}

.bsos-account .pmpro .pmpro_card_actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
    margin: 0 24px;
    padding: 14px 0;
    border-block-start: 1px solid var(--bsos-account-line);
    background: transparent;
    font-size: 16px;
}

.bsos-account .pmpro_card_action_separator {
    display: none;
}

.bsos-account .pmpro .pmpro_card_action {
    margin: 0;
}

.bsos-account .pmpro .pmpro_card_actions a {
    display: inline-flex;
    align-items: center;
    min-block-size: 32px;
}

.bsos-account .bsos-account-membership .pmpro_section_content {
    margin-block-start: 0;
}

.bsos-account .bsos-account-membership .pmpro .pmpro_section_title {
    padding: 24px 24px 0;
    border: 0;
    color: var(--bsos-account-muted);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
}

.bsos-account .bsos-account-membership .pmpro_card {
    margin: 14px 24px 24px;
    gap: 18px;
}

.bsos-account .bsos-account-membership .pmpro_card_title {
    margin: 0;
    display: flex;
    align-items: center;
    min-block-size: 36px;
    padding: 0 124px 0 0;
    border: 0;
    color: var(--bsos-account-ink);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
}

.bsos-account-membership .pmpro_card {
    position: relative;
}

.bsos-account-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.bsos-account-status {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    background: #e9f6eb;
    color: #177529;
}

.bsos-account-status::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: currentColor;
}

.bsos-account-status-expired {
    background: #fff3d6;
    color: #925900;
}

.bsos-account-membership .pmpro_card + .pmpro_card {
    margin-block-start: 28px;
}

.bsos-account .bsos-account-membership .pmpro_card_content {
    margin: 0;
    padding: 16px 0 0;
    border-block-start: 1px solid var(--bsos-account-line);
}

.bsos-account-membership .pmpro_cols-3 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
}

.bsos-account-membership .pmpro_cols-3 > .pmpro_list_item {
    flex: 1 1 160px;
    inline-size: auto;
}

.bsos-account .pmpro_list {
    margin: 0;
    padding: 0;
}

.bsos-account .pmpro_list_item {
    margin: 0;
    padding: 0;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.bsos-account .pmpro_list_item_label {
    color: var(--bsos-account-muted);
    font-size: 15px;
    font-weight: 500;
}

.bsos-account .pmpro_list_item_value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.bsos-account .bsos-account-membership .pmpro_list_item:has(.bsos-account-expiry-label) {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bsos-account .bsos-account-membership .pmpro_list_item_value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
}

.bsos-account .bsos-account-unlimited-note {
    margin: 8px 0 0;
    color: var(--bsos-account-muted);
    font-size: 16px;
    line-height: 1.5;
}

.bsos-account .bsos-account-membership .pmpro_card:has(button.bsos-account-manage:disabled) {
    row-gap: 0;
}

.bsos-account .bsos-account-membership .pmpro_card_content:has(> button.bsos-account-manage:disabled) {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-block-start: 18px;
}

.bsos-account .pmpro_card_content:has(> button.bsos-account-manage:disabled) .bsos-account-unlimited-note {
    margin-block-end: 24px;
}

body.bsos-account-page .bsos-account .pmpro button.bsos-account-manage:disabled {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: 48px;
    margin-block-start: auto;
    padding: 11px 18px;
    border: 1px solid var(--bsos-account-primary);
    border-radius: 8px;
    background: transparent;
    color: var(--bsos-account-primary);
    font: inherit;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.bsos-account .bsos-account-membership .pmpro_card_actions {
    margin: 0;
    padding: 0;
    border: 0;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.bsos-account-membership .pmpro_card_action:has([id^="pmpro_actionlink-renew-"], [id^="pmpro_actionlink-cancel-"], .bsos-account-pending-payment) {
    flex: 0 0 auto;
    min-inline-size: 0;
}

.bsos-account-membership .pmpro_card_action:has([id^="pmpro_actionlink-renew-"], .bsos-account-pending-payment) {
    inline-size: 100%;
}

body.bsos-account-page .bsos-account .pmpro a:is([id^="pmpro_actionlink-renew-"], [id^="pmpro_actionlink-cancel-"], .bsos-account-pending-payment),
body.bsos-account-page .bsos-account .pmpro a:is([id^="pmpro_actionlink-renew-"], [id^="pmpro_actionlink-cancel-"], .bsos-account-pending-payment):is(:hover, :focus) {
    display: flex;
    justify-content: center;
    align-items: center;
    inline-size: 100%;
    min-block-size: 48px;
    padding: 11px 18px;
    border-radius: 8px;
    background: var(--bsos-account-primary);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    text-decoration: none;
    animation: none;
}

.bsos-account :is([id^="pmpro_actionlink-renew-"], .bsos-account-pending-payment)::after {
    content: none;
}

body.bsos-account-page .bsos-account .pmpro a.bsos-account-manage {
    color: #3823bb;
    font-weight: 600;
}

body.bsos-account-page .bsos-account .pmpro a.bsos-account-manage:is(:hover, :focus) {
    color: var(--clb-color-link-hover);
    text-decoration: none;
}

@media (min-width: 1401px) {
    .bsos-account-top .bsos-account-membership {
        align-self: stretch;
        display: grid;
    }

    .bsos-account-top .bsos-account-membership > .pmpro {
        display: grid;
    }

    .bsos-account .bsos-account-membership .pmpro_section {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .bsos-account .bsos-account-membership .pmpro_section_content {
        display: flex;
        flex-direction: column;
        flex: 1;
        margin-block-start: 0;
    }

    .bsos-account .bsos-account-membership .pmpro_card {
        flex: 1;
    }

    .bsos-account .bsos-account-membership .pmpro_card_actions {
        margin-block-start: auto;
    }
}

.bsos-account-profile .pmpro_card_title {
    display: none;
}

.bsos-account .bsos-account-profile .pmpro_card_content {
    margin-block-start: 0;
}

.bsos-account-profile .pmpro_section {
    position: relative;
}

.bsos-account .bsos-account-profile .pmpro_section_title {
    padding-inline-end: 250px;
}

.bsos-account-profile .pmpro_card_action:has(#pmpro_actionlink-profile) {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 24px;
}

.bsos-account-profile .pmpro_card_action:has(#pmpro_actionlink-logout) {
    display: none;
}

/* Decorative icons accompany the existing, fully labelled account links. */
.bsos-account :is(#pmpro_actionlink-profile, #pmpro_actionlink-change-password, .bsos-account-all-payments, .bsos-account-payment-details) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 24px;
}

.bsos-account :is(#pmpro_actionlink-profile, #pmpro_actionlink-change-password, .bsos-account-all-payments)::before,
.bsos-account .bsos-account-payment-details::after {
    content: "";
    position: static;
    flex: 0 0 20px;
    inline-size: 20px;
    block-size: 20px;
    background: currentColor;
    mask: var(--bsos-account-link-icon) center / contain no-repeat;
    transform: none;
    opacity: 1;
}

.bsos-account #pmpro_actionlink-profile {
    --bsos-account-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 3 5 5L8 21H3v-5L16 3ZM13 6l5 5'/%3E%3C/svg%3E");
}

.bsos-account #pmpro_actionlink-change-password {
    --bsos-account-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M8 10V6a4 4 0 0 1 8 0v4M12 15v2'/%3E%3C/svg%3E");
}

.bsos-account .bsos-account-all-payments {
    --bsos-account-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12M3 6h1M3 12h1M3 18h1'/%3E%3C/svg%3E");
    flex-shrink: 0;
}

.bsos-account .bsos-account-payment-details {
    --bsos-account-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
    white-space: nowrap;
}

.bsos-account .bsos-account-membership .pmpro_card_content > p > a:hover,
.bsos-account :is(#pmpro_actionlink-profile, #pmpro_actionlink-change-password, .bsos-account-all-payments, .bsos-account-payment-details):hover {
    /* Keep Ohio's animated underline and link colors without a second text underline. */
    color: var(--clb-color-link-hover);
    text-decoration: none;
}

.bsos-account :is(#pmpro_actionlink-profile, #pmpro_actionlink-change-password, .bsos-account-all-payments, .bsos-account-payment-details):focus-visible {
    outline: 2px solid var(--bsos-account-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

.bsos-account-payments-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    padding: 18px 24px;
    border-block-end: 1px solid var(--bsos-account-line);
}

.bsos-account .bsos-account-payments-heading .pmpro_section_title {
    padding: 0;
    border: 0;
}

.bsos-account .bsos-account-payments-heading .bsos-account-all-payments {
    margin: 0;
}

/* The complete history link now lives in the panel header, even with fewer than six orders. */
#pmpro_account-orders:has(.bsos-account-all-payments) > .pmpro_card > .pmpro_card_actions {
    display: none;
}

:where(.bsos-account:not(.bsos-membership-area-card)) .bsos-account-main > :not(.bsos-account-top) .pmpro_card {
    border-radius: 0 0 12px 12px;
}

.bsos-account-profile .pmpro_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 28px;
}

.bsos-account-profile .pmpro_list_item {
    font-size: 18px;
    font-weight: 600;
}

.bsos-account-profile .pmpro_list_item strong {
    display: block;
    margin-block-end: 3px;
    color: var(--bsos-account-muted);
    font-size: 15px;
    font-weight: 500;
}

.bsos-account-profile .pmpro_list_item + .pmpro_list_item {
    padding-inline-start: 28px;
    border-inline-start: 1px solid var(--bsos-account-line);
}

.bsos-account .bsos-account-payments .pmpro_card_content {
    padding: 24px;
    overflow-x: auto;
}

.bsos-account .pmpro .pmpro_table {
    margin: 0;
    border: 0;
    font-size: 16px;
}

.bsos-account .pmpro .pmpro_table th,
.bsos-account .pmpro .pmpro_table td {
    padding: 16px 24px;
    border-color: var(--bsos-account-line);
    color: var(--bsos-account-ink);
    font-weight: 500;
}

.bsos-account .pmpro .pmpro_table thead th {
    background: #f5f4fa;
    color: var(--bsos-account-muted);
    font-size: 14px;
}

.bsos-account .pmpro .pmpro_tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
}

.bsos-account .pmpro .pmpro_tag::before {
    content: "";
    inline-size: 8px;
    block-size: 8px;
    border-radius: 50%;
    background: currentColor;
}

.bsos-account .pmpro .pmpro_tag-success {
    background: #e9f6eb;
    color: #177529;
}

.bsos-account .pmpro .pmpro_tag-alert {
    background: #fff2d9;
    color: #835600;
}

.bsos-account .pmpro .pmpro_tag-error {
    background: #fce9e9;
    color: #ac3030;
}

.bsos-account-empty p {
    padding: 20px 24px;
    margin: 0;
    color: var(--bsos-account-muted);
}

.bsos-account-links .pmpro_list {
    list-style: none;
}

@media screen {
    /* Scale both screen card views together, retaining the full landscape layout. */
    .bsos-account :is(.bsos-account-card .pmpro, .bsos-card-panel-body) > .pmpro_card {
        overflow: hidden;
        border: 2px solid var(--bsos-card-line);
        border-radius: 16px;
        font-size: 1.75cqi;
        color: var(--bsos-card-ink);
        box-shadow: 0 8px 18px rgb(50 30 100 / 9%);
    }

    :is(.bsos-account-card, .bsos-card-panel-body) .bsos-card-layout {
        padding: 2.6em;
    }

    :is(.bsos-account-card, .bsos-card-panel-body) .bsos-card-header {
        inline-size: 64%;
    }

    .bsos-account :is(.bsos-account-card, .bsos-card-panel-body) .pmpro_membership_card_field-display_name h2 {
        font-size: 3em;
    }

    :is(.bsos-account-card, .bsos-card-panel-body) .bsos-card-body {
        flex-wrap: nowrap;
        gap: 3em;
    }

    :is(.bsos-account-card, .bsos-card-panel-body) .bsos-card-details {
        flex-basis: auto;
        gap: 0.9em 2em;
    }

    :is(.bsos-account-card, .bsos-card-panel-body) .pmpro_membership_card_field_data {
        font-size: 1.65em;
    }

    .bsos-account :is(.bsos-account-card, .bsos-card-panel-body) .pmpro_membership_card_field-qr_code {
        flex-basis: 10.25em;
    }

}

.bsos-account-print {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-block-size: 44px;
    margin-block-start: 8px;
}

.bsos-account-card .bsos-card-invalid {
    position: absolute;
    inset-block-start: 8%;
    inset-inline-end: 5%;
    font-size: clamp(10px, 2.8cqi, 14px);
}

.bsos-account-card-note {
    margin: 14px 0 0;
    color: var(--bsos-account-muted);
    font-size: 15px;
    text-align: center;
}

.bsos-account-renewal-note {
    margin: 12px 0 0;
    color: var(--bsos-account-muted);
}

@media (max-width: 1150px) {
    .bsos-account-layout { grid-template-columns: 240px minmax(0, 1fr); }
    .bsos-account-sidebar nav :is(a, button) { padding-inline: 12px; gap: 12px; }
}

@media screen and (min-width: 761px) {
    .bsos-account-layout {
        --bsos-sidebar-top: calc(110px + var(--wp-admin--admin-bar--height, 0px));
    }

    .bsos-account-sidebar {
        position: sticky;
        inset-block-start: var(--bsos-sidebar-top);
        max-block-size: calc(100dvh - var(--bsos-sidebar-top) - 24px);
        overflow-y: auto;
    }
}

@media (max-width: 760px) {
    .bsos-account-page #content > .page-container { padding: 120px 20px 48px; }
    .bsos-account-layout { grid-template-columns: 1fr; }
    .bsos-account-sidebar { padding: 18px; }
    .bsos-account-identity { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; text-align: start; margin-block-end: 18px; }
    .bsos-account-avatar { grid-row: span 2; inline-size: 56px; margin: 0; font-size: 22px; }
    .bsos-account-identity h2 { align-self: end; font-size: 19px; }
    .bsos-account-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .bsos-account-sidebar nav :is(a, button) { padding: 10px; gap: 10px; font-size: 14px; }
    .bsos-account-sidebar nav .bsos-account-logout { margin: 0; padding: 10px; border: 0; }
    .bsos-account-sidebar nav .bsos-account-logout::before { display: none; }
    .bsos-account-sidebar nav svg { inline-size: 21px; }
    .bsos-account-profile .pmpro_list { grid-template-columns: 1fr; }
    .bsos-account .bsos-account-profile .pmpro_section_title { padding-inline-end: 24px; }
    .bsos-account-profile .pmpro_card_action:has(#pmpro_actionlink-profile) { position: static; }
    .bsos-account-profile .pmpro_list_item + .pmpro_list_item { padding: 0; border: 0; }
    .bsos-account .pmpro .pmpro_table th, .bsos-account .pmpro .pmpro_table td { padding: 12px 16px; }
    .bsos-account .pmpro .pmpro_section_title, .bsos-account-empty h2 { font-size: 20px; }
}

@media (max-width: 380px) {
    .bsos-account-page #content > .page-container { padding-inline: 12px; }
    .bsos-account-sidebar { padding: 12px; }
    .bsos-account-sidebar nav :is(a, button) { gap: 7px; padding-inline: 6px; }
}

/* The same shell surrounds native PMPro forms; no form markup is replaced. */
.bsos-membership-area-public {
    max-inline-size: 1040px;
    margin-inline: auto;
}

.bsos-membership-area-login {
    max-inline-size: 620px;
}

.bsos-membership-area .bsos-account-sidebar {
    align-self: start;
}

.bsos-membership-content {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.bsos-membership-content > .pmpro,
.bsos-membership-content .pmpro_form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bsos-membership-area:not(:where(.bsos-membership-area-card)) .pmpro .pmpro_section,
.bsos-membership-area:not(:where(.bsos-membership-area-card)) .pmpro .pmpro_card {
    border-radius: 12px;
}

.bsos-membership-area .pmpro .pmpro_section + .pmpro_section {
    margin-block-start: 24px;
}

.bsos-membership-area .pmpro .pmpro_form_legend {
    margin: 0;
    inline-size: 100%;
    padding: 0 0 18px;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.35;
    border-block-end: 1px solid var(--bsos-account-line);
}

.bsos-membership-area .pmpro .pmpro_form_fields {
    padding: 24px 0;
    gap: 22px;
}

.bsos-membership-area .pmpro .pmpro_form_field {
    min-inline-size: 0;
}

.bsos-membership-area .pmpro .pmpro_form_label {
    color: var(--bsos-account-ink);
    font-weight: 700;
}

.bsos-membership-area .pmpro :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
    max-inline-size: 100%;
    min-block-size: 48px;
    border: 1px solid #8c85a4;
    border-radius: 8px;
    background-color: #fff;
    color: var(--bsos-account-ink);
    font: inherit;
    font-size: 16px;
    padding: 12px 14px;
    box-shadow: none;
}

.bsos-membership-area .pmpro :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--bsos-account-accent);
}

.bsos-membership-area .pmpro :is(input, select, textarea, button):focus-visible {
    outline: 2px solid var(--bsos-account-accent);
    outline-offset: 3px;
}

.bsos-membership-area .pmpro .pmpro_form_hint {
    color: #605a79;
    opacity: 1;
    font-size: 14px;
}

body.bsos-account-page .bsos-account .pmpro :is(a.pmpro_btn, button.pmpro_btn, input.pmpro_btn, input[type="submit"]),
body.bsos-account-page .bsos-account .pmpro :is(a.pmpro_btn, button.pmpro_btn, input.pmpro_btn, input[type="submit"]):is(:hover, :focus) {
    min-block-size: 48px;
    padding: 13px 22px;
    border: 1px solid var(--bsos-account-primary);
    border-radius: 8px;
    background-color: var(--bsos-account-primary);
    background-image: none !important;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    white-space: normal;
    text-align: center;
    text-decoration: none;
    animation: none;
    box-shadow: none;
}

body.bsos-account-page .bsos-account .pmpro .pmpro_btn:is(.pmpro_btn-plain, .pmpro_btn-cancel),
body.bsos-account-page .bsos-account .pmpro .pmpro_btn:is(.pmpro_btn-plain, .pmpro_btn-cancel):is(:hover, :focus),
body.bsos-account-page .bsos-account .pmpro a[id^="pmpro_actionlink-cancel-"],
body.bsos-account-page .bsos-account .pmpro a[id^="pmpro_actionlink-cancel-"]:is(:hover, :focus) {
    border-color: var(--bsos-account-line);
    background: #ede7ff;
    background-image: none !important;
    color: #3823bb;
}

.bsos-membership-area .pmpro .pmpro_form_submit {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin: 0;
}

.bsos-membership-area .pmpro .pmpro_card .pmpro_form_submit {
    padding: 0;
}

.bsos-membership-area .pmpro .pmpro_list_item_value {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: normal;
}

/* Let the panels supply the outer spacing around their mobile tables. */
@media screen {
    .bsos-membership-area-levels .pmpro .pmpro_card_content {
        margin-block-start: 0;
    }
}

@media screen and (max-width: 760px) {
    .bsos-membership-area-levels .pmpro .pmpro_levels_table tbody > tr:first-child > :first-child,
    .bsos-account #pmpro_account-orders .pmpro_table tbody > tr:first-child > :first-child {
        padding-block-start: 0;
    }

    .bsos-membership-area-levels .pmpro .pmpro_levels_table tbody > tr:last-child > :last-child,
    .bsos-account #pmpro_account-orders .pmpro_table tbody > tr:last-child > :last-child {
        padding-block-end: 0;
    }
}

/* Keep rows at full panel width; scroll the wrapper on narrow screens. */
.bsos-membership-area .pmpro .pmpro_table {
    display: table;
    inline-size: 100%;
}

.bsos-account .pmpro .pmpro_card_content:has(> .pmpro_table) {
    overflow-x: auto;
}

.bsos-membership-area .pmpro .pmpro_message {
    margin: 0 0 20px;
    border-radius: 8px;
}

.bsos-membership-return {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.bsos-membership-return a {
    display: inline-flex;
    align-items: center;
    min-block-size: 48px;
    font-weight: 600;
}

.bsos-membership-area #change-password .pmpro_form_fields > .pmpro_form_hint,
.bsos-membership-area #change-password .pmpro_cols-2 > .pmpro_form_field,
.bsos-membership-area .pmpro .pmpro_form_fields > .pmpro_form_field {
    inline-size: 100%;
    max-inline-size: 680px;
}

.bsos-membership-area .pmpro .pmpro_form_fieldset {
    min-inline-size: 0;
}

.bsos-membership-area .pmpro .pmpro_form_heading {
    margin: 0;
    font-size: inherit;
}

.bsos-membership-area .pmpro .pmpro_card_content {
    padding: 24px;
}

.bsos-membership-area .pmpro #loginform label {
    color: var(--bsos-account-ink);
    font-weight: 600;
}

.bsos-membership-area .pmpro #loginform .input,
.bsos-membership-area .pmpro #loginform input[type="submit"] {
    inline-size: 100%;
}

.bsos-membership-area .pmpro :is(input, select, textarea):focus {
    border-color: var(--bsos-account-accent);
    box-shadow: 0 0 0 3px rgb(73 53 188 / 15%);
    outline: 2px solid var(--bsos-account-accent);
    outline-offset: 2px;
}

body.bsos-account-page .bsos-account .pmpro .pmpro_form_field-password-toggle .pmpro_btn,
body.bsos-account-page .bsos-account .pmpro .pmpro_form_field-password-toggle .pmpro_btn:is(:hover, :focus, :active) {
    min-block-size: 44px;
    padding: 6px;
    border: 0;
    background: transparent;
    color: #3823bb;
}


body.bsos-account-page .bsos-account .pmpro .pmpro_form_field-password-toggle .pmpro_btn:is(:hover, :focus-visible) {
    color: var(--clb-color-link-hover);
    text-decoration: none;
}

.bsos-membership-area .pmpro_form_field-password-toggle .pmpro_icon {
    color: inherit;
}

.bsos-membership-area .pmpro_form_field-password-toggle svg {
    stroke: currentColor;
}

.bsos-membership-area .pmpro_form_field-password-toggle-state {
    background-repeat: no-repeat;
    background-size: 100% 0.18em;
    background-position: 0 110%;
}

.bsos-membership-area .pmpro_form_field-password-toggle .pmpro_btn:is(:hover, :focus-visible) .pmpro_form_field-password-toggle-state {
    background-image: linear-gradient(currentColor, currentColor);
    animation: underline 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
}

body.bsos-account-page .bsos-account .pmpro .pmpro_form_field-password-toggle .pmpro_btn:focus-visible {
    outline: 2px solid var(--bsos-account-accent);
    outline-offset: 2px;
}

.bsos-membership-area .pmpro #pmpro_order_list > .pmpro_section_title,
.bsos-membership-area .pmpro .pmpro_card_title {
    margin: 0;
    padding: 20px 24px;
    border-block-end: 1px solid var(--bsos-account-line);
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.35;
}

.bsos-membership-area-checkout .pmpro .pmpro_section {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.bsos-membership-area-checkout .pmpro .pmpro_card {
    border: 1px solid var(--bsos-account-line);
    border-radius: 12px;
    background: #fff;
}

.bsos-membership-area .pmpro [id^="pmpro_confirmation-"] {
    padding: 24px;
}

@media screen {
    .bsos-membership-area-confirmation .bsos-membership-content > .pmpro + .pmpro {
        margin-block-start: 24px;
    }
}

.bsos-membership-area .pmpro input[readonly] {
    background-color: #f5f4fa;
}

.bsos-membership-area .pmpro :is(input[type="checkbox"], input[type="radio"]) {
    border-color: #8c85a4;
}

/* PMPro's WordPress login controls use ID selectors rather than form classes. */
body.bsos-account-page .bsos-account #pmpro_login .pmpro_card_actions a:is(:hover, :focus-visible) {
    color: var(--clb-color-link-hover);
    background-image: linear-gradient(currentColor, currentColor);
    text-decoration: none;
    animation: underline 0.4s cubic-bezier(0.58, 0.3, 0.005, 1);
}

.bsos-membership-area .pmpro #loginform #rememberme {
    border-radius: 3px;
    margin-inline-end: 6px;
}

.bsos-membership-area .pmpro #loginform .input {
    min-block-size: 48px;
    border-color: #8c85a4;
    border-radius: 8px;
}

body.bsos-account-page .bsos-account .pmpro #loginform .input:focus {
    border-color: var(--bsos-account-accent);
    box-shadow: 0 0 0 3px rgb(73 53 188 / 15%);
    outline: 2px solid var(--bsos-account-accent);
    outline-offset: 2px;
}

body.bsos-account-page .bsos-account .pmpro #loginform #wp-submit,
body.bsos-account-page .bsos-account .pmpro #loginform #wp-submit:is(:hover, :focus) {
    color: #fff;
    background-color: var(--bsos-account-primary);
    border-color: var(--bsos-account-primary);
    border-radius: 8px;
    min-block-size: 48px;
    box-shadow: none;
}

body.bsos-account-page .bsos-account .pmpro #loginform #wp-submit:is(:hover, :focus-visible) {
    background-color: var(--clb-color-button-hover);
    border-color: var(--clb-color-button-hover);
}

body.bsos-account-page .bsos-account .pmpro #loginform #wp-submit:focus-visible {
    outline: 2px solid var(--bsos-account-accent);
    outline-offset: 4px;
}

@media (max-width: 760px) {
    .bsos-account .bsos-account-payments .pmpro_card_content,
    .bsos-membership-area .pmpro #pmpro_order_list > .pmpro_section_title,
    .bsos-membership-area .pmpro .pmpro_card_title,
    .bsos-membership-area .pmpro .pmpro_card_content,
    .bsos-membership-area .pmpro [id^="pmpro_confirmation-"] { padding: 18px; }
    .bsos-membership-area .pmpro .pmpro_form_fields { padding: 18px 0; }
    .bsos-membership-area .pmpro .pmpro_cols-2 > * { inline-size: 100%; }
    .bsos-membership-area .pmpro .pmpro_form_submit > .pmpro_btn { inline-size: 100%; }
}

.bsos-membership-breadcrumbs {
    margin-block-end: 14px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.bsos-membership-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bsos-membership-breadcrumbs li {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    overflow-wrap: anywhere;
}

.bsos-membership-breadcrumbs a,
.bsos-membership-breadcrumbs [aria-current] {
    padding-block: 8px;
}

.bsos-membership-breadcrumbs [aria-current] {
    color: #605a79;
}

.bsos-breadcrumb-separator {
    color: #605a79;
}

.bsos-membership-area-cancel .pmpro .pmpro_form_submit {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    margin-block-start: 20px;
}

@media (max-width: 760px) {
    .bsos-membership-area-cancel .pmpro .pmpro_form_submit {
        grid-template-columns: 1fr;
    }
}

.bsos-membership-area #change-password .pmpro_cols-2 {
    flex-direction: column;
    gap: 22px;
}

/* Keep native profile and password legends as full-width panel headers. */
.bsos-membership-area :is(#member-profile-edit, #change-password) > .pmpro_card {
    border: 1px solid var(--bsos-account-line);
}

.bsos-membership-area :is(#member-profile-edit, #change-password) .pmpro_card_content {
    padding: 0;
}

.bsos-membership-area :is(#member-profile-edit, #change-password) .pmpro_form_legend {
    padding: 20px 24px;
}

.bsos-membership-area :is(#member-profile-edit, #change-password) .pmpro_form_fields {
    padding: 24px;
}

.bsos-membership-area :is(#member-profile-edit, #change-password) .pmpro_card_content > .pmpro_form_submit {
    padding: 0 24px 24px;
}

@media (max-width: 760px) {
    .bsos-membership-area :is(#member-profile-edit, #change-password) .pmpro_form_legend,
    .bsos-membership-area :is(#member-profile-edit, #change-password) .pmpro_form_fields {
        padding: 18px;
    }

    .bsos-membership-area :is(#member-profile-edit, #change-password) .pmpro_card_content > .pmpro_form_submit {
        padding: 0 18px 18px;
    }
}

/* This add-on nests its heading inside the content wrapper. */
.bsos-membership-area-checkout .pmpro .membership-applications-contact-fields .pmpro_card_content {
    padding: 0;
}

.bsos-membership-area-checkout .pmpro .membership-applications-contact-fields .pmpro_form_fields {
    padding: 24px;
}

@media (max-width: 760px) {
    .bsos-membership-area-checkout .pmpro .membership-applications-contact-fields .pmpro_form_fields {
        padding: 18px;
    }
}

/* Keep PMPro's white checkmark visible, including while the input has focus. */
body.bsos-account-page .bsos-account .pmpro input.pmpro_form_input-checkbox:checked,
body.bsos-account-page .bsos-account .pmpro input.pmpro_form_input-checkbox:checked:is(:focus, :active) {
    background-color: var(--bsos-account-accent);
    border-color: var(--bsos-account-accent);
}

.bsos-membership-area .pmpro .pmpro_form_field-checkbox > .pmpro_form_label {
    align-items: center;
}

.bsos-membership-area .pmpro .pmpro_form_field-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
}

body.bsos-account-page .bsos-account .pmpro input[type="radio"]:checked,
body.bsos-account-page .bsos-account .pmpro input[type="radio"]:checked:is(:focus, :active) {
    background-color: var(--bsos-account-accent);
    border-color: var(--bsos-account-accent);
}

.bsos-membership-area-checkout .pmpro #checkout_contact_name {
    inline-size: 100%;
}

.bsos-membership-area-checkout .pmpro .pmpro_form_field:has(> #checkout_contact_name) {
    max-inline-size: none;
}

#content .bsos-membership-area-card .pmpro .pmpro_actions_nav {
    display: none;
}

#content .bsos-membership-area-invoice .pmpro_actions_nav-right,
#content .bsos-membership-area-invoice .pmpro_actions_nav:not(:has(.pmpro_actions_nav-left)) {
    display: none;
}

.bsos-membership-area #pmpro_order_single > .pmpro_card > .pmpro_card_actions {
    margin: 0;
    padding: 20px 24px;
    border-block-start: 0;
    border-block-end: 1px solid var(--bsos-account-line);
}

.bsos-membership-area #pmpro_order_single .bsos-order-panel-title {
    margin: 0 auto 0 0;
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.35;
}

@media screen {
    .bsos-membership-area #pmpro_order_single > .pmpro_card > .pmpro_card_content {
        margin-block-start: 0;
    }

    .bsos-membership-area #pmpro_order_single > .pmpro_card > .pmpro_card_content > .pmpro_spacer:first-child {
        display: none;
    }

    .bsos-membership-area #pmpro_order_single-meta-bill_to {
        line-height: 1.75;
    }

    .bsos-membership-area #pmpro_order_single-meta-bill_to .membership-applications-business-order-field {
        display: block;
        margin-block-start: 8px;
    }

    .bsos-membership-area #pmpro_order_single-meta-bill_to br:has(+ .membership-applications-business-order-field) {
        display: none;
    }
}

@media (max-width: 760px) {
    .bsos-membership-area #pmpro_order_single > .pmpro_card > .pmpro_card_actions {
        padding: 18px;
    }
}

@media screen {
    .bsos-membership-area-card .bsos-membership-card {
        max-inline-size: none;
    }

    .bsos-membership-area-card .pmpro .pmpro_membership_card_display {
        padding: 0;
    }

    .bsos-membership-area-card .bsos-card-toolbar {
        padding: 20px 24px;
        margin: 0;
        border-block-end: 1px solid var(--bsos-account-line);
    }

    .bsos-membership-area-card .bsos-card-panel-title {
        display: block;
        margin: 0 auto 0 0;
        font-size: clamp(20px, 2vw, 26px);
        font-weight: 700;
        line-height: 1.35;
    }

    .bsos-membership-area-card .bsos-card-panel-body {
        max-inline-size: 688px;
        margin-inline: auto;
        padding: 24px;
        container: bsos-card / inline-size;
    }

    .bsos-membership-area-card .bsos-card-panel-body > .pmpro_card {
        inline-size: 100%;
        margin: 0;
    }
}

@media screen and (max-width: 760px) {
    .bsos-membership-area-card .bsos-card-toolbar,
    .bsos-membership-area-card .bsos-card-panel-body {
        padding: 18px;
    }
}

@media print {
    @page bsos-order {
        margin: 14mm;
    }

    html:has(.bsos-membership-area #pmpro_order_single) {
        margin-top: 0 !important;
    }

    body.bsos-account-page:has(#pmpro_order_single) {
        page: bsos-order;
        --bsos-account-ink: #111;
        --bsos-account-muted: #444;
        background: #fff;
    }

    /* Keep the native order; omit site chrome and interactive account controls. */
    body.bsos-account-page:has(#pmpro_order_single) > :not(#page),
    body.bsos-account-page:has(#pmpro_order_single) #page > :not(#content),
    body.bsos-account-page:has(#pmpro_order_single) :is(.bsos-account-heading, .bsos-membership-breadcrumbs, .bsos-account-sidebar, .bsos-membership-return),
    body.bsos-account-page:has(#pmpro_order_single) .pmpro :is(.pmpro_card_actions, .pmpro_actions_nav, .pmpro_spacer),
    body.bsos-account-page:has(#pmpro_order_single) .bsos-membership-content > .pmpro:not(:has(#pmpro_order_single)) {
        display: none !important;
    }

    body.bsos-account-page:has(#pmpro_order_single) :is(#page, #content, .page-container, #primary, .page-content, #main, .hentry, .entry-content, .bsos-account, .bsos-account-layout, .bsos-account-main, .bsos-membership-content, .bsos-membership-content > .pmpro) {
        display: block;
        position: static;
        inline-size: 100%;
        max-inline-size: none;
        min-block-size: 0;
        margin: 0;
        padding: 0;
        background: #fff;
        overflow: visible;
    }

    .bsos-membership-area #pmpro_order_single,
    .bsos-membership-area #pmpro_order_single :is(.pmpro_card, .pmpro_card_title, .pmpro_card_content) {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: #fff;
    }

    .bsos-membership-area #pmpro_order_single {
        font-size: 10pt;
        line-height: 1.4;
    }

    .bsos-membership-area #pmpro_order_single .pmpro_card_title {
        margin-block-end: 6mm;
        font-size: 18pt;
        break-after: avoid;
    }

    .bsos-membership-area #pmpro_order_single-meta > .pmpro_list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4mm 8mm;
        margin-block-end: 5mm;
    }

    .bsos-membership-area #pmpro_order_single-meta > .pmpro_list > li {
        inline-size: auto;
        margin: 0;
        break-inside: avoid;
    }

    .bsos-membership-area #pmpro_order_single :is(p, .pmpro_divider) {
        margin-block: 0 3mm;
    }

    .bsos-membership-area #pmpro_order_single h3 {
        font-size: 12pt;
        break-after: avoid;
    }

    .bsos-membership-area #pmpro_order_single .pmpro_table {
        inline-size: 100%;
        margin-block: 5mm 0;
        font-size: 10pt;
    }

    .bsos-membership-area #pmpro_order_single .pmpro_table :is(th, td) {
        padding: 3mm;
    }

    .bsos-membership-area #pmpro_order_single :is(tr, .pmpro_payment_instructions p) {
        break-inside: avoid;
    }

    body.bsos-account-page:has(.bsos-membership-area-card) #content > .page-container {
        padding: 0;
    }

    .bsos-membership-area-card .bsos-account-layout {
        display: block;
    }
}