/* =====================================================================
   Meshy AI 3D — WooCommerce My Account
   Modern premium dashboard skin (2026).
   - Matches admin design language: indigo→violet→pink mesh gradient
   - Animated hero with floating orbs, glass cards, soft layered shadows
   - Robust against Elementor / Astra / Hello / Storefront wrappers
   - Scoped to .woocommerce-account so nothing leaks elsewhere
   - RTL + reduced-motion + print friendly
   ===================================================================== */

/* ========== 1. DESIGN TOKENS ========== */
.woocommerce-account {    /* Brand — synced with admin (indigo → violet → pink) */
    --ma-brand-50:  #eef1ff;
    --ma-brand-100: #e0e7ff;
    --ma-brand-200: #c7d2fe;
    --ma-brand-300: #a5b4fc;
    --ma-brand-400: #818cf8;
    --ma-brand-500: #6366f1;
    --ma-brand-600: #4f46e5;
    --ma-brand-700: #4338ca;
    --ma-brand-800: #3730a3;
    --ma-brand-900: #312e81;
    --ma-accent-500: #a855f7;
    --ma-accent-600: #9333ea;
    --ma-pink-500:   #ec4899;
    --ma-cyan-500:   #06b6d4;

    --ma-accent:     var(--ma-brand-600);
    --ma-accent-2:   var(--ma-brand-700);
    --ma-accent-3:   var(--ma-brand-50);
    --ma-accent-fg:  #ffffff;
    --ma-ring:       rgba(99, 102, 241, .22);

    --ma-grad:       linear-gradient(135deg, var(--ma-brand-600) 0%, var(--ma-accent-600) 60%, var(--ma-pink-500) 100%);
    --ma-grad-soft:  linear-gradient(135deg, #eef1ff 0%, #fdf4ff 100%);

    /* Surfaces */
    --ma-bg:         #f8fafc;
    --ma-bg-2:       #ffffff;
    --ma-surface:    #ffffff;
    --ma-surface-2:  #fafbff;
    --ma-surface-3:  #f1f5f9;

    /* Text */
    --ma-fg:    #0f172a;
    --ma-fg-2:  #1e293b;
    --ma-fg-3:  #475569;
    --ma-fg-4:  #94a3b8;

    /* Borders */
    --ma-border:    #e2e8f0;
    --ma-border-2:  #cbd5e1;
    --ma-border-3:  #94a3b8;

    /* Status */
    --ma-success:    #047857;
    --ma-success-bg: #d1fae5;
    --ma-warning:    #b45309;
    --ma-warning-bg: #fef3c7;
    --ma-danger:     #b91c1c;
    --ma-danger-bg:  #fee2e2;
    --ma-info:       #1d4ed8;
    --ma-info-bg:    #dbeafe;

    /* Geometry & motion */
    --ma-r-sm:   8px;
    --ma-r:      12px;
    --ma-r-lg:   16px;
    --ma-r-xl:   22px;
    --ma-r-pill: 999px;

    --ma-sh-xs:   0 1px 2px rgba(15, 23, 42, .04);
    --ma-sh-sm:   0 1px 3px rgba(15, 23, 42, .05), 0 1px 2px rgba(15, 23, 42, .04);
    --ma-sh-md:   0 6px 16px -4px rgba(15, 23, 42, .08), 0 2px 6px -2px rgba(15, 23, 42, .04);
    --ma-sh-lg:   0 20px 40px -12px rgba(15, 23, 42, .12), 0 8px 16px -6px rgba(15, 23, 42, .06);
    --ma-sh-brand:      0 12px 30px -8px rgba(99, 102, 241, .45);
    --ma-sh-brand-soft: 0 8px 24px -8px rgba(99, 102, 241, .25);

    --ma-ease:        cubic-bezier(.22, 1, .36, 1);
    --ma-ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Type */
    --ma-font: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "Noto Sans Hebrew", "Heebo", "Rubik", sans-serif;
    --ma-font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, SFMono-Regular,
                    Menlo, Consolas, monospace;

    background: var(--ma-bg);
    color: var(--ma-fg);
    font-family: var(--ma-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ========== 2. LAYOUT SHELL — float-based, bullet-proof ========== */

/* Force every Elementor / WP wrapper that contains the WC account to be a
   plain full-width block so nothing constrains the inner layout. */
.woocommerce-account .elementor:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .elementor-element:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .e-con:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .e-con-inner:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .e-con-boxed:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .e-flex:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .e-grid:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .elementor-widget:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .elementor-widget-shortcode:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .elementor-widget-container:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .elementor-shortcode:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .entry-content:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .wp-block-group:has(.woocommerce-MyAccount-navigation),
.woocommerce-account .wp-block-post-content:has(.woocommerce-MyAccount-navigation) {
    display: block !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

/* The WC wrapper: classic float layout — works no matter what parent is */
.woocommerce-account .woocommerce {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: clamp(24px, 4vw, 48px) 0 clamp(48px, 6vw, 80px) !important;
    padding: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}
.woocommerce-account .woocommerce::after {
    content: '';
    display: block;
    clear: both;
}

/* LTR: nav left, content margin-left */
.woocommerce-account:dir(ltr) .woocommerce-MyAccount-navigation {
    float: left !important;
    clear: left !important;
    width: 260px !important;
    margin: 0 !important;
}
.woocommerce-account:dir(ltr) .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
    margin: 0 0 0 284px !important;
    min-width: 0 !important;
}

/* RTL: nav right, content margin-right (default for this skin) */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account:dir(rtl) .woocommerce-MyAccount-navigation {
    float: right !important;
    clear: right !important;
    width: 260px !important;
    margin: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account:dir(rtl) .woocommerce-MyAccount-content {
    float: none !important;
    width: auto !important;
    margin: 0 284px 0 0 !important;
    min-width: 0 !important;
}

/* ========== 3. SIDEBAR NAVIGATION ========== */
.woocommerce-account .woocommerce-MyAccount-navigation {
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-r-lg);
    padding: 12px;
    box-shadow: var(--ma-sh-sm);
    position: sticky;
    top: 24px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 10px;
    color: var(--ma-fg-2);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.005em;
    position: relative;
    transition:
        background .18s var(--ma-ease),
        color .18s var(--ma-ease),
        transform .18s var(--ma-ease);
}

/* Icons — mask-image SVG, currentColor */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
    content: '';
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: contain;
            mask-size: contain;
    opacity: .75;
    transition: opacity .18s var(--ma-ease), transform .25s var(--ma-ease);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--ma-brand-50);
    color: var(--ma-brand-700);
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover::before { opacity: 1; transform: scale(1.08); }

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--ma-grad);
    color: #fff;
    font-weight: 600;
    box-shadow: var(--ma-sh-brand-soft);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before { opacity: 1; }

.woocommerce-account .woocommerce-MyAccount-navigation li a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ma-ring);
}

/* Per-item icons */
/* Generic fallback so custom endpoints (Points / YazCoins / My Models) never
   render as a bare solid square when they have no specific icon below. */
.woocommerce-account .woocommerce-MyAccount-navigation li a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3"/></svg>');
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--dashboard a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="9" rx="1.5"/><rect x="14" y="3" width="7" height="5" rx="1.5"/><rect x="14" y="12" width="7" height="9" rx="1.5"/><rect x="3" y="16" width="7" height="5" rx="1.5"/></svg>');
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>');
}
.woocommerce-account [class*="navigation-link--subscription"] a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-3-6.7"/><path d="M21 4v5h-5"/></svg>');
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>');
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-address a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0z"/><circle cx="12" cy="10" r="3"/></svg>');
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--payment-methods a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/><path d="M6 15h4"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20"/><path d="M6 15h4"/></svg>');
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--edit-account a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>');
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/></svg>');
}

