body.page-template-page-account .mp_wrapper:has(form#mepr_account_form) {
    position: relative;
}

body.page-template-page-account form#mepr_account_form {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--one-point-five-spacer);
    border: 1px solid;
    border-radius: var(--one-spacer);
    padding: var(--one-point-five-spacer);   
}

body.page-template-page-account form#mepr_account_form label {
    font: var(--bold-small-pressura-mono);
}

body.page-template-page-account #mepr-account-nav {
    margin: 0 !important;
    display: flex;
}

body.page-template-page-account #mepr-account-welcome-message {
    display: none;
}

body.page-template-page-account .mepr-nav-item a {
    display: inline-flex;
    background-color: var(--wp--preset--color--d-blue);
    color: var(--wp--preset--color--off-white) !important;
    border: none;
    text-transform: uppercase;
    padding: var(--zero-point-five-spacer);
    text-decoration: none;
    font: var(--normal-small-pressura-mono) !important;
}

body.page-template-page-account .mepr-nav-item.mepr-active-nav-tab a {
    background-color: var(--wp--preset--color--off-black);
    color: var(--wp--preset--color--off-white) !important;
}

body.page-template-page-account .mepr-nav-item a#mepr-account-logout {
    background-color: var(--wp--preset--color--red);
    color: var(--wp--preset--color--off-black) !important;
}

/* Grid settings for specific fields */

body.page-template-page-account form#mepr_account_form .mepr_first_name,
body.page-template-page-account form#mepr_account_form .mepr_last_name,
body.page-template-page-account form#mepr_account_form .mepr_mepr-address-one,
body.page-template-page-account form#mepr_account_form .mepr_mepr-address-two {
    grid-column: span 6;
}

body.page-template-page-account .mepr_email {
    grid-column: span 12;
}

body.page-template-page-account form#mepr_account_form .mepr_mepr-address-city,
body.page-template-page-account form#mepr_account_form .mepr_mepr-address-country,
body.page-template-page-account form#mepr_account_form .mepr_mepr-address-state,
body.page-template-page-account form#mepr_account_form .mepr_mepr-address-zip {
    grid-column: span 6;
}
@media screen and (min-width: 1080px) {
    body.page-template-page-account form#mepr_account_form .mepr_mepr-address-city,
    body.page-template-page-account form#mepr_account_form .mepr_mepr-address-country,
    body.page-template-page-account form#mepr_account_form .mepr_mepr-address-state,
    body.page-template-page-account form#mepr_account_form .mepr_mepr-address-zip {
        grid-column: span 3;
    }
}

body.page-template-page-account .mepr_spacer {
    display: none;
}

body.page-template-page-account form#mepr_account_form .mepr-submit {
    grid-column: span 12 !important;
    width: fit-content !important;
    background-color: var(--wp--preset--color--orange) !important;
    color: var(--wp--preset--color--off-white) !important;
    border: none !important;
    border-radius: 5px !important;
    text-transform: uppercase !important;
    padding: var(--zero-point-five-spacer) !important;
    font: var(--bold-small-pressura-mono) !important;
}

body.page-template-page-account form#mepr_account_form .mp-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--zero-point-five-spacer);
}

body.page-template-page-account .mepr-account-change-password a {
    position: absolute;
    right: var(--one-point-five-spacer);
    bottom: var(--one-point-five-spacer);
    background-color: var(--wp--preset--color--d-blue);
    color: var(--wp--preset--color--off-white-always) !important;
    border-radius: 5px;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: var(--zero-point-five-spacer) !important;
    font: var(--bold-small-pressura-mono) !important;
}

/* 'Subscriptions' and 'Payments' tabs */

body.page-template-page-account #mepr-account-subscriptions-table *,
body.page-template-page-account #mepr-account-payments-table * {
    font-size: var(--wp--preset--font-size--small);
    font-family: var(--wp--preset--font-family--pressura-mono);
    border: none;
    text-align: left;
    padding: 0;
    margin: 0;
    background-color: transparent;
}

body.page-template-page-account #mepr-account-subscriptions-table,
body.page-template-page-account #mepr-account-payments-table {
    border: 1px solid;
    border-radius: var(--one-spacer);
    border-collapse: inherit;
    padding: var(--one-point-five-spacer);
}

/* Matching breakpoint to Memberpress default */
@media screen and (min-width: 601px) {
    body.page-template-page-account #mepr-account-subscriptions-table thead tr th,
    body.page-template-page-account #mepr-account-payments-table thead tr th {
        padding-bottom: var(--one-spacer) !important;
        border-bottom: 1px solid !important;
        padding-right: var(--one-spacer);
    }
    body.page-template-page-account #mepr-account-subscriptions-table tbody tr td,
    body.page-template-page-account #mepr-account-payments-table tbody tr td {
        padding-top: var(--one-spacer) !important;
        padding-right: var(--one-spacer);
    }
}
@media screen and (max-width: 600px) {
    body.page-template-page-account #mepr-account-subscriptions-table tbody tr td,
    body.page-template-page-account #mepr-account-payments-table tbody tr td {
        display: flex;
        gap: var(--one-point-five-spacer);
        align-items: baseline;
    }
    body.page-template-page-account #mepr-account-subscriptions-table tbody tr td:not(:last-child),
    body.page-template-page-account #mepr-account-payments-table tbody tr td:not(:last-child) {
        margin-bottom: var(--one-point-five-spacer);
        padding-bottom: var(--one-point-five-spacer);;
        border-bottom: 1px solid;
        border-top: 0 !important;
    }
    body.page-template-page-account #mepr-account-subscriptions-table tbody tr td:last-child,
    body.page-template-page-account #mepr-account-payments-table tbody tr td:last-child {
        border-top: 0 !important;
    }
}

