/* --- state and non-state sign up form --- */

    /* --- FORM CONTAINER --- */
    .custom-wizard-active.mepr-signup-form {
        font-family: 'Open Sans', sans-serif;
        max-width: 90% !important;
        width: 100%;
        margin: 0 auto 50px auto;
    }

    /* --- NEW INPUT FIELD STYLES (Your requested CSS) --- */
    .custom-wizard-active .mepr-form-input, 
    .custom-wizard-active textarea.mepr-form-input,
    .custom-wizard-active select.mepr-form-input,
    .custom-wizard-active .mepr_mepr_phone input {
        border-radius: 5px !important;
        border: 2px solid #2f2e2e !important;
        font-family: "Open Sans", sans-serif !important;
        padding: 15px !important;
        background-color: transparent !important;
        margin-top: 5px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        height: auto !important;
        color: #333 !important;
        line-height: 1.30 !important;
        font-size: 15px !important;
    }

    /* --- NEW LABEL STYLES (Your requested CSS) --- */
    .custom-wizard-active .mp-form-label label {
        display: inline-block !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        margin-bottom: 8px !important;
        padding: 0 !important;
        color: #242323 !important;
        width: 100% !important;
    }

    /* --- EXCLUDE CHECKBOXES from the Input Styles above --- */
    .custom-wizard-active .mepr-checkbox-field.mepr-form-input {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Actual Checkbox Box */
    .custom-wizard-active input[type="checkbox"] {
        width: auto !important;
        border: 1px solid #333 !important;
        height: auto !important;
        margin-right: 10px;
        display: inline-block;
        vertical-align: middle;
        transform: scale(1.2);
    }
    
    /* Checkbox Wrapper Row */
    .custom-wizard-active .mepr-checkbox-field {
        display: flex; 
        align-items: center; 
        margin-bottom: 10px; 
        font-weight: 500; 
        color: #333;
    }

    /* --- PROGRESS BAR --- */
    .custom-step-progress-bar {
        display: flex; justify-content: center; align-items: center; margin-bottom: 50px; font-family: 'Poppins', sans-serif;
        border-bottom: 1px solid #e5e7eb; padding-bottom: 40px;
        max-width: 90%; width: 100%; margin-left: auto; margin-right: auto;
    }
    .step-item { display: flex; align-items: center; opacity: 0.4; margin: 0 15px; }
    .step-item.active { opacity: 1; font-weight: bold; }
    .step-item.completed { opacity: 1; }
    .step-circle { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #ccc; background: #fff; color: #ccc; display: flex; align-items: center; justify-content: center; margin-right: 8px; font-weight: bold; }
    .step-item.active .step-circle { background-color: #999; color: #fff; border-color: #999; }
    .step-item.completed .step-circle { background-color: #5d707f; border-color: #5d707f; color: #fff; }
    .step-text { font-size: 14px; font-weight: 600; }

    /* --- PHONE FIELD FIX (100%) --- */
    .custom-wizard-active .mepr_mepr_phone,
    .custom-wizard-active .iti {
        width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; display: block !important;
    }

    /* Price Label */
    .custom-wizard-active .mepr_price_cell_label { font-weight: 700; color: #000; font-size: 16px; display: block; margin-bottom: 5px; text-align: left; }
    .custom-wizard-active .mepr_price_cell { font-size: 28px; color: #008000; font-weight: 500; display: block; margin-bottom: 25px; text-align: left; }

    /* Step Layout */
    .custom-wizard-active .form-step { display: none !important; }
    .custom-wizard-active .form-step.active { display: flex !important; flex-wrap: wrap; justify-content: space-between; width: 100%; }
    .custom-wizard-active .mp-form-row { width: 100%; margin-bottom: 20px; box-sizing: border-box; }

    /* --- SIDE-BY-SIDE FIELDS (48%) --- */
    
    /* Names */
    .custom-wizard-active .mepr_first_name, .custom-wizard-active .mepr_last_name { width: 48% !important; flex: 0 0 48%; }
    /* State/Zip */
    .custom-wizard-active .mepr_mepr-address-state, .custom-wizard-active .mepr_mepr-address-zip { width: 48% !important; flex: 0 0 48%; }
    /* Country/Suburb */
    .custom-wizard-active .mepr_mepr-address-country, .custom-wizard-active .mepr_mepr_school_suburb { width: 48% !important; flex: 0 0 48%; }
    /* Passwords */
    .custom-wizard-active .mepr_password, .custom-wizard-active .mepr_password_confirm { width: 48% !important; flex: 0 0 48%; }

    @media (max-width: 768px) {
        .custom-wizard-active .form-step.active .mp-form-row { width: 100% !important; flex: 0 0 100%; }
    }

    /* Headings */
    .custom-wizard-active .form-step-title {
        width: 100%; font-family: 'Luckiest Guy', cursive; font-size: 30px !important; color: #222;
        text-transform: uppercase; margin-bottom: 16px; margin-top: 10px; letter-spacing: 1px;
        border-bottom: 1px solid #e5e7eb !important; padding: 0 16px 8px 0;
    }

    .mp-password-strength-area {
    background-color: #eee !important;
    border: solid #ddd !important;
    border-width: 1px 1px 3px !important;
    padding: 8px !important;
    text-align: center !important;
        }
         .mp-password-strength-display {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

    /* Buttons */
    .custom-wizard-active .custom-form-btns {
        width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; padding-top: 20px; clear: both;
    }
    .custom-wizard-active .custom-next-btn, .custom-wizard-active .custom-prev-btn, .custom-wizard-active .custom-confirm-btn {
        border-radius: 4px; font-weight: 700; font-size: 24px; padding: 12px 35px; text-transform: uppercase;
        font-family: "Nicotine", "Luckiest Guy", cursive; cursor: pointer; height: auto; line-height: 1.1;
        box-sizing: border-box; margin: 0 !important; width: auto !important; letter-spacing: 1px;
    }
    .custom-wizard-active .custom-next-btn { background-color: #2a6ea5; border: none; color: #fff; }
    .custom-wizard-active .custom-prev-btn { background-color: #e5a949; border: none; color: #fff; }
    .custom-wizard-active .custom-confirm-btn { background-color: #687d50 !important; border: none !important; color: #fff !important; }

    .custom-wizard-active .mepr-payment-methods-wrapper { width: 100% !important; }
    .custom-wizard-active .mp-form-submit { display: none; width: 100%; text-align: center; }


/* --- Update Payment Form Container --- */
#mepr-stripe-payment-form {
    max-width: 100%;
    width: 100%;
    font-family: "Open Sans", sans-serif; /* Matches your other forms */
    margin-top: 20px;
}

/* --- Heading: "Update your payment information below" --- */
#mepr-stripe-payment-form .mepr_update_account_table > div:first-child strong {
    font-size: 18px;
    color: #333;
    font-weight: 700;
    display: block;
    margin-bottom: 15px;
}

--- Remove standard table spacing issues ---
#mepr-stripe-payment-form .mepr_update_account_table br {
    display: none;
}

/* --- Stripe Element Container (Background area) --- */
/* Optional: Adds a clean spacing around the card inputs */
#mepr-stripe-payment-form .mepr-stripe-elements {
    margin-bottom: 25px;
    margin-top: 10px;
}

/* --- SUBMIT BUTTON (Blue) --- */
#mepr-stripe-payment-form .mepr-submit {
   background-color: #2a6ea5 !important;
color: #fff !important;
border: none !important;
font-family: "Nicotine" !important;
text-transform: uppercase !important;
font-weight: 600 !important;
font-size: 18px !important;
border-radius: 5px !important;
transition-duration: 0.5s !important;
letter-spacing: 0.5px !important;
padding: 12px 20px !important;
line-height: 1.15 !important;
margin-bottom: 50px !important;
}

#mepr-stripe-payment-form .mepr-submit:hover {
    background-color: #1f5a8e !important; /* Darker blue on hover */
}

/* --- Loading Gif Position --- */
#mepr-stripe-payment-form .mepr-loading-gif {
    vertical-align: middle;
    margin-left: 10px;
} 
.mepr_update_account_table,.mepr-account-nav,.mepr_updated ,.mepr_error{
    display: block !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    
} 

/* 🔒 Billing Address ONLY Step 1 */
.custom-wizard-active #step-wrapper-2 .mpfy-billing-field,
.custom-wizard-active #step-wrapper-3 .mpfy-billing-field {
    display: none !important;
} 

.mepr-form input.invalid,
.mepr-form select.invalid,
.mepr-form textarea.invalid,
.mepr-form label.mepr-checkbox-field.invalid,
.mepr-form div.mepr-checkboxes-field.invalid,
.mepr-form div.mepr-radios-field.invalid {
  border: 2px solid #2f2e2e !important;
  background-color: transparent !important;
}
/* =================================================
   STEP 1 – EXACT ORDER + LAYOUT (LOCKED)
================================================= */

/* Step 1 container */
.custom-wizard-active #step-wrapper-1.form-step.active {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Default field width */
.custom-wizard-active #step-wrapper-1 .mp-form-row {
    width: calc(50% - 12px) !important;
    flex: 0 0 calc(50% - 12px) !important;
    box-sizing: border-box !important;
}

/* ===============================
   ORDER + WIDTH CONTROL
=============================== */

/* 1–2: First | Last Name */
.custom-wizard-active #step-wrapper-1 .mepr_first_name { order: 1; }
.custom-wizard-active #step-wrapper-1 .mepr_last_name  { order: 2; }

/* 3: Phone (half width, single row) */
.custom-wizard-active #step-wrapper-1 .mepr_mepr_phone {
    order: 3;
    width: calc(50% - 12px) !important;
}