/* Points — star/award */
.woocommerce-account [class*="navigation-link--points"] a::before,
.woocommerce-account [class*="navigation-link--mycred"] a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>');
}
/* YazCoins — coin */
.woocommerce-account .woocommerce-MyAccount-navigation-link--yazcoins a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10"/><path d="M9.5 9.5a2.5 2.5 0 0 1 2.5-1.5c1.4 0 2.5.9 2.5 2s-1.1 2-2.5 2-2.5.9-2.5 2 1.1 2 2.5 2a2.5 2.5 0 0 0 2.5-1.5"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10"/><path d="M9.5 9.5a2.5 2.5 0 0 1 2.5-1.5c1.4 0 2.5.9 2.5 2s-1.1 2-2.5 2-2.5.9-2.5 2 1.1 2 2.5 2a2.5 2.5 0 0 0 2.5-1.5"/></svg>');
}
/* My Models — 3D cube */
.woocommerce-account .woocommerce-MyAccount-navigation-link--my-models a::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>');
}

/* Logout — separated, danger-tinted on hover */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--ma-border);
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--ma-fg-3); }
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    color: var(--ma-danger);
    background: var(--ma-danger-bg);
    box-shadow: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout.is-active a {
    background: var(--ma-danger-bg);
    color: var(--ma-danger);
    box-shadow: none;
}

/* ---------- 3b. GROUPED NAVIGATION (AI section vs. account section) ---------- */
.woocommerce-account .meshy-acc-nav--grouped .meshy-nav-group + .meshy-nav-group {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ma-border);
}

.woocommerce-account .meshy-nav-group__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 14px 8px;
}
.woocommerce-account .meshy-nav-group__title {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ma-fg-3);
}
.woocommerce-account .meshy-nav-group__hint {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ma-fg-3);
    opacity: .75;
}

/* The AI section gets a brand-tinted panel so the split reads at a glance. */
.woocommerce-account .meshy-nav-group--ai {
    background: var(--ma-brand-50);
    border: 1px solid var(--ma-brand-200);
    border-radius: 12px;
    padding: 8px;
}
.woocommerce-account .meshy-nav-group--ai .meshy-nav-group__head {
    padding: 2px 8px 8px;
}
.woocommerce-account .meshy-nav-group--ai .meshy-nav-group__title {
    color: var(--ma-brand-700);
}
.woocommerce-account .meshy-nav-group--ai .meshy-nav-group__title::before {
    content: '✦';
    margin-inline-end: 6px;
}
.woocommerce-account .meshy-nav-group--ai li a:hover {
    background: #fff;
}
.woocommerce-account .meshy-acc-nav--grouped .meshy-nav-group--ai + .meshy-nav-group {
    border-top: 0;
    margin-top: 12px;
    padding-top: 0;
}

/* ---------- 3c. EMPTY STATES ---------- */
.woocommerce-account .meshy-acc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 48px 24px;
    border: 1px dashed var(--ma-brand-200);
    border-radius: var(--ma-r-lg);
    background: linear-gradient(180deg, var(--ma-brand-50) 0%, var(--ma-surface) 100%);
}
.woocommerce-account .meshy-acc-empty__icon {
    font-size: 40px;
    line-height: 1;
}
.woocommerce-account .meshy-acc-empty__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--ma-fg);
}
.woocommerce-account .meshy-acc-empty__text {
    margin: 0;
    max-width: 46ch;
    font-size: 14px;
    line-height: 1.7;
    color: var(--ma-fg-2);
}
.woocommerce-account .meshy-acc-empty__cta {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--ma-r);
    background: var(--ma-grad);
    color: #fff !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    box-shadow: var(--ma-sh-brand-soft);
    transition: transform .18s var(--ma-ease), box-shadow .18s var(--ma-ease);
}
.woocommerce-account .meshy-acc-empty__cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--ma-sh-md);
}

/* ========== 4. CONTENT CARD — animated mesh hero accent ========== */
.woocommerce-account .woocommerce-MyAccount-content {
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-r-xl);
    padding: clamp(28px, 3vw, 44px);
    box-shadow: var(--ma-sh-sm);
    min-height: 540px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Mesh gradient sliver + floating orb */
.woocommerce-account .woocommerce-MyAccount-content::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background:
        linear-gradient(90deg,
            var(--ma-brand-600) 0%,
            var(--ma-accent-600) 50%,
            var(--ma-pink-500) 100%);
    background-size: 200% 100%;
    animation: ma-shimmer 8s var(--ma-ease) infinite;
}

.woocommerce-account .woocommerce-MyAccount-content::after {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, .18) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
    animation: ma-float 14s var(--ma-ease) infinite;
}

@keyframes ma-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

@keyframes ma-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%      { transform: translate(-30px, 20px) scale(1.06); }
    66%      { transform: translate(25px, -15px) scale(.95); }
}

.woocommerce-account .entry-title,
.woocommerce-account h1.entry-title,
.woocommerce-account .page-title {
    font-size: clamp(1.625rem, 2.4vw, 2rem);
    font-weight: 700;
    color: var(--ma-fg);
    letter-spacing: -0.025em;
    margin: 0 0 10px;
    line-height: 1.15;
}

.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content > h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ma-fg);
    letter-spacing: -0.015em;
    margin: 30px 0 14px;
    position: relative;
    padding-left: 14px;
}
.woocommerce-account.rtl .woocommerce-MyAccount-content > h2,
.woocommerce-account.rtl .woocommerce-MyAccount-content > h3 {
    padding-left: 0;
    padding-right: 14px;
}
.woocommerce-account .woocommerce-MyAccount-content > h2::before,
.woocommerce-account .woocommerce-MyAccount-content > h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--ma-grad);
}
.woocommerce-account.rtl .woocommerce-MyAccount-content > h2::before,
.woocommerce-account.rtl .woocommerce-MyAccount-content > h3::before {
    left: auto;
    right: 0;
}
.woocommerce-account .woocommerce-MyAccount-content > h2:first-child,
.woocommerce-account .woocommerce-MyAccount-content > h3:first-child { margin-top: 0; }

.woocommerce-account .woocommerce-MyAccount-content > p {
    color: var(--ma-fg-3);
    line-height: 1.7;
    font-size: 14.5px;
    margin: 0 0 16px;
}
.woocommerce-account .woocommerce-MyAccount-content > p strong { color: var(--ma-fg); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-content > p a {
    color: var(--ma-accent);
    text-decoration: none;
    font-weight: 600;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .3s var(--ma-ease), color .15s var(--ma-ease);
}
.woocommerce-account .woocommerce-MyAccount-content > p a:hover {
    background-size: 100% 1.5px;
    color: var(--ma-accent-2);
}

/* ========== 5. FORMS ========== */
.woocommerce-account .woocommerce form,
.woocommerce-account .woocommerce-MyAccount-content form { margin-top: 8px; }

.woocommerce-account .woocommerce form .form-row,
.woocommerce-account .woocommerce-MyAccount-content form .form-row {
    margin: 0 0 18px;
    padding: 0;
}

.woocommerce-account .woocommerce form label,
.woocommerce-account .woocommerce-MyAccount-content form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ma-fg-2);
    margin-bottom: 7px;
    letter-spacing: -0.005em;
}
.woocommerce-account .woocommerce form .required,
.woocommerce-account .woocommerce-MyAccount-content form .required {
    color: var(--ma-accent);
    text-decoration: none;
    font-weight: 600;
}

.woocommerce-account .woocommerce form .input-text,
.woocommerce-account .woocommerce-MyAccount-content form .input-text,
.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="number"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="search"],
.woocommerce-account .woocommerce-MyAccount-content form input[type="url"],
.woocommerce-account .woocommerce-MyAccount-content form select,
.woocommerce-account .woocommerce-MyAccount-content form textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--ma-surface);
    border: 1.5px solid var(--ma-border);
    border-radius: var(--ma-r);
    color: var(--ma-fg);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: var(--ma-sh-xs);
    transition:
        border-color .15s var(--ma-ease),
        box-shadow .2s var(--ma-ease),
        background .15s var(--ma-ease);
}

.woocommerce-account .woocommerce-MyAccount-content form input::placeholder,
.woocommerce-account .woocommerce-MyAccount-content form textarea::placeholder {
    color: var(--ma-fg-4);
}

