.member-main-nav {
    gap: 4px;
}

.member-main-nav a {
    white-space: nowrap;
}

.member-header-actions {
    gap: 10px;
}

/*
|--------------------------------------------------------------------------
| Member Header Actions
|--------------------------------------------------------------------------
*/

.member-logout-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    border: 1px solid #d7e1ee;
    border-radius: 10px;
    padding: 0 13px;
    background: #ffffff;
    color: #536178;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: none;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.member-logout-link:hover {
    border-color: #b9c9de;
    background: #f7f9fc;
    color: #173b75;
}

.member-logout-link:focus-visible {
    outline: 3px solid rgba(36, 95, 217, 0.16);
    outline-offset: 2px;
}

.member-page {
    min-height: 72vh;
    padding: 66px 20px 88px;
    background: #f4f7fb;
}

.member-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
    margin-bottom: 28px;
}

.member-heading-row h1 {
    margin: 6px 0 10px;
    font-size: clamp(1.8rem, 2.6vw, 2.3rem);
    font-weight: 800;
    line-height: 1.15;
}

.member-heading-row p {
    max-width: 720px;
    margin: 0;
    color: #62718a;
    line-height: 1.7;
}

.member-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.member-draft-notice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.member-draft-notice h2 {
    margin: 12px 0 8px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.status-draft {
    background: #eef3ff;
    color: #275bc7;
}

/* ========================================
   MEMBER DASHBOARD
======================================== */

.dashboard-workspace-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 28px;
}

.workspace-card {
    display: grid;
    gap: 10px;
    min-height: 185px;
    border: 1px solid #dfe7f2;
    border-radius: 18px;
    padding: 24px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.workspace-card:hover {
    transform: translateY(-3px);
    border-color: #b7caea;
    box-shadow: 0 16px 38px rgba(30, 64, 120, 0.1);
}

.workspace-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #edf3ff;
    color: #245ed6;
    font-weight: 800;
}

.workspace-card strong {
    color: #10244a;
    font-size: 1.05rem;
}

.workspace-card small {
    color: #6c7990;
    line-height: 1.55;
}

/* ========================================
   ADVERTISEMENT LIST
======================================== */

.advertisements-heading {
    margin-bottom: 24px;
}

.advertisement-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 24px;
}

.advertisement-filter {
    border: 1px solid #d8e1ee;
    border-radius: 999px;
    padding: 9px 14px;
    background: #fff;
    color: #4f5e77;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.advertisement-filter span {
    margin-left: 5px;
    color: #245fd9;
}

.advertisement-filter.active {
    border-color: #245fd9;
    background: #eef4ff;
    color: #174ebd;
}

.advertisement-list {
    display: grid;
    gap: 18px;
}

.advertisement-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 26px;
    border: 1px solid #dfe7f2;
    border-radius: 22px;
    padding: 28px;
    background: #fff;
    box-shadow: 0 14px 38px rgba(23, 51, 99, 0.07);
}

.advertisement-status-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.advertisement-type {
    color: #68768e;
    font-size: 0.88rem;
    font-weight: 700;
}

.advertisement-preview-compact {
    display: grid;
    gap: 6px;
    margin: 24px 0;
}

.advertisement-preview-compact strong {
    color: #1855c8;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
}

.advertisement-preview-compact small {
    color: #23754a;
    font-size: 0.95rem;
}

.advertisement-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.advertisement-meta-grid div {
    border: 1px solid #e3eaf3;
    border-radius: 13px;
    padding: 14px;
    background: #f9fbfe;
}

.advertisement-meta-grid span,
.advertisement-meta-grid strong {
    display: block;
}

.advertisement-meta-grid span {
    margin-bottom: 5px;
    color: #758198;
    font-size: 0.78rem;
}

.advertisement-meta-grid strong {
    color: #172541;
}

/* ========================================
   ADVERTISEMENT ACTIONS
======================================== */

.advertisement-card-actions {
    display: grid;
    align-content: start;
    gap: 11px;
    padding-left: 24px;
    border-left: 1px solid #e2e9f2;
}

/*
| Center only the form that contains the
| Create Split Test button.
*/

.advertisement-card-actions > form {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
}

/*
| Style only the Create Split Test button.
| Other action links retain their existing
| global .button and .button-secondary CSS.
*/

.advertisement-card-actions .button-split-test {
    width: 190px;
    max-width: 100%;
    min-width: 0;
    min-height: 48px;
    appearance: none;
    border: 1px solid #d4c7ef;
    padding: 0 16px;
    background: #f5f1fb;
    color: #553c7d;
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: none;
}

.advertisement-card-actions .button-split-test:hover {
    transform: translateY(-1px);
    border-color: #bba8df;
    background: #ece5f7;
    color: #422b69;
    box-shadow: 0 8px 18px rgba(75, 52, 112, 0.12);
}

.advertisement-card-actions .button-split-test:focus-visible {
    outline: 3px solid rgba(85, 60, 125, 0.2);
    outline-offset: 2px;
}

/*
| Make administrator-requested corrections impossible to miss.
| This class is reserved for the correction workflow action.
*/

.advertisement-card-actions .button-secondary-corrections {
    border-color: #c62828;
    background: #d32f2f;
    color: #ffffff;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(198, 40, 40, 0.22);
}

.advertisement-card-actions .button-secondary-corrections:hover {
    transform: translateY(-1px);
    border-color: #991b1b;
    background: #b71c1c;
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(153, 27, 27, 0.3);
}

.advertisement-card-actions .button-secondary-corrections:focus-visible {
    outline: 3px solid rgba(211, 47, 47, 0.3);
    outline-offset: 3px;
}

.advertisement-card-actions .button-secondary-corrections:active {
    transform: translateY(0);
    background: #991b1b;
}

.advertisement-help {
    margin-top: 6px;
    color: #748198;
    font-size: 0.78rem;
    line-height: 1.5;
}

/* ========================================
   EMPTY STATE
======================================== */

.advertisements-empty-state {
    display: grid;
    justify-items: center;
    max-width: 760px;
    margin: 0 auto;
    border: 1px solid #dfe7f2;
    border-radius: 24px;
    padding: 60px 30px;
    background: #fff;
    text-align: center;
    box-shadow: 0 20px 55px rgba(23, 51, 99, 0.08);
}

.empty-state-mark {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin-bottom: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #2466e8, #1dc0df);
    color: #fff;
    font-weight: 800;
}

.advertisements-empty-state h2 {
    margin: 0 0 12px;
    color: #10244a;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
}

.advertisements-empty-state p {
    max-width: 570px;
    margin: 0 0 24px;
    color: #66758e;
    line-height: 1.7;
}

.advertisements-empty-state small {
    margin-top: 15px;
    color: #78859a;
}

/* ========================================
   DEVELOPMENT NOTE
======================================== */

.workspace-development-note {
    margin-top: 24px;
    border-left: 4px solid #2462dc;
    border-radius: 0 13px 13px 0;
    padding: 18px 20px;
    background: #edf3ff;
    color: #53627b;
}

.workspace-development-note strong {
    display: block;
    margin-bottom: 7px;
    color: #163b84;
}

.workspace-development-note p {
    margin: 0;
    line-height: 1.6;
}

.workspace-development-note code {
    border-radius: 5px;
    padding: 2px 5px;
    background: rgba(255, 255, 255, 0.65);
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1180px) {
    .member-main-nav a:nth-last-child(-n + 2) {
        display: none;
    }
}

