/**
 * PMPro Pages Styling - Minimal Layout with Header/Footer
 */

/* Page Container - Centered and Contained */
body.pmpro-body-has-access,
body.pmpro-body-no-access,
body.page-template-default,
body.pmpro-checkout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    color: #ffffff;
    background-color: #000000;
    /* Ensure background is dark */
}

.wp-page-content {
    flex: 1;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 100px 20px 80px;
    /* Padding for fixed header/footer */
}

/* Mobile Responsive Content Padding */
@media (max-width: 768px) {

    /* Force dark background on EVERYTHING to kill the white card effect */
    html,
    body,
    .wp-page-content {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

    .wp-page-content {
        padding: 90px 15px 40px;
    }

    /* PMPro Checkout Layout Fixes - Aggressive Stacking */
    .pmpro_checkout,
    #pmpro_checkout,
    .pmpro_checkout-fields,
    #pmpro_checkout_form {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
        overflow-x: visible !important;
        background-color: #000000 !important;
        /* Force dark background */
        color: #ffffff !important;
    }

    /* Force table elements to stack vertically - More aggressive */
    #pmpro_checkout_form table,
    #pmpro_checkout_form thead,
    #pmpro_checkout_form tbody,
    #pmpro_checkout_form tr,
    #pmpro_checkout_form th,
    #pmpro_checkout_form td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        /* Reduced padding to help stacking */
        text-align: left !important;
        border: none !important;
        margin: 0 !important;
        float: none !important;
        clear: both !important;
        background-color: transparent !important;
        /* Killer fix for white background */
    }

    /* Target specific PMPro first/last name columns often floated */
    .pmpro_checkout-fields-left,
    .pmpro_checkout-fields-right,
    .pmpro_checkout-field-firstname,
    .pmpro_checkout-field-lastname,
    .pmpro_checkout-field-bfirstname,
    .pmpro_checkout-field-blastname {
        width: 100% !important;
        float: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        display: block !important;
    }

    #pmpro_checkout_form tr {
        margin-bottom: 25px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Force inputs to 100% width and prevent overflow */
    #pmpro_checkout_form input[type="text"],
    #pmpro_checkout_form input[type="email"],
    #pmpro_checkout_form input[type="password"],
    #pmpro_checkout_form input[type="tel"],
    #pmpro_checkout_form select,
    #pmpro_checkout_form textarea {
        width: 100% !important;
        max-width: 100% !important;
        margin: 8px 0 !important;
        padding: 14px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        color: #fff !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        /* Prevent iOS zoom */
        display: block !important;
        -webkit-appearance: none;
        appearance: none;
    }

    /* Billing address section specific title */
    #pmpro_checkout_form .pmpro_checkout-h3,
    #pmpro_checkout_form h3 {
        font-size: 1.25rem !important;
        margin-top: 30px !important;
        margin-bottom: 15px !important;
        border-bottom: 2px solid var(--accent) !important;
        display: block !important;
        padding-bottom: 8px !important;
        width: 100% !important;
    }

    /* Label styling */
    #pmpro_checkout_form label {
        display: block !important;
        margin-bottom: 8px !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        font-size: 14px !important;
    }

    /* Help text */
    .pmpro_checkout-field-help {
        display: block !important;
        font-size: 12px !important;
        color: #64748b !important;
        margin-top: 4px !important;
    }

    /* ===== BILLING ADDRESS SPECIFIC FIXES ===== */
    #pmpro_billing_address_fields {
        display: block !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    #pmpro_billing_address_fields table,
    #pmpro_billing_address_fields tbody,
    #pmpro_billing_address_fields tr,
    #pmpro_billing_address_fields td,
    #pmpro_billing_address_fields th {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background-color: transparent !important;
        /* Ensure no white background here either */
    }

    #pmpro_billing_address_fields tr {
        margin-bottom: 15px !important;
    }

    #pmpro_billing_address_fields input[type="text"],
    #pmpro_billing_address_fields input[type="number"],
    #pmpro_billing_address_fields select {
        width: 100% !important;
        max-width: 100% !important;
        /* Ensure it stays within container */
        height: 48px !important;
        /* Larger touch target */
        padding: 10px 15px !important;
        font-size: 16px !important;
        margin-top: 5px !important;
        box-sizing: border-box !important;
        background: transparent !important;
        color: #000000 !important;
        /* Force black text for input fields */
        border: 1px solid rgba(0, 0, 0, 0.2) !important;
    }

    #pmpro_billing_address_fields select {
        /* Fix for "going outside" */
        max-width: 100% !important;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding-right: 30px !important;
        /* Make room for arrow */
        color: #000000 !important;
        /* Force black text for dropdown options */
    }

    #pmpro_billing_address_fields select option {
        color: #000000 !important;
        background: #ffffff !important;
    }

    #pmpro_billing_address_fields label {
        display: block !important;
        width: 100% !important;
        margin-bottom: 5px !important;
        font-size: 14px !important;
        color: #000000 !important;
    }
}