.woocommerce-account .woocommerce-MyAccount-content form input:hover:not(:focus),
.woocommerce-account .woocommerce-MyAccount-content form select:hover:not(:focus),
.woocommerce-account .woocommerce-MyAccount-content form textarea:hover:not(:focus) {
    border-color: var(--ma-border-2);
}
.woocommerce-account .woocommerce-MyAccount-content form input:focus,
.woocommerce-account .woocommerce-MyAccount-content form select:focus,
.woocommerce-account .woocommerce-MyAccount-content form textarea:focus {
    outline: none;
    border-color: var(--ma-brand-500);
    box-shadow: 0 0 0 4px var(--ma-ring);
    background: var(--ma-bg-2);
}

.woocommerce-account .woocommerce-MyAccount-content form .description,
.woocommerce-account .woocommerce-MyAccount-content form em {
    display: block;
    font-size: 12.5px;
    color: var(--ma-fg-3);
    font-style: normal;
    margin-top: 6px;
    line-height: 1.55;
}

/* Two-column rows */
.woocommerce-account .woocommerce form .form-row-first,
.woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
.woocommerce-account .woocommerce form .form-row-last,
.woocommerce-account .woocommerce-MyAccount-content form .form-row-last {
    width: calc(50% - 8px);
    float: left;
}
.woocommerce-account .woocommerce form .form-row-last,
.woocommerce-account .woocommerce-MyAccount-content form .form-row-last { float: right; }
.woocommerce-account .woocommerce form .form-row-wide,
.woocommerce-account .woocommerce-MyAccount-content form .form-row-wide { clear: both; width: 100%; }
.woocommerce-account .woocommerce form::after,
.woocommerce-account .woocommerce-MyAccount-content form::after,
.woocommerce-account .woocommerce-MyAccount-content form fieldset::after { content: ''; display: block; clear: both; }

/* Checkboxes */
.woocommerce-account .woocommerce-MyAccount-content form input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--ma-border-2);
    background: #fff;
    vertical-align: -3px;
    margin: 0 8px 0 0;
    cursor: pointer;
    transition: border-color .15s var(--ma-ease), background .15s var(--ma-ease), box-shadow .15s var(--ma-ease);
    position: relative;
    flex: 0 0 auto;
}
.woocommerce-account .woocommerce-MyAccount-content form input[type="checkbox"]:hover { border-color: var(--ma-brand-400); }
.woocommerce-account .woocommerce-MyAccount-content form input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ma-ring);
}
.woocommerce-account .woocommerce-MyAccount-content form input[type="checkbox"]:checked {
    background: var(--ma-accent);
    border-color: var(--ma-accent);
}
.woocommerce-account .woocommerce-MyAccount-content form input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #fff;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>') center/12px no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L20 7"/></svg>') center/12px no-repeat;
}

/* Fieldsets */
.woocommerce-account .woocommerce-MyAccount-content form fieldset {
    margin: 30px 0 0;
    padding: 24px 26px 8px;
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-r-lg);
    background: var(--ma-surface-2);
    position: relative;
}
.woocommerce-account .woocommerce-MyAccount-content form fieldset legend {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ma-brand-700);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--ma-brand-50);
    border: 1px solid var(--ma-brand-100);
    border-radius: var(--ma-r-pill);
}

/* Password meter */
.woocommerce-account .woocommerce-password-strength {
    border-radius: var(--ma-r);
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    border: 1px solid var(--ma-border);
}
.woocommerce-account .woocommerce-password-strength.short   { background: var(--ma-danger-bg);  color: var(--ma-danger);  border-color: rgba(185,28,28,.2); }
.woocommerce-account .woocommerce-password-strength.bad     { background: var(--ma-warning-bg); color: var(--ma-warning); border-color: rgba(180,83,9,.2); }
.woocommerce-account .woocommerce-password-strength.good    { background: var(--ma-info-bg);    color: var(--ma-info);    border-color: rgba(29,78,216,.2); }
.woocommerce-account .woocommerce-password-strength.strong  { background: var(--ma-success-bg); color: var(--ma-success); border-color: rgba(4,120,87,.2); }
.woocommerce-account .woocommerce-password-hint { color: var(--ma-fg-3); font-size: 12px; margin-top: 6px; display: block; }

.woocommerce-account .woocommerce-MyAccount-content form .show-password-input { color: var(--ma-fg-3); cursor: pointer; }
.woocommerce-account .woocommerce-MyAccount-content form .show-password-input:hover { color: var(--ma-accent); }

/* ========== 6. BUTTONS ========== */
.woocommerce-account .woocommerce .button,
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--ma-r);
    border: 1.5px solid transparent;
    background: var(--ma-grad);
    background-size: 200% 200%;
    background-position: 0% 50%;
    color: var(--ma-accent-fg);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.005em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: var(--ma-sh-brand-soft), inset 0 1px 0 rgba(255, 255, 255, .15);
    transition:
        background-position .5s var(--ma-ease),
        transform .15s var(--ma-ease),
        box-shadow .25s var(--ma-ease);
}
.woocommerce-account .woocommerce .button:hover,
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
    color: #fff;
    background-position: 100% 50%;
    box-shadow: var(--ma-sh-brand), inset 0 1px 0 rgba(255, 255, 255, .15);
    transform: translateY(-1px);
}
.woocommerce-account .woocommerce .button:active,
.woocommerce-account .woocommerce-MyAccount-content .button:active,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:active,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:active {
    transform: translateY(0);
}
.woocommerce-account .woocommerce .button:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content .button:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:focus-visible,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:focus-visible {
    outline: 3px solid var(--ma-ring);
    outline-offset: 2px;
}

/* Secondary buttons in tables / addresses */
.woocommerce-account .woocommerce-MyAccount-content .button.view,
.woocommerce-account .woocommerce-MyAccount-content .button.edit,
.woocommerce-account .woocommerce-MyAccount-content .button.cancel,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button--view,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button--edit,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button--cancel {
    background: var(--ma-surface);
    color: var(--ma-brand-700);
    border: 1.5px solid var(--ma-brand-200);
    padding: 7px 14px;
    font-size: 13px;
    box-shadow: var(--ma-sh-xs);
}
.woocommerce-account .woocommerce-MyAccount-content .button.view:hover,
.woocommerce-account .woocommerce-MyAccount-content .button.edit:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button--view:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button--edit:hover {
    background: var(--ma-brand-50);
    color: var(--ma-brand-800);
    border-color: var(--ma-brand-400);
    box-shadow: var(--ma-sh-sm);
}
.woocommerce-account .woocommerce-MyAccount-content .button.cancel,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button--cancel {
    color: var(--ma-danger);
    border-color: #fecaca;
}
.woocommerce-account .woocommerce-MyAccount-content .button.cancel:hover,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-button--cancel:hover {
    background: var(--ma-danger-bg);
    border-color: #fca5a5;
}

/* ========== 7. NOTICES ========== */
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info,
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-notice {
    list-style: none;
    padding: 15px 18px 15px 50px;
    border-radius: var(--ma-r);
    border: 1px solid var(--ma-border);
    background: var(--ma-surface);
    color: var(--ma-fg);
    margin: 0 0 20px;
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: var(--ma-sh-xs);
}
.woocommerce-account.rtl .woocommerce-message,
.woocommerce-account.rtl .woocommerce-info,
.woocommerce-account.rtl .woocommerce-error,
.woocommerce-account.rtl .woocommerce-notice {
    padding: 15px 50px 15px 18px;
}
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-error::before,
.woocommerce-account .woocommerce-notice::before {
    content: '';
    position: absolute;
    inset-inline-start: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--ma-accent);
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg>') center/contain no-repeat;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v5"/><path d="M12 16h.01"/></svg>') center/contain no-repeat;
}
.woocommerce-account .woocommerce-info {
    background: var(--ma-info-bg);
    border-color: rgba(29,78,216,.22);
    color: var(--ma-info);
}
.woocommerce-account .woocommerce-info::before { background-color: var(--ma-info); }
.woocommerce-account .woocommerce-message {
    background: var(--ma-success-bg);
    border-color: rgba(4,120,87,.22);
    color: var(--ma-success);
}
.woocommerce-account .woocommerce-message::before {
    background-color: var(--ma-success);
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
            mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>');
}
.woocommerce-account .woocommerce-error {
    background: var(--ma-danger-bg);
    border-color: rgba(185,28,28,.22);
    color: var(--ma-danger);
}
.woocommerce-account .woocommerce-error::before { background-color: var(--ma-danger); }

