/**
 * Donor Portal styles.
 * BEM-ish, all classes prefixed with .donor-portal-.
 * Design tokens at top — adjust there to retheme globally.
 */

/* ============================================================
   Design tokens
   ============================================================ */
.donor-portal-root,
.donor-portal-section {
    /* Colors */
    --dp-color-text-primary:    #323232;
    --dp-color-text-secondary:  #6B6B6B;
    --dp-color-text-muted:      #9A9A9A;
    --dp-color-text-on-dark:    #FFFFFF;

    --dp-color-teal:            #009ddc;
    --dp-color-teal-dark:       #009DDC;
    --dp-color-teal-light:      #009DDC;

    --dp-color-blue:            #2B8FDB;
    --dp-color-blue-dark:       #1F73B3;

    --dp-color-coral:           #E74C5E;
    --dp-color-coral-dark:      #C8364A;
    --dp-color-coral-bg:        #FBE5E8;

    --dp-color-card-bg:         #FFFFFF;
    --dp-color-page-bg:         #F4F6F8;
    --dp-color-border:          #E5E7EB;
    --dp-color-border-strong:   #C9CED4;

    --dp-color-tag-dark:        #1F1F1F;

    --dp-color-success:         #2A7A2A;
    --dp-color-warning:         #C89000;

    /* Typography */
    --dp-font-family:           "Proxima Nova", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --dp-font-size-h1:          32px !important;
    --dp-font-size-h2:          32px !important;
    --dp-font-size-h3:          24px !important;
    --dp-font-size-body:        24px !important;
    --dp-font-size-small:       18px !important;
    --dp-font-size-tiny:        11px;
    --dp-line-height-tight:     1.3;
    --dp-line-height-normal:    1.5;

    /* Spacing scale (8px base) */
    --dp-space-xs:              4px;
    --dp-space-sm:              8px;
    --dp-space-md:              16px;
    --dp-space-lg:              24px;
    --dp-space-xl:              32px;
    --dp-space-2xl:             48px;

    /* Border radii */
    --dp-radius-sm:             3px;
    --dp-radius-md:             6px;
    --dp-radius-lg:             10px;

    /* Shadows */
    --dp-shadow-card:           0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.03);
    --dp-shadow-card-hover:     0 3px 8px rgba(0, 0, 0, 0.08);
    --dp-shadow-modal:          0 12px 40px rgba(0, 0, 0, 0.18);

    /* Layout */
    --dp-content-max:           1080px;
}

/* ============================================================
   Base section
   ============================================================ */
.donor-portal-section {
    background: var(--dp-color-page-bg);
    font-family: var(--dp-font-family);
    font-size: var(--dp-font-size-body);
    line-height: var(--dp-line-height-normal);
    color: var(--dp-color-text-primary);
    /* Break out of bb-theme content wrapper so hero spans edge-to-edge */
    width: 100%;
    margin: 0;
    padding: 0;
}

.donor-portal-hidden { display: none !important; }

.donor-portal-container {
    max-width: var(--dp-content-max);
    margin: 0 auto;
    padding: 0 var(--dp-space-lg);
}

.donor-portal-loading,
.donor-portal-loading-inline {
    color: var(--dp-color-text-secondary);
    font-style: italic;
    padding: var(--dp-space-md) 0;
}
.donor-portal-error-inline {
    color: var(--dp-color-coral);
    padding: var(--dp-space-md) 0;
}

/* ============================================================
   Hero — banner image with curved teal wave overlay
   ============================================================ */
.donor-portal-hero {
    position: relative;
    width: 100%;
    height: 400px;
    background-color: var(--dp-color-teal-dark);
    background-image: url('../images/donor-portal-banner-desktop.jpg');
    background-size: cover;
    background-position: center;
    overflow: hidden;
    z-index: 0;
}

/* ============================================================
   Payment-expiring alert banner — overlaps bottom of hero
   ============================================================ */
