/**
 * WooPlus my-account dashboard — styles.
 *
 * Token-driven; falls back to safe defaults when WooPlus DS is not
 * loaded (so this still looks reasonable in plain WC themes).
 *
 * @package WooPlus
 * @since   2.20.1
 */

.wpu-ma-dashboard {
    --wpu-ma-bg:           var(--wooplus-bg, #f8fafc);
    --wpu-ma-card:         var(--wooplus-surface, #ffffff);
    --wpu-ma-text:         var(--wooplus-text, #0f172a);
    --wpu-ma-text-mute:    var(--wooplus-text-muted, #64748b);
    --wpu-ma-border:       var(--wooplus-border, #e2e8f0);
    --wpu-ma-radius:       var(--wooplus-radius-lg, 14px);
    --wpu-ma-radius-sm:    var(--wooplus-radius, 10px);
    --wpu-ma-brand:        var(--wooplus-brand-500, #157a41);
    --wpu-ma-brand-soft:   var(--wooplus-brand-50, rgba(21,122,65,.10));
    --wpu-ma-success:      var(--wooplus-success, #10b981);
    --wpu-ma-success-soft: var(--wooplus-success-light, rgba(16,185,129,.12));
    --wpu-ma-warning:      var(--wooplus-warning, #f59e0b);
    --wpu-ma-warning-soft: var(--wooplus-warning-light, rgba(245,158,11,.12));
    --wpu-ma-info:         var(--wooplus-info, #06b6d4);
    --wpu-ma-info-soft:    var(--wooplus-info-light, rgba(6,182,212,.12));
    --wpu-ma-shadow:       0 1px 2px 0 rgba(15,23,42,.04), 0 8px 24px -8px rgba(15,23,42,.10);

    color: var(--wpu-ma-text);
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}
.wpu-ma-dashboard *,
.wpu-ma-dashboard *::before,
.wpu-ma-dashboard *::after {
    box-sizing: border-box;
}

/* ===================================================================
   Welcome card — v2.24.1: elegant gradient hero
   =================================================================== */
.wpu-ma-welcome {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 26px 28px;
    margin-bottom: 20px;
    background:
        linear-gradient(135deg, rgba(99, 102, 241, .08) 0%, rgba(79, 70, 229, .04) 60%, transparent 100%),
        var(--wpu-ma-card);
    border: 1px solid var(--wpu-ma-border);
    border-radius: var(--wpu-ma-radius);
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, .04), 0 4px 12px -4px rgba(79, 70, 229, .06);
    overflow: hidden;
}
/* Subtle gradient strip across the top — visual signal that this is the hero. */
.wpu-ma-welcome::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(135deg, #157a41 0%, #157a41 50%, #3730a3 100%);
}
.wpu-ma-welcome__avatar img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--wpu-ma-brand), 0 4px 12px -2px rgba(79, 70, 229, .25);
}
.wpu-ma-welcome__title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--wpu-ma-text);
    letter-spacing: -.01em;
}
.wpu-ma-welcome__subtitle {
    font-size: 14px;
    color: var(--wpu-ma-text-mute);
    margin: 0;
    font-weight: 500;
}

/* ===================================================================
   KPI grid
   =================================================================== */
.wpu-ma-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.wpu-ma-kpi {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: var(--wpu-ma-card);
    border: 1px solid var(--wpu-ma-border);
    border-radius: var(--wpu-ma-radius);
    box-shadow: var(--wpu-ma-shadow);
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
}
a.wpu-ma-kpi:hover {
    transform: translateY(-2px);
    border-color: var(--wpu-ma-brand);
    box-shadow: 0 8px 24px -6px rgba(15,23,42,.14);
}
.wpu-ma-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 18px;
    margin-bottom: 4px;
}
.wpu-ma-kpi__icon--brand   { background: var(--wpu-ma-brand-soft);   color: var(--wpu-ma-brand);   }
.wpu-ma-kpi__icon--success { background: var(--wpu-ma-success-soft); color: var(--wpu-ma-success); }
.wpu-ma-kpi__icon--warning { background: var(--wpu-ma-warning-soft); color: var(--wpu-ma-warning); }
.wpu-ma-kpi__icon--info    { background: var(--wpu-ma-info-soft);    color: var(--wpu-ma-info);    }

.wpu-ma-kpi__value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--wpu-ma-text);
}
.wpu-ma-kpi__value--money { font-size: 18px; }
.wpu-ma-kpi__value--money .woocommerce-Price-amount { font-size: 18px; }

.wpu-ma-kpi__label {
    font-size: 13px;
    color: var(--wpu-ma-text-mute);
    font-weight: 500;
}

/* ===================================================================
   Section block (recent orders)
   =================================================================== */
.wpu-ma-section {
    background: var(--wpu-ma-card);
    border: 1px solid var(--wpu-ma-border);
    border-radius: var(--wpu-ma-radius);
    box-shadow: var(--wpu-ma-shadow);
    padding: 20px 22px;
    margin-bottom: 20px;
}
.wpu-ma-section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--wpu-ma-border);
}
.wpu-ma-section__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--wpu-ma-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.wpu-ma-section__title i { color: var(--wpu-ma-brand); }
.wpu-ma-section__link {
    font-size: 13px;
    color: var(--wpu-ma-brand);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity .15s ease;
}
.wpu-ma-section__link:hover { opacity: .8; }

