/* =========================================================
   平板端专用样式 (769px ~ 1024px)
========================================================= */

/* =========================================================
   0. HIDE DEFAULT ELEMENTS
========================================================= */
.woocommerce-MyAccount-navigation {
    display: none !important;
}

/**/
.woocommerce-account .page-title-inner.flex-row.container {
    display: none !important;
}


/**/

/* =========================================================
   1. BASE BADGE STYLE
========================================================= */
/*/*//*/


/*//*/ 

/*/

/* Hide My Account Panel Mobile */



/*/*/

/* WPLoyalty Top Gap Mobile*/
@media (max-width: 1024px) {
    .woocommerce-notices-wrapper {
        display: none !important;
    }
}

/* WPLoyalty Page Top Mobile*/
@media only screen and (max-width: 1024px) {

    /* 去掉 WooCommerce 默认提示区域空白 */
    .woocommerce-notices-wrapper {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    /* 去掉 My points 标题区域空白 */
    .wlr-heading-container {
        margin: 0 !important;
        padding: 0 !important;
    }

    .wlr-heading {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* 去掉用户卡顶部间距 */
    .wlr-user-details {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }

    /* 整体页面容器压缩 */
    .wlr-myaccount-page {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* WPLoyalty Page Header Mobile*/
@media (max-width: 1024px) {
    h3.wlr-heading {
        display: none !important;
    }
}

/* WPLoyalty Points Mobile*/
@media (max-width: 1024px) {

    /* ⭐ 只让前两个并排 */
    #wlr-points {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ⭐ 卡片统一样式 */
    #wlr-available-points,
    #wlr-redeemed-points {
        width: 100% !important;
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        padding: 10px;
    }

    /* ⭐ Used rewards 单独一整行 */
    #wlr-used-rewards {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column;
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    /* ⭐ icon 调整 */
    .wlr-icon {
        width: 32px !important;
        height: 32px !important;
    }

    /* ⭐ 数字优化 */
    #wlr-available-point-value,
    #wlr-redeemed-point-value,
    #wlr-used-reward-value-count {
        font-size: 18px !important;
        font-weight: 700;
    }
}
/* WPLoyalty Reward Mobile*/
.wlr-user-reward-titles {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto; /* 防止手机挤爆换行 */
    -webkit-overflow-scrolling: touch;
}

/* 每个 tab 强制同宽或自适应 */
.wlr-my-rewards-title {
    flex: 1 0 auto;
    text-align: center;
    white-space: nowrap;
}

/* icon + text 居中 */
.wlr-my-rewards-title h4 {
    margin: 0;
    font-size: 14px;
}

/**/
.wlr-user-reward-titles {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 前两个在第一行 */
.wlr-rewards-title,
.wlr-coupons-title {
    flex: 1 1 48%;
}

/* 第三个强制换行 + 占满整行 */
.wlr-coupons-expired-title {
    flex: 1 1 100%;
}
/*/*/

/* 隐藏Rewards Coupons外框*/
@media (max-width: 1024px) {

    /* 隐藏外框标题 My rewards + 外层容器 */
    .wlr-your-reward > .wlr-heading-container {
        display: none !important;
    }

    /* 如果你说的“外框”是整个模块边距/背景 */
    .wlr-your-reward {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }
}

/**/
@media (max-width: 1024px) {

    .wlr-table {
        width: 100% !important;
        min-width: 700px; /* 保证结构不崩 */
    }

    #wlr-transaction-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wlr-table th,
    .wlr-table td {
        white-space: nowrap;
        font-size: 16px;
        padding: 10px 8px;
    }
}

/*Botton From Right to Left*/
div:has(#wlr-next-button),
div:has(#wlr-prev-button) {
    text-align: left !important;
}

/* =========================
   BASE BUTTON STYLE（统一）
========================= */
#wlr-prev-button,
#wlr-next-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 8px 14px !important;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none !important;

    cursor: pointer;

    border-radius: 0px;

    transition: all 0.2s ease;

    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* =========================
   NEXT（主按钮）
========================= */
#wlr-next-button {
    background: #111 !important;
    color: #fff !important;
    border: 1px solid #111;
}

/* =========================
   PREV（次按钮）
========================= */
#wlr-prev-button {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid #ddd;
}

/* =========================
   HOVER EFFECT
========================= */
#wlr-next-button:hover {
    background: #333 !important;
    border-color: #333;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

#wlr-prev-button:hover {
    background: #f5f5f5 !important;
    transform: translateY(-1px);
}

/* =========================
   ACTIVE EFFECT
========================= */
#wlr-prev-button:active,
#wlr-next-button:active {
    transform: translateY(0px);
}