.donor-portal-alert-banner {
    background: var(--dp-color-coral);
    color: var(--dp-color-text-on-dark);
    padding: var(--dp-space-sm) var(--dp-space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dp-space-md);
    font-size: var(--dp-font-size-small);
    font-weight: 500;
}
.donor-portal-alert-banner-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--dp-color-coral-dark);
    color: var(--dp-color-text-on-dark);
    font-weight: 700;
    font-size: 12px;
}
.donor-portal-alert-banner-action {
    background: var(--dp-color-text-on-dark);
    color: var(--dp-color-coral);
    border: 0;
    border-radius: var(--dp-radius-sm);
    padding: 4px 10px;
    font-size: var(--dp-font-size-small);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.donor-portal-alert-banner-action:hover {
    background: var(--dp-color-coral-bg);
}

/* ============================================================
   Tab navigation
   ============================================================ */
.donor-portal-tab-bar {
    background: var(--dp-color-card-bg);
    border-bottom: 1px solid var(--dp-color-border);
}
.donor-portal-nav {
    max-width: var(--dp-content-max);
    margin: 0 auto;
    padding: 0 var(--dp-space-lg);
    display: flex;
    gap: var(--dp-space-xl);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* IE 10+ */
}
.donor-portal-nav::-webkit-scrollbar { display: none; } /* Chrome / Safari */

.donor-portal-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: var(--dp-space-md) 0;
    color: var(--dp-color-text-secondary) !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px !important;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    /* Suppress the default browser focus ring on mouse click. */
    outline: none !important;
}
.donor-portal-nav-link:hover {
    color: var(--dp-color-text-primary);
}
/* Re-enable focus ring for keyboard navigation only (accessibility). */
.donor-portal-nav-link:focus-visible {
    outline: 2px solid var(--dp-color-blue);
    outline-offset: 2px;
    border-radius: var(--dp-radius-sm);
}
.donor-portal-nav-link.is-active {
    color: var(--dp-color-teal) !important;
    border-bottom-color: var(--dp-color-teal);
}
.donor-portal-nav-link.is-disabled {
    color: var(--dp-color-text-muted);
    cursor: not-allowed;
    pointer-events: none;
}
.donor-portal-nav-coming-soon {
    display: inline-block;
    padding: 2px 6px;
    font-size: var(--dp-font-size-tiny);
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.4px;
    background: var(--dp-color-page-bg);
    color: var(--dp-color-text-muted);
    border-radius: var(--dp-radius-sm);
    margin-left: 4px;
}

/* ============================================================
   Content wrapper below tabs
   ============================================================ */
.donor-portal-content {
    max-width: var(--dp-content-max);
    margin: 0 auto;
    padding: var(--dp-space-xl) var(--dp-space-lg) var(--dp-space-2xl);
}
.donor-portal-view {
    display: none;
}
.donor-portal-view.is-active {
    display: block;
}

/* ============================================================
   Buttons
   ============================================================ */
.donor-portal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
    border-radius: var(--dp-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}
.donor-portal-btn:disabled { opacity: 0.6; cursor: wait; }