/* Orders list */
.wpu-ma-orders {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wpu-ma-order + .wpu-ma-order { border-top: 1px solid var(--wpu-ma-border); }
.wpu-ma-order__link {
    display: grid;
    grid-template-columns: auto 1fr auto auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 0;
    text-decoration: none;
    color: inherit;
    transition: opacity .15s ease;
}
.wpu-ma-order__link:hover { opacity: .85; }
.wpu-ma-order__id {
    font-weight: 700;
    color: var(--wpu-ma-brand);
    font-size: 14px;
}
.wpu-ma-order__date {
    font-size: 13px;
    color: var(--wpu-ma-text-mute);
}
.wpu-ma-order__items {
    font-size: 13px;
    color: var(--wpu-ma-text-mute);
}
.wpu-ma-order__total {
    font-weight: 700;
    font-size: 14px;
    color: var(--wpu-ma-text);
}
.wpu-ma-order__total .woocommerce-Price-amount { color: var(--wpu-ma-text); }

/* Status pill — one rule per WC core status, with sane fallback */
.wpu-ma-order__status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--wpu-ma-brand-soft);
    color: var(--wpu-ma-brand);
    white-space: nowrap;
}
.wpu-ma-order__status--processing { background: var(--wpu-ma-info-soft);    color: var(--wpu-ma-info);    }
.wpu-ma-order__status--on-hold    { background: var(--wpu-ma-warning-soft); color: var(--wpu-ma-warning); }
.wpu-ma-order__status--pending    { background: var(--wpu-ma-warning-soft); color: var(--wpu-ma-warning); }
.wpu-ma-order__status--completed  { background: var(--wpu-ma-success-soft); color: var(--wpu-ma-success); }
.wpu-ma-order__status--cancelled,
.wpu-ma-order__status--failed,
.wpu-ma-order__status--refunded   { background: rgba(239,68,68,.10); color: #b91c1c; }

/* ===================================================================
   Empty state (no orders)
   =================================================================== */
.wpu-ma-empty {
    text-align: center;
    background: var(--wpu-ma-card);
    border: 1px dashed var(--wpu-ma-border);
    border-radius: var(--wpu-ma-radius);
    padding: 40px 24px;
    margin-bottom: 20px;
}
.wpu-ma-empty__icon {
    font-size: 40px;
    color: var(--wpu-ma-text-mute);
    margin-bottom: 8px;
}
.wpu-ma-empty__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--wpu-ma-text);
    margin-bottom: 6px;
}
.wpu-ma-empty__desc {
    font-size: 14px;
    color: var(--wpu-ma-text-mute);
    margin-bottom: 18px;
}
.wpu-ma-empty__cta {
    display: inline-block;
    background: linear-gradient(135deg, var(--wpu-ma-brand) 0%, var(--wooplus-brand-700, #157a41) 100%);
    color: #fff;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: var(--wpu-ma-radius-sm);
    font-weight: 700;
    font-size: 14px;
    transition: transform .12s ease, box-shadow .18s ease;
    box-shadow: 0 4px 12px -2px var(--wpu-ma-brand-soft);
}
.wpu-ma-empty__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px var(--wpu-ma-brand-soft);
    color: #fff;
}

/* ===================================================================
   CTA row
   =================================================================== */
.wpu-ma-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.wpu-ma-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--wpu-ma-card);
    border: 1px solid var(--wpu-ma-border);
    color: var(--wpu-ma-text);
    text-decoration: none;
    padding: 10px 16px;
    border-radius: var(--wpu-ma-radius-sm);
    font-size: 13px;
    font-weight: 600;
    transition: border-color .18s ease, transform .12s ease, box-shadow .18s ease, color .15s ease;
}
.wpu-ma-cta i { font-size: 16px; }
.wpu-ma-cta:hover {
    border-color: var(--wpu-ma-brand);
    color: var(--wpu-ma-brand);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(15,23,42,.10);
}
.wpu-ma-cta--primary {
    background: linear-gradient(135deg, var(--wpu-ma-brand) 0%, var(--wooplus-brand-700, #157a41) 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px -2px var(--wpu-ma-brand-soft);
}
.wpu-ma-cta--primary:hover {
    color: #fff;
    box-shadow: 0 8px 18px -4px var(--wpu-ma-brand-soft);
}

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 700px) {
    .wpu-ma-welcome { flex-direction: column; text-align: center; }
    .wpu-ma-order__link {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
    }
    .wpu-ma-order__date,
    .wpu-ma-order__items { font-size: 12px; }
    .wpu-ma-cta-row { flex-direction: column; }
    .wpu-ma-cta { justify-content: center; }
}

/* ===================================================================
   Dark mode
   =================================================================== */
[data-wooplus-theme="dark"] .wpu-ma-dashboard,
.wpu-ma-dashboard[data-theme="dark"] {
    --wpu-ma-card:   var(--wooplus-surface, #1e293b);
    --wpu-ma-text:   var(--wooplus-text, #f1f5f9);
    --wpu-ma-border: var(--wooplus-border, #334155);
    --wpu-ma-shadow: 0 1px 2px 0 rgba(0,0,0,.4), 0 8px 24px -8px rgba(0,0,0,.5);
}

/* ===================================================================
   v2.24.0 — Stats cards (4-card row above welcome)
   ===================================================================
   Pattern: horizontal flex row that wraps on small screens. Each card
   is a self-contained unit (icon + value + label) with Modern
   Minimalist + Tech Innovation theme accents.

   Color tokens map to specific stat types so each card has a
   recognisable identity at a glance:
     - member:   indigo gradient (membership)
     - orders:   emerald (purchases)
     - tickets:  amber (support)
     - comments: sky-blue (engagement)
   =================================================================== */
.wpu-ma-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wooplus-space-3, 12px);
    margin-bottom: var(--wooplus-space-5, 20px);
}

.wpu-ma-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--wpu-ma-card, #fff);
    border: 1px solid var(--wpu-ma-border, #eef0f5);
    border-radius: 14px;
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, .04);
    transition: transform .2s ease, box-shadow .2s ease;
    min-width: 0;
}

.wpu-ma-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px -4px rgba(79, 70, 229, .12), 0 2px 4px -2px rgba(15, 23, 42, .04);
}

