/* Target the form within the #form-container container */
#form-container form {
    display: flex;
    flex-wrap: wrap; /* Allows form fields to wrap to the next line */
    background-color: #f7f7f7; /* Light grey background for the form area */
    padding: 3rem; /* Increased padding for better spacing */
    border-radius: 0.75rem; /* Rounded corners */
    max-width: 650px; /* Adjust max width as needed to match image */
    width: 95%; /* Responsive width */
    margin: 2rem auto; /* Center the form horizontally */
    color: #333;
    box-sizing: border-box; /* Include padding in element's total width/height */
}

/* Container for the form fields, making it a flex container for rows */
#form-container .form_fields {
    display: flex;
    flex-wrap: wrap; /* Allows individual fields to wrap */
    gap: 1.5rem; /* Space between columns and rows */
    width: 100%; /* Ensure it takes full width of its parent form */
}

/* Individual form field containers */
#form-container .form_field {
    flex-grow: 1; /* Allows fields to grow to fill available space */
    /* flex-shrink: 0; if you want to prevent them from shrinking below their content */
}

/* Specific sizing for two-column input fields (First Name, Last Name, Email, Phone) */
#form-container .contact-first-name,
#form-container .contact-last-name,
#form-container .contact-email,
#form-container .contact-phone {
    /* Calculate width for two columns, accounting for the the gap.
        1.5rem is the gap. 0.75rem is half of that, so it's subtracted from 50%
        to ensure two elements plus the gap fit perfectly on one line. */
    flex-basis: calc(50% - 0.75rem);
    min-width: 180px; /* Minimum width to prevent fields from becoming too narrow on small screens */
}

/* Full width for the message textarea field */
#form-container .contact-message {
    flex-basis: 100%; /* Forces it to take full width and wrap to a new line */
}

/* Input elements and textarea styling */
#form-container input[type="text"],
#form-container input[type="email"],
#form-container textarea {
    width: 100%; /* Make input/textarea fill its parent .form_field div */
    padding: 0.75rem 0; /* Padding for the text, 0px left/right as the border is only bottom */
    margin-bottom: 0.2rem; /* Small space below the input line */
    border: none;
    border-bottom: 1px solid #ccc; /* Bottom border only */
    background-color: transparent; /* No background fill */
    font-size: 1rem;
    color: #555;
    outline: none; /* Remove outline on focus */
    border-radius: 0; /* Ensure no default browser border-radius */
}

/* Hide labels, as placeholders are used for visual cues */
#form-container .form_field_label {
    display: none;
}

/* Placeholder styling */
#form-container input::placeholder,
#form-container textarea::placeholder {
    color: #999; /* Lighter color for placeholders */
}

/* Focused input styling */
#form-container input:focus,
#form-container textarea:focus {
    border-bottom-color: #333; /* Darker border on focus */
}

/* Textarea specific styles */
#form-container .contact-message textarea {
    resize: vertical; /* Allow vertical resizing for the message field */
    min-height: 100px; /* Minimum height for the message area */
    padding-top: 0.75rem; /* Ensure padding for multiline text */
}

/* Submit button container styling */
#form-container .form_submit {
    width: 100%; /* Ensure submit container takes full width */
    text-align: right; /* Align button to the right within its container */
    margin-top: 2rem; /* Space above the button */
}

/* Submit button styling */
#form-container .form_submit_input {
    background-color: #333; /* Dark background */
    color: #fff; /* White text */
    padding: 0.75rem 2rem; /* Padding for the button */
    border: none;
    border-radius: 0.25rem; /* Slightly rounded corners */
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#form-container .form_submit_input:hover {
    background-color: #555; /* Darker on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Enhanced shadow on hover */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 640px) {
    #form-container form {
        padding: 1.5rem; /* Reduce padding on smaller screens */
    }
    /* On small screens, stack all input fields to full width */
    #form-container .contact-first-name,
    #form-container .contact-last-name,
    #form-container .contact-email,
    #form-container .contact-phone {
        flex-basis: 100%; /* Each field takes full width */
    }
}