body.page-template-page-account #mepr-account-subscriptions-table tbody tr td div,
body.page-template-page-account #mepr-account-payments-table tbody tr td div {
    font-style: normal;
    font-weight: normal;
    color: inherit !important;
}

body.page-template-page-account #mepr-account-subscriptions-table tbody tr td div:first-child,
body.page-template-page-account #mepr-account-payments-table tbody tr td div:first-child {
    font-weight: bold;
}

/* Flex layout for action items in 'Subscription' tab */
body.page-template-page-account .mepr-account-actions {
    display: flex;
    flex-direction: column;
    gap: var(--zero-point-five-spacer);
}

/* Change button in 'Subscription' tab */
body.page-template-page-account .mepr-open-upgrade-popup {
    background-color: var(--wp--preset--color--d-blue) !important;
    color: var(--wp--preset--color--off-white-always) !important;
    border-radius: 5px;
    font: var(--bold-small-pressura-mono) !important;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: var(--zero-point-five-spacer) !important;
    width: fit-content;
}

/* Cancel button in 'Subscriptions' tab */
body.page-template-page-account .mepr-open-cancel-confirm.mepr-account-row-action.mepr-account-cancel {
    background-color: var(--wp--preset--color--red) !important;
    color: var(--wp--preset--color--off-white-always) !important;
    border-radius: 5px;
    font: var(--bold-small-pressura-mono) !important;
    text-transform: uppercase;
    text-decoration: none !important;
    padding: var(--zero-point-five-spacer) !important;
    width: fit-content;
}

/* Borders for alternating rows in tables on 'Subscriptions' and 'Payments' tabs */
body.page-template-page-account tr:not(:last-child) td {
    padding-bottom: var(--one-spacer) !important;
}

/* Borders for alternating rows in tables on 'Subscriptions' and 'Payments' tabs */
body.page-template-page-account tr:not(:first-child) td {
    border-top: 1px solid !important;
}

/* Successfully updated message */
body.page-template-page-account .mepr_updated {
    color: var(--wp--preset--color--d-blue) !important;
    background-color: var(--wp--preset--color--off-black) !important;
    padding: var(--zero-point-five-spacer) !important;
    width: fit-content !important;
    font: var(--bold-small-pressura-mono) !important;
    border: none !important;
    text-transform: uppercase !important;
}

/* New Password Form/Page */
body.page-template-page-account .mepr-newpassword-form label,
body.page-template-page-account .mepr-newpassword-form .mepr-submit,
body.page-template-page-account .mepr-newpassword-form .mepr-submit + a {
    font: var(--bold-small-pressura-mono);
}

body.page-template-page-account .mepr-newpassword-form .mepr-submit,
body.page-template-page-account .mepr-newpassword-form .mepr-submit + a {
    display: inline-flex !important;
    padding: var(--zero-point-five-spacer) !important;
    border: none !important;
    border-radius: var(--zero-point-five-spacer) !important;
    text-transform: uppercase !important;
}

body.page-template-page-account .mepr-newpassword-form .mepr-submit {
    background: var(--wp--preset--color--d-blue) !important;
    color: var(--wp--preset--color--off-black) !important;
}

body.page-template-page-account .mepr-newpassword-form .mepr-submit + a {
    background: var(--wp--preset--color--red) !important;
    color: var(--wp--preset--color--off-black) !important;
    text-decoration: none !important;
}

/* Password 'error' message */
body.page-template-page-account .mepr-newpassword-form .mepr-form-has-errors {
    padding: var(--zero-point-five-spacer) !important;
    background-color: var(--wp--preset--color--red) !important;
    color: var(--wp--preset--color--off-black) !important;
    width: fit-content !important;
    margin-top: var(--one-spacer) !important;
    text-transform: uppercase !important;
    font: var(--bold-small-pressura-mono) !important;
}

/* Password strength live judger */
body.page-template-page-account .mepr-newpassword-form .mp-password-strength-display {
    padding: var(--zero-point-five-spacer) !important;
    width: fit-content !important;
    text-transform: uppercase !important;
    font: var(--bold-small-pressura-mono) !important;
    border: none !important;
}

body.page-template-page-account .mepr-newpassword-form .mp-password-strength-display + span * {
    font: var(--bold-small-pressura-mono) !important;
}

body.page-template-page-account .mepr-subscription-row:has(.mepr-inactive) {
    opacity: 0.5;
}

/* Stripe card portal matting */
body.page-template-page-account .mepr-stripe-elements {
    background: var(--wp--preset--color--off-black);
    padding: var(--one-point-five-spacer);
    border-radius: var(--zero-point-five-spacer);
    display: flex;
    flex-direction: column;
    gap: var(--one-point-five-spacer);
    margin-bottom: var(--one-point-five-spacer);
};

/* Submit button on card update page */
body.page-template-page-account .mepr_update_account_table .mepr-submit {
    font: var(--bold-small-pressura-mono);
    display: inline-flex !important;
    padding: var(--zero-point-five-spacer) !important;
    border: none !important;
    border-radius: var(--zero-point-five-spacer) !important;
    text-transform: uppercase !important;
    background: var(--wp--preset--color--orange) !important;
    color: var(--wp--preset--color--off-white) !important;
    text-decoration: none !important;
}