.donor-portal-btn-primary {
    background: transparent;
    color: var(--dp-color-teal);
    border-color: var(--dp-color-teal);
}
.donor-portal-btn-primary:hover { background: #68B0DF; color: #FFF;border-color: #009DDC; }

.donor-portal-btn-teal {
    background: var(--dp-color-teal);
    color: var(--dp-color-text-on-dark);
    border-color: var(--dp-color-teal);
}
.donor-portal-btn-teal:hover { background: #68B0DF; border-color: #009DDC; }

.donor-portal-btn-outline {
    background: transparent;
    color: var(--dp-color-teal);
    border-color: var(--dp-color-teal);
}
.donor-portal-btn-outline:hover {
    background: var(--dp-color-teal);
    color: #FFF;
}

.donor-portal-btn-text {
    background: transparent;
    color: var(--dp-color-coral);
    border-color: transparent;
    padding: 10px 12px;
}
.donor-portal-btn-text:hover { background: var(--dp-color-coral-bg); }

.donor-portal-btn-link {
    background: transparent;
    color: var(--dp-color-blue);
    border: 0;
    padding: 0;
    font-weight: 600;
    cursor: pointer;
}
.donor-portal-btn-link:hover { color: var(--dp-color-blue-dark); text-decoration: underline; }

.donor-portal-btn-block {
    width: 100%;
}

/* Anchor links styled per design — Forgot Username, Forgot Password, etc. */
.donor-portal-text-link {
    color: var(--dp-color-blue);
    font-weight: 600;
    text-decoration: none;
}
.donor-portal-text-link:hover { text-decoration: underline; }
.donor-portal-text-link-coral {
    color: var(--dp-color-coral);
    font-weight: 600;
    text-decoration: none;
}
.donor-portal-text-link-coral:hover { text-decoration: underline; }

/* ============================================================
   Cards (generic container component)
   ============================================================ */
.donor-portal-card {
    background: var(--dp-color-card-bg);
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius-md);
    padding: var(--dp-space-lg);
    box-shadow: var(--dp-shadow-card);
}
.donor-portal-card-title {
    margin: 0 0 var(--dp-space-md) 0;
    font-size: var(--dp-font-size-h3) !important;
    font-weight: 600;
    color: var(--dp-color-text-primary);
}

/* ============================================================
   Forms
   ============================================================ */
.donor-portal-form-group {
    margin-bottom: var(--dp-space-md);
}
.donor-portal-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-primary);
}
.donor-portal-form-group input,
.donor-portal-form-group select,
.donor-portal-form-group textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: var(--dp-font-size-body);
    font-family: inherit;
    border: 1px solid var(--dp-color-border-strong);
    border-radius: var(--dp-radius-sm);
    box-sizing: border-box;
    background: var(--dp-color-card-bg);
    color: var(--dp-color-text-primary);
}
.donor-portal-form-group input:focus,
.donor-portal-form-group select:focus,
.donor-portal-form-group textarea:focus {
    outline: none;
    border-color: var(--dp-color-blue);
    box-shadow: 0 0 0 3px rgba(43, 143, 219, 0.15);
}
.donor-portal-form-row {
    display: flex;
    gap: var(--dp-space-md);
}
.donor-portal-form-row .donor-portal-form-group { flex: 1; }
.donor-portal-form-help {
    margin-top: var(--dp-space-sm);
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-secondary);
}
.donor-portal-form-actions {
    display: flex;
    gap: var(--dp-space-sm);
    margin-top: var(--dp-space-lg);
}

/* ============================================================
   Login page
   ============================================================ */
.donor-portal-login-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--dp-space-xl);
    align-items: start;
    margin-top: calc(var(--dp-space-2xl) * -1); /* Overlap the hero */
    position: relative;
    z-index: 2;
}
.donor-portal-login-card {
    background: var(--dp-color-card-bg);
    border-radius: var(--dp-radius-md);
    box-shadow: var(--dp-shadow-card);
    padding: var(--dp-space-xl);
}
.donor-portal-login-card h2 {
    margin: 0 0 4px 0;
    font-size: var(--dp-font-size-h2);
    font-weight: 600;
}
.donor-portal-login-card .donor-portal-login-subtitle {
    margin: 0 0 var(--dp-space-lg) 0;
    color: var(--dp-color-text-secondary);
    font-size: var(--dp-font-size-body);
}
.donor-portal-login-help {
    margin-top: var(--dp-space-md);
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-secondary);
}
.donor-portal-login-support {
    background: var(--dp-color-page-bg);
    border-radius: var(--dp-radius-md);
    padding: var(--dp-space-lg);
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-secondary);
    line-height: var(--dp-line-height-normal);
}
.donor-portal-login-support a {
    color: var(--dp-color-blue);
    text-decoration: none;
}