/* 4: Billing Address (FULL WIDTH) */
.custom-wizard-active #step-wrapper-1 .mepr_mepr_billing_address {
    order: 4;
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* 5–6: Address Line 1 | Address Line 2 */
.custom-wizard-active #step-wrapper-1 .mepr_mepr-address-one { order: 5; }
.custom-wizard-active #step-wrapper-1 .mepr_mepr-address-two { order: 6; }

/* 7–8: City | Zip */
.custom-wizard-active #step-wrapper-1 .mepr_mepr-address-city { order: 7; }
.custom-wizard-active #step-wrapper-1 .mepr_mepr-address-zip  { order: 8; }

/* 9–10: Country | State/Province */
.custom-wizard-active #step-wrapper-1 .mepr_mepr-address-country { order: 9; }
.custom-wizard-active #step-wrapper-1 .mepr_mepr-address-state   { order: 10; }

/* 11–12: School Suburb | School Name */
.custom-wizard-active #step-wrapper-1 .mepr_mepr_school_suburb { order: 11; }
.custom-wizard-active #step-wrapper-1 .mepr_mepr_school_name   { order: 12; }

/* 13: Class Details (FULL WIDTH) */
.custom-wizard-active #step-wrapper-1 .mepr_mepr_class_details {
    order: 13;
    width: 100% !important;
    flex: 0 0 100% !important;
}

/* ===============================
   MOBILE – STACK EVERYTHING
=============================== */
@media (max-width: 768px) {
    .custom-wizard-active #step-wrapper-1 .mp-form-row {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}