@media (max-width: 960px) {
    .dashboard-workspace-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .advertisement-card {
        grid-template-columns: 1fr;
    }

    .advertisement-card-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 20px;
        padding-left: 0;
        border-top: 1px solid #e2e9f2;
        border-left: 0;
    }

    .advertisement-card-actions > form {
        justify-content: center;
    }

    .advertisement-help {
        grid-column: 1 / -1;
    }

    .advertisement-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 760px) {
    .member-heading-row,
    .member-draft-notice {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .member-header-actions .text-link {
        display: none;
    }
}

@media (max-width: 520px) {
    .advertisement-meta-grid {
        grid-template-columns: 1fr;
    }

    .advertisement-card-actions {
        grid-template-columns: 1fr;
    }

    .advertisement-card-actions .button-split-test {
        width: 190px;
    }
}

.advertisement-help-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 3px;
}

.advertisement-help-separator {
    color: #b3bdca;
}

.advertisement-archive-form {
    display: inline;
    width: auto;
    margin: 0;
}

.advertisement-archive-link {
    appearance: none;
    border: 0;
    padding: 0;
    background: transparent;
    color: #9a5a16;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.advertisement-archive-link:hover {
    color: #713f0d;
    text-decoration: underline;
}

/* ========================================
   LIVE ADVERTISEMENTS
======================================== */

.advertisement-card[hidden] {
    display: none !important;
}

.advertisement-card-live {
    border-color: #b9dfc8;
    background:
        linear-gradient(
            135deg,
            rgba(235, 250, 241, 0.72),
            #ffffff 42%
        );
    box-shadow:
        0 14px 38px rgba(23, 51, 99, 0.07),
        0 0 0 1px rgba(31, 145, 82, 0.04);
}

.advertisement-card-live:hover {
    border-color: #8fceaa;
}

.advertisement-live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 11px;
    background: #e8f8ee;
    color: #16713d;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.advertisement-live-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: #22a85a;
    box-shadow: 0 0 0 4px rgba(34, 168, 90, 0.13);
}

.advertisement-card-live .advertisement-preview-compact strong {
    color: #124fbd;
}

.advertisement-card-live .advertisement-state-note strong {
    color: #16713d;
}

.advertisement-filter {
    cursor: pointer;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        color 0.16s ease,
        transform 0.16s ease;
}

.advertisement-filter:hover {
    transform: translateY(-1px);
    border-color: #aebfda;
    background: #f8fbff;
}

.advertisement-filter.active {
    border-color: #245fd9;
    background: #245fd9;
    color: #ffffff;
    box-shadow: 0 7px 18px rgba(36, 95, 217, 0.18);
}

.advertisement-filter.active span {
    color: #ffffff;
}

.advertisement-card[hidden] {
    display: none !important;
}

/* ========================================
   ADVERTISEMENT TOOLBAR
======================================== */

.advertisement-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid #dfe7f2;
    border-radius: 14px;
    background: #ffffff;
}

.advertisement-result-summary {
    margin: 0;
    color: #5f6d84;
    font-size: 0.92rem;
}

.advertisement-result-summary strong {
    color: #18335f;
}

.advertisement-page-size {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.advertisement-page-size span {
    color: #6d7b92;
    font-weight: 700;
}

.advertisement-page-size a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 34px;
    border: 1px solid #d8e1ee;
    border-radius: 999px;
    background: #fff;
    color: #3e4d67;
    text-decoration: none;
    font-weight: 700;
    transition: .18s;
}

.advertisement-page-size a:hover {
    border-color: #2462dc;
    color: #2462dc;
}

.advertisement-page-size a.active {
    border-color: #2462dc;
    background: #2462dc;
    color: #fff;
}

/* ========================================
   PAGINATION
======================================== */

.advertisement-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 34px;
}

.advertisement-pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d8e1ee;
    border-radius: 12px;
    background: #fff;
    color: #33425c;
    text-decoration: none;
    font-weight: 700;
    transition: .18s;
}

.advertisement-pagination-link:hover {
    border-color: #2462dc;
    color: #2462dc;
}

.advertisement-pagination-link.active {
    border-color: #2462dc;
    background: #2462dc;
    color: #fff;
}

.advertisement-pagination-link.disabled {
    opacity: .45;
    cursor: default;
    pointer-events: none;
}

.advertisement-pagination-ellipsis {
    padding: 0 6px;
    color: #7b889e;
    font-weight: 700;
}

/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 760px) {

    .advertisement-list-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .advertisement-page-size {
        width: 100%;
    }

    .advertisement-pagination {
        gap: 6px;
    }

    .advertisement-pagination-link {
        min-width: 38px;
        height: 38px;
        padding: 0 10px;
    }
}

/* ========================================
   MEMBER ACCOUNT PAGE
======================================== */

.account-summary-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px 36px;
    margin-bottom: 24px;
    border: 1px solid #dfe7f2;
    border-radius: 22px;
    padding: 28px;
    background: #ffffff;
    box-shadow: 0 14px 38px rgba(23, 51, 99, 0.07);
}

.account-summary-card h2 {
    margin: 10px 0 6px;
    color: #10244a;
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    line-height: 1.2;
}

.account-summary-card p {
    margin: 0;
    color: #65738a;
}

.account-summary-statuses {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
}

.account-summary-details {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.account-summary-details div {
    border: 1px solid #e3eaf3;
    border-radius: 14px;
    padding: 15px 16px;
    background: #f9fbfe;
}

.account-summary-details dt {
    margin-bottom: 5px;
    color: #77849a;
    font-size: 0.77rem;
    font-weight: 700;
}

.account-summary-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #172541;
    font-weight: 800;
}

/* ========================================
   ACCOUNT STATUS PILLS
======================================== */

.status-approved,
.status-active {
    background: #e8f8ee;
    color: #16713d;
}

.status-pending {
    background: #fff5dc;
    color: #8a5a0a;
}

.status-suspended {
    background: #fff0df;
    color: #9a4e0b;
}

.status-banned {
    background: #feecec;
    color: #aa2525;
}

/* ========================================
   ACCOUNT ACCORDION
======================================== */

.account-panel-list {
    display: grid;
    gap: 14px;
}

