/* fix Clio contact form */
/* Reset margin and padding for the container to ensure consistent layout */
#lf_form_container {
    margin: 0;
    padding: 0;
}

/* Apply flexbox layout to the container of the first four fields */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* This will ensure the fields are spaced evenly */
}

/* Style for individual form field containers */
#lf_form_container p {
    position: relative; /* Important for positioning the labels */
    margin-bottom: 16px; /* Space between form fields */
}

/* Adjust the width of the first four fields to be 50% minus margin */
#lf_first_name_block, #lf_last_name_block, #lf_email_block, #lf_phone_block {
    width: calc(50% - 20px); /* Adjust 20px for margin/gap between fields */
    float: left; /* Help align side by side */
}

/* Styling inputs and textarea to take full available width */
input[type="text"], input[type="email"], textarea {
    width: 95%;
    padding: 30px 16px 16px 16px;
    box-sizing: border-box; /* Ensures padding does not affect overall width */
}

/* Correcting label position */
.description {
    position: absolute;
    top: 0;
    left: 16px;
    transition: all 0.3s;
    pointer-events: none; /* Allows clicking through to the input */
}

/* Move labels up on focus within the input or if the field is filled */
input:placeholder-shown + .description,
textarea:placeholder-shown + .description {
    top: 50%;
    transform: translateY(-50%);
}

input:not(:placeholder-shown) + .description,
textarea:not(:placeholder-shown) + .description,
input:focus + .description,
textarea:focus + .description {
    top: -20px;
    font-size: smaller;
    color: #666;
}

/* Ensuring message block takes full width */
#lf_message_block {
    width: 100%;
    clear: both; /* Clears the float effect */
}

/* Adjustments to submit button for better appearance */
#saveForm {
    background-color: #00aa00;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}