.woocommerce-account .woocommerce-message .button,
.woocommerce-account .woocommerce-info .button {
    margin-inline-start: 12px;
    padding: 7px 14px;
    font-size: 13px;
}

/* ========== 8. TABLES ========== */
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--ma-r-lg);
    overflow: hidden;
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    box-shadow: var(--ma-sh-xs);
    font-size: 14px;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead th {
    background: var(--ma-surface-2);
    color: var(--ma-fg-3);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid var(--ma-border);
    text-align: start;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td {
    padding: 16px 18px;
    border-top: 1px solid var(--ma-border);
    color: var(--ma-fg);
    font-size: 14px;
    vertical-align: middle;
    background: var(--ma-surface);
    transition: background .15s var(--ma-ease);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody tr:hover td {
    background: linear-gradient(90deg, var(--ma-brand-50) 0%, transparent 100%);
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td a {
    color: var(--ma-accent);
    text-decoration: none;
    font-weight: 600;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody td a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--ma-accent-2);
}

/* Order status — render as plain bold colored text, NEVER a pill.
   The <td> MUST stay a table-cell; we flatten the inner <mark>/<span>. */
.woocommerce-account .woocommerce-MyAccount-content td.order-status,
.woocommerce-account .woocommerce-MyAccount-content td.subscription-status,
.woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-status {
    display: table-cell !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-align: inherit;
    vertical-align: middle !important;
}
.woocommerce-account .woocommerce-MyAccount-content td.order-status > *,
.woocommerce-account .woocommerce-MyAccount-content td.subscription-status > *,
.woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-status > *,
.woocommerce-account .woocommerce-MyAccount-content td mark,
.woocommerce-account .woocommerce-MyAccount-content td mark.order-status,
.woocommerce-account .woocommerce-MyAccount-content td .order-status,
.woocommerce-account .woocommerce-MyAccount-content td .subscription-status,
.woocommerce-account .woocommerce-MyAccount-content td .woocommerce-orders-table__cell-order-status {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--ma-fg) !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 700 !important;
    font-size: inherit !important;
    line-height: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    vertical-align: baseline !important;
    text-decoration: none !important;
    position: static !important;
    float: none !important;
}
/* Status color semantics — text only, no chip. */
.woocommerce-account .woocommerce-MyAccount-content td mark.status-completed,
.woocommerce-account .woocommerce-MyAccount-content td.status-completed,
.woocommerce-account .woocommerce-MyAccount-content td .status-completed { color: #166534 !important; }
.woocommerce-account .woocommerce-MyAccount-content td mark.status-processing,
.woocommerce-account .woocommerce-MyAccount-content td.status-processing,
.woocommerce-account .woocommerce-MyAccount-content td .status-processing { color: #1d4ed8 !important; }
.woocommerce-account .woocommerce-MyAccount-content td mark.status-on-hold,
.woocommerce-account .woocommerce-MyAccount-content td.status-on-hold,
.woocommerce-account .woocommerce-MyAccount-content td .status-on-hold { color: #b45309 !important; }
.woocommerce-account .woocommerce-MyAccount-content td mark.status-pending,
.woocommerce-account .woocommerce-MyAccount-content td.status-pending,
.woocommerce-account .woocommerce-MyAccount-content td .status-pending { color: #6b7280 !important; }
.woocommerce-account .woocommerce-MyAccount-content td mark.status-cancelled,
.woocommerce-account .woocommerce-MyAccount-content td mark.status-failed,
.woocommerce-account .woocommerce-MyAccount-content td.status-cancelled,
.woocommerce-account .woocommerce-MyAccount-content td.status-failed,
.woocommerce-account .woocommerce-MyAccount-content td .status-cancelled,
.woocommerce-account .woocommerce-MyAccount-content td .status-failed { color: #b91c1c !important; }
.woocommerce-account .woocommerce-MyAccount-content td mark.status-active,
.woocommerce-account .woocommerce-MyAccount-content td.status-active,
.woocommerce-account .woocommerce-MyAccount-content td .status-active { color: #047857 !important; }

/* SCORCHED EARTH: kill any background on any <mark>, any status class,
   and any TH/TD that carries a status class, anywhere inside MyAccount.
   This wins against any plugin/theme rule that re-adds a chip background. */
.woocommerce-account .woocommerce-MyAccount-content mark,
.woocommerce-account .woocommerce-MyAccount-content [class*="order-status"],
.woocommerce-account .woocommerce-MyAccount-content [class*="subscription-status"],
.woocommerce-account .woocommerce-MyAccount-content [class*="status-"],
.woocommerce-account .woocommerce-MyAccount-content th.order-status,
.woocommerce-account .woocommerce-MyAccount-content th.subscription-status,
.woocommerce-account .woocommerce-MyAccount-content th.woocommerce-orders-table__header-order-status,
.woocommerce-account .woocommerce-MyAccount-content td.order-status,
.woocommerce-account .woocommerce-MyAccount-content td.subscription-status,
.woocommerce-account .woocommerce-MyAccount-content td.woocommerce-orders-table__cell-order-status {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    border-radius: 0 !important;
}

/* Hard reset: TH headers must NEVER look like pills. */
.woocommerce-account .woocommerce-MyAccount-content th.order-status,
.woocommerce-account .woocommerce-MyAccount-content th.subscription-status,
.woocommerce-account .woocommerce-MyAccount-content th[class*="status"] {
    display: table-cell !important;
    padding: 14px 12px !important;
    background: transparent !important;
    color: var(--ma-fg-2) !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    white-space: nowrap;
    max-width: none !important;
    width: auto !important;
}

/* ========== Subscriptions: ACTION BUTTONS ==========
   WC Subscriptions renders <a class="woocommerce-button button KEY"> where KEY is
   subscription_renewal_early, subscription_renew, subscription_reactivate, cancel,
   change_address, etc. Force white text on the gradient + style the cancel button
   with a danger outline. */
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content a.button.subscription_renewal_early,
.woocommerce-account .woocommerce-MyAccount-content a.button.subscription_renew,
.woocommerce-account .woocommerce-MyAccount-content a.button.subscription_reactivate,
.woocommerce-account .woocommerce-MyAccount-content a.button.subscription_resubscribe,
.woocommerce-account .woocommerce-MyAccount-content a.button.change_address,
.woocommerce-account .woocommerce-MyAccount-content a.button.change_payment_method {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: var(--ma-grad) !important;
    background-size: 200% 200% !important;
    border: 0 !important;
    text-shadow: none !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button.subscription_renewal_early:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button.subscription_renew:hover,
.woocommerce-account .woocommerce-MyAccount-content a.button.subscription_reactivate:hover {
    background-position: 100% 50% !important;
    color: #ffffff !important;
}
/* Cancel keeps its danger outline (don't gradient-paint it). */
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button.cancel,
.woocommerce-account .woocommerce-MyAccount-content a.button.cancel {
    background: var(--ma-surface) !important;
    color: var(--ma-danger) !important;
    -webkit-text-fill-color: var(--ma-danger) !important;
    border: 1.5px solid #fecaca !important;
}

/* ========== Subscriptions: auto-renew toggle switch ==========
   WC Subscriptions renders the toggle as a <button> with an <i> inside
   (no text). Style it as a proper iOS-style switch so it reads as a
   control, not a mystery pill. */
.woocommerce-account .woocommerce-MyAccount-content button.subscription-auto-renew-toggle {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    display: inline-block !important;
    width: 52px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--ma-border) !important;
    background: var(--ma-surface-3) !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    transition: background .25s var(--ma-ease), border-color .25s var(--ma-ease), box-shadow .25s var(--ma-ease) !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.06) !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-content button.subscription-auto-renew-toggle .subscription-auto-renew-toggle__i {
    position: absolute;
    top: 2px;
    right: 2px;
    left: auto;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.04);
    transition: right .22s var(--ma-ease), left .22s var(--ma-ease), background .22s var(--ma-ease);
}
.woocommerce-account .woocommerce-MyAccount-content button.subscription-auto-renew-toggle--on {
    background: var(--ma-grad) !important;
    background-size: 200% 200% !important;
    background-position: 0% 50% !important;
    border-color: transparent !important;
    box-shadow: var(--ma-sh-brand-soft), inset 0 1px 2px rgba(0,0,0,.10) !important;
}
.woocommerce-account .woocommerce-MyAccount-content button.subscription-auto-renew-toggle--on .subscription-auto-renew-toggle__i {
    right: auto;
    left: 2px;
}
.woocommerce-account .woocommerce-MyAccount-content button.subscription-auto-renew-toggle:hover {
    border-color: var(--ma-brand-400) !important;
}
.woocommerce-account .woocommerce-MyAccount-content button.subscription-auto-renew-toggle--on:hover {
    background-position: 100% 50% !important;
    box-shadow: var(--ma-sh-brand), inset 0 1px 2px rgba(0,0,0,.10) !important;
}
.woocommerce-account .woocommerce-MyAccount-content button.subscription-auto-renew-toggle:focus-visible {
    outline: 3px solid var(--ma-ring) !important;
    outline-offset: 2px !important;
}
.woocommerce-account .woocommerce-MyAccount-content button.subscription-auto-renew-toggle--disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
}

/* Give the status column enough room so the pill never wraps. Match BOTH
   the WC class and the Subscriptions plugin classes. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td {
    overflow: visible;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th[class*="status"],
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td[class*="status"],
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th.order-status,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.order-status,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th.subscription-status,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.subscription-status,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th.woocommerce-orders-table__header-order-status,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td.woocommerce-orders-table__cell-order-status {
    min-width: 0;
    width: auto;
    white-space: nowrap;
}

/* Force the table itself to lay out as a proper table even if a parent
   forced display:block on it. */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table {
    display: table !important;
    table-layout: auto !important;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table thead { display: table-header-group !important; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tbody { display: table-row-group !important; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table tr    { display: table-row !important; }
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td   { display: table-cell !important; }
.woocommerce-account .woocommerce-MyAccount-content mark.order-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.woocommerce-account .woocommerce-MyAccount-content mark.order-status.status-completed { background: var(--ma-success-bg); color: var(--ma-success); border-color: rgba(4,120,87,.22); }
.woocommerce-account .woocommerce-MyAccount-content mark.order-status.status-processing,
.woocommerce-account .woocommerce-MyAccount-content mark.order-status.status-on-hold    { background: var(--ma-warning-bg); color: var(--ma-warning); border-color: rgba(180,83,9,.22); }
.woocommerce-account .woocommerce-MyAccount-content mark.order-status.status-processing::before {
    box-shadow: 0 0 0 3px rgba(180,83,9,.2);
    animation: ma-pulse-warning 1.8s var(--ma-ease) infinite;
}
@keyframes ma-pulse-warning {
    0%, 100% { box-shadow: 0 0 0 3px rgba(180,83,9,.2); }
    50%      { box-shadow: 0 0 0 6px rgba(180,83,9,0); }
}
.woocommerce-account .woocommerce-MyAccount-content mark.order-status.status-pending    { background: var(--ma-info-bg); color: var(--ma-info); border-color: rgba(29,78,216,.22); }
.woocommerce-account .woocommerce-MyAccount-content mark.order-status.status-failed,
.woocommerce-account .woocommerce-MyAccount-content mark.order-status.status-cancelled,
.woocommerce-account .woocommerce-MyAccount-content mark.order-status.status-refunded   { background: var(--ma-danger-bg); color: var(--ma-danger); border-color: rgba(185,28,28,.22); }

/* Pagination */
.woocommerce-account .woocommerce-pagination ul {
    display: inline-flex;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
    gap: 6px;
    border: 0;
}
.woocommerce-account .woocommerce-pagination ul li { border: 0; margin: 0; }
.woocommerce-account .woocommerce-pagination ul li a,
.woocommerce-account .woocommerce-pagination ul li span {
    min-width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ma-r);
    background: var(--ma-surface);
    border: 1.5px solid var(--ma-border);
    color: var(--ma-fg-2);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s var(--ma-ease), color .15s var(--ma-ease), border-color .15s var(--ma-ease), box-shadow .2s var(--ma-ease);
    box-shadow: var(--ma-sh-xs);
    padding: 0 10px;
}
.woocommerce-account .woocommerce-pagination ul li a:hover {
    background: var(--ma-brand-50);
    color: var(--ma-brand-700);
    border-color: var(--ma-brand-300);
}
.woocommerce-account .woocommerce-pagination ul li span.current {
    background: var(--ma-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--ma-sh-brand-soft);
}

/* ========== 9. ADDRESSES ========== */
.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
    align-items: stretch;
    margin-top: 8px;
}
/* WooCommerce wraps each address in .u-column1/.u-column2 (floated, ~47% wide),
   which breaks the grid and staggers the cards. Neutralise the float layout. */
.woocommerce-account .woocommerce-Addresses > div,
.woocommerce-account .woocommerce-Addresses > .u-column1,
.woocommerce-account .woocommerce-Addresses > .u-column2,
.woocommerce-account .woocommerce-Addresses > .col-1,
.woocommerce-account .woocommerce-Addresses > .col-2 {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
}
.woocommerce-account .woocommerce-Addresses::before,
.woocommerce-account .woocommerce-Addresses::after {
    content: none !important;
}
.woocommerce-account .woocommerce-Addresses .woocommerce-Address {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
}

.woocommerce-account .woocommerce-Address {
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-r-lg);
    padding: 24px;
    box-shadow: var(--ma-sh-xs);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
        border-color .2s var(--ma-ease),
        box-shadow .25s var(--ma-ease),
        transform .25s var(--ma-ease);
}
.woocommerce-account .woocommerce-Address::after {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, .12) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--ma-ease);
}
.woocommerce-account .woocommerce-Address:hover {
    border-color: var(--ma-brand-200);
    box-shadow: var(--ma-sh-md);
    transform: translateY(-2px);
}
.woocommerce-account .woocommerce-Address:hover::after { opacity: 1; }

.woocommerce-account .woocommerce-Address-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--ma-border);
}
.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: var(--ma-fg);
    letter-spacing: -0.01em;
}
.woocommerce-account .woocommerce-Address-title .edit {
    background: var(--ma-surface);
    color: var(--ma-brand-700);
    padding: 6px 12px;
    border-radius: var(--ma-r);
    border: 1.5px solid var(--ma-brand-200);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s var(--ma-ease), color .15s var(--ma-ease), border-color .15s var(--ma-ease);
}
.woocommerce-account .woocommerce-Address-title .edit:hover {
    background: var(--ma-brand-50);
    color: var(--ma-brand-800);
    border-color: var(--ma-brand-400);
}
.woocommerce-account .woocommerce-Address address {
    color: var(--ma-fg-2);
    font-style: normal;
    font-size: 13.5px;
    line-height: 1.75;
}
.woocommerce-account .woocommerce-Address .woocommerce-Address-title + address {
    flex: 1 1 auto;
}