.account-panel {
    overflow: hidden;
    border: 1px solid #dfe7f2;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 9px 28px rgba(23, 51, 99, 0.045);
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.account-panel:hover {
    border-color: #c6d5ea;
}

.account-panel[open] {
    border-color: #b8cae6;
    box-shadow: 0 14px 34px rgba(23, 51, 99, 0.08);
}

.account-panel > summary {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78px;
    padding: 19px 62px 19px 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.account-panel > summary::-webkit-details-marker {
    display: none;
}

.account-panel > summary::marker {
    display: none;
    content: "";
}

.account-panel > summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 22px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid #d5dfec;
    border-radius: 10px;
    background: #f7faff;
    color: #245fd9;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-50%);
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease;
}

.account-panel[open] > summary::after {
    content: "−";
    background: #245fd9;
    color: #ffffff;
}

.account-panel > summary:hover {
    background: #f9fbfe;
}

.account-panel > summary:focus-visible {
    outline: 3px solid rgba(36, 95, 217, 0.18);
    outline-offset: -3px;
}

.account-panel > summary span {
    display: grid;
    gap: 4px;
}

.account-panel > summary strong {
    color: #13274b;
    font-size: 1rem;
}

.account-panel > summary small {
    color: #6f7d92;
    font-size: 0.84rem;
    line-height: 1.45;
}

.account-panel-content {
    border-top: 1px solid #e4ebf3;
    padding: 26px 22px 28px;
    background: #fcfdff;
}

.account-panel-content form {
    max-width: 680px;
}

/* ========================================
   ACCOUNT FORM FIELDS
======================================== */

.account-panel .form-field {
    display: grid;
    gap: 7px;
    margin-bottom: 18px;
}

.account-panel .form-field label {
    color: #263750;
    font-size: 0.88rem;
    font-weight: 800;
}

.account-panel .form-field label span {
    color: #8190a4;
    font-size: 0.78rem;
    font-weight: 600;
}

.account-panel .form-field input,
.account-panel .form-field textarea {
    width: 100%;
    border: 1px solid #cfdae8;
    border-radius: 12px;
    padding: 12px 14px;
    background: #ffffff;
    color: #172541;
    font: inherit;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.account-panel .form-field input:focus,
.account-panel .form-field textarea:focus {
    border-color: #7fa6e8;
    box-shadow: 0 0 0 3px rgba(36, 95, 217, 0.1);
}

.account-panel .form-field input[readonly] {
    background: #f2f5f9;
    color: #68768c;
    cursor: not-allowed;
}

.account-panel .form-field small {
    color: #748198;
    font-size: 0.78rem;
    line-height: 1.5;
}

.account-panel textarea {
    min-height: 120px;
    resize: vertical;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 4px 0 20px;
    color: #526078;
    font-size: 0.88rem;
    line-height: 1.55;
    cursor: pointer;
}

.checkbox-row input {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 2px;
    accent-color: #245fd9;
}

/* ========================================
   READ-ONLY ACCOUNT DETAILS
======================================== */

.account-readonly-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 680px;
    margin: 26px 0 0;
}

.account-readonly-details div {
    border: 1px solid #e1e8f1;
    border-radius: 13px;
    padding: 14px;
    background: #ffffff;
}

.account-readonly-details dt {
    margin-bottom: 5px;
    color: #7a879b;
    font-size: 0.76rem;
    font-weight: 700;
}

.account-readonly-details dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #172541;
    font-weight: 800;
}

/* ========================================
   EMAIL VERIFICATION MESSAGE
======================================== */

.account-status-message {
    max-width: 680px;
    border: 1px solid #dce6f1;
    border-radius: 16px;
    padding: 22px;
    background: #ffffff;
}

.account-status-message h3 {
    margin: 16px 0 8px;
    color: #12264a;
    font-size: 1.2rem;
}

.account-status-message p {
    margin: 7px 0;
    color: #5d6b82;
    line-height: 1.65;
}

.account-status-message > small {
    display: block;
    margin-top: 10px;
    color: #748198;
}

/* ========================================
   DANGER ZONE
======================================== */

.account-danger-panel {
    border-color: #efcccc;
}

.account-danger-panel[open] {
    border-color: #dc9e9e;
}

.account-danger-panel > summary strong {
    color: #9b2525;
}

.account-danger-panel > summary::after {
    border-color: #efcccc;
    background: #fff5f5;
    color: #a52727;
}

.account-danger-panel[open] > summary::after {
    background: #a52727;
    color: #ffffff;
}

.account-danger-warning {
    max-width: 680px;
    margin-bottom: 24px;
    border-left: 4px solid #bc3434;
    border-radius: 0 13px 13px 0;
    padding: 18px 20px;
    background: #fff3f3;
}

.account-danger-warning h3 {
    margin: 0 0 9px;
    color: #8e2222;
}

.account-danger-warning p {
    margin: 7px 0;
    color: #6c3e3e;
    line-height: 1.6;
}

.button-danger {
    border: 1px solid #9f2626;
    background: linear-gradient(135deg, #c53b3b, #922121);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(159, 38, 38, 0.2);
}

.button-danger:hover {
    box-shadow: 0 16px 30px rgba(159, 38, 38, 0.27);
}

/* ========================================
   ACCOUNT RESPONSIVE
======================================== */

@media (max-width: 760px) {
    .account-summary-card {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .account-summary-statuses {
        justify-content: flex-start;
    }

    .account-summary-details,
    .account-readonly-details {
        grid-template-columns: 1fr;
    }

    .account-panel > summary {
        min-height: 72px;
        padding: 17px 56px 17px 18px;
    }

    .account-panel > summary::after {
        right: 16px;
    }

    .account-panel-content {
        padding: 22px 18px 24px;
    }
}

@media (max-width: 520px) {
    .account-summary-card {
        border-radius: 18px;
        padding: 19px;
    }

    .account-panel {
        border-radius: 15px;
    }

    .account-panel > summary small {
        font-size: 0.79rem;
    }

    .account-panel .button,
    .account-panel .button-danger {
        width: 100%;
    }
}

/* ========================================
   REFERRAL CENTER
======================================== */

.referral-page {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 3%,
            rgba(41, 104, 226, 0.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 12%,
            rgba(25, 190, 216, 0.1),
            transparent 27%
        ),
        #f4f7fb;
}

.referral-page::before {
    content: "";
    position: absolute;
    top: 120px;
    right: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(37, 96, 216, 0.045);
    pointer-events: none;
}

.referral-page > .container {
    position: relative;
    z-index: 1;
}

.referral-heading {
    position: relative;
    overflow: hidden;
    margin-bottom: 28px;
    border: 1px solid rgba(190, 207, 233, 0.8);
    border-radius: 26px;
    padding: 34px 36px;
    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f7ff 60%,
            #ebf8fb 100%
        );
    box-shadow:
        0 20px 55px rgba(21, 52, 105, 0.09);
}

.referral-heading::after {
    content: "";
    position: absolute;
    top: -84px;
    right: -52px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background:
        linear-gradient(
            135deg,
            rgba(36, 95, 217, 0.14),
            rgba(25, 192, 220, 0.12)
        );
}

.referral-heading > div {
    position: relative;
    z-index: 1;
}

.referral-heading .section-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    border: 1px solid #c9d9f4;
    border-radius: 999px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.78);
    color: #245fd9;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.referral-heading h1 {
    max-width: 780px;
    margin: 14px 0 12px;
    color: #0f244b;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.referral-heading p {
    max-width: 760px;
    color: #5c6c86;
    font-size: 1.03rem;
    line-height: 1.75;
}

/* ========================================
   PRIMARY REFERRAL LINK
======================================== */

.referral-primary-card {
    position: relative;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 28px;
    overflow: hidden;
    margin-bottom: 26px;
    border: 1px solid #c6d8f3;
    border-radius: 26px;
    padding: 30px;
    background:
        linear-gradient(
            135deg,
            #0f2f6f 0%,
            #1957bd 52%,
            #178faf 100%
        );
    color: #ffffff;
    box-shadow:
        0 26px 64px rgba(18, 68, 147, 0.22);
}

.referral-primary-card::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 58px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}

.referral-primary-card .referral-code-card,
.referral-primary-card .generated-referral-result {
    position: relative;
    z-index: 1;
}

.referral-code-card {
    display: grid;
    align-content: center;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
}