/* =========================
   MOBILE OPTIMIZATION
========================= */
@media (max-width: 768px) {
    #wlr-prev-button,
    #wlr-next-button {
        padding: 10px 12px !important;
        font-size: 15px;
    }
}

/* Intro Card Mobile */
@media (max-width: 1024px) {

    .wlr-campaign-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
    }

    .wlr-campaign-container .wlr-card {
        flex: 1 1 50%;
        min-width: 0;
    }

    .wlr-card-container {
        padding: 10px 8px;
    }

    .wlr-name,
    .wlr-discount-point {
        font-size: 12px;
        line-height: 1.2;
    }

    .wlr-card-container i {
        width: 32px !important;
        height: 32px !important;
    }
}

















/* =========================================================
   4. DASHBOARD TABS UI (MOBILE ONLY)
========================================================= */

@media (max-width: 1024px) {

    .dashboard-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 10px 8px;
        background: #f6f6f6;
        border-bottom: 5px solid #eee;
    }

    .dashboard-tabs a {
        display: block;
        text-align: center;
        padding: 10px 6px;
        background: linear-gradient(90deg, #f5f5f5, #eaeaea);
        font-size: 16px;
        text-decoration: none;
        color: #333;
    }
}

/* Desktop 直接隐藏 */
@media (min-width: 1024px) {
    .dashboard-tabs {
        display: none !important;
    }
}


/* =========================================================
   5. TOPBAR LINKS CLEAN
========================================================= */




/* 只在手机端显示 Credit / Point after */











/* =========================================================
   6. GAP BELOW NOTICES
========================================================= */
.woocommerce-notices-wrapper {
    margin-bottom: 22px;
}

/*Dashboard Mobile Tab Bottom Gap*/
@media (max-width: 1024px) {
    .dashboard-tabs {
        margin-bottom: 24px;
    }
}

/*Dashboard Address Format*/
@media (max-width: 1024px) {

    .woocommerce-Addresses.col2-set.addresses {
        display: flex;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .woocommerce-Addresses .u-column1,
    .woocommerce-Addresses .u-column2 {
        width: 50%;
        float: none !important;
        margin: 0;
    }

    .woocommerce-Address {
        background: #fff;
        border-radius: 10px;
        padding: 12px;
        box-sizing: border-box;
    }

    .woocommerce-Address-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .woocommerce-Address address {
        font-size: 13px;
        line-height: 1.4;
    }
}

























/* 非 iOS Tablet 才隐藏 after */










/*Dashboard Highlight*/
.dashboard-tabs a.active,
.dashboard-tabs a.active:hover,
.dashboard-tabs a.active:visited {
    background: #ffffff !important;
    background-color: #555555 !important;
    background-image: none !important;

    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 10px 10px !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
}

























/* =========================================================
   7. FINAL OVERRIDE FIX (SAMSUNG / ANDROID CONSISTENCY PATCH)
   不删除原代码，仅做最终强制覆盖
========================================================= */

/* ================================
   1. Dashboard Active 强制统一背景（解决冲突）
   ================================ */
.dashboard-tabs a.active,
.dashboard-tabs a.active:hover,
.dashboard-tabs a.active:visited {

    /* 强制统一背景（解决 background vs background-color 冲突） */
    background: #555555 !important;
    background-color: #555555 !important;

    /* 防止渐变或继承干扰 */
    background-image: none !important;

    color: #ffffff !important;

    border-radius: 0 !important;
    padding: 10px 10px !important;
    font-weight: 900 !important;

    box-shadow: 0 2px 6px rgba(0,0,0,0.85) !important;

    /* ⭐ 关键：避免 Android 渲染抖动 */
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
}


/* ================================
   2. Membership Actions 统一对齐（解决 Samsung 轻微错位）
   ================================ */
td.membership-actions.order-actions,
td.membership-actions {

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 6px !important;

    white-space: normal !important;
    text-align: left !important;

    /* Android 兼容修复 */
    -webkit-box-align: center;
}




/* ================================
   5. Dashboard Tabs 防 Android 1px 错位
   ================================ */
.dashboard-tabs a {

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transform: translateZ(0);
}


/* ================================
   6. 强制统一按钮 box model（避免不同浏览器计算差异）
   ================================ */
.membership-upgrade-box a.button,
td.membership-actions a.button {

    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}





/* =========================================================
   8. ANDROID / SAMSUNG UI SIZE FIX (TOPBAR + DASHBOARD)
   不删除原代码，仅修正安卓放大问题
========================================================= */

/* ================================
   1. 强制关闭 Android 自动字体缩放
   ================================ */
html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}