/* ========== 10. LOGIN / REGISTER (logged-out) ========== */
.woocommerce-account:not(.logged-in) .woocommerce {
    display: block;
    max-width: 1000px;
}
.woocommerce-account:not(.logged-in) .woocommerce .u-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}
.woocommerce-account:not(.logged-in) .woocommerce .u-column1,
.woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
    width: 100%;
    float: none;
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-r-xl);
    box-shadow: var(--ma-sh-sm);
    padding: clamp(28px, 3vw, 40px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.woocommerce-account:not(.logged-in) .woocommerce .u-column1::before,
.woocommerce-account:not(.logged-in) .woocommerce .u-column2::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--ma-grad);
    background-size: 200% 100%;
    animation: ma-shimmer 8s var(--ma-ease) infinite;
}
.woocommerce-account:not(.logged-in) .woocommerce .u-column1::after,
.woocommerce-account:not(.logged-in) .woocommerce .u-column2::after {
    content: '';
    position: absolute;
    bottom: -80px; right: -80px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, .15) 0%, transparent 70%);
    filter: blur(30px);
    pointer-events: none;
    z-index: -1;
}
.woocommerce-account:not(.logged-in) .woocommerce h2 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ma-fg);
    margin: 0 0 20px;
    letter-spacing: -0.025em;
}
.woocommerce-account .lost_reset_password,
.woocommerce-account form.woocommerce-form-login,
.woocommerce-account form.woocommerce-form-register { padding: 0; border: 0; box-shadow: none; background: transparent; }
.woocommerce-account .woocommerce-LostPassword a,
.woocommerce-account .lost_password a {
    color: var(--ma-accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}
.woocommerce-account .woocommerce-LostPassword a:hover { text-decoration: underline; text-underline-offset: 3px; }

.woocommerce-account .woocommerce-form-login__rememberme,
.woocommerce-account .woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ma-fg-2);
    margin: 0;
}