/* ============================================================
   Dashboard view — three-card row + impact
   ============================================================ */
    .donor-portal-dashboard, donor-portal-login {
        background-color: #F0FAFE;
    }

   .donor-portal-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 320px;
    gap: var(--dp-space-md);
    margin-bottom: var(--dp-space-lg);
}
.donor-portal-quick-links-column {
    display: grid;
    gap: var(--dp-space-md);
}

/* Recent Donations card */
.donor-portal-recent-donations { /* uses .donor-portal-card */ }
.donor-portal-donation-line {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--dp-space-sm);
    padding: var(--dp-space-md) 0;
    border-bottom: 1px solid var(--dp-color-border);
}
.donor-portal-donation-line:last-child { border-bottom: 0; }
.donor-portal-donation-title {
    font-weight: 600;
    color: var(--dp-color-text-primary);
    margin: 0 0 2px 0;
    font-size: var(--dp-font-size-body);
}
.donor-portal-donation-meta {
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-secondary);
    margin: 0;
}
.donor-portal-donation-amount {
    font-weight: 600;
    color: var(--dp-color-text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
.donor-portal-donation-tag-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Tags */
.donor-portal-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--dp-font-size-tiny);
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    border-radius: var(--dp-radius-sm);
}
.donor-portal-tag-monthly {
    background: var(--dp-color-tag-dark);
    color: var(--dp-color-text-on-dark);
}

/* Recurring Donation card */
.donor-portal-recurring-card { /* uses .donor-portal-card */ }
.donor-portal-recurring-empty {
    text-align: center;
    padding: var(--dp-space-md) 0;
}
.donor-portal-recurring-empty p {
    color: var(--dp-color-text-secondary);
    margin: 0 0 var(--dp-space-md) 0;
}

/* Quick Links card */
.donor-portal-quick-links { /* uses .donor-portal-card */ }
.donor-portal-quick-link {
    display: flex;
    align-items: center;
    gap: var(--dp-space-sm);
    padding: var(--dp-space-sm) 0;
    color: var(--dp-color-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: var(--dp-font-size-small);
}
.donor-portal-quick-link-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-block;
}
.donor-portal-quick-link:hover { color: var(--dp-color-blue-dark); }

/* Support card on dashboard */
.donor-portal-support-mini {
    background: var(--dp-color-card-bg);
    border: 1px solid var(--dp-color-border);
    border-radius: var(--dp-radius-md);
    padding: var(--dp-space-md);
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-secondary);
}
.donor-portal-support-mini-title {
    font-weight: 600;
    color: var(--dp-color-text-primary);
    margin: 0 0 4px 0;
}

/* Your Impact card */
.donor-portal-impact-card { /* uses .donor-portal-card */ }
.donor-portal-impact-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--dp-space-sm);
}
.donor-portal-impact-since {
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-secondary);
    margin: 0 0 var(--dp-space-md) 0;
}
.donor-portal-impact-stats {
    display: flex;
    gap: var(--dp-space-2xl);
    align-items: baseline;
}
.donor-portal-impact-stat-value {
    font-size: 32px !important;
    font-weight: 500 !important;
    color: var(--dp-color-text-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.donor-portal-impact-stat-label {
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-secondary);
    margin: 0;
}

/* ============================================================
   Giving History view
   ============================================================ */
.donor-portal-history-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--dp-space-md);
}
.donor-portal-donations-list-card { /* uses .donor-portal-card */ }
.donor-portal-donations-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.donor-portal-donations-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--dp-space-md);
    align-items: center;
    padding: var(--dp-space-md) 0;
    border-bottom: 1px solid var(--dp-color-border);
}
.donor-portal-donations-list li:last-child { border-bottom: 0; }

/* ============================================================
   Manage Giving view
   ============================================================ */