/* ================================
   2. TOPBAR 统一缩小（Android 专用）
   ================================ */
@media screen and (max-width: 1024px) {

    .topbar-right a {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .topbar-right a::after {
        font-size: 14px !important;
    }
}


/* ================================
   3. DASHBOARD TAB 压缩（Android 更明显）
   ================================ */
@media (max-width: 1024px) {

    .dashboard-tabs {
        padding: 6px 6px !important;
        gap: 6px !important;
    }

    .dashboard-tabs a {
        font-size: 14px !important;
        padding: 8px 4px !important;
        line-height: 1.1 !important;
    }
}


/* ================================
   4. 防止 Android 自动扩大点击区域
   ================================ */
.dashboard-tabs a,
.topbar-right a {

    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;

    /* 防止系统强制放大按钮视觉 */
    min-height: unset !important;
}


/* ================================
   5. Samsung Chromium 字体微调
   ================================ */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    .dashboard-tabs a,
    .topbar-right a {
        font-weight: 500;
        letter-spacing: -0.2px;
    }
}



/* =========================================================
   9. CROSS-DEVICE UI SYSTEM CORE (iOS / Android / Samsung UNIFIED)
   不删除任何原代码，只建立统一渲染基线
========================================================= */


/* ================================
   1. 全局渲染基线锁定（解决 Android 放大）
   ================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* 防止 Samsung / Chrome subpixel 放大差异 */
    font-synthesis: none;
}


/* ================================
   2. UI 统一变量系统（核心设计基准）
   ================================ */
:root {

    /* 字体系统 */
    --ui-font-base: 14px;
    --ui-font-small: 12px;
    --ui-font-large: 16px;

    /* 间距系统 */
    --ui-gap-xs: 4px;
    --ui-gap-sm: 6px;
    --ui-gap-md: 10px;

    /* 按钮系统 */
    --ui-btn-padding: 6px 10px;
    --ui-btn-line: 1.2;

    /* 卡片圆角统一 */
    --ui-radius: 0px;
}


/* ================================
   3. 强制统一 Topbar（跨浏览器一致）
   ================================ */
.topbar-right a {
    font-size: var(--ui-font-base) !important;
    line-height: 1.2 !important;
    display: inline-flex;
    align-items: center;
}


/* ================================
   4. Dashboard Tab 系统化
   ================================ */
.dashboard-tabs {

    gap: var(--ui-gap-sm) !important;
    padding: var(--ui-gap-sm) !important;
}

.dashboard-tabs a {

    font-size: var(--ui-font-base) !important;
    padding: var(--ui-btn-padding) !important;
    line-height: var(--ui-btn-line) !important;

    border-radius: var(--ui-radius) !important;

    /* 防止 Android 自动变高 */
    min-height: unset !important;

    display: flex;
    align-items: center;
    justify-content: center;
}




/* ================================
   6. Table Actions 统一行为（Membership区修复）
   ================================ */
td.membership-actions,
td.membership-actions.order-actions {

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: var(--ui-gap-sm) !important;

    white-space: normal !important;
}


/* ================================
   7. Android / Samsung 额外修复层
   ================================ */
@media screen and (max-width: 1024px) {

    /* 防止字体被放大 */
    body {
        -webkit-text-size-adjust: 100% !important;
    }

    /* Topbar 压缩 */
    .topbar-right a {
        font-size: 13px !important;
    }

    /* Dashboard 更紧凑 */
    .dashboard-tabs {
        padding: 6px !important;
    }

    .dashboard-tabs a {
        font-size: 13px !important;
        padding: 6px 6px !important;
    }
}


/* ================================
   8. iOS vs Android 对齐修正（关键）
   ================================ */
