/* Start custom CSS for oxpins-contact-form, class: .elementor-element-35e88d4 */<!-- ===== ADD THIS CSS (in your theme's CSS or a Custom CSS block) ===== -->
<style>
/* Fix checkbox 2-column layout for volunteer interests */
.volunteer-checkboxes .wpcf7-checkbox .wpcf7-list-item {
    display: inline-block;
    width: 48%;
    margin: 4px 0;
}

/* Fix season checkboxes inline layout */
.season-checkboxes .wpcf7-checkbox .wpcf7-list-item {
    display: inline-block;
    width: auto;
    margin-right: 16px;
}

/* Ensure tel fields match text/email field styling */
.wpcf7-tel {
    width: 100%;
    height: 50px;
    border: 1px solid #e5e5e5;
    padding: 0 20px;
    border-radius: 6px;
    font-size: 14px;
    color: #686a6f;
    background-color: #f5f2e8; /* match your theme's input bg */
}

/* Season + Year row alignment */
.season-year-row {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}
.season-year-row .year-field {
    min-width: 120px;
}
</style>


<!-- ===== PERSONAL INFORMATION ===== -->
<div class="become-volunteer-page__form">
    <h2 class="become-volunteer-page__title">Personal Information</h2>
    <p class="become-volunteer-page__subtitle">Register to be part of the yearly trip to Uganda</p>
    <hr>

    <div class="row">
        <!-- First Name & Last Name -->
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>First Name <span style="color:red;">*</span></label>
                [text* first-name placeholder "Enter Your First Name"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Last Name <span style="color:red;">*</span></label>
                [text* last-name placeholder "Enter Your Last Name"]
            </div>
        </div>

        <!-- Email & Contact -->
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Email <span style="color:red;">*</span></label>
                [email* email placeholder "Email Address"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Contact <span style="color:red;">*</span></label>
                [text* contact placeholder "Mobile Number"]
            </div>
        </div>

        <!-- Gender & Age -->
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Gender <span style="color:red;">*</span></label>
                [select* gender "- Select -" "Male" "Female" "Other" "Prefer not to say"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Age <span style="color:red;">*</span></label>
                [number* age min:1 max:120 placeholder ""]
            </div>
        </div>

        <!-- Address -->
        <div class="col-xl-12">
            <label><strong>Address</strong></label>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Address Line 1 <span style="color:red;">*</span></label>
                [text* address-line-1 placeholder "Address Line 1"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Address Line 2</label>
                [text address-line-2 placeholder "Address Line 2"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>City <span style="color:red;">*</span></label>
                [text* city placeholder "City"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>State</label>
                [text state placeholder "State"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Zip Code</label>
                [text zip-code placeholder "Zip"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Country <span style="color:red;">*</span></label>
                [select* country "Select Country" "Uganda" "United States" "United Kingdom" "Canada" "Australia" "Kenya" "Tanzania" "Rwanda" "Other"]
            </div>
        </div>

        <!-- Occupation -->
        <div class="col-xl-12">
            <div class="become-volunteer-page__input">
                <label>Occupation <span style="color:red;">*</span></label>
                [text* occupation placeholder ""]
            </div>
        </div>

        <!-- How did you hear about us -->
        <div class="col-xl-12">
            <div class="become-volunteer-page__input">
                <label>How did you hear about us?</label>
                [select hear-about-us "- Select -" "Social Media" "Friend or Family" "Website" "Church / Organization" "Event" "Other"]
            </div>
        </div>

        <!-- Areas of Volunteer Interest — 2-column checkboxes -->
        <div class="col-xl-12">
            <div class="become-volunteer-page__input volunteer-checkboxes">
                <label>Areas of Volunteer Interest <span style="color:red;">*</span></label>
                [checkbox* volunteer-interest "Medical Services" "Public Health / Community Outreach" "Administrative Support" "Education & Mentorship" "Fundraising & Event Planning" "Logistics & Supplies" "Media & Communications" "Student Internship / Practicum" "Other"]
            </div>
        </div>

        <!-- Season of Volunteer Interest + Year (side by side) -->
        <div class="col-xl-12">
            <div class="season-year-row">
                <div class="season-checkboxes">
                    <label>Season of Volunteer Interest <span style="color:red;">*</span></label>
                    [checkbox* volunteer-season "Summer" "Winter" "Spring" "Fall"]
                </div>
                <div class="year-field">
                    <label>Year <span style="color:red;">*</span></label>
                    [number* volunteer-year min:2025 max:2030 placeholder "2025"]
                </div>
            </div>
        </div>
    </div>

    <!-- ===== EMERGENCY CONTACT ===== -->
    <h2 class="become-volunteer-page__title">Emergency Contact</h2>
    <hr>

    <div class="row">
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>First Name</label>
                [text emergency-first-name placeholder "Enter Your First Name"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Last Name</label>
                [text emergency-last-name placeholder "Enter Your Last Name"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Email</label>
                [email emergency-email placeholder "Email Address"]
            </div>
        </div>
        <div class="col-xl-6">
            <div class="become-volunteer-page__input">
                <label>Contact</label>
                [text emergency-contact placeholder "Mobile Number"]
            </div>
        </div>

        <!-- Terms & Submit -->
        <div class="col-xl-12">
            <div class="become-volunteer-page__input">
                [acceptance terms-acceptance] I have read and agree to the <a href="/terms-and-conditions">Terms and Conditions</a> and <a href="/privacy-policy">Privacy Policy</a>[/acceptance]
            </div>
            <div class="become-volunteer-page__btn-box">
                <button type="submit" class="thm-btn become-volunteer-page__btn">Submit Form</button>
            </div>
        </div>
    </div>
</div>/* End custom CSS */