.wpu-ma-stat__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    flex-shrink: 0;
    font-size: 18px;
    color: #fff;
}

.wpu-ma-stat__icon--member  { background: linear-gradient(135deg, #157a41 0%, #157a41 100%); }
.wpu-ma-stat__icon--orders  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.wpu-ma-stat__icon--tickets { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.wpu-ma-stat__icon--comments { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); }

.wpu-ma-stat__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.wpu-ma-stat__value {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--wpu-ma-text, #0f172a);
    letter-spacing: -.01em;
}

.wpu-ma-stat__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--wooplus-text-mute, #64748b);
    margin-top: 4px;
}

@media (max-width: 992px) {
    .wpu-ma-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .wpu-ma-stats {
        grid-template-columns: 1fr;
    }
    .wpu-ma-stat {
        padding: 14px 16px;
    }
    .wpu-ma-stat__icon {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .wpu-ma-stat__value {
        font-size: 19px;
    }
}

/* ===================================================================
 * v2.24.3 — Two-column row + Profile completion + Quick actions
 * Modern widget cards with elegant hover states.
 * =================================================================== */
.wpu-ma-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 22px;
}
@media (max-width: 768px) {
    .wpu-ma-row-2col { grid-template-columns: 1fr; gap: 14px; }
}

/* Generic widget card chrome — reusable */
.wpu-ma-card {
    background: var(--wpu-ma-card);
    border: 1px solid var(--wpu-ma-border);
    border-radius: var(--wpu-ma-radius);
    box-shadow: 0 1px 3px 0 rgba(15, 23, 42, .04), 0 4px 12px -4px rgba(15, 23, 42, .03);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
.wpu-ma-card:hover {
    box-shadow: 0 4px 16px -4px rgba(79, 70, 229, .12), 0 8px 24px -8px rgba(15, 23, 42, .08);
}
.wpu-ma-card__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--wpu-ma-border);
    background: linear-gradient(180deg, rgba(99, 102, 241, .025), transparent);
}
.wpu-ma-card__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--wpu-ma-text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.wpu-ma-card__title i {
    color: var(--wpu-ma-brand);
    font-size: 18px;
}