.referral-code-card span {
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.referral-code-card strong {
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: clamp(1.45rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.08em;
}

.referral-code-card small {
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8rem;
    line-height: 1.55;
}

.referral-primary-card .generated-referral-result {
    margin: 0;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.referral-primary-card .generated-referral-result > div:first-child > span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    margin-bottom: 7px;
    border-radius: 999px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #dff8ff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.referral-primary-card h2 {
    margin: 0 0 8px;
    color: #ffffff;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
}

.referral-primary-card p {
    max-width: 720px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.79);
    line-height: 1.65;
}

.referral-primary-card .copy-link-row input {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.96);
    color: #12264c;
    box-shadow:
        inset 0 1px 2px rgba(14, 39, 82, 0.05),
        0 10px 24px rgba(4, 28, 75, 0.13);
}

.referral-primary-card .button-secondary {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
    box-shadow: none;
}

.referral-primary-card .button-secondary:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #174da8;
    box-shadow: 0 10px 24px rgba(8, 31, 73, 0.2);
}

/* ========================================
   REFERRAL TWO-COLUMN AREA
======================================== */

.referral-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(340px, 0.92fr);
    gap: 24px;
    align-items: start;
}

.referral-generator-card,
.referral-information-card {
    border: 1px solid #dce5f1;
    border-radius: 24px;
    background: #ffffff;
    box-shadow:
        0 16px 44px rgba(22, 52, 100, 0.075);
}

.referral-generator-card {
    padding: 28px;
}

.referral-generator-card > div:first-child:not(.referral-code-card) {
    margin-bottom: 24px;
}

.referral-generator-card .section-kicker,
.referral-popular-section .section-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    color: #2460d8;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.referral-generator-card h2,
.referral-popular-section h2 {
    margin: 0 0 9px;
    color: #10244a;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.2;
}

.referral-generator-card > div:first-child p,
.referral-popular-section .member-heading-row p {
    margin: 0;
    color: #65748c;
    line-height: 1.65;
}

.referral-generator-card form {
    display: grid;
    gap: 18px;
}

.referral-generator-card .form-field {
    display: grid;
    gap: 9px;
}

.referral-generator-card .form-field label {
    color: #1c3157;
    font-size: 0.9rem;
    font-weight: 900;
}

.referral-generator-card .form-field input,
.copy-link-row input {
    width: 100%;
    min-width: 0;
    border: 1px solid #cbd8e8;
    border-radius: 14px;
    padding: 14px 16px;
    background: #fbfdff;
    color: #172541;
    font: inherit;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.referral-generator-card .form-field input:focus,
.copy-link-row input:focus {
    border-color: #6f9be8;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(36, 95, 217, 0.11);
}

.referral-generator-card .form-field small {
    border-left: 3px solid #a9c6f3;
    border-radius: 0 10px 10px 0;
    padding: 10px 12px;
    background: #f5f8fd;
    color: #66758d;
    font-size: 0.79rem;
    line-height: 1.65;
}

.referral-generator-card .form-field small strong {
    overflow-wrap: anywhere;
    color: #2457b8;
}

.referral-generator-card .button-full {
    min-height: 50px;
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            #2462dc,
            #174eaf
        );
    font-weight: 900;
    box-shadow: 0 13px 26px rgba(36, 98, 220, 0.2);
}

.referral-generator-card .button-full:hover {
    transform: translateY(-1px);
    box-shadow: 0 17px 32px rgba(36, 98, 220, 0.27);
}

/* ========================================
   GENERATED LINK
======================================== */

.generated-referral-result {
    margin-top: 24px;
    border: 1px solid #cfe0f6;
    border-radius: 18px;
    padding: 20px;
    background:
        linear-gradient(
            135deg,
            #f7faff,
            #eef6ff
        );
}

.generated-referral-result > span {
    display: block;
    margin-bottom: 11px;
    color: #1b4f9f;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.copy-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: stretch;
}

.copy-link-row .button {
    min-width: 104px;
}

.referral-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.referral-action-row .button {
    min-width: 108px;
}

.referral-action-status {
    min-height: 22px;
    margin: 11px 0 0;
    color: #237149;
    font-size: 0.82rem;
    font-weight: 800;
}

/* ========================================
   EDUCATION CARD
======================================== */

.referral-information-card {
    position: sticky;
    top: 24px;
    overflow: hidden;
    padding: 28px;
}

.referral-information-card::before {
    content: "";
    display: block;
    width: 54px;
    height: 5px;
    margin-bottom: 18px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #2462dc,
            #1fc0da
        );
}

.referral-information-card h2 {
    margin: 0 0 10px;
    color: #10244a;
    font-size: clamp(1.45rem, 3vw, 1.9rem);
}

.referral-information-card > p {
    margin: 0 0 22px;
    color: #65738a;
    line-height: 1.65;
}

.referral-example {
    border: 1px solid #dfe7f2;
    border-radius: 15px;
    padding: 15px 16px;
    background: #f9fbfe;
}

.referral-example span {
    display: block;
    margin-bottom: 7px;
    color: #748198;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.referral-example code {
    display: block;
    overflow-wrap: anywhere;
    color: #154fa9;
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;
    font-size: 0.82rem;
    line-height: 1.6;
}

.referral-example-arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 7px auto;
    border-radius: 50%;
    background: #e9f1ff;
    color: #2462dc;
    font-size: 1.2rem;
    font-weight: 900;
}

.referral-information-card hr {
    height: 1px;
    margin: 22px 0;
    border: 0;
    background: #e3eaf3;
}

.referral-rules {
    margin-top: 24px;
    border: 1px solid #dce6f3;
    border-radius: 16px;
    padding: 18px;
    background: #f8fbff;
}

.referral-rules > strong {
    display: block;
    margin-bottom: 10px;
    color: #163a79;
}

.referral-rules ul {
    display: grid;
    gap: 9px;
    margin: 0;
    padding-left: 18px;
    color: #637188;
    font-size: 0.83rem;
    line-height: 1.55;
}

.referral-rules li::marker {
    color: #2462dc;
}

/* ========================================
   POPULAR PAGES
======================================== */

.referral-popular-section {
    margin-top: 28px;
    border: 1px solid #dce5f1;
    border-radius: 24px;
    padding: 28px;
    background: #ffffff;
    box-shadow:
        0 16px 44px rgba(22, 52, 100, 0.07);
}

.referral-popular-section .member-heading-row {
    margin-bottom: 20px;
}

.referral-popular-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.referral-popular-card {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    border: 1px solid #dce5f0;
    border-radius: 18px;
    padding: 21px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f8fd
        );
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.referral-popular-card::after {
    content: "";
    position: absolute;
    top: -35px;
    right: -35px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(36, 98, 220, 0.06);
}

.referral-popular-card:hover {
    transform: translateY(-3px);
    border-color: #b6cae8;
    box-shadow:
        0 16px 30px rgba(22, 52, 100, 0.1);
}

.referral-popular-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: #152b51;
    font-size: 1.05rem;
}

.referral-popular-card p {
    position: relative;
    z-index: 1;
    min-height: 48px;
    margin: 0 0 18px;
    color: #6a7890;
    font-size: 0.85rem;
    line-height: 1.55;
}

.referral-popular-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.referral-popular-actions .button {
    min-height: 38px;
    padding: 8px 12px;
    font-size: 0.78rem;
}