.donor-portal-manage-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--dp-space-md);
}
.donor-portal-monthly-card { /* uses .donor-portal-card */ }
.donor-portal-monthly-card .donor-portal-card-title {
    margin-bottom: var(--dp-space-sm);
}
.donor-portal-monthly-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--dp-space-md);
    padding: var(--dp-space-md) 0;
    border-bottom: 1px solid var(--dp-color-border);
}
.donor-portal-monthly-card .donor-portal-monthly-row:first-of-type {
    padding-top: 0;
}
.donor-portal-monthly-row:last-of-type { border-bottom: 0; }
.donor-portal-monthly-actions {
    display: flex;
    gap: var(--dp-space-sm);
    flex-wrap: wrap;
    margin-top: var(--dp-space-md);
}
.donor-portal-payment-method-card { /* uses .donor-portal-card */ }
.donor-portal-payment-method-card dl {
    margin: 0 0 var(--dp-space-md) 0;
}
.donor-portal-payment-method-card dt {
    font-size: var(--dp-font-size-small);
    color: var(--dp-color-text-secondary);
    font-weight: 600;
    margin-top: var(--dp-space-sm);
}
.donor-portal-payment-method-card dd {
    margin: 0;
    color: var(--dp-color-text-primary);
}

/* Edit-amount inline form (for Update Monthly Donation) */
.donor-portal-monthly-edit-form {
    border-top: 1px solid var(--dp-color-border);
    padding-top: var(--dp-space-md);
    margin-top: var(--dp-space-md);
}

/* Cancelled-gift status — replaces the "Next Payment: ..." line in red */
.donor-portal-cancelled-status {
    color: var(--dp-color-coral-dark);
    font-weight: 600;
}

/* Per-gift past-donation list shown below the actions inside the monthly card */
.donor-portal-monthly-history {
    margin-top: var(--dp-space-lg);
    padding-top: var(--dp-space-md);
    border-top: 1px solid var(--dp-color-border);
}
.donor-portal-monthly-history-title {
    font-size: var(--dp-font-size-small);
    font-weight: 600;
    color: var(--dp-color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 var(--dp-space-sm) 0;
}
.donor-portal-monthly-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}
.donor-portal-monthly-history-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--dp-space-sm) 0;
    border-bottom: 1px solid var(--dp-color-border);
    font-size: var(--dp-font-size-small);
}
.donor-portal-monthly-history-list li:last-child {
    border-bottom: 0;
}
.donor-portal-history-date {
    color: var(--dp-color-text-primary);
}
.donor-portal-history-amount {
    color: var(--dp-color-text-secondary);
    font-weight: 600;
}

/* ============================================================
   Setting view — 4-card grid
   ============================================================ */
.donor-portal-setting-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--dp-space-md);
}
.donor-portal-setting-card { /* uses .donor-portal-card */ }
.donor-portal-setting-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--dp-space-sm);
}
.donor-portal-setting-warning-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--dp-color-coral);
    display: inline-block;
}
.donor-portal-setting-card p {
    color: var(--dp-color-text-secondary);
    font-size: var(--dp-font-size-small);
    margin: 0 0 var(--dp-space-md) 0;
    min-height: 60px;
}

/* ============================================================
   Modal (used by Setting → User Profile edit)
   ============================================================ */
.donor-portal-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--dp-space-md);
}
.donor-portal-modal {
    /* !important on positioning so bb-theme's button/container rules can't
       break the close button's absolute placement. Same pattern used by the
       homepage donation popup (see givePopUp_ABTest for context). */
    background: var(--dp-color-card-bg) !important;
    border-radius: var(--dp-radius-md);
    box-shadow: var(--dp-shadow-modal);
    max-width: 560px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    padding: var(--dp-space-xl) !important;
    position: relative !important;
    display: block !important;
}
/*
 * Modal close button. We style every interaction state explicitly so the
 * BB theme's generic button rules can't take over after the first click —
 * that was the cause of the "X disappears after one click" bug.
 */
.donor-portal-modal-close,
.donor-portal-modal-close:hover,
.donor-portal-modal-close:focus,
.donor-portal-modal-close:focus-visible,
.donor-portal-modal-close:active {
    position: absolute !important;
    top: var(--dp-space-md) !important;
    right: var(--dp-space-md) !important;
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-color: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: var(--dp-color-text-secondary) !important;
    border-radius: var(--dp-radius-sm) !important;
    text-decoration: none !important;
    transform: none !important;
    transition: color 0.15s ease !important;
    z-index: 10;
    pointer-events: auto !important;
}