/* ========== 11. ENTRANCE ANIMATIONS ========== */
@keyframes ma-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-Address,
.woocommerce-account:not(.logged-in) .woocommerce .u-column1,
.woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
    animation: ma-fade-in .5s var(--ma-ease) both;
}
.woocommerce-account .woocommerce-MyAccount-content { animation-delay: 80ms; }
.woocommerce-account .woocommerce-Address:nth-child(2) { animation-delay: 80ms; }
.woocommerce-account:not(.logged-in) .woocommerce .u-column2 { animation-delay: 100ms; }

/* ========== 12. RESPONSIVE ========== */
@media (max-width: 860px) {
    .woocommerce-account .woocommerce-MyAccount-navigation,
    .woocommerce-account.rtl .woocommerce-MyAccount-navigation,
    html[dir="rtl"] .woocommerce-account .woocommerce-MyAccount-navigation {
        float: none !important;
        width: 100% !important;
        margin: 0 0 16px !important;
        position: static;
    }
    .woocommerce-account .woocommerce-MyAccount-content,
    .woocommerce-account.rtl .woocommerce-MyAccount-content,
    html[dir="rtl"] .woocommerce-account .woocommerce-MyAccount-content {
        float: none !important;
        margin: 0 !important;
        width: 100% !important;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation ul {
        flex-direction: row;
        flex-wrap: wrap;
    }
    .woocommerce-account .woocommerce-MyAccount-navigation li { flex: 1 1 auto; }
    .woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
        flex: 1 1 100%;
        margin-top: 4px;
        padding-top: 8px;
    }
}
@media (max-width: 560px) {
    .woocommerce-account .woocommerce form .form-row-first,
    .woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
    .woocommerce-account .woocommerce form .form-row-last,
    .woocommerce-account .woocommerce-MyAccount-content form .form-row-last {
        width: 100%;
        float: none;
    }
    .woocommerce-account .woocommerce-MyAccount-content { padding: 22px; }
}

/* ========== 13. RTL ADJUSTMENTS ========== */
.woocommerce-account.rtl .woocommerce-MyAccount-navigation li a { text-align: right; }
.woocommerce-account.rtl .woocommerce-MyAccount-content table.shop_table thead th { text-align: right; }
.woocommerce-account.rtl .woocommerce form .form-row-first,
.woocommerce-account.rtl .woocommerce-MyAccount-content form .form-row-first { float: right; }
.woocommerce-account.rtl .woocommerce form .form-row-last,
.woocommerce-account.rtl .woocommerce-MyAccount-content form .form-row-last { float: left; }
.woocommerce-account.rtl .woocommerce-MyAccount-content form input[type="checkbox"] { margin: 0 0 0 8px; }
.woocommerce-account.rtl .woocommerce-MyAccount-content::after { right: auto; left: -120px; }

/* ========== 14. REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    .woocommerce-account *,
    .woocommerce-account *::before,
    .woocommerce-account *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ========== 15. PRINT ========== */
@media print {
    .woocommerce-account .woocommerce-MyAccount-navigation { display: none; }
    .woocommerce-account .woocommerce-MyAccount-content {
        border: 0;
        box-shadow: none;
        padding: 0;
    }
    .woocommerce-account .woocommerce-MyAccount-content::before,
    .woocommerce-account .woocommerce-MyAccount-content::after { display: none; }
}

/* ============================================================
   13. DASHBOARD SUMMARY CARD (YazCoins overview)
   ============================================================ */