/* ========================================
   REFERRAL STATISTICS
======================================== */

.referral-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.referral-summary-grid article {
    position: relative;
    overflow: hidden;
    min-height: 132px;
    border: 1px solid #dce5f1;
    border-radius: 19px;
    padding: 22px;
    background: #ffffff;
    box-shadow:
        0 10px 28px rgba(22, 52, 100, 0.055);
}

.referral-summary-grid article::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background:
        linear-gradient(
            90deg,
            #2462dc,
            #1ebbd5
        );
}

.referral-summary-grid strong,
.referral-summary-grid span {
    display: block;
}

.referral-summary-grid strong {
    margin: 15px 0 7px;
    color: #10244a;
    font-size: clamp(1.35rem, 3vw, 1.85rem);
    font-weight: 900;
}

.referral-summary-grid span {
    color: #6d7a90;
    font-size: 0.82rem;
    font-weight: 700;
}

/* ========================================
   REFERRAL BUTTON CONSISTENCY
======================================== */

.referral-page .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-decoration: none;
}

.referral-page .button-secondary {
    border: 1px solid #ccd9e9;
    background: #ffffff;
    color: #2459bd;
    font-weight: 800;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease;
}

.referral-page .button-secondary:hover {
    transform: translateY(-1px);
    border-color: #8eafe3;
    background: #edf4ff;
    color: #174ca7;
    box-shadow: 0 8px 18px rgba(36, 89, 189, 0.11);
}

/* ========================================
   REFERRAL RESPONSIVE
======================================== */

@media (max-width: 1040px) {
    .referral-primary-card {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .referral-layout {
        grid-template-columns: 1fr;
    }

    .referral-information-card {
        position: static;
    }

    .referral-popular-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .referral-summary-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .referral-heading {
        border-radius: 21px;
        padding: 27px 23px;
    }

    .referral-primary-card {
        grid-template-columns: 1fr;
        border-radius: 22px;
        padding: 23px;
    }

    .referral-code-card {
        padding: 20px;
    }

    .referral-generator-card,
    .referral-information-card,
    .referral-popular-section {
        border-radius: 20px;
        padding: 22px;
    }

    .copy-link-row {
        grid-template-columns: 1fr;
    }

    .copy-link-row .button {
        width: 100%;
    }

    .referral-action-row .button {
        flex: 1 1 130px;
    }

    .referral-popular-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .referral-page {
        padding-right: 14px;
        padding-left: 14px;
    }

    .referral-heading {
        padding: 23px 19px;
    }

    .referral-heading h1 {
        font-size: 2.25rem;
    }

    .referral-primary-card,
    .referral-generator-card,
    .referral-information-card,
    .referral-popular-section {
        padding: 19px;
    }

    .referral-action-row {
        display: grid;
        grid-template-columns: 1fr;
    }

    .referral-action-row .button {
        width: 100%;
    }

    .referral-summary-grid {
        grid-template-columns: 1fr;
    }

    .referral-popular-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .referral-popular-actions .button {
        width: 100%;
    }
}

/* ========================================
   REFERRAL CENTER LAYOUT CORRECTIONS
======================================== */

.referral-main-column {
    display: grid;
    gap: 20px;
    min-width: 0;
}

/*
| The Popular Pages section now sits directly beneath
| the Custom Referral Link Generator.
*/

.referral-main-column .referral-popular-section {
    margin-top: 0;
}

/*
| Four referral destinations display as two compact rows.
*/

.referral-popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.referral-popular-section {
    padding: 22px;
}

.referral-popular-section .member-heading-row {
    margin-bottom: 16px;
}

.referral-popular-card {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    padding: 18px;
}

.referral-popular-card p {
    min-height: 0;
    margin-bottom: 14px;
}

.referral-popular-actions {
    margin-top: auto;
}

.referral-popular-actions .button {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 8px;
    padding-left: 8px;
}

/* ========================================
   PRIMARY REFERRAL CARD — FINAL OVERRIDE
======================================== */

.referral-page .referral-primary-card.referral-generator-card {
    display: grid;
    grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
    align-items: stretch;
    gap: 28px;
    overflow: hidden;
    margin-bottom: 26px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 26px;
    padding: 30px;
    background:
        linear-gradient(
            135deg,
            #0d2d69 0%,
            #1958bd 55%,
            #148cae 100%
        );
    color: #ffffff;
    box-shadow:
        0 26px 64px rgba(18, 68, 147, 0.22);
}

/*
| Referral code panel
*/

.referral-page .referral-primary-card .referral-code-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 20px;
    padding: 24px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
}

.referral-page .referral-primary-card .referral-code-card span {
    display: block;
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.referral-page .referral-primary-card .referral-code-card strong {
    display: block;
    width: 100%;
    margin: 0;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
    color: #ffffff;
    font-size: clamp(1.3rem, 2.2vw, 1.75rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.referral-page .referral-primary-card .referral-code-card small {
    display: block;
    max-width: 250px;
    margin: 13px 0 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.81rem;
    line-height: 1.55;
}

/*
| Main referral-link content
*/

.referral-page .referral-primary-card .generated-referral-result {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 4px 0;
    background: transparent;
    box-shadow: none;
}

.referral-page
.referral-primary-card
.generated-referral-result
> div:first-child {
    margin: 0 0 20px;
}

.referral-page
.referral-primary-card
.generated-referral-result
> div:first-child
> span {
    display: inline-flex;
    width: auto;
    margin: 0 0 8px;
    border-radius: 999px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.13);
    color: #d9f8ff;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.referral-page .referral-primary-card h2 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.15;
}

.referral-page .referral-primary-card p {
    max-width: 700px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
}

/*
| Referral URL and actions
*/

.referral-page .referral-primary-card .copy-link-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    width: 100%;
}

.referral-page .referral-primary-card .copy-link-row input {
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #ffffff;
    color: #15294d;
}

.referral-page .referral-primary-card .button-secondary {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

.referral-page .referral-primary-card .button-secondary:hover {
    border-color: #ffffff;
    background: #ffffff;
    color: #174da8;
}

.referral-page .referral-primary-card .referral-action-row {
    margin-top: 12px;
}

.referral-page .referral-primary-card .referral-action-status {
    color: #d9f8e8;
}

/*
| Responsive primary card
*/

@media (max-width: 820px) {
    .referral-page .referral-primary-card.referral-generator-card {
        grid-template-columns: 1fr;
    }

    .referral-page .referral-primary-card .referral-code-card strong {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 520px) {
    .referral-page .referral-primary-card .copy-link-row {
        grid-template-columns: 1fr;
    }

    .referral-page .referral-primary-card .copy-link-row .button {
        width: 100%;
    }
}

/* ========================================
   REFERRAL GENERATOR PLACEHOLDER
======================================== */

.referral-page #page_url::placeholder {
    color: #8f9db1;
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.48;
}

.referral-page #page_url::-webkit-input-placeholder {
    color: #8f9db1;
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.48;
}

.referral-page #page_url::-moz-placeholder {
    color: #8f9db1;
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.48;
}

/*
|--------------------------------------------------------------------------
| Listing review actions
|--------------------------------------------------------------------------
*/

.listing-review-actions {
    display: grid;
    gap: 20px;
    margin-top: 28px;
}

.listing-review-warning,
.listing-review-primary-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    padding: 24px;
    border-radius: 16px;
}