@supports (-webkit-touch-callout: none) {

    /* iOS 专属微调 */
    .dashboard-tabs a {
        letter-spacing: 0;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /* Android Chrome / Samsung */
    .dashboard-tabs a,
    .topbar-right a {
        letter-spacing: -0.2px;
        font-weight: 500;
    }
}


/* ================================
   9. 防止所有设备 hover/active 抖动
   ================================ */
.dashboard-tabs a:active,
.topbar-right a:active {
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
}



/**/
@media (min-width: 769px) and (max-width: 1024px) {

    .topbar-right .divider {
        display: none !important;
    }

    .topbar-right a::after {
        content: none !important;
        display: none !important;
    }
}

/**/
@supports (-webkit-touch-callout: none) {

    /* iOS 不处理任何 after 隐藏 */
}
















/* =========================================================
   MOBILE SAAS TOPBAR: CENTER + COMPACT INSIDE ACCOUNT TOPBAR
========================================================= */

@media (max-width: 1024px) {

    /* =========================
       1. Topbar 容器变成真正 flex 居中
       ========================= */
    .account-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 6px 10px !important;

        overflow: hidden;
    }

    .topbar-right {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important; /* ✔ 间距变小 */

        flex-wrap: nowrap !important;
    }

    /* =========================
       2. SaaS pill button 统一放大 + 居中
       ========================= */
    .topbar-right a {

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 15px !important;  /* ✔ 字体变大 */
        font-weight: 700 !important;

        padding: 6px 10px !important; /* ✔ 更紧凑 */

        line-height: 1 !important;

        border-radius: 999px;

        white-space: nowrap;

        text-align: center;

        -webkit-tap-highlight-color: transparent;
    }

    /* =========================
       3. Credit / Points 内容居中强化
       ========================= */
    .topbar-right a::after {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* =========================
       4. 防止 Android 撑高高度
       ========================= */
    .topbar-right a,
    .account-topbar {
        line-height: 1.1 !important;
    }

    /* =========================
       5. 防止内容跑出 topbar
       ========================= */
    .account-topbar {
        max-width: 100%;
        box-sizing: border-box;
    }
}









/* =========================================================
   MOBILE SAAS TOPBAR: ULTRA COMPACT SPACING TUNING
========================================================= */

@media (max-width: 1024px) {

    /* =========================
       1. 容器间距再收紧
       ========================= */
    .account-topbar {
        padding: 12px 20px !important;  /* ↓ 更紧 */
    }

    .topbar-right {
        gap: 0px !important; /* ✔ 核心：间距缩小 */
    }

    /* =========================
       2. Button 内部压缩
       ========================= */
    .topbar-right a {

        padding: 4px 6px !important; /* ↓ 从6/10 → 更紧 */

        font-size: 16px !important; /* 稍微保持可读性 */

        line-height: 1 !important;

        border-radius: 0px;
    }

    /* =========================
       3. 去掉 Android 额外视觉空白
       ========================= */
    .topbar-right a span,
    .topbar-right a::after {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* =========================
       4. 强制 vertical alignment 紧凑
       ========================= */
    .topbar-right a {
        align-items: center !important;
        justify-content: center !important;
    }

    /* =========================
       5. 防止字体撑高行距（Samsung关键）
       ========================= */
    .topbar-right {
        line-height: 1 !important;
    }
}








/* =========================================================
   iOS TOPBAR ALIGN FIX (Safari / iPhone 专用)
========================================================= */

@media (max-width: 1024px) {

    /* =========================
       1. 强制整体变 flex 对齐（关键）
       ========================= */
    .topbar-right {
        display: flex !important;
        align-items: center !important;  /* ✔ 垂直对齐修复 */
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }

    /* =========================
       2. 所有 item 统一 baseline
       ========================= */
    .topbar-right a,
    .topbar-right .divider {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
        line-height: 1 !important;
    }

    /* =========================
       3. divider 修复（iPhone错位核心原因）
       ========================= */
    .topbar-right .divider {
        display: flex !important;
        align-items: center !important;

        margin: 0 4px !important;
        padding: 0 !important;

        font-size: 12px;
        line-height: 1;
        opacity: 0.4;
    }

    /* =========================
       4. 统一 link 基线（防字体不同造成错位）
       ========================= */
    .topbar-right a {
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* =========================
       5. iOS font rendering fix（关键细节）
       ========================= */
    .topbar-right a {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}







/* =========================================================
   TOPBAR ACTIVE HIGHLIGHT (SAAS STYLE)
========================================================= */

@media (max-width: 1024px) {

    .topbar-right a.active {

        background: #111 !important;
        color: #fff !important;

        font-weight: 800 !important;

        border-radius: 0px;

        padding: 8px 10px !important;

        transform: translateY(-1px);

        box-shadow: 0 2px 8px rgba(0,0,0,0.25);

        transition: all 0.2s ease;
    }

    /* 防止 divider 影响视觉 */
    .topbar-right a.active + .divider {
        opacity: 0 !important;
    }
}











/* =========================================================
   TOPBAR: CREDIT / POINTS ACTIVE = WHITE TEXT STYLE
========================================================= */












/* =========================================================
   DASHBOARD TABS: ENLARGED SAAS NAV SYSTEM
========================================================= */

@media (max-width: 1024px) {

    /* =========================
       1. 整体容器变更高级卡片感
       ========================= */
    .dashboard-tabs {
        padding: 10px 12px !important;

        background: #f7f7f7 !important;

        border-radius: 12px;

        gap: 3px !important;

        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    /* =========================
       2. tab 字体变大（核心）
       ========================= */
    .dashboard-tabs a {

        font-size: 14px !important;   /* ✔ 明显变大 */
        font-weight: 600 !important;

        padding: 10px 12px !important; /* ✔ 高度增加 */

        border-radius: 10px;

        line-height: 1.2 !important;

        text-align: center;

        transition: all 0.2s ease;
    }

    /* =========================
       3. active 状态强化
       ========================= */
    .dashboard-tabs a.active {

        font-size: 14px !important;   /* ✔ active 更大 */

        font-weight: 800 !important;

        background: #111 !important;
        color: #fff !important;

        transform: translateY(-1px);

        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* =========================
       4. hover / touch feedback
       ========================= */
    .dashboard-tabs a:active {
        transform: scale(0.98);
    }

    /* =========================
       5. Android / Samsung 防挤压优化
       ========================= */
    .dashboard-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        overflow: hidden;
    }

    .dashboard-tabs a {
        white-space: nowrap;
        min-width: 0;
    }
}










/* =========================================================
   MEMBERSHIP TABS: COMPACT SAAS SECONDARY NAV
========================================================= */

@media (max-width: 1024px) {

    /* =========================
       1. 整体变紧凑
       ========================= */
    .membership-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;

        gap: 6px !important;

        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        padding: 6px 0 !important;
    }

    /* =========================
       2. 字体缩小（核心）
       ========================= */
    .membership-tabs a {

        font-size: 12px !important;   /* ✔ 明显变小 */
        font-weight: 600 !important;

        padding: 6px 8px !important;

        white-space: nowrap;

        line-height: 1 !important;

        border-radius: 0px;

        flex: 0 0 auto;

        color: #333;
    }

    /* =========================
       3. active 状态保持清晰
       ========================= */
    .membership-tabs a.active {

        font-size: 12px !important;   /* 不放大，保持一致 */
        font-weight: 800 !important;

        background: #111 !important;
        color: #fff !important;

        padding: 6px 10px !important;

        border-radius: 0px;

        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    /* =========================
       4. iOS / Android 滚动优化
       ========================= */
    .membership-tabs::-webkit-scrollbar {
        display: none;
    }
}
















/* =========================================================
   MEMBERSHIP ACTIONS FINAL FIX (TABLE + FLEX HYBRID FIX)
========================================================= */

@media (max-width: 1024px) {

    /* =========================
       1. 强制 td 变成纯 flex container
       ========================= */
    td.membership-actions.order-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        justify-content: flex-start !important;

        gap: 1px !important; /* ✔ 真正生效的gap */

        white-space: nowrap !important;

        width: 100% !important;

        box-sizing: border-box !important;
    }

    /* =========================
       2. button 变成 SaaS fixed pill
       ========================= */
    td.membership-actions.order-actions a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;

        padding: 0px 2px !important;

        line-height: 1 !important;

        margin: 0 !important;

        flex: 0 0 auto !important; /* ✔ 防止被压缩 */

        white-space: nowrap !important;

        transform: translateY(-1px); /* ✔ 你刚刚想要的效果 */
    }

    /* =========================
       3. 防止 Samsung / iPhone shrink
       ========================= */
    td.membership-actions.order-actions a.button {
        min-width: max-content !important;
    }

    /* =========================
       4. View Billing 特殊对齐微调
       ========================= */
    td.membership-actions.order-actions a.view-subscription {
        transform: translateY(-1px);
    }

    /* =========================
       5. 防止 table override width
       ========================= */
    table.memberships {
        table-layout: auto !important;
    }
}








/* =========================================================
   MOBILE: MEMBERSHIP UPGRADE BUTTON ENLARGE FIX
========================================================= */

@media (max-width: 1024px) {

    /* =========================
       1. 容器微调（避免挤压）
       ========================= */
    .membership-upgrade-box {
        display: inline-flex !important;
        align-items: center !important;

        gap: 0px !important;

        transform: translateY(-6px);
    }

    /* =========================
       2. 按钮放大核心
       ========================= */
    .membership-upgrade-box a.button {

        font-size: 11px !important;   /* ✔ 从12 → 14 */
        font-weight: 700 !important;

        padding: 8px 14px !important;  /* ✔ 明显变大（关键） */

        line-height: 1 !important;

        border-radius: 0px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;

        min-height: 34px !important;   /* ✔ 防止 Android 被压扁 */

        transform: translateY(-1px);   /* ✔ 保持你现在视觉对齐 */
    }

    /* =========================
       3. 防止 WooCommerce button override
       ========================= */
    .membership-upgrade-box a.button {
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

    /* =========================
       4. Samsung / Android 修复
       ========================= */
    @supports (-webkit-touch-callout: none) {
        .membership-upgrade-box a.button {
            font-size: 14px !important;
        }
    }
}











/* =========================================================
   MEMBERSHIP ACTIONS: CANCEL + VIEW ALIGN FIX
========================================================= */

@media (max-width: 1024px) {

    td.membership-actions.order-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    /* 所有 action button 统一 */
    td.membership-actions.order-actions a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;
        font-weight: 600 !important;

        padding: 5px 2px !important;

        line-height: 1 !important;
        margin: 0 !important;

        transform: translateY(-1px) !important; /* 全部统一 */
        min-height: 30px !important;

        white-space: nowrap !important;
    }

    /* 取消单独干扰 */
    td.membership-actions a.cancel,
    td.membership-actions a.view {
        order: unset !important;
        float: none !important;
        transform: translateY(-1px) !important;
    }
}










/* =========================================================
   SINGLE CELL FIX: UPGRADE + CANCEL ALIGN ONLY
========================================================= */

@media (max-width: 1024px) {

    /* 只影响包含 membership-upgrade-box 的 td */
    td:has(.membership-upgrade-box) {

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 6px !important;

        white-space: nowrap !important;
    }

    /* upgrade box 统一基线 */
    .membership-upgrade-box {
        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important; /* ✔ 清掉旧偏移 */
    }

    /* downgrade button */
    .membership-upgrade-box a.button {
        font-size: 12px !important;
        font-weight: 600 !important;

        padding: 5px 10px !important;

        line-height: 1 !important;

        transform: none !important; /* ✔ 关键：取消所有抖动 */
    }

    /* cancel button */
    td a.button.cancel {
        font-size: 12px !important;
        font-weight: 600 !important;

        padding: 11px 10px !important;

        line-height: 1 !important;

        margin: 0 !important;

        transform: none !important; /* ✔ 关键对齐 */
    }
}



















/* =========================================================
   NON-iOS TABLET: FORCE REMOVE CREDIT / POINTS AFTER
========================================================= */







/**/
/* =========================================================
   TOPBAR LEFT TEXT UPPERCASE
========================================================= */

.topbar-left a.membership-link {
    text-transform: uppercase !important;
}















/* =========================================================
   FINAL MEMBERSHIP ACTION ALIGN FIX
   Upgrade / Downgrade / Cancel 完全对齐
========================================================= */

@media (max-width: 1024px) {

    /* 整个 td */
    td:has(.membership-upgrade-box) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;

        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    /* Upgrade + Downgrade group */
    .membership-upgrade-box {
        display: inline-flex !important;
        align-items: center !important;
        gap: 11px !important;

        margin: 0 !important;
        padding: 0 !important;

        vertical-align: middle !important;
    }

    /* 所有按钮统一 */
    .membership-upgrade-box a.button,
    td:has(.membership-upgrade-box) > a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 12px !important;
        font-weight: 600 !important;

        padding: 8px 12px !important;
        min-height: 34px !important;

        line-height: 1 !important;
        margin: 0 !important;

        transform: none !important;
        box-sizing: border-box !important;

        white-space: nowrap !important;
    }

    /* Cancel 单独保持一致 */
    td:has(.membership-upgrade-box) > a.cancel {
        padding: 8px 12px !important;
    }
}






















/**/

@media (max-width: 1024px) {

    td.membership-actions.order-actions a.button,
    td.membership-actions.order-actions a.cancel,
    td.membership-actions.order-actions a.change_payment_method,
    td.membership-actions.order-actions a.subscription_renewal_early {

        font-size: 12px !important;
        padding: 6px 8px !important;
        line-height: 1 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;

        transform: none !important;

        min-height: 0 !important;
    }
}