.meshy-dash-card {
    position: relative;
    overflow: hidden;
    margin: 0 0 28px;
    padding: 28px 28px 24px;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(1100px 380px at 12% -10%, rgba(168,85,247,.55), transparent 60%),
        radial-gradient(900px 320px at 95% 110%, rgba(236,72,153,.45), transparent 60%),
        linear-gradient(135deg, #4338ca 0%, #6366f1 45%, #8b5cf6 100%);
    box-shadow: 0 18px 50px -22px rgba(79,70,229,.55), 0 8px 22px -16px rgba(15,23,42,.45);
    isolation: isolate;
}
.meshy-dash-card__bg { position:absolute; inset:0; z-index:-1; pointer-events:none; }
.meshy-dash-orb {
    position:absolute; border-radius:50%; filter:blur(40px); opacity:.55;
    animation: meshy-dash-float 14s ease-in-out infinite;
}
.meshy-dash-orb--a { width:280px; height:280px; top:-120px; left:18%; background:radial-gradient(circle,#f0abfc 0%,transparent 70%); }
.meshy-dash-orb--b { width:220px; height:220px; bottom:-100px; right:8%;  background:radial-gradient(circle,#67e8f9 0%,transparent 70%); animation-delay:-7s; }
.meshy-dash-orb--c { width:160px; height:160px; top:30%; right:30%; background:radial-gradient(circle,#fbcfe8 0%,transparent 70%); animation-delay:-3s; }
@keyframes meshy-dash-float {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(28px,-18px) scale(1.06); }
    66%     { transform: translate(-22px,22px) scale(.95); }
}

.meshy-dash-card__head {
    display:flex; flex-wrap:wrap; gap:20px;
    align-items:flex-end; justify-content:space-between;
    margin-bottom: 22px;
}
.meshy-dash-balance { display:flex; flex-direction:column; gap:6px; min-width:0; }
.meshy-dash-balance__label {
    font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(255,255,255,.78);
}
.meshy-dash-balance__num {
    font-size: clamp(40px, 6vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing:-.02em;
    text-shadow: 0 2px 14px rgba(15,23,42,.25);
    font-variant-numeric: tabular-nums;
}
.meshy-dash-pill {
    display:inline-flex; align-items:center; gap:8px;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    align-self: flex-start;
}
.meshy-dash-pill__dot {
    width:8px; height:8px; border-radius:50%; background:#10b981;
    box-shadow: 0 0 0 4px rgba(16,185,129,.25);
    animation: meshy-dash-pulse 1.8s ease-in-out infinite;
}
.meshy-dash-pill--active { background: rgba(16,185,129,.22); border-color: rgba(16,185,129,.45); }
@keyframes meshy-dash-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.7} }

.meshy-dash-actions { display:flex; gap:10px; flex-wrap:wrap; }
.meshy-dash-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 13px; font-weight: 600;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    border: 1px solid transparent;
    line-height: 1;
}
.meshy-dash-btn .dashicons { font-size:16px; width:16px; height:16px; line-height:16px; }
.meshy-dash-btn--ghost {
    background: rgba(255,255,255,.12);
    color:#fff !important;
    border-color: rgba(255,255,255,.22);
}
.meshy-dash-btn--ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.meshy-dash-btn--solid {
    background: #fff;
    color: #4338ca !important;
    box-shadow: 0 10px 22px -10px rgba(0,0,0,.35);
}
.meshy-dash-btn--solid:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -10px rgba(0,0,0,.4); }

.meshy-dash-stats {
    display:grid; gap:14px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    margin-top: 8px;
}
.meshy-dash-stat {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 16px;
    padding: 16px 16px 14px;
    display:flex; flex-direction:column; gap:6px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .2s ease, background .2s ease;
}
.meshy-dash-stat:hover { transform: translateY(-2px); background: rgba(255,255,255,.16); }
.meshy-dash-stat__icon {
    font-size: 20px; width:20px; height:20px; line-height:20px;
    color: rgba(255,255,255,.85);
}
.meshy-dash-stat__num {
    font-size: 24px; font-weight: 800; line-height:1;
    font-variant-numeric: tabular-nums;
}
.meshy-dash-stat__label {
    font-size: 11px; font-weight:600; letter-spacing:.06em; text-transform: uppercase;
    color: rgba(255,255,255,.75);
}

.meshy-dash-fuel { margin-top: 20px; }
.meshy-dash-fuel__track {
    width:100%; height:8px;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    overflow: hidden;
}
.meshy-dash-fuel__fill {
    height:100%;
    background: linear-gradient(90deg, #fde68a 0%, #f59e0b 50%, #ec4899 100%);
    box-shadow: 0 0 14px rgba(236,72,153,.55);
    border-radius: 999px;
    transition: width .8s cubic-bezier(.4,0,.2,1);
}
.meshy-dash-fuel__caption {
    margin-top: 8px;
    font-size: 12px; font-weight: 500;
    color: rgba(255,255,255,.8);
}

/* RTL flips */
.rtl .meshy-dash-orb--a { left:auto; right:18%; }
.rtl .meshy-dash-orb--b { right:auto; left:8%; }
.rtl .meshy-dash-orb--c { right:auto; left:30%; }

@media (max-width: 640px) {
    .meshy-dash-card { padding: 22px 18px 18px; border-radius: 18px; }
    .meshy-dash-card__head { flex-direction:column; align-items:stretch; }
    .meshy-dash-actions { width:100%; }
    .meshy-dash-btn { flex:1; justify-content:center; }
}
/* ============================================================
   14. YAZCOINS ENDPOINT PAGE (/my-account/yazcoins/)
   ============================================================ */
.meshy-account-yz { display: grid; gap: 22px; }

.meshy-account-yz-card {
    position: relative;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 24px 24px 22px;
    box-shadow: 0 4px 14px -8px rgba(15,23,42,.12);
}
.meshy-account-yz-card h3 {
    margin: 0 0 14px;
    font-size: 16px; font-weight: 700;
    color: #0f172a;
    letter-spacing: -.01em;
}

/* ---- Balance hero card ---- */
.meshy-account-yz-balance {
    overflow: hidden;
    color: #fff;
    border: 0;
    padding: 32px 28px 26px;
    text-align: center;
    background:
        radial-gradient(900px 320px at 15% -10%, rgba(168,85,247,.55), transparent 60%),
        radial-gradient(800px 280px at 90% 110%, rgba(236,72,153,.45), transparent 60%),
        linear-gradient(135deg, #4338ca 0%, #6366f1 45%, #8b5cf6 100%);
    box-shadow: 0 18px 50px -22px rgba(79,70,229,.55);
    isolation: isolate;
}
.meshy-account-yz-balance::before,
.meshy-account-yz-balance::after {
    content: ""; position: absolute; border-radius: 50%;
    filter: blur(40px); opacity: .55; z-index: -1; pointer-events:none;
    animation: ma-orb 14s ease-in-out infinite;
}
.meshy-account-yz-balance::before {
    width: 240px; height: 240px; top: -110px; left: 14%;
    background: radial-gradient(circle, #f0abfc 0%, transparent 70%);
}
.meshy-account-yz-balance::after {
    width: 200px; height: 200px; bottom: -90px; right: 8%;
    background: radial-gradient(circle, #67e8f9 0%, transparent 70%);
    animation-delay: -7s;
}
@keyframes ma-orb {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(28px,-18px) scale(1.06); }
    66%     { transform: translate(-22px,22px) scale(.95); }
}
.rtl .meshy-account-yz-balance::before { left:auto; right:14%; }
.rtl .meshy-account-yz-balance::after  { right:auto; left:8%; }

/* hide the � ASCII junk and sparkles � they don't add value here */
.meshy-yz-fx, .meshy-yz-ring { display: none !important; }

.meshy-account-yz-balance__num {
    font-size: clamp(48px, 7vw, 72px);
    font-weight: 800; line-height: 1;
    letter-spacing: -.03em;
    text-shadow: 0 2px 18px rgba(15,23,42,.25);
    font-variant-numeric: tabular-nums;
}
.meshy-account-yz-balance__label {
    margin-top: 6px;
    font-size: 12px; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
}
.meshy-account-yz-balance__hint {
    margin: 14px auto 0;
    max-width: 38ch;
    font-size: 14px;
    color: rgba(255,255,255,.85);
}
.meshy-account-yz-balance__sub {
    display: inline-flex; align-items: center; gap: 10px;
    flex-wrap: wrap; justify-content: center;
    margin: 14px auto 0;
    font-size: 13px;
    color: rgba(255,255,255,.9);
}
.meshy-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    font-size: 12px; font-weight: 700;
    letter-spacing: .03em;
    line-height: 1;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.meshy-badge-success {
    background: rgba(16,185,129,.22);
    border-color: rgba(16,185,129,.5);
    color: #ecfdf5;
}
.meshy-badge-success::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16,185,129,.3);
    animation: ma-pulse 1.8s ease-in-out infinite;
}
@keyframes ma-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.6} }

.meshy-account-yz-actions {
    margin-top: 22px;
    display: flex; justify-content: center; gap: 10px;
}
.meshy-account-yz-balance .button,
.meshy-account-yz-balance .button-primary {
    background: #fff !important;
    color: #4338ca !important;
    border: 0 !important;
    padding: 12px 22px !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 24px -10px rgba(0,0,0,.4) !important;
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.meshy-account-yz-balance .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 32px -12px rgba(0,0,0,.45) !important;
}

/* ---- Redeem form ---- */
.meshy-yz-redeem-form .form-row { margin: 0 0 12px; }
.meshy-yz-redeem-form label {
    display:block; font-size:12px; font-weight:600;
    color:#475569; letter-spacing:.04em; text-transform: uppercase;
    margin-bottom: 6px;
}
.meshy-yz-redeem-form input.input-text {
    width: 100%; padding: 10px 14px;
    border: 1px solid #e2e8f0; border-radius: 10px;
    background: #f8fafc; font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.meshy-yz-redeem-form input.input-text:focus {
    outline: 0; background: #fff;
    border-color: #6366f1;
    box-shadow: 0 0 0 4px rgba(99,102,241,.18);
}
.meshy-yz-redeem-form .button {
    background: linear-gradient(135deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 10px 22px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer;
}
.meshy-yz-msg { margin-inline-start: 10px; font-size: 13px; }
.meshy-yz-msg.is-ok  { color: #047857; }
.meshy-yz-msg.is-err { color: #b91c1c; }

/* ---- Transactions table ---- */
.meshy-account-yz-tx { width: 100%; border-collapse: collapse; }
.meshy-account-yz-tx thead th {
    text-align: start;
    padding: 10px 12px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #64748b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.meshy-account-yz-tx td {
    padding: 12px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
    color: #0f172a;
}
.meshy-account-yz-tx tr:hover td { background: #fafbff; }
.meshy-account-yz-tx code {
    background: #f1f5f9; padding: 2px 6px;
    border-radius: 6px; font-size: 12px;
}
.meshy-yz-ref {
    display: inline-block;
    padding: 3px 10px;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    cursor: help;
}
.meshy-tar { text-align: end; }
.meshy-yz-pos { color: #047857; font-weight: 700; }
.meshy-yz-neg { color: #b91c1c; font-weight: 700; }

@media (max-width: 640px) {
    .meshy-account-yz-balance { padding: 26px 18px 22px; border-radius: 16px; }
    .meshy-account-yz-balance__num { font-size: 48px; }
    .meshy-account-yz-tx thead { display: none; }
    .meshy-account-yz-tx td { display: block; padding: 8px 12px; border:0; }
    .meshy-account-yz-tx td::before {
        content: attr(data-title) ': ';
        font-weight: 700; color: #475569;
    }
    .meshy-account-yz-tx tr { border-bottom: 1px solid #e2e8f0; padding: 6px 0; }
}

/* ============================================================
   15. MY MODELS HISTORY (/my-account/my-models/)
   ============================================================ */
.meshy-models-history { display: block; }
.meshy-models-intro { color: var(--ma-fg-3); font-size: 14.5px; margin: 0 0 20px; }

.meshy-models-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--ma-fg-3);
    background: var(--ma-surface-2);
    border: 1px dashed var(--ma-border-2);
    border-radius: var(--ma-r-lg);
}

.meshy-models-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.meshy-model-card {
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-r-lg);
    overflow: hidden;
    /* A grid item defaults to min-width:auto, so wide content used to stretch
       the column instead of being wrapped inside the card. */
    min-width: 0;
    box-shadow: var(--ma-sh-xs);
    display: flex;
    flex-direction: column;
    transition: transform .2s var(--ma-ease), box-shadow .25s var(--ma-ease), border-color .2s var(--ma-ease);
}
.meshy-model-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ma-sh-md);
    border-color: var(--ma-brand-200);
}

.meshy-model-card__viewer {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(ellipse at center, rgba(99,102,241,.08), transparent 70%),
        var(--ma-surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.meshy-model-card__viewer model-viewer,
.meshy-model-card__viewer .meshy-stl-viewer,
.meshy-model-card__viewer img {
    width: 100%;
    height: 100%;
    display: block;
}

/* Fallback still, for a row with no renderable geometry. */
.meshy-model-card__poster { object-fit: contain; }

/* The Three.js viewer positions its loading spinner against this box. */
.meshy-model-card__viewer .meshy-stl-viewer { position: relative; cursor: grab; touch-action: none; }
.meshy-model-card__viewer .meshy-stl-viewer:active { cursor: grabbing; }
.meshy-model-card__viewer .meshy-stl-viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.meshy-model-card__viewer img { object-fit: contain; }
.meshy-model-card__noview {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ma-fg-4);
}

.meshy-model-badge {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: #fff;
    pointer-events: none; /* never steal drags from the 3D canvas underneath */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.meshy-model-badge--generated { background: rgba(99,102,241,.85); }
.meshy-model-badge--purchased { background: rgba(16,185,129,.9); }

.meshy-model-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.meshy-model-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.meshy-model-card__fmt {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--ma-brand-700);
    background: var(--ma-brand-50);
    border: 1px solid var(--ma-brand-100);
    padding: 3px 8px;
    border-radius: 6px;
}
.meshy-model-card__date { font-size: 12px; color: var(--ma-fg-4); }

.meshy-model-card__specs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 4px;
}
.meshy-model-card__specs li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
    color: var(--ma-fg-3);
}
.meshy-model-card__specs li strong { color: var(--ma-fg-2); font-weight: 600; }

.meshy-model-card__expiry {
    margin: 0;
    font-size: 12px;
    color: var(--ma-warning);
}

.meshy-model-card__download {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--ma-r);
    background: var(--ma-grad);
    background-size: 200% 200%;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: var(--ma-sh-brand-soft);
    transition: background-position .5s var(--ma-ease), transform .15s var(--ma-ease);
}
.meshy-model-card__download:hover { background-position: 100% 50%; transform: translateY(-1px); }

.meshy-models-notice {
    margin: 14px 0 0;
    padding: 12px 16px;
    background: var(--ma-info-bg);
    border: 1px solid rgba(29,78,216,.2);
    border-radius: var(--ma-r);
    color: var(--ma-info);
    font-size: 14px;
}

/* ---- My Models: pager ------------------------------------------------- */
.meshy-models-count {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ma-fg-4);
}

.meshy-models-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 26px;
}

