.elementor-156 .elementor-element.elementor-element-527b02f1{--display:flex;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}/* Start custom CSS for container, class: .elementor-element-527b02f1 *//* ==========================================================================
   PMPro Pricing Levels - Table Override & Card Layout
   ========================================================================== */

/* 1. Nuke the Legacy PMPro Table Container */
table#pmpro_levels_table,
table.pmpro_levels_table {
    display: flex !important;
    flex-direction: column !important;
    border: none !important;
    background: transparent !important;
    max-width: 900px !important;
    margin: 40px auto !important;
}

/* 2. Hide the "Level" and "Price" Table Headers completely */
table#pmpro_levels_table thead,
table.pmpro_levels_table thead {
    display: none !important;
    visibility: hidden !important;
}

/* 3. Turn the table body into a flex wrapper for side-by-side cards */
table#pmpro_levels_table tbody,
table.pmpro_levels_table tbody {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 4. Turn the table rows (<tr>) into the White Cards */
table#pmpro_levels_table tr,
table.pmpro_levels_table tr {
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 25px rgba(0,0,0,0.06) !important;
    border: 1px solid #eaeaea !important;
    padding: 40px !important;
    width: calc(50% - 15px) !important; 
    box-sizing: border-box !important;
}

/* Mobile Responsive - Drop cards to 1 Column */
@media (max-width: 768px) {
    table#pmpro_levels_table tr,
    table.pmpro_levels_table tr {
        width: 100% !important;
    }
}

/* 5. Convert table cells (<td>) into full-width block elements */
table#pmpro_levels_table td,
table.pmpro_levels_table td {
    display: block !important;
    width: 100% !important;
    border: none !important;
    padding: 0 !important;
    text-align: center !important;
}

/* 6. Style the Titles (Free / Monthly) */
table#pmpro_levels_table td h2,
table.pmpro_levels_table td h2 {
    font-size: 24px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid #f1f1f1 !important;
}

/* Style the Price Text */
table#pmpro_levels_table td p.pmpro_level-price,
table.pmpro_levels_table td p.pmpro_level-price {
    font-size: 16px !important;
    color: #4a4a4a !important;
    margin-bottom: 20px !important;
}

/* 7. Push the Select Button to the very bottom of the card */
table#pmpro_levels_table td:last-child,
table.pmpro_levels_table td:last-child {
    margin-top: auto !important; 
    padding-top: 20px !important;
}

/* 8. The Green Select Button */
table#pmpro_levels_table a.pmpro_btn-select,
table.pmpro_levels_table a.pmpro_btn-select {
    display: block !important;
    width: 100% !important;
    background-color: #527c66 !important; /* Green matching checkout */
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 16px 20px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.2s ease !important;
}

table#pmpro_levels_table a.pmpro_btn-select:hover,
table.pmpro_levels_table a.pmpro_btn-select:hover {
    background-color: #426653 !important;
}/* End custom CSS */