/* ----- Profile completion ring ----- */
.wpu-ma-profile__body {
    padding: 22px 20px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: center;
}
@media (max-width: 480px) {
    .wpu-ma-profile__body { grid-template-columns: 1fr; text-align: center; gap: 16px; }
}
/* Conic-gradient ring — modern CSS, no SVG required.
 * Uses --p (0..100) to drive the fill stop position. */
.wpu-ma-profile__ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background:
        conic-gradient(
            var(--wpu-ma-brand) calc(var(--p, 0) * 1%),
            rgba(99, 102, 241, .12) 0
        );
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 16px -4px rgba(79, 70, 229, .25);
    margin: 0 auto;
}
.wpu-ma-profile__ring::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: var(--wpu-ma-card);
}
.wpu-ma-profile__ring-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1.1;
}
.wpu-ma-profile__percent {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--wpu-ma-text);
    letter-spacing: -.02em;
}
.wpu-ma-profile__ring-label {
    display: block;
    font-size: 12px;
    color: var(--wpu-ma-text-mute);
    margin-top: 2px;
}
.wpu-ma-profile__hint .wpu-ma-profile__msg {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--wpu-ma-text-mute);
    font-weight: 500;
}
.wpu-ma-profile__msg--ok {
    color: var(--wpu-ma-success, #22c55e) !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wpu-ma-profile__missing {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
@media (max-width: 480px) {
    .wpu-ma-profile__missing { grid-template-columns: 1fr; }
}
.wpu-ma-profile__missing li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--wpu-ma-text);
}
.wpu-ma-profile__missing li i {
    color: var(--wpu-ma-text-mute);
    font-size: 8px;
}
.wpu-ma-profile__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #157a41 0%, #157a41 100%);
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 2px 8px -2px rgba(79, 70, 229, .4);
}
.wpu-ma-profile__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -2px rgba(79, 70, 229, .55);
    color: #fff !important;
}

