/* ==========================================================================
   PAID MEMBERSHIPS PRO (PMPRO) CLEAN MINIMAL RESPONSIVE STYLES
   VertualHands Theme - Clean Dark SaaS Edition (v14.2)
   ========================================================================== */

/* Root variables overrides for PMPro v3.0+ CSS variable system */
:root {
    --pmpro-bg: transparent !important;
    --pmpro-card-bg: transparent !important;
    --pmpro-box-bg: transparent !important;
    --pmpro-section-bg: transparent !important;
    --pmpro-field-bg: #0f172a !important;
    --pmpro-text-color: #ffffff !important;
    --pmpro-body-text: #ffffff !important;
    --pmpro-heading-text: #ffffff !important;
    --pmpro-primary: #2563eb !important;
    --pmpro-primary-hover: #1d4ed8 !important;
    --pmpro-accent: #2563eb !important;
    --pmpro-border-color: #1e293b !important;
}

/* Nuclear transparent override — covers ALL possible PMPro v3 section/card/wrapper backgrounds (excluding html/body) */
:not(html):not(body)[class*="pmpro"],
:not(html):not(body)[id*="pmpro"] {
    background-color: transparent !important;
}

/* Re-apply dark background ONLY to actual input fields (not wrappers) */
[class*="pmpro"] input[type="text"],
[class*="pmpro"] input[type="password"],
[class*="pmpro"] input[type="email"],
[class*="pmpro"] input[type="number"],
[class*="pmpro"] input[type="tel"],
[class*="pmpro"] select,
[class*="pmpro"] textarea,
[id*="pmpro"] input[type="text"],
[id*="pmpro"] input[type="password"],
[id*="pmpro"] input[type="email"],
[id*="pmpro"] select,
[id*="pmpro"] textarea {
    background-color: #0f172a !important;
}

/* Global text & background settings.
   Note: .pmpro_box, #pmpro_member_profile_edit, #pmpro_profile_form etc. are
   handled in dedicated rules below — not listed here to avoid conflicts. */
