.elementor-250404 .elementor-element.elementor-element-52841c5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-250404 .elementor-element.elementor-element-de7b903{text-align:center;}.elementor-250404 .elementor-element.elementor-element-de7b903 .elementor-heading-title{color:var( --e-global-color-primary );}.elementor-250404 .elementor-element.elementor-element-8f27eb9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-250404 .elementor-element.elementor-element-4b31980 .elementor-button{font-size:14px;}.elementor-250404 .elementor-element.elementor-element-b94f8d7 .elementor-button{font-size:14px;}.elementor-250404 .elementor-element.elementor-element-5883662 .elementor-button{font-size:14px;}.elementor-250404 .elementor-element.elementor-element-e5ac844 .elementor-button{font-size:14px;}.elementor-250404 .elementor-element.elementor-element-c600d88 .elementor-button{font-size:14px;}.elementor-250404 .elementor-element.elementor-element-ba01bc0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-250404 .elementor-element.elementor-element-6514678{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--margin-top:40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-250404 .elementor-element.elementor-element-004947f{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-250404 .elementor-element.elementor-element-9806161{width:100%;max-width:100%;}@media(min-width:1025px){.elementor-250404 .elementor-element.elementor-element-6514678{--width:1440px;}.elementor-250404 .elementor-element.elementor-element-004947f{--width:60%;}}/* Start custom CSS for shortcode, class: .elementor-element-9806161 *//* ===========================================
   1. CLEANUP & HIDING (Maintained)
   =========================================== */
#mepr-account-nav, 
#mepr-account-welcome-message,
.mepr-account-payments .mepr-account-table th.mepr-invoice,
.mepr-account-payments .mepr-account-table td.mepr-invoice,
.mepr-account-transactions .mepr-account-table th.mepr-invoice,
.mepr-account-transactions .mepr-account-table td.mepr-invoice {
    display: none !important;
}

/* ===========================================
   2. TABLE STRUCTURE (Removing Column Lines)
   =========================================== */
.mepr-account-table {
    width: 100% !important;
    border-collapse: collapse; /* Essential for removing double lines */
    margin: 2rem 0;
    border: none; /* Removes outer border */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Header Styling - No vertical lines */
.mepr-account-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 16px 20px;
    border-bottom: 2px solid #f1f5f9; /* Only bottom line */
    text-align: left;
}

/* Cell Styling - No vertical lines */
.mepr-account-table td {
    padding: 20px;
    vertical-align: middle;
    background: #fff;
    border-bottom: 1px solid #f1f5f9; /* Only horizontal separator */
    color: #334155;
    font-size: 14px;
}

/* Row Hover Effect for Interactivity */
.mepr-account-table tr:hover td {
    background-color: #fcfdfe;
}

/* ===========================================
   3. CONTENT STYLING
   =========================================== */

/* Membership Title & ID */
.mepr-account-product a {
    font-weight: 700;
    color: #0f172a !important;
    text-decoration: none;
    display: block;
    margin-bottom: 4px;
}

.mepr-account-subscr-id {
    font-size: 11px;
    color: #94a3b8;
    font-style: italic;
}

/* Status Pill (Centered like image) */
.mepr-active {
    background-color: #f0fdf4;
    color: #166534;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid #dcfce7;
}

/* Billing Info */
.mepr-account-rebill {
    font-size: 12px;
    color: #64748b;
    font-style: italic;
    margin-top: 4px;
}

/* ===========================================
   4. STACKED ACTIONS (Single Column)
   =========================================== */
.mepr-account-actions {
    display: flex;
    flex-direction: column; /* Stacks buttons vertically */
    gap: 8px; /* Space between buttons */
    align-items: flex-start; /* Aligns buttons to the left of the cell */
    max-width: 140px; /* Prevents buttons from being too wide */
}

.mepr-account-row-action {
    display: block;
    width: 100%; /* Makes all buttons equal width */
    text-align: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #475569 !important;
}

.mepr-account-row-action:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

/* Specific Cancel Button Style */
.mepr-account-cancel {
    color: #ef4444 !important;
    border-color: #fee2e2;
}

.mepr-account-cancel:hover {
    background: #fef2f2;
    border-color: #fecaca;
}

/* ===========================================
   5. RESPONSIVE (Mobile Cards)
   =========================================== */
@media (max-width: 768px) {
    .mepr-account-table thead { display: none; }
    .mepr-account-table tr { 
        display: block; 
        margin-bottom: 20px; 
        border: 1px solid #f1f5f9; 
        border-radius: 12px;
        padding: 10px;
    }
    .mepr-account-table td { 
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        border-bottom: 1px solid #f8fafc;
    }
    .mepr-account-table td::before { 
        content: attr(data-label); 
        font-weight: 600; 
        font-size: 12px; 
        color: #94a3b8;
    }
    .mepr-account-actions { 
        width: 100%; 
        max-width: 100%; 
    }
}


/* ===========================================
   TEXT REPLACEMENT: Update -> Update Payment
   =========================================== */

/* 1. Hide the original "Update" text */
.mepr-account-update {
    font-size: 0 !important; /* Hides original text */
    visibility: hidden;
    position: relative;
    padding: 0 !important; /* Reset padding to avoid double spacing */
    border: none !important; /* Hide original border */
}

/* 2. Inject and style the new "Update Payment" text */
.mepr-account-update::after {
    content: "Update Payment";
    font-size: 13px; /* Restore font size */
    visibility: visible;
    display: block;
    padding: 8px 16px; /* Re-apply button padding */
    background: #fff;
    color: #475569 !important;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-align: center;
    width: 100%; /* Match the width of other stacked buttons */
    box-sizing: border-box;
}

/* 3. Handle Hover State for the new text */
.mepr-account-update:hover::after {
    background: #f8fafc;
    border-color: #cbd5e1;
}/* End custom CSS */