/* Hover + keyboard-focus darken just the glyph color — no background change */
.donor-portal-modal-close:hover,
.donor-portal-modal-close:focus-visible {
    color: #000 !important;
}

/* BB theme sometimes injects ::before/::after on buttons (ripples, icons, etc.).
   Disable both so they can't intercept clicks on the close button. */
.donor-portal-modal-close::before,
.donor-portal-modal-close::after {
    content: none !important;
    display: none !important;
}

.donor-portal-modal-title {
    margin: 0 0 var(--dp-space-lg) 0;
    font-size: var(--dp-font-size-h3);
    font-weight: 600;
}

/* ============================================================
   Notifications (toast)
   ============================================================ */
.donor-portal-notifications {
    position: fixed;
    top: var(--dp-space-lg);
    right: var(--dp-space-lg);
    z-index: 9999;
    max-width: 360px;
}
.donor-portal-notification {
    padding: 12px 16px;
    border-radius: var(--dp-radius-sm);
    margin-bottom: var(--dp-space-sm);
    font-weight: 500;
    color: var(--dp-color-text-on-dark);
    box-shadow: var(--dp-shadow-card-hover);
    font-size: var(--dp-font-size-small);
}
.donor-portal-notification-success { background: var(--dp-color-success); }
.donor-portal-notification-error   { background: var(--dp-color-coral); }

/* ============================================================
   Sign-out shortcode element (rendered by [donor_portal_signout])
   ============================================================ */
.donor-portal-signout-link {
    color: var(--dp-color-coral);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.donor-portal-signout-link:hover { text-decoration: underline; }

/* ============================================================
   Mock-mode banner
   ============================================================ */
.donor-portal-mock-hint {
    margin-top: var(--dp-space-md);
    padding: var(--dp-space-sm) var(--dp-space-md);
    background: #FFF8E0;
    border: 1px dashed var(--dp-color-warning);
    font-size: var(--dp-font-size-small);
    color: #5A4400;
    border-radius: var(--dp-radius-sm);
}

/* ============================================================
   Mobile responsive
   ============================================================ */
@media (max-width: 1024px) {
    .donor-portal-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }
    .donor-portal-quick-links-column {
        grid-column: span 2;
    }
    .donor-portal-setting-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .donor-portal-hero {
        height: 400px;
        background-image: url('../images/donor-portal-banner-mobile.jpg');
    }
    .donor-portal-content,
    .donor-portal-nav,
    .donor-portal-container {
        padding-left: var(--dp-space-md);
        padding-right: var(--dp-space-md);
    }
    .donor-portal-login-layout,
    .donor-portal-dashboard-grid,
    .donor-portal-history-grid,
    .donor-portal-manage-grid,
    .donor-portal-setting-grid {
        grid-template-columns: 1fr;
    }
    .donor-portal-quick-links-column {
        grid-column: auto;
    }
    .donor-portal-impact-stats {
        flex-wrap: wrap;
        gap: var(--dp-space-md);
    }
    .donor-portal-form-row {
        flex-direction: column;
        gap: 0;
    }
    .donor-portal-notifications {
        top: var(--dp-space-sm);
        right: var(--dp-space-sm);
        left: var(--dp-space-sm);
        max-width: none;
    }
    .donor-portal-donations-list li {
        grid-template-columns: 1fr auto;
        gap: var(--dp-space-sm);
    }
}

@media (max-width: 480px) {
    .donor-portal-hero {
        height: 160px;
    }
    .donor-portal-content {
        padding-top: var(--dp-space-md);
    }
    .donor-portal-monthly-actions {
        flex-direction: column;
    }
    .donor-portal-monthly-actions .donor-portal-btn {
        width: 100%;
    }
    .donor-portal-impact-stat-value {
        font-size: 24px;
    }
}