.pmpro_content,
#pmpro_form,
.pmpro-level-table,
.pmpro_invoice_wrap,
.pmpro_account_wrap,
.pmpro_checkout,
.pmpro_account,
#pmpro_levels,
#pmpro_level_cost,
.pmpro_message,
.pmpro_invoice,
.pmpro_cancellation,
.pmpro_confirmation_wrap,
.pmpro_billing_wrap,
div.pmpro-member-profile-wrap,
.pmpro_member-profile-wrap,
.pmpro_member_profile_wrap,
div.pmpro-member-profile-edit,
.pmpro_member-profile-edit,
.pmpro_member_profile_edit,
.pmpro_login_wrap,
.pmpro_login-form {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Checkout/account boxes — fully transparent, just a subtle border for structure.
   The dark body/page background is already set via body:has([class*="pmpro"]) rule below.
   Profile-edit boxes are also transparent (handled separately at line ~124). */
.pmpro_box,
.pmpro_card,
.pmpro_form_card,
.pmpro_checkout-fields,
.pmpro_checkout-fields-card,
fieldset.pmpro_checkout-fields,
#pmpro_form fieldset,
#pmpro_form div.pmpro_checkout-fields,
.pmpro_account_information_fields,
.pmpro_billing_address_fields,
.pmpro_payment_information_fields,
#pmpro_account_information_fields,
#pmpro_billing_address_fields,
#pmpro_payment_information_fields,
.pmpro_checkout-field-gateway,
#pmpro_gateway_fields,
.pmpro_confirmation_wrap .pmpro_box,
.pmpro_billing_wrap .pmpro_box,
.pmpro_account .pmpro_box,
.pmpro_cancellation_wrap .pmpro_box,
.pmpro_invoice_wrap .pmpro_box,
.pmpro_login_wrap .pmpro_box,
.pmpro_login-form .pmpro_box {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(30, 41, 59, 0.6) !important;
    border-radius: 12px !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Membership Information card on checkout — transparent so dark page bg shows through */
.pmpro_membership_information_fields,
#pmpro_membership_information_fields {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid rgba(30, 41, 59, 0.5) !important;
    border-radius: 12px !important;
    padding: 28px !important;
    margin-bottom: 24px !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* ---- Profile/account-edit pages: transparent boxes so body bg shows ---- */
div.pmpro-member-profile-wrap .pmpro_box,
.pmpro_member-profile-wrap .pmpro_box,
.pmpro_member_profile_wrap .pmpro_box,
div.pmpro-member-profile-edit .pmpro_box,
.pmpro_member-profile-edit .pmpro_box,
.pmpro_member_profile_edit .pmpro_box,
#pmpro_member_profile_edit,
#pmpro_member-profile-edit,
#pmpro_profile_form,
.pmpro_profile_form,
form.pmpro_form {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Headings */
.pmpro_content h1,
.pmpro_content h2,
.pmpro_content h3,
.pmpro_content h4,
.pmpro_checkout h1,
.pmpro_checkout_wrap h1,
.pmpro_account_wrap h1,
.pmpro_invoice_wrap h1,
.pmpro_cancellation_wrap h1,
.pmpro_confirmation_wrap h1,
.pmpro_billing_wrap h1,
div.pmpro-member-profile-wrap h1,
.pmpro_login_wrap h1,
#pmpro_levels h1,
h1.entry-title,
h1.pmpro_checkout-title,
.pmpro_card h1,
.pmpro_card h2,
.pmpro_card h3,
.pmpro_card h4,
.pmpro_checkout-fields legend {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    border: none !important;
}

/* Text and Labels */
.pmpro_content p,
.pmpro_content label,
.pmpro_content span,
.pmpro_content li,
.pmpro_checkout p,
.pmpro_checkout label,
#pmpro_form label,
.pmpro_card p,
.pmpro_card label,
.pmpro_checkout-fields label,
fieldset.pmpro_checkout-fields label,
.pmpro_account p,
.pmpro_account label,
.pmpro_account span,
.pmpro_invoice_wrap p,
.pmpro_invoice_wrap label,
.pmpro_invoice_wrap span,
.pmpro_cancellation_wrap p,
.pmpro_cancellation_wrap label,
.pmpro_confirmation_wrap p,
.pmpro_confirmation_wrap label,
.pmpro_billing_wrap p,
.pmpro_billing_wrap label,
div.pmpro-member-profile-wrap p,
div.pmpro-member-profile-wrap label,
.pmpro_member-profile-wrap p,
.pmpro_member-profile-wrap label,
.pmpro_member_profile_wrap p,
.pmpro_member_profile_wrap label,
div.pmpro-member-profile-edit p,
div.pmpro-member-profile-edit label,
.pmpro_member-profile-edit p,
.pmpro_member-profile-edit label,
.pmpro_member_profile_edit p,
.pmpro_member_profile_edit label,
#pmpro_member_profile_edit p,
#pmpro_member_profile_edit label,
#pmpro_member-profile-edit p,
#pmpro_member-profile-edit label,
#pmpro_profile_form p,
#pmpro_profile_form label,
.pmpro_login_wrap p,
.pmpro_login_wrap label {
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

/* Input Fields */
.pmpro_content input,
.pmpro_content select,
.pmpro_content textarea,
.pmpro_checkout input,
.pmpro_checkout select,
.pmpro_checkout textarea,
#pmpro_form input,
#pmpro_form select,
#pmpro_form textarea,
form#loginform input,
.login form input,
.pmpro_login_wrap input,
.pmpro_login_wrap form input,
.pmpro_login-form input,
div.pmpro-member-profile-edit input,
div.pmpro-member-profile-edit select,
div.pmpro-member-profile-edit textarea,
.pmpro_member-profile-edit input,
.pmpro_member-profile-edit select,
.pmpro_member-profile-edit textarea,
.pmpro_member_profile_edit input,
.pmpro_member_profile_edit select,
.pmpro_member_profile_edit textarea,
#pmpro_member_profile_edit input,
#pmpro_member_profile_edit select,
#pmpro_member_profile_edit textarea,
#pmpro_member-profile-edit input,
#pmpro_member-profile-edit select,
#pmpro_member-profile-edit textarea,
#pmpro_profile_form input,
#pmpro_profile_form select,
#pmpro_profile_form textarea,
.pmpro_form input,
.pmpro_form select,
.pmpro_form textarea {
    background: #0f172a !important; /* dark slate input background */
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 0.95rem !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Fix browser autocomplete/autofill styling to prevent white backgrounds and invisible text */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.pmpro_content input:focus,
.pmpro_checkout input:focus,
#pmpro_form input:focus,
form#loginform input:focus {
    border-color: #2563eb !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
}

/* Select options */
.pmpro_content select option,
#pmpro_form select option {
    background: #0f172a !important;
    color: #ffffff !important;
}

/* Custom Login Form Wrapper Styling */
.pmpro_login_wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

form#loginform,
.login form,
.pmpro_login_wrap form,
.pmpro_login-form form {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #1e293b !important;
    border-radius: 12px !important;
    padding: 32px !important;
    color: #ffffff !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Remove login form container border/background on mobile so it doesn't look compressed */
@media screen and (max-width: 767px) {
    form#loginform,
    .login form,
    .pmpro_login_wrap form,
    .pmpro_login-form form {
        border: none !important;
        border-radius: 0 !important;
        padding: 16px 0 !important;
        background: transparent !important;
    }
}

/* Lost Password paragraph container — pull inside the card visually */
.pmpro_login_wrap > p,
.pmpro_login_wrap .login-lost-password,
#loginform + p {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Show Password button — see the consolidated block further below */

/* Primary Button (Blue Theme Accents) */
.pmpro_btn,
.pmpro_btn:link,
.pmpro_btn:visited,
a.pmpro_btn,
a.pmpro_btn-select,
input[type="submit"].pmpro_btn,
#pmpro_submit_span input[type="submit"],
.pmpro_btn-submit,
body .pmpro-member-profile-edit input[type="submit"],
form#loginform input[type="submit"] {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.2s ease-in-out !important;
    width: auto !important;
}

.pmpro_btn:hover,
a.pmpro_btn:hover,
a.pmpro_btn-select:hover,
input[type="submit"].pmpro_btn:hover,
#pmpro_submit_span input[type="submit"]:hover,
form#loginform input[type="submit"]:hover {
    background: linear-gradient(135deg, #1d4ed8, #1e40af) !important;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Secondary / Cancel Buttons */
.pmpro_actions_nav a,
a.pmpro_btn-secondary {
    background: #334155 !important;
    color: #ffffff !important;
    border: 1px solid #475569 !important;
    box-shadow: none !important;
}

.pmpro_actions_nav a:hover,
a.pmpro_btn-secondary:hover {
    background: #475569 !important;
}

/* Cancel / Downgrade membership buttons (Danger fallback) */
.pmpro_content .pmpro_actionlinks a[href*="cancel"],
.pmpro_content a.pmpro_btn-cancel,
.pmpro_account a.pmpro_btn-cancel {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2) !important;
}

.pmpro_content .pmpro_actionlinks a[href*="cancel"]:hover,
.pmpro_content a.pmpro_btn-cancel:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
}

/* Links inside PMPro pages - styled as clean white text per user request */
.pmpro_content a,
.pmpro_checkout a,
.pmpro_login_wrap a,
#pmpro_form a,
#loginform a,
.pmpro_account a,
.pmpro_account_wrap a,
.pmpro_invoice_wrap a,
.pmpro_cancellation_wrap a,
.pmpro_confirmation_wrap a,
.pmpro_billing_wrap a,
div.pmpro-member-profile-wrap a,
.pmpro_member-profile-wrap a,
.pmpro_member_profile_wrap a,
div.pmpro-member-profile-edit a,
.pmpro_member-profile-edit a,
.pmpro_actionlinks a,
#pmpro_account a,
#pmpro_account_orders_list a,
[class*="pmpro"] a:not([class*="btn"]):not([class*="button"]),
[id*="pmpro"] a:not([class*="btn"]):not([class*="button"]),
.pmpro_table a {
    color: #ffffff !important;
    text-decoration: none !important;
}

.pmpro_content a:hover,
.pmpro_checkout a:hover,
.pmpro_login_wrap a:hover,
#pmpro_form a:hover,
#loginform a:hover,
.pmpro_account a:hover,
.pmpro_account_wrap a:hover,
.pmpro_invoice_wrap a:hover,
.pmpro_cancellation_wrap a:hover,
.pmpro_confirmation_wrap a:hover,
.pmpro_billing_wrap a:hover,
div.pmpro-member-profile-wrap a:hover,
div.pmpro-member-profile-edit a:hover,
.pmpro_actionlinks a:hover,
#pmpro_account a:hover,
#pmpro_account_orders_list a:hover,
[class*="pmpro"] a:not([class*="btn"]):not([class*="button"]):hover,
[id*="pmpro"] a:not([class*="btn"]):not([class*="button"]):hover,
.pmpro_table a:hover {
    color: #00e5ff !important;
    text-decoration: underline !important;
}


/* Messages & Alerts */
.pmpro_message,
.pmpro_error,
.pmpro_success {
    border-radius: 8px !important;
    padding: 14px 20px !important;
    margin-bottom: 20px !important;
    border: 1px solid transparent !important;
}

.pmpro_message {
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
}

.pmpro_error {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

.pmpro_success {
    background: rgba(16, 185, 129, 0.08) !important;
    border-color: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
}

/* PMPro Table Layouts & Order History Custom styling */
table.pmpro_table,
.pmpro_table,
.pmpro_account-orders,
#pmpro_account-orders,
#pmpro_account_orders_list {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    background-color: transparent !important;
}

table.pmpro_table tr,
.pmpro_table tr,
table.pmpro_table tr:nth-child(odd),
table.pmpro_table tr:nth-child(even),
.pmpro_table tr:nth-child(odd),
.pmpro_table tr:nth-child(even) {
    background: transparent !important;
    background-color: transparent !important;
}

table.pmpro_table th,
.pmpro_table th {
    background: #0f172a !important; /* Keep header slightly dark slate for contrast */
    color: #ffffff !important;
    text-align: left !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #1e293b !important;
}

table.pmpro_table td,
.pmpro_table td,
.pmpro_table tbody tr:nth-child(odd) td,
.pmpro_table tbody tr:nth-child(even) td,
table.pmpro_table tbody tr:nth-child(odd) td,
table.pmpro_table tbody tr:nth-child(even) td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #1e293b !important;
    color: #e2e8f0 !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure links in tables are white (consistent with global link rule) */
.pmpro_table td a,
table.pmpro_table td a,
#pmpro_account_orders_list td a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-decoration: none !important;
}

.pmpro_table td a:hover,
table.pmpro_table td a:hover,
#pmpro_account_orders_list td a:hover {
    color: #00e5ff !important;
    -webkit-text-fill-color: #00e5ff !important;
    text-decoration: underline !important;
}