/* ----- Quick actions grid ----- */
.wpu-ma-quick__grid {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.wpu-ma-quick__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, .04), rgba(99, 102, 241, .01));
    border: 1px solid var(--wpu-ma-border);
    border-radius: 12px;
    color: var(--wpu-ma-text) !important;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
    text-align: center;
}
.wpu-ma-quick__item:hover {
    transform: translateY(-2px);
    border-color: var(--wpu-ma-brand);
    background: linear-gradient(135deg, rgba(99, 102, 241, .08), rgba(99, 102, 241, .03));
    box-shadow: 0 6px 18px -6px rgba(79, 70, 229, .25);
}
.wpu-ma-quick__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #157a41 0%, #157a41 100%);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 4px 10px -2px rgba(79, 70, 229, .3);
}
.wpu-ma-quick__item--orders   .wpu-ma-quick__icon { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); box-shadow: 0 4px 10px -2px rgba(22, 163, 74, .3); }
.wpu-ma-quick__item--address  .wpu-ma-quick__icon { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 4px 10px -2px rgba(217, 119, 6, .3); }
.wpu-ma-quick__item--support  .wpu-ma-quick__icon { background: linear-gradient(135deg, #ec4899 0%, #db2777 100%); box-shadow: 0 4px 10px -2px rgba(219, 39, 119, .3); }
.wpu-ma-quick__item--account  .wpu-ma-quick__icon { background: linear-gradient(135deg, #64748b 0%, #475569 100%); box-shadow: 0 4px 10px -2px rgba(71, 85, 105, .3); }
.wpu-ma-quick__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--wpu-ma-text);
}

/* ====================================================================
 * v2.24.4 — Brand-palette wiring (luxury polish)
 *
 * Merchant feedback after v2.24.3:
 * "صفحه حساب کاربری باید یک صفحه لاکچری با تطبیق با پالت رنگی انتخابی
 *  مدیر طراحی کنید. آبرومند باشد." — make the my-account page luxury
 *  and follow the merchant's chosen brand palette.
 *
 * The dashboard already consumed `var(--wooplus-brand-500)` via
 * `--wpu-ma-brand`, but the welcome card gradient + a few accents used
 * fixed indigo rgba values (`rgba(21,122,65,.08)`). On a merchant who
 * picked a teal or rose brand color, the welcome strip didn't match.
 *
 * The runtime palette generator in theme.js sets every
 * `--wooplus-brand-{50..900}` from the chosen hex on every admin AND
 * frontend page load (`<style id="wooplus-brand-override">`), so we
 * can safely consume the full ramp.
 *
 * This block re-skins the welcome / profile / quick-actions row with
 * brand-derived values. We keep it at the end so it overrides the
 * v2.24.0 hardcoded rules without touching the original CSS.
 * ==================================================================== */

/* Welcome hero gradient — pulled from brand-500/600/700 ramp. */
.wpu-ma-dashboard .wpu-ma-welcome {
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--wooplus-brand-500, #157a41) 10%, transparent) 0%,
            color-mix(in srgb, var(--wooplus-brand-600, #3311DB) 4%, transparent) 60%,
            transparent 100%),
        var(--wpu-ma-card);
    border-color: color-mix(in srgb, var(--wooplus-brand-500, #157a41) 18%, var(--wpu-ma-border));
    box-shadow:
        0 1px 3px 0 rgba(15, 23, 42, .04),
        0 8px 24px -10px color-mix(in srgb, var(--wooplus-brand-500, #157a41) 35%, transparent);
}
/* Top accent strip on the welcome card. */
.wpu-ma-dashboard .wpu-ma-welcome::before {
    background: linear-gradient(90deg,
        var(--wooplus-brand-500, #157a41) 0%,
        var(--wooplus-brand-300, #8171FC) 100%);
}

/* Profile completion ring colour. */
.wpu-ma-dashboard .wpu-ma-profile__ring {
    background: conic-gradient(
        var(--wooplus-brand-500, #157a41) calc(var(--p, 0) * 1%),
        var(--wpu-ma-border) 0
    );
}
.wpu-ma-dashboard .wpu-ma-profile__percent {
    color: var(--wooplus-brand-600, #3311DB);
}

/* Quick-actions: keep distinct hues for orders/address/support but
 * route the primary tile (shop) to brand. */
.wpu-ma-dashboard .wpu-ma-quick__item--shop .wpu-ma-quick__icon {
    background: linear-gradient(135deg,
        var(--wooplus-brand-500, #157a41) 0%,
        var(--wooplus-brand-700, #2111A5) 100%);
    box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--wooplus-brand-500, #157a41) 35%, transparent);
}

/* CTA buttons + badges follow the brand. */
.wpu-ma-dashboard .wpu-ma-cta,
.wpu-ma-dashboard a.wpu-ma-cta,
.wpu-ma-dashboard button.wpu-ma-cta {
    background: linear-gradient(135deg,
        var(--wooplus-brand-500, #157a41) 0%,
        var(--wooplus-brand-600, #3311DB) 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--wooplus-brand-500, #157a41) 40%, transparent);
}
.wpu-ma-dashboard .wpu-ma-cta:hover {
    background: linear-gradient(135deg,
        var(--wooplus-brand-600, #3311DB) 0%,
        var(--wooplus-brand-700, #2111A5) 100%);
}

/* Card hover lift — brand-tinted shadow. */
.wpu-ma-dashboard .wpu-ma-card:hover,
.wpu-ma-dashboard .wpu-ma-stat:hover {
    box-shadow:
        0 1px 3px 0 rgba(15, 23, 42, .04),
        0 12px 24px -8px color-mix(in srgb, var(--wooplus-brand-500, #157a41) 25%, transparent);
}

/* Orders / status pills — brand-tinted "completed" state. */
.wpu-ma-dashboard .wpu-ma-status--completed,
.wpu-ma-dashboard .wpu-ma-status--processing {
    background: color-mix(in srgb, var(--wooplus-brand-500, #157a41) 10%, transparent);
    color: var(--wooplus-brand-700, #2111A5);
    border-color: color-mix(in srgb, var(--wooplus-brand-500, #157a41) 25%, transparent);
}

/* Stat card icons keep distinct semantic hues but get a brand-tinted
 * default for the membership/days icon (which was previously indigo
 * hardcoded). */
.wpu-ma-dashboard .wpu-ma-stat__icon--member {
    background: color-mix(in srgb, var(--wooplus-brand-500, #157a41) 14%, transparent);
    color: var(--wooplus-brand-600, #3311DB);
}

/* color-mix() fallback for browsers that don't support it (Safari ≤ 16.4,
 * Firefox ≤ 112). They get plain --wooplus-brand-* without alpha-mix —
 * acceptable degradation, the layout never breaks. */
@supports not (color: color-mix(in srgb, red, blue)) {
    .wpu-ma-dashboard .wpu-ma-welcome {
        background: linear-gradient(135deg,
            var(--wooplus-brand-50, #E9E3FF) 0%,
            transparent 100%),
            var(--wpu-ma-card);
    }
    .wpu-ma-dashboard .wpu-ma-cta {
        box-shadow: 0 4px 12px -3px var(--wooplus-brand-300, #8171FC);
    }
}