@charset "utf-8";

/* Header Form CSS -------------------------------------------------------------------- */


#header-grid-container {
    display: flex;
/* 	gap:10px; */
	width:1140px;
	justify-content:space-between;
}

.header-form-fields {
    align-self: center;
    justify-self: start;
	width:100%;
	font-family: Carlito, sans-serif !important;
	margin-right: 16px;
}

.headerbutton{
	width:100%;
}

/* Callback Form CSS ------------------------------------------------------------------------- */

#callback-form-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

#callback-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px; /* Provides consistent spacing between items */
	font-size:14px;
}

#callback-form .form-row {
    display: flex;
    flex-basis: 48%; /* Each row takes up roughly half the width */
    flex-direction: column;
    gap: 10px;
}

#callback-form .form-field {
    width: 100%;
}

#callback-form .form-field input,
#callback-form .form-field select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

#callback-form .submit-row {
    flex-basis: 100%; /* Full width for the submit button container */
    display: flex;
    justify-content: center; /* Center the button */
    margin-top: 10px;
}

#callback-form .callback-form-button {
    background-color: rgba(142, 165, 12, 1) !important;
    color: #fff !important;
    padding: 10px 15px !important;
    text-shadow: none;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 100;
    min-width: 200px; /* Give it a decent minimum size */
    cursor: pointer;
}

/* Inline Form CSS ------------------------------------------------------------------------- */

#inline-form-container {
    max-width: 100%;
    padding: 0px;
}

#inline-form {
    display: flex;
    align-items: center;
	justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

#inline-form .form-field {
    flex: 1;
    width: 150px;
	max-width:200px;
}

#inline-form .form-field input,
#inline-form .form-field select {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

#inline-form .inline-form-button {
    background-color: rgba(142, 165, 12, 1) !important;
    color: #fff !important;
    padding: 5px !important;
    text-shadow: none;
    border: none;
    border-radius: 5px;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 40px;
}

#inline-form .send-icon {
    color: #fff;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
}

/* Loading dots animation for inline form */
.loading-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.loading-dots span {
    color: #fff;
    font-size: 24px;
    animation: loadingDots 1.4s infinite;
    line-height: 1;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes loadingDots {
    0%, 60%, 100% {
        opacity: 0.3;
    }
    30% {
        opacity: 1;
    }
}

/* Contact us Form CSS ------------------------------------------------------------------- */

#form-container {
  display: flex;
  flex-wrap: wrap;
/*   gap: 10px; Optional: Adds space between the fields */
}

#form-field {
  flex: 1 1 48%;
  box-sizing: border-box;
	padding-right: 10px;
    padding-bottom: 5px;
}

/* New, more robust rule for full-width fields */
.form-field-full {
    flex-basis: 100%;
    padding-right: 10px;
    padding-bottom: 5px;
}

/* Target the last two fields to make them full width */
/* This rule is fragile and will be removed.
#form-field:nth-last-child(-n+2) {
  flex: 1 1 100%;
}
*/

.contact-us-form-button {
  width: 50% !important;
  display: block; /* Ensure the button is a block element to accept margin auto */
  margin: 0 auto; /* Center the button */
  background-color: rgba(142, 165, 12, 1) !important;
  color: #fff !important;
  padding: 10px !important;
  text-shadow: none;
  border: none;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 100;
}



/* Universal Code for all forms ------------------------------------ */

.ctu-form-style {
  width: 100%;
  box-sizing: border-box;
  font-size: 1.2em !important;
  font-weight: 100;
  padding: 8px !important;
  border-radius: 5px;
  border-width: 1px;
}

/* Triggers loading dots when the form has been submitted */

.loading:after {
    content: '.';
    animation: dots 1s steps(5, end) infinite;
}

/* Disable the loading:after for inline form button */
#inline-form .inline-form-button.loading:after {
    content: none;
}

/* Success checkmark for inline form */
.success-check {
    color: #fff;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
}

@keyframes dots {
    0%,
    20% {
        color: rgba(0, 0, 0, 0);
        text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
    }
    40% {
        color: white;
        text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);
    }
    60% {
        text-shadow: .25em 0 0 white, .5em 0 0 rgba(0, 0, 0, 0);
    }
    80%,
    100% {
        text-shadow: .25em 0 0 white, .5em 0 0 white;
    }
}

/* Form Validation and Message Styles
-------------------------------------------------- */

/* Style for the error message text (e.g., "First Name is required.") */
.form-error-message {
    color: #D8000C; /* A standard error red color */
    font-size: 0.9em;
    display: block;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Style for an input field that has a validation error */
.field-error-active {
    border: 2px solid #D8000C !important; /* Use !important to override other border styles */
}

/* Generic container for success or error messages shown after submission */
.form-generic-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
    text-align: center;
    border: 1px solid transparent;
    width: 100%;
    flex-basis: 100%;
    box-sizing: border-box;
}

/* Style for a success message */
.form-generic-message.success {
    background-color: #DFF2BF;
    color: #4F8A10;
    border-color: #4F8A10;
}

/* Style for an error message */
.form-generic-message.error {
    background-color: #FFD2D2;
    color: #D8000C;
    border-color: #D8000C;
}

/* Mobile Responsive Styles for All Forms ----------------------------------------------- */

/* Mobile screens (under 768px) */
@media (max-width: 767px) {
  
  /* Header Form Mobile Styles */
  #header-grid-container {
    flex-direction: column;
    width: 100%;
    padding: 0 10px;
  }
  
  .header-form-fields {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }
  
  /* Contact Form Mobile Styles */
  #form-container {
    flex-direction: column;
  }
  
  #form-field {
    flex: 1 1 100% !important; /* Makes all fields full width */
    padding-right: 0;
    width: 100%;
  }
  
  .form-field-full {
    flex-basis: 100%;
    padding-right: 0;
    width: 100%;
  }
  
  .contact-us-form-button {
    width: 100% !important;
  }
  
  /* Callback Form Mobile Styles */
  #callback-form-container {
    padding: 10px;
  }
  
  #callback-form {
    flex-direction: column;
  }
  
  #callback-form .form-row {
    flex-basis: 100%;
    width: 100%;
  }
  
  #callback-form .form-field {
    width: 100%;
    margin-bottom: 10px;
  }
  
  #callback-form .callback-form-button {
    width: 100%;
    min-width: unset;
  }
  
  /* Inline Form Mobile Styles */
  #inline-form-container {
    padding: 10px;
  }
  
  #inline-form {
    flex-direction: column;
  }
  
  #inline-form .form-field {
    width: 100%;
    min-width: unset;
  }
  
  #inline-form .inline-form-button {
    width: 100%;
    justify-content: center;
  }
}

/* Make sure to add this at the end of your existing CSS file. */