.listing-review-warning {
    border: 1px solid #efb8b8;
    background: #fff6f6;
}

.listing-review-primary-action {
    border: 1px solid #d7e3f2;
    background: #f7faff;
}

.listing-review-warning-content,
.listing-review-primary-action > div {
    min-width: 0;
}

.listing-review-warning-label,
.listing-review-action-label {
    display: block;
    margin-bottom: 7px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.listing-review-warning-label {
    color: #a52929;
}

.listing-review-action-label {
    color: #1d5fd1;
}

.listing-review-warning h2,
.listing-review-primary-action h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    line-height: 1.35;
    color: #102d57;
}

.listing-review-warning p,
.listing-review-primary-action p {
    margin: 0;
    max-width: 720px;
    line-height: 1.65;
    color: #526783;
}

.listing-review-warning-button,
.listing-review-primary-button {
    min-width: 190px;
    white-space: nowrap;
}

.listing-review-primary-form {
    margin: 0;
}

.listing-review-primary-button[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
}

.listing-review-secondary-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
}

.listing-review-secondary-actions form {
    margin: 0;
}

.listing-review-secondary-actions .button {
    min-height: 46px;
}

.listing-review-secondary-actions .button-danger-outline {
    margin-left: auto;
}

@media (max-width: 760px) {
    .listing-review-warning,
    .listing-review-primary-action {
        grid-template-columns: 1fr;
    }

    .listing-review-warning-button,
    .listing-review-primary-button,
    .listing-review-primary-form {
        width: 100%;
        min-width: 0;
    }

    .listing-review-secondary-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .listing-review-secondary-actions form,
    .listing-review-secondary-actions .button {
        width: 100%;
    }

    .listing-review-secondary-actions .button-danger-outline {
        margin-left: 0;
    }
}

/*
|--------------------------------------------------------------------------
| Member Header Spacing
|--------------------------------------------------------------------------
*/

.member-main-nav {
    gap: 2px;
}

.member-main-nav a {
    padding-right: 10px;
    padding-left: 10px;
}

.member-header-actions {
    flex: 0 0 auto;
    gap: 8px;
}

.member-logout-link {
    flex: 0 0 auto;
    min-width: 74px;
    white-space: nowrap;
}
/*
|--------------------------------------------------------------------------
| Package Commit 5B — Advertisement Publishing Choice
|--------------------------------------------------------------------------
|
| Append this section to:
| /home/apluswebtraffic/public_html/assets/css/member.css
|
| Commit 5B is read-only. Package controls stay disabled until Commit 5C.
|
*/

.listing-funding-choice {
    display: grid;
    gap: 20px;
}

.listing-funding-heading {
    max-width: 820px;
}

.listing-funding-heading h2 {
    margin: 0 0 8px;
    color: #102d57;
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    line-height: 1.25;
}

.listing-funding-heading p {
    margin: 0;
    color: #5c6d86;
    line-height: 1.7;
}

.listing-funding-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.listing-funding-option {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    border: 1px solid #dce5f1;
    border-radius: 20px;
    padding: 24px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(23, 51, 99, 0.065);
}

