/* Form container styling */
.wfpa-form {
    max-width: 800px; /* Wider form */
    margin: 0 auto;
    padding: 30px; /* Internal spacing */
    background-color: #f9f9f9; /* Light background */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
}

/* Row layout for two fields */
.form-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px; /* Space between rows */
}

/* Individual field styling */
.form-field {
    flex: 1; /* Fields share row space equally */
    margin-right: 10px; /* Space between fields in a row */
}

/* Remove margin from the last field in a row */
.form-field:last-child {
    margin-right: 0;
}

/* Full-width fields */
.form-field-full {
    flex: 0 0 100%; /* Takes up full row width */
}

/* Label styling */
label {
    display: block;
    margin-bottom: 10px; /* Space below label */
    font-weight: bold; /* Bold text */
    font-size: 16px; /* Larger text */
}

/* Input, textarea, and select styling */
input[type="text"],
input[type="email"],
textarea,
select {
    width: 100%; /* Full width of their container */
    padding: 15px; /* Spacious padding */
    border: 1px solid #ccc; /* Subtle border */
    border-radius: 3px; /* Rounded corners */
    font-size: 16px; /* Larger text */
}

/* Specific textarea height */
textarea {
    height: 120px; /* Fixed height for address field */
}

/* Submit button styling */
button[type="submit"] {
    background-color: #0073aa; /* Blue background */
    color: #fff; /* White text */
    padding: 15px 30px; /* Larger padding */
    border: none;
    border-radius: 3px; /* Rounded corners */
    cursor: pointer;
    font-size: 18px; /* Prominent text */
}

/* Focus states for inputs */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
    border-color: #0073aa; /* Blue border on focus */
    outline: none; /* Remove default outline */
}

/* Hover effect for submit button */
button[type="submit"]:hover {
    background-color: #005a87; /* Darker blue on hover */
}

/* Responsive design for smaller screens */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column; /* Stack fields vertically */
    }

    .form-field,
    .form-field-full {
        margin-right: 0; /* Remove right margin */
        margin-bottom: 20px; /* Add space between stacked fields */
    }

    .form-field:last-child,
    .form-field-full:last-child {
        margin-bottom: 0; /* No extra space after last field */
    }
}