/* Order History — date cell link: bold white for clear readability */
.pmpro_table td:first-child a,
table.pmpro_table td:first-child a,
#pmpro_account_orders_list td:first-child a,
[class*="pmpro"] table td:first-child a,
[class*="pmpro"] td:first-child a,
[id*="pmpro"] table td:first-child a,
[id*="pmpro"] td:first-child a {
    font-weight: 700 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* Align checkbox fields cleanly */
.pmpro_checkout-field input[type="checkbox"],
.pmpro_checkout-field input[type="radio"] {
    margin-right: 8px !important;
    cursor: pointer !important;
    width: auto !important;
}

/* ==========================================================================
   Widths & Responsive Grid Layouts (Desktop, Tablet, Mobile)
   ========================================================================== */
.pmpro_content,
#pmpro_form,
.pmpro_checkout_wrap,
.pmpro_account_wrap,
.pmpro_invoice_wrap,
.pmpro_cancellation_wrap,
div.pmpro-member-profile-wrap,
div.pmpro-member-profile-edit,
.pmpro_confirmation_wrap,
.pmpro_billing_wrap,
.pmpro_login_wrap,
.pmpro_login-form {
    width: 100% !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Desktop Sizing (>= 992px) */
@media screen and (min-width: 992px) {
    .pmpro_content,
    #pmpro_form,
    .pmpro_checkout_wrap,
    .pmpro_account_wrap,
    .pmpro_invoice_wrap,
    .pmpro_cancellation_wrap,
    div.pmpro-member-profile-wrap,
    div.pmpro-member-profile-edit,
    .pmpro_confirmation_wrap,
    .pmpro_billing_wrap,
    .pmpro_login_wrap,
    .pmpro_login-form {
        max-width: 1140px !important;
        padding: 40px !important;
    }
    
    /* 2-column checkout */
    #pmpro_form {
        display: grid !important;
        grid-template-columns: 1.4fr 1fr !important;
        gap: 30px !important;
    }
    
    /* .pmpro_cols-2 { display: block } is set globally below — no need to repeat per breakpoint */
}

/* Tablet Sizing (768px to 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .pmpro_content,
    #pmpro_form,
    .pmpro_checkout_wrap,
    .pmpro_account_wrap,
    .pmpro_invoice_wrap,
    .pmpro_cancellation_wrap,
    div.pmpro-member-profile-wrap,
    div.pmpro-member-profile-edit,
    .pmpro_confirmation_wrap,
    .pmpro_billing_wrap,
    .pmpro_login_wrap,
    .pmpro_login-form {
        max-width: 720px !important;
        padding: 30px !important;
    }
    
    #pmpro_form {
        display: block !important; /* Stack panels vertically on tablet */
    }
}