.listing-funding-option-standard {
    background: linear-gradient(145deg, #fff, #f7faff);
}

.listing-funding-option-package {
    border-color: #bdd7ec;
    background: linear-gradient(145deg, #fff 0%, #f0f8ff 62%, #eefbfb 100%);
}

.listing-funding-badge {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    border: 1px solid #c8d9f2;
    border-radius: 999px;
    padding: 4px 10px;
    background: #eef4ff;
    color: #245fd9;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.listing-funding-option-package .listing-funding-badge {
    border-color: #b8dce8;
    background: #edfafd;
    color: #13738d;
}

.listing-funding-option h3 {
    margin: 13px 0 8px;
    color: #10244a;
    font-size: 1.25rem;
    line-height: 1.3;
}

.listing-funding-option p {
    margin: 0;
    color: #617089;
    line-height: 1.65;
}

.listing-funding-summary,
.package-coverage-capacity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.listing-funding-summary div,
.package-coverage-capacity div {
    border: 1px solid #e1e8f1;
    border-radius: 13px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.listing-funding-summary dt,
.package-coverage-capacity dt {
    margin-bottom: 5px;
    color: #78859a;
    font-size: 0.75rem;
    font-weight: 800;
}

.listing-funding-summary dd,
.package-coverage-capacity dd {
    margin: 0;
    color: #172541;
    font-weight: 900;
    overflow-wrap: anywhere;
}

.listing-funding-option .listing-review-primary-form {
    margin-top: auto;
}

.listing-funding-option .listing-review-primary-button {
    width: 100%;
}

.package-coverage-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.package-coverage-card {
    display: grid;
    gap: 14px;
    border: 1px solid #cbdcec;
    border-radius: 16px;
    padding: 17px;
    background: rgba(255, 255, 255, 0.9);
}

.package-coverage-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.package-coverage-header > div > span {
    display: block;
    margin-bottom: 5px;
    color: #75849a;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.package-coverage-number {
    color: #123d7b;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.package-coverage-yes {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 28px;
    border-radius: 999px;
    padding: 4px 10px;
    background: #e7f8ed;
    color: #176b39;
    font-size: 0.72rem;
    font-weight: 900;
}

.package-coverage-projection {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    border-radius: 12px;
    padding: 12px 14px;
    background: #edf7ff;
}

.package-coverage-projection span {
    color: #5e728d;
    font-size: 0.78rem;
    font-weight: 800;
}

.package-coverage-projection strong {
    color: #174f9f;
    text-align: right;
}

.package-coverage-empty {
    display: grid;
    gap: 5px;
    margin-top: 18px;
    border: 1px dashed #c7d6e6;
    border-radius: 14px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.package-coverage-empty strong {
    color: #334b6e;
}

.package-coverage-empty small,
.package-coverage-note {
    color: #708097;
    line-height: 1.55;
}

.package-coverage-disabled-action {
    width: 100%;
    margin-top: auto;
    cursor: not-allowed;
    opacity: 0.62;
    box-shadow: none;
}

.package-coverage-note {
    display: block;
    margin-top: -8px;
    font-size: 0.76rem;
    text-align: center;
}

@media (max-width: 920px) {
    .listing-funding-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .listing-funding-option {
        border-radius: 16px;
        padding: 19px;
    }

    .listing-funding-summary,
    .package-coverage-capacity {
        grid-template-columns: 1fr;
    }

    .package-coverage-header,
    .package-coverage-projection {
        align-items: flex-start;
        flex-direction: column;
    }

    .package-coverage-projection strong {
        text-align: left;
    }
}
a.button.button-secondary-corrections {
    background: #dc2626;
    border-color: #dc2626;
    color: #ffffff;
    font-weight: 700;
}

a.button.button-secondary-corrections:hover,
a.button.button-secondary-corrections:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Member Dashboard — 2026 visual refresh
|--------------------------------------------------------------------------
|
| All selectors are scoped to .member-dashboard so the advertisement,
| order, package, referral, and account pages retain their existing UI.
|
*/

.member-dashboard {
    --dashboard-navy: #0b2246;
    --dashboard-blue: #245fd9;
    --dashboard-cyan: #16a9cf;
    --dashboard-copy: #60708a;
    --dashboard-line: #dce6f3;
    position: relative;
    overflow: hidden;
    min-height: 78vh;
    padding: 54px 20px 96px;
    background:
        radial-gradient(circle at 88% 8%, rgba(56, 189, 224, 0.11), transparent 24rem),
        radial-gradient(circle at 9% 21%, rgba(36, 95, 217, 0.08), transparent 25rem),
        #f4f7fb;
}

.member-dashboard::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #9ed9ed, transparent);
    content: "";
}

.member-dashboard > .container {
    position: relative;
    z-index: 1;
}

.member-dashboard .form-alert {
    margin-bottom: 22px;
    border-radius: 15px;
    box-shadow: 0 12px 28px rgba(23, 55, 102, 0.06);
}

.member-dashboard .member-welcome {
    display: grid;
    gap: 26px;
}

.member-dashboard-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 44px;
    overflow: hidden;
    min-height: 252px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 28px;
    padding: 46px 50px;
    background:
        radial-gradient(circle at 88% 16%, rgba(66, 211, 231, 0.3), transparent 13rem),
        linear-gradient(125deg, #091e40 0%, #103a7d 55%, #1761be 100%);
    color: #ffffff;
    box-shadow: 0 24px 52px rgba(11, 42, 91, 0.2);
}

.member-dashboard-hero::after {
    position: absolute;
    right: -68px;
    bottom: -108px;
    width: 285px;
    height: 285px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(255, 255, 255, 0.035),
        0 0 0 70px rgba(255, 255, 255, 0.025);
    content: "";
}

.member-dashboard-hero-copy,
.member-dashboard-hero-action {
    position: relative;
    z-index: 1;
}

.member-dashboard-hero-copy {
    max-width: 700px;
}

.member-dashboard-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--dashboard-blue);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.member-dashboard-hero .member-dashboard-kicker {
    color: #91e2f0;
}

.member-dashboard-kicker::before {
    width: 23px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.member-dashboard-hero h1 {
    margin: 13px 0 14px;
    color: #ffffff;
    font-size: clamp(2.1rem, 4.6vw, 3.55rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.03;
}

.member-dashboard-hero h1 span {
    display: block;
    color: #8de5f0;
}

.member-dashboard-hero p {
    max-width: 640px;
    margin: 0;
    color: #d6e4f5;
    font-size: 1.02rem;
    line-height: 1.7;
}

.member-dashboard-hero-action {
    display: grid;
    flex: 0 0 auto;
    justify-items: center;
    gap: 11px;
}

.member-dashboard .member-dashboard-primary-action {
    gap: 10px;
    min-height: 54px;
    padding: 0 23px;
    background: #ffffff;
    color: #174da9;
    box-shadow: 0 14px 28px rgba(4, 25, 63, 0.22);
}

.member-dashboard .member-dashboard-primary-action span {
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
}

.member-dashboard .member-dashboard-primary-action:hover {
    box-shadow: 0 18px 35px rgba(4, 25, 63, 0.3);
}

.member-dashboard .member-dashboard-primary-action:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.member-dashboard-hero-action small {
    color: #bcd5ed;
    font-size: 0.74rem;
}

.member-dashboard .member-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin: -1px 0 0;
}

.member-summary-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    min-width: 0;
    border: 1px solid var(--dashboard-line);
    border-radius: 19px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.96);
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(20, 51, 99, 0.055);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.member-summary-card:hover {
    transform: translateY(-3px);
    border-color: #aec7e8;
    box-shadow: 0 16px 34px rgba(20, 51, 99, 0.1);
}

.member-summary-card:focus-visible,
.member-dashboard .workspace-card:focus-visible {
    outline: 3px solid rgba(36, 95, 217, 0.22);
    outline-offset: 3px;
}

.member-summary-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 43px;
    height: 43px;
    border-radius: 13px;
    background: #eaf2ff;
    color: #245fd9;
}

.member-summary-icon-review {
    background: #fff3dc;
}

.member-summary-icon-clicks {
    background: #e8f8f4;
    color: #11806d;
}

.member-summary-icon-referrals {
    background: #f1edff;
}

.member-summary-icon img,
.member-summary-icon svg {
    width: 23px;
    height: 23px;
}

.member-summary-content {
    display: grid;
    min-width: 0;
}

.member-summary-content small {
    overflow: hidden;
    margin-bottom: 3px;
    color: #68768c;
    font-size: 0.75rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-summary-content strong {
    overflow-wrap: anywhere;
    color: var(--dashboard-navy);
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.member-summary-content > span {
    margin-top: 6px;
    color: #2b62c7;
    font-size: 0.72rem;
    font-weight: 700;
}

.member-dashboard .member-next-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    margin: 0;
    border: 1px solid #d8e4f2;
    border-radius: 22px;
    padding: 28px 30px;
    background: linear-gradient(105deg, #ffffff, #f7fbff);
    box-shadow: 0 12px 32px rgba(20, 51, 99, 0.06);
}

.member-dashboard .member-next-action-established {
    border-left: 5px solid #245fd9;
}

.member-dashboard .member-next-action-review {
    border-left: 5px solid #e5a821;
}

.member-dashboard .member-next-action-new {
    border-left: 5px solid #14a7c9;
}

.member-next-action-copy {
    display: flex;
    align-items: center;
    gap: 19px;
    min-width: 0;
}

.member-next-action-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 17px;
    background: #eaf2ff;
}

.member-next-action-icon img {
    width: 28px;
    height: 28px;
}

.member-next-action-label {
    display: block;
    margin-bottom: 5px;
    color: #2b62c7;
    font-size: 0.71rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.member-dashboard .member-next-action h2 {
    margin: 0 0 7px;
    color: var(--dashboard-navy);
    font-size: clamp(1.18rem, 2.2vw, 1.45rem);
    letter-spacing: -0.02em;
}

.member-dashboard .member-next-action p {
    max-width: 650px;
    margin: 0;
    color: var(--dashboard-copy);
    line-height: 1.6;
}

.member-dashboard .member-next-action form {
    flex: 0 0 auto;
    margin: 0;
}

.member-dashboard .member-action-row {
    flex: 0 0 auto;
    justify-content: flex-end;
}

.member-dashboard .member-dashboard-secondary-button {
    border: 1px solid #c9d8eb;
    background: #ffffff;
    color: #2359bc;
    box-shadow: none;
}

.member-dashboard .member-dashboard-secondary-button:hover {
    border-color: #9eb9df;
    background: #f4f8ff;
    box-shadow: 0 10px 22px rgba(35, 89, 188, 0.1);
}

.member-dashboard .member-verification-notice {
    align-items: flex-start;
    margin-bottom: 24px;
    border-left: 5px solid #e5a821;
    background: #fffcf4;
}

.member-dashboard .member-draft-notice {
    border-left: 5px solid #7155cf;
}

.member-workspace-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-top: 16px;
}

.member-workspace-heading h2 {
    margin: 7px 0 0;
    color: var(--dashboard-navy);
    font-size: clamp(1.45rem, 2.8vw, 2rem);
    letter-spacing: -0.035em;
}

.member-workspace-heading p {
    margin: 0 0 3px;
    color: var(--dashboard-copy);
    font-size: 0.9rem;
}

.member-dashboard .dashboard-workspace-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px;
    margin-top: -5px;
}

.member-dashboard .workspace-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    min-height: 210px;
    border: 1px solid var(--dashboard-line);
    border-radius: 21px;
    padding: 24px;
    background: #ffffff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 11px 30px rgba(20, 51, 99, 0.055);
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.member-dashboard .workspace-card:hover {
    transform: translateY(-5px);
    border-color: #a8c3e7;
    box-shadow: 0 20px 42px rgba(20, 51, 99, 0.12);
}

.workspace-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.member-dashboard .workspace-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(145deg, #edf4ff, #e5efff);
    box-shadow: inset 0 0 0 1px rgba(36, 95, 217, 0.06);
}

.member-dashboard .workspace-icon img {
    width: 27px;
    height: 27px;
}

.workspace-arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f3f6fa;
    color: #718099;
    font-size: 0.93rem;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.workspace-card:hover .workspace-arrow {
    transform: translate(2px, -2px);
    background: #245fd9;
    color: #ffffff;
}

.workspace-card-copy {
    display: grid;
    gap: 8px;
}

.member-dashboard .workspace-card strong {
    color: var(--dashboard-navy);
    font-size: 1.08rem;
    letter-spacing: -0.015em;
}

.member-dashboard .workspace-card small {
    color: #68768c;
    font-size: 0.83rem;
    line-height: 1.6;
}

@media (max-width: 1050px) {
    .member-dashboard .member-summary-grid,
    .member-dashboard .dashboard-workspace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-dashboard-hero {
        padding: 42px;
    }

    .member-dashboard .member-next-action {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-dashboard .member-action-row {
        justify-content: flex-start;
    }
}

@media (max-width: 760px) {
    .member-dashboard {
        padding: 30px 14px 72px;
    }

    .member-dashboard-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 29px;
        min-height: 0;
        border-radius: 23px;
        padding: 35px 28px;
    }

    .member-dashboard-hero h1 span {
        display: inline;
    }

    .member-dashboard-hero-action {
        justify-items: start;
        width: 100%;
    }

    .member-dashboard .member-dashboard-primary-action {
        width: 100%;
    }

    .member-workspace-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .member-dashboard .member-next-action,
    .member-dashboard .member-verification-notice,
    .member-dashboard .member-draft-notice {
        padding: 24px;
    }

    .member-dashboard .member-action-row,
    .member-dashboard .member-action-row .button {
        width: 100%;
    }
}

@media (max-width: 540px) {
    .member-dashboard .member-summary-grid,
    .member-dashboard .dashboard-workspace-grid {
        grid-template-columns: 1fr;
    }

    .member-dashboard-hero {
        padding: 31px 23px;
    }

    .member-dashboard-hero h1 {
        font-size: 2.05rem;
    }

    .member-summary-card {
        align-items: center;
    }

    .member-summary-content small {
        white-space: normal;
    }

    .member-next-action-copy {
        align-items: flex-start;
        flex-direction: column;
    }

    .member-dashboard .member-next-action > .button,
    .member-dashboard .member-next-action form,
    .member-dashboard .member-next-action form .button {
        width: 100%;
    }

    .member-dashboard .workspace-card {
        min-height: 185px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .member-dashboard .member-summary-card,
    .member-dashboard .workspace-card,
    .member-dashboard .workspace-arrow {
        transition: none;
    }
}

/* ========================================
   MANUAL FEED — COMPACT MEMBER CONTROLS
======================================== */

.advertisement-feed-control {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    border: 1px solid #d8e2ef !important;
    border-radius: 12px !important;
    background: #f8fbff !important;
}

.advertisement-feed-copy {
    min-width: 0 !important;
    margin: 0 0 9px !important;
}

.advertisement-feed-heading {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin: 0 0 5px !important;
    white-space: nowrap !important;
}

.advertisement-feed-heading > span {
    display: inline !important;
    margin: 0 !important;
    color: #536783 !important;
    font-size: 0.72rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.035em !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

.advertisement-feed-heading > strong {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 21px !important;
    margin: 0 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    background: #e8f7ed !important;
    color: #17652f !important;
    font-size: 0.68rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.advertisement-feed-copy p {
    display: block !important;
    margin: 0 !important;
    color: #33445f !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

.advertisement-feed-copy small {
    display: block !important;
    margin: 3px 0 0 !important;
    color: #66758b !important;
    font-size: 0.72rem !important;
    line-height: 1.3 !important;
}

/* Bottom row only: action 85%, help 15%. */
.advertisement-feed-action-row {
    display: grid !important;
    grid-template-columns: minmax(0, 85fr) minmax(34px, 15fr) !important;
    align-items: stretch !important;
    gap: 7px !important;
    width: 100% !important;
    margin: 0 !important;
}

.advertisement-feed-action,
.advertisement-feed-action form {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.advertisement-feed-action .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 40px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
    font-size: 0.78rem !important;
}

.advertisement-feed-help-cell {
    display: flex !important;
    min-width: 34px !important;
    width: 100% !important;
}

details.advertisement-feed-help {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

details.advertisement-feed-help > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-width: 34px !important;
    min-height: 40px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #cbd8e8 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #245fd9 !important;
    font-size: 0 !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    list-style: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

details.advertisement-feed-help > summary::before {
    content: "?" !important;
    font-size: 0.8rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

details.advertisement-feed-help > summary::-webkit-details-marker {
    display: none !important;
}

details.advertisement-feed-help > summary::marker {
    content: "" !important;
    font-size: 0 !important;
}

details.advertisement-feed-help[open] > summary {
    border-color: #245fd9 !important;
    background: #245fd9 !important;
    color: #fff !important;
}

.advertisement-feed-help-panel {
    position: absolute !important;
    z-index: 100 !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    width: min(310px, 78vw) !important;
    padding: 13px 14px !important;
    border: 1px solid #cfdbea !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #516078 !important;
    font-size: 0.76rem !important;
    line-height: 1.5 !important;
    box-shadow: 0 16px 34px rgba(23, 51, 99, 0.18) !important;
}

.advertisement-feed-help-panel strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: #173b75 !important;
}

.advertisement-feed-help-panel p {
    margin: 0 0 7px !important;
    color: #516078 !important;
    font-size: 0.76rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    white-space: normal !important;
}

.advertisement-feed-help-panel p:last-child {
    margin-bottom: 0 !important;
}

.advertisement-feed-control-active {
    border-color: #a9d8b5 !important;
    background: #f1fbf4 !important;
}

.advertisement-feed-control-cooldown,
.advertisement-feed-control-pacing_limited {
    border-color: #ead6ad !important;
    background: #fffaf0 !important;
}

.advertisement-feed-control-cooldown
.advertisement-feed-heading > strong,
.advertisement-feed-control-pacing_limited
.advertisement-feed-heading > strong {
    background: #fff0cb !important;
    color: #785113 !important;
}

.advertisement-feed-control-ineligible {
    border-color: #dfe3e8 !important;
    background: #f7f8fa !important;
}

.advertisement-feed-control-ineligible
.advertisement-feed-heading > strong {
    background: #e9edf2 !important;
    color: #5b6675 !important;
}

@media (max-width: 620px) {
    .advertisement-feed-heading,
    .advertisement-feed-copy p {
        white-space: normal !important;
    }

    .advertisement-feed-action-row {
        grid-template-columns: minmax(0, 1fr) 42px !important;
    }

    .advertisement-feed-help-panel {
        right: auto !important;
        left: 0 !important;
    }
}