.meshy-models-pager__page,
.meshy-models-pager__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--ma-border);
    border-radius: 10px;
    background: var(--ma-surface);
    color: var(--ma-fg-2);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s var(--ma-ease), border-color .2s var(--ma-ease), color .2s var(--ma-ease);
}
.meshy-models-pager__page:hover,
.meshy-models-pager__nav:hover {
    background: var(--ma-surface-2);
    border-color: var(--ma-brand-200);
    text-decoration: none;
}
.meshy-models-pager__page.is-current {
    background: var(--ma-brand-600, #6366f1);
    border-color: transparent;
    color: #fff;
    cursor: default;
}
.meshy-models-pager__gap {
    padding: 0 4px;
    color: var(--ma-fg-4);
}


/* ---- My Models: 3D viewer loading placeholder -------------------------
   The account pages do not load frontend.css, so the spinner the viewers
   emit had no styles here at all — it rendered as three stray inline spans
   and the card looked frozen while a model downloaded. */
.meshy-viewer-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px;
    font-size: 13px;
    color: var(--ma-fg-3);
    text-align: center;
    background: var(--ma-surface-3);
    pointer-events: none;
}

.meshy-viewer-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--ma-border-2);
    border-top-color: var(--ma-brand-600, #4f46e5);
    border-radius: 50%;
    animation: meshy-spin .8s linear infinite;
}

.meshy-viewer-loading__pct {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    opacity: .85;
}

@keyframes meshy-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .meshy-viewer-loading__spinner { animation-duration: 2.4s; }
}

/* ---- My Models: card actions -----------------------------------------
   Quote and download sit side by side, the quote outlined and the download
   solid, per the approved card design. */
.meshy-model-card__actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
}

.meshy-model-card__quote,
.meshy-model-card__actions .meshy-model-card__download {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 11px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    /* The Hebrew quote label is long and the grid cell can be 240px wide, so
       the labels must be allowed to wrap. With nowrap they ran straight out
       past the card edge. */
    white-space: normal;
    overflow-wrap: anywhere;
    transition: transform .15s var(--ma-ease), background .2s var(--ma-ease),
                border-color .2s var(--ma-ease), opacity .15s var(--ma-ease);
}

/* Each button asks for ~118px. Two fit side by side on a roomy card; on a
   narrow one the row wraps and they stack full width, with no overflow. */
.meshy-model-card__quote {
    flex: 1.3 1 118px;
    min-width: 0;
    border: 1.5px solid var(--ma-brand-600, #4f46e5);
    background: transparent;
    color: var(--ma-brand-600, #4f46e5);
    cursor: pointer;
}
.meshy-model-card__quote:hover { background: var(--ma-brand-50); transform: translateY(-1px); }
.meshy-model-card__quote:focus-visible { outline: 2px solid var(--ma-brand-600, #4f46e5); outline-offset: 2px; }
.meshy-model-card__quote[disabled],
.meshy-model-card__quote.is-loading { opacity: .6; cursor: progress; transform: none; }

.meshy-model-card__actions .meshy-model-card__download {
    flex: 1 1 96px;
    min-width: 0;
    border: 1.5px solid transparent;
    background: var(--ma-brand-600, #4f46e5);
    background-size: auto;
    color: #fff !important;
    box-shadow: var(--ma-sh-brand-soft);
    text-decoration: none !important;
}
.meshy-model-card__actions .meshy-model-card__download:hover {
    background: var(--ma-brand-700, #4338ca);
    transform: translateY(-1px);
}


.meshy-model-card__msg {
    margin: 0;
    min-height: 1em;
    font-size: 12px;
    color: var(--ma-fg-4);
}
.meshy-model-card__msg:empty { display: none; }
.meshy-model-card__msg.is-error { color: var(--ma-danger, #b91c1c); }