/* Mobile Sizing (<= 767px) */
@media screen and (max-width: 767px) {
    /* Outer wrappers — zero side padding so content fills edge-to-edge */
    .pmpro_content,
    #pmpro_form,
    .pmpro_checkout_wrap,
    .pmpro_account_wrap,
    .pmpro_invoice_wrap,
    .pmpro_cancellation_wrap,
    div.pmpro-member-profile-wrap,
    div.pmpro-member-profile-edit,
    .pmpro_confirmation_wrap,
    .pmpro_billing_wrap,
    .pmpro_login_wrap,
    .pmpro_login-form {
        max-width: 100% !important;
        padding: 0 !important;   /* ← removed 12px side padding; inner cards carry their own */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Stack checkout form as single column on mobile */
    #pmpro_form {
        display: block !important;
    }

    /* Cards — single, clear padding (no double-nesting) */
    .pmpro_box,
    .pmpro_card,
    .pmpro_checkout-fields,
    fieldset.pmpro_checkout-fields,
    #pmpro_form fieldset,
    #pmpro_membership_information_fields,
    #pmpro_account_information_fields,
    #pmpro_billing_address_fields,
    #pmpro_payment_information_fields {
        padding: 20px 16px !important;
        border-radius: 8px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Login form — comfortable but not compressed */
    form#loginform,
    .login form,
    .pmpro_login_wrap form,
    .pmpro_login-form form {
        padding: 20px 16px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Profile form/fieldset transparent — handled globally below (L1170+); .pmpro_cols-2 display:block set globally */
    .pmpro_cols-2 .pmpro_checkout-field {
        margin-bottom: 20px !important;
    }

    /* Make buttons full width on mobile for easy touching */
    .pmpro_btn,
    .pmpro_btn-submit,
    input[type="submit"].pmpro_btn,
    form#loginform input[type="submit"] {
        width: 100% !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    /* Force all form elements and fields to span 100% width on mobile */
    .pmpro_checkout-field,
    #pmpro_form .pmpro_checkout-field,
    .pmpro_login_wrap form p,
    .pmpro_login-form form p,
    form#loginform p,
    .login form p {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        float: none !important;
        clear: both !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    .pmpro_checkout-field input[type="text"],
    .pmpro_checkout-field input[type="password"],
    .pmpro_checkout-field input[type="email"],
    .pmpro_checkout-field input[type="number"],
    .pmpro_checkout-field input[type="tel"],
    .pmpro_checkout-field select,
    .pmpro_checkout-field textarea,
    .pmpro_checkout-field label,
    #pmpro_form label,
    form#loginform label,
    .login form label,
    form#loginform input[type="text"],
    form#loginform input[type="password"],
    .login form input[type="text"],
    .login form input[type="password"],
    .wp-pwd,
    .wp-pwd input[type="password"],
    .wp-pwd input[type="text"] {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        text-align: left !important;
    }

    /* Prevent country dropdown from overflowing on mobile */
    .pmpro_checkout-field select,
    #pmpro_form select,
    select[id*="country"],
    select[class*="country"],
    .pmpro_checkout-field-bcountry select,
    .pmpro_checkout-field-billing_country select,
    #bcountry,
    #billing_country {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    .pmpro_checkout-field-bcountry,
    .pmpro_checkout-field-billing_country,
    #pmpro_bcountry,
    .pmpro_checkout-field-country {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block !important;
        float: none !important;
        clear: both !important;
    }
}

/* ==========================================================================
   Checkout Fields Stacking Layout
   ========================================================================== */

/* Force all checkout fields to stack vertically, full-width */
.pmpro_checkout-field {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-bottom: 28px !important;
}

/* Force labels to sit on top of input fields with clear spacing */
.pmpro_checkout-field label,
#pmpro_form .pmpro_checkout-field label,
.pmpro_login_wrap label,
form#loginform label {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
    text-align: left !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0 !important;
}

/* Force input elements to sit below and span full width */
.pmpro_checkout-field input[type="text"],
.pmpro_checkout-field input[type="password"],
.pmpro_checkout-field input[type="email"],
.pmpro_checkout-field input[type="number"],
.pmpro_checkout-field input[type="tel"],
.pmpro_checkout-field select,
.pmpro_checkout-field textarea {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* Password field wrapper and Show Password toggle button styling (Global) */
.wp-pwd,
.pmpro_checkout-field-password,
.pmpro_checkout-field-confirm_password,
.pmpro_checkout-field-password_confirm,
.pmpro_checkout-field-current_password,
.pmpro_checkout-field-new_password,
.pmpro_checkout-field-user_pass {
    position: relative !important;
    display: block !important;
    width: 100% !important;
}

/* ---- Show Password button — single source of truth -------------------------
   Works on checkout page, PMPro login wrap, and wp-login.php (login.css).
   Button sits BELOW the password input as a full-width block, never inside. */

/* Password input: full width, no extra right padding needed */
.wp-pwd input[type="password"],
.wp-pwd input[type="text"],
.pmpro_checkout-field-password input[type="password"],
.pmpro_checkout-field-confirm_password input[type="password"],
.pmpro_checkout-field-password_confirm input[type="password"],
.pmpro_checkout-field-current_password input[type="password"],
.pmpro_checkout-field-new_password input[type="password"] {
    width: 100% !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
}

/* Container: block flow so button sits below the input */
.wp-pwd {
    position: relative !important;
    display: block !important;
}

/* Show Password button: full-width pill below the input */
.wp-pwd .wp-hide-pw,
.wp-pwd button.wp-hide-pw,
.wp-pwd .button,
button.wp-hide-pw,
.pmpro_checkout-field button.wp-hide-pw,
.pmpro_checkout-field-password button,
.pmpro_checkout-field-confirm_password button,
.pmpro_checkout-field-password_confirm button,
.pmpro_checkout-field-current_password button,
.pmpro_checkout-field-new_password button,
.pmpro_login_wrap .wp-pwd button,
form#loginform .wp-pwd button {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 10px !important;
    margin-bottom: 14px !important;
    height: 36px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    z-index: 1 !important;
    box-shadow: none !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

/* Dashicons / span inside Show Password button */
.wp-pwd .wp-hide-pw .dashicons,
.wp-pwd button.wp-hide-pw .dashicons,
.wp-pwd .wp-hide-pw span,
.wp-pwd button.wp-hide-pw span {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/* Hover state */
.wp-pwd .wp-hide-pw:hover,
.wp-pwd button.wp-hide-pw:hover,
.wp-pwd .button:hover,
button.wp-hide-pw:hover,
.pmpro_checkout-field-password button:hover,
.pmpro_checkout-field-confirm_password button:hover,
.pmpro_checkout-field-password_confirm button:hover,
.pmpro_checkout-field-current_password button:hover,
.pmpro_checkout-field-new_password button:hover {
    background: #263548 !important;
    color: #00e5ff !important;
    -webkit-text-fill-color: #00e5ff !important;
    border-color: #00e5ff !important;
}

.wp-pwd .wp-hide-pw:hover .dashicons,
.wp-pwd button.wp-hide-pw:hover .dashicons {
    color: #00e5ff !important;
}

/* Force the 2-column fields to stack vertically as a single column on all viewports */
.pmpro_cols-2 {
    display: block !important;
}

.pmpro_cols-2 > div,
.pmpro_cols-2 > span,
.pmpro_cols-2 > p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   Expand entry-content on MOBILE only when it contains PMPro content
   ========================================================================== */
/* Expand entry-content on mobile when it contains PMPro content.
   Wrapper max-width/width/padding already handled in the main mobile block above. */
@media screen and (max-width: 767px) {
    .entry-content:has(.pmpro_login_wrap),
    .entry-content:has(.pmpro_content),
    .entry-content:has(#pmpro_form),
    .entry-content:has(.pmpro_checkout),
    .entry-content:has(.pmpro_account),
    .entry-content:has(.pmpro_invoice_wrap),
    .entry-content:has(.pmpro_cancellation_wrap),
    .entry-content:has(.pmpro_confirmation_wrap),
    .entry-content:has(.pmpro_billing_wrap),
    .entry-content:has(.pmpro-member-profile-wrap) {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Lost Password - styled as a full-width button */
a[href*="lostpassword"],
a[href*="lost-password"],
#loginform + p a,
.pmpro_login_wrap a[href*="lostpassword"],
.pmpro_login_wrap a[href*="lost-password"],
.pmpro_login_wrap .login-lost-password a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 14px 24px !important;
    margin-top: 20px !important;
    background: transparent !important;
    border: 1px solid #334155 !important;
    border-radius: 8px !important;
    color: #94a3b8 !important;
    -webkit-text-fill-color: #94a3b8 !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    letter-spacing: 0.3px !important;
}

a[href*="lostpassword"]:hover,
a[href*="lost-password"]:hover,
#loginform + p a:hover,
.pmpro_login_wrap a[href*="lostpassword"]:hover,
.pmpro_login_wrap a[href*="lost-password"]:hover,
.pmpro_login_wrap .login-lost-password a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #475569 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Remove horizontal lines (hr tags and borders) inside PMPro card wrappers */
.pmpro_box hr,
.pmpro_card hr,
.pmpro_checkout-fields hr,
#pmpro_account hr,
.pmpro_account hr,
.pmpro_account_wrap hr,
.pmpro_member-profile-wrap hr,
div.pmpro-member-profile-wrap hr {
    display: none !important;
}

.pmpro_actionlinks,
.pmpro_member-profile-wrap-actions,
#pmpro_account .pmpro_box > div,
.pmpro_account .pmpro_box > div {
    border-top: none !important;
    border-bottom: none !important;
}

/* PMPro Status Tags styling (e.g. Paid status button/badge) */
.pmpro_badge,
.pmpro_tag,
.pmpro_status,
.pmpro_order-status,
.pmpro_success,
span.pmpro_success,
span.pmpro_tag,
span.pmpro_tag-success,
span.pmpro_badge,
span.pmpro_badge-success,
.pmpro_table td span[class*="success"],
.pmpro_table td span[class*="badge"],
.pmpro_table td span[class*="tag"],
#pmpro_account_orders_list td span[class*="success"],
#pmpro_account_orders_list td span[class*="badge"],
#pmpro_account_orders_list td span[class*="tag"],
.pmpro_account_wrap td span[class*="success"],
.pmpro_account_wrap td span[class*="badge"],
.pmpro_account_wrap td span[class*="tag"] {
    background: #10b981 !important; /* solid vibrant green */
    color: #ffffff !important; /* solid white text */
    padding: 6px 14px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    display: inline-block !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.2) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Show Password button spacing is now applied globally above (not just mobile) */

/* Force dark theme body on all pages containing PMPro elements */
body:has([class*="pmpro"]),
body:has([id*="pmpro"]),
body.pmpro-account,
body.pmpro-profile,
body.pmpro-checkout,
body.pmpro-billing,
body.pmpro-levels,
body.pmpro-cancel,
body.pmpro-confirmation,
body.pmpro-invoice,
body.pmpro-member-profile-edit {
    background: #000000 !important;
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* Ensure all core wrappers on these pages are black/transparent */
body:has([class*="pmpro"]) #page,
body:has([class*="pmpro"]) .site-content,
body:has([class*="pmpro"]) .site-main,
body:has([class*="pmpro"]) article,
body:has([class*="pmpro"]) .entry-content,
body:has([id*="pmpro"]) #page,
body:has([id*="pmpro"]) .site-content,
body:has([id*="pmpro"]) .site-main,
body:has([id*="pmpro"]) article,
body:has([id*="pmpro"]) .entry-content {
    background: #000000 !important;
    background-color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* ---- Profile picture action buttons spacing (Delete / Replace / Cancel) ----
   Use flexbox column layout on the actions wrapper so every button gets
   equal spacing without needing fragile adjacent-sibling selectors.        */

/* Actions container — stack buttons vertically with a gap */
.pmpro_profile_photo_actions,
.pmpro_profile_photo .pmpro_profile_photo_actions,
.pmpro-member-profile-edit .pmpro_profile_photo_actions,
div.pmpro-member-profile-edit [class*="photo"] .pmpro_profile_photo_actions,
div.pmpro-member-profile-wrap [class*="photo"] .pmpro_profile_photo_actions,
.avatar-upload-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 12px !important;
    width: 100% !important;
}

/* Every direct-child button/input/a inside the actions wrapper gets full width */
.pmpro_profile_photo_actions > button,
.pmpro_profile_photo_actions > input[type="submit"],
.pmpro_profile_photo_actions > input[type="button"],
.pmpro_profile_photo_actions > a,
.pmpro-member-profile-edit .pmpro_profile_photo_actions > button,
.pmpro-member-profile-edit .pmpro_profile_photo_actions > input[type="submit"],
.pmpro-member-profile-edit .pmpro_profile_photo_actions > input[type="button"],
.avatar-upload-buttons > button,
.avatar-upload-buttons > input[type="submit"],
.avatar-upload-buttons > input[type="button"] {
    width: 100% !important;
    margin: 0 !important;      /* gap handles spacing — no extra margins needed */
    box-sizing: border-box !important;
}

/* Profile edit: strip background/border/padding from inner forms and fieldsets.
   (.pmpro_box inside profile is already transparent per the rule at line ~116.) */
div.pmpro-member-profile-edit form,
div.pmpro-member-profile-wrap form,
div.pmpro-member-profile-edit fieldset,
div.pmpro-member-profile-wrap fieldset {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Checkout/billing inner forms — transparent so page bg shows.
   Login form keeps its own border (set at ~line 309). */
form#pmpro_form,
.pmpro_checkout_wrap form,
form#pmpro_billing_form,
.pmpro_billing_wrap form {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

@media screen and (max-width: 767px) {
    /* Add extra space between input password field and show password button on mobile */
    .wp-pwd .wp-hide-pw,
    .wp-pwd button.wp-hide-pw,
    .wp-pwd .button,
    button.wp-hide-pw,
    .pmpro_checkout-field button.wp-hide-pw,
    .pmpro_checkout-field-password button,
    .pmpro_checkout-field-confirm_password button,
    .pmpro_checkout-field-password_confirm button,
    .pmpro_checkout-field-current_password button,
    .pmpro_checkout-field-new_password button,
    .pmpro_login_wrap .wp-pwd button,
    form#loginform .wp-pwd button {
        margin-top: 20px !important;
    }

    /* Add spacing between profile photo action buttons (Delete / Replace / Cancel) on mobile */
    .pmpro_profile_photo_actions > button,
    .pmpro_profile_photo_actions > input[type="submit"],
    .pmpro_profile_photo_actions > input[type="button"],
    .pmpro_profile_photo_actions > a,
    .pmpro-member-profile-edit .pmpro_profile_photo_actions > button,
    .pmpro-member-profile-edit .pmpro_profile_photo_actions > input[type="submit"],
    .pmpro-member-profile-edit .pmpro_profile_photo_actions > input[type="button"],
    .avatar-upload-buttons > button,
    .avatar-upload-buttons > input[type="submit"],
    .avatar-upload-buttons > input[type="button"] {
        margin-bottom: 10px !important;
    }

    .pmpro_profile_photo_actions > *:last-child,
    .avatar-upload-buttons > *:last-child {
        margin-bottom: 0 !important;
    }
}